/* ═══════════════════════════════════════════════════════════════
   FOOTER  —  Editorial magazine style (Scientific American-inspired)
   Palette : charcoal bg · white headings · warm-gray links
   Font    : inherits site body; headings use a slightly bolder weight

   Navigation hierarchy reflected in the CSS:
     .site-footer__sections       — flex row of sections (outer)
       .site-footer__section      — one heading + its column(s)
         .site-footer__section-heading  — spans full width above columns
         .site-footer__section-body     — flex row of columns within section
           .site-footer__col            — one vertical link list
             .site-footer__col-links    — the <ul>

   Multi-column sections (data-cols="2", "3"…) flex their body wider so
   each sub-column fills proportionally.  Single-column sections (default)
   look exactly like the previous design.
═══════════════════════════════════════════════════════════════ */

:root {
  --footer-bg:          #3a3a3a;
  --footer-border:      #555555;
  --footer-heading:     #ffffff;
  --footer-text:        #d4d4d4;
  --footer-link:        #e0e0e0;
  --footer-link-hover:  #ffffff;
  --footer-muted:       #999999;
  --footer-accent:      #c0392b;   /* Icarus red */
  --footer-social-size: 22px;
  /* Minimum width of one link column — used in flex-basis calculations */
  --footer-col-min:     150px;
}

/* ── Shell ──────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  margin-top: auto;
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  /* Thin accent bar ties the footer to the site's brand colour */
  border-top: 4px solid var(--footer-accent);
}

/* ── Inner wrapper ──────────────────────────────────────────────── */
.site-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 2.5rem 2rem;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION GRID
   Sections sit in a flex row that wraps.  Each section grows from
   --footer-col-min × its column count, so a 2-column section
   naturally takes twice as much space as a 1-column section.
═══════════════════════════════════════════════════════════════ */

.site-footer__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  padding-bottom: 2.5rem;
}

/* Every section: grow proportionally, never shrink below its column count */
.site-footer__section {
  /* Default (1 column): flex-basis = --footer-col-min */
  flex: 1 1 var(--footer-col-min);
  min-width: var(--footer-col-min);
}

/*
   Multi-column sections get wider flex-basis so they attract more
   space from the flex algorithm — a 2-col section gets ~2× a 1-col.
   We set these via [data-cols] attribute written by the template.
*/
.site-footer__section[data-cols="2"] {
  flex-basis: calc(var(--footer-col-min) * 2 + 2rem); /* 2 cols + 1 gap */
}
.site-footer__section[data-cols="3"] {
  flex-basis: calc(var(--footer-col-min) * 3 + 4rem); /* 3 cols + 2 gaps */
}
.site-footer__section[data-cols="4"] {
  flex-basis: calc(var(--footer-col-min) * 4 + 6rem); /* 4 cols + 3 gaps */
}

/* ── Section heading — spans the full width of all sub-columns ── */
.site-footer__section-heading {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: var(--footer-heading);
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.6rem;
  /* display: block so the border-bottom stretches across all sub-columns */
  display: block;
  border-bottom: 2px solid var(--footer-accent);
  width: 100%;
}

/* ── Section body — flex row of columns ─────────────────────── */
.site-footer__section-body {
  display: flex;
  gap: 2rem;
}

/* ── Individual column ──────────────────────────────────────── */
.site-footer__col {
  /* Equal share of the section body width */
  flex: 1 1 var(--footer-col-min);
  min-width: 0; /* prevent overflow on very long link labels */
}

/* ── Link list ──────────────────────────────────────────────────── */
.site-footer__col-links {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__link {
  font-size: 0.9375rem;
  color: var(--footer-link);
  text-decoration: none;
  line-height: 1.4;
  /* inline-block required for padding-left transition */
  display: inline-block;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.site-footer__link:hover {
  color: var(--footer-link-hover);
  /* Subtle indent gives tactile "pressing into" feedback */
  padding-left: 4px;
}

/* ── Divider ────────────────────────────────────────────────────── */
.site-footer__divider {
  border: none;
  border-top: 1px solid var(--footer-border);
  margin: 0 0 1.75rem;
}

/* ── About paragraph ────────────────────────────────────────────── */
.site-footer__about {
  font-size: 1.7rem;
  display: flex;
  justify-content: center;
  line-height: 1.7;
  color: var(--footer-muted);
}

.site-footer__about a {
  color: var(--footer-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__about a:hover {
  color: var(--footer-link-hover);
}

/* ── Bottom bar ─────────────────────────────────────────────────── */
.site-footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ── Copyright block ────────────────────────────────────────────── */
.site-footer__copyright-block p {
  font-size: 0.8125rem;
  color: var(--footer-muted);
  margin: 0 0 0.2rem;
  line-height: 1.5;
}

.site-footer__tagline {
  font-size: 0.8125rem;
  color: var(--footer-muted);
  margin: 0;
}

/* ── Branding: logo + social ────────────────────────────────────── */
.site-footer__branding {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-footer__logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* force white on dark bg */
  opacity: 0.9;
}

/* ── Social icons row ───────────────────────────────────────────── */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-link);
  transition: color 0.15s ease, transform 0.15s ease;
}

.site-footer__social-link:hover {
  color: var(--footer-link-hover);
  transform: translateY(-2px);
}

.site-footer__social-link svg {
  width: var(--footer-social-size);
  height: var(--footer-social-size);
  display: block;
}

/* ── Responsive: tablet (≤ 900 px) ─────────────────────────────── */
@media (max-width: 900px) {
  .site-footer__inner {
    padding: 3rem 2rem 1.75rem;
  }

  /* Collapse multi-column section bodies to single column on tablet */
  .site-footer__section-body {
    flex-wrap: wrap;
  }

  /* Prevent any single section from being too narrow after wrapping */
  .site-footer__section {
    flex-basis: calc(50% - 1.5rem);  /* 2-up layout */
  }

  /* Wide sections (3–4 cols) drop to 2 sub-columns on tablet */
  .site-footer__section[data-cols="3"],
  .site-footer__section[data-cols="4"] {
    flex-basis: 100%;
  }
}

/* ── Responsive: mobile (≤ 600 px) ─────────────────────────────── */
@media (max-width: 600px) {
  .site-footer__sections {
    gap: 1.75rem;
    padding-bottom: 2rem;
  }

  .site-footer__inner {
    padding: 2.5rem 1.25rem 1.5rem;
  }

  /* Full-width sections, stacked */
  .site-footer__section,
  .site-footer__section[data-cols="2"],
  .site-footer__section[data-cols="3"],
  .site-footer__section[data-cols="4"] {
    flex-basis: 100%;
  }

  /* Stack sub-columns vertically on mobile */
  .site-footer__section-body {
    flex-direction: column;
    gap: 1.5rem;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .site-footer__branding {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   EDITORIAL BOARD — footer dark-theme overrides
   The base accordion structure (grid-template-rows transition,
   board-member card layout) is defined below.  Only colour/border
   values are overridden for the dark background here.
═══════════════════════════════════════════════════════════════ */

/* ── Wrapper divider + button row ─────────────────────────────── */
.site-footer__divider--board {
  margin-bottom: 0;
}

.site-footer__board-wrapper {
  width: 100%;
}

/* Centre the toggle button and give it footer-appropriate styling */
.editorial-board-btn-wrapper {
  display: flex;
  justify-content: center;
  padding: 1.5rem
}

.site-footer__board-btn {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  
    color: var(--footer-muted);
  background: transparent;
  border: 1px solid var(--footer-border);
  border-radius: 2px;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.site-footer__board-btn:hover,
.site-footer__board-btn[aria-expanded="true"] {
  color: var(--footer-heading);
  border-color: var(--footer-accent);
}

.site-footer__board-btn[aria-expanded="true"]::after  { content: ' ↑'; }
.site-footer__board-btn[aria-expanded="false"]::after { content: ' ↓'; }

/* ── Role section headings ────────────────────────────────────── */
.site-footer__board-role-heading {
  color: var(--footer-heading) !important;
  border-bottom-color: var(--footer-border) !important;
}

/* ── Member cards ─────────────────────────────────────────────── */
.site-footer__board-member {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--footer-border) !important;
}

.site-footer__board-member:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.site-footer__board-member .board-member__photo img,
.site-footer__board-member .board-member__photo-placeholder {
  border-color: var(--footer-border) !important;
}

.site-footer__board-member .board-member__photo-placeholder {
  background: linear-gradient(135deg, #4a4a4a, #333) !important;
  color: var(--footer-muted) !important;
}

.site-footer__board-member .board-member__name a {
  color: var(--footer-link) !important;
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer__board-member .board-member__name a:hover {
  color: var(--footer-link-hover) !important;
}

/* ── Spacing: give the board section breathing room ───────────── */
.editorial-board-content  { padding-bottom: 0.5rem; }
.editorial-board-section  { margin-bottom: 1.75rem; }


/* ═══════════════════════════════════════════════════════════════
   EDITORIAL BOARD — self-contained structural CSS
   Must live here (not in issue.css) because the footer renders
   on every page, not just the issue page.
═══════════════════════════════════════════════════════════════ */

/* ── Accordion mechanism ──────────────────────────────────────── */
/*
   PRESERVED COMMENT (From old accordion logic):
   grid-template-rows 0fr → 1fr gives a smooth height animation
   without JavaScript measuring.  The HTML `hidden` attribute hides
   the content before JS runs (progressive enhancement).
   JS removes `hidden`, then toggles `is-expanded`.
*/

/* MODIFIED: Converted from a grid transition trick into native <dialog> modal styling */
.editorial-board-content {
  /* Setup native dialog appearance */
  padding: 2.5rem 3rem 1.5rem;
  background-color: var(--footer-bg);
  border: 1px solid var(--footer-border);
  border-radius: 12px;
  color: var(--footer-text);
  
  /* Sizing and scrolling */
  max-width: 900px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  
  /* Reset default dialog margins to ensure proper centering */
  margin: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* NEW: Dim the page content behind the modal */
.editorial-board-content::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

/* NEW: Styles for the absolute positioned close button inside the modal */
.editorial-board-close-btn {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  color: var(--footer-muted);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
  padding: 0;
}

.editorial-board-close-btn:hover {
  color: var(--footer-heading);
}

.editorial-board-inner {
  min-height: 0;                     /* required for the 0fr trick to work - PRESERVED COMMENT */
}

/* ── Role section headings ────────────────────────────────────── */
.editorial-board-section {
  width: 100%;
  margin-bottom: 1.75rem;
}

.editorial-board-role-heading {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  
    color: var(--footer-heading);
  border-bottom: 1px solid var(--footer-border);
  padding-bottom: 0.5rem;
  margin: 1.5rem 0 0.5rem;
  text-align: center;
}

/* ── Members grid ─────────────────────────────────────────────── */
.editorial-board-members-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2rem;
  padding: 1rem 0;
}

/* ── Individual member card ───────────────────────────────────── */
.board-member {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.75rem 1rem;
  width: 260px;
  border: 1px solid var(--footer-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.board-member:hover {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

/* ── Photo ────────────────────────────────────────────────────── */
.board-member__photo img,
.board-member__photo-placeholder {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--footer-border);
  flex-shrink: 0;
  display: block;
}

.board-member__photo-placeholder {
  background: linear-gradient(135deg, #4a4a4a, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--footer-muted);
}

/* ── Name ─────────────────────────────────────────────────────── */
.board-member__info  { min-width: 0; }

.board-member__name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.board-member__name a {
  color: var(--footer-link);
  text-decoration: none;
  transition: color 0.15s;
}

.board-member__name a:hover { color: var(--footer-link-hover); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .editorial-board-members-grid { gap: 1rem; }

  /* MODIFIED: Tighten padding on mobile dialog */
  .editorial-board-content { padding: 1.5rem; }
  
  .board-member {
    width: 100%;
    max-width: 320px;
  }
}