@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 5.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   5. HEADER & NAVIGATION
   ============================================================ */

.site-header {
  position: relative;
  z-index: var(--z-header);
  background-color: var(--colour-bg);
  border-bottom: var(--border-hairline);
}

/* The hairline of burgundy across the very top of the page. */
.site-header::before {
  content: '';
  display: block;
  height: var(--rule-thick);
  background-color: var(--burgundy-600);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-height);
  padding-block: var(--space-2xs);
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
}

.site-header__logo img {
  height: var(--space-xl);
  width: auto;
}

@media (min-width: 48em) {
  .site-header__logo img {
    height: calc(var(--space-xl) + var(--space-2xs));
  }
}

/* -- Nav toggle: CSS-only, no JavaScript in this mockup ------- */
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle__label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-heading);
  cursor: pointer;
  transition: var(--transition-colour);
}

.nav-toggle__label:hover {
  border-color: var(--colour-rule-accent);
  background-color: var(--colour-bg-wash);
}

.nav-toggle:focus-visible + .nav-toggle__label {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.nav-toggle__bars {
  display: grid;
  gap: var(--space-3xs);
  width: var(--space-sm);
}

.nav-toggle__bars span {
  display: block;
  height: var(--rule-thin);
  background-color: var(--colour-heading);
  border-radius: var(--radius-pill);
}

.site-nav {
  display: none;
  width: 100%;
  order: 3;
  padding-block: var(--space-sm);
  border-top: var(--border-hairline);
}

.nav-toggle:checked ~ .site-nav {
  display: block;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.site-nav__link {
  display: block;
  padding: var(--space-2xs) var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--colour-text);
  border-radius: var(--radius-sm);
}

.site-nav__link:hover {
  color: var(--colour-link-hover);
  background-color: var(--colour-bg-band);
}

.site-nav__link[aria-current='page'] {
  color: var(--colour-heading);
  font-weight: var(--weight-semibold);
}

@media (min-width: 62em) {
  .nav-toggle__label {
    display: none;
  }

  .site-nav {
    display: block;
    width: auto;
    order: 0;
    padding-block: 0;
    border-top: 0;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }

  .site-nav__link {
    position: relative;
    padding: var(--space-2xs) 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }

  .site-nav__link:hover {
    background-color: transparent;
  }

  /* Thin warm rule slides in beneath the active or hovered item. */
  .site-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rule-thin);
    background-color: var(--colour-rule-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .site-nav__link:hover::after,
  .site-nav__link[aria-current='page']::after {
    transform: scaleX(1);
  }

  .site-nav__link[aria-current='page']::after {
    background-color: var(--burgundy-600);
  }
}

/* -- 5b. Dropdown menus ---------------------------------------
   Resources and Publications each open onto their two
   categories. One set of markup drives two mechanisms:

     mobile   a checkbox-and-label toggle sits beside the parent
              link and opens the submenu in flow, indented under
              a thin warm rule.
     desktop  the checkbox and its label leave the layout, and
              the panel is revealed by :hover and :focus-within.

   :focus-within is what makes the keyboard path work without
   script. The panel is hidden with `visibility`, so its links
   are out of the tab order until it opens; tabbing reaches the
   parent link first, which is visible, and that focus opens the
   panel — at which point the two links inside become tabbable
   and keep the panel open as focus moves through them.

   The parent link is a real link, not a dead toggle: it goes to
   the unfiltered listing, so the top-level item still works
   whichever way the menu is being driven.
   ------------------------------------------------------------ */

.site-nav__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2xs);
}

.site-nav__item > .site-nav__link {
  flex: 1 1 auto;
  min-width: 0;
}

/* The caret marks a link that opens onto more. It is the
   ornament lozenge with two sides inked, and it belongs to the
   desktop bar — on mobile that job is the toggle's. */
.site-nav__caret {
  display: none;
}

/* Hidden by clipping, not display, so it stays focusable and
   can pass its focus ring to the visible label. */
.nav-menu__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.nav-menu__label {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--space-lg);
  height: var(--space-lg);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  color: var(--colour-heading);
  cursor: pointer;
  transition: var(--transition-colour);
}

.nav-menu__label:hover {
  border-color: var(--colour-rule-accent);
  background-color: var(--colour-bg-wash);
}

.nav-menu__toggle:focus-visible + .nav-menu__label {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.nav-menu__chevron {
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-right: var(--rule-thin) solid currentColor;
  border-bottom: var(--rule-thin) solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-menu__toggle:checked + .nav-menu__label .nav-menu__chevron {
  transform: translateY(20%) rotate(-135deg);
}

.nav-menu {
  display: none;
  flex-basis: 100%;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-sm);
  margin-left: var(--space-2xs);
  border-left: var(--rule-thin) solid var(--colour-rule);
}

.nav-menu__toggle:checked ~ .nav-menu {
  display: grid;
  gap: var(--space-3xs);
}

.nav-menu__link {
  display: block;
  padding: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--colour-text-muted);
  border-radius: var(--radius-sm);
}

.nav-menu__link:hover {
  color: var(--colour-link-hover);
  background-color: var(--colour-bg-band);
}

@media (min-width: 62em) {
  /* Six top-level items now, so the row tightens by one step. */
  .site-nav__list {
    gap: var(--space-sm);
  }

  .site-nav__item {
    display: block;
  }

  .nav-menu__toggle,
  .nav-menu__label {
    display: none;
  }

  .site-nav__caret {
    display: inline-block;
    width: var(--space-3xs);
    height: var(--space-3xs);
    margin-left: var(--space-3xs);
    border-right: var(--rule-hairline) solid currentColor;
    border-bottom: var(--rule-hairline) solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
  }

  /* The panel hangs flush off the bottom of its item — no gap
     for the pointer to fall through on the way down. */
  .nav-menu {
    display: grid;
    gap: var(--space-3xs);
    position: absolute;
    top: 100%;
    left: calc(var(--space-xs) * -1);
    z-index: var(--z-raised);
    min-width: var(--nav-menu-width);
    padding: var(--space-2xs);
    margin: 0;
    background-color: var(--colour-bg);
    border: var(--border-hairline);
    border-top: var(--rule-thin) solid var(--burgundy-600);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-card);
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(var(--space-3xs) * -1));
    transition: opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out),
      visibility var(--duration-fast) var(--ease-out);
  }

  .site-nav__item:hover > .nav-menu,
  .site-nav__item:focus-within > .nav-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-menu__link {
    padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
  }
}