/* ==========================================================================
   Savalan Kebab — native header (replaces Elementor #1735 + #1507).
   Ported 1:1: cream top strip (hours · logo · location) over a white rounded
   nav bar with a flame Login pill; teal bar + hamburger on mobile.
   ONE responsive header — the old build shipped both templates on every page.
   ========================================================================== */
.svk-header, .svk-header *{box-sizing:border-box}

.svk-header{
  position:relative;z-index:50;
  background:transparent;
  font-family:var(--f-body);
  padding:0 var(--svk-gutter);
}

/* ---- Top strip: hours · logo · location ---- */
.svk-header__top{
  max-width:var(--svk-page);margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:14px 0 8px;
}
.svk-header__aside{min-width:0}
.svk-header__loc{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.svk-header__k{
  font-family:var(--f-head);font-weight:700;font-size:13px;letter-spacing:.04em;
  color:var(--flame);margin:0 0 3px;
}
.svk-header__aside p{
  margin:0;font-size:12.5px;line-height:1.6;font-weight:600;color:var(--sg-forest);
}
.svk-header__aside a{color:inherit;text-decoration:none}
.svk-header__aside a:hover{color:var(--sg-flame-700)}

/* Live open/closed status pill (real semantic state, so the dot is warranted) */
.svk-header__status{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 5px;
  padding:4px 11px;border-radius:var(--r-full);
  font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.01em;
}
.svk-header__status.is-open{background:var(--green-50);color:var(--green)}
.svk-header__status.is-closed{background:var(--surface-200);color:var(--surface-700)}
.svk-header__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.svk-header__status.is-open .svk-header__dot{box-shadow:0 0 0 0 rgba(20,100,49,.5)}
@media (prefers-reduced-motion:no-preference){
  .svk-header__status.is-open .svk-header__dot{animation:svk-hdr-pulse 2.4s var(--ease) infinite}
}
@keyframes svk-hdr-pulse{0%{box-shadow:0 0 0 0 rgba(20,100,49,.5)}70%{box-shadow:0 0 0 6px rgba(20,100,49,0)}100%{box-shadow:0 0 0 0 rgba(20,100,49,0)}}

/* Tap-to-call in the top strip */
.svk-header__call{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-head);font-weight:700;font-size:14px;color:var(--sg-ink);text-decoration:none;
}
.svk-header__call svg{width:15px;height:15px;color:var(--sg-forest);flex:0 0 auto}
.svk-header__call:hover{color:var(--sg-flame-700)}
.svk-header__call:hover svg{color:var(--sg-flame-700)}
.svk-header__pin{width:13px;height:13px;color:var(--sg-forest);vertical-align:-2px;margin-right:4px}

.svk-header__logo{display:block;line-height:0}
.svk-header__logo img{display:block;width:130px;height:auto}

/* ---- Main bar ---- */
/* radius 10px + white: the exact values the original bar container used. */
.svk-header__bar{
  max-width:var(--svk-page);margin:0 auto;
  display:flex;align-items:stretch;justify-content:space-between;gap:20px;
  background:#fff;border-radius:10px;
  box-shadow:var(--sh-header);
  padding:0 0 0 22px;
  min-height:54px;
  overflow:hidden;
}
.svk-header__nav{min-width:0}
.svk-nav{list-style:none;display:flex;align-items:center;gap:26px;margin:0;padding:0}
.svk-nav li{margin:0;position:relative}
.svk-nav a{
  display:block;padding:16px 0;
  font-family:var(--f-head);font-weight:600;font-size:15px;
  color:var(--sage-900);text-decoration:none;white-space:nowrap;
}
/* Teal on hover AND for the current page — the original's own rule was
   `#menu_header_1 > .cz > a:hover, … > .cz.current_menu > a { color:#305a55 }`.
   Flame belongs to CTAs; it made the active item shout. */
.svk-nav a:hover,
.svk-nav .current-menu-item > a,
.svk-nav .current-menu-parent > a,
.svk-nav .current_page_item > a{color:var(--teal)}
/* second level */
.svk-nav .sub-menu{
  list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:0;
  min-width:190px;background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-card);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
  z-index:5;
}
.svk-nav li:hover > .sub-menu{opacity:1;visibility:visible;transform:none}
.svk-nav .sub-menu a{padding:9px 16px;font-size:14px}

/* Stretch, so the Order pill fills the bar's full height and meets its corner. */
.svk-header__tools{display:flex;align-items:stretch;gap:2px;flex:0 0 auto}
.svk-header__iconbtn{
  display:grid;place-items:center;width:44px;
  color:var(--sg-ink);background:none;border:0;cursor:pointer;text-decoration:none;
  transition:color var(--dur-2) var(--ease);
}
.svk-header__iconbtn svg{width:20px;height:20px}
.svk-header__iconbtn:hover{color:var(--sg-forest)}

