/* ============================================================
   African Renaissance Review — Shared Stylesheet
   Brand tokens taken directly from client's Visual Identity sheet
   ============================================================ */

:root {
  --midnight: #0B1F3A;
  --midnight-light: #142c52;
  --gold: #C89B3C;
  --gold-light: #ddb768;
  --emerald: #1C6B52;
  --ivory: #FAFAF7;
  --charcoal: #2C2C2C;
  --hairline: #e4ddd0;
  --muted: #6b6459;

  --serif: "Playfair Display", "Georgia", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  margin: 0;
  color: var(--midnight);
  line-height: 1.15;
}
p { line-height: 1.65; margin: 0; }
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 13px 26px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--gold); color: var(--midnight); }
.btn-primary:hover { background: var(--gold-light); }
.btn-outline { background: transparent; color: var(--ivory); border-color: rgba(250,250,247,0.4); }
.btn-outline:hover { border-color: var(--ivory); }
.btn-dark { background: var(--midnight); color: var(--ivory); }
.btn-dark:hover { background: var(--midnight-light); }

/* ---------- Top bar ---------- */
/* A shade darker than the header so the two read as separate layers, with the
   same edge-to-edge inset so the tagline lines up with the logo below it. */
.topbar {
  background: var(--topbar-bg, #07162b);
  border-bottom: 1px solid rgba(200,155,60,0.18);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 38px;
  padding: 6px clamp(20px, 3vw, 48px);
}
.topbar-text {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--gold-light);
}
.topbar-social {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  flex-shrink: 0;
}
.topbar-social a {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: rgba(250,250,247,0.7);
  border: 1px solid rgba(250,250,247,0.16);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.topbar-social a:hover {
  color: var(--midnight);
  background: var(--gold);
  border-color: var(--gold);
}

/* On a phone there is no room for a sentence and five icons on one line.
   The line is what the bar is for, so it keeps the row and centres; the
   icons step aside, since the footer carries the same links. */
@media (max-width: 640px) {
  .topbar-inner { justify-content: center; padding-top: 7px; padding-bottom: 7px; }
  .topbar-text { font-size: 12px; text-align: center; }
  .topbar-social { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  background: var(--header-bg, var(--midnight));
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(200,155,60,0.25);
}
/* The header runs edge to edge rather than sitting in the centred 1200px
   container. Applied to every .wrap in the header — the bar and the search
   panel below it — so the two stay aligned with each other. Uses the same
   inset as the other full-bleed rows (.trio, .cta-item). */
.site-header .wrap {
  max-width: none;
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: clamp(20px, 3vw, 48px);
}
/* Direct child only — the search panel below also uses .wrap, and this flex
   row (with its fixed 76px height) would otherwise collapse the search form
   to shrink-to-fit instead of letting it fill the bar. */
.site-header > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img { height: 42px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text .arr { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ivory); letter-spacing: 0.02em; }
.brand-text .tag { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; margin-top: 2px; }

nav.primary-nav { display: flex; align-items: center; }
nav.primary-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The row is 76px tall and the dropdown opens from its bottom edge, so each
   item fills the full height — otherwise the pointer crosses a dead gap on the
   way down and the menu closes before it is reached. */
nav.primary-nav .nav-list > li {
  position: relative;
  display: flex;
  align-items: center;
  height: 76px;
}
nav.primary-nav a {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(250,250,247,0.85);
  text-transform: uppercase;
  white-space: nowrap;
}
nav.primary-nav a:hover,
nav.primary-nav a.active,
nav.primary-nav .current-menu-item > a,
nav.primary-nav .current-menu-parent > a { color: var(--gold); }

/* ---------- Dropdowns ---------- */
/* A filled triangle rather than a chevron drawn from two rotated borders. At
   12px in the tightened row those two hairlines sat almost flat and read as a
   dash, not as an arrow; a solid caret keeps its shape at any size. */
/* Both selectors are needed. main.js wraps the parent link in .submenu-row at
   every width, not just on a phone, so a rule matching only a direct child of
   the <li> silently stops applying the moment the script runs. */
.menu-item-has-children > a::after,
.menu-item-has-children > .submenu-row > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(1px);
}

/* The toggle button is a phone control. It is created by JS at every width, so
   it has to be hidden explicitly here — the mobile block below turns it back
   on. Without this it renders as an unstyled stub beside each parent item,
   which is what the flat dash in the desktop row was. */
.submenu-toggle { display: none; }
nav.primary-nav .sub-menu {
  position: absolute;
  top: 76px;
  left: -18px;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: var(--midnight-light);
  border: 1px solid rgba(200,155,60,0.28);
  border-top: 2px solid var(--gold);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  z-index: 300;
  /* Hidden with opacity rather than display:none so the fade works and so the
     items stay in the accessibility tree for assistive technology to announce
     as a collapsed submenu. visibility keeps them unfocusable while closed. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* focus-within is what makes this work for keyboard users: tabbing into a
   child opens the parent, with no JavaScript involved. */
nav.primary-nav .menu-item-has-children:hover > .sub-menu,
nav.primary-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
nav.primary-nav .sub-menu li { display: block; }
nav.primary-nav .sub-menu a {
  display: block;
  padding: 9px 20px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(250,250,247,0.8);
  white-space: normal;
}
nav.primary-nav .sub-menu a:hover { background: rgba(200,155,60,0.12); color: var(--gold); }

/* A dropdown near the right edge would otherwise run off the page. */
nav.primary-nav .nav-list > li:nth-last-child(-n+2) .sub-menu { left: auto; right: -18px; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ivory); opacity: 0.85; cursor: pointer;
}
.icon-btn:hover { opacity: 1; }
.menu-toggle { display: none; }

.icon-btn { background: none; border: none; padding: 0; cursor: pointer; }

/* Nine top-level items need about 870px of the bar at full size, which the
   brand and the Contribute button leave room for only above ~1250px. Rather
   than dropping to the hamburger on every laptop, the row tightens through the
   middle widths — smaller type, less gap, narrower inset — which buys back
   roughly 130px and keeps the whole menu visible down to the mobile
   breakpoint. Measured, not guessed: at 1100px the untightened row overran the
   bar by 21px and collided with the button. */
@media (max-width: 1250px) {
  nav.primary-nav .nav-list { gap: 15px; }
  nav.primary-nav a { font-size: 12px; letter-spacing: 0.01em; }
  .site-header .wrap {
    padding-left: clamp(14px, 1.5vw, 24px);
    padding-right: clamp(14px, 1.5vw, 24px);
  }
  .header-actions { gap: 12px; }
  .header-actions .btn-primary { padding: 11px 16px; font-size: 13px; }
}

@media (max-width: 1000px) {
  .site-header > .wrap { position: relative; }
  nav.primary-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-actions .btn-primary { display: none; }
  nav.primary-nav.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--midnight);
    padding: 18px 32px 26px;
    border-top: 1px solid rgba(200,155,60,0.25);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
    z-index: 200;
  }
  nav.primary-nav.mobile-open a { padding: 10px 0; width: 100%; }

  /* ---------- Mobile dropdowns ---------- */
  nav.primary-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  /* The 76px row height and absolute positioning are desktop constructions —
     on a phone the submenu is an inline disclosure, not an overlay. */
  nav.primary-nav .nav-list > li {
    display: block;
    height: auto;
    border-bottom: 1px solid rgba(250,250,247,0.08);
  }
  nav.primary-nav .nav-list > li:last-child { border-bottom: none; }

  nav.primary-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 10px;
    padding: 4px 0 4px 14px;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(200,155,60,0.35);
    box-shadow: none;
    transition: none;
    /* Closed by default: 26 items expanded at once buries the rest of the menu
       below the fold. The toggle button is added by main.js. */
    display: none;
  }
  nav.primary-nav .menu-item-has-children.is-open > .sub-menu { display: block; }
  nav.primary-nav .nav-list > li:nth-last-child(-n+2) .sub-menu { right: auto; }

  /* The caret moves onto the toggle button, which is the thing that opens it.
     Both selectors again, for the same reason as above — otherwise the label
     keeps its own arrow and each parent item shows two. */
  nav.primary-nav .menu-item-has-children > a::after,
  nav.primary-nav .menu-item-has-children > .submenu-row > a::after { display: none; }

  .submenu-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .submenu-row > a { flex: 1; }
  .submenu-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(250,250,247,0.7);
  }
  /* Same filled caret as the desktop row, so the two read as one control. */
  .submenu-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform .15s ease;
  }
  .menu-item-has-children.is-open > .submenu-row .submenu-toggle::after {
    transform: rotate(180deg);
  }
  .submenu-toggle:hover { color: var(--gold); }
}

/* ---------- Header search panel ---------- */
.header-search {
  max-height: 0;
  overflow: hidden;
  background: var(--midnight-light);
  transition: max-height 0.2s ease;
}
.header-search.open { max-height: 140px; }
/* Vertical only — the horizontal inset is inherited from .site-header .wrap
   so the search bar lines up with the brand and header icons above it. */
.header-search .wrap { padding-top: 18px; padding-bottom: 18px; }
/* Fills the header container so the bar lines up with the brand on the left
   and the header icons on the right, rather than sitting in a short stub. */
.header-search .search-form { max-width: none; margin: 0; }
.header-search .search-field {
  border-color: rgba(250,250,247,0.18);
  background: rgba(250,250,247,0.06);
  color: var(--ivory);
}
.header-search .search-field::placeholder { color: rgba(250,250,247,0.45); }

/* ---------- Long-form content (legal pages, etc.) ---------- */
.prose { max-width: 760px; padding: 56px 32px 90px; color: var(--charcoal); font-size: 15.5px; line-height: 1.75; }
.prose h2 { font-size: 24px; margin-top: 40px; margin-bottom: 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; margin-top: 30px; margin-bottom: 10px; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--emerald); text-decoration: underline; }

/* ---------- Page header banner (interior pages) ---------- */
.page-banner {
  background: var(--banner-bg, var(--midnight));
  padding: 64px 0 40px;
  border-bottom: 4px solid var(--gold);
}
.page-banner .eyebrow { color: var(--gold); }
.page-banner h1 { color: var(--ivory); font-size: 42px; margin-top: 10px; }
.page-banner p { color: rgba(250,250,247,0.75); max-width: 640px; margin-top: 14px; font-size: 16.5px; }

/* Contributor archive header: portrait beside the name, rather than the
   section-style banner the category archives use. The portrait is the one
   thing a person's page has that a category's does not, so it leads. */
.contributor-head { display: flex; align-items: center; gap: 32px; }
.contributor-head img {
  width: 132px; height: 132px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(250,250,247,0.18);
}
.contributor-head h1 { margin-top: 6px; }
.contributor-head p { margin-top: 12px; }
.contributor-count {
  color: var(--gold); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; margin-top: 14px;
}
@media (max-width: 680px) {
  .contributor-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .contributor-head img { width: 96px; height: 96px; }
}
/* Article standfirst: deliberately NOT restyled. It takes the same font, size
   and colour as the subtitle on every other page banner above, so an article
   reads as part of the same site rather than as a separate template. It was
   briefly set in the serif at 20px, which made articles the one page whose
   subtitle looked different.

   The byline is what gets restyled instead — smaller and dimmer — which is
   enough to keep the summary and the byline from reading as one grey block. */
.page-banner .single-meta {
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: rgba(250,250,247,0.55);
  margin-top: 18px;
}

/* ---------- Footer ---------- */
/* No top padding on the footer itself: the sign-up band sits flush at the top,
   and the link grid below carries its own. With the band switched off the grid
   still has its spacing, so neither arrangement leaves a gap or a collision. */
footer.site-footer { background: var(--footer-bg, var(--midnight)); color: rgba(250,250,247,0.65); padding-top: 0; }

/* ---------- Footer sign-up ---------- */
/* A shade darker than the footer, so it reads as its own band rather than as
   the first row of the link grid. */
.footer-signup {
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(250,250,247,0.08);
}
.footer-signup-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 44px;
}
.footer-signup-copy h3 { color: var(--ivory); font-size: 24px; margin-top: 8px; }
.footer-signup-copy p { font-size: 14.5px; color: rgba(250,250,247,0.62); margin-top: 10px; max-width: 460px; }
/* MailPoet brings its own field markup; these put it on the band's footing,
   matching the Brief page so the same form looks the same in both places. */
