/* Kitsilano Endodontics — consolidated styles.
   Base + responsive rules unioned from the three approved design mockups.
   Component styling stays inline on each page to preserve exact fidelity;
   the attribute-substring selectors below match those inline values. */

*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{background:#fff;font-family:'Hanken Grotesk',system-ui,sans-serif}
img{max-width:100%}
a{color:#00838f;text-decoration:none}
a:hover{color:#1dbfec}

.mobile-call-bar{display:none}

/* --- Footer links: readable on the dark background --- */
.kx-footer a{color:#fff}
.kx-footer a:hover{color:#7fe4ef}

/* --- Desktop nav / dropdown --- */
.kx-nav{position:relative}
.kx-menu{display:flex;align-items:center;gap:32px;font:600 16.5px 'Hanken Grotesk',sans-serif;letter-spacing:.005em;color:#16302e}
.kx-menu a{color:#16302e}
.kx-menu a:hover{color:#00838f}
.kx-menu-book{display:none}       /* shown only inside the mobile menu */
.kx-menu-social{display:none}     /* shown only inside the mobile menu */
.kx-nav-toggle{display:none}
.kx-burger{display:none}
.kx-sub-toggle{display:none}
.kx-sub-caret{display:none}

.kx-header-right{display:flex;align-items:center;gap:16px}
.kx-book-btn{background:#1dbfec;color:#04353b;font:700 14px 'Hanken Grotesk',sans-serif;padding:12px 20px;border-radius:9px;display:inline-block;white-space:nowrap}
.kx-book-btn:hover{color:#04353b;filter:brightness(1.05)}
.kx-social{display:flex;align-items:center;gap:8px}
.kx-social a,.kx-menu-social a{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#0e5a63;background:#eaf3f2;transition:background .15s,color .15s}
.kx-social a:hover,.kx-menu-social a:hover{background:#1dbfec;color:#04353b}

.kx-has-sub{position:relative}
.kx-sub{position:absolute;top:100%;left:-16px;padding-top:12px;display:none;z-index:40}
.kx-sub-inner{background:#fff;border:1px solid #ece6dc;border-top:3px solid #1dbfec;border-radius:12px;box-shadow:0 18px 44px rgba(8,52,58,.18);padding:10px;min-width:264px;display:flex;flex-direction:column}
/* Desktop only: reveal the dropdown on hover/focus (mobile uses a tap toggle) */
@media (min-width:901px){
  .kx-has-sub:hover .kx-sub,.kx-has-sub:focus-within .kx-sub{display:block}
}
.kx-sub-inner a{padding:12px 16px;border-radius:9px;font:600 15.5px 'Hanken Grotesk',sans-serif;color:#0e5a63;white-space:nowrap}
.kx-sub-inner a:hover{background:#1dbfec;color:#04353b}

/* --- Prose (content pages) --- */
.kx-prose{max-width:760px}
.kx-prose h2{margin:0 0 18px;font:700 27px/1.25 'Archivo',sans-serif;letter-spacing:-.01em;color:#16302e}
.kx-prose h2:not(:first-child){margin-top:40px}
.kx-prose h3{margin:32px 0 12px;font:700 20px/1.3 'Archivo',sans-serif;color:#0e5a63}
.kx-prose p{margin:0 0 20px;font:400 16.5px/1.75 'Hanken Grotesk',sans-serif;color:#3f524f}
.kx-prose ul,.kx-prose ol{margin:0 0 20px;padding-left:22px}
.kx-prose li{margin:0 0 10px;font:400 16.5px/1.7 'Hanken Grotesk',sans-serif;color:#3f524f}
.kx-prose a{color:#00838f;text-decoration:underline}
.kx-prose a:hover{color:#1dbfec}
.kx-prose strong{color:#16302e}

/* --- Centered page hero (gradient, no photo) --- */
.kx-phero{position:relative;overflow:hidden;text-align:center;background:radial-gradient(120% 130% at 50% -10%,#12707c 0%,#0c4a52 55%,#093840 100%)}
.kx-phero-glow{position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:680px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(29,191,236,.22) 0%,rgba(29,191,236,0) 70%);pointer-events:none}
.kx-phero-inner{position:relative;max-width:840px;margin:0 auto;padding:78px 40px}
.kx-phero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(29,191,236,.16);border:1px solid rgba(127,228,239,.4);color:#7fe4ef;font:600 12px 'Hanken Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:100px;margin-bottom:22px}
.kx-phero-badge span{width:7px;height:7px;border-radius:50%;background:#1dbfec}
.kx-phero-h1{margin:0;font:700 48px/1.1 'Archivo',sans-serif;letter-spacing:-.02em;color:#fff}
.kx-phero-sub{margin:20px auto 0;max-width:660px;font:400 18px/1.6 'Hanken Grotesk',sans-serif;color:rgba(255,255,255,.82)}
@media (max-width:640px){
  .kx-phero-inner{padding:48px 20px}
  .kx-phero-h1{font-size:32px;line-height:1.14}
  .kx-phero-sub{font-size:16px}
}

/* --- FAQ accordion --- */
.kx-faq details{border:1px solid #ece6dc;border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden}
.kx-faq summary{cursor:pointer;list-style:none;padding:18px 22px;font:600 17px/1.35 'Archivo',sans-serif;color:#16302e;display:flex;justify-content:space-between;align-items:center;gap:16px}
.kx-faq summary::-webkit-details-marker{display:none}
.kx-faq summary::after{content:'+';font:400 24px 'Archivo',sans-serif;color:#1dbfec;flex:none;line-height:1}
.kx-faq details[open] summary::after{content:'\2212'}
.kx-faq details[open] summary{color:#0e5a63}
.kx-faq-a{padding:0 22px 20px;font:400 15.5px/1.7 'Hanken Grotesk',sans-serif;color:#3f524f}
.kx-faq-a p{margin:0 0 12px}
.kx-faq-a p:last-child{margin-bottom:0}

/* --- Mobile nav: hamburger reveals the menu; header book button hidden --- */
@media (max-width:900px){
  .kx-nav{padding:16px 20px !important}
  .kx-book-btn{display:none !important}
  .kx-social{display:none !important}
  .kx-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;margin-left:auto;cursor:pointer}
  .kx-burger span{display:block;width:100%;height:2.5px;background:#0e5a63;border-radius:2px;transition:transform .2s,opacity .2s}
  .kx-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fbfaf7;border-bottom:1px solid #ece6dc;box-shadow:0 14px 28px rgba(8,52,58,.14);padding:4px 0;display:none;z-index:60}
  .kx-nav-toggle:checked ~ .kx-menu{display:flex}
  .kx-menu > a,.kx-menu > span{padding:14px 22px !important;border-top:1px solid #ece6dc;font-size:17px}
  .kx-menu > a:first-child,.kx-menu > span:first-child{border-top:0}
  .kx-menu-book{display:block !important;color:#0e5a63}
  .kx-menu-social{display:flex !important;gap:10px;padding:14px 22px;border-top:1px solid #ece6dc}
  /* Collapsible submenu — hidden until its caret is tapped */
  .kx-menu > span.kx-has-sub{display:flex;flex-wrap:wrap;align-items:center;padding:0 !important}
  .kx-has-sub > a{flex:1 1 auto;padding:14px 22px}
  .kx-sub-caret{display:flex !important;align-items:center;justify-content:center;flex:none;align-self:stretch;width:58px;cursor:pointer}
  .kx-sub-caret::after{content:'';width:9px;height:9px;border-right:2.5px solid #0e5a63;border-bottom:2.5px solid #0e5a63;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  .kx-sub-toggle:checked ~ .kx-sub-caret::after{transform:translateY(2px) rotate(-135deg)}
  .kx-has-sub .kx-sub{position:static;display:none;flex-basis:100%;width:100%;padding:0 12px 12px}
  .kx-sub-toggle:checked ~ .kx-sub{display:block}
  .kx-sub-inner{border:0;box-shadow:none;background:transparent;padding:0;min-width:0;gap:4px}
  .kx-sub-inner a{padding:10px 12px 10px 16px !important;font-size:15.5px;color:#0e5a63;background:#eef8f9;border-left:3px solid #1dbfec;border-radius:0 8px 8px 0}
  .kx-nav-toggle:checked ~ .kx-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .kx-nav-toggle:checked ~ .kx-burger span:nth-child(2){opacity:0}
  .kx-nav-toggle:checked ~ .kx-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* --- Bio template: collapse hero + body columns --- */
@media (max-width:880px){
  .kx-bio-hero{grid-template-columns:1fr !important;gap:32px !important;padding:44px 20px !important}
  .kx-bio-photo{width:100% !important}
  .kx-bio-grid{grid-template-columns:1fr !important;gap:36px !important}
  .kx-aside{position:static !important}
}

/* --- Service template: collapse sidebar + body --- */
@media (max-width:860px){
  .kx-svc-grid{grid-template-columns:1fr !important;gap:36px !important}
  .kx-aside{position:static !important}
}

@media (max-width:640px){
  .mobile-call-bar{display:flex !important}
  .kx-nav{padding:14px 16px !important}
  .kx-hero{height:auto !important;padding:36px 16px !important}
  .kx-hero-inner{position:relative !important;inset:auto !important;z-index:2;padding:0 !important;max-width:100% !important}
  .kx-h1{font-size:30px !important;line-height:1.14 !important}
  .kx-badge{position:relative !important;top:auto !important;right:auto !important;z-index:2;margin:0 0 16px !important;width:fit-content !important}
  .kx-band{padding:40px 16px !important}
  .kx-form-r{padding:32px 16px !important}

  /* collapse every multi-column grid to a single column on phones */
  .kx-page [style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:24px !important}

  /* section padding shrink — selectors match the inline values exactly
     (no space after the colon, matching how the styles are authored) */
  .kx-page [style*="padding:80px 64px"]{padding:48px 16px !important}
  .kx-page [style*="padding:72px 64px"]{padding:48px 16px !important}
  .kx-page [style*="padding:70px 64px"]{padding:40px 16px !important}
  .kx-page [style*="padding:64px 64px"]{padding:40px 16px 120px !important}
  .kx-page [style*="padding:64px 56px"]{padding:40px 16px !important}
  .kx-page [style*="padding:56px 64px 32px"]{padding:40px 16px 96px !important}
}