/* ==========================================================================
   perioviews.com — site.css
   Utah Valley Periodontics and Dental Implants

   Palette (see DESIGN.md):
     --navy      #13294D   ink, dark bands, header type
     --navy-deep #0B1A33   video wells, deepest surfaces
     --accent    #AD540D   filled accent: buttons, active states, slider handle (4.96:1 w/ white)
     --accent-tx #8A410C   the same accent as TEXT on light grounds (7:1 on bone)
     --limestone #F3F1EA   page ground
     --bone      #FBFAF6   cards and raised surfaces
     --slate     #55606E   muted text (7:1 on limestone)
     --rule      #D9D7CC   hairlines on light
     --rule-dark #223D63   hairlines on navy

   Only global and repeated styles live here. Page-specific layout stays as
   inline styles on the elements, which is how the design was authored.
   ========================================================================== */

:root {
  --navy: #13294D;
  --navy-deep: #0B1A33;
  --accent: #AD540D;
  --accent-tx: #8A410C;
  --limestone: #F3F1EA;
  --bone: #FBFAF6;
  --slate: #55606E;
  --body: #33415A;
  --rule: #D9D7CC;
  --rule-dark: #223D63;
  --on-navy: #C6D2E1;
  --on-navy-mute: #A8B8CE;
  --header-h: 140px;
}

/* --- reset + base ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* stops in-page anchors landing underneath the sticky header */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--limestone);
  color: var(--navy);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; }

a {
  color: var(--accent-tx);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--navy); }

::selection { background: var(--accent); color: var(--bone); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- skip link --------------------------------------------------------- */

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--navy); color: var(--bone);
  padding: 12px 18px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; color: var(--bone); }

/* --- shell ------------------------------------------------------------- */

.page { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 40px); }
.wrap--narrow { max-width: 900px; }
.wrap--prose { max-width: 760px; }
main { flex: 1; }

/* --- utility bar + header ---------------------------------------------- */

.utility {
  background: var(--navy); color: var(--on-navy);
  font-size: 12.5px; letter-spacing: 0.04em;
}
.utility__inner {
  display: flex; flex-wrap: wrap; gap: 0 22px;
  align-items: center; justify-content: space-between; min-height: 44px;
}
.utility__links { display: flex; gap: 20px; align-items: center; }
/* 44px minimum tap target, per the brief */
.utility a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px;
  text-decoration: none; color: var(--on-navy);
}
.utility a.is-phone { color: var(--bone); font-weight: 600; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(243, 241, 234, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; gap: 24px; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.site-header__logo { display: block; line-height: 0; text-decoration: none; }
.site-header__logo img { width: clamp(190px, 22vw, 258px); height: auto; display: block; }

.nav-primary { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav-primary a {
  font-size: 14.5px; color: var(--navy); text-decoration: none;
  font-weight: 500; white-space: nowrap;
}
.nav-primary a:hover { color: var(--accent-tx); }

/* --- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 16px 26px;
  font-size: 16px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
  font-family: inherit;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--navy); color: #fff; }
.nav-primary .btn--primary,
.nav-primary .btn--primary:hover { color: #fff; }
.btn--ghost { border: 1px solid var(--navy); color: var(--navy); background: none; }
.btn--ghost:hover { background: var(--navy); color: var(--bone); }
.btn--light { background: var(--bone); color: var(--navy); min-height: 56px; padding: 18px 30px; font-size: 16.5px; }
.btn--light:hover { background: var(--navy); color: var(--bone); }
.btn--sm { min-height: 44px; padding: 13px 20px; font-size: 14.5px; }

/* --- off-canvas navigation --------------------------------------------- */

.nav-toggle {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: 1px solid var(--rule); cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--navy); }

.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(19, 41, 77, 0.55); }
.scrim[hidden] { display: none; }

.offcanvas {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(90vw, 380px); background: var(--limestone); overflow-y: auto;
  padding: 20px 22px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 18px;
}
.offcanvas[hidden] { display: none; }
.offcanvas__head { display: flex; justify-content: space-between; align-items: center; }
.offcanvas__close {
  min-width: 44px; min-height: 44px; border: 1px solid var(--rule);
  background: none; font-size: 20px; color: var(--navy); cursor: pointer;
}
.offcanvas__nav { display: flex; flex-direction: column; }
.offcanvas__nav a {
  border-top: 1px solid var(--rule); padding: 15px 0; min-height: 44px;
  font-size: 16.5px; color: var(--navy); text-decoration: none;
}
.offcanvas__nav a:last-child { border-bottom: 1px solid var(--rule); }

/* --- persistent mobile booking bar ------------------------------------- */

.booking-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--navy);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform .25s ease;
}
.booking-bar.is-visible { transform: none; }
.booking-bar a {
  color: var(--bone); text-decoration: none; font-size: 15.5px; font-weight: 600;
  min-height: 56px; display: flex; align-items: center; justify-content: center;
}
.booking-bar a.is-primary { background: var(--accent); }

