/* KOFFEE HUT V21 — FINAL CONTRAST + HEADER AUTHORITY
   Purpose: one semantic surface layer after all legacy generations.
   Light surfaces always use dark ink. Dark surfaces always use light ink. */
:root{
  --kh21-light:#fffaf2;
  --kh21-light-2:#f6ecdf;
  --kh21-dark:#1a0f0b;
  --kh21-dark-2:#351912;
  --kh21-ink:#24140f;
  --kh21-ink-soft:#6c584d;
  --kh21-light-ink:#fff8ef;
  --kh21-light-soft:#d8c7bb;
  --kh21-accent:#a85738;
  --kh21-gold:#e2b872;
  --kh21-line:rgba(56,31,22,.13);
  --kh21-dark-line:rgba(255,248,239,.14);
}

/* ---------- Header: readable, roomy, never clipped ---------- */
.site-header{
  overflow:visible!important;
  min-height:82px!important;
  contain:none!important;
}
.nav-shell{
  min-height:82px!important;
  height:auto!important;
  overflow:visible!important;
  align-items:center!important;
}
.main-nav{
  overflow:visible!important;
  min-height:58px!important;
  align-items:center!important;
}
.main-nav>a,.explore-trigger{
  min-height:44px!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  border-radius:999px!important;
  overflow:visible!important;
  isolation:isolate;
  transform:none!important;
  box-shadow:inset 0 0 0 1px transparent;
  transition:color .22s ease,background .22s ease,box-shadow .22s ease!important;
}
.main-nav>a:after,.explore-trigger:after{
  left:14px!important;
  right:14px!important;
  bottom:5px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--kh21-accent),var(--kh21-gold))!important;
  transform:scaleX(0)!important;
  transform-origin:center!important;
  transition:transform .24s ease!important;
}
.main-nav>a:hover:after,.main-nav>a.is-active:after,.explore-trigger:hover:after,.explore-trigger[aria-expanded="true"]:after{
  right:14px!important;
  transform:scaleX(1)!important;
}
.main-nav>a:hover,.explore-trigger:hover,.main-nav>a.is-active,.explore-trigger[aria-expanded="true"]{
  background:rgba(168,87,56,.09)!important;
  color:#6e2130!important;
  box-shadow:inset 0 0 0 1px rgba(168,87,56,.11),0 8px 24px rgba(61,29,18,.07)!important;
}
.page-home .site-header:not(.is-scrolled):not(.scrolled) .main-nav>a:hover,
.page-home .site-header:not(.is-scrolled):not(.scrolled) .explore-trigger:hover,
.page-home .site-header:not(.is-scrolled):not(.scrolled) .main-nav>a.is-active,
.page-home .site-header:not(.is-scrolled):not(.scrolled) .explore-trigger[aria-expanded="true"]{
  background:rgba(255,255,255,.11)!important;
  color:#fffaf2!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 10px 28px rgba(0,0,0,.12)!important;
}
.brand,.nav-actions,.main-nav>*{overflow:visible!important}
.nav-book,.nav-order{min-height:44px!important;display:inline-flex!important;align-items:center!important;overflow:visible!important}

