/* Naybur shared components — buttons, layout primitives, brand tokens.
   Linked from every page to deduplicate inline definitions. */

/* Brand colour + gradient tokens — defined site-wide so every page has them
   (previously these were inline on each page's <style>, which broke blog and
   any page that didn't include them). */
:root {
  --primary:    #1f1d1b;
  --primarydim: #2a2826;
  --accent:     #B87333;
  --accentdk:   #8C5722;
  --accentlt:   #D4A574;
  --bgw:        #FAF7F2;
  --bgcream:    #F1ECE2;
  --textlight:  #FAF7F2;
  --textdark:   #1f1d1b;
  --line:       #E5DCCB;
  --foil:       linear-gradient(135deg, #8B5A2B 0%, #D4A574 35%, #B87333 65%, #8B5A2B 100%);
}

.container-x {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px) {
  .container-x {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.84rem 1.76rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.35s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
}
.btn-copper {
  /* --accentdk (#8C5722) gives 6.5:1 contrast with #fff — passes WCAG AA.
     --accent (#B87333) was only 3.79:1 which failed AA for small text. */
  background: var(--accentdk);
  color: #fff;
  border: 1px solid var(--accentdk);
}
.btn-copper:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -18px rgba(31,29,27,0.55);
}
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
}
.btn-ghost-light:hover {
  border-color: var(--accent);
  color: var(--accentlt);
}
.btn-ghost-dark {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-ghost-dark:hover {
  background: var(--primary);
  color: #fff;
}

/* Scoped heading sizes — parent-class selectors (0,0,1,1) beat body h2/h3 (0,0,0,2),
   so they win cleanly without !important. */
.feature-card h2 { font-size: 1.5rem; line-height: 1.2; }
.process-step h3 { font-size: 1.4rem; line-height: 1.2; }

/* Eyebrow contrast — small copper text on cream needs ≥4.5:1 (WCAG AA for small text).
   .eyebrow + .text-accent (0,0,2,0) wins over .text-accent (0,0,1,0), so we darken
   only the eyebrow combo without affecting solo .text-accent usage elsewhere. */
.eyebrow.text-accent { color: var(--accentdk); }

/* Card icons — unique pop colors cycling per card so the section doesn't read as
   "all gold" (over-branded) OR "all dark" (lifeless). Each card in a row gets a
   distinct on-brand-adjacent color that still pops against cream/white. Cycles
   through five so 3-column AND 5-column grids both get variety. Checkmark icons
   inside list bullets are NOT affected — they keep brand copper as indicators. */
.feature-card > i[data-lucide],
.feature-card > svg.lucide,
.feature-card > svg[class*="lucide"],
.step-card > i[data-lucide],
.step-card > svg.lucide,
.step-card > svg[class*="lucide"] {
  color: #0F766E; /* teal-700 default */
}
.feature-card:nth-child(5n+1) > i[data-lucide],
.feature-card:nth-child(5n+1) > svg.lucide,
.step-card:nth-child(5n+1) > i[data-lucide],
.step-card:nth-child(5n+1) > svg.lucide { color: #0F766E; }   /* deep teal */
.feature-card:nth-child(5n+2) > i[data-lucide],
.feature-card:nth-child(5n+2) > svg.lucide,
.step-card:nth-child(5n+2) > i[data-lucide],
.step-card:nth-child(5n+2) > svg.lucide { color: #B45309; }   /* warm amber */
.feature-card:nth-child(5n+3) > i[data-lucide],
.feature-card:nth-child(5n+3) > svg.lucide,
.step-card:nth-child(5n+3) > i[data-lucide],
.step-card:nth-child(5n+3) > svg.lucide { color: #7C2D12; }   /* deep rust */
.feature-card:nth-child(5n+4) > i[data-lucide],
.feature-card:nth-child(5n+4) > svg.lucide,
.step-card:nth-child(5n+4) > i[data-lucide],
.step-card:nth-child(5n+4) > svg.lucide { color: #1E40AF; }   /* deep blue */
.feature-card:nth-child(5n+5) > i[data-lucide],
.feature-card:nth-child(5n+5) > svg.lucide,
.step-card:nth-child(5n+5) > i[data-lucide],
.step-card:nth-child(5n+5) > svg.lucide { color: #4D7C0F; }   /* olive */
.role-card .role-icon {
  background: linear-gradient(135deg, #B87333, #D4A574);
  color: #FAF7F2;
}

/* ==========================================================================
   SHARED HEADER + FOOTER STYLES — site-wide, referenced by canonical header
   and canonical footer. Defined here so every page renders consistently
   (previously these only existed inline on index.html, which broke service
   and blog pages).
   ========================================================================== */

/* Text-rendered wordmark in header. The previous img-based logo had the wordmark
   baked into a 1200x400 PNG; when CSS scaled it down to the header slot, the brand
   name became unreadable. Rendering as HTML text keeps it crisp at any size and
   lets us match the brand fonts (Cormorant italic for "Naybur", Inter caps for
   "CONTRACTING") byte-for-byte. */
.logo-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  white-space: nowrap;
}
.logo-naybur {
  font-family: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.85rem, 4.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--primary);
}
.logo-contracting {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--primary);
  position: relative;
  top: -2px;
}
.logo-wordmark:hover .logo-naybur,
.logo-wordmark:hover .logo-contracting {
  color: var(--accentdk);
}

/* Header: WHITE background, dark text per owner direction.
   SOLID opacity (no transparency / blur) so the header looks identical on every
   page regardless of what's underneath — previously the dark hero section on
   service pages bled through the rgba() and made the header look dark there. */
.nav-shell {
  background: #FAF7F2;
  border-bottom: 1px solid rgba(184, 115, 51, 0.25);
}
.nav-shell a,
.nav-shell button.nav-link-item {
  color: var(--primary);
}
.nav-shell .nav-link-item.text-accentlt,
.nav-shell a.text-accentlt {
  color: var(--accentdk);
}
/* Mobile menu has dark bg, so links MUST stay light. ID-specificity (100) beats
   the nav-shell descendant selector (11) which was forcing dark text on dark bg. */
#mobile-menu a,
#mobile-menu summary {
  color: var(--textlight);
}
#mobile-menu a:hover,
#mobile-menu summary:hover {
  color: var(--accent);
}
#mobile-menu a.text-accentlt {
  color: var(--accentlt);
}
.nav-link-item {
  position: relative;
  padding-bottom: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Full-bleed header wrapper — logo justifies hard left at the viewport edge,
   phone justifies hard right. The body content still uses .container-x (80rem
   centered), but the header intentionally breaks out of that constraint so the
   logo + phone hug the screen edges per owner direction. */
.header-wide-shell {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .header-wide-shell { padding-left: 2rem; padding-right: 2rem; }
}
.nav-link-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: all 0.35s ease;
  transform: translateX(-50%);
}
.nav-link-item:hover::after,
.nav-link-item.active::after { width: 100%; }

/* Services dropdown — padding-bottom intentionally 0 so the dropdown trigger
   shares the same vertical baseline as every other nav-link-item in the flex
   row. The hover-bridge between trigger and menu is handled by the absolutely-
   positioned .nav-dropdown::before below (does NOT affect layout height). */
.nav-dropdown { position: relative; }
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 0.75rem;
  pointer-events: auto;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: #ffffff;
  border: 1px solid rgba(184, 115, 51, 0.25);
  border-radius: 8px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.18);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 60;
}
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -0.75rem;
  height: 0.75rem;
  pointer-events: auto;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
  display: block;
  padding: 0.65rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--primary);
  transition: all 0.2s ease;
  text-decoration: none;
}
.nav-dropdown-item:hover {
  color: var(--accentdk);
  background: rgba(184, 115, 51, 0.08);
  padding-left: 1.5rem;
}

/* Mobile menu surface for white header */
#mobile-menu .bg-primary {
  background: var(--primary);
}

/* Footer: dark background, light text — opposite of header */
footer.inverse,
.inverse {
  background: var(--primary);
  color: #FAF7F2;
}
.inverse h1,
.inverse h2,
.inverse h3,
.inverse h4 { color: #FAF7F2; }
.inverse .eyebrow { color: var(--accentlt); }
.inverse a { color: #FAF7F2; }
.inverse a:hover { color: var(--accentlt); }
.inverse a.text-accentlt { color: var(--accentlt); }
.footer-social,
.footer-social-google,
.footer-social-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #ffffff;
  transition: transform 0.2s ease;
}
.footer-social:hover,
.footer-social-google:hover { transform: translateY(-2px); }

/* Footer Services link — extends UP on hover/focus to show service options. */
.footer-services-dropdown { position: relative; }
.footer-services-trigger { display: inline-flex; align-items: center; gap: 0.35rem; }
.footer-services-chev { font-size: 0.7rem; color: var(--accentlt); transition: transform 0.25s ease; display: inline-block; }
.footer-services-dropdown:hover .footer-services-chev,
.footer-services-dropdown:focus-within .footer-services-chev { transform: translateY(-2px); }
.footer-services-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  min-width: 230px;
  background: #2a2826;
  border: 1px solid rgba(184, 115, 51, 0.35);
  border-radius: 8px;
  box-shadow: 0 -18px 40px -16px rgba(0, 0, 0, 0.6);
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 40;
}
.footer-services-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.5rem;
  height: 0.5rem;
  pointer-events: auto;
}
.footer-services-dropdown:hover .footer-services-menu,
.footer-services-dropdown:focus-within .footer-services-menu,
.footer-services-dropdown.is-open .footer-services-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.footer-services-dropdown.is-open .footer-services-chev { transform: translateY(-2px) rotate(180deg); }
.footer-services-menu li { margin: 0; padding: 0; }
.footer-services-menu li a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #FAF7F2;
  text-decoration: none;
}
.footer-services-menu li a:hover { background: rgba(184, 115, 51, 0.18); color: var(--accentlt); }

