/* ===========================
   Juliana — Header styles
   =========================== */

/*
 * P-header / G-HEAD vertex.
 * Charcoal bg · centred Playfair-italic wordmark · Inter nav links.
 * Desktop (≥1024): inline nav split left/right, wordmark true-centred.
 * Mobile (<1024): wordmark + hamburger (WP overlay handles panel).
 * Active page state, hairline bottom border, skip-link.
 */

/* ===========================
   Header styles
   =========================== */

.j-header {
  /* color */
  background-color: var(--c-base);

  /* box model */
  width: 100%;

}

/* NOTE: the original sticky-header rule sat on .j-header but never worked —
 * the template-part wrapper boxed it in, so the site has always shipped a
 * non-sticky header and the client approved that behavior. To enable a
 * sticky header, apply it to the wrapper instead:
 * header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } */

/* WordPress injects margin-block-start: blockGap (48px) on non-first children
 * of layout containers. Zero it for all direct header children. */
.j-header > * {
  /* box model */
  margin-block: 0;

}

.j-header__inner {
  /* box model */
  padding-block: 0;
  min-height: var(--sp-44); /* WCAG 44px touch target */

  /* display */
  display: flex;

  /* flexbox */
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);

}

/* Equal-space centering: left/right navs each take 1fr */
.j-header__inner .j-nav--left {
  /* flexbox */
  flex: 1;
  justify-content: flex-start;

}

.j-header__inner .j-wordmark,
.j-header__inner .wp-block-site-title {
  /* flexbox */
  flex: 0 0 auto;

}

.j-header__inner .j-nav--right {
  /* display */
  display: flex;

  /* flexbox */
  flex: 1;
  justify-content: flex-end;

}


/* ===========================
   Wordmark
   =========================== */

.j-wordmark,
.j-header .wp-block-site-title a,
.j-header .wp-site-blocks .wp-block-site-title a {
  /* text */
  font-family: var(--font-head) !important;
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: var(--fs-wordmark);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  /* color */
  color: var(--c-ink) !important;

}


/* ===========================
   Navigation styles
   =========================== */

.j-nav a,
.j-header .wp-block-navigation a {
  /* text */
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  text-decoration: none;

  /* color */
  color: var(--c-ink);

  /* box model */
  padding: 0;
  min-height: 0;

  /* display */
  display: inline-flex;

  /* flexbox */
  align-items: center;

  /* transition */
  transition: color 0.2s ease;

}

.j-nav a:hover,
.j-header .wp-block-navigation a:hover {
  /* color */
  color: var(--c-accent-text);

}

/* Active page — oxblood underline */
.j-nav a[aria-current="page"],
.j-nav a.current-menu-item,
.j-header .wp-block-navigation a[aria-current="page"] {
  /* text */
  text-decoration: none;

  /* color */
  color: var(--c-accent-text);

  /* border */
  border-bottom: 2px solid var(--c-accent);

}


/* ===========================
   Header border
   =========================== */

/* Hairline rule below header */
.j-header .j-rule,
.j-header hr {
  /* color */
  border: 0;

  /* box model */
  margin: 0;
  width: 100%;

  /* border */
  border-top: 1px solid var(--c-hairline);

}


/* ===========================
   Header styles - Media Queries
   =========================== */

/* Mobile defaults — left nav absent, wordmark scaled, WP nav inline links hidden.
 * Use .j-nav.j-nav--left (specificity 0-2-0) to beat WP's body .is-layout-flex (0-1-1). */
.j-nav.j-nav--left {
  /* display */
  display: none;

}

.j-nav--right .wp-block-navigation__container {
  /* display */
  display: none !important; /* overrides WP Navigation block inline display */

}

.j-wordmark,
.j-header .wp-block-site-title a {
  /* text */
  font-size: calc(var(--fs-wordmark) * 0.8);

}

.j-header__inner {
  /* box model */
  min-height: var(--sp-44); /* WCAG 44px touch target */

}

