/*
 * G1 Header / megamenu and G2 Footer, from the design.
 *
 * Both globals sit OUTSIDE the colourway system — they are fixed brand chrome,
 * always Primary Purple with white type, so they name brand tokens directly
 * where every module must not.
 */

/* ── G1 · Header ──────────────────────────────────────────────────────── */

.ema-header {
  position: relative;
  background: var(--c-primary-purple);
  color: var(--c-white);
  /* The bright purple key-line along the bottom of the bar (BugHerd #12, #15).
     ONLY WHILE A MENU IS OPEN (#45), at the same weight as a button's key-line.
     An inset shadow rather than a border, so showing and hiding it never moves
     the page by a pixel. */
  box-shadow: inset 0 0 0 var(--c-bright-purple);
  transition: box-shadow .2s ease;
}
.ema-header.is-menu-open { box-shadow: inset 0 calc(-1 * var(--border-w)) 0 var(--c-bright-purple); }

.ema-header__bar {
  display: flex; align-items: center; gap: 1.5rem;
  max-width: var(--content-max); margin: 0 auto;
  padding: 1.25rem var(--gutter);
}

.ema-header__brand {
  margin-right: auto;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.75rem;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--c-white);
}

.ema-header__toggle {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--c-white) 45%, transparent);
  background: none; cursor: pointer;
}
.ema-header__burger, .ema-header__burger::before, .ema-header__burger::after {
  display: block; width: 1.1rem; height: 1px; background: var(--c-white);
}
.ema-header__burger { position: relative; }
.ema-header__burger::before, .ema-header__burger::after { content: ""; position: absolute; left: 0; }
.ema-header__burger::before { top: -.35rem; }
.ema-header__burger::after  { top: .35rem; }

.ema-nav { display: none; }
.ema-header__pinned { display: none; gap: .75rem; }

/*
 * Both header buttons are a bright purple KEY-LINE that turns SOLID purple on
 * hover (#12), and shorter than the standard button (#15). White on #944ABD is
 * 5.28:1; the outline against the bar is 3.56:1.
 */
.ema-header__pinned .ema-btn,
.ema-header__pinned .ema-btn--solid {
  padding: 8px 15px;
  /* Same type size as the navigation items beside them (#55). */
  font-size: 1rem;
  border: var(--border-w) solid var(--c-bright-purple);
  background: transparent;
  color: var(--c-white);
  transition: background-color .2s ease;
}
.ema-header__pinned .ema-btn:hover,
.ema-header__pinned .ema-btn:focus-visible { background: var(--c-bright-purple); border-color: var(--c-bright-purple); color: var(--c-white); }

.ema-nav__list { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
/* The name and its chevron sit on one line: link, then disclosure (#62). */
.ema-nav__item { position: static; display: inline-flex; align-items: center; }

.ema-nav__trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem .85rem;
  border: 0; background: none; color: var(--c-white);
  font-family: var(--font-body); font-weight: var(--fw-light);
  font-size: 1rem; cursor: pointer;
}
/* The name, when the menu has a landing page. */
.ema-nav__link { padding-right: .35rem; text-decoration: none; }
.ema-nav__link:hover { text-decoration: underline; }

/* The chevron beside it — small, and a real button. */
.ema-nav__toggle {
  display: inline-flex; align-items: center;
  padding: .6rem .5rem .6rem 0;
  border: 0; background: none; color: var(--c-white);
  cursor: pointer;
}

.ema-nav__chevron {
  width: .4rem; height: .4rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-.1rem);
}

/*
 * The megamenu panel is a full-width band under the bar, matching the design —
 * not a dropdown card. Standards expands IN PLACE inside it; there are no
 * fly-outs on either state.
 */
/*
 * The megamenu panel is a full-width band under the bar. Its items line up
 * under their own heading (#12): the script measures the heading when the
 * panel opens and sets --panel-x, pulled back only as far as needed to keep a
 * wide menu on screen.
 */
