/* Shekari — Header (RTL, minimal, brand-blue) */

/* Map local vars to base.css tokens (no base overrides) */
:root{
  --sk-brand-700: var(--brand-700);
  --sk-brand-600: var(--brand-600);

  /* subtle surfaces derived from brand + neutrals */
  --sk-chip-bg: color-mix(in oklab, var(--sk-brand-700), transparent 92%);
  --sk-chip-br: color-mix(in oklab, var(--sk-brand-700), transparent 84%);
  --sk-hover-bg: color-mix(in oklab, var(--bg), var(--sk-brand-700) 3%);
}

/* layout lock */
:root{ --header-h:84px; }
@media (max-width:1024px){ :root{ --header-h:76px; } }
body{ padding-top:var(--header-h); }

/* fixed glass header (brighter) */
.site-header{
  position:fixed; top:max(0px, env(safe-area-inset-top)); inset-inline:0; z-index:1000;
  width:min(1600px, calc(100% - 20px)); max-width:1600px; margin:10px auto;
  border-radius:var(--radius);
  background:color-mix(in oklab, var(--bg), white 14%);
  border:1px solid color-mix(in oklab, var(--border), white 26%);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  box-shadow:var(--shadow-sm);
}
@media (min-width:1025px){
  html[data-theme="dark"] .site-header{
    background:linear-gradient(180deg,
      color-mix(in oklab, var(--bg), white 18%),
      color-mix(in oklab, var(--bg), white 12%)
    );
    border:1px solid color-mix(in oklab,#fff,transparent 82%);
    box-shadow:var(--shadow-md);
  }
}

/* grid */
.header-inner{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:10px;
  padding-block:10px; padding-inline:10px;
  min-height:70px;
}

/* brand / logo */
.brand{ display:inline-flex; align-items:center; }
.custom-logo-link{ display:inline-flex; align-items:center; line-height:0; }
.custom-logo{ display:block; height:36px; width:auto; max-width:100%; }
@media (max-width:1024px){ .custom-logo{ height:32px; } }

/* actions */
.actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  appearance:none; background:transparent; border:1px solid var(--border);
  inline-size:36px; block-size:36px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; color:var(--fg);
  transition:transform .12s, color .18s, border-color .18s, background .18s;
}
.icon-btn:hover{ background:var(--sk-hover-bg); }
.icon-btn:active{ transform:translateY(1px); }
.icon-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.icon{ inline-size:18px; block-size:18px; fill:none; stroke:currentColor; stroke-width:2; }
.theme-toggle .sun{ display:none; } html[data-theme="dark"] .theme-toggle .sun{ display:inline; }
html[data-theme="dark"] .theme-toggle .moon{ display:none; }

/* nav base */
#main-nav{ inline-size:100%; }
.menu{ list-style:none; padding:0; margin:0; }
@media (min-width:1025px){
  .menu{ display:flex; align-items:center; gap:6px; padding-inline:6px; justify-content:flex-start; }
}
.menu-item{ position:relative; }

/* menu item */
.menu-item > a{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 14px;
  border-radius:12px;
  color:var(--fg);
  text-decoration:none;
  border:1px solid transparent;
  background:transparent;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.menu-item > a:hover{
  background:var(--sk-hover-bg);
  border-color:color-mix(in oklab, var(--border), var(--sk-brand-700) 10%);
}

/* underline (brand blue) */
.menu-item > a::after{
  content:"";
  position:absolute; inset-inline:10px; bottom:8px;
  height:2px; border-radius:2px;
  background:var(--sk-brand-700);
  transform:scaleX(0); transform-origin:var(--transform-origin, right);
  transition:transform .22s ease-out;
}
.menu-item > a:hover::after,
.menu-item > a:focus-visible::after{ transform:scaleX(1); }

/* current state */
.menu .current-menu-item > a,
.menu .current-menu-ancestor > a{
  background:var(--sk-chip-bg);
  border-color:var(--sk-chip-br);
  color:color-mix(in oklab, var(--sk-brand-700), var(--fg) 30%);
}

/* caret after label */
.caret{
  inline-size:14px; block-size:14px; stroke:currentColor; fill:none; stroke-width:2;
  transition:transform .18s;
}
.menu-item[aria-open="true"] > a .caret{ transform:rotate(180deg); }

/* desktop dropdown: right aligned, below header */
@media (min-width:1025px){
  #main-nav .menu > .menu-item{ position:relative; }

  #main-nav .menu > .menu-item > .sub-menu,
  #main-nav .menu > .menu-item > .submenu{
    position:absolute;
    top:calc(100% + 16px);
    inset-inline-end:0; right:0; left:auto;
    z-index:2100;

    min-inline-size:220px;
    inline-size:max-content;
    max-inline-size:70vw;

    padding:8px; margin:0; list-style:none; text-align:right;

    background:color-mix(in oklab, var(--bg), white 12%);
    color:var(--fg);
    border:1px solid color-mix(in oklab, var(--border), white 22%);
    border-radius:14px;
    box-shadow:0 12px 28px color-mix(in oklab, #000, transparent 84%);
    display:none;
  }

  #main-nav .menu > .menu-item > .sub-menu > li,
  #main-nav .menu > .menu-item > .submenu > li{ margin:0; }

  #main-nav .menu > .menu-item > .sub-menu a,
  #main-nav .menu > .menu-item > .submenu a{
    display:block; padding:10px 14px; border-radius:10px;
    text-decoration:none; color:inherit; border:1px solid transparent;
    transition:background .16s ease, border-color .16s ease;
  }
  #main-nav .menu > .menu-item > .sub-menu a:hover,
  #main-nav .menu > .menu-item > .submenu a:hover{
    background:var(--sk-hover-bg);
    border-color:color-mix(in oklab, var(--border), var(--sk-brand-700) 10%);
  }

  #main-nav .menu > .menu-item:focus-within > .sub-menu,
  #main-nav .menu > .menu-item:focus-within > .submenu{ display:block; }

  /* desktop-only: hide menu toggle */
  .menu-toggle{ display:none; }
}

