/* ============================================================
   AXL's Game Lab — site-wide styles (loaded after Bootstrap)
   Typography & sizing come from Bootstrap; we only bridge brand
   tokens through Bootstrap CSS variables and add the AXL chrome.
   ============================================================ */

:root {
  --axl-ink:         #1A2547;
  --axl-ink-2:       #151D40;
  --axl-blue:        #1245C4;
  --axl-blue-ink:    #131C3F;
  --axl-line:        #E3E7F0;
  --axl-muted:       #6B7484;
  --axl-paper:       #FDFDFE;
  --axl-btn-outline: #9DB4E8;   /* episode outline-button / badge border */
  --axl-surface-2:   #F3F4F8;   /* episode light panel background */
  --axl-input-line:  #D9DDE6;   /* episode form-control border */

  /* Rebrand Bootstrap through its own variables (DRY: one source of truth). */
  --bs-primary: #1245C4;
  --bs-primary-rgb: 18, 69, 196;
  --bs-link-color: #1245C4;
  --bs-link-color-rgb: 18, 69, 196;
  --bs-link-hover-color: #0d3396;
  --bs-link-hover-color-rgb: 13, 51, 150;

  /* ---- Episode design tokens ------------------------------------------
     These remap Bootstrap's global variables to the approved
     /episode/the-explorer/ look so EVERY block inherits it: text/border
     colours, the 8px→16px→20px radius scale, and light surfaces. Per-
     component tokens (card, button, form) are set on their selectors
     below because Bootstrap scopes those --bs-*-* vars locally. */
  --bs-body-color: #1A2547;
  --bs-secondary-color: #6B7484;
  --bs-border-color: #E3E7F0;
  --bs-border-radius:    .5rem;   /*  8px — buttons, inputs, small surfaces */
  --bs-border-radius-sm: .375rem; /*  6px */
  --bs-border-radius-lg: 1rem;    /* 16px — cards, large panels */
  --bs-border-radius-xl: 1.25rem; /* 20px */
  --bs-light: #F3F4F8;
  --bs-light-rgb: 243, 244, 248;
  --bs-tertiary-bg: #F3F4F8;
}

body {
  background: var(--axl-paper);
  color: var(--axl-ink);
  overflow-x: hidden; /* contain full-width (.alignfull) block breakouts */
}

/* ---- Buttons (episode geometry) --------------------------------------
   Every .btn shares the episode shape: 8px radius, 11px/26px padding,
   bold + tracked 13px label. Colour comes from the variant. */
.btn {
  --bs-btn-padding-y: .6875rem;   /* 11px */
  --bs-btn-padding-x: 1.625rem;   /* 26px */
  --bs-btn-font-size: .8125rem;   /* 13px */
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: .5rem;  /*  8px */
  letter-spacing: .04em;
  text-transform: uppercase;      /* every episode button is tracked caps (.up) */
}

/* Solid blue is the DEFAULT block button (episode "Subscribe" style). */
.btn-primary {
  --bs-btn-bg: var(--axl-blue);
  --bs-btn-border-color: var(--axl-blue);
  --bs-btn-hover-bg: #0f3aa8;
  --bs-btn-hover-border-color: #0f3aa8;
  --bs-btn-active-bg: #0d3396;
  --bs-btn-active-border-color: #0d3396;
  --bs-btn-disabled-bg: var(--axl-blue);
  --bs-btn-disabled-border-color: var(--axl-blue);
}

/* Outline variant = episode "Read Log" style: soft blue border, blue
   ink on white. Hover / focus / press darken the white a step at a time
   (as the solid buttons darken their fill) rather than inverting to blue. */
