/*
 * Site header — sticky bar with desktop mega menus and a mobile sidebar menu.
 * Based on the navigation system spec (_design-source/HTML Layout/kosh_navigation.html).
 * Every property that a page stylesheet might override is set explicitly here.
 */

.site-header {
  position: sticky; top: 0; z-index: 500;
  background: var(--k-sky);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--k-rule);
  font-family: var(--k-sans); font-weight: 300; line-height: 1.4;
  color: var(--k-ink);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--k-rule), 0 8px 24px rgba(12, 11, 10, .04); }

.site-header__bar {
  height: var(--k-header-h);
  max-width: calc(var(--k-container) + var(--k-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--k-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* ── Primary nav ── */
.site-header__nav { display: flex; align-items: stretch; height: 100%; margin-left: auto; margin-right: 8px; } /* nav sits on the right, next to the button */

.site-header__item {
  position: relative; height: 100%;
  display: flex; align-items: center; gap: 4px;
  padding: 0 16px;
  font-family: var(--k-sans); font-size: 14px; font-weight: 400; letter-spacing: .01em;
  color: #2E2A26; background: none; border: none; cursor: pointer;
  transition: color .2s;
}
.site-header__item::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0;
  height: 1.5px; background: var(--k-crimson);
  transform: scaleX(0); transition: transform .3s var(--k-ease);
}
.site-header__item:hover,
.site-header__item.is-active,
.site-header__item[aria-expanded='true'] { color: var(--k-crimson); }
.site-header__item:hover::after,
.site-header__item.is-active::after,
.site-header__item[aria-expanded='true']::after { transform: scaleX(1); }

.site-header__chevron {
  width: 11px; height: 11px; opacity: .7;
  transition: transform .25s var(--k-ease), opacity .2s;
}
.site-header__item[aria-expanded='true'] .site-header__chevron { opacity: 1; transform: rotate(180deg); }

/* ── Actions ── */
.site-header__actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }


.site-header__cta {
  font-family: var(--k-sans); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--k-ink); color: var(--k-white);
  padding: 10px 22px; transition: background .2s;
}
.site-header__cta:hover { background: var(--k-crimson); }

.site-header__toggle {
  display: none; width: 38px; height: 38px;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--k-rule); background: none; cursor: pointer;
}
.site-header__toggle span {
  display: block; width: 16px; height: 1.2px; background: var(--k-ink);
  transition: transform .3s var(--k-ease), opacity .2s;
}
.site-header__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
.site-header__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

/* ── Mega menu ── */
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--k-sky);
  border-top: 1px solid var(--k-rule); border-bottom: 1px solid var(--k-rule);
  box-shadow: 0 24px 48px rgba(12, 11, 10, .06);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--k-ease), transform .25s var(--k-ease), visibility .25s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__inner { display: grid; max-width: calc(var(--k-container) + var(--k-gutter) * 2); margin: 0 auto; padding: 40px var(--k-gutter) 44px; }
.mega__inner--cols-4 { grid-template-columns: repeat(4, 1fr); }
.mega__inner--cols-3 { grid-template-columns: 1.2fr 1fr 1fr; }

.mega__intro { padding-right: 40px; border-right: 1px solid var(--k-rule); }
.mega__col { padding-left: 40px; }

.mega__title {
  font-family: var(--k-serif); font-size: clamp(22px, 2.5vw, 30px); font-weight:300;
  line-height: 1.15; letter-spacing: -.015em; color: var(--k-ink); margin-bottom: 12px;
}
.mega__title em { font-style: italic; color: var(--k-crimson); }
.mega__body { font-size: 14px; line-height: 1.7; color: #4A4541; margin-bottom: 20px; }
.mega__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--k-crimson);
  padding-bottom: 1px; border-bottom: 1px solid rgba(20,18,16,.2);
  transition: gap .2s var(--k-ease);
}
.mega__cta svg { width: 11px; height: 11px; }
.mega__cta:hover { gap: 12px; }

.mega__label {
  display: inline-block;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--k-crimson); margin-bottom: 20px; text-decoration: none;
  transition: opacity .2s;
}
.mega__label--link:hover { opacity: .75; }
.mega__link {
  position: relative; display: flex; flex-direction: column;
  padding: 10px 0; border-top: 1px solid var(--k-rule);
  transition: padding-left .25s var(--k-ease);
}
.mega__link::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px;
  background: var(--k-crimson); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--k-ease);
}
.mega__link:hover { padding-left: 10px; }
.mega__link:hover::before { transform: scaleY(1); }
.mega__link-name { font-size: 15px; font-weight: 400; color: var(--k-ink); margin-bottom: 2px; transition: color .15s; }
.mega__link:hover .mega__link-name { color: var(--k-crimson); }
.mega__link-desc { font-size: 13px; line-height: 1.5; color: #5E5853; }

/* ── Mobile sidebar (≤ 960px) ──
 * Off-canvas panel from the right. Level 1 = main menu; tapping an item with
 * children slides its submenu (level 2) in over it, with a Back button.
 */
.sidebar {
  position: fixed; inset: 0; z-index: 900;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .6s;
  font-family: var(--k-sans); font-weight: 300; color: var(--k-ink);
}
.sidebar.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.sidebar__backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 11, 10, .45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .5s var(--k-ease);
}
.sidebar.is-open .sidebar__backdrop { opacity: 1; }

.sidebar__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 400px);
  display: flex; flex-direction: column;
  background: var(--k-paper);
  box-shadow: -24px 0 60px rgba(12, 11, 10, .18);
  transform: translateX(100%);
  transition: transform .6s var(--k-ease);
}
.sidebar.is-open .sidebar__panel { transform: none; }

.sidebar__top {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--k-header-h);
  padding: 0 24px;
  border-bottom: 1px solid var(--k-rule);
  flex-shrink: 0;
}
.sidebar__close {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--k-rule); background: none; cursor: pointer; color: var(--k-ink);
  transition: border-color .2s, transform .4s var(--k-ease);
}
.sidebar__close svg { width: 15px; height: 15px; }
.sidebar__close:hover { border-color: var(--k-ink); transform: rotate(90deg); }

/* Two levels share one viewport and slide horizontally */
.sidebar__viewport { position: relative; flex: 1; overflow: hidden; }
.sidebar__level {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 28px 24px 32px;
  transition: transform .55s var(--k-ease), opacity .4s var(--k-ease);
}
.sidebar__level--sub { transform: translateX(100%); opacity: 0; visibility: hidden; background: var(--k-paper); }
.sidebar.has-sub .sidebar__level--main { transform: translateX(-30%); opacity: 0; }
.sidebar__level--sub.is-active { transform: none; opacity: 1; visibility: visible; }

.sidebar__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--k-mid); margin-bottom: 14px; text-decoration: none;
  transition: color .2s;
}
.sidebar__eyebrow--link:hover { color: var(--k-crimson); }
.sidebar__eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--k-crimson); }

/* Level 1 items */
.sidebar__list { list-style: none; }
.sidebar__list li {
  border-bottom: 1px solid var(--k-rule);
  opacity: 0; transform: translateX(24px);
  transition: opacity .5s var(--k-ease), transform .6s var(--k-ease);
}
.sidebar.is-open .sidebar__list li {
  opacity: 1; transform: none;
  transition-delay: calc(.15s + var(--d) * 55ms);
}
.sidebar__item {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-family: var(--k-serif); font-size: 30px; font-weight:300; line-height: 1.1; letter-spacing: -.01em;
  color: var(--k-ink); background: none; border: none; cursor: pointer; text-align: left;
  transition: color .3s, padding-left .45s var(--k-ease);
}
.sidebar__item svg { width: 16px; height: 16px; color: var(--k-mid); transition: transform .4s var(--k-ease), color .3s; }
.sidebar__item:hover, .sidebar__item:focus-visible, .sidebar__item.is-active { color: var(--k-crimson); padding-left: 8px; }
.sidebar__item.is-active { font-style: italic; }
.sidebar__item:hover svg { color: var(--k-crimson); transform: translateX(4px); }

/* Level 2 */
.sidebar__back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px;
  font-family: var(--k-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-ink); background: none; border: none; cursor: pointer; padding: 6px 0;
  transition: color .3s, gap .3s var(--k-ease);
}
.sidebar__back svg { width: 14px; height: 14px; }
.sidebar__back:hover { color: var(--k-crimson); gap: 12px; }
.sidebar__subtitle {
  font-family: var(--k-serif); font-size: 32px; font-weight:300; line-height: 1.1; letter-spacing: -.015em;
  margin-bottom: 28px;
}
.sidebar__subtitle em { font-style: italic; color: var(--k-crimson); }
.sidebar__group + .sidebar__group { margin-top: 28px; }
.sidebar__sublist { list-style: none; border-top: 1px solid var(--k-rule); }
.sidebar__sublist li { border-bottom: 1px solid var(--k-rule); }
.sidebar__sublink {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 0;
  transition: padding-left .4s var(--k-ease);
}
.sidebar__sublink-name { font-size: 15px; color: var(--k-ink); transition: color .2s; }
.sidebar__sublink-desc { font-size: 12px; color: var(--k-mid); }
.sidebar__sublink:hover { padding-left: 8px; }
.sidebar__sublink:hover .sidebar__sublink-name { color: var(--k-crimson); }
.sidebar__all {
  display: inline-flex; gap: 8px; margin-top: 28px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--k-crimson);
  padding-bottom: 4px; border-bottom: 1px solid rgba(20,18,16,.3);
}

/* Footer of the panel */
.sidebar__foot {
  flex-shrink: 0;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--k-rule);
  background: var(--k-paper);
}
.sidebar__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px;
  background: var(--k-ink); color: var(--k-white);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s;
}
.sidebar__cta svg { width: 13px; height: 13px; }
.sidebar__cta:hover { background: var(--k-crimson); }
.sidebar__contact {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; font-size: 11px; color: var(--k-mid);
}
.sidebar__contact a:hover { color: var(--k-crimson); }

/* Lock page scroll while the menu is open */
html.menu-open { overflow: hidden; }


/* Desktop never shows the sidebar */
@media (min-width: 961px) { .sidebar { display: none; } }

@media (max-width: 960px) {
  .site-header__nav, .mega { display: none; }
  .site-header__toggle { display: flex; }
}

@media (max-width: 480px) {
  .site-header__cta { display: none; }
}