/* --- eyebrow / section furniture --------------------------------------- */

.eyebrow {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--accent); display: inline-block; }
.eyebrow--plain::before { display: none; }
.eyebrow--on-navy { color: var(--on-navy-mute); }

.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list > li { border-top: 1px solid var(--rule); padding: 14px 0; }
.rule-list > li:last-child { border-bottom: 1px solid var(--rule); }

/* Grid of ruled cells. Rules live on the ITEMS so a short last row leaves no
   outlined empty cell — the container must not draw its own edges. */
.cell-grid { display: grid; }
.cell-grid > * {
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
}
.cell-grid--navy > * {
  border-top-color: var(--rule-dark);
  border-left-color: var(--rule-dark);
  box-shadow: 1px 0 0 var(--rule-dark), 0 1px 0 var(--rule-dark);
}

/* --- before / after comparison slider ---------------------------------- */

.compare { margin: 0; display: flex; flex-direction: column; }
.compare__track {
  position: relative; aspect-ratio: 3/2; overflow: hidden;
  background: var(--navy); touch-action: pan-y; cursor: ew-resize; user-select: none;
}
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__clip { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.compare__tag {
  position: absolute; top: 12px; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 6px 9px; color: var(--bone);
}
.compare__tag--before { left: 12px; background: rgba(19, 41, 77, 0.82); }
.compare__tag--after { right: 12px; background: rgba(173, 84, 13, 0.94); }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--bone); transform: translateX(-1px); cursor: ew-resize;
}
.compare__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bone);
  display: flex; align-items: center; justify-content: center;
  color: var(--bone); font-size: 14px; letter-spacing: 0.1em;
}
.compare__caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  border-top: 1px solid var(--rule); padding-top: 9px; margin-top: 9px;
  font-size: 12px; color: var(--slate);
}
/* Without JS the two images stack, labelled — no interaction, no broken state. */
.no-js .compare__clip { position: static; clip-path: none; }
.no-js .compare__track { aspect-ratio: auto; display: grid; gap: 2px; }
.no-js .compare__img { position: static; height: auto; }
.no-js .compare__handle { display: none; }

/* --- video facade ------------------------------------------------------ */

.facade { position: relative; aspect-ratio: 16/9; background: var(--navy-deep); display: block; }
.facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facade__overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(11, 26, 51, 0.30);
}
.facade__play {
  width: 76px; height: 76px; border-radius: 50%; background: var(--accent); color: var(--bone);
  display: flex; align-items: center; justify-content: center; font-size: 24px; padding-left: 5px;
}
.facade__label {
  position: absolute; left: 0; right: 0; bottom: 0; color: var(--bone); font-size: 13px;
  padding: 36px 16px 14px;
  background: linear-gradient(transparent, rgba(11, 26, 51, 0.88));
}
.facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- FAQ accordion ----------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }
.faq:last-of-type { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; padding: 18px 0;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--navy); cursor: pointer;
  display: flex; gap: 16px; justify-content: space-between; align-items: baseline;
  min-height: 56px;
}
.faq__mark { color: var(--accent-tx); font-size: 20px; line-height: 1; }
.faq__a { padding: 0 0 20px; }
/* Answers are open in the markup; JS collapses them on load, so with JS
   disabled every answer is readable. */
.faq__a[hidden] { display: none; }

/* --- reveal on scroll -------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .booking-bar { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* --- print ------------------------------------------------------------- */

@media print {
  .no-print, .utility, .site-header, .booking-bar, .offcanvas, .scrim,
  footer, nav[aria-label="Breadcrumb"] { display: none !important; }
  .print-only { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: none; }
  section { padding: 0 !important; }
  h1 { font-size: 20pt !important; margin: 0 0 8pt !important; }
  h2 { font-size: 13pt !important; margin: 12pt 0 4pt !important; break-after: avoid; }
  h3 { font-size: 11.5pt !important; break-after: avoid; }
  p, li, dt, dd { font-size: 10.5pt !important; line-height: 1.35 !important; }
  .faq__a { display: block !important; }
  img { max-width: 100% !important; }
}
.print-only { display: none; }

/* --- generated state classes ------------------------------------------
   Hover/focus/active styles that were authored as inline state attributes in
   the component files. Deduped across the whole site; the class on the element
   is its only reference. */
.hv-1:hover { background:#13294D; }
.hv-2:hover { background:#13294D; color:#FBFAF6; }
.hv-3:hover { background:#FBFAF6; }
.hv-4:hover { background:#F3F1EA; }
.hv-5:hover { background:#FBFAF6; color:#13294D; }
.hv-6:hover { color:#FBFAF6; }
.hv-7:hover { border-color:#13294D; }

/* --- filter chips + step rail (static conversion) ----------------------- */

.chip {
  background: none; color: var(--navy); border: 1px solid var(--rule);
  font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 9px 14px; min-height: 40px; cursor: pointer;
}
.chip:hover { border-color: var(--navy); }
.chip.is-active { background: var(--navy); color: var(--bone); border-color: var(--navy); }

.step-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); gap: clamp(20px, 3vw, 44px); }
/* the grid must live here, not inline: site.js hides panels with [hidden] and an
   inline display would outrank the UA rule */
[data-step-panel][hidden] { display: none; }

.step-tab { background: var(--navy); }
.step-tab:hover { background: #1B3663; }
.step-tab.is-active { background: var(--accent); }
/* With JS off no tab is authoritative and every panel shows, so the rail
   reads as a plain list of the five stages. */
.no-js .step-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); gap: clamp(20px, 3vw, 44px); }
/* the grid must live here, not inline: site.js hides panels with [hidden] and an
   inline display would outrank the UA rule */
[data-step-panel][hidden] { display: none; }

.step-tab { background: var(--navy); }
.no-js [data-step-panel] + [data-step-panel] { border-top: 1px solid var(--rule-dark); padding-top: clamp(20px, 3vw, 40px); margin-top: clamp(20px, 3vw, 40px); }

/* --- generated state classes -------------------------------------------
   Hover/focus/active styles authored as inline state attributes in the
   component files. Deduped across the site; the class is the only reference. */
.hv-1:hover { background:#13294D; }
.hv-2:hover { background:#13294D; color:#FBFAF6; }
.hv-3:hover { background:#FBFAF6; }
.hv-4:hover { background:#F3F1EA; }
.hv-5:hover { border-color:#13294D; }
.hv-6:hover { background:#FBFAF6; color:#13294D; }
.hv-7:hover { color:#FBFAF6; }


/* --- responsive layer --------------------------------------------------
   Breakpoints: 1040px (nav collapses to off-canvas), 900px (booking bar is
   mobile-only), 620px (phone typography and tap targets). Every layout grid
   uses minmax(min(Npx,100%),1fr) so a narrow viewport can never overflow. */

html { overflow-x: clip; }
img { height: auto; }
h1, h2, h3, p, li, dd, blockquote, figcaption { overflow-wrap: break-word; }

.nav-toggle { display: none; }
@media (max-width: 1040px) {
  .nav-primary { display: none; }
  .nav-toggle { display: flex; }
}

/* the persistent booking bar belongs to touch screens only */
@media (min-width: 900px) { .booking-bar { display: none !important; } }
/* footer already reserves 72px for the bar, so no extra page padding is needed */

/* touch targets: footer links and standalone in-page links reach 44px */
@media (max-width: 899px) {
  footer nav ul { gap: 0 !important; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 620px) {
  .utility { font-size: 12px; }
  .utility__inner { justify-content: center; text-align: center; gap: 0 18px; }
  .utility__links { justify-content: center; flex-wrap: wrap; gap: 0 18px; }
  .site-header__inner { gap: 14px; padding-top: 10px; padding-bottom: 10px; }
  .btn { padding: 15px 20px; font-size: 15.5px; }
  .btn--light { min-height: 52px; padding: 16px 22px; font-size: 16px; }
  .chip { min-height: 44px; padding: 11px 14px; }
  .compare__caption { flex-direction: column; align-items: flex-start; gap: 4px; }
  .compare__grip { width: 44px; height: 44px; }
  .facade__play { width: 58px; height: 58px; font-size: 20px; }
  .facade__label { padding: 30px 14px 12px; font-size: 12.5px; }
  .faq__q { font-size: 16px; gap: 12px; }
}