/* drawer (mobile) */
.drawer{ position:fixed; inset:0; z-index:1100; }
.drawer[hidden]{ display:none; }
.drawer-backdrop{
  position:absolute; inset:0;
  background:color-mix(in oklab, #000, transparent 65%);
  opacity:0; transition:opacity .28s;
}
.drawer-panel{
  position:absolute; top:0; bottom:0; right:0; inline-size:min(86vw,420px);
  background:color-mix(in oklab, var(--bg), white 10%);
  color:var(--fg);
  border-inline-start:1px solid color-mix(in oklab, var(--border), white 18%);
  box-shadow:0 10px 40px color-mix(in oklab, #000, transparent 70%);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .33s cubic-bezier(.22,.61,.36,1);
}
.drawer.open .drawer-panel{ transform:translateX(0); }
.drawer.open .drawer-backdrop{ opacity:1; }

.drawer-header{
  display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px;
  border-bottom:1px solid color-mix(in oklab, var(--border), white 12%);
}
.drawer-brand{ display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.drawer-logo{ display:block; height:32px; width:auto; max-width:100%; }
.drawer-close{
  inline-size:36px; block-size:36px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--border);
  margin-inline-start:auto;
}

.drawer-content{ padding:12px; overflow:auto; text-align:right; }
.drawer-content .menu{ display:block; list-style:none; padding:0; margin:0; }
.drawer-content .menu > li{ display:block; }
.drawer-content .menu-item > a{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  color:var(--fg); text-decoration:none;
  border-radius:12px; border:1px solid transparent;
  transition:background .18s, border-color .18s;
}
.drawer-content .menu-item > a:hover{
  background:var(--sk-hover-bg);
  border-color:color-mix(in oklab, var(--border), var(--sk-brand-700) 10%);
}
.drawer-content .current-menu-item > a,
.drawer-content .current-menu-ancestor > a{
  background:var(--sk-chip-bg);
  border-color:var(--sk-chip-br);
}
.drawer-content .menu-item > a .caret{ margin-inline-start:auto; }

/* search overlay */
.search-overlay{
  position:fixed; inset:0; z-index:1200;
  display:grid; place-items:center;
  background:color-mix(in oklab,#000,transparent 55%); backdrop-filter:blur(2px);
}
.search-overlay[hidden]{ display:none; }
.search-box{
  inline-size:min(720px,92vw); position:relative;
  background:color-mix(in oklab, var(--bg), white 10%);
  border:1px solid color-mix(in oklab, var(--border), white 22%);
  border-radius:16px;
  padding:56px 18px 18px;
  box-shadow:0 10px 40px color-mix(in oklab,#000,transparent 75%);
}
.close-search{ position:absolute; top:12px; inset-inline-end:12px; }
#search-input{
  inline-size:100%; padding:14px 16px; font-size:16px; color:var(--fg);
  background:var(--bg); border:1px solid var(--border); border-radius:12px; outline:none;
}
#search-input:focus{
  border-color:var(--sk-brand-700);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--sk-brand-700), transparent 78%);
}

/* responsive tweaks */
@media (max-width:1024px){
  #desktop-nav-slot > #main-nav{ display:none; }
  .search-overlay{ place-items:start center; }
  .search-box{ margin-block-start:8vh; }
}
@media (min-width:1025px){
  #mobile-drawer{ display:none; }
  .actions .icon-btn{ inline-size:32px; block-size:32px; }
}

/* a11y utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}