/* =====================================================================
   REFERENCE HEADER
   Site-wide skin for the shared header, taken to the reference: a thin
   white section strip over a solid navy bar, the menu centred in small
   uppercase, and a yellow Tickets button ahead of icon-only actions.

   On desktop in the top-nav layout both bars run the full width of the
   screen, while what sits on them lines up with the homepage banner's edges.
   ===================================================================== */

/* ------------------------------ the frame ------------------------------
   One width shared by the header's contents, the banner and the homepage
   sections. On a desktop it is also held to the screen's height, so the
   whole opening block fits the first screen without scrolling:
       header 62 + gap 14 + (two panels, gap, search) 0.5835 x width + foot 18
   which, solved for the width, is (100vh - 94px) x 1.714. The side margins
   the page already has — about a tenth of the width either side — are the
   ceiling. */
:root { --frame-w: calc(100vw - 20px); }
@media (min-width: 1100px) {
  :root[data-nav="top"] { --frame-w: min(81vw, 1400px, calc((100vh - var(--gtop-h) - 131px) * 1.714)); }
  /* Sidebar layout: no bars above the banner, and the sidebar takes part of
     the width. */
  :root:not([data-nav="top"]) {
    --frame-w: min(calc((100vw - var(--sidenav-w, 260px)) * .9), 1400px, calc((100vh - 32px) * 1.714));
  }
}

/* ============================== TOP STRIP ==============================
   There is no strip above the bar any more: the logo and Corporate sit on the
   navy bar itself. --gtop-h stays, at 0, so every offset that reads it still
   resolves. */
:root { --gtop-h: 0px; }
.gtop { display: none; }

/* Corporate, on the navy bar: light outline, filling in on hover. */
.gtop__corp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 6px 14px;
  border: 1px solid rgba(250, 248, 243, .35);
  border-radius: 999px;
  color: #FAF8F3 !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gtop__corp svg { width: 14px; height: 14px; flex: none; }
