/* ============================================================
   KD shared chrome — loads on EVERY page.
   Uses theme.json preset vars so it tracks the locked palette.
   Page-specific component CSS lives in home/service/location.css.
   ============================================================ */

:root {
  --kd-forest: var(--wp--preset--color--forest, #1a3a0f);
  --kd-canopy: var(--wp--preset--color--canopy, #2d5a1b);
  --kd-leaf:   var(--wp--preset--color--leaf, #4e8a32);
  --kd-moss:   var(--wp--preset--color--moss, #7ab84e);
  --kd-cream:  var(--wp--preset--color--cream, #f7f3ec);
  --kd-mist:   var(--wp--preset--color--mist, #f0f4f0);
  --kd-ink:    var(--wp--preset--color--ink, #1c1c1c);
  --kd-amber:  var(--wp--preset--color--amber, #d97706);

  /* Type system: one clean sans for everything, one signature script accent. */
  --kd-font:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --kd-accent: 'Caveat', 'Segoe Script', cursive;
}

body { font-family: var(--kd-font); }

/* Accessibility — visible keyboard focus ring (mouse clicks stay clean). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--kd-amber, #d6892a); outline-offset: 2px; border-radius: 3px;
}

/* Signature accent — the little kicker labels above section headings.
   Caveat runs small, so it's bumped up and not uppercased/tracked. */
.eyebrow,
.kd-city .eyebrow {
  font-family: var(--kd-accent);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
}
.kd-skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px 16px; z-index: 1000; }
.kd-skip:focus { left: 8px; top: 8px; }

/* ── Top utility bar (contact + social) ── */
.kd-topbar { background: var(--kd-forest); color: rgba(255,255,255,.8); font-size: .8rem; }
.kd-topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 7px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.kd-topbar-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kd-topbar-item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.8); text-decoration: none; font-weight: 500; transition: color .15s; }
.kd-topbar-item:hover { color: #fff; }
.kd-topbar-item svg { width: 14px; height: 14px; fill: var(--kd-moss); }
.kd-topbar-item[href^="mailto"] svg, .kd-topbar-item svg[stroke] { fill: none; stroke: var(--kd-moss); }
.kd-topbar-note { color: var(--kd-moss); font-weight: 600; }
.kd-topbar-social { display: flex; align-items: center; gap: 8px; }
.kd-topbar-social a {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); transition: background .2s, border-color .2s;
}
.kd-topbar-social a:hover { background: var(--kd-amber); border-color: var(--kd-amber); }
.kd-topbar-social svg { width: 13px; height: 13px; fill: rgba(255,255,255,.8); }
@media (max-width: 700px) {
  .kd-topbar-note, .kd-topbar-item[href^="mailto"] { display: none; }
  .kd-topbar-inner { padding: 6px 18px; }
}

/* ── Site header ── */
.kd-header {
  position: sticky; top: 0; z-index: 100; background: #fff;
  border-bottom: 1px solid var(--kd-mist); box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.kd-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 12px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px;
}
.kd-nav { justify-self: center; }
.kd-header-inner > .kd-header-cta { justify-self: end; }
.kd-logo { font-size: 1.2rem; font-weight: 800; color: var(--kd-forest); display: flex; align-items: center; gap: 8px; }
.kd-logo img { max-height: 44px; width: auto; display: block; }
.kd-nav { display: flex; align-items: center; gap: 30px; }
.kd-nav a { font-size: .9rem; font-weight: 600; color: var(--kd-ink); text-decoration: none; transition: color .15s; }
/* Top-level items share one even gap. Caret takes zero layout width (see
   .kd-caret negative margin) so every label sits the same distance apart. */
.kd-nav > a, .kd-nav-item > a {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  padding: 8px 0; transition: color .15s;
}
.kd-nav > a:hover, .kd-nav-item > a:hover,
.kd-has-mega:focus-within > a { color: var(--kd-forest); }
.kd-header-cta {
  display: inline-flex; align-items: center; gap: 8px; background: var(--kd-forest);
  color: #fff; padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: .9rem;
  text-decoration: none; transition: background .2s, transform .15s; white-space: nowrap;
}
.kd-header-cta:hover { background: var(--kd-canopy); transform: translateY(-1px); }
@media (max-width: 860px) {
  .kd-nav { display: none; }
  .kd-header-inner { display: flex; justify-content: space-between; }
}

/* Remove the default block-gap WordPress injects between the top-level site
   blocks (header / main / footer). It was showing the page background as a
   strip between the header and the hero. Each section controls its own
   spacing, so header/content/footer should sit flush. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* ── Sticky mobile call bar ── */
.kd-sticky-call { display: none; }
@media (max-width: 700px) {
  .kd-sticky-call {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    display: flex; background: var(--kd-forest); box-shadow: 0 -2px 12px rgba(0,0,0,.18);
  }
  .kd-sticky-call a {
    flex: 1; text-align: center; padding: 14px 8px; font-size: .85rem; font-weight: 700;
    text-decoration: none; color: #fff;
  }
  .kd-sticky-call .scb-book { background: var(--kd-amber); }
  body { padding-bottom: 56px; }
}

/* ── Footer — dark, multi-column (brand · services · areas · company) ── */
.kd-footer { background: #0e1a08; color: rgba(255,255,255,.6); padding: 64px 24px 28px; }
.kd-footer-inner { max-width: 1200px; margin: 0 auto; }
.kd-footer-top {
  display: grid; grid-template-columns: 260px 1fr 1fr 1.1fr; gap: 44px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Brand column */
.kd-footer-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 16px; }
.kd-footer-logo img { height: 52px; width: auto; display: block; }
.kd-footer-brand p { font-size: .88rem; line-height: 1.8; color: rgba(255,255,255,.5); margin-bottom: 20px; }
.kd-footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.kd-footer-social a {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); transition: background .2s, border-color .2s;
}
.kd-footer-social a:hover { background: var(--kd-canopy); border-color: var(--kd-canopy); }
.kd-footer-social svg { width: 15px; height: 15px; fill: rgba(255,255,255,.75); }
/* Link columns */
.kd-footer-col h4 { color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; }
.kd-footer-col .kd-footer-h2 { margin-top: 24px; }
.kd-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.kd-footer a { color: rgba(255,255,255,.55); text-decoration: none; font-size: .9rem; transition: color .15s; }
.kd-footer a:hover { color: #fff; }
.kd-footer-all { color: var(--kd-amber) !important; font-weight: 700; }
.kd-footer-all:hover { color: #f2a93f !important; }
.kd-footer-nbhd { color: rgba(255,255,255,.5); font-size: .9rem; }
/* NAP */
.kd-footer-nap { display: flex; flex-direction: column; gap: 7px; }
.kd-footer-nap p { font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.5); margin: 0; }
.kd-footer-nap strong { color: #fff; font-weight: 600; }
/* Map facade */
.kd-footer-map { margin-top: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); overflow: hidden; }
.kd-footer-map > summary {
  list-style: none; cursor: pointer; padding: 12px 14px; color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: 8px; font-size: .85rem; transition: background .2s, color .2s;
}
.kd-footer-map > summary::-webkit-details-marker { display: none; }
.kd-footer-map > summary::after { content: "▸"; margin-left: auto; transition: transform .2s; color: rgba(255,255,255,.4); }
.kd-footer-map[open] > summary::after { transform: rotate(90deg); }
.kd-footer-map > summary:hover { background: rgba(255,255,255,.08); color: #fff; }
.kd-footer-map-ic { font-size: 1.15rem; }
.kd-footer-mapbody iframe { width: 100%; height: 200px; border: 0; border-top: 1px solid rgba(255,255,255,.1); display: block; }
/* Trust bar */
.kd-footer-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 0; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.kd-footer-trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.45); white-space: nowrap; }
.kd-footer-trust-sep { color: rgba(255,255,255,.18); margin: 0 14px; }
.kd-trust-stars { color: #f4b942; letter-spacing: 1px; }
/* Bottom bar */
.kd-footer-bottom { padding-top: 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.kd-footer-bottom-left { font-size: .78rem; color: rgba(255,255,255,.32); }
.kd-footer-bottom-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kd-footer-bottom-right a { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .04em; }
.kd-footer-bottom-right span { color: rgba(255,255,255,.18); }
@media (max-width: 1024px) { .kd-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .kd-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .kd-footer-top { grid-template-columns: 1fr; gap: 28px; } .kd-footer-bottom { flex-direction: column; align-items: flex-start; } }

/* ── Header mega menu (desktop hover panels for Services + Locations) ── */
/* Flex wrapper centres its link so caret items (Services/Locations) line up
   vertically with the unwrapped links (Home/Consultation/Contact). */
.kd-nav-item { position: relative; display: flex; align-items: center; }
.kd-nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
/* margin-right cancels the gap (6px) + caret width (13px) so the caret adds
   no horizontal width — it visually floats into the even 30px item gap. */
.kd-caret { width: 13px; height: 13px; flex-shrink: 0; margin: 1px -19px 0 0; transition: transform .2s ease; }
.kd-has-mega:hover .kd-caret,
.kd-has-mega:focus-within .kd-caret { transform: rotate(180deg); }

.kd-mega {
  position: absolute; top: 100%; left: 0; transform: translateY(10px);
  background: #fff; border: 1px solid var(--kd-mist); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(21,48,12,.4); overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; z-index: 120;
}
.kd-has-mega:hover .kd-mega,
.kd-has-mega:focus-within .kd-mega { opacity: 1; visibility: visible; transform: translateY(6px); }
/* invisible bridge so the panel doesn't close in the gap under the link */
.kd-mega::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.kd-mega-inner { padding: 22px; }
.kd-mega-h { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kd-leaf); margin-bottom: 12px; }
.kd-mega a .ic { font-size: 1rem; width: 1.4em; display: inline-block; }
.kd-mega a .t { font-weight: 600; }

/* Services: featured promo card + categorized columns */
.kd-mega--svc { width: 760px; max-width: 92vw; }
.kd-mega-svc-inner { display: grid; grid-template-columns: 230px 1fr; }
.kd-mega-promo {
  background: var(--kd-forest); color: #fff; padding: 26px 24px; display: flex; flex-direction: column;
}
.kd-mega-promo-k { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kd-moss); }
.kd-mega-promo strong { font-size: 1.3rem; line-height: 1.2; margin: 10px 0 12px; color: #fff; }
.kd-mega-promo p { font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 auto; }
.kd-mega-promo-cta { margin-top: 18px; align-self: flex-start; background: var(--kd-amber); color: #fff; font-weight: 700; font-size: .82rem; padding: 10px 16px; border-radius: 8px; }
.kd-mega-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; padding: 24px; }
.kd-mega-cat a { display: flex; align-items: center; font-size: .9rem; color: var(--kd-ink); padding: 7px 8px; border-radius: 8px; transition: background .15s, color .15s; }
.kd-mega-cat a:hover { background: var(--kd-mist); color: var(--kd-forest); }
.kd-badge { background: var(--kd-amber); color: #fff; font-size: .6rem; font-weight: 800; font-style: normal; letter-spacing: .04em; padding: 2px 7px; border-radius: 50px; margin-left: 8px; }

/* Locations: featured grid + view-all link */
.kd-mega--loc { width: 340px; max-width: 92vw; }
.kd-mega--loc .kd-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.kd-mega--loc .kd-mega-grid a { display: flex; align-items: center; font-size: .9rem; color: var(--kd-ink); padding: 7px 8px; border-radius: 8px; transition: background .15s, color .15s; }
.kd-mega--loc .kd-mega-grid a:hover { background: var(--kd-mist); color: var(--kd-forest); }
.kd-mega-all { display: inline-block; margin-top: 14px; font-size: .85rem; font-weight: 700; color: var(--kd-forest); border-bottom: 2px solid var(--kd-amber); padding-bottom: 2px; }

@media (max-width: 980px) { .kd-mega-svc-inner { grid-template-columns: 1fr; } .kd-mega-promo { display: none; } }

/* ── Mobile hamburger + full-screen menu (<= 860px) ── */
.kd-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.kd-burger span { width: 26px; height: 3px; background: var(--kd-forest); border-radius: 3px; transition: transform .2s, opacity .2s; }
.kd-mobile { display: none; }
@media (max-width: 860px) {
  .kd-burger { display: inline-flex; }
  .kd-header-cta { display: none; }
  .kd-mobile {
    display: block; position: fixed; inset: 0; z-index: 300; background: #fff;
    overflow-y: auto; padding: 72px 22px 90px; transform: translateX(100%);
    transition: transform .25s ease; visibility: hidden;
  }
  .kd-mobile.open { transform: none; visibility: visible; }
  body.kd-menu-open { overflow: hidden; }
  .kd-mobile a { display: block; font-size: 1.05rem; font-weight: 600; color: var(--kd-ink); text-decoration: none; padding: 13px 6px; border-bottom: 1px solid var(--kd-mist); }
  .kd-mobile a:active { background: var(--kd-mist); }
  .kd-mobile .ic { display: inline-block; width: 1.6em; }
  .kd-mobile-sec { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kd-leaf); margin: 22px 0 4px; }
  .kd-mobile-close { position: absolute; top: 16px; right: 18px; background: none; border: 0; font-size: 2rem; line-height: 1; color: var(--kd-forest); cursor: pointer; }
  .kd-mobile-cta { margin-top: 20px; text-align: center; background: var(--kd-forest); color: #fff !important; border-radius: 10px; border-bottom: 0 !important; }
}

/* ── Mega menu — beautiful upgrade ── */
.kd-mega--svc { width: 820px; }
.kd-mega-promo {
  background: linear-gradient(180deg, rgba(21,48,12,.82), rgba(21,48,12,.95)),
    url('https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&w=520&q=55') center/cover;
  border-radius: 14px 0 0 0;
}
.kd-mega-promo-k { display: inline-flex; align-items: center; gap: 5px; }
.kd-mega-promo strong { font-size: 1.4rem; }
/* Service rows: text-first — title + tagline, arrow on hover (no icon chips) */
.kd-mega-cat a { align-items: center; gap: 11px; padding: 9px 12px; }
.kd-mega-txt { display: flex; flex-direction: column; line-height: 1.25; }
.kd-mega-txt .t { font-weight: 600; font-size: .92rem; color: var(--kd-ink); }
.kd-mega-cat a:hover .kd-mega-txt .t { color: var(--kd-forest); }
.kd-mega-txt small { color: #6b7165; font-size: .76rem; margin-top: 2px; }
.kd-mega-go { margin-left: auto; color: var(--kd-amber); font-weight: 800; opacity: 0; transform: translateX(-6px); transition: opacity .15s, transform .15s; }
.kd-mega-cat a:hover .kd-mega-go { opacity: 1; transform: none; }
.kd-badge { vertical-align: middle; }
/* Footer CTA bar */
.kd-mega-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--kd-mist); background: #faf8f3; }
.kd-mega-foot-q { font-size: .85rem; color: #6b7165; }
/* Scoped under .kd-mega-foot to beat the broad `.kd-nav a` colour rule. */
.kd-mega-foot .kd-mega-foot-call { font-weight: 800; color: var(--kd-forest); }
.kd-mega-foot .kd-mega-foot-cta { margin-left: auto; background: var(--kd-forest); color: #fff; font-weight: 700; font-size: .82rem; padding: 9px 16px; border-radius: 8px; transition: background .2s; }
.kd-mega-foot .kd-mega-foot-cta:hover { background: var(--kd-canopy); color: #fff; }
/* Locations sub-line + pins */
.kd-mega-sub { font-size: .8rem; color: #6b7165; margin: -4px 0 14px; }
.kd-mega--loc .kd-mega-grid a { padding: 8px 10px; border-radius: 8px; }
.kd-mega--loc .kd-mega-grid a .ic { width: 1.5em; }

/* ── Mega menu — Branch-style 3 columns with dividers ── */
.kd-mega--svc { width: 900px; }
.kd-mega-cats { display: flex; gap: 0; padding: 24px 0; }
.kd-mega-col { flex: 1 1 0; min-width: 0; padding: 0 24px; border-left: 1px solid var(--kd-mist); }
.kd-mega-col .kd-mega-cat + .kd-mega-cat { margin-top: 26px; }
.kd-mega-cat a { padding: 9px 12px; }
@media (max-width: 980px) {
  .kd-mega-cats { flex-wrap: wrap; padding: 18px; }
  .kd-mega-col { flex: 1 1 45%; border-left: 0; padding: 0; }
  .kd-mega-col + .kd-mega-col { margin-top: 18px; }
}

/* ── Mega menu — Branch-style FULL-WIDTH drop panel (Services) ── */
/* The nav item goes static so the panel can span the whole header width,
   anchored to the sticky .kd-header. Inner content is centred in a band. */
.kd-nav-item--full { position: static; }
.kd-nav-item--full .kd-mega {
  left: 0; right: 0; width: auto; max-width: none;
  border: 0; border-top: 3px solid var(--kd-forest); border-radius: 0;
  box-shadow: 0 26px 60px -18px rgba(21,48,12,.30);
}
/* Invisible hover-bridge under the Services link: the full-width panel drops
   from the header bottom, so this keeps :hover alive while the cursor crosses
   the header gap down to the panel. Scoped to the link width so it never
   covers the logo, phone button, or the panel's clickable rows. */
.kd-nav-item--full > a { position: relative; }
.kd-nav-item--full > a::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; }
.kd-mega-band { max-width: 1280px; margin: 0 auto; padding: 30px 24px 28px; }
.kd-mega-band .kd-mega-svc-inner { grid-template-columns: 230px 1fr; gap: 0 30px; }
.kd-mega-band .kd-mega-cats { padding: 2px 0 0; }
.kd-mega-band .kd-mega-promo { border-radius: 14px; }
/* Full-width footer band with centred inner row */
.kd-mega--svc .kd-mega-foot { padding: 0; }
.kd-mega-foot-in {
  max-width: 1280px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.kd-mega-foot-in .kd-mega-foot-cta { margin-left: auto; }