/* ==========================================================================
   LAYOUT — header, navigation, footer
   Loaded on every page. Built from the header/footer in both designs.
   ========================================================================== */

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding-block: 14px;
}

/* --- Branding ----------------------------------------------------------- */

/* The emblem carries the wording, so it stands alone — no wordmark beside
   it — and can therefore be set larger than in the design. */

.site-branding { display: flex; align-items: center; min-width: 0; }

.site-branding__logo {
  display: block;
  width: 210px;
  height: 64px;
  flex: none;
}
.site-branding__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

@media (max-width: 600px) {
  .site-branding__logo { width: 150px; height: 48px; }
}

/* --- Primary nav -------------------------------------------------------- */

.primary-nav { display: flex; align-items: center; gap: 18px; }

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;   /* "News & Events" must not wrap onto two lines */
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a { color: var(--navy-link); }

/* The persistent Join button sits at the end of the nav, as in the designs.
   Selectors are qualified with .primary-nav so they outweigh the link colour
   above — otherwise the label inherits ink rather than white. */
.primary-nav .nav-join {
  background: var(--navy);
  color: var(--on-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 18px;
  white-space: nowrap;
}
.primary-nav .nav-join:hover,
.primary-nav .nav-join:focus-visible { background: var(--navy-dark); color: var(--on-dark); }

/* Eight top-level items plus the button is a tight fit. Tighten before
   collapsing rather than letting the row overflow. */
@media (max-width: 1180px) {
  .primary-nav, .primary-nav ul { gap: 13px; }
  .primary-nav a { font-size: 11px; letter-spacing: .04em; }
  .primary-nav .nav-join { font-size: 11px; padding: 8px 13px; }
  .site-branding__logo { width: 168px; height: 54px; }
}

/* Dropdowns — two levels, square panel to match the design language. */
.primary-nav li { position: relative; }
.primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--sp-2) 0;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: flex; }
.primary-nav .sub-menu a {
  display: block;
  padding: 9px 18px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: none;
}
.primary-nav .sub-menu a:hover { background: var(--cream); }

/* --- Burger ------------------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: var(--sp-4) var(--gutter);
    max-height: 75vh;
    overflow-y: auto;
  }
  .primary-nav.is-open { display: flex; }

  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .primary-nav > ul { width: 100%; }

  /* Undo the desktop tightening — there is room in the panel. */
  .primary-nav a { font-size: 13px; letter-spacing: .06em; }
  .primary-nav .nav-join { font-size: 12px; padding: 10px 18px; }

  .primary-nav .sub-menu {
    display: flex;
    position: static;
    border: 0;
    padding: var(--sp-2) 0 0 var(--sp-3);
    gap: var(--sp-2);
  }
  .primary-nav .sub-menu a { padding: 0; }

  .nav-join { align-self: flex-start; }
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--on-dark-mut);
  border-top: 1px solid var(--rule-navy);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 36px;
  padding-top: 44px;
  padding-bottom: 40px;
}

/* The Master's emblem is a crest rather than a wordmark, so the box is
   squarer than the header's. */
.site-footer__brand { display: flex; align-items: center; margin-bottom: 16px; }
.site-footer__logo { width: 120px; height: 84px; flex: none; }
.site-footer__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

.site-footer__blurb {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-dark-soft);
  max-width: 280px;
  margin: 0;
}

.site-footer__col { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.site-footer__col h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin: 0 0 3px;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.site-footer a { color: var(--on-dark-mut); }
.site-footer a:hover { color: var(--on-dark); }

/* Not in the supplied designs — a minimal legal strip, kept in the same
   language. Remove the markup in template-parts/layout/footer.php if unwanted. */
.site-footer__bottom {
  border-top: 1px solid var(--rule-navy);
  padding-block: 18px;
  font-size: 12px;
  color: var(--on-dark-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.site-footer__bottom ul { display: flex; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.site-footer__bottom a { color: var(--on-dark-faint); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom a:hover { color: var(--on-dark); }

@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } }