/* ============================================================
   HEADER — layout corrections
   ------------------------------------------------------------
   Loaded AFTER global.css as a thin override layer.

   The header's original arrangement is kept exactly: two links,
   the logo, two links, socials at the far left, hamburger at the
   far right. Nothing here changes the type, the colours or the
   slide-in panel. It only fixes the geometry:

     - the logo is now mathematically centred;
     - the links can no longer run into the socials or the
       hamburger at any window size;
     - hovering a link no longer reflows the bar.
   ============================================================ */

/* `100vw` is wider than the viewport whenever a scrollbar is
   present, which pushes the page sideways. */
.header {
  width: 100%;
  padding: 0.55rem 0;            /* was 0.9vh: height followed the window */
}

/* Scrolled, the bar earns a hairline: without one the small type sits on the
   page with nothing separating it from the content sliding underneath. */
.header.scrolled {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.header .nav-menu {
  position: relative;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

/* ------------------------------------------------------------
   The bar

   Five columns for the five children: link, link, logo, link,
   link. The four link columns are equal `1fr`, so the logo
   column sits dead centre no matter how long the words are --
   the old flex row centred the row as a whole, which left the
   logo off-centre because MINISTRIES + GIVE is wider than
   STREAM + CONTACT.

   The side margins reserve the space the socials and the
   hamburger are positioned into, so the two can never collide.
   The old `gap: 10vh` was measured against viewport HEIGHT: on
   a tall window the links spread far enough sideways to run
   underneath both.
   ------------------------------------------------------------ */
.header .nav-list {
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 0;

  /* The gap between the links is whatever is left after the row is placed,
     so it is set by capping the row's width rather than by a `gap`: the four
     columns have to stay equal or the logo stops being centred. Narrower row,
     tighter gaps. The space either side is still clear for the socials and
     the hamburger. */
  max-width: min(52rem, 58vw);
  margin-inline: auto;
}

/* Retuned down with the type: at 68px the mark was sized to stand beside
   27px words, and beside 15px ones it dominated the bar. */
.header .logo-img {
  width: clamp(42px, 4vw, 56px);
}

.header .logo-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------
   Links

   Small, tracked capitals. The old size was `3vh` -- measured
   against viewport HEIGHT, so the words grew to 39-41px on a
   tall window and no amount of width could hold them. A rem
   scale with a vw ceiling keeps them the same size whatever the
   window does, and small caps with letter-spacing is what makes
   a navigation read as navigation rather than as headings.
   ------------------------------------------------------------ */
.header .nav-item a {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35rem;

  font-size: clamp(0.8125rem, 1.05vw, 1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  transition: color .15s ease;
}

/* The link used to grow from 3vh to 3.5vh on hover, so pointing at
   any of them resized it and shoved its neighbours sideways. The
   size is fixed now and the hover is carried by colour plus a rule
   that scales in -- a transform, so it cannot affect layout. */
.header .nav-item a:hover {
  font-size: clamp(0.8125rem, 1.05vw, 1rem);
  color: #ff820d;
}

.header .nav-item a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #ff820d;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
}

.header .nav-item a:hover::after {
  transform: scaleX(1);
}

.header .nav-item a:focus-visible {
  outline: 2px solid #ff820d;
  outline-offset: 4px;
}

/* ------------------------------------------------------------
   Socials — far left, vertically centred

   `.icons-white` is `position: absolute`, which collapsed every
   <li> to zero size and left the row unable to centre itself
   against the bar. The images are put back in the flow here
   (header only -- the footer and the mobile overlay still use
   the original rule).
   ------------------------------------------------------------ */
.header .social-media-header-D {
  top: 50%;
  left: clamp(1rem, 3vw, 2.5rem);
  transform: translateY(-50%);
  align-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
  margin: 0;
  padding: 0;
}

.header .social-media-header-D li {
  display: flex;
  align-items: center;

  /* Each icon rises into place a beat after the one before it, so the row
     reads left to right on arrival rather than appearing all at once. */
  animation: hdrSocialIn .5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.header .social-media-header-D li:nth-child(1) { animation-delay: .35s; }
.header .social-media-header-D li:nth-child(2) { animation-delay: .45s; }
.header .social-media-header-D li:nth-child(3) { animation-delay: .55s; }

@keyframes hdrSocialIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The link is what moves, so the rule under it can stay put. */
.header .social-media-header-D li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-bottom: 5px;
  transition: transform .18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.header .social-media-header-D li a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #ff820d;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.header .social-media-header-D li a:hover {
  transform: translateY(-2px);
}

.header .social-media-header-D li a:hover::after {
  transform: scaleX(1);
}

.header .social-media-header-D li a:focus-visible {
  outline: 2px solid #ff820d;
  outline-offset: 4px;
}

.header .social-media-header-D .icons-white {
  position: static;
  width: auto;
  height: clamp(16px, 1.35vw, 20px);   /* was 13-16px */
  display: block;
  opacity: 0.72;
  transition: opacity .18s ease;
}

.header .social-media-header-D li a:hover .icons-white,
.header .social-media-header-D li a:focus-visible .icons-white {
  opacity: 1;
}

/* The legacy rule scaled the whole <li> on hover, which nudged its
   neighbours; the transform is on the link now and moves nothing else. */
.header .social-media-header-D li:hover {
  transform: none;
}

/* ------------------------------------------------------------
   Sections hamburger — far right, mirroring the socials
   ------------------------------------------------------------ */
.header .page-menu-toggle {
  right: clamp(1rem, 3vw, 2.5rem);
  margin: 0;
}

/* ============================================================
   International Typographic detailing
   ------------------------------------------------------------
   The arrangement is unchanged -- logo centred, two links each
   side, socials left, sections hamburger right. What is added
   is the structure: straight rules that show where the bar's
   zones begin and end, and square corners on everything that
   was still a pill or a rounded panel.
   ============================================================ */

/* The bar always sits on a rule, not only once the page has been
   scrolled. Faint over the hero, solid over content. */
.header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.header.scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* Two vertical hairlines frame the link row, so the bar reads as
   three fields -- socials, navigation, sections -- rather than as
   things floating at the same height. */
.header .nav-list {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  padding-inline: clamp(1rem, 2.5vw, 2.25rem);
}

/* ------------------------------------------------------------
   Hamburger — square bars
   ------------------------------------------------------------ */
.header .page-menu-toggle .bar,
.menu-toggle .bar {
  border-radius: 0;
}

/* ============================================================
   Slide-in sections panel

   Was a rounded-cornered drawer with a deep drop shadow, gold
   separators and pill-shaped links that grew from 2vh to 2.3vh
   on hover -- so pointing at one pushed the others down.
   ============================================================ */
.page-menu {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  /* An accent rule across the top edge, the way the stream notice is marked.
     It gives the drawer a top to read from, which a plain dark panel sliding
     over a dark page did not have. */
  border-top: 3px solid #ff820d;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
  background: #1b1b1b;

  /* `max-width: 20vw` made a very tall, very narrow strip on a wide
     monitor -- 380px is a drawer. */
  width: min(86vw, 380px);
  max-width: none;
  padding: clamp(2rem, 5vh, 3.25rem) clamp(1.5rem, 3vw, 2.25rem);
}

/* Hairline rows in place of the gold separators, and a rule above
   the first one so the list reads as a set. */
.page-menu li {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 0;
  padding-top: 0;
}

.page-menu li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 0;
  padding-top: 0;
}

.page-menu li:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.page-menu a {
  display: block;
  padding: 1.15rem 0;
  border-radius: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color .15s ease, padding-left .18s ease;
}

/* The old hover grew the type, which moved every row under it. */
.page-menu a:hover,
.page-menu a.active {
  background: transparent;
  font-size: 0.9375rem;
  color: #ff820d;
  padding-left: 0.5rem;
}

.page-menu a:focus-visible {
  outline: 2px solid #ff820d;
  outline-offset: 2px;
}

.page-menu .close-btn {
  align-self: flex-end;
  margin: 0 0 clamp(1.5rem, 3vh, 2.25rem);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  color: #fff;
  font-family: 'Sofia Pro', sans-serif;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.page-menu .close-btn:hover {
  background: #fff;
  color: #000;
}

.page-menu .close-btn:focus-visible {
  outline: 2px solid #ff820d;
  outline-offset: 2px;
}

/* ============================================================
   Mobile overlay — the same rules, centred as it already was
   ============================================================ */
@media (max-width: 768px) {

  /* The overlay is `100vw` and the menu inside it is `100%`. Those are not
     the same number whenever a classic scrollbar is present -- 390 against
     375 -- so the menu was centred in a box 15px narrower than the one it
     sat in, and everything in it sat half that off-centre. Pinning both to
     the same edges makes them the same box whatever the scrollbar does.
     Same `100vw` trap as the header and the footer had. */
  .header-toggle,
  .header-toggle .nav-menu-toggle {
    left: 0;
    right: 0;
    width: auto;
  }

  /* Preflight is off in this project, so the list is content-box: the
     padding below was being added OUTSIDE its width, making the <ul> wider
     than the screen and pushing every row 16px right of the page's centre.
     The overlay looked subtly off-centre because it was. */
  .header-toggle .nav-list-toggle,
  .header-toggle .nav-list-toggle * {
    box-sizing: border-box;
  }

  .header-toggle .nav-list-toggle {
    gap: 0;
    width: 100%;
    padding-inline: clamp(1.25rem, 6vw, 2.5rem);
  }

  .header-toggle .nav-item-toggle:not(.nav-item-toggle-img):not(.nav-item-toggle-lang) {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .header-toggle
    .nav-item-toggle:not(.nav-item-toggle-img):not(.nav-item-toggle-lang):first-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .header-toggle .nav-item-toggle:not(.nav-item-toggle-img):not(.nav-item-toggle-lang) a {
    display: block;
    width: 100%;
    padding: 0.9rem 0;
  }

  /* The wordmark and the social row are not list rows. */
  .header-toggle .nav-item-toggle-img,
  .header-toggle .nav-item-toggle-lang {
    border: 0;
  }
}

/* ============================================================
   Motion
   ------------------------------------------------------------
   Everything the header animates is decoration -- the icons'
   entrance, the lift and the rules that wipe in. None of it
   carries meaning, so all of it comes off for a reader who has
   asked for reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  .header .social-media-header-D li {
    animation: none;
  }

  .header,
  .header .nav-item a,
  .header .nav-item a::after,
  .header .social-media-header-D li a,
  .header .social-media-header-D li a::after,
  .header .social-media-header-D .icons-white,
  .header .page-menu-toggle .bar,
  .page-menu a,
  .page-menu .close-btn {
    transition: none;
  }

  .header .social-media-header-D li a:hover {
    transform: none;
  }
}