/* ============================================================
   Farzad Dental — mega-menu navigation + cookie consent
   Loaded on every page after the page's inline <style>,
   so these rules win where they overlap.
   ============================================================ */

/* ---- desktop mega dropdowns ---- */
.links .mm-item{position:relative;display:flex;align-items:center}
.links .mm-item>a{display:inline-flex;align-items:center;gap:.28rem}
.mmcaret{transition:transform .18s}
.mm-item:hover .mmcaret{transform:rotate(180deg)}

.mm-panel{
  position:absolute;top:100%;left:0;margin-top:.55rem;
  background:#fff;border:1px solid #e2e8f1;border-radius:16px;
  box-shadow:0 24px 60px rgba(20,30,60,.18);
  padding:1.15rem 1.25rem;z-index:300;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.mm-item:hover .mm-panel,
.mm-item:focus-within .mm-panel{opacity:1;visibility:visible;transform:translateY(0)}

.mm-wide{width:min(780px,94vw)}
.mm-sm{width:min(560px,92vw)}
.mm-simple{min-width:236px}

.mm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem 1.4rem}
.mm-sm .mm-grid{grid-template-columns:repeat(3,1fr)}
.mm-col h4{
  font:700 .68rem/1 'Manrope',sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:#8894ad;margin:.55rem 0 .35rem
}
.mm-col a,.mm-simple a{
  display:block;padding:.26rem 0;text-decoration:none;
  font:600 .9rem 'Manrope',sans-serif;color:#22409a;white-space:nowrap
}
.mm-col a:hover,.mm-simple a:hover{color:#0a6b51}

.mm-foot{
  margin-top:.85rem;padding-top:.8rem;border-top:1px solid #eef2f8;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font:600 .82rem 'Manrope',sans-serif;color:#5c6883
}
.mm-foot a{color:#0a6b51;text-decoration:none;font-weight:700}

/* mega only on desktop; mobile uses the slide-in drawer */
@media(max-width:1000px){.mm-panel{display:none!important}}

/* ---- mobile drawer category labels ---- */
.drawer .d-cat{
  font:700 .66rem/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:#8894ad;margin:.7rem 0 .15rem;padding-top:.5rem;border-top:1px solid #eef2f8
}
.drawer .d-cat:first-child{border-top:0;padding-top:0}

/* ---- cookie consent banner ---- */
.fd-consent{
  position:fixed;right:20px;left:auto;bottom:20px;top:auto;z-index:1000;
  width:auto;max-width:360px;
  background:#fff;color:#16265e;
  border:1px solid #e2e8f1;border-radius:14px;
  box-shadow:0 14px 44px rgba(22,38,94,.20);
  animation:fdup .3s ease
}
.fd-consent-in{
  padding:.95rem 1.05rem;
  display:flex;flex-direction:column;align-items:stretch;gap:.7rem
}
.fd-consent-txt{max-width:none}
.fd-consent-txt b{display:block;font:700 .9rem 'Manrope',sans-serif;color:#16265e;margin-bottom:.2rem}
.fd-consent-txt span{font:400 .78rem/1.45 'Inter',sans-serif;color:#5c6883}
.fd-consent-txt a{color:#0b7c5e;text-decoration:underline}
.fd-consent-btns{display:flex;gap:.5rem}
.fd-btn{
  cursor:pointer;border-radius:9px;padding:.5rem 1rem;flex:1;
  font:700 .8rem 'Manrope',sans-serif;border:1.5px solid transparent;transition:.15s
}
.fd-accept{background:#0b7c5e;color:#fff}
.fd-accept:hover{background:#095f48}
.fd-decline{background:#f4f6fb;color:#16265e;border-color:#e2e8f1}
.fd-decline:hover{border-color:#0b7c5e;color:#0b7c5e}
@media(max-width:640px){
  .fd-consent{left:12px;right:12px;top:auto;bottom:12px;transform:none;max-width:none;animation:fdup .3s ease}
}
@keyframes fdup{from{transform:translateY(120%)}to{transform:translateY(0)}}
.fd-cookie-link{cursor:pointer;color:inherit;text-decoration:underline;opacity:.85}
.fd-cookie-link:hover{opacity:1}


/* ============================================================
   Header refresh — cleaner logo mark + single-line nav
   (added 2026-07-17)
   ============================================================ */

/* --- new logo: hide the old inline tooth, draw a clean one --- */
.nav .brand svg{display:none!important}
.nav .brand::before{
  content:"";display:block;flex:none;width:38px;height:38px;margin-right:2px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2738%27%20height%3D%2738%27%20viewBox%3D%270%200%2040%2040%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M20%204C13%204%209%208%209%2015c0%205%202%208%203%2013%201%204%202%206%204%206%202%200%202-4%204-4s2%204%204%204c2%200%203-2%204-6%201-5%203-8%203-13C31%208%2027%204%2020%204Z%27%20fill%3D%27%2322409a%27%2F%3E%3Cpath%20d%3D%27M30.5%205.6l1.15%202.55%202.55%201.15-2.55%201.15-1.15%202.55-1.15-2.55-2.55-1.15%202.55-1.15z%27%20fill%3D%27%2314a884%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
/* keep the wordmark on one line */
.nav .brand>span{white-space:nowrap}

/* --- desktop nav: no wrapping, tighter, tidy --- */
@media(min-width:1001px){
  .nav .links{gap:1.15rem}
  .nav .links a,
  .nav .links .mm-item>a{white-space:nowrap;font-size:.95rem}
  .nav .nav-cta{gap:.55rem}
  .nav .nav-cta .btn{padding-left:.95rem;padding-right:.95rem;white-space:nowrap}
}

/* ============================================================
   Before/After slider fix — stop the browser's native image
   drag from hijacking the compare handle (so dragging works).
   ============================================================ */
.ba img{
  pointer-events:none;          /* pass drags to the slider container */
  -webkit-user-drag:none;
  user-drag:none;
  user-select:none;
}
.ba{touch-action:none;cursor:ew-resize}
.ba-grip{cursor:ew-resize;pointer-events:none}

/* ============================================================
   Mobile / tablet hardening
   ============================================================ */

/* Tall mobile drawer must scroll (many service/condition categories) */
@media(max-width:960px){
  .drawer{
    max-height:100vh;max-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:2rem;
  }
  .drawer .d-sub{max-height:none}
  /* comfortable tap targets */
  .drawer .d-link,.drawer .d-sub a{padding-top:.5rem;padding-bottom:.5rem}
  /* never let anything cause sideways scroll on phones */
  html,body{overflow-x:hidden}
  .wrap{max-width:100%}
}

/* Close the 961–1000px tablet gap: keep nav tidy + panels usable */
@media(min-width:961px){
  .nav .links{gap:1.1rem}
  .nav .links a,.nav .links .mm-item>a{white-space:nowrap;font-size:.95rem}
  .mm-panel{display:block!important}   /* re-enable panels above 960 */
}

/* Small phones: single-column service/condition tiles + tighter hero */
@media(max-width:520px){
  .svc-grid,.q-grid,.b-grid,.hubgrid,.proc-grid{grid-template-columns:1fr!important}
  .s-hero .wrap{gap:1.2rem}
  .topbar .locs span:nth-child(2){display:none} /* trim crowded top bar */
}

/* ============================================================
   Wordmark must stay on ONE line (never split Farzad / Dental)
   ============================================================ */
.nav .brand{flex:0 0 auto}
.nav .brand span{white-space:nowrap}
.nav .brand span small{white-space:nowrap;display:block}

/* ============================================================
   Official Farzad Dental wordmark logo (replaces the tooth mark)
   ============================================================ */
.nav .brand svg{display:none!important}
.nav .brand span{display:none!important}
.nav .brand::before{
  content:"";display:block;flex:none;margin:0;
  width:198px;height:34px;
  background:url("../images/logo.png") left center/contain no-repeat;
}
@media(max-width:600px){
  .nav .brand::before{width:163px;height:28px}
}

/* footer wordmark (white, on the navy footer) */
footer .brand svg{display:none!important}
footer .brand{font-size:0!important;gap:0!important}
footer .brand::before{
  content:"";display:inline-block;
  width:175px;height:30px;
  background:url("../images/logo-white.png") left center/contain no-repeat;
}

/* --- LOGO FIX: placeholder logo.png is empty; restore the built-in tooth mark + wordmark --- */
.nav .brand::before{display:none!important}
.nav .brand svg{display:inline-block!important}
.nav .brand span{display:inline-block!important;font-size:1.45rem!important}
.nav .brand{font-size:1.45rem!important;gap:.6rem!important}
footer .brand::before{display:none!important}
footer .brand span{display:inline-block!important;font-size:1.35rem!important;color:#fff!important}
footer .brand{font-size:1.35rem!important;gap:.6rem!important}

/* Skip-to-content link (WCAG 2.4.1) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:#16265e;color:#fff;padding:10px 18px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}.skip-link:focus{left:0}#main{scroll-margin-top:90px}