/* ==========================================================================
   Component: System Chrome
   File: 30-component.global-chrome.css
   Purpose: Global header + footer (system chrome) and related menus/drawers
   Notes:
   - Mobile-first
   - Header contains nav + search overlay + action controls
   - Includes account / institutional access states and drawer/menu styling
   ========================================================================== */


/* ==========================================================================
   Header: base shell + layout
   ========================================================================== */

.site-header {
  position: relative;
  padding-block: var(--space-2);
  border-bottom: var(--border-1);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   Header: brand / logo
   -------------------------------------------------------------------------- */

.site-header__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  line-height: 1;

  /* Predictable logo box even when image has no intrinsic size */
  min-width: 36px;
  min-height: 36px;
  max-width: 160px;
  max-height: 36px;
}

.site-header__logo picture {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.site-header__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 36px;
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   Header: overlay primitives / show-hide helpers
   -------------------------------------------------------------------------- */

/* Mobile nav toggle visible by default */
.site-header__nav-toggle {
  display: inline-flex;
}

/* Hide any overlay region by default via aria-hidden */
.site-header [aria-hidden="true"] {
  display: none;
}

/* Ensure icon glyphs remain visible when aria-hidden is used on wrappers */
.site-header svg[aria-hidden="true"],
.site-header i[aria-hidden="true"] {
  display: block !important;
}

/* Explicitly keep the search icon visible (legacy safety net) */
.site-header .site-header__search-icon {
  display: flex !important;
}



/* ==========================================================================
   Header: navigation + menus (mobile-first)
   ========================================================================== */



/* ==========================================================================
   Header: search (overlay)
   ========================================================================== */

.site-header__search {
  width: 100%;
  max-width: 32rem;
}

/* Mobile overlay positioning */
.site-header__search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  width: 100%;
  max-width: 100vw;

  padding: var(--space-2) var(--space-4);

  border: var(--border-1);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-radius: var(--radius-md);

  background-color: var(--surface);
  box-shadow: var(--shadow-md);
  z-index: 1;
}

/* Search form group */
.form-group--search {
  display: flex;
  align-items: center;

  width: 100%;
  height: 48px;

  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  border-radius: var(--radius-search);
  background-color: var(--surface-2);
}

.form-group--search>* {
  height: 100%;
  border: 0;
  background: transparent;
}

.form-group--search .search-filter {
  flex: 0 0 auto;
    background: var(--surface-2);
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    padding-block: var(--space-1);
    padding-inline: var(--space-2);
    border-top-left-radius: var(--radius-pill);
    border-bottom-left-radius: var(--radius-pill);
}

.search-option-type {
background: var(--surface-1);
}

.form-group--search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  /* important for flex overflow */
}

.form-group--search input::placeholder {
  color: var(--text-muted);
  padding-left: 0.5rem;
}

.form-group--search button {
  display: flex;
  align-items: center;
  gap: var(--space-2);

  height: 32px;
  padding-inline: var(--space-3);

  border: none;
  border-radius: var(--radius-pill);
  border-radius: var(--radius-button);
  background-color: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.form-group--search button:hover {
  background-color: var(--primary-hover);
}

/* Advanced search link (below search on mobile) */
a.search__advanced {
  justify-content: center;
  margin-top: var(--space-2);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
  font-weight: 600;
}

a.search__advanced:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

/* Search toggle: icon/label swap */
.site-header__search-toggle .icon-close,
.site-header__search-toggle .label-close {
  display: none;
}

.site-header__search-toggle[aria-expanded="true"] .icon-open,
.site-header__search-toggle[aria-expanded="true"] .label-open {
  display: none;
}

.site-header__search-toggle[aria-expanded="true"] .icon-close,
.site-header__search-toggle[aria-expanded="true"] .label-close {
  display: inline;
}

/* Default visibility for the icon element */
.site-header__search-icon {
  display: block;
}


/* ==========================================================================
   Header: actions (search toggle, cart, login/account triggers)
   ========================================================================== */

.site-header__actions-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Icon-circle controls */
.site-header__search-toggle,
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  height: 40px;
  width: 40px;

  padding-inline: var(--space-3);
  border: none;
  border-radius: var(--radius-pill);

  background-color: transparent;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.site-header__search-toggle:hover,
.cart-link:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

.cart-link__icon {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Badge counts */
.cart-link__count,
.institute__count {
  position: absolute;
  top: -4px;
  right: -4px;

  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);

  background-color: var(--primary);
  color: var(--on-primary);
  font-size: var(--text-xs);
}

.cart-link__count {
  display: flex !important;
}

.institute__count {
  right: 0px;
}

/* Connection count visibility rules */
.oa--2 .institute__count,
.oa--3 .institute__count,
.oa--1.ip--connected .institute__count {
  display: flex !important;
}

/* Primary CTA buttons (login / account drawer) */
.site-header__login,
.account-drawer__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);

  height: 32px;
  padding-inline: var(--space-3);

  border: none;
  border-radius: var(--radius-pill);
  border-radius: var(--radius-button);

  background-color: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* NOTE: original had a hover selector that also targeted .account-drawer__trigger (without :hover).
   Kept behaviour but corrected grouping below to reflect intent (hover states only). */