.btn-outline-primary {
  --bs-btn-color: var(--axl-blue);
  --bs-btn-border-color: var(--axl-btn-outline);   /* #9DB4E8 */
  --bs-btn-bg: #fff;
  --bs-btn-hover-bg: #E1E6F2;
  --bs-btn-hover-border-color: var(--axl-btn-outline);
  --bs-btn-hover-color: var(--axl-blue);
  --bs-btn-active-bg: #D3DAED;
  --bs-btn-active-border-color: var(--axl-btn-outline);
  --bs-btn-active-color: var(--axl-blue);
}

/* ---- Cards (episode .card: white, hairline border, 16px radius, snug) - */
.card {
  --bs-card-bg: #fff;
  --bs-card-border-color: var(--axl-line);          /* #E3E7F0 */
  --bs-card-border-radius: 1rem;                    /* 16px */
  --bs-card-inner-border-radius: calc(1rem - 1px);
  --bs-card-spacer-y: 1.1875rem;                    /* 19px */
  --bs-card-spacer-x: 1.1875rem;
  --bs-card-cap-bg: var(--axl-surface-2);
}

/* ---- Badges (episode label: outline chip, bold + tracked) ------------- */
.badge {
  border-radius: .5rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.badge.text-bg-light,
.badge.bg-light {
  border: 1px solid var(--axl-btn-outline);
  color: var(--axl-blue);
  background-color: #fff !important;
}
/* Secondary badges render as the episode grey ".pill" chip. */
.badge.bg-secondary,
.badge.text-bg-secondary {
  --bs-secondary-rgb: 236, 237, 242;   /* #ECEDF2 */
  color: var(--axl-ink);
  border-radius: 99px;
  font-size: .625rem;                  /* 10px */
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---- Accordion (episode card geometry + brand ink) ------------------- */
.accordion {
  --bs-accordion-border-color: var(--axl-line);
  --bs-accordion-border-radius: 1rem;              /* 16px, like .card */
  --bs-accordion-inner-border-radius: calc(1rem - 1px);
  --bs-accordion-active-bg: var(--axl-surface-2);
  --bs-accordion-active-color: var(--axl-blue);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}
.accordion-button { font-weight: 700; color: var(--axl-ink); }

/* ---- Form controls (episode input: soft border, blue focus) ----------- */
.form-control,
.form-select {
  border-color: var(--axl-input-line);   /* #D9DDE6 */
}
.form-control:focus,
.form-select:focus {
  border-color: var(--axl-blue);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

/* Brand headings (Bootstrap owns the sizes; episode uses heavy weight). */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--axl-ink-2);
  letter-spacing: -.01em;
  font-weight: 700;
}

/* Bootstrap pads .mark / <mark> (.1875em), which pushes inline highlights
   (e.g. the editor's text-colour <mark>) off the text line. */
.mark, mark { padding: 0; }

/* Shared heading / eyebrow component (used by blocks + episode sections). */
.axl-eyebrow {
  color: var(--axl-blue);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.axl-heading__title { margin-bottom: .5rem; }
.axl-heading__intro { color: var(--axl-muted); }
.axl-heading__icon svg { display: block; }

/* Dashed empty-state used in editor previews. */
.border-dashed { border-style: dashed !important; }

/* ---------- layout wrappers (shared with the episode design) ---------- */
.page { max-width: 1440px; margin: 0 auto; }
.pad  { padding: 16px 16px 24px; }
.up   { text-transform: uppercase; letter-spacing: .04em; }
.muted{ color: var(--axl-muted); }

/* WordPress core prints this class for text meant only for screen readers
   (the posts pagination heading, "(opens in a new tab)" …); a classic theme has
   to hide it itself. Bootstrap's .visually-hidden, under core's name. */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   AXL header / nav  (renamed .axl-nav to avoid Bootstrap's .nav)
   ============================================================ */
.axl-nav {
  margin: 7px; border: 1px solid var(--axl-line); border-radius: 13px; background: #fff;
  display: flex; align-items: center; justify-content: space-between; padding: 11px 14px;
  box-shadow: 0 2px 6px rgba(26,38,77,.06);
}
.axl-nav .logo {
  display: inline-flex; align-items: center; padding: 0; border: 0; background: none;
  line-height: 0; text-decoration: none;
}
.axl-nav .logo img,
.axl-nav .logo .custom-logo { display: block; height: 38px; width: auto; }
.axl-nav .logo:focus-visible { outline: 2px solid var(--axl-blue); outline-offset: 3px; border-radius: 6px; }
/* Both menus are rendered from the WordPress menu assigned to "Primary Menu",
   so they are <ul> lists — strip the list styling and lay them out by hand. */
.navmenu { display: none; align-items: center; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.navmenu a, .navmenu span { color: var(--axl-blue-ink); text-decoration: none; }
.navmenu ul, .navmenu li,
.menu-panel ul, .menu-panel li { list-style: none; margin: 0; padding: 0; }
.navmenu-list { display: flex; gap: 36px; align-items: center; }
.navmenu-list > li { display: inline-flex; align-items: center; }
/* Inline menu icon: sits before the label, same ink, without changing the
   menu's type, spacing or the 36px gap between items. */
.navmenu a { display: inline-flex; align-items: center; gap: 8px; }
.axl-nav-ic { flex: none; }
/* The STORE item (menu item with the "axl-store" class) closes the bar behind
   a hairline divider. */
.navmenu-list > li.axl-store { border-left: 1px solid var(--axl-line); padding: 8px 0 8px 36px; }
.navicons { display: flex; gap: 20px; align-items: center; color: var(--axl-blue-ink); }
.navicons a { display: inline-flex; color: inherit; }
.burger { background: none; border: 0; padding: 2px; cursor: pointer; display: flex; align-items: center; color: #fff; }
/* Three white lines turn into a cross while the menu is open. */
.burger__icon path { transform-box: view-box; transform-origin: 12px 12px; transition: transform .3s ease, opacity .2s ease; }
.burger[aria-expanded="true"] .burger__l1 { transform: rotate(45deg) translateY(6px); }
.burger[aria-expanded="true"] .burger__l2 { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] .burger__l3 { transform: rotate(-45deg) translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .burger__icon path { transition: none; } }
.burger:focus-visible { outline: 2px solid var(--axl-blue); outline-offset: 2px; border-radius: 6px; }
.menu-panel {
  display: none; margin: 0 7px 4px; border: 1px solid var(--axl-line); border-radius: 13px; background: #fff;
  box-shadow: 0 10px 28px rgba(26,38,77,.12); overflow: hidden;
}
.menu-panel.open { display: block; }
.menu-panel a {
  display: flex; align-items: center; gap: 10px; padding: 14px 24px; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--axl-blue-ink); text-decoration: none; border-bottom: 1px solid #F1F3F7;
}
.menu-panel li:last-child a { border-bottom: 0; }
.menu-panel a:focus-visible { outline: 2px solid var(--axl-blue); outline-offset: -2px; }

/* ---- Menu hover + selected state ------------------------------------------
   Desktop: the label takes the accent colour and a short bar slides out under
   it; the current page keeps both. Mobile panel: a tinted row with an accent
   rule down its left edge. "Current" covers WordPress's own classes plus the
   ones functions.php adds for the Episodes item (current-menu-parent on a
   single episode). The accent is one variable, so cosmic-site.css only swaps
   the colour. */
.axl-header { --axl-nav-accent: var(--axl-blue); --axl-nav-tint: rgba(18, 69, 196, .06); }
.navmenu-list > li > a { position: relative; padding: 6px 0; transition: color .15s ease; }
.navmenu-list > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--axl-nav-accent);
  transform: scaleX(0); transition: transform .2s ease;
}
.navmenu-list > li > a:hover,
.navmenu-list > li > a:focus-visible,
.navmenu-list > li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_item, .current_page_parent) > a { color: var(--axl-nav-accent); }
.navmenu-list > li > a:hover::after,
.navmenu-list > li > a:focus-visible::after,
.navmenu-list > li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_item, .current_page_parent) > a::after { transform: scaleX(1); }
.navmenu-list > li > a:focus-visible { outline: 2px solid var(--axl-nav-accent); outline-offset: 4px; border-radius: 4px; }

