/* =====================================================================
   Mid Michigan Denture Repair - CLEAN REBUILD (v4)
   ---------------------------------------------------------------------
   This rebuild is generated from the original single-page index.html as the
   baseline, then expanded into a stable 3-page site with external CSS/JS.

   KEY REQUIREMENTS (locked):
   - Brand text "Mid Michigan Denture Repair" always on the LEFT of the page
     (header spans full width; not centered).
   - Desktop nav buttons do NOT stack/wrap. If the screen gets smaller,
     we switch to hamburger earlier (<= 980px).
   - Dark, thicker divider line under the header.
   - Mobile hamburger dropdown: buttons aligned to the RIGHT.
   - Two images on Home:
       * Dent 11 just above Pricing (slide up on scroll)
       * Dent 8 just above Call button (half-size on desktop)
     First image must never exceed the "original feel" size (cap width).
   - "We come to you!" pulse must be reliable: after first scroll AND visible.
   -    ===================================================================== */

/* ---------------------------
   GLOBAL / RESET
   --------------------------- */
:root{
  --page-bg: #E5F3FD;
  --ink: #111111;
  --accent: #0A3D62;
  --white: #ffffff;

  --page-max: 760px;
  --pad-x: 18px;
  --pad-top: 28px;
  --pad-bottom: 46px;

  /* Header divider (dark + thicker) */
  --header-divider: 4px solid rgba(0,0,0,0.28);

  /* Motion */
  --ease: 120ms ease;
  --reveal-ms: 600ms;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.4;
}

/* Flyer-style centered page content */
.page{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  text-align: center;
}

.spacer-sm{ height: 10px; }
.spacer-md{ height: 16px; }
.spacer-lg{ height: 22px; }

/* ---------------------------
   HEADER / NAV (single source of truth)
   ---------------------------
   IMPORTANT:
   - Header spans full width so brand stays left of the PAGE (viewport).
   - Desktop: centered buttons; no wrapping.
   - <= 980px: hamburger on right; dropdown opens with RIGHT-aligned buttons.
*/
.site-header{
  position: sticky;
  top: 0;
  z-index: 3000;
  background: var(--page-bg);
  border-bottom: var(--header-divider);
}

/* Full-width header row (NOT centered) */
.nav-inner{
  position: relative; /* anchors dropdown */
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto; /* brand | centered links | hamburger */
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

/* Brand pinned left */
.brand{
  justify-self: start;
  color: var(--accent);
  text-decoration: none;
  font-weight: 950;
  line-height: 1.05;
  font-size: clamp(1rem, 1.2vw + 0.7rem, 1.55rem);
}

/* Desktop links centered (NO wrap/stack) */
.nav-links{
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(14px, 2vw, 30px);
  flex-wrap: nowrap;     /* DO NOT STACK */
  white-space: nowrap;   /* keep buttons on one line */
}

/* Button style (matches email button vibe) */
.nav-links a{
  background: var(--white);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 10px 16px;
  line-height: 1;
  font-weight: 950;
  text-decoration: none;
  transition: transform var(--ease), filter var(--ease);
  will-change: transform;
}

.nav-links a:hover,
.nav-links a:focus-visible{
  transform: scale(1.04);
  filter: brightness(0.98);
}

/* Hamburger button (RIGHT), hidden on desktop */
.hamburger{
  justify-self: end;
  display: none;
  align-items: center;
  justify-content: center;

  /* Big padding (your requirement) */
  padding: 18px 28px;
  min-height: 72px;

  border-radius: 14px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--white);
cursor: pointer;
  touch-action: manipulation;

  transition: transform var(--ease), filter var(--ease);
}

.hamburger:hover,
.hamburger:focus-visible{
  transform: scale(1.04);
  filter: brightness(0.98);
}

/* 3-line hamburger icon */
.hamburger .bar{
  position: relative;
  width: 24px;
  height: 2px;
  background-color: var(--white);
border-radius: 999px;
}
.hamburger .bar::before,
.hamburger .bar::after{
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: var(--white);
border-radius: 999px;
}
.hamburger .bar::before{ top: -8px; }
.hamburger .bar::after{ top: 8px; }

/* Breakpoint to prevent stacking:
   - Switch to hamburger at 980px and below */
