/*
Theme Name: Movieguide 2026
Author: Movieguide®
Description: The 2026 Movieguide® redesign — a clean, family-first look with light/dark themes, acceptability badges, review shelves, a daily news river, and donation-focused Give pages. Built from the Claude Design "Movieguide Redesign v2" file.
Version: 1.12.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: movieguide-2026
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --bg: #ffffff;
  --ink: #000000;
  --ink80: rgba(0, 0, 0, 0.8);
  --ink56: rgba(0, 0, 0, 0.56);
  --ink40: rgba(0, 0, 0, 0.58);
  --ink26: rgba(0, 0, 0, 0.26);
  --ink16: rgba(0, 0, 0, 0.16);
  --ink08: rgba(0, 0, 0, 0.08);
  --card: #f4f4f4;
  --card2: #ffffff;
  --hair: #efeff0;
  --chipbd: rgba(0, 0, 0, 0.18);
  --glass: rgba(255, 255, 255, 0.82);
  --accent: #003bff;
  --fam-ink: #0b7a3e;
  --fam-bg: rgba(11, 122, 62, 0.10);
  --cau-ink: #8a6100;
  --cau-bg: rgba(170, 120, 0, 0.13);
  --ext-ink: #b3261e;
  --ext-bg: rgba(179, 38, 30, 0.10);
  --pill-active-bg: #000000;
  --pill-active-ink: #ffffff;
  --dark-band: #0a0a0a;
  /* Header height, and so also where the sticky ad bar parks beneath it. */
  --mg-header-h: 68px;
  /* Raised to the admin bar's height for logged-in users, below. */
  --mg-admin-bar-h: 0px;
  /* The sticky ad bar's measured height, set by theme.js once its creative has
     loaded. The rails park below it; 0 until then, and 0 forever without JS,
     which tucks the top of a rail under the bar rather than breaking it. */
  --mg-sticky-ad-h: 0px;
  /*
   * How much of the top band sits *above* the header: the welcome mat's measured
   * height when Theme Banners has it sticking to the top, and 0 otherwise, which
   * is the ordinary state. Everything that pins itself below the header — the
   * header, the sticky banner, the takeover rails — adds this, so one number
   * moves the whole band and there is no second list of offsets to keep in step.
   *
   * Measured by theme.js because a mat is exactly as tall as whatever creative
   * loaded into it, which CSS cannot name. 0 until that runs and 0 forever
   * without JS: the mat then overlaps the header while pinned rather than
   * displacing it, which is the one degradation available and is only reachable
   * on a site that both turned this on and has JS off.
   */
  --mg-mat-h: 0px;
  /* Every centred container on the page. Dropped to --mg-takeover-w when the
     background rails are running — see BACKGROUND TAKEOVER at the end. */
  --mg-wrap-max: 1240px;
  /*
   * The cap on a *full-bleed band* — an element whose background runs edge to
   * edge while its content sits in a centred wrapper inside it. `none` is the
   * ordinary state and the whole point: a band writes
   *
   *   max-width: var(--mg-band-max); margin-inline: auto;
   *
   * which is two no-ops until the background takeover sets this to the width of
   * the narrowed page, and is then exactly the constraint the band needs.
   *
   * This is published rather than applied from a list of band class names,
   * because the theme is not the only thing that draws one — the dr-teddy
   * plugin's Ask band is full-bleed too, and the theme names no plugin. Any
   * band, from anywhere, opts in with those two lines and needs to know nothing
   * about the takeover or its breakpoint.
   */
  --mg-band-max: none;
  /* Background takeover geometry: the content column, and one 240x960 rail.
     There is no gutter between the two — a rail butts straight up against the
     edge of the column. The 24px of padding inside .mg-wrap already keeps text
     and images off a creative, so a second gap here would buy nothing and only
     push both rails further out. */
  --mg-takeover-w: 1020px;
  --mg-rail-w: 240px;
  --mg-rail-h: 960px;
}

html[data-theme="dark"] {
  --bg: #000000;
  --ink: #ffffff;
  --ink80: rgba(255, 255, 255, 0.82);
  --ink56: rgba(255, 255, 255, 0.6);
  --ink40: rgba(255, 255, 255, 0.58);
  --ink26: rgba(255, 255, 255, 0.28);
  --ink16: rgba(255, 255, 255, 0.16);
  --ink08: rgba(255, 255, 255, 0.1);
  --card: rgba(255, 255, 255, 0.08);
  --card2: rgba(0, 0, 0, 0.35);
  --hair: rgba(255, 255, 255, 0.12);
  --chipbd: rgba(255, 255, 255, 0.24);
  --glass: rgba(0, 0, 0, 0.72);
  --fam-ink: #57d98a;
  --fam-bg: rgba(87, 217, 138, 0.14);
  --cau-ink: #f5c04e;
  --cau-bg: rgba(245, 192, 78, 0.15);
  --ext-ink: #ff7b73;
  --ext-bg: rgba(255, 123, 115, 0.14);
  --pill-active-bg: #ffffff;
  --pill-active-ink: #000000;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: 'Manrope', 'Helvetica Neue', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }

button, input, textarea, select { font-family: 'Manrope', 'Helvetica Neue', sans-serif; }

@keyframes mgFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mg-wrap { max-width: var(--mg-wrap-max); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.mg-wrap--narrow { max-width: 860px; }
.mg-wrap--article { max-width: 760px; }
/*
 * A reading measure that stays where it was put.
 *
 * The .mg-wrap widths above are *columns*: they centre themselves in the page
 * and carry the site gutter, which is right for a band but wrong for a block of
 * copy inside one — that copy ends up indented by half the leftover space, away
 * from the heading above it. This is the same 760px measure with neither the
 * auto margins nor the padding, so a letter set inside a section lines up with
 * everything else in it. Core has no equivalent: every width it offers centres.
 */
.mg-measure { max-width: 760px; }

/*
 * The content wrapper starts immediately below the header on every template,
 * whatever is first inside it.
 *
 * flow-root makes this element contain its descendants' margins instead of
 * letting the topmost one collapse out through it. Without that, a leading block
 * with a top margin — the home page's opening banner, or whatever an editor puts
 * first — hands its margin to this wrapper and pushes the wrapper's own top edge
 * down by that much. The page looks the same either way, so it went unnoticed
 * until something was positioned against this box: the background rails are laid
 * out inside it, so they started lower on the home page than on an archive,
 * where .mg-main.mg-wrap's padding stops the collapse by accident.
 *
 * Fixed here rather than by giving the home page padding of its own, so it holds
 * for any template and any first block, and so the rails need to know nothing
 * about what the page opens with.
 */
#mg-site-content { display: flow-root; }

.mg-main { animation: mgFadeUp 0.35s ease; }
/* Templates whose <main> is itself the content wrapper open under the header.
   Canvas templates (a bare .mg-main) lay out their own spacing. */
.mg-main.mg-wrap { padding-top: 40px; }
/* The 404 recovery page leads with a kicker rather than a title, so it starts lower. */
body.error404 .mg-main.mg-wrap { padding-top: 64px; }
/* Trailing spacer that keeps listing pages off the footer. */
.mg-main__end { height: 64px; }
/* A title or section head used as the page header sits directly inside <main>. */
.mg-main > .mg-page-title,
.mg-main > .mg-section__head { margin-bottom: 28px; }
.mg-main > .mg-section__head .mg-section__sub { font-size: 15px; }
/* Off-screen field the share "copy link" execCommand fallback selects from. */
.mg-copy-field { position: fixed; opacity: 0; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}
.screen-reader-text:focus,
.mg-skip-link:focus {
  clip: auto;
  width: auto;
  height: auto;
  overflow: visible;
}
.mg-skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 1000;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  font-weight: 700;
}

/* ============================================================
   HEADER / TOP NAV
   ============================================================ */
.mg-header {
  position: sticky;
  top: calc(var(--mg-admin-bar-h) + var(--mg-mat-h));
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: var(--glass);
  border-bottom: 1px solid var(--hair);
}

body.admin-bar { --mg-admin-bar-h: 32px; }

/* Welcome mat: in flow above the header, so it scrolls away for good. */
.mg-ad-welcomemat {
  display: flex;
  justify-content: center;
  padding: 12px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--hair);
}

/*
 * …unless Theme Banners pins it, in which case it takes the top of the screen
 * and the header band follows it down by --mg-mat-h. Above the header in the
 * stacking order as well as on the page: if the measurement is late or missing
 * the two overlap, and the mat covering the header for a moment is the better
 * way round — the header is a fixed 68px the reader recovers by scrolling, while
 * a half-hidden ad is neither seen nor honestly served.
 */
.mg-ad-welcomemat--sticky {
  position: sticky;
  top: var(--mg-admin-bar-h);
  z-index: 51;
}

/*
 * The verse strip lives in this area rather than in the home page's content, so
 * it appears above the header on every view. It arrives as a widget, which means
 * it comes wrapped in the slot chrome an ad would use — and the mat is already a
 * band with its own padding, surface and hairline. So the strip gives up the
 * second set of all three instead of nesting a band inside a band, and the
 * slot's 970px cap and centred text, which suit a creative rather than a line of
 * prose, give way to the page's own width and alignment.
 */
.mg-ad-welcomemat .mg-ad__slot { max-width: none; text-align: left; }
.mg-ad-welcomemat .mg-daily { border-bottom: 0; max-width: none; }
.mg-ad-welcomemat .mg-daily__inner { padding: 0; }

/*
 * Sticky bar: parks directly under the header and travels with it. Its z-index
 * sits below the header's so the header wins if a tall creative ever overlaps,
 * and it carries the header's own glass so page content passing underneath
 * does not read through it.
 *
 * No padding, margin or border of its own at any width: the bar is exactly as
 * tall as the creative inside it, flush to the header above and the page below.
 */
.mg-ad-stickybar {
  position: sticky;
  top: calc(var(--mg-admin-bar-h) + var(--mg-mat-h) + var(--mg-header-h));
  z-index: 49;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: var(--glass);
  /* Full-bleed band: see --mg-band-max in :root. */
  max-width: var(--mg-band-max);
  margin-inline: auto;
}

/* The slot's own column gap would show as a gutter in a bar with no padding. */
.mg-ad-stickybar .mg-ad { gap: 0; }

/*
 * Article Start: first thing in the content column, above the article or the
 * card grid. Centred on the page's own width rather than full-bleed, because it
 * belongs to the column it introduces, and spaced off the header above it while
 * leaving the template's own top spacing to open the content beneath.
 */
.mg-ad-articlestart {
  display: flex;
  justify-content: center;
  max-width: var(--mg-wrap-max);
  margin: 0 auto;
  padding: 24px 0 0 0
}

/*
 * Both bars centre their .mg-ad as a flex item, which leaves it shrink-to-fit.
 * A GPT creative is an empty div until the ad loads, so it contributes no
 * intrinsic width and the whole column collapses to whatever else is in the
 * slot — the banner never reaches its 728px cap. Give .mg-ad a definite width
 * so the percentage widths below it have something to resolve against, and
 * centre the capped banner inside the wider slot.
 */
.mg-ad-welcomemat .mg-ad,
.mg-ad-stickybar .mg-ad,
.mg-ad-articlestart .mg-ad {
  width: 100%;
}
.mg-ad-welcomemat .movieguide_banner_responsive,
.mg-ad-stickybar .movieguide_banner_responsive,
.mg-ad-articlestart .movieguide_banner_responsive {
  margin-inline: auto;
}

.mg-header__inner {
  max-width: var(--mg-wrap-max);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--mg-header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.mg-header__logo { display: flex; align-items: center; gap: 10px; }
.mg-header__logo img { height: 40px; width: auto; display: block; }
html[data-theme="light"] .mg-header__logo img.mg-logo--filter { filter: brightness(0); }
html[data-theme="dark"] .mg-header__logo img.mg-logo--filter { filter: none; }

.mg-topnav { display: flex; gap: 6px; margin-left: auto; }
.mg-topnav ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }

.mg-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 80px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: inherit;
}
.mg-pill:hover { background: var(--card); color: inherit; }
.mg-pill.is-active { background: var(--pill-active-bg); color: var(--pill-active-ink); }
.mg-pill.is-active:hover { background: var(--pill-active-bg); color: var(--pill-active-ink); }

.mg-header__actions { display: flex; align-items: center; gap: 10px; }

/* ---------- Expanding search field (header icon + mobile bottom nav) ---------- */
/* Closed, the icon is all there is: the form is exactly the size of its own
   button. Open, a border fades in around that icon and the form grows leftwards
   over the nav links it sits beside — how far is the one thing CSS cannot know,
   so theme.js measures the run to the logo (header) or to the bar's own padding
   (bottom nav) and sets --mg-search-w. */
.mg-searchbox {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

/* Two classes deep on purpose. The movieguide-new plugin's search layer adds
   .mg-suggest-anchor { position: relative } to every form holding a search
   field, and its inline CSS prints after this sheet — at one class it would win
   the tie, drop this form back into normal flow, and the field would grow
   rightwards from its left edge instead of leftwards from the icon. */
.mg-searchbox .mg-searchbox__form {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 44px;
  height: 44px;
  padding-left: 0;
  border: 1px solid transparent;
  border-radius: 80px;
  background: transparent;
  overflow: hidden;
  transition: width 0.19s cubic-bezier(0.22, 0.61, 0.36, 1),
              padding-left 0.19s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.12s ease,
              background-color 0.12s ease;
}
.mg-searchbox.is-open .mg-searchbox__form {
  width: var(--mg-search-w, 300px);
  padding-left: 16px;
  border-color: var(--chipbd);
  /* Opaque, not --glass: this covers live nav links rather than page behind. */
  background: var(--bg);
  /* Closed, the pill masks the 0-wide field; open, it must not clip the
     suggestions panel the movieguide-new plugin appends to this form. */
  overflow: visible;
}

/* That panel drops below the field by default, which on the bottom bar would be
   off the bottom of the screen. (The plugin aims the same rule at a
   .mg-bnav-search wrapper this theme no longer renders.) */
.mg-searchbox--bottomnav .mg-suggest {
  top: auto;
  bottom: calc(100% + 10px);
}
.mg-searchbox--header.is-open .mg-searchbox__form { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12); }

/* The field takes whatever width the form has, so it is 0 wide when closed. */
.mg-searchbox__input,
.mg-searchbox__input:focus,
.mg-searchbox__input:focus-visible {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  opacity: 0;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.14s ease;
}
.mg-searchbox.is-open .mg-searchbox__input { opacity: 1; }
.mg-searchbox__input::placeholder { color: var(--ink40); font-weight: 500; }
.mg-searchbox__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 42px, not 44px: the form is 44px wide closed and its border takes 1px a side,
   so this is the whole of the form's content box and the icon stays centred. */
.mg-searchbox__btn {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.14s ease, color 0.14s ease;
}
/* With the expanding field switched off there is no 44px slot around the icon,
   so the link stands in for it and carries that size itself. */
.mg-searchbox__btn--solo { flex: 0 0 44px; width: 44px; height: 44px; }
.mg-searchbox__btn svg { display: block; flex: none; }
.mg-searchbox__btn:hover { background: var(--card); color: var(--ink); }
.mg-searchbox__btn.is-active { background: var(--pill-active-bg); color: var(--pill-active-ink); }
/* Open, the form's own border is the frame — the icon drops its pill. */
.mg-searchbox.is-open .mg-searchbox__btn,
.mg-searchbox.is-open .mg-searchbox__btn:hover {
  background: transparent;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .mg-searchbox__form,
  .mg-searchbox__input { transition: none; }
}

.mg-theme-toggle {
  width: 44px; height: 44px;
  border-radius: 80px;
  border: 1px solid var(--chipbd);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.mg-theme-toggle:hover { background: var(--card); }

.mg-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 80px;
  background: var(--accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.mg-btn:hover { opacity: 0.88; color: #ffffff; }
.mg-btn--lg { padding: 13px 26px; font-size: 15px; }

/*
 * ...and the same button as a core Buttons block, wherever one is placed.
 *
 * .mg-btn is the class the theme's own templates print. An editor cannot type
 * it onto a core Button — the class field there lands on the wrapper, not on
 * the <a> — so without this a Button dropped on a page came out in core's
 * default grey while every button the theme drew was an accent pill. The two
 * are now one button with two ways of asking for it, and core's Outline style
 * is the quieter one beside it.
 *
 * Two classes so this beats core's one-class rules whatever the load order —
 * they are printed per-block on this theme, so the order is not fixed. The CTA
 * Band's own pair further down is two classes as well and comes later in this
 * file, which is what keeps a band's buttons its own.
 */
.wp-block-button .wp-block-button__link {
  padding: 13px 26px;
  border-radius: 80px;
  background: var(--accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  border: none;
}
.wp-block-button .wp-block-button__link:hover { opacity: 0.88; color: #ffffff; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--chipbd);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--card);
  color: var(--ink);
  opacity: 1;
}
/* Core lays a Buttons block out with the global block gap, which this theme has
   no theme.json to set; 10px is the gap between the theme's own pills. */
.wp-block-buttons { gap: 10px; }

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mg-bottomnav {
  display: none;
  position: fixed;
  left: 50%;
  /* --mg-kb-lift is set by theme.js while the search field is open, so an
     on-screen keyboard cannot sit over the field being typed into. */
  transform: translate(-50%, calc(-1 * var(--mg-kb-lift, 0px)));
  transition: transform 0.18s ease;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 80px;
  border: 1px solid var(--ink08);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  /* How many links there are is the Primary menu's decision, so the bar
     scrolls sideways instead of growing past the viewport. */
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mg-bottomnav::-webkit-scrollbar { display: none; }
.mg-bottomnav .mg-pill { flex: 0 0 auto; white-space: nowrap; padding: 11px 20px; font-weight: 700; }
@media (max-width: 430px) { .mg-bottomnav { gap: 2px; padding: 5px; } }
/* The expanding field is absolutely placed and grows only as far as the bar's
   padding box, so the bar's overflow-x neither clips it nor gains a scroll. */
.mg-bottomnav .mg-searchbox { position: relative; }

@media (max-width: 760px) {
  .mg-topnav { display: none !important; }
  /*
   * The search icon goes to the bottom bar and the theme toggle goes away, both
   * being controls the reader reaches for part-way down a page — but the CTA
   * keeps the header. It is the one thing the site is asking of the reader, and
   * hiding it behind a scroll to the bottom bar is the wrong trade.
   *
   * So the actions row is no longer hidden wholesale; only the search inside it
   * is, and the row takes the space the nav pills gave up. Nothing else remains
   * to push it right — .mg-topnav carried the margin on desktop — so it carries
   * its own here, and stays out of the way when the CTA is switched off and the
   * row is empty.
   */
  .mg-header__actions { margin-left: auto; }
  .mg-header__actions .mg-searchbox { display: none !important; }
  .mg-header__inner > .mg-theme-toggle { display: none !important; }
  /* Sized to the 44px touch target the pills and the toggle already use, and
     held on one line: the title is an editor's to write, and a two-word one
     wrapping would push the header taller than --mg-header-h claims it is. */
  .mg-header__actions .mg-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 22px;
    font-size: 15px;
    white-space: nowrap;
  }
  .mg-bottomnav { display: flex !important; }
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
/*
 * Section rhythm is a top margin, not top padding, so that neighbouring gaps
 * collapse into one instead of summing: a section that sets its own spacing —
 * the ad slot below is the case — now reads as one gap between it and what
 * follows rather than the two values added together. The modifiers are the same
 * value at a different size, so they are margins too; a padding-top left behind
 * on one of them would land on top of the margin rather than replace it.
 */
.mg-section { margin-top: 56px; }
.mg-section--tight { margin-top: 40px; }
.mg-section--loose { margin-top: 64px; }
.mg-section--end { padding-bottom: 64px; }

/* An ad is furniture between sections rather than a section of the page, so it
   sits closer than the editorial rhythm around it, and evenly on both sides. */
.mg-section.wp-block-mg26-ad-slot { margin-top: 24px; margin-bottom: 24px; }

.mg-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mg-section__head h2 { margin: 0; font-size: 26px; font-weight: 800; }
.mg-section__sub { font-size: 14px; font-weight: 600; color: var(--ink40); }
.mg-section__more { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--ink40); }
.mg-section__more:hover { color: var(--accent); }

/* Recirculation modules (related stories, popular, more like this) close an
   article or review, so they sit tighter and read a step down from a
   page-level section. After .mg-section__head h2, which they override. */
.mg-section--recirc { margin-top: 48px; }
.mg-section--recirc h2 { margin: 0 0 20px; font-size: 22px; font-weight: 700; }
.mg-section--recirc .mg-section__head h2 { margin: 0; }

.mg-page-title {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* The block styles registered in inc/blocks.php, so landing-page copy can be
   set from the editor's Styles tab instead of by typing a class into Additional
   CSS Classes. That is the whole point of them: a class typed into that field
   is invisible to the next editor and ends up as a page-specific layer nobody
   reuses, while a style is a named treatment any page can pick.
   Margins are zero because the block that holds them sets the rhythm — a Stack
   with a gap, usually. */
/* Capped at the theme's one reading measure — the same 760px .mg-wrap--article
   uses. A standfirst is read as a sentence, and a sentence
   set across the full 1240px column is not; the cap is here rather than on each
   page so no landing page has to remember it. */
.is-style-lede {
  margin: 0;
  max-width: 760px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink56);
}
.is-style-lede strong { color: var(--ink); }
.is-style-note {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink80);
}
/* The lift a bold phrase gets in body copy, as .is-style-lede's already has. */
.is-style-note strong { color: var(--ink); font-weight: 700; }
/* The small tracked label over a heading. Capitalised here rather than typed in
   capitals, so the words stay readable in the editor and a screen reader says
   them instead of spelling them out. */
.is-style-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink40);
}
/* The legal line, the disclaimer, the note under a form. */
.is-style-fine {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink40);
}
.is-style-fine strong { color: var(--ink56); font-weight: 700; }
/*
 * The headline of a band, sized off the heading's own level.
 *
 * Level rather than a font-size setting because an editor should be choosing
 * the level anyway — it is what the document outline is built from — and being
 * asked for the size as well is how a page ends up with an h4 that looks like a
 * title. Pick the right level and the size comes with it.
 */
