/* ============================================================
   DENT TIME — SHARED NAV + FOOTER  (single source of truth)
   Linked by every page. Change here = updates site-wide.
   Uses var() with fallbacks so it works whether a page defines
   --font-h/--red (homepage) or --font-head/--accent (service pages).
   ============================================================ */
:root{
  --nv-font-h: var(--font-h, var(--font-head, 'Oswald','Impact',sans-serif));
  --nv-red:    var(--red, var(--accent, #e82020));
  --nv-muted:  var(--muted, rgba(255,255,255,.55));
  --nv-border: var(--border, rgba(255,255,255,.09));
}

/* ── NAV BAR ── */
/* height/position marked !important so this single source of truth wins
   over any page's own inline nav CSS (some legacy pages still define .nav) */
.nav{position:sticky!important;top:0;left:0;right:0;z-index:100;padding:0 24px;height:68px!important;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:height .3s ease,background .35s ease,border-color .35s ease}
.nav.scrolled{height:84px!important;background:rgba(0,0,0,.96)!important;border-color:var(--nv-border)}
.nav-logo{display:flex;align-items:center}
.nav-logo-img{height:46px!important;width:auto;display:block;flex-shrink:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.4));transition:height .3s ease}
.nav.scrolled .nav-logo-img{height:64px!important}

/* margin auto (with !important) centers the menu between logo and CTA on every
   page, overriding legacy per-page inline nav-links margins that left-aligned it */
