/* assets/css/header.css */

/* The site header on every page (loaded by includes/header.php after
   style.css, whose tokens it uses): the bar, the menu bar and its menus,
   the Shop mega menu, the phone drawer and, from later tasks, the search
   box, the menu promo tile and the announcement bar (home redesign spec §9).
   Tokens only. 1024 px is the switch between the drawer and the menu bar
   (assets/js/main.js uses the same width): below it seven menu items do
   not fit beside the logo, account and cart (home redesign ruling 74). */

/* =========================================================
   The bar
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--sigma-white);
  border-bottom: 1px solid var(--sigma-border);
}
.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-height);
  gap: var(--space-5);
}
.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--sigma-navy);
  white-space: nowrap;
}
/* The logo image (Site settings → Brand), in place of the name: about 40px tall, its width from its own shape,
   never so wide that the header buttons stop fitting on a 320px phone. */
.logo-image img {
  display: block;
  width: auto;
  height: 40px;
  max-width: min(200px, 42vw);
  object-fit: contain;
  object-position: left center;
}
.header-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--radius-sm);
  color: var(--sigma-navy);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.icon-link:hover { color: var(--sigma-primary); background: var(--sigma-bg-section); }
.cart-badge {
  position: absolute;
  top: 3px;
  right: 1px;
  background: var(--sigma-primary);
  color: var(--sigma-white);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--touch);
  height: var(--touch);
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0;
}
.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--sigma-navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* A jump to a Home section (/#sizes, /#featured) lands below the sticky bar. */
section[id] { scroll-margin-top: var(--header-height); }

/* =========================================================
   Menus: shared pieces
   ========================================================= */

.nav-list > li > a:not(.btn),
.nav-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--sigma-text-dark);
  min-height: var(--touch);
  padding: 8px 2px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  /* An item never wraps onto two lines ("Corporate Orders"); the bar is sized to fit them (ruling 74). */
  white-space: nowrap;
}
.nav-list > li > a:not(.btn):hover,
.nav-button:hover,
.nav-list > li.active > a:not(.btn),
.nav-list > li.open > .nav-button {
  color: var(--sigma-primary);
  border-bottom-color: var(--sigma-primary);
}
/* Corporate Orders reads in burgundy, as in the approved mockup (11:1 on white). */
.nav-list > li.nav-corporate > a { color: var(--sigma-burgundy); }
.nav-list > li.nav-corporate > a:hover,
.nav-list > li.nav-corporate.active > a { color: var(--sigma-primary); }

/* The chevron button beside the Shop link. */
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  margin-left: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--sigma-text-dark);
}
.dropdown-toggle:hover { color: var(--sigma-primary); }
.dropdown-toggle .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.has-dropdown.open > .dropdown-toggle .icon { transform: rotate(180deg); }
/* A menu-only item's button carries its own words (Collections, Sizes, Colours, Discover). */
.nav-button.dropdown-toggle { width: auto; margin-left: 0; height: auto; min-height: var(--touch); border-radius: 0; }

/* A menu-only item shows its link or its button, never both (main.js swaps them). */
.nav-list > li > [hidden] { display: none; }
/* The nav links' display (0,2,2) would otherwise beat the rule above for the link main.js hides. */
.nav-list > li > .nav-fallback[hidden] { display: none; }

.mega,
.nav-menu { display: none; }
.has-dropdown.open > .mega,
.has-dropdown.open > .nav-menu { display: block; }

.nav-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: 0 var(--space-4);
  border: 1px solid var(--sigma-border);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--sigma-text-dark);
  background: var(--sigma-white);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-pill:hover { border-color: var(--sigma-primary); color: var(--sigma-primary); }
.nav-menu-link,
.nav-menu-list a,
.mega-link,
.mega-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--sigma-text-dark);
  text-decoration: underline;
  text-decoration-color: var(--sigma-border);
  text-underline-offset: 3px;
}
.nav-menu-link:hover,
.nav-menu-list a:hover,
.mega-link:hover,
.mega-links a:hover { color: var(--sigma-primary); text-decoration-color: currentColor; }