.footer-signup-form form { margin: 0; }
.footer-signup-form input[type="email"],
.footer-signup-form input[type="text"] {
  width: 100% !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(250,250,247,0.22) !important;
  border-radius: 3px !important;
  background: rgba(250,250,247,0.07) !important;
  color: var(--ivory) !important;
  font-family: var(--sans);
  font-size: 14.5px;
}
.footer-signup-form input::placeholder { color: rgba(250,250,247,0.45); }
.footer-signup-form input[type="submit"] {
  background: var(--gold) !important;
  color: var(--midnight) !important;
  border: none !important;
  padding: 13px 26px !important;
  border-radius: 3px !important;
  font-family: var(--sans);
  font-weight: 600;
  cursor: pointer;
}
.footer-signup-form input[type="submit"]:hover { background: var(--gold-light) !important; }
/* The homepage ends on the CTA band, which is the same navy as the footer — so
   without a rule the two merge into one indistinguishable block. Every other
   page ends on a light section, where the colour change already separates
   them. Scoped to the homepage rather than applied to every page so it reads
   as a join, not as decoration.

   A border on the footer itself spans the full width at every breakpoint, so
   this needs no responsive handling. */
body.home footer.site-footer { border-top: 1.5px solid var(--gold); }
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250,250,247,0.12);
}
.footer-brand .brand img { height: var(--footer-logo-height, 38px); width: auto; }
.footer-brand .brand-text .arr { color: var(--ivory); }
.footer-brand p { margin-top: 14px; font-size: 13.5px; max-width: 280px; color: rgba(250,250,247,0.55); }
.footer-brand .social-row { margin-top: 22px; }
.footer-col h4 {
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(200,155,60,0.35);
}
.footer-col a { display: block; font-size: 13.5px; padding: 5px 0; color: rgba(250,250,247,0.6); transition: color .15s ease; }
.footer-col a:hover { color: var(--gold); }
/* Vertical padding only, written longhand. The shorthand "padding: 22px 0"
   also set the sides to 0, overriding the inset .wrap gives every other row —
   so below about 1260px, where the centred container stops leaving a margin,
   the copyright line ran flush against the edge of the screen while the
   columns above it stayed indented. */
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding-top: 22px; padding-bottom: 22px;
  font-size: 12.5px; color: rgba(250,250,247,0.4);
}
.back-to-top {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(250,250,247,0.55);
}
.back-to-top:hover { color: var(--gold); }
.social-row { display: flex; gap: 14px; }
.social-row a { width: 30px; height: 30px; border: 1px solid rgba(250,250,247,0.2); border-radius: 50%; display:flex; align-items:center; justify-content:center; color: rgba(250,250,247,0.7); }
.social-row a:hover { border-color: var(--gold); color: var(--gold); }

/* Brand takes the full first row and the three link columns share the second,
   rather than a 2x2 that would strand the third column on a row of its own. */
@media (max-width: 900px) {
  .footer-signup-inner { grid-template-columns: 1fr; gap: 22px; }
  .footer-top { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .page-banner h1 { font-size: 30px; }
}

/* ---------- Generic section helpers ---------- */
section { padding: 72px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 34px; flex-wrap: wrap; gap: 10px; }
.section-head h2 { font-size: 30px; }
.view-all { font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: 0.03em; }
.view-all:hover { text-decoration: underline; }

/* Card */
.card { background: #fff; border: 1px solid var(--hairline); }
.card .cat { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald); }
.card h3 { font-family: var(--serif); font-size: 19px; margin-top: 8px; }
.card .meta { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* Buttons focus visibility */
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Visually hidden, but still read by screen readers. Used for form labels
   where the visible cue is the placeholder. */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Copyright and the staff login link share the left side of the bottom bar,
   so the social row keeps the right side to itself. */
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.staff-link {
  position: relative;
  font-size: 12.5px;
  color: rgba(250,250,247,0.45);
  padding-left: 18px;
}
/* Hairline separator instead of a pipe character, which screen readers
   announce as punctuation. */
.staff-link::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 11px;
  margin-top: -5.5px;
  background: rgba(250,250,247,0.2);
}
.staff-link:hover { color: var(--gold); }
/* The dividers sit to the left of each link, which is right on one line but
   wrong once the row wraps: each new line then starts with a stray rule. The
   row first wraps well above phone width (it did at 752px), so the dividers go
   at every width where wrapping is possible, and the gap between items does
   the separating instead. Above 900px the whole bar fits on one line. */
@media (max-width: 900px) {
  .footer-legal { gap: 8px 18px; }
  .staff-link { padding-left: 0; }
  .staff-link::before { display: none; }
}
@media (max-width: 560px) {
  .footer-legal { justify-content: center; }
}