.site-header__login:hover,
.account-drawer__trigger:hover {
  background-color: var(--primary-hover);
  color: var(--on-primary);
}

/* Icon-only controls (nav toggle, panel close) */
.site-header__nav-toggle,
.site-header__panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 40px;
  width: 40px;

  border: none;
  border-radius: var(--radius-md);

  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.site-header__nav-toggle:hover,
.site-header__panel-close:hover {
  background: var(--surface-2);
}

.site-header__nav-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   Institutional access: state-driven visibility
   ========================================================================== */

/* Anonymous + institutional capability: hide standard login, show account-menu trigger */
.account--anonymous.capability--institutional .site-header__login {
  display: none !important;
}

.account--anonymous.capability--institutional .account-menu__trigger {
  display: flex !important;
}

/* Standard anonymous login visibility */
.account--anonymous .site-header__login {
  display: flex !important;
}

/* Anonymous institutional not connected: show access trigger + connect/login regions */
.account--anonymous.capability--institutional:not(.institution--connected) .account-drawer__trigger {
  display: flex !important;
}

.account--anonymous.capability--institutional #account-drawer__login {
  display: block !important;
}

.capability--institutional:not(.institution--connected) #account-drawer__connect {
  display: block !important;
}

/* Logged-in institutional not connected: show logged-in trigger + user links + logout */
.account--logged-in.capability--institutional:not(.institution--connected) .account-drawer__trigger--logged-in {
  display: flex !important;
}

.account--logged-in.capability--institutional #account-drawer__user-links {
  display: block !important;
}

.account--logged-in.capability--institutional .account-drawer__logout {
  display: flex !important;
}

/* Connected institutional: show access trigger */
.institution--connected .account-drawer__trigger--access {
  display: flex !important;
}

/* Logged-in non-institutional: show user menu trigger */
.account--logged-in:not(.capability--institutional) .user-menu__trigger {
  display: flex !important;
}

/* --------------------------------------------------------------------------
   Institutional connections: OA/IP-specific visibility rules
   -------------------------------------------------------------------------- */

/* OA slot 01 */
.oa--1 .account-drawer__section:has(#account-drawer__connected--01),
.oa--2 .account-drawer__section:has(#account-drawer__connected--01),
.oa--3 .account-drawer__section:has(#account-drawer__connected--01) {
  display: block !important;
}

.oa--1 #account-drawer__connected--01,
.oa--2 #account-drawer__connected--01,
.oa--3 #account-drawer__connected--01 {
  display: flex !important;
}

/* OA slot 02 */
.oa--2 .account-drawer__section:has(#account-drawer__connected--02),
.oa--3 .account-drawer__section:has(#account-drawer__connected--02) {
  display: block !important;
}

.oa--2 #account-drawer__connected--02,
.oa--3 .account-drawer__connected--02 {
  display: flex !important;
}

/* OA slot 03 */
.oa--3 .account-drawer__section:has(#account-drawer__connected--03) {
  display: block !important;
}

.oa--3 #account-drawer__connected--03 {
  display: flex !important;
}

/* Institutional connected: expose add access + IP verification actions */
.institution--connected.capability--institutional .account__add-access {
  display: flex !important;
}

.institution--connected.capability--institutional .account__ip-verification {
  display: flex !important;
}

.ip--connected #account-drawer__connected--ip {
  display: flex !important;
}

.institution--connected .account-drawer__section--institution-connected {
  display: block !important;
}


/* ==========================================================================
   User menu + account menu (triggers + dropdown menus)
   ========================================================================== */