.menu-panel a { transition: background-color .15s ease, color .15s ease; }
.menu-panel a:hover { background: var(--axl-nav-tint); color: var(--axl-nav-accent); }
.menu-panel li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_item, .current_page_parent) > a {
  background: var(--axl-nav-tint); color: var(--axl-nav-accent);
  box-shadow: inset 3px 0 0 var(--axl-nav-accent);
}

/* ============================================================
   Overlay header — a full-width hero beneath a floating nav.
   Applied only when the page content leads with a Hero block (body gets
   .axl-overlay-header from functions.php). The header is lifted out of flow
   so the leading hero runs to the very top and spans the full viewport width;
   the hero's content is padded down so it clears the floating nav.
   ============================================================ */
.axl-overlay-header { --axl-header-h: 84px; }
.axl-overlay-header .page { position: relative; }
.axl-overlay-header .axl-header {
  position: absolute; inset: 0 0 auto 0; z-index: 1030;
}
.axl-overlay-header .axl-page > .axl-hero:first-child {
  width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw);
}
.axl-overlay-header .axl-page > .axl-hero:first-child > .container,
.axl-overlay-header .axl-page > .axl-hero:first-child > .container-fluid {
  padding-top: var(--axl-header-h);
}

/* The same, for a hero that is the first block INSIDE the page's root group
   (`axl-ui stack`) — where it lands when it is added at the top of a page built
   from a pattern. The root group's own top and side gutters would otherwise
   box it in; it breaks out of them to the viewport edges and the top. On the
   front end the group's children sit in a .wp-block-group__inner-container,
   hence both selector forms. */
