/*
 * sd-header + sd-nav — global header and primary navigation (Session 2.2 core; Session 3.1 complete)
 * Content: Blueprint 5.3–5.4 — logo (= Home), primary navigation, persistent "Find Your Solution" action
 * (9.4.2), account access. Mega Menu panels: mega-menu.css (5.33). Mobile: 15.11–15.13.
 * Behaviour (shared/components.js): drawer toggle with aria-expanded, Mega Menu triggers (disclosure
 * pattern, one panel open), Esc closes and returns focus, outside click closes, compact state on scroll,
 * everything closes when the viewport crosses 1280px. Navigation structure: docs/design/Navigation_Structure.md.
 *
 * Session 3.2 follow-up: header model A — utility bar (About SisuDent, Contact, account, phone, email) above the
 * sticky main row; it scrolls away, the main row becomes compact with a translucent background.
 * Component breakpoint: the full navigation needs about 1280px;
 * below 1280px the navigation moves into a drawer opened by the menu button, and the Mega Menu
 * panels become accordion sections inside it (Blueprint 15.12–15.13: redesigned for touch, not compressed).
 */

.sd-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sd-color-surface);
  border-bottom: var(--sd-border-width) solid var(--sd-color-border-subtle);
  transition: box-shadow var(--sd-transition-ui), background-color var(--sd-transition-ui);
}

/* Compact state after the page has scrolled: lower bar, smaller logo, soft shadow (set by JS) */
.sd-header[data-scrolled="true"] {
  --sd-header-height: 4rem;    /* 64 */
  box-shadow: 0 2px 12px rgb(31 41 51 / 0.08);
  background: rgb(255 255 255 / 0.96);
}

/* Compact state: slightly see-through background with blur (owner request); opaque where blur is unsupported */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sd-header[data-scrolled="true"]:not([data-open="true"]) {
    background: rgb(255 255 255 / 0.86);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}

.sd-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sd-space-4);
  min-height: var(--sd-header-height);
  transition: min-height var(--sd-transition-ui);
}

.sd-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--sd-target-min);
  margin-right: auto;
}

.sd-header__logo img {
  width: auto;
  height: 2.5rem;    /* 40 */
  transition: height var(--sd-transition-ui);
}

@media (min-width: 1024px) {
  .sd-header__logo img { height: 3.25rem; }  /* 52 (owner request: larger logo) */
  .sd-header[data-scrolled="true"] .sd-header__logo img { height: 2.5rem; }  /* 40 */
}

.sd-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sd-space-2);
  flex: none;
  min-width: 0;
}

/* Icon button (account, menu): sd-icon-button in button.css */

/* ---------- Primary navigation ---------- */

.sd-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sd-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Link and Mega Menu trigger share one look; the trigger is a <button> */
.sd-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sd-space-1);
  min-height: var(--sd-target-min);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--sd-nav-pad, var(--sd-space-2));
  border: 0;
  background: none;
  color: var(--sd-color-text-default);
  font: inherit;
  font-size: var(--sd-font-size-ui);
  font-weight: var(--sd-font-weight-medium);
  letter-spacing: var(--sd-letter-spacing-ui);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sd-transition-feedback);
}

/* Underline indicator: blue on hover and on an open trigger, copper for the current page or section (selected = copper, Blueprint 3.6) */
.sd-nav__link::after {
  content: "";
  position: absolute;
  left: var(--sd-nav-pad, var(--sd-space-2));
  right: var(--sd-nav-pad, var(--sd-space-2));
  bottom: 0.375rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sd-transition-ui);
}

.sd-nav__link:hover,
.sd-nav__link[data-state="hover"],
.sd-nav__trigger[aria-expanded="true"] { color: var(--sd-color-brand-blue); }

.sd-nav__link:hover::after,
.sd-nav__link[data-state="hover"]::after,
.sd-nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); }

.sd-nav__link[aria-current="page"],
.sd-nav__trigger[data-current="true"] { color: var(--sd-color-brand-blue); }

.sd-nav__link[aria-current="page"]::after,
.sd-nav__trigger[data-current="true"]::after {
  background: var(--sd-color-accent-copper);
  transform: scaleX(1);
}

.sd-nav__chevron {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform var(--sd-transition-ui);
}

.sd-nav__trigger[aria-expanded="true"] .sd-nav__chevron { transform: rotate(180deg); }

/* The trigger's underline stops before the chevron */
.sd-nav__trigger::after { right: calc(var(--sd-nav-pad, var(--sd-space-2)) + 1rem + var(--sd-space-1)); }

.sd-nav__finder { white-space: nowrap; }

.sd-header__menu-button { display: none; }

/* Items that exist only in the drawer (Home as text link, account) */
.sd-nav__item--drawer { display: none; }

/* ---------- From 1280px: header model A (owner choice, Session 3.2 follow-up) ----------
   Utility bar above the sticky header (secondary links, account, direct contacts) scrolls away with the page;
   the main row keeps the five ecosystem areas with wide, even spacing, search and Find Your Solution.
   About SisuDent and Contact are in the utility bar here; in the drawer they stay in the main list (5.3). */

