/*
 * Site shell
 *
 * Compact header: widths below 1152px.
 * Full navigation: 1152px and above.
 *
 * This file is the authoritative source for the site header.
 */

.site-header {
  position: relative;
  z-index: 30;
  height: var(--header);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  width: 100%;
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);

  display: flex;
  align-items: center;
  gap: var(--space-tight);
}

.site-brand {
  flex: 0 0 auto;
  color: var(--foreground);
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
}

.site-brand__short {
  display: inline !important;
  font-size: 1.25rem;
  line-height: 2rem;
}

.site-brand__full {
  display: none !important;
}

.site-nav {
  display: none !important;
}

.site-header__actions {
  min-width: 0;
  margin-left: auto;

  display: flex;
  align-items: center;
  gap: var(--space-tight);
}

.site-header__actions .button {
  flex: 0 0 auto;
}

.menu-trigger {
  display: grid !important;
  flex: 0 0 2rem;

  width: 2rem;
  height: 2rem;
  padding: 0;

  place-items: center;

  color: var(--foreground);
  background: transparent;
  border: 0;
  cursor: pointer;
}

/*
 * Full header.
 * 1152px is the first width where brand + navigation + CTA
 * fit without collision at the current typography and spacing.
 */
@media (min-width: 72rem) {
  .site-header__inner {
    display: grid;
    grid-template-columns:
      minmax(12rem, 1fr)
      auto
      minmax(12rem, 1fr);

    align-items: center;
    gap: var(--space-group);
  }

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

  .site-brand__short {
    display: none !important;
  }

  .site-brand__full {
    display: inline !important;
    font-size: 1rem;
    line-height: 1.75rem;
    white-space: nowrap;
  }

  .site-nav {
    position: static !important;
    left: auto !important;
    transform: none !important;

    display: flex !important;
    justify-self: center;

    align-items: center;
    justify-content: center;
    gap: var(--space-group);

    margin: 0 !important;
    white-space: nowrap;
  }

  .site-nav a {
    color: var(--foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    text-decoration: none;
    white-space: nowrap;
  }

  .site-header__actions {
    justify-self: end;
    margin-left: 0;
  }

  .menu-trigger {
    display: none !important;
  }
}

/* Desktop navigation: centered independently from brand and CTA. */
@media (min-width: 72rem) {
  .site-header__inner {
    position: relative;
    display: flex !important;
    align-items: center;
  }

  .site-nav {
    position: absolute !important;
    left: 50% !important;
    top: 50%;
    transform: translate(-50%, -50%) !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-group);

    margin: 0 !important;
    white-space: nowrap;
  }

  .brand,
  .site-brand {
    flex: 0 0 auto;
    margin-right: auto;
  }

  .site-header__action,
  .site-header__actions {
    flex: 0 0 auto;
    margin-left: auto !important;
  }

  .menu-toggle,
  .menu-trigger {
    display: none !important;
  }
}

/* UTILITY BAR START */
/*
 * Functional utility bar.
 * Deliberately quieter than the primary CTA.
 */



@supports (color: color-mix(in oklch, red, black)) {
  
}

.utility-bar__inner {
  min-height: 2rem;

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

  gap: var(--space-element);
}

.utility-bar__school,
.utility-bar__language,
.utility-bar__language a,
.utility-bar__language span {
  font-size: 0.75rem;
  line-height: 1rem;
}

.utility-bar__school {
  color: var(--muted-foreground);

  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;

  white-space: nowrap;
}

.utility-bar__school:hover {
  color: var(--foreground);
}

.utility-bar__language {
  display: flex;
  align-items: center;
  gap: var(--space-tight);

  color: var(--muted-foreground);

  white-space: nowrap;
}

.utility-bar__language a {
  color: var(--muted-foreground);
  text-decoration: none;
}

.utility-bar__language a:hover {
  color: var(--foreground);
}

.utility-bar__language a[aria-current="page"] {
  color: var(--primary-emphasis);
  font-weight: 600;
}

@media (max-width: 30rem) {
  .utility-bar__label {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
  }
}
/* UTILITY BAR END */

/* Utility bar */
.utility-bar {
    min-height: 2rem;
    background: transparent;
    border-bottom: 1px solid var(--border);
}


.utility-bar__language {
    text-transform: uppercase;
}