.account--logged-in .site-header__actions-item,
.account--anonymous.capability--institutional .site-header__actions-item {
  position: relative;
}

.site-header__actions-item:has(.user-menu__trigger) {
  position: relative;
}


/* Icon triggers (user / account / access) */
.user-menu__trigger,
.account-drawer__trigger--logged-in,
.account-drawer__trigger--access {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  height: 40px;
  width: 40px;

  padding-inline: var(--space-3);
  border: none;
  border-radius: var(--radius-button);

  background-color: transparent;
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.user-menu__trigger:hover,
.account-drawer__trigger--logged-in:hover,
.account-drawer__trigger--access:hover {
  color: var(--link-hover);
  background-color: var(--surface-2);
}

.user-menu__trigger i,
.account-drawer__trigger--logged-in i,
.account-drawer__trigger--access i {
  display: block;
  top: 1px;
  position: relative;
}

/* Dropdown menu placement constraints */
.menu--user,
.menu--account {
  right: 0;
  padding-bottom: 0;
  max-height: calc(100vh - 5rem);
}

/* User row at top of dropdown */
.user-menu__user-name,
.account-drawer__user-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);

  height: 40px;
  padding-inline: var(--space-4);

  border: none;
  border-radius: var(--radius-sm);

  background-color: transparent;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;

  justify-content: space-between;
  width: 100%;

  font-weight: 600;
}

/* Dropdown links */
.user-menu__item a,
.account-drawer__menu-item a {
  display: flex;
  align-items: center;
  gap: var(--space-4);

  height: 40px;
  padding-inline: var(--space-4);

  border-radius: 0;
  background-color: transparent;

  color: var(--text);
  text-decoration: none;
  white-space: nowrap;

  justify-content: flex-start;
  width: 100%;

  font-weight: 600;
}

.user-menu__item a:hover,
.account-drawer__menu-item a:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

.user-menu__item a i,
.account-drawer__menu-item a i {
  opacity: 0.8;
}

.user-menu__link--logout {
  border-top: var(--border-1);
}

/* Primary account trigger (pill button) */
.account-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);

  height: 32px;
  padding-inline: var(--space-3);

  border: none;
  border-radius: var(--radius-pill);

  background-color: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* Account dropdown sizing */
.site-header .menu.menu--account {
  max-width: 320px;
  padding: 0 !important;
}

/* Drawer/menus: primary action buttons */
.account-drawer__primary-action {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);

  height: 32px;
  padding-inline: var(--space-3);

  border: none;
  border-radius: var(--radius-button);

  background-color: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;

  width: fit-content;
  font-size: var(--text-sm);
}

.account-drawer__primary-action:hover {
  background-color: var(--primary-hover);
  color: var(--on-primary);
}

/* Drawer: supporting copy + inline actions */
.account-drawer__subheading {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: var(--leading-tight);
  font-weight: 400;
  margin-bottom: var(--space-1);
}

.account-drawer__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  height: 24px;
  padding-inline: var(--space-1);

  border: none;
  border-radius: var(--radius-sm);

  background-color: transparent;
  color: var(--primary);
  text-decoration: underline;

  line-height: 1;
  white-space: nowrap;

  width: fit-content;
  font-size: var(--text-xs);
  font-weight: 500;
}

/* NOTE: original had :hover:hover – preserved behaviour but simplified selector */
.account-drawer__action:hover {
  background-color: var(--surface-2);
  color: var(--primary-hover);
}


/* --------------------------------------------------------------------------
   Logged-in account icon trigger (institutional variant)
   -------------------------------------------------------------------------- */

.account--logged-in.capability--institutional .account-menu__trigger--logged-in {
  display: flex !important;
}

.account-menu__trigger--logged-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  height: 40px;
  width: 40px;

  padding-inline: var(--space-3);
  border: none;
  border-radius: var(--radius-pill);

  background-color: transparent;
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.account-menu__trigger--logged-in:hover {
  background-color: var(--surface-2);
  color: var(--link-hover);
}

.account-menu__trigger--logged-in i {
  display: block;
}

/* Divider line within account menus */
.menu--account .user-menu__list,
.account-drawer__menu {
  border-bottom: var(--border-1);
}

/* Secondary action button variant */
.account-drawer__action.button-secondary {
  background-color: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--text-muted);
  font-weight: var(--weight-medium);
  filter: brightness(1);
  transition: filter var(--dur-3) var(--ease-standard);
}

.account-drawer__action.button-secondary:hover {
  filter: brightness(0.95);
}

/* Drawer: user links list styling */
#account-drawer__user-links {
  padding: 0;
}

#account-drawer__user-links .account-drawer__user-name {
  border-radius: 0;
}

#account-drawer__user-links .account-drawer__menu-link {
  font-size: var(--text-sm);
}

#account-drawer__user-links .account-drawer__menu-item:not(:last-of-type) {
  border-bottom: var(--border-1);
}

/* Drawer: logout button */
.account-drawer__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  height: 32px;
  padding-inline: var(--space-3);

  border: none;
  border-radius: var(--radius-md);

  background-color: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;

  width: fit-content;
  font-size: var(--text-sm);
}

/* Access trigger fits content (pill-ish) */
.account-drawer__trigger--access {
  width: fit-content;
}

/* Institutional icon */
.institute__icon {
  width: 36px;
  fill: currentColor;
  padding-left: var(--space-2);
  border-left: 1px solid var(--text-muted);
}

/* Disconnect button style */
.disconnect-button {
  border: 2px solid var(--primary);
  background-color: transparent;
  color: var(--link);
  font-weight: 500;
}


/* ==========================================================================
   Account drawer: sections + connection cards
   ========================================================================== */

.account-drawer__section {
  display: grid;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
  background-color: var(--surface);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-1);
}

.account-drawer__section:not(:last-child) {
  margin-bottom: var(--space-3);
}

.account-drawer__section>*:not(:last-child) {
  padding-bottom: var(--space-2);
}

.account-drawer__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.account-drawer__connection {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.account-drawer__text,
.account-drawer__connection-name {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.account-drawer__connection-meta {
  font-size: var(--text-xs);
}

.drawer__footer {
  gap: var(--space-1);
}

.menu-account__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  height: 32px;
  padding-inline: var(--space-3);

  border: none;
  border-radius: var(--radius-button);

  background-color: var(--primary);
  color: var(--on-primary);
  text-decoration: none;

  line-height: 1;
  white-space: nowrap;

  width: fit-content;
  font-size: var(--text-sm);
  font-weight: 400;
}

.menu-account__button:hover {
  background-color: var(--primary-hover);
  color: var(--surface);
}

/* Connected state: remove extra padding at bottom */
.account-drawer__section--institution-connected {
  padding-bottom: 0;
}


/* --------------------------------------------------------------------------
   Account drawer: connection logo + initials fallback
   -------------------------------------------------------------------------- */

.account-drawer__connection-logo {
  flex: 0 0 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  border-radius: var(--radius-sm);
}

.account-drawer__connection-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.account-drawer__connection-details {
  flex: 0 0 calc(100% - 48px);
}

.account-drawer__connection-initials {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;

  background: var(--surface-3);
}

/* Hide initials when an image exists (src is non-empty) */
.account-drawer__connection-logo img:not([src=""])+.account-drawer__connection-initials {
  display: none;
}


/* --------------------------------------------------------------------------
   Account drawer: theme swatches (connection avatars)
   -------------------------------------------------------------------------- */

.theme-1 {
  background: var(--theme-1); /* intentional hard-coded colour: avatar theme swatch */
  color: var(--theme-color);
}

.theme-2 {
  background: var(--theme-2);
  color: var(--theme-color);
}

.theme-3 {
  background: var(--theme-3);
  color: var(--theme-color);
}

.theme-4 {
  background: var(--theme-4);
  color: var(--theme-color);
}

.theme-5 {
  background: var(--theme-5);
  color: var(--theme-color);
}

.theme-6 {
  background: var(--theme-6);
  color: var(--theme-color);
}



/* ==========================================================
   GLOBAL NAV (drawer on mobile, inline on desktop)
   ========================================================== */

/* Reset lists inside the component */
.global-nav__list,
.global-nav__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Overlay (mobile only) */
.global-nav__overlay[hidden] {
  display: none;
}

.global-nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* TODO token missing: overlay backdrop */
  z-index: 60;
}

/* ----------------------------------------------------------
   Mobile: nav is a drawer
   ---------------------------------------------------------- */
.global-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: min(22rem, 86vw);
  height: 100dvh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 70;

  transform: translateX(-105%);
  transition: transform 220ms ease;

  display: flex;
  flex-direction: column;
}

[data-global-nav-root].is-nav-open .global-nav {
  transform: translateX(0);
}

.global-nav__drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
}

.global-nav__drawer-title {
  font-weight: 700;
}

.global-nav__drawer-close {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0.75rem;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
}

/* Scroll area */
.global-nav__list {
  padding: 0;
  overflow: auto;
}

/* Items */
.global-nav__item {}

/* Standalone link appearance in drawer */
.global-nav__item--standalone>.global-nav__link {
  font-weight: 500;
  padding: 0.75rem;
  background: var(--surface);
}

/* Links */

.global-nav__link {
  text-wrap: nowrap;
}

.global-nav__link,
.global-nav__links a {
  display: block;
  padding: 0.75rem;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}

.global-nav__links a {
  padding-inline-start: 2rem;
}

.global-nav__subdetails .global-nav__links a {
  padding-inline-start: 3rem;
}

.global-nav__link:hover,
.global-nav__links a:hover,
.global-nav__link:focus-visible,
.global-nav__links a:focus-visible {
  outline: none;
  background: var(--surface-2);
}

/* Details / accordions */
.global-nav__details,
.global-nav__subdetails {
  background: var(--surface);
  overflow: clip;
}


.global-nav__summary:hover,
.global-nav__subsummary:hover {
  background: var(--surface-2);
}

.global-nav__summary,
.global-nav__subsummary {
  padding: 0.75rem 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--dur-3) var(--ease-standard);
}

.global-nav__details[open]>.global-nav__summary,
.global-nav__subdetails[open]>.global-nav__subsummary {
  background: var(--surface-1);
}

.global-nav__summary i,
.global-nav__subsummary i {
  transform: rotate(0);
  transition: var(--dur-3) var(--ease-standard);
}

.global-nav__details[open]>.global-nav__summary i,
.global-nav__subdetails[open]>.global-nav__subsummary i {
  transform: rotate(180deg);
}

.global-nav__summary::-webkit-details-marker,
.global-nav__subsummary::-webkit-details-marker {
  display: none;
}

.global-nav__subsummary {
  padding-inline-start: 2rem;
}

.global-nav__dropdown {}

/* Mega grid: stacked on mobile */
.global-nav__mega-grid {
  display: grid;
}

/* Visibility helpers */

.site-header__toggle,
.global-nav__drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  margin-left: var(--space-1);
}

.site-header__toggle:hover,
.global-nav__drawer-close:hover {
  background: var(--surface-2);
}

/* ==========================================================================
   Responsive breakpoints (min-width)
   ========================================================================== */

