/* ==========================================================================
   Zusin Dental — shared stylesheet
   Plain CSS, no build step. Colors are CSS custom properties below —
   change them in one place to re-theme the whole site.
   ========================================================================== */

:root {
  /* Real colors, pulled directly from staging16.zusindental.com's computed CSS
     via a live browser session (not guessed) on 2026-07-29. */
  --color-navy: #345c87;       /* headings, nav links, primary text accent */
  --color-navy-dark: #24466b;  /* darker navy, used sparingly for contrast text */
  --color-terracotta: #b4704d; /* primary buttons / CTA bands */
  --color-terracotta-dark: #9c5f40;
  --color-blue: #8fbacc;       /* secondary buttons, star-rating track */
  --color-gold: #f0ad4e;       /* star ratings */
  --color-peach: #fee7d9;      /* soft accent background */
  --color-bg: #fdfdfd;
  --color-bg-alt: #edeff5;
  --color-white: #ffffff;
  --color-text: #2c3e4a;
  --color-text-light: #5b6b73;
  --color-border: #e2e8ec;
  --font-body: "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 8px;
  --shadow: 0 2px 10px rgba(52, 92, 135, 0.1);
  --container: 1180px;
  /* Back-compat aliases so every earlier reference to --color-teal keeps working */
  --color-teal: var(--color-blue);
  --color-teal-dark: var(--color-terracotta);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--color-navy); line-height: 1.25; margin: 0 0 16px; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; color: var(--color-teal-dark); margin-bottom: 8px; display: block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
}
.btn-primary { background: var(--color-terracotta); color: #fff; }
.btn-primary:hover { background: var(--color-terracotta-dark); text-decoration: none; }
.btn-secondary { background: var(--color-blue); border-color: var(--color-blue); color: #fff; }
.btn-secondary:hover { opacity: 0.9; text-decoration: none; }
.btn-outline { background: #fff; border-color: var(--color-terracotta); color: var(--color-terracotta); }
.btn-outline:hover { background: var(--color-terracotta); color: #fff; text-decoration: none; }
.btn-gold { background: var(--color-terracotta); color: #fff; }
.btn-gold:hover { background: var(--color-terracotta-dark); }

/* On dark backgrounds (e.g. the terracotta CTA band) buttons need a light outline variant */
.cta-band .btn-secondary { background: transparent; border-color: #fff; color: #fff; }
.cta-band .btn-secondary:hover { background: rgba(255,255,255,0.15); }

/* ---------- Top utility bar ---------- */
.top-bar {
  background: #fff;
  color: var(--color-navy);
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.top-bar .container { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: flex-end; }
.top-bar a { color: var(--color-terracotta); font-weight: 600; }
.top-bar strong { color: var(--color-navy); margin-right: 4px; }

/* ---------- Header / nav ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 20px; }
.brand { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--color-navy); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 12px; }
.site-logo { height: 64px; width: auto; display: block; }
.brand-text-wrap { position: relative; display: inline-block; padding-bottom: 9px; }
.brand-text { white-space: nowrap; }
.brand-swish { position: absolute; left: 0; bottom: -1px; width: 100%; height: 12px; overflow: visible; }
.brand-swish path { fill: none; stroke: var(--color-terracotta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand span { color: var(--color-teal); }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-navy);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 1.1rem;
}

nav.primary-nav { flex: 1; }
nav.primary-nav > ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; justify-content: center; }
nav.primary-nav > ul > li { position: relative; }
nav.primary-nav > ul > li > a {
  display: block; padding: 10px 14px; color: var(--color-navy); font-weight: 600; font-size: 0.95rem; border-radius: 6px;
}
nav.primary-nav > ul > li > a:hover,
/* .current marks the top-level nav item for whichever section the current
   page belongs to (set statically in the generated HTML, e.g. any page under
   "About Us" gets .current on that <li>) — it's just a highlight, deliberately
   a different class from .open/.js-open below, which control whether the
   dropdown itself is actually showing. Older builds reused .open for both
   purposes, which meant simply being on any "About Us" subpage permanently
   forced that dropdown open regardless of the cursor — the real cause of the
   long-standing "stuck open" bug, unrelated to hover timing. */
nav.primary-nav > ul > li.current > a { background: var(--color-bg-alt); text-decoration: none; }

nav.primary-nav .submenu {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow); min-width: 240px; display: none; z-index: 60;
}
/* No-JS fallback only: if JavaScript hasn't run (or fails), plain :hover
   still opens the menu so it's never unusable. */
nav.primary-nav li.has-submenu:hover .submenu { display: block; }
/* Once JS has initialized (body.js-nav-ready), it takes over exclusively via
   real mouseenter/mouseleave crossing events instead of :hover. This is the
   actual fix for the "stuck open" bug: clicking a submenu link is a full page
   navigation, and if the cursor is still resting on the same spot when the
   new page loads, :hover matches immediately with no user action — but
   mouseenter does NOT fire just from being already inside the element, only
   from crossing into it. So the menu correctly stays closed until the user
   genuinely moves the cursor onto it again, no matter how long it sits still. */
body.js-nav-ready nav.primary-nav li.has-submenu:hover .submenu { display: none; }
body.js-nav-ready nav.primary-nav li.has-submenu.js-open .submenu,
nav.primary-nav li.has-submenu.open .submenu { display: block; }
nav.primary-nav .submenu li a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--color-text); font-weight: 500; font-size: 0.92rem; }
nav.primary-nav .submenu li a:hover { background: var(--color-bg-alt); text-decoration: none; }

.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .btn { white-space: nowrap; }

@media (max-width: 980px) {
  .nav-toggle { display: inline-block; }
  nav.primary-nav {
    display: none; position: fixed; inset: 0; top: 68px; background: #fff; overflow-y: auto;
    padding: 10px 20px 40px;
  }
  nav.primary-nav.open { display: block; }
  nav.primary-nav > ul { flex-direction: column; gap: 0; }
  nav.primary-nav > ul > li > a { padding: 14px 4px; border-bottom: 1px solid var(--color-border); }
  nav.primary-nav .submenu { position: static; box-shadow: none; border: none; display: none; padding-left: 12px; }
  nav.primary-nav li.has-submenu.open .submenu { display: block; }
  /* The header's "Contact Us" / "Schedule Your Visit" buttons are
     .btn-outline / .btn-primary, not .btn-secondary -- the old rule here
     targeted a class that doesn't exist in this markup, so on narrow phone
     screens both full pill buttons stayed in the header next to the
     hamburger icon with no wrapping, overflowing the header and crowding
     out (or pushing off-screen) the menu toggle itself. The sticky bottom
     call bar already repeats Call / Directions / Schedule Visit on mobile,
     so the header buttons are redundant at this width -- hide the whole
     block instead of trying to patch the wrong selector. */
  .header-cta { display: none; }
}
@media (max-width: 420px) {
  .site-logo { height: 44px; }
  .brand-text { font-size: 1.15rem; }
}

/* ---------- Hero ---------- */
.hero { background: #fff; color: var(--color-text); padding: 56px 0; }
.hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero h1 { color: var(--color-navy); font-size: 2.7rem; letter-spacing: -0.01em; }
.hero p.lead { font-size: 1.15rem; color: var(--color-text-light); max-width: 46ch; }
.hero .eyebrow { color: var(--color-teal-dark); background: var(--color-bg-alt); display: inline-block; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.hero-image img { border-radius: var(--radius); box-shadow: 0 12px 30px rgba(52, 92, 135, 0.15); width: 100%; max-height: 480px; object-fit: cover; object-position: top center; display: block; }
@media (max-width: 860px) { .hero .container { grid-template-columns: 1fr; } .hero-image { order: -1; } .hero-image img { max-height: 340px; } }

.hero-quicklinks { background: var(--color-bg-alt); padding: 22px 0; border-bottom: 1px solid var(--color-border); }
.hero-quicklinks ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.hero-quicklinks li a { font-weight: 700; color: var(--color-navy); }
.hero-quicklinks li p { margin: 2px 0 0; font-size: 0.85rem; color: var(--color-text-light); }

/* ---------- Sections ---------- */
section { padding: 56px 0; }
.section-alt { background: var(--color-bg); }
.section-tight { padding: 36px 0; }
.text-center { text-align: center; }
.lede { font-size: 1.1rem; color: var(--color-text-light); max-width: 68ch; }
.lede.center { margin-left: auto; margin-right: auto; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
@media (min-width: 861px) {
  .order-1-desktop { order: 1; }
  .order-2-desktop { order: 2; }
}

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 8px; font-size: 1.15rem; }
.card p:last-child { margin-bottom: 0; }
.card.link-card a.card-link { color: var(--color-teal-dark); font-weight: 700; }

/* Services grid (index) */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } }
.service-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.service-card-img { width: 100%; height: 170px; object-fit: cover; display: block; }
.service-card .service-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.service-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.service-card p { color: var(--color-text-light); font-size: 0.95rem; flex: 1; }
.service-card .btn { margin-top: 10px; align-self: flex-start; }
.service-card.featured { border: 2px solid var(--color-teal); }
.badge-new { display: inline-block; background: var(--color-gold); color: #2b2205; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 8px; }

/* ---------- Pillars / feature lists ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }
.pillar { text-align: center; padding: 10px; }
.pillar .num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--color-teal); color: #fff; font-weight: 800; margin-bottom: 10px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-terracotta); color: #fff; padding: 44px 0; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #fbe9e1; }

/* ---------- Credentials / team ---------- */
.credential-line { font-weight: 700; color: var(--color-teal-dark); margin-bottom: 18px; }
.org-logos { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 18px 0; }
.org-logos img { height: 46px; width: auto; filter: grayscale(20%); }
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
@media (max-width: 700px) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }
.photo-strip img { border-radius: 6px; aspect-ratio: 4/3; object-fit: cover; }

.message-block { background: var(--color-bg-alt); border-left: 4px solid var(--color-teal); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px; margin: 20px 0; }
.message-block p:last-child { margin-bottom: 0; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 18px 30px 18px 0; font-size: 1.02rem; font-weight: 700; color: var(--color-navy);
  position: relative; font-family: inherit;
}
.faq-question::after {
  content: "+"; position: absolute; right: 0; top: 16px; font-size: 1.4rem; color: var(--color-teal); font-weight: 400;
}
.faq-item.open .faq-question::after { content: "\2212"; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; color: var(--color-text-light); }
.faq-item.open .faq-answer { max-height: 3000px; }
.faq-answer-inner { padding: 0 0 20px; }
.faq-answer-inner p:last-child, .faq-answer-inner ul:last-child { margin-bottom: 0; }
.faq-answer-inner ul { padding-left: 20px; }

/* ---------- Table ---------- */
table.compare { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; }
table.compare th, table.compare td { border: 1px solid var(--color-border); padding: 12px 14px; text-align: left; vertical-align: top; }
table.compare th { background: var(--color-navy); color: #fff; }
table.compare tr:nth-child(even) td { background: var(--color-bg); }

/* ---------- Quiz ---------- */
.quiz-box { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; max-width: 720px; margin: 24px auto; }
.quiz-q { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.quiz-q:last-of-type { border-bottom: none; }
.quiz-q p { font-weight: 600; margin-bottom: 8px; }
.quiz-q label { margin-right: 20px; font-weight: 500; cursor: pointer; }
.quiz-q input[type="radio"] { margin-right: 6px; }
.quiz-result { margin-top: 18px; padding: 18px; border-radius: var(--radius); background: var(--color-bg-alt); font-weight: 600; display: none; }
.quiz-result.show { display: block; }
.quiz-band-low { color: #146569; }
.quiz-band-mid { color: #92650b; }
.quiz-band-high { color: #a12626; }

/* ---------- Case studies ("Real Solutions For Real Patients") ---------- */
.case-study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 300px)); gap: 24px; margin-top: 24px; justify-content: center; }
.case-study-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.case-study-card img { width: 100%; height: 300px; object-fit: contain; background: var(--color-bg-alt); display: block; }
.case-study-caption { padding: 14px 16px; margin: 0; font-weight: 600; color: var(--color-navy); font-size: 0.95rem; }
.real-smiles-group { margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid var(--color-border); scroll-margin-top: 90px; }
.real-smiles-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.real-smiles-group h2 { margin-bottom: 4px; }

/* ---------- Blog category quick-nav ---------- */
.category-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.category-nav .btn { font-size: 0.9rem; padding: 8px 16px; }

/* ---------- Testimonials ---------- */
.testimonial-strip { background: var(--color-bg-alt); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.testimonial-card .stars { color: var(--color-gold); font-size: 1rem; margin-bottom: 8px; }
.testimonial-card p { font-size: 0.94rem; color: var(--color-text); }
.testimonial-card .name { font-weight: 700; color: var(--color-navy); margin-top: 10px; margin-bottom: 0; }

/* ---------- Insurance logos ---------- */
.insurance-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; padding: 0; }
@media (max-width: 700px) { .insurance-list { grid-template-columns: repeat(2, 1fr); } }
.insurance-list li { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px; text-align: center; font-weight: 600; color: var(--color-navy); }

/* ---------- Forms ---------- */
.contact-form { display: grid; gap: 14px; max-width: 640px; }
.contact-form label { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: 6px; font-family: inherit; font-size: 0.95rem;
}
.contact-form textarea { min-height: 120px; }
.form-note { font-size: 0.85rem; color: var(--color-text-light); }

/* ---------- Info blocks (address/hours) ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .info-grid { grid-template-columns: 1fr; } }
.info-block h3 { margin-bottom: 10px; }
.info-block ul { list-style: none; padding: 0; margin: 0; }
.info-block li { padding: 4px 0; color: var(--color-text-light); }

/* ---------- Map ---------- */
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 10px; }
.breadcrumb a { color: var(--color-text-light); }

/* ---------- Sticky mobile call bar ---------- */
/* Hidden by default (desktop already has sticky header CTAs); shown as a
   fixed bottom bar on phone-width screens only, where a thumb-reachable
   call/schedule strip actually earns its keep. body gets matching
   padding-bottom so the bar can never cover footer content. */
.sticky-call-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 60px; }
  .sticky-call-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--color-terracotta); padding: 10px 14px;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15);
  }
  .sticky-call-bar a { color: #fff; font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
  .sticky-call-bar .btn { padding: 8px 12px; font-size: 0.8rem; background: #fff; color: var(--color-terracotta-dark); border-radius: var(--radius); white-space: nowrap; }
}
@media (max-width: 400px) {
  .sticky-call-bar a:not(.btn):nth-of-type(2) { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-bg-alt); color: var(--color-navy); padding: 52px 0 20px; margin-top: 40px; border-top: 1px solid var(--color-border); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--color-navy); font-family: var(--font-body); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--color-text-light); }
.site-footer a:hover { color: var(--color-terracotta); }
.footer-brand { font-family: var(--font-head); font-size: 1.3rem; color: var(--color-navy); margin-bottom: 10px; }
.footer-logo { height: 64px; width: auto; display: block; margin-bottom: 12px; }
.footer-bottom { border-top: 1px solid var(--color-border); margin-top: 34px; padding-top: 18px; font-size: 0.82rem; color: var(--color-text-light); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.social-links { display: flex; gap: 12px; margin-top: 10px; }
.social-links a { border: 1px solid var(--color-terracotta); color: var(--color-terracotta); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; }

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: auto; background: var(--color-teal); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 10px; top: 10px; }

/* Sr only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }