/* ==========================================================================
   Smyle Dental — layout
   Sticky header, primary navigation, mobile drawer, footer.
   ========================================================================== */

/* -------------------------------------------------------------- header -- */
/* The frosted panel is a layer of its own, behind the content, rather than a
   filter on the header itself.
   backdrop-filter turns the element it sits on into a render surface, and the
   logo — the one thing in here that is an image rather than text — gets
   resampled into that surface and comes out soft at any browser zoom. Painted
   underneath instead, the blur still reads exactly the same and the wordmark
   is drawn straight to the screen. */
.site-header {
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  transition: padding .25s var(--e-out), box-shadow .25s ease-out;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 247, 241, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* The wordmark is a single-colour yellow SVG and ships in its own yellow at
   the top of the page. No darkening filter: that turned it gold. */
/* Height animates; filter does not, and deliberately.
   Naming filter in the transition promotes the logo to its own compositing
   layer for good, and the browser rasterises that layer at 1x — so at any
   browser zoom or on a high-DPI screen the wordmark comes out soft while the
   text beside it stays crisp. A vector and a 900px bitmap look equally bad,
   which is what gives it away. The colour swap on scroll is worth nothing
   next to a logo that is blurry the whole time it is on screen. */
.site-header .logo {
  height: 88px;
  width: auto;
  transition: height .25s var(--e-out);
}

/* Full size at rest, compact once the page scrolls, so the big logo never
   eats the viewport on the way down. Once the header is stuck it sits over
   page content, so the wordmark goes black to stay legible. */
.site-header.is-stuck { padding: 9px 0; box-shadow: 0 6px 24px rgba(30, 27, 22, .08); }
.site-header.is-stuck .logo { height: 58px; filter: brightness(0); }

/* ---------------------------------------------------------- main nav -- */
.nav-main {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--mid);
}
.nav-main a { position: relative; transition: color .16s ease-out; }
.nav-main a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1.5px;
  background: var(--ink3);
  transition: right .26s var(--e-out);
}
.nav-main a:hover { color: var(--ink3); }
.nav-main a:hover::after { right: 0; }

/* The page the visitor is on keeps its underline drawn. */
.nav-main a[aria-current="page"] { color: var(--ink3); }
.nav-main a[aria-current="page"]::after { right: 0; }

/* Services is the one item with children. */
.nav-main .drop { position: relative; display: inline-flex; }
.nav-main .drop > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-main .drop .cv { font-style: normal; font-size: 11px; line-height: 1; transition: transform .2s var(--e-out); }
.nav-main .drop:hover .cv { transform: translateY(2px); }
.nav-main .menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding-top: 16px;
  opacity: 0;
  visibility: hidden;
  z-index: 70;
  transition: opacity .18s var(--e-out), transform .18s var(--e-out);
}
.nav-main .drop:hover .menu,
.nav-main .drop:focus-within .menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-main .navcard {
  display: block;
  min-width: 264px;
  background: #fff;
  border: 1px solid rgba(30, 27, 22, .10);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(30, 27, 22, .13);
  padding: 18px 20px 8px;
}
.nav-main .navcard .city {
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--soft);
  margin: 0 0 8px;
}
.nav-main .navcard a {
  display: block;
  padding: 10px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink3);
  border-bottom: 1px solid rgba(30, 27, 22, .08);
}
.nav-main .navcard a:last-child { border-bottom: 0; }
.nav-main .navcard a::after { display: none; }
.nav-main .navcard a:hover { color: var(--yellow-deep); }

/* Services carries both cities, so its panel runs two columns. Anchored to the
   right of the trigger rather than centred, otherwise a panel this wide runs
   off the left of the viewport on narrower laptops. */
.nav-main .menu--wide { left: auto; right: 0; transform: translateX(0) translateY(-6px); }
.nav-main .drop:hover .menu--wide,
.nav-main .drop:focus-within .menu--wide { transform: translateX(0) translateY(0); }
.nav-main .menu--wide .navcard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 34px;
  min-width: 580px;
  padding: 20px 24px 14px;
}
.nav-main .navcol { display: block; min-width: 0; }
.nav-main .menu--wide .navcard a { padding: 7px 0; font-size: 14.5px; }
.nav-main .navcol a:last-child { border-bottom: 0; }

/* The city heading in the Services panel doubles as the link to that city's
   hub page, so it keeps the label styling rather than the link styling. */
.nav-main .navcard a.city {
  padding: 0;
  border-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--soft);
}
.nav-main .navcard a.city:hover { color: var(--yellow-deep); }

.header-cta { margin-left: 6px; }

/* ------------------------------------------------------ mobile drawer -- */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: rgba(30, 27, 22, .06);
  color: var(--ink3);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .24s var(--e-out), opacity .18s ease-out;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(16, 18, 22, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease-out, visibility .24s;
}
.drawer-scrim[data-open] { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  z-index: 90;
  background: var(--cream);
  box-shadow: -20px 0 60px rgba(30, 27, 22, .28);
  transform: translateX(100%);
  transition: transform .3s var(--e-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[data-open] { transform: none; }
.drawer .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(30, 27, 22, .12);
}
/* The drawer head is cream, so the wordmark goes black here for the same
   reason the stuck header does. */
.drawer .drawer-head .logo { height: 52px; width: auto; filter: brightness(0); }
.drawer .drawer-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 27, 22, .07);
  color: var(--ink3);
  font-size: 17px;
  line-height: 1;
}
.drawer nav { padding: 12px 22px 22px; }
.drawer nav > a,
.drawer .sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid rgba(30, 27, 22, .1);
  background: transparent;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink3);
  text-align: left;
}
.drawer .sub-toggle .cv { font-size: 12px; color: var(--soft); transition: transform .24s var(--e-out); }
.drawer .sub-toggle[aria-expanded="true"] .cv { transform: rotate(180deg); }
.drawer .submenu {
  display: none;
  padding: 4px 0 10px 14px;
}
.drawer .submenu[data-open] { display: block; }
.drawer .submenu .city {
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--soft);
  margin: 12px 0 4px;
}
.drawer .submenu a {
  display: block;
  padding: 10px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--mid);
}
.drawer .submenu a.city { padding: 0; }
.drawer .submenu a.city:hover { color: var(--yellow-deep); }
.drawer .drawer-foot {
  margin-top: auto;
  padding: 22px;
  border-top: 1px solid rgba(30, 27, 22, .12);
  display: grid;
  gap: 10px;
}
.drawer .drawer-foot .btn { width: 100%; }

body.nav-open { overflow: hidden; }

/* -------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--ink3);
  color: rgba(250, 247, 241, .6);
  padding: 64px 0 32px;
  font-size: 14.5px;
}
.site-footer .logo { height: 76px; width: auto; margin-bottom: 18px; }
.site-footer .cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 38px;
}
.site-footer h4 {
  color: var(--cream);
  font-family: Fraunces, Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.site-footer p { margin: 0 0 6px; line-height: 1.6; }
.site-footer p:last-of-type { margin-bottom: 0; }
.site-footer ul { padding: 0; margin: 0; }
.site-footer li { list-style: none; margin-bottom: 10px; }
.site-footer li b { color: #fff; }
.site-footer a:hover { color: var(--yellow); }
.site-footer .legal {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
}

/* ------------------------------------------------------------ mobile -- */
@media (max-width: 1100px) {
  .nav-main { gap: 20px; font-size: 14.5px; }
  .site-header .logo { height: 74px; }
}

@media (max-width: 940px) {
  .nav-main,
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .site-header { padding: 10px 0; }
  .site-header .logo { height: 66px; }
  .site-header.is-stuck .logo { height: 52px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .site-footer .cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ====================================================== scroll progress ====
   A thin rail on the right edge that fills from the bottom up as the page is
   read, and doubles as the way back to the top.

   The fill is driven by a scroll-linked CSS animation, so on browsers that
   support it there is no JavaScript in the scroll path at all. Where that is
   missing, site.js rewrites the rule in #smyProgressRule — never an inline
   style attribute, which the house rules do not allow.
   ========================================================================== */
.smy-progress {
  position: fixed;
  right: 18px;
  bottom: 26px;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  width: 34px;
  height: 132px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 24, 29, .07);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--e-out), visibility .28s var(--e-out);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Revealed once there is enough page behind you for it to mean anything. */
.smy-progress.is-on {
  opacity: 1;
  visibility: visible;
}

.smy-progress__track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.smy-progress__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--yellow-deep) 0%, var(--yellow) 100%);
  transform: scaleY(0);
  transform-origin: bottom center;
}

@supports (animation-timeline: scroll()) {
  .smy-progress__fill {
    animation: smy-progress-fill linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes smy-progress-fill {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* The arrow sits above the fill so it stays readable at any position. */
.smy-progress__arrow {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  color: var(--ink);
  transition: transform .28s var(--e-out);
}

.smy-progress:hover .smy-progress__arrow { transform: translateY(-3px); }

.smy-progress:focus-visible {
  outline: 2px solid var(--yellow-deep);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .smy-progress {
    right: 12px;
    bottom: 16px;
    width: 28px;
    height: 96px;
  }
}

/* The drifting hero and the dialog already own the screen on a phone. */
body.nav-open .smy-progress {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .smy-progress,
  .smy-progress__arrow { transition: none; }
}