.ema-nav__panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  background: var(--c-primary-purple);
  padding: 2rem var(--gutter) 3rem var(--panel-x, var(--gutter));
}
.ema-nav__panel[hidden] { display: none; }

.ema-nav__panel > * { max-width: var(--content-max); margin-inline: 0; }

.ema-menu__columns { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)); gap: 2rem; }
.ema-menu__column-title {
  margin: 0 0 .75rem;
  font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-bright-purple);
}

.ema-menu__list { margin: 0; padding: 0; list-style: none; }
.ema-menu__list--nested { margin: .25rem 0 .5rem; padding: 0; }
.ema-menu__list--nested .ema-menu__link::before { content: "— "; color: color-mix(in srgb, var(--c-white) 60%, transparent); }

.ema-menu__link {
  display: block; padding: .3rem 0;
  font-size: var(--t-body); font-weight: var(--fw-light);
  text-decoration: none; color: var(--c-white);
}
.ema-menu__link:hover { text-decoration: underline; }
/*
 * Library's way through to the full library (#62). The "All of X" lines are
 * gone from every panel — the menu name in the bar is the link now — and this
 * is the key-line button the frame draws under Library's columns.
 */
.ema-nav__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.ema-menu__landing { order: 2; margin: 0 0 0 calc(var(--gutter) - var(--panel-x, var(--gutter))); }
.ema-menu__browse { border-color: var(--c-white); color: var(--c-white); }
.ema-menu__browse:hover, .ema-menu__browse:focus-visible { background: var(--c-white); color: var(--c-primary-purple); }

.is-unresolved { color: color-mix(in srgb, var(--c-white) 45%, transparent); text-decoration: line-through; cursor: default; }

@media (min-width: 1024px) {
  .ema-header__toggle { display: none; }
  .ema-nav { display: block; }
  .ema-header__pinned { display: flex; }

  /* The nav is centred IN THE SCREEN, not in whatever space the logo leaves
     (#12): equal outer columns, the nav in the middle. */
  .ema-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .ema-header__brand { justify-self: start; margin-right: 0; }
  .ema-nav { justify-self: center; }
  .ema-header__pinned { justify-self: end; }
}

/* ── The mobile drawer — same source, tap to expand ───────────────────── */

.ema-drawer { background: var(--c-primary-purple); border-top: 1px solid color-mix(in srgb, var(--c-white) 18%, transparent); }
.ema-drawer[hidden] { display: none; }
.ema-drawer__list { margin: 0; padding: 0; list-style: none; }
.ema-drawer__item { border-bottom: 1px solid color-mix(in srgb, var(--c-white) 14%, transparent); }

.ema-drawer__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem var(--gutter);
  border: 0; background: none; color: var(--c-white);
  font-family: var(--font-body); font-weight: var(--fw-light);
  font-size: var(--t-body); text-align: left; cursor: pointer;
}
.ema-drawer__chevron { width: .5rem; height: .5rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.ema-drawer__trigger[aria-expanded="true"] .ema-drawer__chevron { transform: rotate(-135deg); }
.ema-drawer__panel { padding: 0 var(--gutter) 1rem; }
.ema-drawer__panel[hidden] { display: none; }
.ema-drawer__panel .ema-menu__columns { grid-template-columns: 1fr; gap: 1.25rem; }
.ema-drawer__pinned { display: flex; flex-wrap: wrap; gap: .75rem; padding: 1.25rem var(--gutter) 2rem; }
.ema-drawer__pinned .ema-btn { border-color: color-mix(in srgb, var(--c-white) 55%, transparent); color: var(--c-white); }

@media (min-width: 1024px) { .ema-drawer { display: none; } }
body.ema-drawer-open { overflow: hidden; }

/* ── G2 · Footer ──────────────────────────────────────────────────────── */

.ema-footer { background: var(--c-primary-purple); color: var(--c-white); }
.ema-footer .ema-wrap { padding-top: var(--module-y); padding-bottom: 2rem; }

.ema-footer__brand {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1;
  margin: 0 0 var(--module-y);
}

.ema-footer__columns { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 480px)  { .ema-footer__columns { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ema-footer__columns { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ema-footer__title {
  margin: 0 0 .75rem;
  font-family: var(--font-body); font-weight: var(--fw-normal);
  font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-bright-purple);
}

.ema-footer__list { margin: 0; padding: 0; list-style: none; }
.ema-footer__link, .ema-footer__contact {
  display: block; padding: .25rem 0;
  font-size: var(--t-small); font-weight: var(--fw-light);
  text-decoration: none; color: var(--c-white);
}
.ema-footer__link:hover { text-decoration: underline; }

/* Figtree Light, not the display serif (#54). */
.ema-footer__strapline {
  margin: var(--module-y) 0 1.5rem;
  font-family: var(--font-body); font-weight: var(--fw-light);
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1;
}

.ema-footer__lower {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--c-white) 22%, transparent);
  font-size: var(--t-eyebrow);
  color: color-mix(in srgb, var(--c-white) 78%, transparent);
}
@media (min-width: 760px)  { .ema-footer__lower { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; } }

.ema-footer__acknowledgement { max-width: 26rem; margin: 0; }
.ema-footer__lower ul { margin: 0; padding: 0; list-style: none; }
.ema-footer__lower li { padding: .15rem 0; }
.ema-footer__lower a { color: inherit; text-decoration: none; }
.ema-footer__lower a:hover { text-decoration: underline; }

/*
 * FOOTER LAYOUT (BugHerd #5, #17), from the G2 FOOTER / Option1 reference.
 * Two columns on the same 824 / 804 split as module 3:
 *   · left — the wordmark at the top, "Nature. Valued." at the bottom
 *   · right — the four link columns, top-aligned with the wordmark (the
 *     "same hang-height as the logo")
 * Below the rule, the acknowledgement takes the left column and the lower
 * columns sit directly under the link columns above: company details under
 * Explore and Resources, the legal links under Take action, the registry
 * credit under Contact.
 */
@media (min-width: 1024px) {
  .ema-footer .ema-wrap {
    display: grid;
    grid-template-columns: 824fr 804fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "brand columns" "strap columns" "lower lower";
    column-gap: 0;
  }
  .ema-footer__brand     { grid-area: brand; margin: 0; align-self: start; }
  /* No gap: spacing is padding on each column, so these four tracks are
     exactly the four tracks of the lower row and the columns line up. */
  .ema-footer__columns   { grid-area: columns; align-self: start; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .ema-footer__column    { padding-right: 20px; }
  .ema-footer__strapline { grid-area: strap; align-self: end; margin: 140px 0 30px; }
  .ema-footer__lower     { grid-area: lower; grid-template-columns: 824fr repeat(4, minmax(0, 201fr)); gap: 0; column-gap: 0; }
  .ema-footer__lower > :nth-child(2) { grid-column: span 2; }
  .ema-footer__lower > * { padding-right: 20px; }
}

/* One size and one line spacing for EVERYTHING in the lower row, links
   included — the links used to carry their own size and padding, which is why
   the two middle columns didn't stack evenly (#5). */
.ema-footer__lower,
.ema-footer__lower p,
.ema-footer__lower li,
.ema-footer__lower .ema-footer__link {
  font-size: var(--t-small);
  line-height: 1.6;
}
.ema-footer__lower li,
.ema-footer__lower .ema-footer__link { padding: 0; display: inline; }
.ema-footer__lower li { display: block; }

/* The SDG line the brief specifies is NOT in the design — see the build note
   in template-parts/global/footer.php. Kept styled so it can be reinstated. */
.ema-footer__sdg { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0 0; }
.ema-sdg--footer { color: color-mix(in srgb, var(--c-white) 78%, transparent); }
.ema-footer__top { font-size: var(--t-small); color: var(--c-white); }