/* ==========================================================================
   Kufri Heritage Resort & Spa — Blog design system
   Applies to single posts and the blog/archive listing.

   Layered ON TOP of the Elementor Theme Builder template (elementor-9703),
   never stripping it. Stripping Elementor CSS is what broke the 5-star page
   in September, so this sheet only overrides what it needs to.

   Brand: navy #1E2A6E · deeper navy #151D52 · red #D2122A
   Type:  Cormorant Garamond (display) · Inter (body)
   ========================================================================== */

body.single-post,
body.blog,
body.archive {
  --k-navy:      #1E2A6E;
  --k-navy-deep: #151D52;
  --k-red:       #D2122A;
  --k-red-deep:  #A80D1F;
  --k-ink:       #14161F;
  --k-body:      #33384D;
  --k-grey:      #767C93;
  --k-line:      #DFE3EE;
  --k-tint:      #F4F6FB;
  --k-white:     #FFFFFF;
  --k-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --k-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --k-measure: 68ch;
}

/* --------------------------------------------------------------------------
   1. DEAD SPACE
   The template reserved 276px above the H1 on desktop. Reclaim it.
   -------------------------------------------------------------------------- */
body.single-post .elementor-location-single > .elementor-element:first-child { padding-top: 0; }
body.single-post .elementor-location-single .elementor-widget-spacer { display: none; }

/* --------------------------------------------------------------------------
   2. DUPLICATE TABLE OF CONTENTS
   The template ships Elementor's TOC widget AND khr-blog-cro.php injects
   nav.khr-toc. Two tables of contents on one page. Keep ours (built from the
   real headings, fully brandable) and retire Elementor's.
   -------------------------------------------------------------------------- */
body.single-post .elementor-widget-table-of-contents { display: none !important; }

/* --------------------------------------------------------------------------
   3. ARTICLE HEAD
   -------------------------------------------------------------------------- */
body.single-post h1.templately-heading-title,
body.single-post .elementor-location-single h1 {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--k-navy);
  margin: 0 0 20px;
  max-width: 22ch;
}
/* post meta row (author · date) */
body.single-post .elementor-widget-post-info .elementor-icon-list-item {
  font-family: var(--k-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-grey);
}
body.single-post .elementor-widget-post-info .elementor-icon-list-icon svg,
body.single-post .elementor-widget-post-info .elementor-icon-list-icon i { color: var(--k-red); }

/* featured image */
body.single-post .khr-hero-thumb,
body.single-post .elementor-widget-theme-post-featured-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 40px;
}
body.single-post .khr-hero-thumb { margin: 0 0 40px; }
body.single-post .khr-hero-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

/* --------------------------------------------------------------------------
   4. BODY TYPOGRAPHY
   Comfortable measure and rhythm. 18px/1.75 is the readable band for long
   travel content that people scan on a phone before booking.
   -------------------------------------------------------------------------- */
body.single-post .post-content {
  font-family: var(--k-sans);
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--k-body);
}
body.single-post .post-content > p,
body.single-post .post-content > ul,
body.single-post .post-content > ol,
body.single-post .post-content > blockquote,
body.single-post .post-content > h2,
body.single-post .post-content > h3,
body.single-post .post-content > h4 { max-width: var(--k-measure); }

body.single-post .post-content p { margin: 0 0 1.35em; }

body.single-post .post-content h2 {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(1.65rem, 2.9vw, 2.3rem);
  line-height: 1.2;
  color: var(--k-navy);
  margin: 2.6em 0 0.7em;
  padding-top: 0.6em;
  position: relative;
}
body.single-post .post-content h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 3px;
  background: var(--k-red);
}
body.single-post .post-content h3 {
  font-family: var(--k-sans);
  font-weight: 650;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.35;
  color: var(--k-navy);
  margin: 2em 0 0.6em;
}
body.single-post .post-content h4 {
  font-family: var(--k-sans);
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--k-ink);
  margin: 1.7em 0 0.5em;
}