/* Portrait tablet and up */
@media (min-width: 40rem) {
  .site-header__inner {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .site-header__logo {
    margin-right: 0;
  }

  .global-nav__drawer-head {
    padding: .75rem 1rem;
  }

  /* Hide the search toggle button */
  .site-header__search-toggle {
    display: none;
  }

  /* Force search form visible */
  .site-header__search {
    display: flex;
    position: static;
    inset: auto;
    width: auto;
    max-width: 32rem;
    align-items: center;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    flex-grow: 1;
  }

  /* Override overlay hidden state */
  .site-header__search[aria-hidden="true"] {
    display: flex;
  }

  .form-group--search input[type="search"] {
    width: 100%;
  }

  a.search__advanced {
    width: unset;
    margin-top: 0;
    height: 32px;
    margin-left: var(--space-2);
  }
}

/* Tablet and up */
@media (min-width: 48rem) {
  .site-header__inner {
    gap: 1rem;
    flex-wrap: nowrap;
  }

  /* Logo */
  .site-header__logo {
    max-width: 200px;
    max-height: 40px;
  }

  .site-header__logo img {
    height: 40px;
    max-width: 200px;
  }

  a.search__advanced {
    margin-top: 0;
    margin-left: var(--space-2);
  }
}

/* Tablet → small laptop band tweaks */
@media (min-width: 48rem) and (max-width: 64rem) {
  .site-header__inner {
    gap: 0.25rem;
    flex-wrap: nowrap;
  }

  .site-header__logo {
    max-width: 180px;
    max-height: 36px;
    margin-right: var(--space-2);
  }

  .site-header__logo img {
    height: 36px;
    max-width: 180px;
  }

  a.search__advanced {
    margin-top: 0;
    margin-left: var(--space-2);
    padding-inline: var(--space-2);
  }
}

/* Laptop and up */
@media (min-width: 64rem) {
  .site-header__logo {
    max-width: 220px;
    max-height: 44px;
    margin-right: auto;
  }

  .site-header__logo img {
    height: 44px;
    max-width: 220px;
  }
}

/* Desktop and up */
@media (min-width: 80rem) {
  .site-header {
    padding-block: var(--space-3);
  }

  .site-header__logo {
    max-width: 240px;
    max-height: 48px;
  }

  .site-header__logo img {
    height: 48px;
    max-width: 240px;
  }




  /* Desktop header regions */
  .site-header__nav,
  .site-header__actions,
  .site-header__search {
    display: flex;
    align-items: center;
  }


  /* Desktop: header lists inline */
  .site-header__nav-list,
  .site-header__actions-list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-header__actions-list {
    gap: var(--space-2);
  }

  /* Desktop: menu heading button alignment */
  .menu__heading-btn {
    padding-inline: 0;
  }

  /* Desktop: reduce indentation and restore radii on menu links */
  .site-header .menu__group .menu__list a,
  .site-header .menu .menu__list a {
    padding-left: var(--space-4);
    border-radius: var(--radius-sm) !important;
  }

  .site-header__nav {
    flex: 1;
  }

  /* Desktop: icon buttons use link colour */
  .site-header__search-toggle,
  .cart-link {
    color: var(--link);
  }

  .site-header__search-toggle:hover,
  .cart-link:hover {
    color: var(--link-hover);
  }

  /* Desktop: nav items */
  .site-header__nav-item {
    position: relative;
  }


  /* Desktop: nav controls become smaller + link-coloured */
  .site-header__nav-btn,
  .site-header__nav-item a,
  a.search__advanced {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    height: 32px;
    padding-inline: var(--space-3);

    border: none;
    border-radius: var(--radius-sm);

    background-color: transparent;
    color: var(--link);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
  }

  .site-header :is(.site-header__nav-btn, .site-header__nav-item a, a.search__advanced):hover {
    background-color: var(--surface-2);
    color: var(--link-hover);
  }

  /* Desktop: dropdown link colours */
  .user-menu__item a,
  .account-drawer__menu-item a {
    color: var(--link);
  }

  .user-menu__item a:hover,
  .account-drawer__menu-item a:hover {
    color: var(--link-hover);
  }
}


/* ----------------------------------------------------------
   Desktop ≥ 80rem: nav is inline, dropdown menus
   ---------------------------------------------------------- */
@media (min-width: 80rem) {

  /* Hide the drawer header on desktop (nav becomes inline) */
  .global-nav__drawer-head {
    display: none;
  }

  /* nav becomes part of header flow */
  .global-nav {
    position: static;
    transform: none;
    transition: none;

    width: auto;
    height: auto;
    border-right: 0;
    background: transparent;

    display: block;
  }

  .global-nav__list {
    padding: 0;
    overflow: visible;

    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .global-nav__item {
    margin-bottom: 0;
  }

  /* Top-level details act as dropdown triggers */
  .global-nav__details {
    position: relative;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }

  .global-nav__item--mega .global-nav__details {
    position: unset;
  }

  .global-nav__summary {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--link);
    gap: var(--space-2);
    text-wrap: nowrap;
  }

  .global-nav__summary i {
    font-size: var(--text-md);
  }

  .global-nav__details:hover>.global-nav__summary,
  .global-nav__details:focus-within>.global-nav__summary {
    background: var(--surface-2);
    color: var(--link-hover);
  }

  /* Dropdowns */
  .global-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;

    display: none;
    background: var(--surface);
    border: var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 20;
  }

  .global-nav__subdetails[open]>.global-nav__subsummary {
    background: unset;
    pointer-events: none;
  }

  details[open]>.global-nav__dropdown {
    display: block;
  }

  /* Full-width mega dropdown */
  .global-nav__dropdown--mega {
    padding: var(--space-4) var(--space-8);
    width: 100vw;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .global-nav__subsummary i {
    display: none;
  }

  .global-nav__mega-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
  }

  /* Mega sections become “static” columns (no accordion behaviour needed visually) */
  .global-nav__subdetails {
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .global-nav__subsummary {
    cursor: default;
    padding:  0.5rem 0.75rem;
    color: var(--text-strong);
    font-weight: var(--weight-medium);
    font-size: var(--text-md);
  }

  .global-nav__subdetails .global-nav__links a {
    padding: 0.5rem 0.75rem;
    color: var(--link);
    border-radius: var(--radius-sm);
  }
  .global-nav__subdetails .global-nav__links a:hover {
    color: var(--link-hover);
  }

  /* Ensure links show even if details isn't open */
  .global-nav__subdetails>.global-nav__links {
    display: block;
    padding: 0;
  }

  .site-header__toggle {
    display: none;
  }

  .global-nav__item--standalone>.global-nav__link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--link);
  }

  .global-nav__item--standalone>.global-nav__link:hover {
    color: var(--link-hover);
  }




}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  width: 100%;
  margin-top: auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;
  border-top: var(--border-1);
}



/* --------------------------------------------------------------------------
   Footer: top row (mobile stacked)
   -------------------------------------------------------------------------- */

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1rem;
}

.site-footer__org {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.site-footer__org-logo {
  display: inline-flex;
  align-items: center;
  max-width: 348px;
  text-decoration: none;
}

.site-footer__org-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-footer__contact {
  margin: 0;
  font-style: normal;
  display: grid;
  gap: 0.25rem;
}

.site-footer__contact-line {
  margin: 0;
  line-height: 1.4;
}

.site-footer__contact-label {
  font-weight: 600;
  margin-right: 0.125rem;
}

.site-footer__contact-link {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.site-footer__contact-link:hover,
.site-footer__contact-link:focus-visible {
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Footer: social links
   -------------------------------------------------------------------------- */

.site-footer__social {
  justify-self: start;
}

.site-footer__social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.25rem;
  height: 2.25rem;

  border-radius: 999px;
  text-decoration: none;

  color: var(--text-muted);
  border: var(--border-1);

  transition:
    background-color var(--dur-3) var(--ease-standard),
    color var(--dur-3) var(--ease-standard),
    border-color var(--dur-3) var(--ease-standard),
    transform var(--dur-3) var(--ease-standard);
}

.site-footer__social-link:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.site-footer__social-link:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 2px;
}

.site-footer__social-link i {
  font-size: 1rem;
  line-height: 1;
}


/* --------------------------------------------------------------------------
   Footer: divider
   -------------------------------------------------------------------------- */

.site-footer__divider {
  height: 1px;
  background: color-mix(in srgb, var(--text-muted) 20%, transparent);
}


/* --------------------------------------------------------------------------
   Footer: bottom row (mobile centred)
   -------------------------------------------------------------------------- */

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}

.site-footer__bottom-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.site-footer p {
  font-size: var(--text-xs);
}

.site-footer__copyright {
  margin: 0;
  white-space: normal;
}

.site-footer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.site-footer__link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Footer: “Powered by”
   -------------------------------------------------------------------------- */

.site-footer__powered {
  margin: 0;
}

.site-footer__powered-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.site-footer__powered-link:hover,
.site-footer__powered-link:focus-visible {
  text-decoration: underline;
}

.site-footer__powered-text {
  font-weight: 500;
}

.site-footer__powered-icon {
  display: block;
  width: auto;
  height: 16px;
  position: relative;
  top: -1px;
  filter: grayscale(100%) brightness(0.8);
  transition: filter var(--dur-3) var(--ease-standard);
}

.site-footer__powered-link:hover .site-footer__powered-icon,
.site-footer__powered-link:focus-visible .site-footer__powered-icon {
  filter: none;
}

/* External link indicator (footer only) */
.site-footer__bottom [target="_blank"]::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  /* solid style */
  content: "\f08e";
  /* fa-up-right-from-square */
  margin-left: 0.05rem;
  font-size: 0.85em;
  vertical-align: text-top;
  display: inline-block;
}


/* ==========================================================================
   Footer breakpoints (min-width)
   ========================================================================== */

/* Small+: bottom row becomes two-column (left cluster + powered by) */
@media (min-width: 40rem) {
  .site-footer__inner {
    padding: 1.25rem 0;
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
  }

  .site-footer__bottom-left {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /*.site-footer__copyright {
    white-space: nowrap;
  }*/

  .site-footer__nav {
    justify-content: flex-start;
    gap: 0.75rem 1rem;
  }
}

/* Medium+: top row becomes two columns (org left, socials right aligned) */
@media (min-width: 48rem) {
  .site-footer__top {
    grid-template-columns: minmax(16rem, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
  }

  .site-footer__social {
    justify-self: end;
    width: 220px;
  }

  .site-footer__social-list {
    justify-content: flex-end;
  }
}