/* ==========================================================================
   Gott och Blandat — Site header
   Apple-style navigation: a slim translucent blurred bar spanning the
   viewport, quiet centered links, full-width dropdown panels for
   submenus, and on small screens a hamburger opening a full overlay
   with large stacked links.
   ========================================================================== */

header[role="banner"] {
  position: sticky;
  /* Stays below the admin toolbar when it is present */
  top: var(--drupal-displace-offset-top, 0);
  z-index: 50;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: var(--border-hairline);
}

.site-nav {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.site-nav .region-header {
  display: contents;
}

/* --- Branding: compact wordmark + dots --- */
.gob-wordmark {
  display: block;
  text-decoration: none;
  line-height: 1.1;
  flex-shrink: 0;
}

.gob-wordmark:hover {
  text-decoration: none;
}

.gob-wordmark .eyebrow {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.gob-wordmark .name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.gob-wordmark .dots {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

.gob-wordmark .dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* --- Main menu: quiet, evenly spaced, starts right after the wordmark --- */
.menu--main {
  margin: 0;
}

.menu--main ul.menu {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A parent whose children are all access-filtered away renders as a
   bare span with no dropdown - pointless, hide it (members see no
   Admin entry; the real protection sits in the pages' access).
   Core marks such spans with js-hide. Specificity must beat the
   trigger styling below. */
.menu--main > ul.menu > li > span:only-child,
.menu--main ul.menu span.js-hide {
  display: none;
}

/* Parents without a page render as <span>; style both alike so
   Hem and Admin behave identically */
.menu--main > ul.menu > li > a,
.menu--main > ul.menu > li > span {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-secondary);
  text-decoration: none;
  padding: var(--space-3) 0;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.menu--main > ul.menu > li:hover > a,
.menu--main > ul.menu > li:hover > span,
.menu--main a.is-active {
  color: var(--color-ink);
  text-decoration: none;
}

/* --- Submenus: compact dropdown right under the item you open --- */
.menu--main > ul.menu > li {
  position: relative;
}

/* No submenu indicators: like Apple, the dropdown reveals itself on
   hover and the top item is judged by its own label */
.menu--main li ul.menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility 0s linear var(--duration-base);
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-4));
  z-index: 60;
  display: block;
  min-width: 13rem;
  padding: var(--space-2);
  background: var(--color-surface-raised);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px -8px rgba(34, 41, 59, 0.25);
}

.menu--main li:hover > ul.menu,
.menu--main li:focus-within > ul.menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.menu--main li ul.menu li {
  margin: 0;
}

.menu--main li ul.menu a {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

.menu--main li ul.menu a:hover {
  background: var(--color-accent-tint);
  color: var(--color-ink);
  text-decoration: none;
}

/* --- Account menu: small, right edge --- */
.menu--account {
  margin-left: auto;
  flex-shrink: 0;
}

.menu--account ul.menu {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu--account a {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-decoration: none;
}

.menu--account a:hover {
  color: var(--color-ink);
}

/* --- Welcome line: quiet strip under the bar for logged-in members --- */
.site-welcome {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

/* --- Hamburger: hidden on desktop --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center;
}

.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--color-ink);
  transition: transform var(--duration-base) var(--ease-out);
}

/* ==========================================================================
   Small screens: bar with wordmark + hamburger, menu as full overlay
   with large stacked links, Apple style.
   ========================================================================== */
@media (max-width: 720px) {
  .site-nav {
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
  }

  .nav-toggle {
    display: flex;
  }

  html.nav-open .nav-toggle__bar:first-child {
    transform: translateY(3.25px) rotate(45deg);
  }

  html.nav-open .nav-toggle__bar:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
  }

  /* Menus hidden until the hamburger opens them */
  .menu--main,
  .menu--account {
    display: none;
  }

  html.nav-open .menu--main,
  html.nav-open .menu--account {
    display: block;
    margin: 0;
  }

  /* The overlay: header grows to cover the viewport, links stack big */
  html.nav-open {
    overflow: hidden;
  }

  html.nav-open .site-nav {
    flex-wrap: wrap;
    align-content: flex-start;
    height: calc(100dvh - var(--drupal-displace-offset-top, 0px));
    overflow-y: auto;
  }

  html.nav-open .menu--main {
    flex-basis: 100%;
    order: 3;
    padding-top: var(--space-7);
  }

  html.nav-open .menu--main ul.menu {
    display: block;
  }

  html.nav-open .menu--main ul.menu > li > a,
  html.nav-open .menu--main ul.menu > li > span {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-2xl);
    color: var(--color-ink);
    padding: var(--space-3) 0;
  }

  /* Same access-filtered-away exception as desktop (see above) - must
     out-specificity the trigger styling right above. */
  html.nav-open .menu--main ul.menu > li > span:only-child {
    display: none;
  }

  /* Submenus inline as quiet groups under their parent */
  html.nav-open .menu--main li ul.menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    position: static;
    padding: 0 0 var(--space-3) var(--space-5);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }

  html.nav-open .menu--main li ul.menu a {
    display: block;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--color-ink-secondary);
    padding: var(--space-2) 0;
  }

  html.nav-open .menu--account {
    flex-basis: 100%;
    order: 4;
    border-top: var(--border-hairline);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
  }

  html.nav-open .menu--account ul.menu {
    display: block;
  }

  html.nav-open .menu--account a {
    display: block;
    font-size: var(--text-md);
    padding: var(--space-2) 0;
  }
}