/* =========================================================
   The Shop mega menu
   ========================================================= */

.mega-heading {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sigma-text-medium);
  margin: 0 0 var(--space-3);
}
.mega-model-list { display: grid; gap: var(--space-2); }
.mega-model {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--sigma-text-dark);
  transition: background var(--dur-fast) var(--ease-out);
}
.mega-model:hover { background: var(--sigma-bg-section); }
.mega-model-media {
  width: 64px;
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.mega-model-media img { width: 100%; height: 100%; object-fit: cover; }
.mega-model-text { display: flex; flex-direction: column; gap: 2px; }
.mega-model-name { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
.mega-model-range { font-size: 0.85rem; color: var(--sigma-text-medium); }
.mega-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch);
  margin-top: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--sigma-primary-dark);
}
.mega-all .icon { width: 18px; height: 18px; }
.mega-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-size-list,
.mega-colour-list,
.mega-links { display: grid; gap: var(--space-1); }
.mega-size {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  color: var(--sigma-text-dark);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.mega-size:hover { border-color: var(--sigma-primary); }
.mega-size-inches { color: var(--sigma-text-medium); font-size: 0.85rem; }
.mega-colour {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--sigma-text-dark);
}
.mega-colour .dot { width: 16px; height: 16px; }
.mega-colour:hover { color: var(--sigma-primary); }

/* =========================================================
   Phones and tablets (below 1024 px): the drawer
   ========================================================= */

/* The exact complement of the bar's query (and of main.js's), so a fractional width such as 1023.4 px under browser zoom
   always gets one of the two layouts. */
@media not all and (min-width: 1024px) {
  .main-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    background: var(--sigma-white);
    border-bottom: 1px solid var(--sigma-border);
    box-shadow: var(--shadow-md);
  }
  .main-nav.open { display: block; }
  .nav-list { display: flex; flex-direction: column; padding: var(--space-2) 20px var(--space-5); }
  .nav-item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--sigma-border); }
  .nav-list > li > a:not(.btn),
  .nav-button {
    flex: 1;
    min-height: var(--touch);
    padding: var(--space-2) 0;
    border-bottom: 0;
    font-size: 1rem;
  }
  .nav-button { justify-content: space-between; text-align: left; }
  .nav-list > li > a:not(.btn):hover,
  .nav-button:hover,
  .nav-list > li.active > a:not(.btn),
  .nav-list > li.open > .nav-button { border-bottom-color: transparent; }
  .nav-list > li.open > .nav-button { background: var(--sigma-bg-section); }
  .nav-button .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
  .has-dropdown.open > .nav-button .icon { transform: rotate(180deg); }
  .dropdown-toggle { width: var(--touch); }
  .nav-menu,
  .mega { flex-basis: 100%; padding: 0 0 var(--space-4); }
  .mega .container { padding: 0; }
  .mega-inner { display: grid; gap: var(--space-4); }
  /* Sizes and Colours follow as items of their own; the promo tile stays a computer-only extra. */
  .mega-col-sizes,
  .mega-col-colours,
  .mega-promo { display: none; }
  .mega-model-media { width: 48px; }
  .nav-menu-link { margin-top: var(--space-2); }
  .nav-whatsapp { border-bottom: 0; padding-top: var(--space-4); }
  .nav-whatsapp .btn { flex: 1; justify-content: center; min-height: var(--touch); gap: var(--space-2); }
  .nav-whatsapp .icon { width: 20px; height: 20px; }
}

/* Narrow phones: the menu button, the wordmark and two 44px buttons must fit in 320px,
   so the account link moves from the bar into the drawer (it is there at every phone width). */
@media (max-width: 479px) {
  .header-inner { gap: var(--space-2); }
  .header-actions { gap: 0; }
  .logo { font-size: 1.1rem; }
  .header-account { display: none; }
}