@media (min-width: 1024px) {
  /* Desktop: show inline left nav */
  .j-header__inner .j-nav--left {
    /* display */
    display: flex;

  }

  .j-nav--left .wp-block-navigation__container,
  .j-nav--right .wp-block-navigation__container {
    /* display */
    display: flex !important; /* overrides WP Navigation block inline display */

  }

  /* Split the single Primary menu around the wordmark on desktop:
   * left nav shows items 1-2, right nav shows items 3+.
   * (Mobile burger is unaffected — these rules only apply >=1024px.) */
  .j-nav--left .wp-block-navigation__container > *:nth-child(n+3) {
    /* display */
    display: none;

  }

  .j-nav--right .wp-block-navigation__container > *:nth-child(-n+2) {
    /* display */
    display: none;

  }

  .j-nav--right .wp-block-navigation__responsive-container-open {
    /* display */
    display: none !important; /* overrides WP Navigation block inline display */

  }

  .j-wordmark,
  .j-header .wp-block-site-title a {
    /* text */
    font-size: var(--fs-wordmark);

  }

}


/* ===========================
   Mobile nav overlay — scoped to <1024px so desktop inline nav is unaffected
   =========================== */

@media (max-width: 1023px) {

  /* ── Hamburger open button ── */
  .j-nav--right .wp-block-navigation__responsive-container-open {
    /* display */
    display: flex;

    /* flexbox */
    align-items: center;
    justify-content: center;

    /* box model */
    padding: var(--sp-4);
    min-width: var(--sp-44);
    min-height: var(--sp-44);

    /* color */
    background: none;

    /* border */
    border: none;

    /* other */
    cursor: pointer;

  }

  .j-nav--right .wp-block-navigation__responsive-container-open svg path {
    /* color — fill the burger lines with ink colour */
    fill: var(--c-ink);

  }

  .j-nav--right .wp-block-navigation__responsive-container-open:hover svg path {
    /* color */
    fill: var(--c-accent);

  }

  /* ── Overlay panel background ──
     WP's rule is specificity 0-5-0:
       .wp-block-navigation:not(.has-background)
         .wp-block-navigation__responsive-container.is-menu-open
         :not(.disable-default-overlay)
     We mirror it but add .j-nav--right to reach 0-6-0 and win. */
  .wp-block-navigation.j-nav--right:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    /* color */
    background-color: var(--c-base);

  }

  /* Center the dialog content vertically inside the full-screen overlay */
  .j-nav--right .wp-block-navigation__responsive-dialog {
    /* display */
    display: flex;

    /* flexbox */
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* box model */
    min-height: 100vh;
    padding: var(--sp-48) var(--sp-32);

  }

  /* ── Nav links list ── */
  .j-nav--right .wp-block-navigation__responsive-container .wp-block-navigation__container {
    /* display */
    display: flex !important;

    /* flexbox */
    flex-direction: column;
    align-items: center;
    gap: var(--sp-32);

    /* box model */
    padding: 0;

    /* other */
    list-style: none;

  }

  /* ── Individual link text ──
     WP's highest-specificity colour rule on the link content is 0-3-0:
       .wp-block-navigation .wp-block-navigation-item__content
                            .wp-block-navigation-item__content
     We scope to .j-nav--right + container + content class → 0-3-0,
     but our stylesheet loads after WP's so same-specificity wins by source order. */
  .j-nav--right .wp-block-navigation__responsive-container
  .wp-block-navigation-item__content {
    /* text */
    font-family: var(--font-head);
    font-style: italic;
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    text-decoration: none;
    line-height: 1.1;

    /* color */
    color: var(--c-ink);

    /* transition */
    transition: color 0.2s ease;

  }

  .j-nav--right .wp-block-navigation__responsive-container
  .wp-block-navigation-item:hover .wp-block-navigation-item__content,
  .j-nav--right .wp-block-navigation__responsive-container
  .wp-block-navigation-item__content:hover {
    /* color */
    color: var(--c-accent-text);

  }

  .j-nav--right .wp-block-navigation__responsive-container
  .wp-block-navigation-item__content[aria-current="page"] {
    /* color */
    color: var(--c-accent-text);

  }

  /* ── Close (×) button ── */
  .j-nav--right .wp-block-navigation__responsive-container-close {
    /* display */
    display: flex;

    /* flexbox */
    align-items: center;
    justify-content: center;

    /* box model */
    padding: var(--sp-8);
    min-width: var(--sp-44);
    min-height: var(--sp-44);

    /* color */
    background: none;

    /* border */
    border: none;

    /* other */
    cursor: pointer;

  }

  .j-nav--right .wp-block-navigation__responsive-container-close svg path {
    /* color */
    fill: var(--c-ink);

  }

  .j-nav--right .wp-block-navigation__responsive-container-close:hover svg path {
    /* color */
    fill: var(--c-accent);

  }

}