@media (max-width: 980px){
  .hamburger{ display: inline-flex; }

  /* Convert nav-links into dropdown panel */
  .nav-links{
    display: none; /* until .open */
    position: absolute;
    right: 14px;              /* anchor to right */
    left: auto;
    transform: none;
    top: calc(100% + 8px);

    background: var(--white);
    border: 2px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);

    flex-direction: column;
    gap: 12px;

    /* RIGHT ALIGN dropdown items */
    align-items: center;
    z-index: 3001;
    width: 90%;
    max-width: 320px;
  }

  .nav-links.open{ display: inline-flex; }

  .nav-links a{
    text-align: center;
    margin-left: 0;
    padding: 12px 16px;
    width: 100%;
    min-width: unset;
  }
}

/* ---------------------------
   LOGO / HERO
   --------------------------- */
.logo{
  width: min(420px, 92%);
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.subtitle{
  font-size: clamp(22px, 4.2vw, 40px);
  font-weight: 900;
  letter-spacing: 0.4px;
  margin: 10px 0 18px;
  line-height: 1.05;
}

/* "We come to you!" pill */
.pill{
  display: inline-block;
  margin: 18px 0 0;
  padding: 16px 26px;
  background: var(--ink);
  color: var(--page-bg);
  border-radius: 999px;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 24px;
}
.pill.pulse{
  animation: pillPop 1600ms ease-out; /* slightly faster */
}
@keyframes pillPop{
  0%{ transform: scale(1); }
  60%{ transform: scale(1.25); }
  100%{ transform: scale(1); }
}

.hero-phone{
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
}
.hero-phone a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 900;
}

/* ---------------------------
   SECTION TITLES / LISTS
   --------------------------- */
.section-title{
  margin: 42px 0 18px;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 18px;
  position: relative;
}
.section-title::before,
.section-title::after{
  content: "—";
  margin: 0 10px;
  color: var(--ink);
  font-weight: 700;
}

/* remove decorative dashes where needed (robust on mobile Safari) */
.section-title.no-dashes::before,
.section-title.no-dashes::after{
  content: "";
  margin: 0;
  display: none; /* prevents any pseudo-element spacing quirks on mobile */
}

.simple-list{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.simple-list li{
  margin: 6px 0;
  font-weight: 650;
}

/* ---------------------------
   IMAGES
   --------------------------- */
.image-block{
  margin: 22px 0;
}

.content-image{
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.10);
  display: block;
  margin: 0 auto;
}

/* First image: cap size so it never feels larger than your original layout.
   (Original logo uses 420px max; we match that feel.) */
.content-image.cap{
  max-width: 546px; /* ~30% larger */
}

/* Second image half-size on desktop */
.content-image.half{
  width: 50%;
  max-width: 520px;
}
@media (max-width: 980px){
  .content-image.half{
    width: 100%;
    max-width: 100%;
  }
}

/* ---------------------------
   PRICING BOX
   --------------------------- */
.pricing-box{
  margin-bottom: 32px;
  display: inline-block;
  width: min(520px, 100%);
  text-align: center;
  border: 2px solid #111;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px auto 0;
}
.pricing-box p{ margin: 8px 0; }
.fine-print{
  font-size: 13px;
  opacity: 0.92;
  margin-top: 10px;
}

/* ---------------------------
   WARRANTY
   --------------------------- */
.warranty{
  margin-top: 32px;
  margin: 14px 0 0;
  font-weight: 950;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 1.2em;
}
.warranty.pulse{
  animation: warrantyPulse 900ms ease-in-out 3;
}
@keyframes warrantyPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.15); }
  100%{ transform: scale(1); }
}

.trust{
  margin: 14px 0 0;
  font-weight: 700;
}

/* ---------------------------
   CTA BUTTONS
   --------------------------- */
.cta{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 3px solid var(--ink);
}

.button-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-top: 10px;
}

.btn{
  display: inline-block;
  text-decoration: none;
  font-weight: 950;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid var(--accent);
  background: var(--white);
  color: var(--accent);
  touch-action: manipulation;
  transition: transform var(--ease), filter var(--ease);
  will-change: transform;
}
.btn:hover,
.btn:focus-visible{
  transform: scale(1.10);
  filter: brightness(0.98);
}
.btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-size: 1.05em;
}
.btn-primary:hover,
.btn-primary:focus-visible{
  filter: brightness(1.05);
}

.cta-note{
  margin: 10px 0 0;
  font-size: 13px;
  opacity: 0.9;
  font-weight: 650;
}

/* ---------------------------
   INFO BOXES
   --------------------------- */