.nav-links{display:flex;align-items:center;gap:30px;margin:0 auto!important}
.nav-link,.nav-links>a{font-family:var(--nv-font-h);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--nv-muted);background:none;border:none;padding:0;cursor:pointer;transition:color .2s;text-decoration:none;white-space:nowrap}
.nav-links>a:hover,.nav-link:hover,.nav-item--has-dropdown:hover .nav-link{color:#fff}

.nav-cta{font-family:var(--nv-font-h);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:11px 22px;background:linear-gradient(170deg,#f52a2a 0%,#e82020 50%,#c91c1c 100%);color:#fff;border-radius:3px;text-decoration:none;transition:background .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.15)}
.nav-cta:hover{background:linear-gradient(170deg,#f83232 0%,#c41818 100%)}

.nav-item{position:relative}
/* invisible bridge across the gap between trigger and dropdown so the
   menu does not close while the mouse travels down to a service link */
.nav-item--has-dropdown::after{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:18px;display:none}
.nav-item--has-dropdown:hover::after,.nav-item--has-dropdown.open::after{display:block}
.nav-link{display:flex;align-items:center;gap:6px}
.nav-chevron{transition:transform .2s;flex-shrink:0}
.nav-item--has-dropdown:hover .nav-chevron,.nav-item--has-dropdown.open .nav-chevron{transform:rotate(180deg)}

/* dropdown */
.nav-dropdown{display:none;position:absolute;top:calc(100% + 12px);left:-16px;background:#0d0d0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:6px 0;min-width:212px;z-index:1000;box-shadow:0 16px 40px rgba(0,0,0,.7)}
.nav-dropdown::before{content:"";position:absolute;top:-6px;left:24px;width:10px;height:10px;background:#0d0d0d;border-left:1px solid rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);transform:rotate(45deg)}
.nav-item--has-dropdown:hover .nav-dropdown,.nav-item--has-dropdown.open .nav-dropdown{display:flex;flex-direction:column}
.nav-dropdown-link{display:flex;align-items:center;justify-content:space-between;padding:8px 18px;font-family:var(--nv-font-h);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.65);transition:color .15s,background .15s;text-decoration:none}
.nav-dropdown-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-dropdown-link.nav-active{color:var(--nv-red)}
/* flat dropdown: group labels, featured hub, indented children */
.nav-dropdown-label{display:block;padding:7px 18px 3px;font-family:var(--nv-font-h);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);pointer-events:none}
.nav-dropdown-label:first-child{padding-top:2px}
.nav-dropdown-link--hub{color:#fff;font-weight:600}
.nav-hub-tag{font-family:var(--nv-font-h);font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(232,32,32,.18);color:var(--nv-red);padding:2px 5px;border-radius:2px;margin-left:8px}
.nav-dropdown-link--child{padding-left:30px;font-size:10.5px;color:rgba(255,255,255,.55)}
.nav-dropdown-link--child::before{content:"";position:absolute;left:20px;top:calc(50% - 1px);width:7px;height:1px;background:rgba(255,255,255,.28)}
.nav-dropdown-link{position:relative}

/* nested submenu */
.nav-item--has-submenu{position:relative}
.nav-submenu{display:none;position:absolute;top:0;left:100%;background:#0d0d0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px 0;min-width:190px;z-index:1001;box-shadow:0 16px 40px rgba(0,0,0,.7);flex-direction:column}
.nav-item--has-submenu:hover .nav-submenu{display:flex}
.nav-dropdown-link--has-sub .nav-sub-arrow{opacity:.45;flex-shrink:0;transition:opacity .15s}
.nav-item--has-submenu:hover .nav-dropdown-link--has-sub .nav-sub-arrow{opacity:1}

/* hamburger */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.nav-hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:1px;transition:all .3s}

/* mobile */
@media(max-width:768px){
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:68px;left:0;right:0;background:rgba(0,0,0,.97);z-index:999;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);gap:0}
  .nav-links.open .nav-link,.nav-links.open .nav-dropdown-link,.nav-links.open>a{display:flex;padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.07);font-size:1rem;color:rgba(255,255,255,.75);letter-spacing:.06em}
  .nav-links.open .nav-item--has-dropdown .nav-dropdown{display:none;position:static;background:rgba(255,255,255,.04);border:none;border-radius:0;padding:0;box-shadow:none;min-width:auto}
  .nav-links.open .nav-item--has-dropdown .nav-dropdown::before{display:none}
  .nav-links.open .nav-item--has-dropdown.open .nav-dropdown{display:flex;flex-direction:column}
  .nav-links.open .nav-item--has-dropdown .nav-link{width:100%;justify-content:space-between;padding:14px 24px}
  /* mobile flat dropdown spacing */
  .nav-links.open .nav-dropdown-label{display:block;padding:14px 24px 6px;font-size:10px;border-bottom:none;color:rgba(255,255,255,.35)}
  .nav-links.open .nav-dropdown-link--child{padding-left:44px;font-size:.92rem}
  .nav-links.open .nav-dropdown-link--child::before{left:28px}
  .nav-links.open .nav-item--has-submenu .nav-submenu{display:none;position:static;background:rgba(255,255,255,.03);border:none;border-radius:0;padding:0;box-shadow:none;flex-direction:column}
  .nav-links.open .nav-item--has-submenu.open .nav-submenu{display:flex}
  .nav-links.open .nav-submenu .nav-dropdown-link{padding-left:40px;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.04)}
  .nav-hamburger{display:flex}
  .nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  .nav.scrolled{height:68px!important}
  .nav.scrolled .nav-logo-img{height:46px!important}
}

/* ── FOOTER ── */
.footer{background:var(--bg-3,#0a0a0a);border-top:1px solid var(--nv-border);padding:72px 0 40px}
.footer .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand .nav-logo{margin-bottom:14px}
.footer-brand .nav-logo-img{height:70px}
.footer-brand p{font-size:14px;font-weight:300;color:var(--nv-muted);line-height:1.7;max-width:300px}
.footer-col h4{font-family:var(--nv-font-h);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px}
.footer-col a{display:block;font-size:14px;font-weight:300;color:rgba(255,255,255,.55);margin-bottom:10px;transition:color .2s;text-decoration:none}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-top:28px;border-top:1px solid var(--nv-border);font-size:13px;font-weight:300;color:var(--muted-2,rgba(255,255,255,.3))}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ============================================================
   LIGHT SECTION THEME (black/white balance) — add class
   "section--light" to any <section>. Flips the design tokens
   so var()-based children adapt, plus catch-alls for the
   service-page template's hardcoded-white elements.
   ============================================================ */
.section--light{
  background:#f4f4f5!important;
  border-top:1px solid rgba(0,0,0,.07)!important;
  color:#16161c;
  /* token flips so var()-driven children adapt automatically.
     Covers both naming conventions used across the site templates. */
  --text:#16161c;--muted:#55555f;--muted-2:rgba(0,0,0,.42);
  --border:rgba(0,0,0,.1);--card:#ffffff;--bg:#f4f4f5;--bg-2:#ececef;--bg-3:#e7e7eb;
  --text-muted:#55555f;--card-bg:#ffffff;--line:rgba(0,0,0,.1);--ink:#16161c;--paper:#f4f4f5;
}
.section--light h1,.section--light h2,.section--light h3,.section--light h4{color:#16161c}
.section--light h1 em,.section--light h2 em,.section--light h3 em{color:var(--nv-red)}
.section--light p{color:#52525c}
.section--light strong,.section--light b{color:#16161c}
.section--light .eyebrow{color:var(--nv-red)}
.section--light .eyebrow::before{background:var(--nv-red)}
/* cards / panels */
.section--light .review,.section--light .mistake__visual,.section--light .price-card,.section--light .faq-item{background:#fff!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 12px 34px rgba(0,0,0,.08)}
.section--light .price-card--featured{border-color:var(--nv-red)!important}
/* reviews */
.section--light .review__text{color:#3a3a42}
.section--light .review__author,.section--light .reviews__meta{color:#86868f}
.section--light .stars,.section--light .review__stars{color:#f5a623}
/* comparison rows */
.section--light .mistake__row{border-bottom-color:rgba(0,0,0,.08)}
.section--light .mistake__row-label{color:#86868f}
.section--light .mistake__row-bad{color:#b15a5a}
.section--light .mistake__row-good{color:#16161c}
.section--light .mistake__visual-label{color:var(--nv-red)}
/* pricing */
.section--light .price-title,.section--light .price-range{color:#16161c}
.section--light .price-sub,.section--light .price-list li{color:#52525c}
.section--light .price-badge{color:var(--nv-red)}
/* faq accordion */
.section--light .faq-q span{color:#16161c}
.section--light .faq-q,.section--light .faq-a{color:#3a3a42}
.section--light .faq-q svg{stroke:#16161c}
/* outline buttons would vanish on light — give them dark strokes */
.section--light .btn-outline{border-color:rgba(0,0,0,.28);color:#2a2a30}
.section--light .btn-outline:hover{border-color:#16161c;color:#16161c}
/* ── hub page (paintless-dent-repair) custom components ── */
.section--light .section-eyebrow{color:var(--nv-red)}
.section--light .review-card{background:#fff!important;border-color:rgba(0,0,0,.1)!important;box-shadow:0 12px 34px rgba(0,0,0,.08)}
.section--light .review-card__text{color:#3a3a42}
.section--light .review-card__author{color:#86868f}
.section--light .review-card__stars{color:#f5a623}
.section--light .cities-col,.section--light .cities-col li{color:#52525c}
.section--light .cities-col a{color:#3a3a42}
.section--light .cities-col h3,.section--light .cities-col strong{color:#16161c}
.section--light .faq-item{background:#fff!important;border-color:rgba(0,0,0,.1)!important}
.section--light .faq-q__text,.section--light .faq-num{color:#16161c}
.section--light .faq-q__icon{color:#16161c;stroke:#16161c}
.section--light .faq-a,.section--light .faq-a__inner,.section--light .faq-a *{color:#3a3a42}
.section--light .faq-price-row{border-bottom-color:rgba(0,0,0,.08)}
.section--light .faq-price-row__label{color:#86868f}
.section--light .faq-price-row__value{color:#16161c}

/* ── Reviews floating card (Trustindex widget container, shared) ── */
.reviews-float-card{max-width:1400px;margin:0 auto;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:16px;padding:14px clamp(12px,2.5vw,28px);box-shadow:0 28px 60px rgba(0,0,0,.15),0 6px 16px rgba(0,0,0,.07)}
@media(max-width:600px){.reviews-float-card{border-radius:12px;padding:10px 12px}}

/* ── Full-bleed hero action photo, blended from the left (service pages) ──
   Scoped to .hero--photo so the homepage hero is never affected.
   Photo fills the whole hero; a left-to-right black gradient keeps the
   headline readable and melts the photo in with no hard column seam. */
.hero--photo{position:relative;overflow:hidden}
.hero--photo>.hero__photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:0}
.hero--photo>.hero__photo-blend{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.88) 22%,rgba(0,0,0,.55) 48%,rgba(0,0,0,.25) 74%,rgba(0,0,0,.45) 100%),
             linear-gradient(0deg,rgba(0,0,0,.5) 0%,transparent 46%)}
.hero--photo .hero__left{position:relative;z-index:2;background:transparent!important}
.hero--photo .hero__left::after{display:none!important}
.hero--photo .hero__right{position:relative;z-index:2;background:transparent!important;overflow:visible}
.hero--photo .hero__photo-tag{z-index:3}
@media(max-width:768px){
  /* on mobile the text overlays the whole photo — darken uniformly for legibility */
  .hero--photo>.hero__photo-blend{background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.72) 100%)}
}