.gtop__corp:hover { background: #FAF8F3; border-color: #FAF8F3; color: #2e4755 !important; }
/* On a narrower desktop the bar is crowded, so Corporate keeps only its icon;
   the link still names itself to a screen reader. */
@media (max-width: 1440px) {
  .gtop__corp { padding: 7px; }
  .gtop__corp span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}
.gtop__corp:focus-visible { outline: 2px solid #BD830D; outline-offset: 3px; }
/* ============================== NAV BAR ==============================
   Colour applies everywhere. Position and size are set per breakpoint at
   the foot of this file, because what sits above the bar differs by width. */
.site-header.ghead,
body.inner-page .site-header,
.site-header.is-scrolled,
:root[data-theme="dark"] .site-header.is-scrolled,
:root[data-theme="dark"] body.inner-page .site-header {
  background: #2e4755 !important;
  border-bottom: 3px solid #2e4755;
  box-shadow: none;
}
.ghead__bar { padding-inline: clamp(10px, 2.2vw, 42px); }

/* The logo is left out of the desktop bar (see the foot of this file). On
   narrower screens, where the bar is the only header there is, it stays as
   a small white badge: mark stacked over the wordmark. */
.ghead__brand {
  align-self: center;
  padding: 5px 10px;
  border-radius: 10px;
  background: #FAF8F3;
  color: #2e4755;
}
.ghead__brand .brandmark { flex-direction: column; gap: 2px; }
.ghead__brand .brandmark__word { text-align: center; }
.ghead__brand .brandmark,
.ghead__brand .brandmark__word,
.ghead__brand .brandmark__word * { color: #2e4755 !important; }
.ghead .ghead__brand .brandmark__svg,
.ghead .ghead__brand .brandmark__img { height: 26px; }
.ghead__brand .brandmark__word b { font-size: 12px; letter-spacing: 2.2px; }
.ghead__brand .brandmark__word > :not(b) { font-size: 5.5px; letter-spacing: 1px; }

/* Menu centred in the bar, in small uppercase. */
.ghead .gnav { margin-inline: auto; gap: clamp(12px, 1.5%, 30px); }
.ghead .gnav__btn,
.ghead .gnav__item > a {
  color: #FAF8F3 !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ghead .gnav__btn:hover { color: #FAF8F3 !important; }

/* Right side: Tickets, then icons with no labels. */
.ghead .ghead__actions { margin-left: 0; gap: clamp(8px, 1.1%, 20px); }
.ghead .gstack,
.ghead .navmode-btn,
.ghead .theme-toggle { color: #FAF8F3 !important; border-color: rgba(250, 248, 243, .3) !important; }
.ghead .gstack__lbl { display: none; }
.ghead .nav-toggle span { background: #FAF8F3 !important; }

.gtix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 12px;
  border-radius: 3px;
  background: #BD830D;
  color: #2e4755 !important;
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.gtix:hover { background: #BD830D; }
.gtix svg { width: 14px; height: 14px; flex: none; }
.gtix .gtix__c { width: 11px; height: 11px; }

/* --------------------------- where it shows ---------------------------
   Above 980px the site's own .ubar strip may sit at the very top: the new
   strip goes under it and the bar under both. At 980px and below the .ubar
   is gone and phones carry the fixed .topbar instead, so the strip steps
   aside and the bar keeps the position the site's rules give it. */
@media (min-width: 981px) {
  .site-header.ghead,
  body.inner-page .site-header { top: calc(var(--ubar-h, 0px) + var(--gtop-h)); }
  /* Once scrolled the .ubar slides away; the strip and bar close the gap. */
  body:has(.site-header.is-scrolled) .gtop { top: 0; }
  body:has(.site-header.is-scrolled) .site-header { top: var(--gtop-h); }
  /* The homepage hides the .ubar, so nothing sits above the strip there. */
  body:has([data-cine], [data-kmos]) { --ubar-h: 0px; }
}
@media (min-width: 1100px) {
  /* Sidebar mode has no horizontal header, so no strip either. */
  :root:not([data-nav="top"]) .gtop { display: none; }
  .site-header.ghead,
  body.inner-page .site-header { height: 62px; }
  .ghead__bar { height: 59px; }

  /* ====================== the two-row top header ======================
     Row one (58): a white panel with Tickets at its right, and the icon
     buttons on the navy beyond it. Row two (41): the menu, centred on navy.
     The logo is larger than the white row and hangs down over the navy one.
     A grid holds it: the buttons' wrapper steps aside (display: contents)
     so each button takes its own cell, and the white panel is the bar's
     ::before, laid over the first two cells of row one. */
  :root[data-nav="top"] { --header-h: 99px; }
  :root[data-nav="top"] body.inner-page { padding-top: var(--header-h); }
  :root[data-nav="top"] .site-header.ghead,
  :root[data-nav="top"] body.inner-page .site-header { height: 99px; border-bottom-width: 0; }

  :root[data-nav="top"] .ghead__bar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto repeat(3, 66px);
    grid-template-rows: 58px 41px;
    align-items: center;
    gap: 0;
    height: 99px;
    padding: 0 4px 0 0;
  }
  :root[data-nav="top"] .ghead__bar::before {
    content: "";
    grid-row: 1;
    grid-column: 1 / 3;
    align-self: stretch;
    background: #FFFFFF;
  }
  :root[data-nav="top"] .ghead .ghead__actions { display: contents; }
  :root[data-nav="top"] .ghead .gtop__corp,
  :root[data-nav="top"] .ghead .navmode-btn,
  :root[data-nav="top"] .ghead .nav-toggle { display: none !important; }

  /* ---- the logo, over both rows ---- */
  :root[data-nav="top"] .ghead__brand {
    grid-row: 1 / 3;
    grid-column: 1;
    justify-self: start;
    align-self: start;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    height: auto;
    margin-top: 12px;
    padding: 0 0 0 clamp(40px, 6vw, 116px);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #2e4755;
  }
  :root[data-nav="top"] .ghead__brand::after { content: none; }
  :root[data-nav="top"] .ghead__brand .brandmark { flex-direction: row; align-items: center; gap: 10px; }
  :root[data-nav="top"] .ghead__brand .brandmark__word { text-align: left; }
  :root[data-nav="top"] .ghead__brand .brandmark,
  :root[data-nav="top"] .ghead__brand .brandmark__word,
  :root[data-nav="top"] .ghead__brand .brandmark__word * { color: #2e4755 !important; }
  :root[data-nav="top"] .ghead .ghead__brand .brandmark__svg,
  :root[data-nav="top"] .ghead .ghead__brand .brandmark__img { height: 40px; }
  :root[data-nav="top"] .ghead__brand .brandmark__word b { font-size: 20px; font-weight: 700; letter-spacing: 2.4px; line-height: 1.05; }
  :root[data-nav="top"] .ghead__brand .brandmark__word > :not(b) { font-size: 7.5px; font-weight: 600; letter-spacing: 2px; color: #BD830D !important; }
  .ghead__logo { display: block; height: 72px; width: auto; }

  /* ---- the home page's two-tone logo ----
     images/brand/kohwan-split-logo.png is 200 × 57 and turns from green to
     white at its 32nd row: the half above is drawn for white, the half below
     for navy. Shown at 1.5× (300 × 85.5) that row sits 48px down the picture,
     so a 10px drop puts it at 58px — exactly the foot of the white row. */
  :root[data-nav="top"] .ghead__brand--split { margin-top: 10px; }
  .ghead__logo--split { width: 300px; height: 85.5px; }
  /* The HD file (images/brand/kohwan-split-logo-hd.png) is 1200 × 350 and
     turns at its 203rd row. At the same 300px width it is 87.5px tall and
     that row sits 50.75px down, so a 7.25px drop lands it on the 58px line. */
  :root[data-nav="top"] .ghead__brand--split:has(.ghead__logo--hd) { margin-top: 7.25px; }
  .ghead__logo--split.ghead__logo--hd { width: 300px; height: 87.5px; }

  /* ---- row one, right of the panel: Tickets ---- */
  :root[data-nav="top"] .ghead .gtix {
    grid-row: 1;
    grid-column: 2;
    position: relative;
    height: 42px;
    margin: 0 17px 0 0;
    padding: 0 22px;
    gap: 10px;
    border-radius: 3px;
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
  }
  :root[data-nav="top"] .ghead .gtix svg { width: 17px; height: 17px; }
  :root[data-nav="top"] .ghead .gtix .gtix__c { width: 12px; height: 12px; }
  :root[data-nav="top"] .ghead .gtix:hover { background: #a8740b; }

  /* ---- row one, on the navy: Support, weather, profile, icons only ---- */
  :root[data-nav="top"] .ghead .tooltip-wrapper { grid-row: 1; grid-column: 3; justify-self: center; }
  :root[data-nav="top"] .ghead .gwx {
    grid-row: 1;
    grid-column: 4;
    justify-self: stretch;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(250, 248, 243, .16);
  }
  :root[data-nav="top"] .ghead .ghead__actions > a.gstack { grid-row: 1; grid-column: 5; justify-self: center; }
  :root[data-nav="top"] .ghead .gstack__ic { height: 30px; }
  :root[data-nav="top"] .ghead .gstack__ic svg { width: 30px; height: 30px; }
  :root[data-nav="top"] .ghead .tooltip-wrapper .nav-link > .tooltip-tab {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0;
    letter-spacing: 0;
    color: #FAF8F3;
  }
  :root[data-nav="top"] .ghead .tooltip-wrapper .nav-link > .tooltip-tab svg { width: 30px; height: 30px; margin: 0; stroke: currentColor; fill: none; }
  :root[data-nav="top"] .ghead .tooltip-wrapper .nav-link:hover > .tooltip-tab { background: transparent; transform: none; }

  /* ---- row two: the menu, centred ---- */
  :root[data-nav="top"] .ghead .gnav {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
    align-self: stretch;
    position: static;
    display: flex;
    align-items: stretch;
    gap: 26px;
    min-width: 0;
    margin: 0;
    transform: none;
  }
  :root[data-nav="top"] .ghead .gnav__item { display: flex; align-items: center; }
  :root[data-nav="top"] .ghead .gnav__btn { height: 100%; }
}
@media (min-width: 981px) and (max-width: 1099px) {
  /* The bar keeps its own 74px here: strip + bar 74. */
  :root { --header-h: calc(var(--gtop-h) + 74px); }
  body.inner-page { padding-top: var(--header-h); }
}
@media (max-width: 980px) {
  .gtop { display: none; }
}
@media (max-width: 900px) {
  /* Phones carry the site's fixed 44px .topbar, and style.css means the bar
     to sit under it — but its later .ubar rule resets the bar to top: 0,
     which slid it behind the topbar. Put it back, scrolled or not. */
  .site-header.ghead,
  body.inner-page .site-header,
  body:has(.site-header.is-scrolled) .site-header { top: 44px; }
}
@media (max-width: 600px) {
  .gtix span { display: none; }
  .gtix { padding: 9px 10px; }
}

/* ---- the home page's two-tone logo, below 1100px ----
   Here the logo sits in a badge on the navy bar. The badge is white only down
   to the logo's 32nd row of 57 — where its green turns to white — and navy
   from there, so each half of the logo lands on the colour it was drawn for.
   The edge is worked out from the logo's own height, so it stays exact at
   every size. */
@media (max-width: 1099px) {
  .ghead__brand--split {
    --split-logo-h: 57px;
    --split-pad: 6px;
    padding: var(--split-pad) 12px;
    border-radius: 6px;
    background: linear-gradient(
      to bottom,
      #FFFFFF 0,
      #FFFFFF calc(var(--split-pad) + var(--split-logo-h) * 32 / 57),
      #2e4755 0
    );
    box-shadow: 0 0 0 1px rgba(250, 248, 243, .14);
  }
  /* The badge never gives up width to its neighbours: a squeezed logo would
     stretch out of shape and its split would no longer mean anything. */
  .ghead__brand--split { flex: none; }
  .ghead .ghead__brand--split .ghead__logo--split {
    display: block;
    width: auto;
    max-width: none;
    height: var(--split-logo-h);
  }
}
@media (max-width: 600px) {
  .ghead__brand--split { --split-logo-h: 45.6px; --split-pad: 5px; padding-inline: 8px; }
}