.is-style-display {
  margin: 0;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.015em;
}
h1.is-style-display { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; }
h2.is-style-display { font-size: clamp(26px, 3.2vw, 34px); }
h3.is-style-display { font-size: clamp(21px, 2.4vw, 26px); }
:is(h4, h5, h6).is-style-display { font-size: 19px; }

/* ============================================================
   NEWS RIVER & GRIDS
   ============================================================ */
.mg-news-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 40px;
  align-items: start;
}

.mg-topstory { display: flex; flex-direction: column; gap: 14px; }
.mg-topstory:hover { opacity: 0.9; color: inherit; }
.mg-topstory img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--card);
}
.mg-topstory__kicker { display: flex; align-items: center; gap: 10px; }
.mg-topstory > span { display: flex; flex-direction: column; gap: 10px; }
.mg-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); }
.mg-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink26); flex-shrink: 0; }
.mg-cat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink40);
}
.mg-topstory__title { display: block; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.22; }
.mg-topstory__excerpt { display: block; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink56); }
.mg-topstory__excerpt p { margin: 0; }

/* Lead story at the head of a news archive: image beside the text, larger
   headline, and a gap before the grid of everything else. */
.mg-topstory--lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px;
  align-items: center;
  margin-bottom: 48px;
}
.mg-topstory--lead > span { gap: 12px; }
.mg-topstory--lead .mg-topstory__title { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; }

.mg-river { display: flex; flex-direction: column; }
.mg-river__item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
}
.mg-river__item:hover { opacity: 0.8; color: inherit; }
.mg-river__when { flex: 0 0 72px; display: flex; flex-direction: column; gap: 3px; }
.mg-river__cat {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}
.mg-river__time { font-size: 12px; font-weight: 700; color: var(--ink40); font-variant-numeric: tabular-nums; }
.mg-river__body { display: flex; flex-direction: column; gap: 3px; }
.mg-river__title { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.4; }
.mg-river__thumb {
  flex: 0 0 72px;
  width: 72px; height: 52px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--card);
}
.mg-river__more { padding: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--ink40); }
.mg-river__more:hover { color: var(--accent); }

.mg-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 28px;
}
.mg-news-card { display: flex; flex-direction: column; gap: 12px; }
.mg-news-card:hover { opacity: 0.85; color: inherit; }
/* .mg-news-card__ph stands in for the image when a post has no thumbnail. */
.mg-news-card img,
.mg-news-card__ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--card);
}
.mg-news-card__meta { display: flex; flex-direction: column; gap: 6px; }
.mg-news-card__cat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.mg-news-card__title { font-size: 16px; font-weight: 600; line-height: 1.35; }
.mg-news-card__date { font-size: 12px; font-weight: 600; color: var(--ink40); }

/* ============================================================
   HOME: DAILY STRIP
   ============================================================ */
.mg-daily {
  border-bottom: 1px solid var(--hair);
  /* Full-bleed band: see --mg-band-max in :root. */
  max-width: var(--mg-band-max);
  margin-inline: auto;
}
.mg-daily__inner {
  max-width: var(--mg-wrap-max);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.mg-daily__hello { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.mg-daily__greeting { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.mg-daily__date { font-size: 13px; font-weight: 600; color: var(--ink40); }
/* Label, quote and reference all read as one line: the quote and the reference
   are inline so the reference follows the closing quote mark rather than
   dropping under it, and the label sits on their shared baseline. A quote too
   long for the width still wraps — one line is the shape, not a cap. */
.mg-daily__verse { flex: 1; min-width: 240px; display: flex; align-items: baseline; gap: 10px; }
.mg-daily__verse-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  flex-shrink: 0;
}
.mg-daily__verse-text { font-size: 14px; font-weight: 500; font-style: italic; line-height: 1.5; color: var(--ink80); display: inline; }
.mg-daily__verse-ref { font-size: 12px; font-weight: 700; color: var(--ink40); display: inline; margin-left: 6px; white-space: nowrap; }
.mg-daily__pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  background: var(--card);
  flex-shrink: 0;
}
.mg-daily__pick:hover { opacity: 0.9; color: inherit; }
.mg-daily__pick img {
  width: 42px; height: 60px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--bg);
}
.mg-daily__pick-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink40); display: block; }
.mg-daily__pick-title { font-size: 14px; font-weight: 700; line-height: 1.15; display: block; margin-top: 4px; }
.mg-daily__pick .mg-badge { background: transparent; padding: 0; margin-top: 4px; font-size: 10px; }


/* ============================================================
   HOME: LISTS CARDS
   ============================================================ */
.mg-lists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}
.mg-list-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #111;
}
.mg-list-card:hover { opacity: 0.9; }
.mg-list-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.mg-list-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%);
}
.mg-list-card__text {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mg-list-card__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); }
.mg-list-card__title { font-size: 19px; font-weight: 700; line-height: 1.25; }
.mg-list-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink40);
  margin-top: 12px;
}

/* ============================================================
   HOME: TOP 10 / RANKED LISTS
   ============================================================ */
.mg-service-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

.mg-chip {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mg-chip:hover { background: var(--card); color: inherit; }
.mg-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.mg-chip.is-active:hover { color: #ffffff; }
.mg-chip--sm { padding: 6px 14px; font-size: 13px; }

/* Multi-column rather than grid: ranks read top-to-bottom down each column
   (1-4, then 5-7, then 8-10) instead of left-to-right across rows. Still up
   to three columns, still collapsing to one on narrow screens. */
.mg-ranked {
  columns: 300px 3;
  column-gap: 48px;
}
.mg-ranked__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
  break-inside: avoid;
}
.mg-ranked__item:hover { opacity: 0.8; color: inherit; }
.mg-ranked__rank {
  flex: 0 0 32px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink26);
  font-variant-numeric: tabular-nums;
}
.mg-ranked__body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mg-ranked__title { font-size: 15px; font-weight: 700; }
.mg-ranked__sub { font-size: 12px; font-weight: 500; color: var(--ink40); }

.mg-tabpane[hidden] { display: none; }

/* ============================================================
   ADS
   ============================================================ */