.axl-overlay-header .axl-page > .axl-ui.stack:first-child:has(> .axl-hero:first-child, > .wp-block-group__inner-container > .axl-hero:first-child) {
  padding-top: 0;
}
.axl-overlay-header .axl-page > .axl-ui.stack:first-child > .axl-hero:first-child,
.axl-overlay-header .axl-page > .axl-ui.stack:first-child > .wp-block-group__inner-container > .axl-hero:first-child {
  width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw);
}
.axl-overlay-header .axl-page > .axl-ui.stack:first-child > .axl-hero:first-child > :is(.container, .container-fluid),
.axl-overlay-header .axl-page > .axl-ui.stack:first-child > .wp-block-group__inner-container > .axl-hero:first-child > :is(.container, .container-fluid) {
  padding-top: var(--axl-header-h);
}
@media (min-width: 1080px) {
  .axl-overlay-header { --axl-header-h: 104px; }
}

@media (min-width: 1480px) {
    .axl-nav {
        margin: 7px 0px;
    }
}

/* Breathing room between the leading hero and the first section after it — the
   two otherwise sit flush, with only the hero's own bottom padding between
   them, which reads as a hard seam wherever the hero and section backgrounds
   differ (e.g. hero grey against a white card). Scoped to the hero-then-stack
   shape page-home.php and its siblings always build. */
.axl-page > .axl-hero:first-child + :is(.axl-ui, .axl-episode).stack {
  margin-top: 48px;
}
/* The same 48px when the hero sits inside the root stack: the stack's own gap
   supplies 18px of it. */
.axl-page > .axl-ui.stack:first-child > .axl-hero:first-child + *,
.axl-page > .axl-ui.stack:first-child > .wp-block-group__inner-container > .axl-hero:first-child + * {
  margin-top: 30px;
}

/* ============================================================
   AXL footer
   ============================================================ */