/* Google Map widget in footer — compact by default, expands on hover (desktop)
   or tap-focus (mobile, via tabindex="0" on the parent making it focusable).
   The arrow icon top-right links out to the full Google Maps page.
   Square variant (.footer-map-square) for the footer column where the resting
   state needs a 1:1 aspect at a constrained max-width so it visually aligns
   with the social icons' bottom baseline in the logo column. */
.footer-map {
  position: relative;
  width: 100%;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(184, 115, 51, 0.35);
  transition: height 0.35s cubic-bezier(.2,.7,.2,1), width 0.35s cubic-bezier(.2,.7,.2,1), max-width 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
  outline: none;
  cursor: pointer;
}
.footer-map-square {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  height: auto;
}
.footer-map-square:hover,
.footer-map-square:focus,
.footer-map-square:focus-within {
  max-width: 320px;
  border-color: var(--accent);
  box-shadow: 0 20px 50px -20px rgba(184, 115, 51, 0.55);
}
.footer-map:not(.footer-map-square):hover,
.footer-map:not(.footer-map-square):focus,
.footer-map:not(.footer-map-square):focus-within {
  height: 260px;
  border-color: var(--accent);
  box-shadow: 0 20px 50px -20px rgba(184, 115, 51, 0.55);
}
.footer-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(0.15);
  transition: filter 0.35s ease;
}
.footer-map:hover iframe,
.footer-map:focus-within iframe { filter: grayscale(0); }
.footer-map-arrow {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: rgba(31, 29, 27, 0.85);
  color: var(--accentlt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  text-decoration: none;
}
.footer-map-arrow:hover {
  background: var(--accent);
  color: #fff;
  transform: translate(2px, -2px);
}

/* Mobile menu icon click-through — lucide's <svg> replacement otherwise becomes the
   click target on touch and swallows the toggle. Force every child of the button to
   pass clicks up to the button itself. */
#mobile-menu-btn > * { pointer-events: none; }

/* Desktop phone CTA — make clickability obvious. Underline on hover + slight bg pill. */
.nav-phone-cta {
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.nav-phone-cta:hover {
  border-color: var(--accent);
  background: rgba(184, 115, 51, 0.08);
}
.nav-phone-num {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(184, 115, 51, 0.4);
  text-underline-offset: 3px;
}
.nav-phone-cta:hover .nav-phone-num {
  text-decoration-color: var(--accent);
}

  .brittany-opt-out {
    bottom: 5.5rem;
    right: 1.5rem;
    font-size: 0.68rem;
    padding: 0.5rem 0.85rem;
  }
}

/* FAQ accordion smooth slide-open animation. Uses the grid-template-rows
   0fr→1fr trick that works in modern Chromium/Firefox/Safari. The animated
   panel is the SIBLING of <summary>; its inner content gets overflow:hidden
   so the clip is clean during the transition. */
details.faq-item summary,
details.post-faq summary {
  cursor: pointer;
  list-style: none;
}
details.faq-item summary::-webkit-details-marker,
details.post-faq summary::-webkit-details-marker {
  display: none;
}
details.faq-item > .faq-a,
details.post-faq > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(.2,.7,.2,1);
}
details.faq-item[open] > .faq-a,
details.post-faq[open] > div {
  grid-template-rows: 1fr;
}
details.faq-item > .faq-a > *,
details.post-faq > div > * {
  overflow: hidden;
  min-height: 0;
}
/* Chevron / +/- indicator rotation in sync with open state */
details.faq-item summary .faq-chev,
details.post-faq summary > span:last-child {
  transition: transform 0.3s ease;
}
details.faq-item[open] summary .faq-chev,
details.post-faq[open] summary > span:last-child {
  transform: rotate(180deg);
}