.mg-ad { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mg-ad__slot { width: 100%; max-width: 970px; text-align: center; }
.mg-ad__placeholder {
  width: 100%;
  max-width: 970px;
  height: 120px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: repeating-linear-gradient(45deg, var(--card), var(--card) 12px, transparent 12px, transparent 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 12px;
  color: var(--ink40);
}
.mg-ad__placeholder--box { max-width: 336px; height: 280px; }

/* Post Article and Article More are the two slots that stand between sections
   rather than inside one, which makes them the only .mg-ad a template drops
   straight into .mg-main — the Ad Slot block wraps itself in .mg-section, and
   the in-article slots take their spacing from .mg-article-head's gap. Only a
   top margin: whatever follows opens with its own padding-top, so setting both
   sides would double the gap below — except on a review, which ends on Article
   More and so has nothing following it to do that. */
.mg-main > .mg-ad { margin-top: 48px; }
.mg-main > .mg-ad:last-child { margin-bottom: 48px; }

/* ============================================================
   HIDE-WHEN-AD-PRESENT UTILITIES
   ============================================================
   One class per piece of ad furniture the body announces (see
   mg26_ad_body_classes()). Put the matching class on anything that should step
   aside when that ad is on the page — a strip that would otherwise be the
   second band under the header, a promo the takeover has already crowded out.
   They are content decisions, so they are applied in the editor's Additional
   CSS class(es) field rather than baked into a template. */
.mg-has-takeover .mg-takeover-hidden { display: none; }
.mg-has-welcome-mat .mg-welcome-mat-hidden { display: none; }
.mg-has-sticky .mg-sticky-hidden { display: none; }

/* ============================================================
   BACKGROUND TAKEOVER (mg-ad-bg-left / mg-ad-bg-right)
   ============================================================
   Two 240x960 rails flanking the page, and the narrower page that makes room
   for them. Both are printed by mg26_render_bg_rails() at the end of
   #mg-site-content whenever either rail area has a widget; whether they are
   *shown* is settled here, because only CSS knows how wide the viewport is.

   Everything below is inside one min-width query, the rails and the narrowing
   together. Under it the markup stays in the document and renders nothing, and
   the page keeps its ordinary 1240px column rather than being pinched for rails
   it cannot show.

   The threshold is the geometry plus a gutter: 1020 + 2 x 240 = 1500px of
   content and rails, which they occupy edge to edge, and 32px so that at the
   narrowest width that qualifies the outer edge of each rail is not flush
   against the edge of the window. */
.mg-bg-rails { display: none; }

@media (min-width: 1532px) {
  body.mg-has-takeover { --mg-wrap-max: var(--mg-takeover-w); }

  /* The rails' containing block. Scoped to the takeover so the wrapper is a
     plain block box on every other page, and left at z-index auto so it stays
     out of the stacking order — the rails have to lose to the header (50) and
     the sticky ad bar (49), which are outside this element. */
  body.mg-has-takeover #mg-site-content { position: relative; }

  /* Full-bleed bands come in to the same width, wherever they were defined.
     A band's own width is the viewport by definition, so --mg-wrap-max never
     reaches it: the grey of the daily strip, the dark of the Ask and Give
     bands, the footer's hairline would each run out past the rails and give
     away that the page is not really 1020px wide. Setting --mg-band-max here
     narrows every element that opted in with the two lines named in :root,
     including ones this stylesheet has never heard of. Their inner wrappers are
     capped at the same figure already, so this moves each surface without
     moving anything printed on it.

     The line it draws is *level with the rails*: from the sticky bar down
     everything is 1020px, and above it the welcome mat and the header keep
     their full width, there being no rail beside those to contradict. That is
     also why the sticky bar is a band at all — full-bleed it would run straight
     through the row the rails occupy and, winning on z-index 49 to 1, paint
     over the top of both towers. */
  body.mg-has-takeover { --mg-band-max: var(--mg-takeover-w); }

  /* The rails are laid out against the content wrapper, not the viewport, so
     they span its full height and stop above the site footer — no measuring,
     and nothing to keep in step if the page grows. A definite width with auto
     inline margins is what centres the pair.

     The negative top is the whole of "start immediately after the header".
     #mg-site-content begins *below* the sticky bar, so left alone the rails
     would start a banner's height too low; lifting the box by that same height
     puts their top edge level with the bar's, which is the header's bottom.
     --mg-sticky-ad-h is 0 when there is no bar and before theme.js has measured
     one, and both of those cases want a lift of nothing.

     No overflow of any kind here, deliberately. Clipping would tidy up a page
     whose content runs shorter than 960px, where the bottom of a rail hangs
     level with the footer instead of ending above it — but `overflow: hidden`
     makes this a scroll container, and the sticky rails inside would then pin
     to *it* rather than to the viewport, losing the one behaviour they have.
     The overhang falls in the empty margin beside the footer and never over
     its content, so it is much the cheaper of the two. */
  body.mg-has-takeover .mg-bg-rails {
    position: absolute;
    inset: 0;
    top: calc(-1 * var(--mg-sticky-ad-h));
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: calc(var(--mg-takeover-w) + 2 * var(--mg-rail-w));
    margin-inline: auto;
    /* The box is mostly empty space over the page's own margins. Only the two
       rails take clicks; everything between them belongs to the content. */
    pointer-events: none;
  }

  /* Sticky, so a rail rides down the page rather than scrolling away, and
     parks directly under the header — the same line the sticky ad bar parks on,
     the two now being side by side rather than stacked. The bar's own height is
     no longer in this sum for that reason; it is only in the lift above. */
  .mg-bg-rail {
    position: sticky;
    top: calc(var(--mg-admin-bar-h) + var(--mg-mat-h) + var(--mg-header-h));
    flex: 0 0 var(--mg-rail-w);
    width: var(--mg-rail-w);
    height: var(--mg-rail-h);
    pointer-events: auto;
  }

  /* The shared ad rules cap a slot at 970px and draw a wide placeholder bar —
     both right for a banner, both wrong for a tower. A rail's creative fills
     the rail. */
  .mg-bg-rail .mg-ad { height: 100%; }
  .mg-bg-rail .mg-ad__slot { max-width: none; height: 100%; }
  .mg-bg-rail .mg-ad__placeholder { max-width: none; height: 100%; }
}

/* ============================================================
   NEWSLETTER SIGNUP (mg26/newsletter-signup)
   ============================================================
   The block is the form and nothing else — no box, no heading. The grey band it
   sits in on the homepage is an ordinary core Group with a background, a radius
   and a padding set in the sidebar, and the Heading and Paragraph beside it are
   typed by the font-size presets and block styles they carry. Nothing about
   that band is this theme's to define any more. */
.mg-nlsignup__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mg-input {
  padding: 13px 18px;
  border-radius: 80px;
  border: 1px solid var(--chipbd);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  min-width: 220px;
}

/* ============================================================
   ARCHIVE NAVIGATION
   Paging and the filter row, shared by every archive the theme and the
   movieguide-new plugin render. The reviews-browse furniture that used to sit
   here — the browse head, the view toggle and the row list — is the plugin's
   markup alone and moved to movieguide-new/css/style.css with it.

   .mg-filters__row stays because 404.php builds its recovery chips out of it.
   ============================================================ */
.mg-filters__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-pagination { display: flex; gap: 8px; flex-wrap: wrap; padding: 40px 0 0; justify-content: center; }
.mg-pagination .page-numbers {
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  font-size: 14px;
  font-weight: 600;
}
.mg-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.mg-pagination .page-numbers:hover { background: var(--card); }
.mg-pagination .page-numbers.current:hover { background: var(--accent); }
.mg-pagination[hidden] { display: none; }

/* Infinite scroll. Hidden until the script claims it, so an archive with the
   option on but no JavaScript running shows the numbered links alone rather
   than a Load more button that cannot load anything. Once it has, .is-replaced
   takes the numbered links away — a class rather than [hidden] because in
   "Mobile only" mode whether they go is a question about the screen.

   That mode is settled here and nowhere else. The archive HTML is cached once
   and served to every reader, so it carries both controls and the width picks:
   below the breakpoint the loader shows and the links go, above it the reverse.
   theme.js reads this back off the loader instead of repeating the number, so
   the 760px in the query below is the only place the breakpoint is written. */
.mg-infinite { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0 0; }
.mg-infinite.is-ready { display: flex; }
.mg-pagination.is-replaced { display: none; }
.mg-infinite[data-mg-infinite="mobile"].is-ready { display: none; }
.mg-pagination[data-mg-pages="mobile"].is-replaced { display: flex; }
@media (max-width: 760px) {
  .mg-infinite[data-mg-infinite="mobile"].is-ready { display: flex; }
  .mg-pagination[data-mg-pages="mobile"].is-replaced { display: none; }
}
.mg-infinite__more {
  padding: 11px 22px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.mg-infinite__more:hover { background: var(--card); }
.mg-infinite__more[hidden] { display: none; }
.mg-infinite[aria-busy="true"] .mg-infinite__more { opacity: 0.6; pointer-events: none; }
.mg-infinite__status { margin: 0; min-height: 1em; font-size: 13px; font-weight: 600; color: var(--ink40); }

/* ============================================================
   BACK LINK & SHARE
   Two small components every single-post layout uses — articles, attachments
   and the plugin's reviews alike — which is why they stayed when the rest of
   the review-detail styling moved to movieguide-new/css/style.css.
   ============================================================ */
.mg-back { font-size: 14px; font-weight: 600; color: var(--ink40); display: inline-block; }
.mg-back:hover { color: var(--accent); }

.mg-share { display: flex; align-items: center; gap: 10px; }
.mg-share__label { font-size: 12px; font-weight: 700; color: var(--ink40); }
.mg-share a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--chipbd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.mg-share a:hover { background: var(--card); color: inherit; }
.mg-share--sm a { width: 32px; height: 32px; font-size: 12px; }

/* ============================================================
   COMMENTS
   ============================================================ */
.mg-comments { padding: 56px 0 72px; max-width: 760px; }
.mg-comments__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.mg-comments__head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.mg-comments__count { font-size: 14px; font-weight: 600; color: var(--ink40); }

.mg-comment-form-box {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.mg-comment-form-box textarea,
.mg-comment-form-box input[type="text"],
.mg-comment-form-box input[type="email"],
.mg-comment-form-box input[type="url"] {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  outline: none;
  resize: vertical;
}
.mg-comment-form-box .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.mg-comment-form-box .comment-form-cookies-consent input { flex: 0 0 auto; margin-top: 4px; }
.mg-comment-form-box .form-submit { margin: 0; }
.mg-comment-form-box .mg-comment-note { font-size: 12px; font-weight: 500; color: var(--ink40); }

.mg-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mg-comment-list .comment-body { display: block; position: relative; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.mg-comment-list .avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; }
.mg-comment-list .comment-author { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.mg-comment-list .comment-author .says { font-size: 12px; font-weight: 500; color: var(--ink40); }
.mg-comment-list .comment-metadata { margin: -12px 0 0 52px; font-size: 12px; font-weight: 500; color: var(--ink40); }
.mg-comment-list .comment-content { min-width: 0; margin-left: 52px; font-size: 14px; font-weight: 500; line-height: 1.65; color: var(--ink80); }
.mg-comment-list .comment-content p { margin: 10px 0 0; }
.mg-comment-list .reply { margin: 8px 0 0 52px; }
.mg-comment-list .reply a { font-size: 12px; font-weight: 700; color: var(--ink56); }
.mg-comment-list .children { list-style: none; padding-left: 40px; margin: 0; }

/* ============================================================
   ARTICLE
   ============================================================ */
.mg-article-head { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.mg-article-head__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-cat-chip {
  padding: 4px 12px;
  background: var(--card);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.mg-article-head__date { font-size: 13px; font-weight: 600; color: var(--ink40); }
.mg-article-title {
  margin: 0;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.mg-article-figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mg-article-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--card);
}
.mg-article-figure figcaption { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink40); }

/* Standalone pages have no .mg-article-head flex column to space the title
   and lead image, so they carry their own rhythm. */
.mg-page-article > .mg-article-title,
.mg-page-article > .mg-article-figure { margin-bottom: 24px; }

.mg-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hair);
}
.mg-byline__avatar {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
}
.mg-byline__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mg-byline__name { font-size: 14px; font-weight: 700; }
.mg-byline .mg-share { margin-left: auto; }

.mg-article-body { min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.75; color: var(--ink80); overflow-wrap: anywhere; }
.mg-article-body p { margin: 0 0 20px; }
.mg-article-body img { border-radius: 16px; height: auto; }
.mg-article-body h2, .mg-article-body h3 { color: var(--ink); line-height: 1.3; }
.mg-article-body a { color: var(--accent); }
.mg-article-body blockquote {
  margin: 0 0 20px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  font-style: italic;
}
.mg-article-body iframe { max-width: 100%; border-radius: 16px; }
.mg-article-body > *,
.mg-prose > * { max-width: 100%; }
.mg-article-body :where(iframe, video, embed, object, input, select, textarea),
.mg-prose :where(iframe, video, embed, object, input, select, textarea),
.wp-video,
.wp-video-shortcode { max-width: 100% !important; }
.mg-article-body table,
.mg-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.mg-article-body pre,
.mg-prose pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.mg-page-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; font-weight: 700; }
.mg-page-links > a,
.mg-page-links > span:not(:first-child) { padding: 8px 12px; border: 1px solid var(--chipbd); border-radius: 10px; }

/* ============================================================
   SEARCH
   ============================================================ */
.mg-search-input {
  width: 100%;
  padding: 20px 26px;
  border-radius: 18px;
  border: 1px solid var(--chipbd);
  background: var(--card);
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  outline: none;
}
.mg-search-empty {
  padding: 64px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.mg-search-empty__title { font-size: 18px; font-weight: 700; }
.mg-search-empty__sub { font-size: 14px; font-weight: 500; color: var(--ink56); }
/* Recovery controls offered under an empty state (404 search box and chips). */
.mg-search-empty form { width: min(100%, 640px); margin-top: 12px; }
.mg-search-empty .mg-filters__row { justify-content: center; margin-top: 8px; }
.mg-search-section { padding-top: 40px; }
.mg-search-section h2 { margin: 0 0 18px; font-size: 20px; font-weight: 800; }
.mg-search-section--end { padding-bottom: 24px; }

/* ============================================================
   GIVE PAGE
   ============================================================ */
.mg-dark-hero {
  background: var(--dark-band);
  color: #ffffff;
  /* Full-bleed band: see --mg-band-max in :root. */
  max-width: var(--mg-band-max);
  margin-inline: auto;
}
.mg-give-hero {
  max-width: var(--mg-wrap-max);
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 48px;
  align-items: center;
}
/* align-self, against the row's align-items: center. The card opposite is the
   taller of the two and grows every time a field or a line is added to it, and
   centring meant the copy drifted down to follow it. Pinned to the top of the
   row, the two are balanced from inside the card instead — a Spacer or a
   Separator in it moves the card, and the copy stays where it was put. */
.mg-give-hero__text { display: flex; flex-direction: column; gap: 18px; align-self: start; }
/* margin: 0 throughout this section — these classes sit on core paragraph and
   heading blocks now that the Give page is editable in Gutenberg, so the
   flex/grid gap is the only spacing, never a browser default margin. */
.mg-dark-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); }
.mg-give-hero__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.mg-give-hero__sub { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.65; color: rgba(255, 255, 255, 0.65); max-width: 520px; }
.mg-give-stats { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 8px; }
.mg-give-stat { display: flex; flex-direction: column; gap: 2px; }
.mg-give-stat__n { margin: 0; font-size: 26px; font-weight: 800; }
.mg-give-stat__l { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); }