@media (min-width: 1280px) {
  .sd-header { --sd-nav-pad: 0; }
  .sd-nav { display: flex; align-items: center; margin-left: auto; margin-right: var(--sd-space-3); }
  .sd-nav__list { gap: var(--sd-space-6); }        /* 48 */
  .sd-nav__item--secondary { display: none; }      /* About SisuDent, Contact: utility bar */
  .sd-header__inner { gap: var(--sd-space-3); }
  .sd-header__account { display: none; }           /* account: utility bar */
  .sd-header__search-toggle { margin-right: var(--sd-space-3); }  /* 8 + 16 = 24 px before Find Your Solution (owner request F-03, Session 5.2) */
}

/* ---------- Utility bar (≥ 1280px) ---------- */

.sd-utility { display: none; }

@media (min-width: 1280px) {
  .sd-utility {
    display: block;
    background: var(--sd-color-surface-subtle);
    border-bottom: var(--sd-border-width) solid var(--sd-color-border-subtle);
    font-size: var(--sd-font-size-small);
  }
}

.sd-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-4);
  min-height: var(--sd-target-min);
}

.sd-utility__contact { display: flex; gap: var(--sd-space-4); }

.sd-utility__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-space-2);
  min-height: var(--sd-target-min);
  color: var(--sd-color-text-muted);
  text-decoration: none;
}

.sd-utility__contact a:hover { color: var(--sd-color-brand-blue); text-decoration: underline; text-decoration-thickness: 1px; }
.sd-utility__contact svg { width: 1rem; height: 1rem; flex: none; }

.sd-utility__list {
  display: flex;
  align-items: center;
  gap: var(--sd-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-utility__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sd-space-2);
  min-height: var(--sd-target-min);
  color: var(--sd-color-text-default);
  font-weight: var(--sd-font-weight-medium);
  text-decoration: none;
}

.sd-utility__link svg { width: 1.125rem; height: 1.125rem; flex: none; }

.sd-utility__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sd-transition-ui);
}

.sd-utility__link:hover { color: var(--sd-color-brand-blue); }
.sd-utility__link:hover::after { transform: scaleX(1); }
.sd-utility__link[aria-current="page"] { color: var(--sd-color-brand-blue); }
.sd-utility__link[aria-current="page"]::after { background: var(--sd-color-accent-copper); transform: scaleX(1); }

.sd-utility__divider { width: 1px; height: 1.25rem; background: var(--sd-color-border-subtle); }

/* ---------- Below 1280px: drawer with accordion sections ---------- */

@media (max-width: 1279.98px) {
  .sd-header__menu-button { display: inline-flex; }

  .sd-nav {
    /* Fills the viewport below the bar; scrolls inside, the page behind does not (html[data-sd-nav-open]).
       --sd-nav-top = bottom of the bar, set by JS on open (the bar height varies: compact state, action strip) */
    position: fixed;
    top: var(--sd-nav-top, var(--sd-header-height));
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sd-space-2) var(--sd-page-margin) var(--sd-space-6);
    background: var(--sd-color-surface);
    border-top: var(--sd-border-width) solid var(--sd-color-border-subtle);
  }

  .sd-header[data-open="true"] .sd-nav { display: block; }

  .sd-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 40rem;
  }

  .sd-nav__list > li + li { border-top: var(--sd-border-width) solid var(--sd-color-border-subtle); }

  .sd-nav__item--drawer { display: list-item; }

  .sd-nav__link {
    display: flex;
    width: 100%;
    min-height: 3.25rem;    /* 52 — touch target above 44 (Blueprint 15.27) */
    padding-inline: 0;
    font-size: 1.0625rem;
  }

  .sd-nav__link::after { left: 0; right: auto; width: 2rem; bottom: 0.5rem; }

  /* Accordion trigger: label left, larger chevron right */
  .sd-nav__trigger { justify-content: space-between; }
  .sd-nav__trigger::after { right: auto; }
  .sd-nav__chevron { width: 1.25rem; height: 1.25rem; color: var(--sd-color-brand-blue); }

  /* Below 1280px the persistent action stays in the header bar (compact), not in the drawer (Blueprint 5.3) */
  .sd-nav__finder { display: none; }
  .sd-header__finder-compact { display: inline-flex; }
}

/* Page behind the open drawer does not scroll (set by JS) */
html[data-sd-nav-open] { overflow: hidden; }

/* ---------- Small phones (< 480px): logo smaller, account link moves into the drawer ---------- */

.sd-nav__account { display: none; }

@media (max-width: 479.98px) {
  .sd-header__inner { gap: var(--sd-space-2); }
  .sd-header__logo img { height: 2.25rem; }   /* 36 */
  .sd-header__account { display: none; }
  .sd-header__finder-compact { min-height: var(--sd-target-min); padding-inline: var(--sd-space-3); }
  .sd-nav__account { display: list-item; }
}

/* Very small phones (< 400px): the persistent action becomes a full-width strip below the bar (WCAG 1.4.10 reflow at 320px) */

@media (max-width: 399.98px) {
  .sd-header__inner { flex-wrap: wrap; row-gap: 0; padding-top: var(--sd-space-2); }
  .sd-header__actions { display: contents; }
  .sd-header__menu-button { order: 2; }
  .sd-header__finder-compact { order: 3; flex: 1 0 100%; margin-bottom: var(--sd-space-3); }
}