/* =========================================================
   Computers (1024 px and wider): the menu bar
   ========================================================= */

@media (min-width: 1024px) {
  /* .nav-item (0,1,0) sets display below, so these need the extra class (0,2,0) to stay hidden. */
  .hamburger,
  .nav-item.nav-drawer-only { display: none; }
  /* Items fill the bar's height so the pointer can move from an item
     straight into its menu below without crossing a gap. */
  /* The menu sits in the middle of the bar (owner request 2026-10-24): two equal side columns hold the logo and the
     actions, so the menu is centred on the page whatever their widths. */
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .header-inner > .logo { justify-self: start; }
  .header-actions { justify-self: end; margin-left: 0; }
  .main-nav { align-self: stretch; }
  .nav-list { display: flex; height: 100%; gap: var(--space-4); }
  .nav-item { display: flex; align-items: center; }
  .has-menu { position: relative; }
  .mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--space-6) 0;
    background: var(--sigma-white);
    border-top: 1px solid var(--sigma-border);
    border-bottom: 1px solid var(--sigma-border);
    box-shadow: var(--shadow-md);
  }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--space-4));
    width: max-content;
    max-width: 360px;
    padding: var(--space-4);
    background: var(--sigma-white);
    border: 1px solid var(--sigma-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  .has-dropdown:hover > .mega,
  .has-dropdown:hover > .nav-menu { display: block; }
  /* Esc closes a menu the pointer is resting on (main.js adds nav-dismissed until the pointer leaves). */
  .has-dropdown.nav-dismissed:hover > .mega,
  .has-dropdown.nav-dismissed:hover > .nav-menu { display: none; }
  /* Without JavaScript a keyboard user tabbing into an item sees its menu too (main.js adds nav-js). */
  html:not(.nav-js) .has-dropdown:focus-within > .mega,
  html:not(.nav-js) .has-dropdown:focus-within > .nav-menu { display: block; }
  .nav-menu-link { margin-top: var(--space-3); }
  /* Five columns: models, sizes, colours, useful links, the promo tile; a column with nothing to show is not printed. */
  .mega-inner { display: flex; gap: var(--space-6); }
  .mega-col-models { flex: 1.2 1 0; }
  .mega-col-sizes { flex: 0.8 1 0; }
  .mega-col-colours { flex: 1 1 0; }
  .mega-col-links { flex: 0.9 1 0; }
}
/* The menu bar is tight just above the switch: seven items fit 1024 px with smaller words and gaps and a logo image of at
   most 160 px (measured: 11 px to spare with the logo as text). */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header-inner { gap: var(--space-3); }
  .nav-list { gap: var(--space-3); }
  .nav-list > li > a:not(.btn),
  .nav-button { font-size: 0.875rem; }
  .logo { font-size: 1.25rem; }
  .logo-image img { max-width: 160px; }
}

/* =========================================================
   Search: the bar's box (from 1440 px; a link to /search below that) and the /search page
   ========================================================= */

.header-search { display: none; }
.header-search-input {
  flex: 1;
  min-width: 0;
  height: var(--touch);
  padding: 0 0 0 var(--space-4);
  border: 0;
  border-radius: 999px 0 0 999px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--sigma-text-dark);
}
.header-search-input::placeholder { color: var(--sigma-text-medium); }
.header-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--sigma-navy);
}
.header-search-button:hover { color: var(--sigma-primary); }
.header-search-button .icon { width: 20px; height: 20px; }
/* Beside seven menu items the box fits only once the bar's row may grow past the page's 1200 px container (ruling 74). */
@media (min-width: 1440px) {
  .header-inner { max-width: 1400px; }
  .header-search {
    display: flex;
    align-items: center;
    flex: 0 1 240px;
    min-width: 160px;
    margin-right: var(--space-2);
    border: 1px solid var(--sigma-border);
    border-radius: 999px;
    background: var(--sigma-white);
  }
  .header-search-link { display: none; }
}

.search-none { font-family: var(--font-ui); font-size: 1.05rem; color: var(--sigma-text-dark); }
.search-form { display: flex; flex-wrap: wrap; gap: var(--space-3); max-width: 640px; margin: var(--space-4) 0 var(--space-6); }
.search-input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: var(--touch);
  padding: 0 var(--space-4);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-sm);
  background: var(--sigma-white);
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--sigma-text-dark);
}
.search-form .btn .icon { width: 20px; height: 20px; }
.search-browse { display: grid; gap: var(--space-4); justify-items: start; }

/* =========================================================
   The Shop menu's promo tile (Homepage → Menu promo): a 4:5 picture (800 × 1000), its words over a dark fade
   ========================================================= */

.mega-promo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  background: var(--sigma-bg-section);
  color: var(--sigma-white);
}
.mega-promo-media img { width: 100%; height: 100%; object-fit: cover; }
.mega-promo-media { position: absolute; inset: 0; }
.mega-promo-text {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-8) var(--space-4) var(--space-4);
  background: linear-gradient(to top, var(--scrim-dark), transparent);
}
.mega-promo-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.mega-promo-line { font-size: 0.9rem; color: var(--sigma-white); }
.mega-promo:hover .mega-promo-title,
.mega-promo:focus-visible .mega-promo-title { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .mega-promo { display: block; flex: 1.4 1 0; max-width: 320px; align-self: flex-start; }
}

/* =========================================================
   The discount strip (above the announcement bar; owner decision 68): "Up to 65% off", worked out from
   real prices; yellow with black words for contrast, the whole strip one link to the Shop
   ========================================================= */

.discount-strip { background: var(--sigma-yellow); color: var(--sigma-black); font-family: var(--font-ui); font-size: 0.9rem; }
.discount-strip-inner { text-align: center; }
.discount-strip a { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-2); min-height: var(--touch); padding: var(--space-1) 0; color: inherit; text-decoration: none; }
.discount-strip strong { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.discount-strip-cta { display: inline-flex; align-items: center; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.discount-strip-cta .icon { width: 16px; height: 16px; }
.discount-strip a:hover .discount-strip-cta { text-decoration-thickness: 2px; }
.discount-strip :focus-visible { outline-color: var(--sigma-black); }

/* =========================================================
   The announcement bar (above the header; Homepage → Announcement bar): one background from the locked
   tokens, white words (black on yellow); one message at a time, wrapping rather than cut short
   ========================================================= */

.announcement-bar {
  background: var(--sigma-navy);
  color: var(--sigma-white);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.announcement-bar--burgundy { background: var(--sigma-burgundy); }
.announcement-bar--pink { background: var(--sigma-primary); }
.announcement-bar--blue { background: var(--sigma-blue); }
.announcement-bar--black { background: var(--sigma-black); }
.announcement-bar--yellow { background: var(--sigma-yellow); color: var(--sigma-black); }
.announcement-inner { display: flex; align-items: center; gap: var(--space-2); }
.announcement-messages { flex: 1; min-width: 0; padding: var(--space-2) 0; text-align: center; }
.announcement-message { overflow-wrap: anywhere; }
.announcement-message a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* The focus ring stays visible on every background: white on the dark ones, black on yellow. */
.announcement-bar :focus-visible { outline-color: var(--sigma-white); }
.announcement-bar--yellow :focus-visible { outline-color: var(--sigma-black); }
.announcement-controls { display: flex; flex-shrink: 0; }
.announcement-controls[hidden],
.announcement-control[hidden] { display: none; }
.announcement-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
}
.announcement-control .icon { width: 18px; height: 18px; }
.announcement-control[aria-pressed="true"] .announcement-icon-pause,
.announcement-control[aria-pressed="false"] .announcement-icon-play { display: none; }