.mg-give-card {
  background: var(--bg);
  color: var(--ink);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 480px;
  justify-self: center;
  width: 100%;
}
.mg-give-card__title { margin: 0; font-size: 22px; font-weight: 800; }
.mg-give-card__sub { font-size: 13px; font-weight: 500; color: var(--ink56); }
.mg-give-freqs { display: flex; gap: 8px; }
.mg-give-freqs .mg-chip { flex: 1; text-align: center; padding: 12px 0; font-weight: 700; }
.mg-give-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-give-amounts .mg-chip { text-align: center; padding: 14px 0; font-size: 15px; font-weight: 700; }
.mg-give-impact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fam-ink);
  background: var(--fam-bg);
  border-radius: 10px;
  padding: 10px 14px;
  line-height: 1.5;
}
.mg-give-cta {
  display: block;
  text-align: center;
  padding: 16px 0;
  border-radius: 12px;
  background: var(--accent);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  border: none;
  width: 100%;
  cursor: pointer;
}
.mg-give-cta:hover { opacity: 0.9; color: #ffffff; }
.mg-give-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink40);
  flex-wrap: wrap;
}
.mg-give-methods {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink40);
  border-top: 1px solid var(--hair);
  padding-top: 16px;
  flex-wrap: wrap;
}
/*
 * Both rows above were written for the give-card block, whose items are spans
 * it prints itself. They are also the right rows for a donation card an editor
 * builds by hand out of a mg26/card, and there the items are core Paragraphs —
 * which .mg-card p claims, further down this file and at the same weight, so
 * the row's own type would lose the tie on source order. Two classes settles
 * it, and `inherit` rather than repeated numbers keeps the two rows the single
 * place their type is written.
 */
.mg-card .mg-give-trust p,
.mg-card .mg-give-methods p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
/* The methods row draws its own rule above itself, because in the give-card
   block nothing else would. A hand-built card can put a real Separator there
   instead — it is a block an editor can see and move — and then the row's own
   line is a second one 16px below it. */
.wp-block-separator + .mg-give-methods {
  border-top: none;
  padding-top: 0;
}
/*
 * The dot between Card · PayPal · Bank / ACH · Apple Pay.
 *
 * The give-card block prints one as a real element, <span class="mg-dot-sep">,
 * between every pair of items — it builds the row itself, so it can. A row an
 * editor builds is core Paragraphs with nothing between them, and there is no
 * block that draws a 3px dot, so it is drawn here instead: on every item but
 * the first, which is what a separator is.
 *
 * p rather than any child on purpose. It is what tells the two rows apart, so
 * the block's spans keep their own dots and do not end up wearing both. The
 * margin matches the row's gap, so the dot sits midway between two items
 * rather than crowding the one it belongs to.
 */
.mg-give-methods p:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--ink26);
  vertical-align: middle;
}

/* The donor quote is not here. It is the [movieguide_quotes] shortcode's, which
   belongs to the legacy Movieguide plugin, and the Give page content that uses
   it is seeded by movieguide-new; neither survives a theme change, so the
   styling lives with them in movieguide-new/css/style.css instead. The quote
   sits in an ordinary mg26/section on the Give page, so the column and the gap
   around it are this file's after all — just nothing specific to the quote. */

/* The hand-written card grid, still used by the About / Mission pattern, whose
   cards lead with a stat (.mg-info-card__big) rather than a category label. The
   Give page uses the mg26/card-grid and mg26/card blocks further down instead. */
.mg-cards-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}
.mg-info-card {
  background: var(--card);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mg-info-card__kicker { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); }
.mg-info-card__big { margin: 0; font-size: 26px; font-weight: 800; }
.mg-info-card__title { margin: 0; font-size: 17px; font-weight: 700; }
/* When the card leads with a stat, the title reads as its caption. */
.mg-info-card__big + .mg-info-card__title { font-size: 15px; }
.mg-info-card__text { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink56); }

/* ============================================================
   CONTAINER BLOCKS
   The grey rounded surfaces, as real blocks — mg26/card-grid, mg26/card,
   mg26/card-grid — instead of layout classes typed into a core Group's
   Additional CSS Classes field. Each takes any blocks as children.

   Because those children are plain core blocks carrying nothing of their own,
   the surface declares the type scale for the headings and paragraphs inside
   it. Every rule here is scoped to a block class: there is no bare h2/h3/p
   rule that could reach an article, a review or a widget elsewhere on the site.
   ============================================================ */
/* ---------- Section / CTA Band: core Group variations ---------- */
/*
 * These three were blocks of this theme's own until everything they did turned
 * out to be a control core already ships. `appearance-tools` and
 * `custom-spacing` in functions.php open the border, radius and padding
 * controls on a classic theme, so a Band's rule is a Group's top border and its
 * rhythm is a Group's padding, both edited where an editor expects to find them.
 * What is left here is the part core has no control for: how wide.
 *
 * The classes are set by the variations at the end of blocks-editor.js, and by
 * the Width control there, which writes them into core's own className rather
 * than adding an attribute of its own — a Group is a static block, and a new
 * attribute in its saved output is what invalidates every one of them the day
 * the filter changes.
 */

/*
 * Full width, contents in the site column — the fourth Width option.
 *
 * The inset is padding rather than a max-width on the element, which is the
 * whole difference between it and Site column: the box stays the width of the
 * page, so a background or a border-top runs edge to edge, while the copy still
 * lines up with the header and with every band the theme renders itself.
 *
 * The two 24px are .mg-wrap's own gutter, so this resolves to exactly the same
 * column at every width: half the leftover space, plus the gutter, and never
 * less than the gutter alone once the viewport is inside --mg-wrap-max. Reading
 * that variable rather than a number is what keeps it in step when the
 * background takeover narrows the page to 1020px.
 *
 * Written as padding-inline so an editor who sets horizontal padding in the
 * sidebar overrides it outright rather than fighting it — that inline style
 * wins, which is the right answer if somebody asked for it deliberately.
 */
.mg-wrap--inset { padding-inline: max(24px, calc((100% - var(--mg-wrap-max)) / 2 + 24px)); }
.mg-wrap--inset.mg-wrap--article { padding-inline: max(24px, calc((100% - 760px) / 2 + 24px)); }
/* Anything anchored in the page content has to clear the sticky header when it
   is jumped to, which is the one thing an in-page link cannot do for itself.
   On <main> rather than on a block, so it holds for an anchor anywhere — a
   heading, a Section, a block an editor gave an HTML anchor in the Advanced
   panel — instead of only inside whichever container was fashionable. */
.mg-main [id] { scroll-margin-top: calc(var(--mg-admin-bar-h) + var(--mg-header-h) + 24px); }
/*
 * The Dark style (core/group), registered in inc/blocks.php.
 *
 * Core's own Background colour is one value, so a Group painted black still
 * hands its contents the page's ink, hairlines and card grey. This declares the
 * whole neutral scale for the subtree exactly as .mg-card--black does, which is
 * what lets ordinary blocks inside come out right with no dark variant of each.
 *
 * The two band lines opt it into --mg-band-max, because a dark Group is usually
 * full-bleed and every full-bleed surface has to narrow with the page when the
 * background takeover is running — see the property in :root.
 */
.wp-block-group.is-style-dark {
  background: var(--dark-band);
  color: #ffffff;
  max-width: var(--mg-band-max);
  margin-inline: auto;
  --ink: #ffffff;
  --ink80: rgba(255, 255, 255, 0.82);
  --ink56: rgba(255, 255, 255, 0.6);
  --ink40: rgba(255, 255, 255, 0.58);
  --ink26: rgba(255, 255, 255, 0.28);
  --ink16: rgba(255, 255, 255, 0.16);
  --ink08: rgba(255, 255, 255, 0.1);
  --card: rgba(255, 255, 255, 0.08);
  --hair: rgba(255, 255, 255, 0.12);
  --chipbd: rgba(255, 255, 255, 0.24);
}

.mg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mg-grid-min, 260px)), 1fr));
  gap: var(--mg-grid-gap, 24px);
}

/* ---------- Quote (core/quote, and a bare <blockquote>) ---------- */
/*
 * This was the Prose block's, scoped to .mg-copy. That block is gone — its type went
 * onto the blocks themselves as core font sizes and block styles — but a quote
 * is the one thing in it that no core control can express: a rule down the side
 * in the accent, an italic pull, and a cite a step quieter.
 *
 * So it moved here and lost its scope, which is a straight improvement: every
 * Quote block on the site gets it now, not just the ones that happened to sit
 * in a Prose.
 *
 * One class, deliberately. .mg-article-body blockquote further up is two, so an
 * article's own quotes keep the margin and padding that file sets for them and
 * take only the type from here — this is the landing pages' quote, not a
 * redefinition of the one posts have been using.
 */
.wp-block-quote {
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--accent);
}
.wp-block-quote > p { font-size: 16px; font-weight: 600; font-style: italic; color: var(--ink); }
.wp-block-quote :is(cite, footer) {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: var(--ink40);
}

/* ---------- Card: one box, grey unless tinted ---------- */
/* The colour is not decoration, it is the other half of the background. A card
   draws its own surface, so it has to draw its own ink: without this line the
   headings inside it are the only thing in the card still taking their colour
   from whatever the card was dropped into, and a card inside a band that set
   color:#fff — the dark hero, or any Group an editor gave a text colour —
   renders white headings on grey. Paragraphs never had the bug, because
   .mg-card p names --ink56 outright; the h2/h4/h5/h6 rule below sets size and
   weight only and inherits the rest.
   Pinning it here rather than on each heading is what makes it hold for any
   blocks a card holds, and --ink is the right token because it comes from the
   same place --card does: change the page's theme and the two move together.
   The black and white cards need no rule of their own — they redefine --ink
   for their own subtree, so this one line resolves to white inside one and
   black inside the other. */