/* Full bleed. The footer sits inside .page, which caps the document at 1440px, so
   on a wider screen its background and top border stopped short of the viewport
   edges. This is the same breakout .axl-overlay-header uses for a leading hero:
   the calc resolves to 0 until .page actually hits its max-width, so nothing moves
   on smaller screens, and body{overflow-x:hidden} contains the scrollbar's worth
   of 100vw overhang. Margin-top is set separately so it survives the shorthand-free
   margin-left/margin-right breakout, and gives the last section real breathing
   room before the footer band starts. */
.foot { border-top: 1px solid #E7EAF1; background: #fff; padding: 28px 0 40px; margin-top: 48px;
        width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* The columns stay on the site's measure rather than spreading across an
   ultrawide monitor — only the background is full width.
   The side gutter lives HERE, not on .foot, and mirrors .pad exactly
   (16/24/28px). That is what makes the footer columns line up with the page
   content above them: .fcols and .page are then the same 1440px box with the
   same inset, so their content edges land on the same pixel at every width. A
   gutter on .foot instead cannot do this — once .page hits its cap, the footer's
   own padding is measured from the viewport edge, not from the 1440px box. */
.fcols { max-width: 1440px; margin-inline: auto; padding-left: 16px; padding-right: 16px; }
.fcols { display: grid; grid-template-columns: 1fr; }
/* mobile/tablet: stacked, one section per row — each section is its own
   divider-separated band until the ≥1080px row layout below */

.fcol { padding: 22px 0; border-top: 1px solid var(--axl-line); }
.fcols > .fcol:first-child { border-top: 0; padding-top: 0; }

/* Mobile-only visual reorder: Social, Explore, Partnerships, Have a question,
   Brand. This is `order` on the grid items, not a DOM change — source order
   (and so keyboard/screen-reader order) stays Brand, Explore, Partnerships,
   Connect, Contact throughout; ≥1080px below resets every column back to
   `order: initial` so the row layout there follows source order again. */
.fcol--connect      { order: 1; }
.fcol--explore      { order: 2; }
.fcol--partnerships { order: 3; }
.fcol--contact       { order: 4; }
.fcol--brand         { order: 5; }

.fcol .up { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 12px; }
/* .up (global) already provides uppercase + letter-spacing. Matches both the
   plain <b class="up"> headings (Connect, Have a question?) and the
   <summary class="up"> accordion toggle (Explore, Partnerships) below. */

/* --- 2 & 3, mobile: Explore / Partnerships as a native accordion ---------
   <details>/<summary> gives collapse/expand for free, no JS. Reset the
   browser's own disclosure triangle and draw a simple rotating chevron
   instead; ≥1080px below forces it permanently open and hides the chevron,
   so it reads as a plain heading like every other column there. */
.fcol.facc summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.fcol.facc summary::-webkit-details-marker { display: none; }
.fcol.facc summary::after {
  content: "";
  width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.fcol.facc[open] summary::after { transform: rotate(-135deg); }
.fcol.facc .flist { margin-top: 14px; }

/* --- 1. Brand --- */
.flogo { display: block; }
.flogo .custom-logo-link { display: block; max-width: 250px; }
.flogo img, .flogo .custom-logo { display: block; width: 100%; max-width: 250px; height: auto; }
/* fills the fixed-width brand column (250px) at every breakpoint */
.ftag { font-size: 16px; font-weight: 800; color: var(--axl-ink); margin: 16px 0 10px; }
.fcopy { font-size: 12.5px; color: var(--axl-muted); line-height: 1.7; margin: 0; }

/* --- 2 & 3. Explore / Partnerships nav-menu columns --- */
.fcol .flist { list-style: none; margin: 0; padding: 0; }
.fcol .flist li { margin-top: 9px; }
.fcol .flist li:first-child { margin-top: 0; }
.fcol .flist a { display: block; color: var(--axl-muted); font-size: 12.5px; text-decoration: none; }
.fcol .flist a:hover { color: var(--axl-blue); }

/* --- 4. Connect (social), mobile: a centred row of round icon buttons ---
   Each link is a 44px disc (a comfortable tap target) with the icon at 20px;
   the label is hidden and the name comes from the link's aria-label.
   ≥1080px below turns the same markup into a labelled list, the icon sitting
   in a small rounded tile so the column lines up like its menu neighbours. */
.fcol--connect { text-align: center; }
.f-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.f-social__row {
  display: flex; align-items: center; gap: 10px;
  color: var(--axl-muted); font-size: 12.5px; text-decoration: none;
  transition: color .15s ease;
}
.f-social__tile {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--axl-line); background: var(--axl-surface-2);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.f-social__icon { width: 20px; height: 20px; }
.f-social__label { display: none; }
.f-social__row:hover,
.f-social__row:focus-visible { color: var(--axl-blue); }
.f-social__row:hover .f-social__tile,
.f-social__row:focus-visible .f-social__tile { border-color: currentColor; transform: translateY(-1px); }
.f-social__row:focus-visible { outline: none; }
.f-social__row:focus-visible .f-social__tile { box-shadow: 0 0 0 2px var(--axl-blue); }

/* Six discs do not fit one row on the narrowest phones; wrap to an even 3 × 2
   rather than leaving one stranded on a second line. */
@media (max-width: 359px) {
  .f-social { max-width: calc(3 * 44px + 2 * 10px); margin-inline: auto; }
}

/* --- 5. Have a question? — its own boxed, centered card, at every width --- */
.fcol.fcol--contact {
  text-align: center;
  border: 1px solid var(--axl-line);
  border-radius: 12px;
  background: var(--axl-surface-2);
  padding: 19px;
}
/* 19px matches :is(.axl-ui, .axl-episode) .card's own base padding
   (axl-ui.css:96) — this is the site's one other bordered/rounded card, so
   its inner spacing should read the same as everyone else's on a small
   screen, not a bespoke value */
/* higher specificity than the plain .fcol divider rule above, so this
   4-sided border replaces the section divider rather than stacking with it */
.f-badge { width: 48px; height: 48px; border-radius: 50%; background: #fff;
           display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
/* white knockout circle so the badge reads against the card's grey fill */
.fcol--contact .up { margin-bottom: 6px; }
.f-contact-text { font-size: 12.5px; color: var(--axl-muted); line-height: 1.6; max-width: 220px; margin: 0 auto 14px; }

/* --- Mobile/tablet-only touch-ups for the reordered layout above --------- */
@media (max-width: 1079px) {
  /* Brand is DOM-first, so the shared :first-child rule (above) strips its
     divider/top spacing — fine when it was also visually first, but the
     reorder now renders it last, right after the "Have a question?" card,
     with no separation. Restore the divider and give it some breathing room
     before the line, plus the same 22px padding-top every other .fcol gets
     after its divider (the :first-child rule zeroed that out too);
     .fcols > .fcol.fcol--brand matches the :first-child rule's specificity
     so it actually wins. Also center everything in the column, as asked. */
  .fcols > .fcol.fcol--brand { border-top: 1px solid var(--axl-line); margin-top: 24px; padding-top: 22px; }
  .fcol--brand { text-align: center; }
  .flogo img,
  .flogo .custom-logo-link { margin-inline: auto; }
}

/* --- Landscape tablet footer (1024–1079px) -------------------------------
   Still the stacked/reordered layout, but with room to spare: Connect stays
   on top as the icon row, Explore, Partnerships and the contact card share
   one row beneath it (menus permanently open, as at ≥1080px), and the brand
   block closes it out. Ends at 1079px because ≥1080px has its own 5-column row. */
@media (min-width: 1024px) and (max-width: 1079px) {
  .fcols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .fcol--connect, .fcol--brand { grid-column: 1 / -1; }

  .fcol.facc summary { cursor: default; pointer-events: none; margin-bottom: 12px; }
  .fcol.facc summary::after { display: none; }
  .fcol.facc::details-content { content-visibility: visible !important; display: block !important; }
  .fcol.facc .flist { display: block !important; content-visibility: visible !important; margin-top: 0; }
}

/* --- Sub-footer bar: legal menu (left) + "Made with..." tagline (right) ---
   Same two-layer full-bleed trick as .foot/.fcols: .fbar is the divider —
   it spans the full viewport width so the line isn't capped at 1440px —
   while .fbar-inner holds the actual content back to the site's measure. */
.fbar { border-top: 1px solid var(--axl-line);
        width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.fbar-inner { max-width: 1440px; margin-inline: auto; padding: 20px 16px;
              display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.flegal { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0; padding: 0; }
.flegal li { display: flex; align-items: center; gap: 10px; }
.flegal li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--axl-muted); flex: none; }
.flegal a { color: var(--axl-muted); font-size: 12.5px; text-decoration: none; }
.flegal a:hover { color: var(--axl-blue); }
.fmade { display: flex; align-items: center; gap: 6px; color: var(--axl-muted); font-size: 12.5px; margin: 0; }
.fmade__heart { flex: none; }

/* ---------- ≥640px ---------- */
@media (min-width: 640px) {
  .pad { padding: 20px 24px 30px; }
  .axl-nav { padding: 14px 20px; }
  .axl-nav .logo img,
  .axl-nav .logo .custom-logo { height: 46px; }
  .fcols { padding-left: 24px; padding-right: 24px; }
  .fcol { padding-top: 26px; padding-bottom: 26px; }
  .fcol.fcol--contact { padding: 22px; } /* matches .card's own ≥640px padding (axl-ui.css:431) */
  .fbar-inner { flex-direction: row; justify-content: space-between; text-align: left; padding: 20px 24px; }
  .flegal { justify-content: flex-start; }
}

/* ---------- ≥1080px ---------- */
@media (min-width: 1080px) {
  .pad { padding: 24px 28px 34px; }
  .navmenu { display: flex; }
  .navicons { display: none; }
  .menu-panel { display: none !important; }

  /* one row: brand and the contact card are fixed at 250px of content plus
     their own divider padding (28px each side, or one side for the first
     column since the outer gutter covers its other side) — 250+28=278px,
     250+28+28=306px. The 3 menu-like sections between them stretch to fill
     whatever's left, in equal shares. align-items:stretch (grid's default,
     set explicitly here since a plain .fcol row would otherwise size to its
     own content) is what makes every divider run the full row height instead
     of stopping wherever its own column's content happens to end. */
  .fcols { grid-template-columns: 278px repeat(3, 1fr) 306px; align-items: stretch; padding-left: 28px; padding-right: 28px; padding-bottom: 30px;}
  /* undo the mobile-only reorder above — the row layout follows source order:
     Brand, Explore, Partnerships, Connect, Contact */
  .fcol--brand, .fcol--explore, .fcol--partnerships, .fcol--connect, .fcol--contact { order: initial; }
  .fcol { padding: 4px 28px; border-top: 0; border-left: 1px solid var(--axl-line); }
  .fcols > .fcol:first-child { border-left: 0; padding-left: 0; }
  .fcol.fcol--contact { padding: 24px 28px; }
  /* top matches the bottom so the badge has room inside the card's border —
     the other columns' 4px left it flush against the top edge. The card still
     stretches to the row's height (align-items:stretch, above). */
  .foot { padding: 30px 0 40px; }
  .fbar-inner { padding: 22px 28px; }

  /* Explore / Partnerships: no longer an accordion — permanently expanded,
     chevron hidden, heading gets back the other columns' spacing below it. */
  .fcol.facc summary { cursor: default; pointer-events: none; margin-bottom: 12px; }
  .fcol.facc summary::after { display: none; }
  /* Current Chromium/Firefox hide a closed <details>'s body by applying
     content-visibility:hidden to an internal ::details-content pseudo-element
     that wraps the slotted children — not to the children themselves, so
     overriding .flist's own content-visibility (below) has no effect on its
     own. The pseudo-element is what actually needs overriding to force the
     accordion open here. */
  .fcol.facc::details-content { content-visibility: visible !important; display: block !important; }
  .fcol.facc .flist { display: block !important; content-visibility: visible !important; margin-top: 0; }

  /* Connect: back to the labelled vertical list, left-aligned like its
     sibling columns instead of the mobile icon-row. */
  .fcol--connect { text-align: left; }
  .f-social { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; }
  .f-social__tile { width: 28px; height: 28px; border-radius: 8px; }
  .f-social__icon { width: 16px; height: 16px; }
  .f-social__label { display: inline; }
  .f-social__row:hover .f-social__tile { transform: none; }
}

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

/* ============================================================
   Back to top — a fixed frosted disc, revealed by site.js once
   the reader is a screen down the page. This is the LIGHT site's
   glass: a brand-blue tint, because white-on-white would vanish
   against paper. The dark site's white pane is in cosmic-site.css.
   ============================================================ */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;                 /* above the overlay header's 1030 */
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(18, 69, 196, .28);
  background: linear-gradient(160deg, rgba(18, 69, 196, .22), rgba(18, 69, 196, .08));
  color: var(--axl-blue);
  /* saturate() keeps whatever scrolls under the disc from going flat and grey. */
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px -12px rgba(19, 28, 63, .45);
  /* Hidden until scrolled: visibility also takes it out of the tab order. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Hover/focus lifts and swells the disc, firms the rim and throws a soft blue
   glow, rather than swapping the fill — gradients do not interpolate reliably,
   and the frost should stay frost. */
.to-top:hover,
.to-top:focus-visible {
  color: var(--bs-link-hover-color);
  border-color: rgba(18, 69, 196, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 28px -12px rgba(19, 28, 63, .55);
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 0 50px rgba(100, 140, 255, .6));
}
.to-top:focus-visible {
  outline: 2px solid var(--axl-blue);
  outline-offset: 3px;
}

@media (min-width: 1080px) {
  .to-top { right: 32px; bottom: 32px; }
}

/* ---- 404 page (404.php) --------------------------------------------- */
.axl-404 { min-height: 60vh; display: flex; align-items: center; }
.axl-404 > .container { width: 100%; }
.axl-404__inner { max-width: 36rem; }
.axl-404__disc {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 14px 32px -14px rgba(19, 28, 63, .45);
}
/* The disc art carries its own light rim — scale it past the frame to crop it. */
.axl-404__disc img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
}
.axl-404__title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .75rem; }
.axl-404__lead  { color: var(--axl-muted); margin-bottom: 1.75rem; }

/* ---- Reading progress (pages with the "On This Page" nav) -------------
   Added to <body> by site.js, which sets the fill's scaleX as the main column
   scrolls past. 3px, above the overlay header (1030) and the back-to-top
   button (1040), and clear of the WordPress admin bar when logged in — which
   is 46px tall below 783px and scrolls away (so 0) below 601px. */
.axl-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1050;
  pointer-events: none;
}
.axl-progress__bar {
  display: block;
  height: 100%;
  background: var(--axl-blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.admin-bar .axl-progress { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .axl-progress { top: 46px; }
}
@media (max-width: 600px) {
  .admin-bar .axl-progress { top: 0; }
}

/* Legal menu + developer credit share one row. */
.flegal-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.fcredit { color: var(--axl-muted); font-size: 12.5px; text-decoration: none; }
.fcredit:hover { color: var(--axl-blue); }
.flegal-row .flegal + .fcredit::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 10px; vertical-align: middle; border-radius: 50%; background: var(--axl-muted); }
@media (min-width: 640px) { .flegal-row { justify-content: flex-start; } }