/* Primary action: Order Online, flame pill with dark ink, seated in the bar corner. */
.svk-header__order{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 26px;margin-left:8px;
  border-radius:0 10px 10px 0;
  background:var(--sg-flame);color:var(--sg-ink);text-decoration:none;
  font-family:var(--f-body);font-weight:700;font-size:15px;white-space:nowrap;
  transition:background var(--dur-2) var(--ease);
}
.svk-header__order svg{width:18px;height:18px;flex:0 0 auto}
.svk-header__order:hover{background:var(--sg-flame-700);color:var(--sg-ink)}

/* ---- Search ---- */
.svk-header__search{
  max-width:var(--svk-page);margin:10px auto 0;
  background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-card);
  padding:12px;
}
.svk-header__search[hidden]{display:none}
.svk-header__search form{display:flex;gap:10px}
.svk-header__search input[type="search"]{
  flex:1;min-width:0;height:46px;padding:0 14px;
  font-family:var(--f-body);font-size:15px;
  border:1px solid var(--ink-100);border-radius:var(--r-input);
}
.svk-header__search input[type="search"]:focus{outline:none;border-color:var(--flame);box-shadow:0 0 0 3px rgba(255,142,91,.16)}
.svk-header__search button{
  height:46px;padding:0 22px;border:0;cursor:pointer;
  background:var(--flame);color:#fff;border-radius:var(--r-pill);
  font-family:var(--f-head);font-weight:600;font-size:15px;
}
.svk-header__search button:hover{filter:brightness(1.05)}

/* ---- Mobile bar ---- */
.svk-header__mobile{display:none}

@media (max-width:1024px){
  .svk-header{padding:0;background:var(--grad-dark)}
  .svk-header__top,
  .svk-header__bar{display:none}
  .svk-header__mobile{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px var(--svk-gutter);
  }
  .svk-header__mbtn{
    display:grid;place-items:center;width:42px;height:42px;
    background:none;border:0;color:#fff;cursor:pointer;flex:0 0 auto;
  }
  .svk-header__mbtn svg{width:22px;height:22px}
  .svk-header__mlogo{line-height:0}
  .svk-header__mlogo img{display:block;width:152px;height:auto}
  .svk-header__search{margin:0;border-radius:0;box-shadow:none}
}

/* ---- Off-canvas ---- */
.svk-offcanvas[hidden]{display:none}
.svk-offcanvas{position:fixed;inset:0;z-index:100000}
.svk-offcanvas__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity var(--dur-2) var(--ease)}
.svk-offcanvas.is-open .svk-offcanvas__scrim{opacity:1}
.svk-offcanvas__panel{
  position:absolute;top:0;left:0;bottom:0;width:min(84vw,320px);
  background:var(--grad-dark);color:#fff;
  padding:22px 24px;overflow-y:auto;
  transform:translateX(-100%);transition:transform var(--dur-3) var(--ease);
  display:flex;flex-direction:column;
}
.svk-offcanvas.is-open .svk-offcanvas__panel{transform:none}
.svk-offcanvas__close{
  align-self:flex-end;display:grid;place-items:center;width:40px;height:40px;
  background:none;border:0;color:#fff;cursor:pointer;margin:0 -6px 10px 0;
}
.svk-offcanvas__close svg{width:22px;height:22px}
.svk-offcanvas__nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.svk-offcanvas__nav li{margin:0;border-bottom:1px solid rgba(255,255,255,.10)}
.svk-offcanvas__nav a{
  display:block;padding:14px 0;
  font-family:var(--f-head);font-weight:600;font-size:17px;
  color:#fff;text-decoration:none;
}
.svk-offcanvas__nav a:hover{color:var(--flame)}
.svk-offcanvas__nav .sub-menu{list-style:none;margin:0 0 8px;padding:0 0 0 14px}
.svk-offcanvas__nav .sub-menu a{font-size:15px;padding:9px 0;opacity:.85}
.svk-offcanvas__foot{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:12px}
.svk-offcanvas__acc{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;
  background:var(--sg-flame);color:var(--sg-ink);border-radius:var(--r-full);text-decoration:none;
  font-family:var(--f-body);font-weight:700;font-size:15px;
}
.svk-offcanvas__acc svg{width:18px;height:18px;flex:0 0 auto}
.svk-offcanvas__acc:hover{background:var(--sg-flame-700);color:var(--sg-ink)}
.svk-offcanvas__out{font-size:14px;color:rgba(255,255,255,.72);text-decoration:none;text-align:center}
.svk-offcanvas__out:hover{color:var(--flame)}
.svk-offcanvas__phone{
  text-align:center;font-family:var(--f-head);font-weight:700;font-size:17px;
  color:#fff;text-decoration:none;
}
.svk-offcanvas__phone:hover{color:var(--flame)}

body.svk-offcanvas-open{overflow:hidden}