/* ---------- Explore: light shell -> dark text; dark feature -> light text ---------- */
.explore-panel{
  background:rgba(255,250,242,.985)!important;
  color:var(--kh21-ink)!important;
  border-top:1px solid var(--kh21-line)!important;
  border-bottom:1px solid var(--kh21-line)!important;
}
.explore-grid{color:var(--kh21-ink)!important}
.explore-column,.explore-column a,.explore-column strong{color:var(--kh21-ink)!important}
.explore-column p{color:#8a583c!important}
.explore-column a:hover{color:#7a2638!important}
.explore-feature{
  background:radial-gradient(circle at 86% 14%,rgba(226,184,114,.18),transparent 28%),linear-gradient(145deg,#21110d,#552419)!important;
  color:var(--kh21-light-ink)!important;
  border:1px solid var(--kh21-dark-line)!important;
  border-left:1px solid var(--kh21-dark-line)!important;
}
.explore-feature span{color:var(--kh21-gold)!important}
.explore-feature strong{color:#fffaf3!important}
.explore-feature a{color:#f6dfbd!important}
.explore-feature a:hover{color:#fff!important}

/* ---------- Semantic surface contract ---------- */
.page-hero,.section.paper,.paper,.form-card,.info-card,.offer-card,.review-card,.gallery-card,.menu-text-item,.signature-card,.menu-spotlight-card,.benefit-card,.visit-card,.review-feature{
  color:var(--kh21-ink)!important;
}
.page-hero h1,.page-hero h2,.page-hero h3,.section.paper h1,.section.paper h2,.section.paper h3,.paper h1,.paper h2,.paper h3,
.form-card h1,.form-card h2,.form-card h3,.info-card h1,.info-card h2,.info-card h3,.offer-card h1,.offer-card h2,.offer-card h3,
.review-card h1,.review-card h2,.review-card h3,.gallery-card h1,.gallery-card h2,.gallery-card h3,.menu-text-item h1,.menu-text-item h2,.menu-text-item h3{
  color:var(--kh21-ink)!important;
}
.page-hero>*,.section.paper>*,.paper>*{border-color:inherit}
.page-hero p,.section.paper .section-head>p,.paper .section-head>p,.form-card p,.info-card p,.offer-card p,.review-card p,.menu-text-item p{
  color:var(--kh21-ink-soft)!important;
}

.dark,.experience-stage,.experience-type-stage,.order-dock,.account-signin-experience,.customer-pass,.feature-offer,.site-footer{
  color:var(--kh21-light-ink)!important;
}
.dark h1,.dark h2,.dark h3,.dark h4,.dark strong,
.experience-stage h1,.experience-stage h2,.experience-stage h3,.experience-type-stage h1,.experience-type-stage h2,.experience-type-stage h3,
.order-dock h1,.order-dock h2,.order-dock h3,.account-signin-experience h1,.account-signin-experience h2,.customer-pass h1,.customer-pass h2,
.feature-offer h1,.feature-offer h2,.feature-offer h3,.site-footer h1,.site-footer h2,.site-footer h3{
  color:#fffaf3!important;
}
.dark p,.experience-stage p,.experience-type-stage p,.order-dock p,.account-signin-experience p,.customer-pass p,.feature-offer p{
  color:var(--kh21-light-soft)!important;
}
.dark .eyebrow,.experience-stage .eyebrow,.experience-type-stage .eyebrow,.feature-offer .eyebrow{color:var(--kh21-gold)!important}

/* ---------- Founder: exact reported failure ---------- */
.founder-placeholder{
  background:radial-gradient(circle at 72% 18%,rgba(226,184,114,.2),transparent 28%),linear-gradient(145deg,#170c09,#3b1f16 70%,#20110d)!important;
  color:var(--kh21-light-ink)!important;
}
.founder-placeholder>span{color:var(--kh21-gold)!important}
.founder-placeholder>strong{color:#fff4e2!important}
.founder-placeholder b{color:#fffaf3!important}
.founder-placeholder small{color:#d9c9bd!important}
.founder-placeholder em{color:#f0c57e!important}
.editorial-photo .photo-label,.founder-portrait .caption{
  background:rgba(24,13,9,.9)!important;
  color:#fffaf3!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.2)!important;
}
.editorial-photo .photo-label b,.founder-portrait .caption b{color:#fffaf3!important}
.editorial-photo .photo-label span,.founder-portrait .caption span{color:#e7c99f!important}

/* ---------- Feature offer is dark: fix inherited light-section text ---------- */
.feature-offer{background:linear-gradient(145deg,#1d0f0b,#432116)!important;border-color:rgba(255,255,255,.1)!important}
.feature-offer .btn.dark{background:#f7e8d1!important;color:#27140e!important;box-shadow:none!important}
.feature-offer .btn.dark:hover{background:#fff4e4!important;color:#27140e!important}

/* ---------- Buttons maintain correct foreground on every surface ---------- */
.btn.light{background:#fff2df!important;color:#24140f!important}
.btn.dark,.btn.copper,.nav-order{color:#fff!important}
.btn.outline{color:inherit}

/* ---------- Dark footer contract ---------- */
.site-footer{background:#140a07!important;color:#fff7ed!important}
.site-footer p,.site-footer span,.site-footer small{color:#cdbdb2}
.site-footer .footer-brand h2,.site-footer .footer-link-column a:hover{color:#fffaf2!important}
.site-footer .footer-link-column a{color:#e9ded5!important}
.site-footer .footer-link-column h3{color:#ddb178!important}

/* ---------- Mobile menu follows its light surface ---------- */
.mobile-panel,.mobile-menu-scroll,.mobile-menu-group{color:var(--kh21-ink)!important}
.mobile-menu-group>a,.mobile-menu-grid>a{color:var(--kh21-ink)!important}
.mobile-menu-group>small{color:#8c624a!important}

/* ---------- Focus & reduced motion ---------- */
:where(a,button,input,select,textarea):focus-visible{outline:3px solid rgba(168,87,56,.42)!important;outline-offset:4px!important}
@media(max-width:980px){
  .site-header{overflow:visible!important}
  .nav-shell{min-height:72px!important}
  .main-nav{min-height:0!important}
}
@media(prefers-reduced-motion:reduce){.main-nav>a,.explore-trigger{transition:none!important}}