body.single-post .post-content a {
  color: var(--k-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
body.single-post .post-content a:hover { color: var(--k-red-deep); }

body.single-post .post-content strong { color: var(--k-ink); font-weight: 650; }

body.single-post .post-content ul,
body.single-post .post-content ol { margin: 0 0 1.5em; padding-left: 1.35em; }
body.single-post .post-content li { margin-bottom: 0.55em; padding-left: 0.2em; }
body.single-post .post-content ul > li::marker { color: var(--k-red); }
body.single-post .post-content ol > li::marker { color: var(--k-red); font-weight: 600; }

body.single-post .post-content blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--k-red);
  font-family: var(--k-display);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--k-navy);
  font-style: italic;
}
body.single-post .post-content blockquote p:last-child { margin-bottom: 0; }

body.single-post .post-content img { border-radius: 8px; height: auto; }
body.single-post .post-content figure { margin: 2.2em 0; }
body.single-post .post-content figcaption {
  font-size: 13px; color: var(--k-grey); margin-top: 10px; text-align: center;
}

/* tables: readable, and they must scroll rather than break the page on a phone */
body.single-post .post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 2em 0;
}
body.single-post .post-content thead th {
  background: var(--k-navy);
  color: #fff;
  font-family: var(--k-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 16px;
}
body.single-post .post-content tbody td { padding: 13px 16px; border-bottom: 1px solid var(--k-line); }
body.single-post .post-content tbody tr:nth-child(even) { background: var(--k-tint); }

/* --------------------------------------------------------------------------
   5. KEY TAKEAWAYS
   Rolled onto 208 posts in August. It was inheriting default list styling.
   -------------------------------------------------------------------------- */
body.single-post .post-content .key-takeaways,
body.single-post .post-content .khr-takeaways,
body.single-post .post-content [class*="key-takeaway"] {
  background: var(--k-tint);
  border: 1px solid var(--k-line);
  border-left: 4px solid var(--k-red);
  border-radius: 8px;
  padding: 26px 30px;
  margin: 0 0 2.6em;
  max-width: var(--k-measure);
}
body.single-post .post-content [class*="key-takeaway"] > *:first-child { margin-top: 0; }
body.single-post .post-content [class*="key-takeaway"] > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. TABLE OF CONTENTS (ours, redesigned)
   -------------------------------------------------------------------------- */
body.single-post .khr-toc {
  background: var(--k-white);
  border: 1px solid var(--k-line);
  border-left: 4px solid var(--k-navy);
  border-radius: 8px;
  padding: 22px 26px 24px;
  margin: 0 0 2.8em;
  max-width: var(--k-measure);
  font-family: var(--k-sans);
  box-shadow: 0 1px 3px rgba(20,22,31,.04);
}
body.single-post .khr-toc__title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-red);
}
body.single-post .khr-toc ol { margin: 0; padding-left: 1.2em; line-height: 1.5; }
body.single-post .khr-toc li { margin-bottom: 9px; }
body.single-post .khr-toc li::marker { color: var(--k-grey); font-size: 0.9em; }
body.single-post .khr-toc ol ol { margin-top: 8px; padding-left: 1.1em; font-size: 0.94em; }
body.single-post .khr-toc a {
  color: var(--k-navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
body.single-post .khr-toc a:hover { color: var(--k-red); border-bottom-color: var(--k-red); }

/* --------------------------------------------------------------------------
   7. CALL TO ACTION
   The whole point of the blog: turn a reader into an enquiry. Two variants,
   both on brand, both with a 44px minimum tap target.
   -------------------------------------------------------------------------- */
body.single-post .khr-cta {
  background: linear-gradient(140deg, var(--k-navy) 0%, var(--k-navy-deep) 100%);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 38px 36px;
  margin: 3.2em 0;
  text-align: center;
  box-shadow: 0 10px 34px rgba(30,42,110,.18);
  max-width: var(--k-measure);
  position: relative;
  overflow: hidden;
}
body.single-post .khr-cta::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--k-red);
}
body.single-post .khr-cta__eyebrow {
  font-family: var(--k-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF8A98;
  margin-bottom: 12px;
}
body.single-post .khr-cta__title {
  font-family: var(--k-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
}
body.single-post .khr-cta__sub {
  font-family: var(--k-sans);
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  margin: 0 auto 24px;
  max-width: 46ch;
}
body.single-post .khr-cta__actions {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
body.single-post .khr-cta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 6px;
  font-family: var(--k-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform .15s var(--k-ease, ease), box-shadow .15s ease, background .15s ease;
}
body.single-post .khr-cta__btn:hover { transform: translateY(-2px); }
body.single-post .khr-cta__btn--primary { background: var(--k-red); color: #fff; }
body.single-post .khr-cta__btn--primary:hover { background: var(--k-red-deep); color: #fff; box-shadow: 0 8px 20px rgba(210,18,42,.34); }
body.single-post .khr-cta__btn--wa { background: #25D366; color: #0B3B23; }
body.single-post .khr-cta__btn--wa:hover { background: #1EB955; color: #fff; }
body.single-post .khr-cta__btn--phone { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
body.single-post .khr-cta__btn--phone:hover { background: #fff; color: var(--k-navy); border-color: #fff; }

/* mid-article variant: lighter, so it interrupts without shouting */
body.single-post .khr-cta--mid {
  background: var(--k-tint);
  color: var(--k-ink);
  border: 1px solid var(--k-line);
  box-shadow: none;
}
body.single-post .khr-cta--mid .khr-cta__eyebrow { color: var(--k-red); }
body.single-post .khr-cta--mid .khr-cta__title { color: var(--k-navy); }
body.single-post .khr-cta--mid .khr-cta__sub { color: var(--k-body); }
body.single-post .khr-cta--mid .khr-cta__btn--phone { color: var(--k-navy); border-color: rgba(30,42,110,.4); }
body.single-post .khr-cta--mid .khr-cta__btn--phone:hover { background: var(--k-navy); color: #fff; border-color: var(--k-navy); }

/* --------------------------------------------------------------------------
   8. BLOG LISTING
   Cards were 390px / 270px / 390px tall because the source images are a mix
   of 600x650 portrait and 1280x960 landscape with no ratio locked, so the
   headlines never lined up. Lock 3:2 and let the card stretch.
   -------------------------------------------------------------------------- */
body.blog article,
body.archive article,
body.blog .elementor-post,
body.archive .elementor-post {
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.blog article img,
body.archive article img,
body.blog .elementor-post__thumbnail img,
body.archive .elementor-post__thumbnail img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
}
body.blog article h2, body.archive article h2,
body.blog article h3, body.archive article h3 {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.22;
  color: var(--k-navy);
  margin: 18px 0 10px;
}
body.blog article h2 a, body.archive article h2 a,
body.blog article h3 a, body.archive article h3 a {
  color: inherit; text-decoration: none;
}
body.blog article h2 a:hover, body.archive article h2 a:hover,
body.blog article h3 a:hover, body.archive article h3 a:hover { color: var(--k-red); }

/* excerpts: clamp so a long auto-excerpt cannot unbalance the row */
body.blog article p, body.archive article p,
body.blog .elementor-post__excerpt p, body.archive .elementor-post__excerpt p {
  font-family: var(--k-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--k-body);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.single-post .post-content { font-size: 1.02rem; }
  body.single-post .khr-cta { padding: 32px 26px; }
}

@media (max-width: 640px) {
  body.single-post h1.templately-heading-title,
  body.single-post .elementor-location-single h1 { max-width: none; }

  body.single-post .post-content { font-size: 1rem; line-height: 1.75; }
  body.single-post .post-content h2 { margin-top: 2.1em; }

  /* full-width edge-to-edge feel for the takeaway and TOC cards */
  body.single-post .khr-toc { padding: 20px 20px 22px; }
  body.single-post .post-content [class*="key-takeaway"] { padding: 22px 20px; }

  body.single-post .khr-cta { padding: 30px 22px; border-radius: 10px; }
  body.single-post .khr-cta__actions { flex-direction: column; }
  body.single-post .khr-cta__btn { width: 100%; }

  /* wide tables must scroll inside their own box, never widen the page */
  body.single-post .post-content table { display: block; overflow-x: auto; white-space: nowrap; }

  body.blog article h2, body.archive article h2,
  body.blog article h3, body.archive article h3 { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   10. OVERRIDES THAT MUST BEAT ELEMENTOR
   Elementor emits per-widget selectors like
   `.elementor-9703 .elementor-element.elementor-element-4ccb793 h1`
   which is (0,4,1) and outranks anything reasonable this sheet can write.
   These few declarations are the ones that carry the brand, so they are
   marked important deliberately rather than by accident.
   -------------------------------------------------------------------------- */
body.single-post h1.templately-heading-title,
body.single-post .elementor-location-single h1.templately-heading-title {
  font-family: var(--k-display) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  color: var(--k-navy) !important;
  letter-spacing: -0.01em !important;
}
body.single-post .post-content,
body.single-post .post-content p,
body.single-post .post-content li {
  font-family: var(--k-sans) !important;
}
body.single-post .post-content h2 { font-family: var(--k-display) !important; color: var(--k-navy) !important; }
body.single-post .post-content h3 { font-family: var(--k-sans) !important; color: var(--k-navy) !important; }

/* --------------------------------------------------------------------------
   11. HEADER OVERFLOW (theme pages)
   The Boostify nav widget renders 1440px wide while starting at x=309, so
   every theme page scrolls 309px sideways on desktop. Let the nav size to
   its content and wrap instead of forcing a full-viewport width.
   -------------------------------------------------------------------------- */
.elementor-location-header .elementor-element:has(> .elementor-widget-container > .boostify-navigation--widget) {
  width: auto !important;
  max-width: 100%;
  min-width: 0;
}
.boostify-navigation--widget,
.boostify-main-navigation { max-width: 100%; width: auto; }
.boostify-menu { flex-wrap: wrap; row-gap: 2px; }

/* --------------------------------------------------------------------------
   12. FINAL CASCADE PASS
   Verified in-browser: blog.css parses fully (79 rules) and every remaining
   defect is a cascade loss to Elementor's per-widget selectors, not a syntax
   problem. These are the properties that carry the design, so they are
   escalated deliberately.
   -------------------------------------------------------------------------- */

/* 12a. Superseded by 13a, which owns section spacing in one place. */

/* 12b. Page ground. The article sat on a cream panel that fights the cool
   navy brand. */
body.single-post .elementor-location-single > .elementor-element,
body.single-post .elementor-location-single > .elementor-element > .e-con-inner {
  background-color: var(--k-white) !important;
}
body.single-post { background: var(--k-white); }

/* 12c. Table of contents links were rendering as default browser blue
   (#0066CC) because a theme link rule outranked the component. */
body.single-post .khr-toc a,
body.single-post .post-content .khr-toc a {
  color: var(--k-navy) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
}
body.single-post .khr-toc a:hover,
body.single-post .post-content .khr-toc a:hover {
  color: var(--k-red) !important;
  border-bottom-color: var(--k-red) !important;
}

/* 12d. Header overflow. The nav computes to width:1440px inside a row that
   already holds the logo, so every theme page scrolled 309px sideways. */
.boostify-navigation--widget,
.boostify-main-navigation,
.elementor-element:has(> .elementor-widget-container > .boostify-navigation--widget),
.elementor-element:has(> .elementor-widget-container > .boostify-navigation--widget) > .elementor-widget-container {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.boostify-menu {
  flex-wrap: wrap !important;
  row-gap: 2px;
  justify-content: flex-end;
}

/* 12e. Belt and braces: nothing on a blog page may scroll the page sideways. */
body.single-post, body.blog, body.archive { overflow-x: clip; }

/* 12f. The nav does not overflow because of a width bug: the menu genuinely
   needs ~1413px beside the logo at 1440px. Tighten the item metrics so the
   full menu fits on one line, and allow wrapping as a fallback. */
.boostify-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end;
  align-items: center;
}
.boostify-menu > li > a {
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  padding-left: 11px !important;
  padding-right: 11px !important;
  white-space: nowrap;
}

/* 12g. The true overflow source. The nav's wrapper inside the Boostify header
   computes to width:1440px with flex:0 0 auto, so it sits at x=309 and cannot
   shrink, pushing the page 309px sideways. Let the wrapper chain flex. */
.boostify-site-header .elementor-element:has(.boostify-navigation--widget) {
  width: auto !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.boostify-site-header { overflow-x: clip; }

/* 12h. Menu must fit on ONE line. The earlier child-combinator rule missed
   because the anchors are not direct children of the list items in every
   item type (dropdown parents wrap theirs). */
.boostify-site-header .boostify-menu li a {
  font-size: 12.5px !important;
  letter-spacing: 0.03em !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
}
.boostify-site-header .boostify-menu { flex-wrap: nowrap !important; }

/* 12i. Remaining dead space. EVERY section in this template carries 100px of
   top and bottom padding, so the page reads as a series of empty bands. 12a
   only tightened the first one. */
body.single-post .elementor-location-single > .elementor-element > .e-con-inner {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
body.single-post .elementor-location-single > .elementor-element:first-child > .e-con-inner {
  padding-top: 40px !important;
  padding-bottom: 8px !important;
}

/* --------------------------------------------------------------------------
   13. MOBILE POLISH + BRAND CONSISTENCY
   -------------------------------------------------------------------------- */

/* 13a. Sections were double-padding: the outer element AND its .e-con-inner
   both carried padding, stacking 84px of nothing above the meta row. Own the
   spacing in one place. */
body.single-post .elementor-location-single > .elementor-element {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.single-post .elementor-location-single > .elementor-element > .e-con-inner {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
body.single-post .elementor-location-single > .elementor-element:first-child > .e-con-inner {
  padding-top: 36px !important;
  padding-bottom: 4px !important;
}

/* 13b. The byline was set at 20px, competing with the headline. It is
   supporting information, so it should read as supporting information. */
body.single-post .elementor-widget-post-info .elementor-icon-list-text,
body.single-post .elementor-widget-post-info .elementor-icon-list-item,
body.single-post .elementor-widget-post-info a {
  font-family: var(--k-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--k-grey) !important;
}
body.single-post .elementor-widget-post-info .elementor-icon-list-icon svg { fill: var(--k-red) !important; width: 13px; height: 13px; }

/* 13c. The mobile action bar shipped orange, which belongs to no part of this
   brand. Call goes brand red, WhatsApp keeps its own green because that green
   is the recognisable affordance. */
.sticky-btn a[href^="tel:"],
.sticky-btn .call-us,
.sticky-btn > *:first-child a,
.sticky-btn > *:first-child {
  background: var(--k-red, #D2122A) !important;
  color: #fff !important;
}
.sticky-btn a { font-family: "Inter", Arial, sans-serif !important; font-weight: 600 !important; letter-spacing: .01em; }
.sticky-btn { box-shadow: 0 -2px 14px rgba(20,22,31,.14); }

/* 13d. Share card is supporting furniture, not the headline act. Calm it and
   stop it pushing the article below the fold on a phone. */
@media (max-width: 900px) {
  body.single-post .elementor-widget-social-icons,
  body.single-post .elementor-widget-share-buttons { margin-bottom: 8px; }
  body.single-post .khr-toc { margin-top: 4px; }
}

/* 13e. Final spacing calibration, measured on a 390px viewport:
   header 63 -> byline 143 was 80px of nothing, and title -> share card was
   121px. Section inner padding and the share row's own 20px both contributed. */
body.single-post .elementor-location-single > .elementor-element:nth-child(2) > .e-con-inner {
  padding-top: 22px !important;
}
body.single-post .elementor-location-single .elementor-share-buttons,
body.single-post .elementor-location-single .e-con-full > .e-con-full[class*="83e217a"] {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
body.single-post h1.templately-heading-title { margin-bottom: 8px !important; }

/* --------------------------------------------------------------------------
   14. LINK COLOURS
   A theme rule paints every anchor #0066CC with enough weight to beat the
   component styles, so CTA buttons rendered as blue underlined text and body
   links ignored the brand red. Escalate the anchors that matter.
   -------------------------------------------------------------------------- */
body.single-post .post-content a:not(.khr-cta__btn):not(.khr-toc a) {
  color: var(--k-red) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
body.single-post .post-content a:not(.khr-cta__btn):hover { color: var(--k-red-deep) !important; }

/* Buttons are buttons, not links. */
body.single-post .khr-cta .khr-cta__btn,
body.single-post .post-content .khr-cta .khr-cta__btn,
body.single-post a.khr-cta__btn {
  text-decoration: none !important;
  border-bottom: 0 !important;
}
body.single-post .khr-cta .khr-cta__btn--primary { background: var(--k-red) !important; color: #fff !important; }
body.single-post .khr-cta .khr-cta__btn--primary:hover { background: var(--k-red-deep) !important; color: #fff !important; }
body.single-post .khr-cta .khr-cta__btn--wa { background: #25D366 !important; color: #08351F !important; }
body.single-post .khr-cta .khr-cta__btn--wa:hover { background: #1EB955 !important; color: #fff !important; }
body.single-post .khr-cta .khr-cta__btn--phone { color: #fff !important; border: 1.5px solid rgba(255,255,255,.55) !important; background: transparent !important; }
body.single-post .khr-cta .khr-cta__btn--phone:hover { background: #fff !important; color: var(--k-navy) !important; }
body.single-post .khr-cta--mid .khr-cta__btn--phone { color: var(--k-navy) !important; border-color: rgba(30,42,110,.42) !important; }
body.single-post .khr-cta--mid .khr-cta__btn--phone:hover { background: var(--k-navy) !important; color: #fff !important; }

/* ==========================================================================
   15. SAME CHROME AS THE HOMEPAGE
   The blog now loads the full design stack and chrome.js builds the identical
   nav and footer into #site-nav / #site-footer. The old Neve + Boostify
   chrome must go, or the page carries two headers and two footers.
   ========================================================================== */
body.khr-blog-design .boostify-site-header,
body.khr-blog-design .boostify-site-footer,
body.khr-blog-design header.boostify-site-header,
body.khr-blog-design footer.boostify-site-footer,
body.khr-blog-design .bhf-site > header,
body.khr-blog-design .bhf-site > footer,
body.khr-blog-design .sticky-btn,
body.khr-blog-design .boostify-menu-sidebar { display: none !important; }

/* The design nav is position:fixed, so the article needs to clear it. */
body.khr-blog-design .elementor-location-single,
body.khr-blog-design .bhf-site { padding-top: 0; }
body.khr-blog-design .elementor-location-single > .elementor-element:first-child > .e-con-inner {
  padding-top: 150px !important;
}
@media (max-width: 900px) {
  body.khr-blog-design .elementor-location-single > .elementor-element:first-child > .e-con-inner {
    padding-top: 120px !important;
  }
}

/* Footer and nav are the shared components: let their own sheet own them. */
body.khr-blog-design #site-nav.nav,
body.khr-blog-design #site-footer.footer { display: block; }

/* The sticky mobile bar is the shared one now, so give the page room for it. */
@media (max-width: 640px) {
  body.khr-blog-design { padding-bottom: 76px; }
}

/* 15a. The nav is transparent by design because the homepage puts it over a
   dark hero photo and only turns it navy once you scroll. A blog post has no
   hero, so the transparent state left pale blue links on white. Pin the
   scrolled (solid navy) state on blog pages. */
body.khr-blog-design #site-nav.nav,
body.khr-blog-design .nav {
  background: var(--color-pine) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
body.khr-blog-design .nav .nav__links a,
body.khr-blog-design .nav .nav__phone,
body.khr-blog-design .nav .brand__name,
body.khr-blog-design .nav .brand__sub { color: #F7F8FA !important; }
body.khr-blog-design .nav .nav__links a:hover { color: var(--color-copper) !important; }
body.khr-blog-design .nav .nav__toggle span { background: #F7F8FA !important; }

/* ==========================================================================
   16. THE POST TEMPLATE
   Our own template (khr-blog-template.php) replaces the Elementor single
   layout entirely, so this owns the spacing outright. Mobile first, no
   inherited padding to fight.
   ========================================================================== */
body.khr-post-page { background: #fff; }

.khr-post__wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* --- head ---------------------------------------------------------------- */
.khr-post__head { padding: 104px 0 0; }

.khr-post__crumbs {
  font-family: var(--k-sans);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--k-grey);
  margin-bottom: 22px;
}
.khr-post__crumbs a { color: var(--k-grey); text-decoration: none; }
.khr-post__crumbs a:hover { color: var(--k-red); }
.khr-post__crumbs span { margin: 0 7px; opacity: .5; }

.khr-post__eyebrow {
  font-family: var(--k-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--k-red);
  margin-bottom: 14px;
}

.khr-post__title {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(2rem, 6.4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--k-navy);
  margin: 0 0 16px;
}

.khr-post__standfirst {
  font-family: var(--k-sans);
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--k-body);
  margin: 0 0 18px;
}

.khr-post__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--k-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--k-grey);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--k-line);
}

/* --- hero ---------------------------------------------------------------- */
.khr-post__hero { margin: 26px 0 0; }
.khr-post__hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

/* --- body ---------------------------------------------------------------- */
.khr-post__body { padding: 30px 0 8px; }

/* --- related ------------------------------------------------------------- */
.khr-post__related {
  margin-top: 48px;
  padding: 44px 0 56px;
  background: var(--k-tint);
  border-top: 1px solid var(--k-line);
}
.khr-post__related h2 {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--k-navy);
  margin: 0 0 22px;
}
.khr-related__grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.khr-related__card { text-decoration: none; display: block; }
.khr-related__card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}
.khr-related__card h3 {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--k-navy);
  margin: 0;
}
.khr-related__card:hover h3 { color: var(--k-red); }

/* --- larger screens ------------------------------------------------------ */
@media (min-width: 768px) {
  .khr-post__wrap { padding-left: 32px; padding-right: 32px; }
  .khr-post__head { padding-top: 132px; }
  .khr-post__hero { margin-top: 32px; }
  .khr-post__body { padding-top: 38px; }
  .khr-related__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .khr-post__wrap { max-width: 820px; }
}

/* The template supplies its own measure, so the article column fills it. */
body.khr-post-page .post-content > p,
body.khr-post-page .post-content > ul,
body.khr-post-page .post-content > ol,
body.khr-post-page .post-content > h2,
body.khr-post-page .post-content > h3,
body.khr-post-page .post-content > h4,
body.khr-post-page .post-content > blockquote,
body.khr-post-page .khr-toc,
body.khr-post-page .khr-cta,
body.khr-post-page .post-content [class*="key-takeaway"] { max-width: none; }

body.khr-post-page .post-content h2:first-child,
body.khr-post-page .post-content > *:first-child { margin-top: 0; }