.info-box{
  margin-top: 22px;
  text-align: left;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 16px 14px;
}
.info-box h2{
  text-align: center;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.info-box ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.info-box li{ margin: 7px 0; }
.do-not-glue{
  font-weight: 950;
  text-transform: uppercase;
}

/* ---------------------------
   FOOTER
   --------------------------- */
footer{
  margin-top: 18px;
  font-size: 13px;
  opacity: 0.85;
  text-align: center;
}

/* ---------------------------
   REVEAL (slide up on scroll)
   --------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--reveal-ms) ease, transform var(--reveal-ms) ease;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------
   RESPONSIVE
   --------------------------- */
@media (max-width: 600px){
  .page{ padding: 18px 14px 34px; }
  .subtitle{ font-size: 30px; }
  .pill{ font-size: 18px; padding: 12px 18px; }
  .logo{ width: min(360px, 92%); }
  .btn{ }
}

/* ---------------------------
   ABOUT PAGE: AUTO ZOOM-IN IMAGE
   - Plays on page load (no scroll needed)
   - Starts small and zooms to full size
--------------------------- */
.zoom-in{
  animation: zoomIn 700ms ease-out both;
  transform-origin: center;
}

@keyframes zoomIn{
  from{ transform: scale(0.25); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}

/* Page-specific title scaling (About / Contact) */
.page-title-scale{
  display: inline-block;
  font-size: 1.3em; /* 30% larger */
}

/* ---------------------------
   CONTACT PAGE: AUTO FADE-IN IMAGE
   - Plays on page load
--------------------------- */
.fade-in{
  opacity: 0;
}
.fade-in.run{
  animation: fadeIn 1225ms ease-out both; /* slowed ~75% */
  opacity: 1;
}
@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* Centered info box variant used on Contact page */
.centered-box{
  text-align: center;
}
.centered-box h2{
  text-align: center;
}
.centered-list{
  list-style: disc;
  list-style-position: inside;
  padding-left: 0;
  margin: 10px 0 0;
}
.centered-list li{
  margin: 7px 0;
}

/* ----------------------------------------------------------
   Centering tweaks for Contact page lists
   - Makes the UL itself a centered block (inline-block)
   - Keeps bullets inside while keeping overall layout centered
---------------------------------------------------------- */
.centered-box .centered-list{
  display: inline-block;   /* centers the list as a block */
  text-align: left;        /* keeps bullet text readable */
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------
   Tightened spacing for Contact page boxes
   - Reduces padding and vertical spacing by ~30%
   - Applies ONLY to boxes using .centered-box
---------------------------------------------------------- */
.centered-box{
  padding: 12px 10px;   /* tighter than default info-box */
}

.centered-box + .centered-box{
  margin-top: 20px;     /* reduce vertical gap between boxes */
}

/* ----------------------------------------------------------
   Width tightening for Contact page boxes
   - Narrows the Service Areas / Specializing In boxes
   - Reduces empty horizontal space
---------------------------------------------------------- */
.centered-box{
  max-width: 420px;     /* narrower box */
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------
   Accessibility / SEO helper
   - Visually hidden but still readable by screen readers
---------------------------------------------------------- */
.sr-only{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   Responsive Google Maps embed
   - Keeps a nice aspect ratio on all devices
   - Matches site rounded corners + border style
---------------------------------------------------------- */
.map-embed{
  position: relative;
  width: 100%;
  max-width: 420px; /* matches tightened contact boxes */
  margin: 0 auto;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;

  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.10);
  background: #fff;
}

.map-embed iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contact page: map box stays the same narrowed width as the other centered boxes */
.map-box{
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}


/* Mobile safety: keep warranty pulse subtle and within screen width */
@media (max-width: 600px) {
  /* Ensure the pulsing element can't visually overflow */
  .pulse,
  .warranty-pulse {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;

    /* Safe responsive sizing */
    font-size: clamp(0.9rem, 4.5vw, 1.2rem) !important;

    /* Subtle pulse on mobile */
    transform-origin: center;
    /* animation applied only to specific elements to prevent repeat issues on mobile */
}

  @keyframes pulseSmall {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.035); }
    55%  { transform: scale(0.99); }
    75%  { transform: scale(1.025); }
    100% { transform: scale(1); }
  }
}

/* hamburger bars explicit accent */
.hamburger .bar,
.hamburger .bar::before,
.hamburger .bar::after{ background-color: var(--white);
}

.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item[open] summary::after{ content: "▴"; }
.faq-answer p{ margin: 12px 0 0; }


/* FAQ accordion - Style A (matches nav buttons) */
.card.faq{ padding: 14px; }
.faq-item{
  margin: 12px 0;
}
.faq-item:not([open]) summary:hover{ transform: scale(1.02); filter: brightness(0.98); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item[open] summary::after{ content:"▴"; }


/* Sticky footer layout (keeps footer consistent on short pages) */
html, body{ height: 100%; }
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main.page{ flex: 1 0 auto; }
footer{ margin-top: auto; }


/* Footer (universal) */
.site-footer{ text-align: center; padding: 18px 0 26px; }
.footer-lines{ display: grid; gap: 6px; }
.footer-top{ font-weight: 850; opacity: 0.95; }
.footer-bottom{ font-weight: 800; opacity: 0.9; }

/* FAQ hero split */
.faq-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; }
.faq-hero-img{ width:100%; border-radius:16px; }
@media(max-width:800px){
  .faq-hero-grid{ grid-template-columns:1fr; }
}

/* Mail-in page spacing cleanup */
.page .card{ margin-bottom: 22px; }
.page .card:last-child{ margin-bottom: 0; }
.steps{ padding-left: 20px; }
.bullets{ padding-left: 20px; }

/* Packing slip page */
.packing-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.print-btn{
  background: var(--accent);
  color: var(--white);
  border: none;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 950;
  cursor: pointer;
  transition: transform var(--ease), filter var(--ease);
}
.print-btn:hover{ transform: scale(1.02); filter: brightness(0.98); }

.packing-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:14px; }
.packing-block{ border: 2px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 14px; background: var(--white); }
.packing-block h2{ margin-top: 0; }
.field{ display:grid; grid-template-columns: 180px 1fr; gap:12px; align-items:center; margin: 10px 0; }
.line{ border-bottom: 2px solid rgba(0,0,0,0.25); height: 20px; }
.line.tall{ height: 44px; }
.checklist{ margin: 10px 0 0; padding-left: 18px; }
.checklist li{ margin: 6px 0; }

@media(max-width: 900px){
  .packing-grid{ grid-template-columns:1fr; }
  .field{ grid-template-columns: 1fr; }
}

/* Print styles */
@media print{
  header, nav, footer{ display:none !important; }
  .print-btn{ display:none !important; }
  body{ background:#fff !important; }
  .card{ box-shadow:none !important; }
  .packing-block{ border: 1px solid #000 !important; }
  .line{ border-bottom: 1px solid #000 !important; }
}

/* Info-box ordered list spacing (Mail-In page) */
.info-box ol.steps{ margin: 10px 0 0; padding-left: 22px; }
.info-box ol.steps li{ margin: 8px 0; }

/* Centered mailing address */
.center-address{ text-align:center; margin:10px 0 22px; font-size:1.05rem; }

/* Mail-in CTA buttons */
.center-text{ text-align:center; }

/* removed custom cta-btn */
.cta-btn{
  background: var(--accent);
  color:#fff;
  padding:12px 18px;
  border-radius:14px;
  font-weight:900;
  text-decoration:none;
  display:inline-block;
}

/* Packing slip polish */
.packing-slip{ max-width:900px; margin:0 auto; }
.packing-header{ margin-bottom:10px; }
.packing-block{ margin-top:14px; }
.circle-options{ border-bottom:2px solid rgba(0,0,0,0.25); padding:6px 0; letter-spacing:1px; }
@media print{
  .packing-slip{ max-width:none; }
}

/* hard-stop pulses (never loop) */
.pill.pulse{ animation-iteration-count: 3 !important; }
.warranty.pulse{ animation-iteration-count: 3 !important; }

/* mobile pulse specific */
@media (max-width: 600px){
  .pill.pulse{ animation: pulseSmall 1.6s ease-in-out 3 !important; }
  .warranty.pulse{ animation: pulseSmall 1.6s ease-in-out 3 !important; }
}


/* Contact page logo (transparent PNG)
   This image also has the .content-image class (used site-wide).
   We override only the parts we need with a more specific selector,
   so we don’t need any !important rules.
*/
img.content-image.contact-logo{
  /* Safari/iOS can stubbornly keep the default .content-image border.
     Force it off for the transparent logo PNG. */
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}



/* Packing Slip page spacing tweaks
   Keeps the page looking the same, just adds a bit more breathing room.
   Scoped to main content so the header/footer always stay full-width.
*/
body.packing-slip main{padding-top:40px;padding-bottom:60px}
body.packing-slip main h1,body.packing-slip main h2{margin-bottom:18px}
body.packing-slip main p,body.packing-slip main label{margin-bottom:10px;line-height:1.55}
body.packing-slip main .btn,body.packing-slip main button{margin-top:20px;margin-bottom:10px}
body.packing-slip h1,body.packing-slip h2{margin-bottom:18px}
body.packing-slip p,body.packing-slip label{margin-bottom:10px;line-height:1.55}
body.packing-slip .btn,body.packing-slip button{margin-top:20px;margin-bottom:10px}

/* Footer link styling
   Keeps footer links looking like the rest of the footer (no layout/visual surprises).
*/
.footer-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-link:hover{
  filter: brightness(0.95);
}

.legal-center ul{
  display:inline-block;
  text-align:left;
  margin:0 auto 20px;
}


/* Brand text wrapping
   Keeps "Mid Michigan Denture Repair" on one line on desktop so the header looks consistent.
   Mobile already switches to hamburger menu; this won't change that behavior.
*/
.brand{ white-space: nowrap; }


/* Packing Slip header full-bleed fix
   If anything on this page constrains the layout width, this forces the header
   (and its divider line) to span the full viewport width and resize correctly.
   Scoped ONLY to the packing slip page so other pages remain unchanged.
*/
body.packing-slip .site-header{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Privacy / legal page centering
   Centers the policy content (including lists).
*/
.legal-center{ text-align: center; }
.legal-center ul{
  list-style-position: inside;
  padding-left: 0;
  margin: 0 auto 20px;
}

/* Footer uppercase styling
   Makes all footer text consistent and bold-looking without changing layout.
*/
.site-footer{
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* Contact page logo (no border)
   The logo PNG has transparency and should blend into the blue background.
   .content-image has a subtle border for photos; this removes it for the logo.
*/
.content-image.contact-logo{
  border: 0;
  box-shadow: none;
  outline: 0;
  background: transparent;
}


/* FAQ touch hover fix
   On touch devices, iOS can "stick" :hover after tapping, which can make the
   accordion feel like the CSS isn't working. Disable hover transforms there.
*/
@media (hover: none){
}


/* Footer breathing room + iOS safe-area padding */
.site-footer{ padding-bottom: calc(26px + 18px + env(safe-area-inset-bottom)); }


/* Remove logo image border/outline everywhere */
img{border:none;outline:none;box-shadow:none;}

/* Remove any logo image outline/border */
.site-header img, .logo img, img.logo{border:0;outline:0;box-shadow:none;}

/* =========================
   FAQ Accordion (classic)
   ========================= */
body.faq-page details.faq-item{
  background: var(--white);
  border: 2px solid var(--accent);
  border-radius: 14px;
  margin: 12px 0;
  overflow: hidden;
}

body.faq-page details.faq-item > summary{
  list-style: none;
  cursor: pointer;
  color: var(--accent);
  font-weight: 950;
  display: block;
  width: 100%;
  padding: 14px 48px 14px 14px;
  position: relative;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body.faq-page details.faq-item > summary::-webkit-details-marker{ display:none; }
body.faq-page details.faq-item > summary::after{
  content: "▾";
  font-weight: 900;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
body.faq-page details.faq-item[open] > summary::after{ content: "▴"; }

body.faq-page .faq-answer{
  padding: 0 14px 14px;
  border-top: 2px solid rgba(0,0,0,0.06);
  text-align: left;
}
body.faq-page .faq-answer p{ margin: 12px 0 0; }



/* Added: footer hours for Google consistency */
.footer-hours{margin-top:6px;font-size:0.95em;opacity:0.9;}


/* ===== Mobile menu backdrop (subtle blur behind menu only) =====
   Notes:
   - This uses a light blur + dim overlay behind the dropdown.
   - The dropdown itself is not blurred (higher z-index).
*/
.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.18);   /* light dim */
  backdrop-filter: blur(1px);     /* subtle blur */
  -webkit-backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2000; /* dropdown is 3001 */
}
.menu-backdrop.active{
  opacity: 1;
  pointer-events: auto;
}


/* ===== iPhone tactile feel (no real haptics, but feels like it) ===== */
#navToggle{
  transition: transform 0.08s ease;
}
#navToggle:active{
  transform: scale(0.95);
}

/* Slight bounce when menu opens */
@media (max-width: 980px){
  .nav-links{
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .nav-links.open{
    transform: translateY(0) scale(1);
  }
  .nav-links{
    transform: translateY(-6px) scale(0.98);
  }
}