.mg-card {
  background: var(--card);
  color: var(--ink);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The optional tints (mg26_card_backgrounds()). Named after acceptability
   tiers rather than colours because that is what they mean: the same three
   surfaces the badges and the family-safe shelf use. */
.mg-card--family { background: var(--fam-bg); }
.mg-card--caution { background: var(--cau-bg); }
.mg-card--extreme { background: var(--ext-bg); }
/*
 * Black and white are not tints. The three above are translucent, so they take
 * the page's ink and work in either theme without saying anything about it;
 * these two are opaque and fixed, so a black card on a dark page would print
 * black text on black, and a white card on a light page would be invisible
 * against it.
 *
 * Both are answered the same way: each card re-declares the neutral scale for
 * its own subtree, so a black card is a dark-theme island and a white card a
 * light-theme one, whichever theme the page around it is in. The values are
 * the ones :root and html[data-theme="dark"] already publish rather than new
 * colours, which is what makes this hold for *any* blocks an editor puts
 * inside — a nested surface, a badge, a hairline — instead of only for the
 * heading-and-paragraph template the card ships with.
 *
 * --accent is deliberately not among them. Buttons use it as a fill, so a card
 * that flipped it would paint white text onto a white button.
 *
 * The hairline is the other half of the same problem: it is what keeps each of
 * these readable as a surface on a page its own colour. Drawn in the card's own
 * --chipbd, so it is light on the black one and dark on the white one without
 * naming either colour twice.
 */
.mg-card--black,
.mg-card--white {
  border: 1px solid var(--chipbd);
}
.mg-card--black {
  background: var(--dark-band);
  --ink: #ffffff;
  --ink80: rgba(255, 255, 255, 0.82);
  --ink56: rgba(255, 255, 255, 0.6);
  --ink40: rgba(255, 255, 255, 0.58);
  --ink26: rgba(255, 255, 255, 0.28);
  --ink16: rgba(255, 255, 255, 0.16);
  --ink08: rgba(255, 255, 255, 0.1);
  --card: rgba(255, 255, 255, 0.08);
  --card2: rgba(0, 0, 0, 0.35);
  --hair: rgba(255, 255, 255, 0.12);
  --chipbd: rgba(255, 255, 255, 0.24);
  --fam-ink: #57d98a;
  --fam-bg: rgba(87, 217, 138, 0.14);
  --cau-ink: #f5c04e;
  --cau-bg: rgba(245, 192, 78, 0.15);
  --ext-ink: #ff7b73;
  --ext-bg: rgba(255, 123, 115, 0.14);
  --pill-active-bg: #ffffff;
  --pill-active-ink: #000000;
}
.mg-card--white {
  background: #ffffff;
  --ink: #000000;
  --ink80: rgba(0, 0, 0, 0.8);
  --ink56: rgba(0, 0, 0, 0.56);
  --ink40: rgba(0, 0, 0, 0.58);
  --ink26: rgba(0, 0, 0, 0.26);
  --ink16: rgba(0, 0, 0, 0.16);
  --ink08: rgba(0, 0, 0, 0.08);
  --card: #f4f4f4;
  --card2: #ffffff;
  --hair: #efeff0;
  --chipbd: rgba(0, 0, 0, 0.18);
  --fam-ink: #0b7a3e;
  --fam-bg: rgba(11, 122, 62, 0.10);
  --cau-ink: #8a6100;
  --cau-bg: rgba(170, 120, 0, 0.13);
  --ext-ink: #b3261e;
  --ext-bg: rgba(179, 38, 30, 0.10);
  --pill-active-bg: #000000;
  --pill-active-ink: #ffffff;
}
/* The category label is the one thing a black card cannot take from the page.
   --accent is a strong blue that all but vanishes on near-black, and it is the
   one token this card must not redefine, so the label falls back to the card's
   own ink — the same treatment .mg-dark-kicker gives an eyebrow on the Give
   page's black band. Two classes because .mg-card h3 below is one and comes
   later, and a one-class selector here would lose the tie to it. */
.mg-card.mg-card--black h3 { color: var(--ink56); }
/* And the same for a link's hover, which the base rule also paints in --accent
   and which would otherwise all but disappear the moment it was pointed at. */
.mg-card.mg-card--black a:hover { color: var(--ink); }
/* A tinted card is a callout an editor reached for deliberately, not one tile
   in a grid of them, so its copy reads at body size and full strength. Two
   classes, so this beats the .mg-card p above whatever the load order. */
.mg-card--family p,
.mg-card--caution p,
.mg-card--extreme p { font-size: 15px; line-height: 1.65; color: var(--ink80); }
/* A card leads with its category over its claim, so Heading 3 is the small
   tracked label and Heading 4 the title beneath it. The sizes run against the
   levels, which is what an eyebrow is; document order stays h3 → h4, so the
   outline is still correct for anyone reading it with a screen reader. */
/*
 * The type the card declares for its contents — and the :not() that stops it
 * declaring over an editor.
 *
 * A surface owns the typography of the blocks inside it: that is the bargain
 * every container here makes, and it is what lets a card hold plain core blocks
 * that carry no formatting. But a block *style* is an editor saying "this one
 * is a headline", or a lede, or fine print — and a descendant rule like this
 * one outranks a single-class style on specificity, so the card would silently
 * win an argument it should not even be in.
 *
 * :not() steps aside rather than fighting. The card still types everything it
 * was handed plain, which is the ordinary case and the whole point, and gives
 * back anything that arrived with a treatment already. It is also what makes a
 * Large card usable as a band's own surface rather than only as a tile: a
 * display heading inside one is a headline, not a card title.
 */
.mg-card h3:not([class*="is-style-"]) { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); }
.mg-card :is(h2, h4, h5, h6):not([class*="is-style-"]) { font-size: 17px; font-weight: 700; }
.mg-card p:not([class*="is-style-"]) { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink56); }
/*
 * The margin reset, and why it is the only place in this block that touches
 * margin.
 *
 * A surface strips the browser's default margins because its own gap is the
 * rhythm — but a Group inside it with a block gap set is core generating
 * `> * + * { margin-block-start: … }` at one class, and a reset written into
 * the type rules above would outrank that and silently flatten it. :where()
 * gives this no specificity at all, so it beats the browser and yields to
 * anything an editor asked for. Every rule above therefore sets type and
 * nothing else.
 */
.mg-card :where(h2, h3, h4, h5, h6, p) { margin: 0; }
/*
 * Plain is the absence of a surface rather than another one: a hairline and
 * nothing behind it, for a card that has to be told apart from the page without
 * being lifted off it. It is the only background that needs no ink of its own,
 * because it is not covering the page up.
 */
.mg-card--plain { background: transparent; border: 1px solid var(--hair); }
/*
 * ...and in the dark theme a black card inverts.
 *
 * --dark-band is #0a0a0a, which on a black page is not a surface at all — the
 * card comes out a slightly different black and the emphasis someone chose it
 * for is gone. What Black means is "the opposite of the page", so on a dark
 * page it is light. The subtree scale above is already how this card carries
 * its own ink, so it only has to declare the other one. White needs no such
 * rule: it is already the opposite of a dark page, and its hairline is what
 * keeps it readable on a light one.
 *
 * Reachable on any site, not only one that has turned the toggle on: with the
 * switch disabled the theme follows prefers-color-scheme, so a reader whose
 * system is dark lands here by default.
 */
html[data-theme="dark"] .mg-card--black {
  background: #f4f4f4;
  --ink: #000000;
  --ink80: rgba(0, 0, 0, 0.8);
  --ink56: rgba(0, 0, 0, 0.56);
  --ink40: rgba(0, 0, 0, 0.58);
  --ink26: rgba(0, 0, 0, 0.26);
  --ink16: rgba(0, 0, 0, 0.16);
  --ink08: rgba(0, 0, 0, 0.08);
  --card: #ffffff;
  --card2: #f4f4f4;
  --hair: #e4e4e4;
  --chipbd: rgba(0, 0, 0, 0.18);
  --fam-ink: #0b7a3e;
  --fam-bg: rgba(11, 122, 62, 0.10);
  --cau-ink: #8a6100;
  --cau-bg: rgba(170, 120, 0, 0.13);
  --ext-ink: #b3261e;
  --ext-bg: rgba(179, 38, 30, 0.10);
  --pill-active-bg: #000000;
  --pill-active-ink: #ffffff;
}
/* Large: the one card a whole band is built around — a closing call to action,
   an offer, a notice — where the padding and the corner have to hold their own
   against the page rather than against the card beside them. */
.mg-card--lg {
  gap: 16px;
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
  border-radius: 24px;
}

/* ---------- Card style: Stat (is-style-stat) ---------- */
/*
 * A card that leads with a figure instead of with a category. The first heading
 * in it is the number, whatever level it was given, and everything under it is
 * that number's caption — so the sizes run against the levels here exactly as
 * they do for the category label a plain card leads with, and the document
 * order stays correct for anyone reading the outline.
 *
 * This is the shape the About page draws by hand as .mg-info-card, as something
 * any card can be asked to be.
 */
.mg-card.is-style-stat { gap: 7px; padding: 24px 22px; }
.mg-card.is-style-stat :is(h2, h3, h4, h5, h6) {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink80);
}
/* The figure. Ahead of the rule above on specificity, and of .mg-card h3, which
   would otherwise paint it as the blue category label. */
.mg-card.is-style-stat :is(h2, h3, h4, h5, h6):first-child {
  font-size: clamp(23px, 2.3vw, 29px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mg-card.is-style-stat p { font-size: 13px; line-height: 1.55; }

/* ---------- Card Grid style: Ruled (is-style-ruled) ---------- */
/*
 * The cells joined into one box with hairline joints, for a row of figures that
 * reads as a single statement rather than as separate cards.
 *
 * The joints are the grid's own 1px gap letting the container's background
 * through, rather than a border on each cell: a border would need a different
 * side suppressed at every column count, and this way the rule falls wherever
 * the grid happens to break. overflow clips the cells to the outer radius, so a
 * tinted one keeps the corner it lands in without knowing which that is.
 *
 * The cards inside give up their own corner and border to the box — that is
 * what being joined means — and an untinted one gives up its grey too, because
 * grey cells separated by grey joints read as nothing. A tinted one keeps its
 * fill, which is how one cell of a ruled row becomes the emphasis; each is
 * restated because the reset below outranks the tints on their own.
 */
.mg-card-grid.is-style-ruled {
  gap: 1px;
  padding: 1px;
  background: var(--hair);
  border-radius: 18px;
  overflow: hidden;
}
.mg-card-grid.is-style-ruled > .mg-card { border: none; border-radius: 0; background: var(--bg); }
.mg-card-grid.is-style-ruled > .mg-card--family { background: var(--fam-bg); }
.mg-card-grid.is-style-ruled > .mg-card--caution { background: var(--cau-bg); }
.mg-card-grid.is-style-ruled > .mg-card--extreme { background: var(--ext-bg); }
.mg-card-grid.is-style-ruled > .mg-card--black { background: var(--dark-band); }
.mg-card-grid.is-style-ruled > .mg-card--white { background: #ffffff; }
html[data-theme="dark"] .mg-card-grid.is-style-ruled > .mg-card--black { background: #f4f4f4; }

/* ---------- Chips: a wrapping row of outlined pills (mg26/chips) ---------- */
.mg-pill-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-pill-chips span {
  padding: 8px 16px;
  border: 1px solid var(--chipbd);
  border-radius: 80px;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Pill: one small badge around a Paragraph (mg26/pill) ---------- */
/*
 * .mg-tag rather than .mg-pill, which is already the header and bottom-nav
 * navigation pill at the top of this file — and not .mg-badge either, which is
 * the movieguide-new plugin's acceptability badge, down to the same --family /
 * --caution / --extreme modifiers this block wants. The block is still called
 * Pill in the inserter, because that is what it looks like; only the class had
 * to move out of the way.
 *
 * Last in this section on purpose. A Pill is the one container meant to be
 * dropped *inside* the others, and .mg-card p names a
 * colour at the same weight as the rule below that hands the label back the
 * pill's tone. Source order is what settles those ties, so the pill comes
 * after the surfaces it sits in rather than carrying a selector naming each.
 */
/*
 * width: fit-content rather than align-self, so the badge is its own size in a
 * flex column, in a grid cell and in ordinary flow alike — align-self would
 * only have answered the first of the three. It also survives a flex parent's
 * default stretch, which applies only to an auto cross size.
 *
 * The type is set on the pill and inherited by the Paragraph inside rather than
 * being pushed onto it, so a paragraph that has been given a block style — an
 * Eyebrow, usually — still wins on the properties that style names, and takes
 * the pill's for the rest. That is how one block covers a tracked uppercase
 * countdown and a lowercase "becomes $54" without a setting for either.
 */
.mg-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 15px;
  border: 1px solid var(--chipbd);
  border-radius: 80px;
  font-size: 12px;
  font-weight: 700;
}
/* color, so a tone is not undone by whatever colour the label's own style
   names; the rest is left to inherit. */
.mg-tag :where(p) { margin: 0; line-height: 1.35; }
.mg-tag p { color: inherit; }
/*
 * ...and again, one class deeper, for the surfaces a pill is usually dropped
 * into. Each of those names a colour for the paragraphs inside it, and does so
 * from a selector that outranks the line above — so a green pill in a card came
 * out grey. This is the fix .mg-card .mg-give-trust p already uses for the same
 * collision; three selectors rather than a cleverer one, because the list is
 * short, closed, and obvious to extend if another surface ever types its own p.
 */
.mg-card .mg-tag p { color: inherit; }
.mg-tag--dot { padding-left: 12px; }
.mg-tag--dot::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* The tiers, so a green pill means here what a green card means on a review. */
.mg-tag--family { background: var(--fam-bg); border-color: transparent; color: var(--fam-ink); }
.mg-tag--caution { background: var(--cau-bg); border-color: transparent; color: var(--cau-ink); }
.mg-tag--extreme { background: var(--ext-bg); border-color: transparent; color: var(--ext-ink); }
/* And the two that are saying nothing about a rating. */
.mg-tag--accent { background: var(--accent); border-color: transparent; color: #ffffff; }
.mg-tag--ink { background: var(--ink); border-color: transparent; color: var(--bg); }
/* A circle is the same badge with equal padding: initials, a step number, a
   count. Sized off its own type so it stays round whatever is in it. */
.mg-tag--circle {
  width: 2.9em;
  height: 2.9em;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  text-align: center;
}

/* ============================================================
   NEWSLETTER PAGE
   ============================================================ */
.mg-nl-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 48px;
  align-items: center;
  padding-bottom: 64px;
}
.mg-nl-hero__text { display: flex; flex-direction: column; gap: 18px; }
.mg-nl-hero__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.mg-checklist { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.mg-checklist div { display: flex; gap: 12px; align-items: baseline; }
.mg-checklist .tick { color: var(--fam-ink); font-weight: 800; }
.mg-checklist span:not(.tick) { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--ink80); }

.mg-nl-card {
  background: var(--card);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 460px;
  width: 100%;
  justify-self: center;
}
.mg-nl-card img.mg-nl-card__mascot { height: 90px; width: auto; align-self: center; }
.mg-nl-card h2 { margin: 0; font-size: 20px; font-weight: 800; text-align: center; }
.mg-nl-card input[type="email"] {
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  outline: none;
}
.mg-nl-card button {
  padding: 15px 0;
  border-radius: 12px;
  border: none;
  background: var(--accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.mg-nl-card button:hover { opacity: 0.9; }
/* [mg26_newsletter_form class="mg-nl-card__form"] inside the signup card: the
   provider's fields stack full width instead of sitting on one row. */
.mg-nl-card__form { display: flex; flex-direction: column; gap: 14px; }
.mg-nl-card__form input:not([type="checkbox"]):not([type="radio"]),
.mg-nl-card__form select,
.mg-nl-card__form .mg-btn { width: 100%; min-width: 0; }
.mg-nl-card__form .mg-btn { text-align: center; }
/* The card only styles the email input; a name field and any provider select
   need to match it. */
.mg-nl-card__form input[type="text"],
.mg-nl-card__form input[type="tel"],
.mg-nl-card__form select {
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid var(--chipbd);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  outline: none;
}
.mg-nl-card__form label:not(.screen-reader-text) { font-size: 13px; font-weight: 600; color: var(--ink80); }
.mg-nl-card__fine { font-size: 12px; font-weight: 500; color: var(--ink40); text-align: center; line-height: 1.6; }

/* ============================================================
   ABOUT
   ============================================================ */
.mg-mission-hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 72px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
  align-items: center;
}
.mg-mission-hero h1 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.mg-mission-hero p { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.65; color: rgba(255, 255, 255, 0.65); max-width: 620px; }

.mg-donor-band {
  background: var(--card);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.mg-donor-band img { height: 96px; width: auto; }
.mg-donor-band__text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.mg-donor-band__title { font-size: 18px; font-weight: 800; }
.mg-donor-band__sub { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink56); }

/* ============================================================
   LIST DETAIL (Top 10 posts)
   ============================================================ */
.mg-listdetail__head { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.mg-listdetail__facts {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink40);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair);
  flex-wrap: wrap;
}
.mg-listdetail__lede { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--ink56); max-width: 640px; }

/* ============================================================
   FOOTER
   ============================================================ */
.mg-footer {
  margin-top: 80px;
  border-top: 1px solid var(--hair);
  /* Full-bleed band: see --mg-band-max in :root. */
  max-width: var(--mg-band-max);
  margin-inline: auto;
}
.mg-footer__grid {
  max-width: var(--mg-wrap-max);
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 36px;
}
.mg-footer__col { display: flex; flex-direction: column; gap: 10px; }
.mg-footer__col-h { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink40); }
/* 4px, not the 10px between the other things in a column: a link list is one
   run of items and reads as a list when they sit close, and these columns are
   long enough — eight, ten, eleven links — that 10px each made them ramble.
   With ~20px of line box per item the pitch is still ~24px. */
.mg-footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mg-footer__col a { font-size: 14px; font-weight: 600; color: var(--ink80); }
.mg-footer__col a:hover { color: var(--accent); }
/* Any blocks a column is filled with: headings read as a wordmark, paragraphs as the tagline. */
.mg-footer__col :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 0; }
.mg-footer__col :is(h1, h2, h3, h4, h5, h6) sup { font-size: 10px; }
.mg-footer__col p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--ink56); max-width: 280px; }
/* Widgets dropped into the footer widget areas inherit the column layout, and so
   does one link group of a default column (.mg-footer__group, from the plugin). */
.mg-footer__widget,
.mg-footer__group { display: flex; flex-direction: column; gap: 10px; }
.mg-footer__widget div { display: contents; }
/* A column carrying more than one link list — several Navigation Menu widgets, or
   several default groups — needs more air between them than the 10px between
   links, or the second heading reads as another link. Between lists only: the
   brand column's wordmark, mission line and icons are one block of copy and stay
   tight together. */
.mg-footer__col > .widget_nav_menu + .widget_nav_menu,
.mg-footer__group + .mg-footer__group { margin-top: 18px; }
/* Social icon row (mg26/social-links block). After .mg-footer__col a, which it overrides in the footer. */
.mg-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mg-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--chipbd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink80);
}
.mg-social a:hover { background: var(--card); color: inherit; }
.mg-footer__legal { max-width: var(--mg-wrap-max); margin: 0 auto; padding: 0 24px 96px; }
.mg-footer__legal-inner {
  border-top: 1px solid var(--hair);
  padding-top: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink40);
}

/* Give form column (used by the Give page pattern). */
.mg-give-form { max-width: 760px; margin: 0 auto; }

/* Sections nested inside the article column (recirculation modules) inherit the
   column's width — no second gutter. The same goes for a section block sitting
   in page content: page.php is .mg-wrap itself now, so an Ad Slot or a Review
   Shelf on a page would otherwise be inset by both gutters at once. */
.mg-wrap--article .mg-section.mg-wrap,
.mg-article-body .mg-section.mg-wrap { padding-left: 0; padding-right: 0; }

/* ============================================================
   MISC / WP DEFAULTS
   ============================================================ */
.alignleft { float: left; margin: 0 20px 12px 0; }
.alignright { float: right; margin: 0 0 12px 20px; }
.aligncenter { display: block; margin: 0 auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--ink40); }

/*
 * Highlighted text: core's Highlight format, and any <mark> out of classic
 * content. The browser default is a yellow that belongs to no palette on this
 * site and is unreadable on the dark theme; --ink08 is the page's own faintest
 * wash, so it is light on a light page and pale on a dark one, and the text
 * keeps whatever colour it already had.
 *
 * An editor who picks a highlight colour in the toolbar gets an inline style,
 * which outranks this — so this is the default rather than a restriction.
 */
mark {
  background: var(--ink08);
  color: inherit;
  padding: 0 0.12em;
  border-radius: 4px;
}
.sticky {} .bypostauthor {} .gallery-caption {}

/*
 * Separators: core's block and a bare <hr> out of classic content alike.
 *
 * Core draws the rule in currentColor, which is two faults at once. A divider
 * comes out exactly as strong as the body text beside it, which no divider
 * should; and it disappears altogether wherever the text colour and the
 * surface under it are the same colour — which is what happened to the <hr> in
 * the Give page's white card, sitting inside a band that had set colour to
 * white.
 *
 * --chipbd answers both: a hairline rather than a full-strength line, and one
 * that comes from the same token set as the surface beneath it, so it follows
 * a card's background the way that card's headings do — dark inside the white
 * card, light inside the black one, without either being named here. The 40%
 * opacity core puts on pre-5.9 separators has to go with it, because 40% of a
 * hairline is nothing at all.
 *
 * :not(.has-background) leaves a separator an editor gave a colour of its own
 * alone; :not(.mg-hr) leaves the article divider its own, fainter line. Three
 * classes deep so this outranks core's .has-css-opacity rather than relying on
 * the theme's sheet loading last, and .is-style-dots keeps its dots because
 * core clears the border there with !important.
 */
hr:not(.has-background):not(.mg-hr),
.wp-block-separator:not(.has-background):not(.mg-hr) {
  border: none;
  border-top: 1px solid var(--chipbd);
  opacity: 1;
}
/*
 * ...and the other reason a separator goes missing, which is not the colour.
 *
 * Core centres one with `margin-left: auto; margin-right: auto`, and gives
 * .is-style-wide no width of its own — in flow layout it simply fills the
 * container, so none is needed. Inside a flex column it does the opposite:
 * auto margins on the cross axis stop a flex item stretching, so the rule is
 * sized to its content instead. A rule has no content, so it comes out 0px
 * wide and paints nothing at all.
 *
 * Every container block this theme registers is a flex column — Card, Stack,
 * CTA Band — so that is exactly where an editor drops a separator. A definite
 * width brings it back. The short default rule needs no help: core already
 * gives that one a width of 100px, and auto margins centre a definite width
 * perfectly well.
 */
.wp-block-separator.is-style-wide { width: 100%; }

/*
 * Group blocks: make WordPress's restored inner container transparent.
 *
 * On a theme without a theme.json — this one — core's
 * wp_restore_group_inner_container() puts the pre-5.9 <div
 * class="wp-block-group__inner-container"> back around a Group's children on
 * the front end, for backwards compatibility with themes that styled it. The
 * editor shows no such wrapper, so a Group whose class makes it a flex or grid
 * container (.mg-cards-3, .mg-give-hero, .mg-center-head …)
 * would lay out one full-width child on the front end and its real children in
 * the editor — the same content, two different pages.
 *
 * display: contents removes the wrapper from layout without removing it from
 * the DOM, so the children are the flex/grid items either way. Nothing here
 * styles the wrapper itself, so there is nothing to lose.
 */
.wp-block-group__inner-container { display: contents; }

/* ============================================================
   ACCESSIBILITY / NARROW VIEWPORTS
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 782px) {
  body.admin-bar { --mg-admin-bar-h: 46px; }
}
@media screen and (max-width:600px) {
  #wpadminbar {
    position: fixed;
  }
}

@media (max-width: 480px) {
  .mg-wrap,
  .mg-ad-welcomemat,
  .mg-ad-articlestart,
  .mg-header__inner { padding-left: 16px; padding-right: 16px; }
  .mg-bottomnav { bottom: max(10px, env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); }
  .mg-bottomnav .mg-tag { padding: 10px 12px; font-size: 12px; }
  .mg-byline { flex-wrap: wrap; }
  .mg-byline .mg-share { flex-basis: 100%; margin-left: 0; }
  .mg-article-body .alignleft,
  .mg-article-body .alignright { float: none; margin-left: 0; margin-right: 0; }
  .mg-ranked { gap: 0; }
  .mg-give-hero,
  .mg-nl-hero { gap: 32px; }
  .mg-comment-list .children { padding-left: 20px; }
  .mg-nl-card,
  .mg-give-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   GRAVITY FORMS
   Every donation and signup form on the site is a Gravity Form, and they
   render in two markup families at once: pages built before 2026 print the
   legacy wrapper (.gform_legacy_markup_wrapper, choices as <ul><li>), newer
   ones print the 2.5 wrapper (.gravity-theme, choices as <div>). Everything
   here is written against the classes both families share — .gform_wrapper,
   .gform_footer, .gfield_radio, .gchoice — so one set of rules dresses either,
   on any form, rather than naming a form id.

   The look is the Give card's, which is the 2026 design applied to a real
   Gravity Form: an accent button with 12px corners, and radio choices worn as
   chips. The card keeps its own copy of that (movieguide-new/blocks/give-card),
   scoped one class deeper and so still winning inside the card; this section is
   what every other form gets.

   Two cascade rules this section lives by:

   1. NO !important anywhere in the button rules. Live Composer writes its
      per-module styling as "#dslc-module-<id> input[type=submit] { ... }" — an
      id selector, which outranks everything below, but only while these stay
      ordinary declarations. An editor who sets a button colour, radius or font
      in Live Composer still gets it. The `body` prefix is here for the opposite
      reason: Gravity Forms' own sheets are enqueued *after* the theme's, so a
      plain ".gform_wrapper .gform_footer input[type=submit]" would tie with
      GF's rule of the same shape and lose on source order.

   2. !important throughout the radio-chip rules, and only there. That look is
      already claimed by movieguide-widgets.css, which sets it in !important
      declarations (body .movieguide_radio_modern .gfield_radio .gchoice label),
      so matching it is the only way to restyle those fields from here. The
      selectors also run one class deeper than that sheet's, so the win does not
      rest on which stylesheet happens to load last.
   ============================================================ */

/* ---------- Buttons: submit, and next/previous on a paged form ---------- */

body .gform_wrapper .gform_button,
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer button,
body .gform_wrapper .gform_page_footer input[type="submit"],
body .gform_wrapper .gform_page_footer input[type="button"],
body .gform_wrapper .gform_page_footer button {
  display: inline-block;
  width: auto;
  padding: 16px 28px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  /* iOS Safari draws its own chrome on input[type=submit] otherwise, and the
     corners it draws are not the ones above. */
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.12s ease;
}

/* The form's own "full width" button setting, honoured in both markup
   families: the legacy sheet hands the button width:auto, and the 2.5 sheet
   only sizes it when it also carries a column-width class. */
body .gform_wrapper .gform_footer input.gform-button--width-full,
body .gform_wrapper .gform_footer button.gform-button--width-full,
body .gform_wrapper .gform_page_footer input.gform-button--width-full,
body .gform_wrapper .gform_page_footer button.gform-button--width-full {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body .gform_wrapper .gform_button:hover,
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer button:hover,
body .gform_wrapper .gform_page_footer input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer input[type="button"]:hover,
body .gform_wrapper .gform_page_footer button:hover {
  opacity: 0.9;
  color: #ffffff;
}

/* Previous is the quieter of a paged form's two buttons, so it reads as an
   outline rather than a second call to action. */
body .gform_wrapper .gform_page_footer input.gform_previous_button,
body .gform_wrapper .gform_page_footer button.gform_previous_button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--chipbd);
}
body .gform_wrapper .gform_page_footer input.gform_previous_button:hover,
body .gform_wrapper .gform_page_footer button.gform_previous_button:hover {
  background: var(--card);
  color: var(--ink);
  opacity: 1;
}

body .gform_wrapper .gform_footer,
body .gform_wrapper .gform_page_footer {
  margin: 22px 0 0;
  padding: 0;
}

/* ---------- Inputs: corners and the border that has to come with them ---------- */

/* Two properties, not one. Nothing on this site gives a Gravity Forms text
   field a border — not the widgets sheet, not Live Composer, not Gravity Forms
   itself, which sets only padding and font-size — so until now the field wore
   the browser's own, and Chrome painted that natively. A border-radius takes
   the field off the native path, at which point the UA border it falls back to
   ("2px inset") renders as the old 3D bevel: dark down the top and left edges,
   pale on the other two. So the radius has to bring a real border with it. It
   is still the smallest possible declaration — no padding, no background, no
   font — and everything else a page gives its fields still applies. */
body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="number"],
body .gform_wrapper input[type="password"],
body .gform_wrapper input[type="date"],
body .gform_wrapper input[type="search"],
body .gform_wrapper select,
body .gform_wrapper textarea {
  border: 1px solid var(--chipbd);
  border-radius: 10px;
}

/* Focus, without the browser's blue halo around the box. The field still has
   to say it is focused — dropping the ring and putting nothing back would
   leave a keyboard user with no way to tell where they are — so it says it in
   the border instead: the accent colour, doubled by an inset shadow so it
   reads at a glance, and drawn inside the box rather than around it. */
body .gform_wrapper input[type="text"]:focus,
body .gform_wrapper input[type="email"]:focus,
body .gform_wrapper input[type="tel"]:focus,
body .gform_wrapper input[type="url"]:focus,
body .gform_wrapper input[type="number"]:focus,
body .gform_wrapper input[type="password"]:focus,
body .gform_wrapper input[type="date"]:focus,
body .gform_wrapper input[type="search"]:focus,
body .gform_wrapper select:focus,
body .gform_wrapper textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ---------- Selects: the same height as the input beside them ---------- */

/* A select sat shorter than the text field next to it — visibly so in the
   address block, where the country select shares a row with City and ZIP —
   for two separate reasons. movieguide.css asks every Gravity Forms select for
   "-webkit-appearance: button", which makes Chrome size it the way it sizes a
   push button, from the text rather than from the padding it was given; and
   Gravity Forms' legacy sheet hands selects a line-height of 1.5 that no input
   on the form has.

   Both are answered by taking the select off native rendering. With no widget
   in the way it builds its height out of the same font, padding and border as
   the input beside it, so the two match rather than nearly match. Note what is
   NOT set here: vertical padding. Gravity Forms gives inputs and selects their
   padding in one declaration, so leaving it alone is what keeps the two in
   step — in the 2.5 markup they share 8px, in the legacy markup they share the
   browser's default, and either way the select follows the input.

   The cost is the arrow, which the browser stops drawing, so the chevron is
   ours. Its colour is literal because a data URI cannot read currentColor;
   the theme never sets color-scheme, so fields keep the browser's light
   background under both themes and one dark chevron is right in both. */
body .gform_wrapper .gfield select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: normal;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

/* ---------- Fieldsets ---------- */

/* Choice fields come out of the 2.5 markup as <fieldset>, and Gravity Forms
   zeroes their margins, so a chip row has only the field grid's row gap
   between it and whatever follows. A little of its own on top of that. */
body .gform_wrapper .gform_fields fieldset.gfield {
  margin-bottom: 12px;
}

/* ---------- Radio choices as chips (.movieguide_radio_modern) ---------- */

/* The chip row is a grid and the count classes below set only how many columns
   it has. A row that does not divide evenly — the annual array is four chips
   over three columns — leaves the remainder left-aligned on the last row,
   which is what the Give card does and the reason this is a grid rather than a
   justified flex row. */
body .gform_wrapper .movieguide_radio_modern .gfield_radio {
  display: grid !important;
  grid-template-columns: repeat(var(--mg-gf-chip-cols, 3), minmax(0, 1fr));
  gap: 8px;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

body .gform_wrapper .movieguide_radio_2 .gfield_radio { --mg-gf-chip-cols: 2; }
body .gform_wrapper .movieguide_radio_3 .gfield_radio { --mg-gf-chip-cols: 3; }
body .gform_wrapper .movieguide_radio_4 .gfield_radio { --mg-gf-chip-cols: 4; }
body .gform_wrapper .movieguide_radio_5 .gfield_radio { --mg-gf-chip-cols: 5; }
/* The donation arrays. The class is named for the two-column grid the widgets
   sheet gave it; the arrays that carry it are six chips, so three columns is
   still two rows, and it is the layout the Give card uses. */
body .gform_wrapper .movieguide_radio_2rows .gfield_radio { --mg-gf-chip-cols: 3; }

/* A chip row divides its own width into those columns, so an array the form
   editor left at a third of the form has no room for three of them. This means
   something only under the 2.5 markup, where the field list is a 12-column
   grid; the legacy wrapper's field list is not a grid and grid-column is inert
   there. */
body .gform_wrapper .gform_fields .gfield.movieguide_radio_modern {
  grid-column: 1 / -1;
}

body .gform_wrapper .movieguide_radio_modern .gfield_radio .gchoice {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  overflow: visible;
}

/* The radio goes invisible rather than display:none, which is what it was.
   The chip the user sees is the label, so the input has to keep its place in
   the tab order and in the accessibility tree — and be focusable, for the
   focus ring further down. */
body .gform_wrapper .movieguide_radio_modern .gfield_radio .gchoice input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

body .gform_wrapper .movieguide_radio_modern .gfield_radio .gchoice label {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 13px 8px !important;
  border: 1px solid var(--chipbd) !important;
  border-radius: 12px !important;
  background: transparent;
  color: inherit;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
  box-sizing: border-box;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

body .gform_wrapper .movieguide_radio_modern .gfield_radio .gchoice label:hover {
  background: var(--card) !important;
}

body .gform_wrapper .movieguide_radio_modern .gfield_radio .gchoice input[type="radio"]:checked + label {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

body .gform_wrapper .movieguide_radio_modern .gfield_radio .gchoice input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Validation ---------- */

body .gform_wrapper .validation_message {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ext-ink);
  font-size: 12px;
  font-weight: 600;
}

body .gform_wrapper .gform_validation_errors {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: var(--ext-bg);
  box-shadow: none;
}
body .gform_wrapper .gform_validation_errors > h2 {
  margin: 0;
  color: var(--ext-ink);
  font-size: 13px;
  font-weight: 700;
}

body .gform_wrapper .gform_confirmation_message {
  padding: 18px 16px;
  border-radius: 12px;
  background: var(--fam-bg);
  color: var(--fam-ink);
  font-weight: 600;
  text-align: center;
}

/* ---------- Narrow screens ---------- */

/* Only the rows wider than three drop; a three-across row stays three, because
   two columns would leave "Single / Monthly / Annual" as 2 + 1. */
@media (max-width: 480px) {
  body .gform_wrapper .movieguide_radio_2rows .gfield_radio,
  body .gform_wrapper .movieguide_radio_4 .gfield_radio,
  body .gform_wrapper .movieguide_radio_5 .gfield_radio {
    --mg-gf-chip-cols: 2;
  }

  body .gform_wrapper .movieguide_radio_modern .gfield_radio .gchoice label {
    padding: 12px 6px !important;
    font-size: 14px !important;
  }
}