/*
Theme Name:  AMA India Twenty-Six
Theme URI:   https://www.hadnow.com
Description: Hello Elementor child theme for Ahmedabad Management Association. Implements the AMA design system (Atkinson Hyperlegible body · Plus Jakarta Sans headings) with full WCAG 2.2 AA accessibility compliance.
Author:      AMA Web Team
Author URI:  https://www.hadnow.com
Template:    hello-elementor
Version:     2.18.1
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: amaindia-twenty-six
License:     GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags:        custom-menu, custom-colors, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. AMA DESIGN TOKENS — single source of truth
   ========================================================================== */
/* TYPE FAMILIES ARE DECLARED ON body, NOT HERE — see the block below this one.
   They used to sit at :root as hard-coded families, which is why Elementor →
   Site Settings → Global Fonts changed Elementor's own widgets but nothing the
   theme styles itself (header, tables, Woo, MEC views, search, FAQ): all ~150
   var(--font-*) rules in this theme read those literals. */
:root {
  /* — Reds (primary brand) — */
  --red:       #d6362f;   /* CTAs, urgency — 4.7:1 on white (AA) */
  --red-deep:  #a82720;   /* accent text on light — 7.1:1 (AAA)  */
  --red-ink:   #7a1a14;   /* deepest red, ink-heavy              */
  --red-soft:  #fbe8e6;   /* tinted backgrounds                  */

  /* — Blues (secondary / structure) — */
  --blue:      #1740a8;   /* navigation, links — 8.3:1 on cream (AAA) */
  --blue-deep: #0d2160;   /* headings, footer — 13.9:1 (AAA)         */
  --blue-soft: #e6ebf7;   /* tinted backgrounds, selected states     */

  /* — Neutrals — */
  --cream:     #faf6ee;   /* default page ground                  */
  --paper:     #f1ece0;   /* secondary ground · table headers     */
  --white:     #ffffff;   /* cards, raised surfaces               */
  --ink:       #1a1f33;   /* body text — 15.1:1 on cream (AAA)   */
  --ink-soft:  #4a5474;   /* secondary text — 6.9:1 on cream (AA) */
  --rule:      #d4c8b0;   /* decorative hairlines only            */

  /* — Layout & rhythm — */
  --page-pad:        56px;
  --page-pad-mobile: 20px;
  --tap-min:         44px;   /* WCAG 2.5.5 (AAA) target size. 2.5.8, the AA
                                criterion, asks only 24px — this is the stricter
                                figure, deliberately. */
  --max-width:       1180px;
  --section-gap:     64px;

  /* — Borders — */
  --hairline:        1px solid var(--rule);
  --hairline-strong: 1.5px solid var(--blue-deep);

  /* — Motion — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-med:  250ms;

  /* — Z-index scale —
     Read bottom-up; each layer must beat the one below it.

       sticky      sticky header / bars
       nav         the menu bar itself
       overlay     full-screen scrims
       nav-drawer  the mobile menu panel that slides over the scrim
       popover     search + account panels. These open FROM the header, and the
                   header is its own stacking context: edupreme-kit-overrides.css
                   sets .elementor-location-header to position:relative with
                   z-index:9999, then pins the ElementsKit menu and its panels to
                   9999 !important INSIDE it. So a popover is not competing with
                   the page, it is competing with that menu — anything below
                   10000 opens behind it no matter how the rest of this scale
                   reads. That is why 400 looked correct and still failed.
       drawer      the mini-cart, which slides over everything
       skip        the skip link, always last

     Components used to pick their own numbers (search 300, account 1000, cart
     100000) so whether a panel was visible depended on which one you opened.
     Anything that stacks belongs on this ladder. */
  --z-skip:       9999;
  --z-drawer:     100000; /* above --z-skip on purpose: a full-screen drawer
                             covers the skip link while it is open */
  --z-popover:    10000;  /* must beat ElementsKit's 9999 !important — see above */
  --z-nav-drawer: 350;
  --z-overlay:    300;
  --z-nav:        200;
  --z-sticky:     100;

}

/* ==========================================================================
   1b. TYPE FAMILIES — Elementor Site Settings is the source of truth
   --------------------------------------------------------------------------
   Declared on `body`, and that is load-bearing rather than stylistic:

   Elementor emits its global typography on `.elementor-kit-{id}`, which is a
   class on <body>. Custom properties inherit DOWNWARD only, so a declaration at
   :root (i.e. <html>) sits one level ABOVE the kit and cannot read it —
   var(--e-global-typography-text-font-family) would resolve to nothing there.
   Declaring on the same element the kit targets is what makes this work.

   Result: whatever you pick in Elementor → Site Settings → Global Fonts wins,
   and the AMA faces below are used only when a global is unset. Every
   var(--font-*) rule in the theme follows automatically — no per-rule edits.

   Keep the fallbacks. If a global is ever cleared, these prevent the site
   dropping to the browser default (Times).
   ========================================================================== */
body {
  /* Body copy → Elementor's "Text" slot. Atkinson Hyperlegible was designed by
     the Braille Institute for low-vision readers — the accessibility-motivated
     default if nothing is set. */
  --font-body:  var(--e-global-typography-text-font-family, 'Atkinson Hyperlegible'), Arial, sans-serif;
  /* Headings → Elementor's "Primary" slot. */
  --font-sans:  var(--e-global-typography-primary-font-family, 'Plus Jakarta Sans'), system-ui, -apple-system, sans-serif;
  /* Aliases — the theme has no third face by design. "mono" is used for small
     UI labels (tags, counts, captions), which are body-level; "serif" is a
     legacy slot kept so old references don't hit Georgia. */
  --font-serif: var(--font-sans);
  --font-mono:  var(--font-body);

  /* — Minimum type size: 0.75rem (12px) —————————————————————————————
     Nothing in this theme sets a font-size below 0.75rem. WCAG sets no minimum
     — 9px was never a failure — but the theme had 119 declarations between 8px
     and 11px, and small type costs older readers, phone users in daylight and
     anyone tired, which is most people some of the time. Raised in 2.7.5.

     Keep it in rem, never px, so it still scales with the reader's browser
     setting (1.4.4 Resize Text). If a component looks like it needs 10px, the
     component is too dense — give it room instead.

     The 2.7.5 sweep only covered .css files and missed CSS written inline in
     PHP — class-ama-mec-related.php, two Elementor widgets, and two plugin
     modules were all still below the floor. When checking, grep the PHP too.
     Admin screens and the PDF/email ticket template are deliberately exempt:
     wp-admin has its own 11px convention, and an email is not a web page. */

  /* — Component palette, declared here and ONLY here —————————————————
     These six were defined twice, under two names: --ama-* in
     ama-mec-views.css and a byte-identical --ama-* set in ama-mec-single.css.
     Ten stylesheets referenced --ama-*, but only the MEC single-event sheet
     defined it, so on every page without a single event — the home page
     included — all six resolved to nothing and every reference silently fell
     back to a hard-coded hex. The palette looked like it followed Site
     Settings and, off the event pages, never did.

     They live on `body`, not :root, for the same reason the font tokens do:
     Elementor emits its globals on .elementor-kit-{id}, a class on <body>, and
     custom properties inherit downward only. Declared here, in the one
     stylesheet that loads on every page, they resolve everywhere.

     Keep the fallbacks — if a global is cleared these stop the components
     rendering unstyled. */
  --ama-navy:   var(--e-global-color-primary, #1a2744);
  --ama-maroon: var(--e-global-color-accent,  #8a3a2a);
  --ama-cream:  #f5f0e8;
  --ama-border: #d6cfc4;
  --ama-text:   #0d1524;
  /* #8a7f72 -> #534c45 -> #534c45. The first failed AA outright (3.18:1);
     the second passed AA at 5.07:1 on the ivory surface but not AAA. This
     clears AAA at 7.16:1, which matters because this one token colours most
     of the small text in the theme — eyebrows, labels, captions, counts. The
     rest of the palette stays at the AA target deliberately. */
  --ama-muted:  #534c45;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* Prevent text size inflation on iOS */
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings use Plus Jakarta Sans Bold — high legibility at display sizes */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--blue-deep);
  margin: 0 0 0.5em;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blue-deep);
  text-decoration-thickness: 2px;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* WCAG: VoiceOver removes list semantics when list-style:none is set.
   Add role="list" to any <ul>/<ol> that should be announced as a list. */
ul, ol {
  list-style: none;   /* prevent bullets overflowing when padding-left is stripped */
  margin: 0;
  padding: 0;
}

/* Restore list appearance inside prose / rich-text content areas */
.entry-content ul,
.entry-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol,
.ama-mec-content ul,
.ama-mec-content ol,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol {
  list-style: revert;
  padding-left: 1.5em;
  margin: 0 0 1em;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Selection — WCAG 1.4.3: --red-deep (#a82720) gives 4.9:1 on --cream */
::selection {
  background: var(--red-deep);
  color: var(--cream);
}

/* ==========================================================================
   3. WCAG 2.2 FOCUS STYLES — SC 2.4.7 · 2.4.11 · 2.4.13
   Ultra-visible :focus-visible on ALL interactive elements.
   Uses :focus-visible so mouse users are unaffected.
   ========================================================================== */
:focus-visible {
  /* Double ring: 2px white gap + 3px blue-deep outer — visible on ALL backgrounds
     including red, cream, dark-navy (SC 2.4.7 / 2.4.11 / 2.4.13) */
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px rgba(13, 33, 96, 0.18);
  /* Guarantee the ring never disappears behind sticky elements (SC 2.4.11) */
  scroll-margin-top: 80px;
}

/* Dark-background override: cream outline + blue-deep gap ring */
.ama-nav__topbar a:focus-visible,
.ama-footer a:focus-visible {
  outline-color: var(--cream);
  box-shadow: 0 0 0 5px var(--blue-deep), 0 0 0 8px var(--cream);
}

/* Ensure mega-menu nav links use --blue-deep focus ring (WCAG 2.4.11 consistency) */
.ama-nav__menu a:focus-visible,
.ama-nav__mega a:focus-visible {
  outline-color: var(--blue-deep);
}

/* Remove browser default outline only when :focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   4. SKIP LINK — WCAG SC 2.4.1
   ========================================================================== */
/* Doubled class, deliberately. Elementor's global link colour lands as
   `.elementor-kit-25 a` — one class plus a type, which outranks a single
   `.skip-link` — so `color: var(--cream)` lost and the focused skip link
   rendered #1a1f33 on #0d2160: a contrast ratio of 1.09:1, i.e. invisible.
   It is the first thing a keyboard user reaches, and nobody using a mouse
   ever sees it, so the breakage was silent. Repeating the class wins on
   specificity without !important, matching how the theme handles Elementor
   elsewhere. */
.skip-link.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: var(--z-skip);
  background: var(--blue-deep);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 2px;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: 16px;
}

/* Fallback only. The duplicate skip link turned out to be ElementsKit's, not
   the parent theme's — printed inline in its header template — and
   functions.php now switches it off at source with
   add_filter( 'elementskit_enable_skip_link', '__return_false' ). On a normal
   page this rule therefore matches nothing.
   It stays because display:none is the one thing CSS can do that visibility
   and clip cannot: take the element out of the tab order. If a future
   ElementsKit drops that filter, this keeps the second tab stop — an element
   clipped to rect(0,0,0,0) even while focused, so focus vanished for a sighted
   keyboard user — off the page.
   Requires BOTH classes, so it can never hit ours: ours carries `skip-link`
   alone. */
a.skip-link.screen-reader-text {
  display: none;
}

/* ==========================================================================
   5. LAYOUT UTILITIES
   ========================================================================== */

/* Visually-hidden utility (WCAG). Declared here, in the stylesheet that loads
   on every page, and ONLY here.

   It used to live in ama-woo.css. That file is enqueued site-wide today, so it
   worked — but only while WooCommerce is active, because the class that
   enqueues it bails without Woo. Deactivating a plugin would have made every
   screen-reader-only span on the site visible: the search-form label, the
   newsletter label, the MEC brochure file-type hint. A global utility cannot
   depend on a plugin being installed. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  /* Explicit pair, not inherited. Two reasons. The rule below reveals this text
     on keyboard focus, and inheriting whatever the section uses meant it could
     surface as #1a1f33 on a navy panel — invisible at the one moment it is
     meant to be read. And checkers score hidden text against its inherited
     background, reporting 1:1 for something nobody can see; a defined pair is
     both honest and quiet. */
  color: #1a1f33;
  background-color: #faf6ee;
}
/* Standard pattern: reveal on keyboard focus, so skip links and the like stay
   reachable. */
.screen-reader-text:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; clip: auto; white-space: normal;
}

.ama-wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.ama-section {
  padding-block: var(--section-gap);
  border-bottom: var(--hairline);
}

.ama-section--white {
  background: var(--white);
}

.ama-section--paper {
  background: var(--paper);
}

.ama-section--blue-deep {
  background: var(--blue-deep);
  color: var(--cream);
}

/* ==========================================================================
   6. TOPBAR — utility strip
   ========================================================================== */
.ama-nav__topbar {
  background: var(--red-deep);
  color: var(--cream);
  font-size: 0.84375rem;
  padding: 10px var(--page-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-sans);
}

.ama-nav__topbar a {
  color: #fde7c2;
  text-decoration: none;
  font-weight: 600;
}

.ama-nav__topbar a:hover {
  color: var(--cream);
  text-decoration: underline;
}

.ama-nav__topbar .mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: #fde7c2;
  font-weight: 700;
}

/* ==========================================================================
   7. MAIN NAVIGATION + MEGA MENU
   ========================================================================== */
.ama-nav {
  background: var(--cream);
  border-bottom: var(--hairline);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  /* iOS safe-area: prevents nav from sliding behind notch/Dynamic Island */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.ama-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  min-height: 72px;
}

/* Logo */
.ama-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.ama-nav__logo img {
  height: 44px;
  width: auto;
}

/* Primary nav list */
.ama-nav__menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.ama-nav__item {
  position: relative;
}

/* Top-level nav links */
.ama-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding: 0 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  /* Smooth colour + border indicator — NO background fill */
  transition: color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
  cursor: pointer;
  background: transparent;
  border: none;
  /* Reserve space for the bottom border so items don't shift on hover */
  box-shadow: inset 0 -2px 0 transparent;
}

/* Hover: colour only — no fill */
.ama-nav__link:hover {
  color: var(--red-deep);
  box-shadow: inset 0 -2px 0 var(--red-soft);
}

/* Open (dropdown active): colour shift only — the panel's red border-top
   IS the active indicator; no box-shadow needed (it would double-up). */
.ama-nav__link[aria-expanded="true"] {
  color: var(--red-deep);
  box-shadow: none;
  background: transparent;
}

/* Chevron for items with children */
.ama-nav__link .nav-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration-fast) ease;
  pointer-events: none;
}

.ama-nav__link[aria-expanded="true"] .nav-arrow {
  transform: rotate(180deg);
}

/* Active / current page indicator */
.ama-nav__item.current-menu-item > .ama-nav__link,
.ama-nav__item.current-menu-ancestor > .ama-nav__link {
  color: var(--red-deep);
  box-shadow: inset 0 -3px 0 var(--red);
}

/* ==========================================================================
   7a. MEGA MENU DROPDOWN
   ========================================================================== */
.ama-mega {
  /* Single position declaration — no duplicate */
  position: absolute;
  /* Flush against the nav bar: no gap so there is no orphan hairline */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 560px;
  max-width: 960px;
  background: var(--white);
  border: var(--hairline);
  /* Red top border IS the active indicator — replaces the box-shadow on the trigger */
  border-top: 2px solid var(--red);
  box-shadow: 0 16px 48px rgba(13, 33, 96, 0.13);
  padding: 24px 28px 28px;
  display: none;
  flex-direction: row;
  gap: 0;
  z-index: var(--z-overlay);
}

/* Show state — JS toggles is-open */
.ama-mega.is-open {
  display: flex;
  flex-wrap: nowrap;
  /* stretch makes ALL columns the same height so right-border lines align */
  align-items: stretch;
}

/* ── Column groups ──────────────────────────────────────────────────────── */
.ama-mega__col {
  list-style: none;
  margin: 0;
  /* Symmetric padding: content is inset from both the left border and the
     right border, giving equal breathing room on each side of a divider. */
  padding: 0 20px;
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: var(--hairline);
}

/* First column has no left wall to pad from */
.ama-mega__col:first-child {
  padding-left: 0;
}

/* Last column needs no right gutter or divider */
.ama-mega__col:last-child {
  padding-right: 0;
  border-right: none;
}

/* Column count overrides — recalculate with 20px gutters */
.ama-nav__item--mega-cols-2 .ama-mega__col { flex: 0 0 calc(50% - 10px); }
.ama-nav__item--mega-cols-3 .ama-mega__col { flex: 0 0 calc(33.33% - 14px); }
.ama-nav__item--mega-cols-4 .ama-mega__col { flex: 0 0 calc(25% - 15px); }

/* ── Column heading ─────────────────────────────────────────────────────── */
.ama-mega__col-heading {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red-deep);
  /* No horizontal padding — the column's own padding already provides it.
     This ensures the heading underline is always perfectly flush with the
     left edge of the links below it.                                       */
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1.5px solid var(--rule);
}

/* ── Standard link ──────────────────────────────────────────────────────── */
.ama-mega__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.90625rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 2px;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  min-height: 44px; /* WCAG 2.5.8 */
}

.ama-mega__link:hover {
  background: var(--blue-soft);
  color: var(--blue-deep);
}

.ama-mega__link:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.ama-mega__link-title {
  font-weight: 600;
  font-size: 0.90625rem;
  line-height: 1.3;
}

.ama-mega__link-desc {
  font-size: 0.78125rem;
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.4;
}

/* ── Custom block (image / promo / HTML) ────────────────────────────────── */
.ama-mega__item--custom {
  padding: 4px 10px;
}

.ama-mega__custom img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}

/* ── × Close button — tiny, absolute top-right, hidden on desktop ───────── */
.ama-mega__close {
  /* Hidden on desktop */
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease;
  flex-shrink: 0;
}

.ama-mega__close:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ── Full-width variant ─────────────────────────────────────────────────── */
.ama-nav__item--fullwidth .ama-mega {
  left: 0;
  right: 0;
  transform: none;
  max-width: 100%;
}

/* ==========================================================================
   7b. MOBILE HAMBURGER
   ========================================================================== */
.ama-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid var(--blue-deep);
  border-radius: 2px;
  color: var(--blue-deep);
  flex-shrink: 0;
}

.ama-nav__toggle[aria-expanded="true"] {
  background: var(--blue-deep);
  color: var(--cream);
}

/* ==========================================================================
   8. EYEBROW / OVERLINE
   ========================================================================== */
.ama-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red-deep);
  font-weight: 700;
  margin: 0 0 12px;
}

/* ==========================================================================
   9. BUTTONS — SC 2.5.8 (≥ 44px touch target)
   ========================================================================== */
.ama-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;          /* comfortable above the 44px floor */
  padding: 0 24px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
  white-space: nowrap;
  line-height: 1;
}

/* Primary — white on --red (4.7:1 — AA) */
.ama-btn--primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.ama-btn--primary:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: var(--white);
  text-decoration: none;
}

/* Secondary — --blue-deep outline */
.ama-btn--secondary {
  background: transparent;
  color: var(--blue-deep);
  border-color: var(--blue-deep);
}

.ama-btn--secondary:hover {
  background: var(--blue-deep);
  color: var(--cream);
  text-decoration: none;
}

/* Ghost */
.ama-btn--ghost {
  background: var(--white);
  color: var(--blue-deep);
  border-color: var(--rule);
}

.ama-btn--ghost:hover {
  border-color: var(--blue-deep);
  text-decoration: none;
}

/* ==========================================================================
   10. PROGRAMME / PILLAR CARDS
   ========================================================================== */
.ama-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px;
}

.ama-pillar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
  min-height: 320px;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--duration-med) var(--ease-out);
}

.ama-pillar-card:hover {
  transform: translateY(-2px);
}

/* Pillar colour variants */
.ama-pillar-card--mdp    { background: var(--red);      color: var(--white); }
.ama-pillar-card--exim   { background: var(--blue-deep); color: var(--cream); }
.ama-pillar-card--forum  { background: var(--paper);     color: var(--ink);   }
.ama-pillar-card--cream  { background: var(--cream);     color: var(--ink);   }
.ama-pillar-card--white  { background: var(--white);     color: var(--ink);   }

.ama-pillar-card__tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 24px;
}

.ama-pillar-card__title {
  font-family: var(--font-serif);
  font-size: 2.375rem;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 16px;
  font-weight: 400;
  color: inherit;
}

.ama-pillar-card__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  opacity: 0.85;
  margin: 0;
  max-width: 36ch;
}

.ama-pillar-card__arrow {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   11. EVENT / PROGRAMME CHIPS
   ========================================================================== */
.ama-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 2px;
  white-space: nowrap;
}

.ama-chip--mdp   { background: var(--red);      color: var(--white); }
.ama-chip--forum { background: var(--blue);      color: var(--white); }
.ama-chip--exim  { background: var(--red-deep);  color: var(--cream); }

/* ==========================================================================
   12. TAGS & BADGES
   ========================================================================== */
.ama-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1.5px solid var(--blue-deep);
  color: var(--blue-deep);
  border-radius: 2px;
}

.ama-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border: 1.5px solid;
  border-radius: 2px;
}

.ama-badge--aaa   { color: #0d6b3f; border-color: #0d6b3f; background: #e7f5ec; }
.ama-badge--aa    { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.ama-badge--large { color: var(--red-deep); border-color: var(--red-deep); background: var(--red-soft); }

/* ==========================================================================
   13. CALLOUT BLOCKS
   ========================================================================== */
.ama-callout {
  border-left: 4px solid var(--red);
  background: var(--red-soft);
  padding: 20px 24px;
  border-radius: 0 2px 2px 0;
}

.ama-callout strong { color: var(--red-ink); }

.ama-callout--blue {
  border-left-color: var(--blue);
  background: var(--blue-soft);
}

.ama-callout--blue strong { color: var(--blue-deep); }

/* ==========================================================================
   14. HERO SECTION
   ========================================================================== */
.ama-hero {
  background: var(--cream);
  padding: 80px var(--page-pad) 72px;
  border-bottom: var(--hairline);
  overflow: hidden;
}

.ama-hero__inner {
  max-width: var(--max-width);
  margin-inline: auto;
}

.ama-hero__headline {
  font-family: var(--font-serif);
  font-size: clamp(3.25rem, 7vw, 6rem);
  line-height: 0.92;
  letter-spacing: -2.5px;
  color: var(--blue-deep);
  margin: 16px 0 0;
  font-weight: 400;
}

.ama-hero__headline em {
  font-style: italic;
  color: var(--red-deep);
}

.ama-hero__lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 24px 0 36px;
  line-height: 1.55;
}

.ama-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ==========================================================================
   15. CONTENT CARDS
   ========================================================================== */
.ama-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.ama-card {
  background: var(--white);
  border: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-med) ease;
}

.ama-card:hover {
  box-shadow: 0 4px 24px rgba(13, 33, 96, 0.1);
}

.ama-card__img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.ama-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ama-card__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--blue-deep);
  margin: 0 0 10px;
}

.ama-card__excerpt {
  font-size: 0.90625rem;
  color: var(--ink-soft);
  line-height: 1.55;
  flex: 1;
  margin: 0 0 20px;
}

.ama-card__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

/* ==========================================================================
   16. SECTION HEADER PATTERN
   ========================================================================== */
.ama-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ama-sec-head__title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--blue-deep);
  margin: 0;
}

.ama-sec-head__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--red-deep);
  white-space: nowrap;
}

.ama-lede {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-top: 12px;
  line-height: 1.55;
}

/* ==========================================================================
   17. TABLES
   ========================================================================== */
.ama-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.90625rem;
}

.ama-table caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-bottom: 12px;
  caption-side: top;
}

.ama-table th,
.ama-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: var(--hairline);
}

.ama-table thead th {
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--blue-deep);
  border-bottom: var(--hairline-strong);
}

/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.ama-footer {
  background: var(--blue-deep);
  color: var(--cream);
  padding: 64px var(--page-pad) 48px;
}

.ama-footer__inner {
  max-width: var(--max-width);
  margin-inline: auto;
}

.ama-footer a {
  color: #a9b2d0;
  text-decoration: none;
}

.ama-footer a:hover {
  color: var(--cream);
  text-decoration: underline;
}

.ama-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 32px;
}

.ama-footer__brand-name {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--cream);
  margin: 16px 0 12px;
  font-weight: 400;
}

.ama-footer__tagline {
  font-size: 0.875rem;
  color: #a9b2d0;
  line-height: 1.55;
  max-width: 36ch;
}

.ama-footer__col-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #a9b2d0;
  margin: 0 0 16px;
}

.ama-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ama-footer__links a {
  font-size: 0.875rem;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
}

/* Placeholder text items — not yet linked; styled identically to links but not interactive */
.ama-footer__link-placeholder {
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
  cursor: default;
}

.ama-footer__tagline--since {
  margin-top: 12px;
}

.ama-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8125rem;
  color: #a9b2d0;
}

.ama-footer__bottom-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   19. CODE BLOCKS
   ========================================================================== */
pre,
code {
  font-family: var(--font-mono);
}

pre.ama-code {
  background: var(--blue-deep);
  color: var(--cream);
  padding: 24px 28px;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.7;
  border-radius: 2px;
}

/* ==========================================================================
   20. ELEMENTOR WIDGET OVERRIDES
   Ensure our design tokens win over Elementor defaults.
   ========================================================================== */

/* Elementor sections / containers carry the BODY face (Atkinson Hyperlegible).
   Body text inside Elementor pages/posts (incl. the blog) inherits from here;
   headings get Plus Jakarta Sans from their own rule below. Using --font-sans
   here was forcing ALL container body copy into the heading font. */
.elementor-section,
.elementor-container,
.e-container,
.e-con {
  font-family: var(--font-body);
}

/* Elementor headings respect our type system */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-serif);
  letter-spacing: -0.5px;
}

/* Elementor buttons adopt our accessible sizing */
/* text-decoration: none overrides the global a { text-decoration: underline } */
.elementor-button,
.elementor-button:hover,
.elementor-button:focus {
  min-height: 48px;
  font-family: var(--font-sans);
  font-weight: 700;
  text-decoration: none;
}

/* Elementor image widget */
.elementor-widget-image img {
  border-radius: 2px;
}

/* Prevent Elementor from nullifying our focus ring */
.elementor-widget a:focus-visible,
.elementor-widget button:focus-visible,
.elementor-widget input:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   21. RESPONSIVE — mobile-first breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --page-pad: 32px;
  }

  .ama-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --page-pad: var(--page-pad-mobile);
    --section-gap: 48px;
  }

  /* Mobile navigation */
  .ama-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: var(--hairline);
    border-bottom: var(--hairline);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0 16px;
    box-shadow: 0 8px 32px rgba(13, 33, 96, 0.12);
    z-index: var(--z-overlay);
    gap: 0;
  }

  .ama-nav__menu.is-open {
    display: flex;
  }

  .ama-nav__toggle {
    display: inline-flex;
  }

  .ama-nav__link {
    padding: 0 var(--page-pad-mobile);
    min-height: 52px;
    border-bottom: var(--hairline);
    font-size: 1rem;
    justify-content: space-between;
  }

  /* Mega as accordion on mobile */
  .ama-mega {
    position: static;
    transform: none;
    min-width: 0;
    max-width: 100%;
    border: none;
    border-top: var(--hairline);
    border-radius: 0;
    box-shadow: none;
    padding: 12px var(--page-pad-mobile) 16px;
    display: none;
    flex-direction: column; /* stack columns vertically on mobile */
  }

  .ama-mega.is-open {
    display: flex;
  }

  /* Stack columns vertically on mobile */
  .ama-mega__col {
    flex: unset;
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: var(--hairline);
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .ama-mega__col:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* Tiny × close button — shown on mobile only */
  .ama-mega__close {
    display: flex; /* override display:none from desktop rule */
  }

  .ama-hero {
    padding: 48px var(--page-pad-mobile) 40px;
  }

  .ama-footer__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ama-pillar-grid {
    grid-template-columns: 1fr;
  }

  .ama-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ama-hero__headline {
    letter-spacing: -1.5px;
  }

  .ama-btn {
    min-height: 52px;
    padding: 0 20px;
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   22. PRINT
   ========================================================================== */
@media print {
  .ama-nav,
  .ama-nav__topbar,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #555;
  }
}

/* ==========================================================================
   23. REDUCED MOTION — SC 2.3.3
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   36. DARK-BACKGROUND COLOUR OVERRIDES
   The global h1–h6 rule sets colour: --blue-deep which is invisible on
   navy/dark fills. Every known dark container needs an explicit override.
   ========================================================================== */

/* ── PHP-rendered dark sections ────────────────────────────────────────── */
.ama-section--blue-deep h1,
.ama-section--blue-deep h2,
.ama-section--blue-deep h3,
.ama-section--blue-deep h4,
.ama-section--blue-deep h5,
.ama-section--blue-deep h6,
.ama-section--blue-deep p {
  color: var(--cream);
}

.ama-footer h1,
.ama-footer h2,
.ama-footer h3,
.ama-footer h4,
.ama-footer h5,
.ama-footer h6 {
  color: var(--cream);
}

/* Topbar — all text must be readable on the dark strip */
.ama-nav__topbar,
.ama-nav__topbar span,
.ama-nav__topbar p {
  color: var(--cream);
}
.ama-nav__topbar a       { color: #fde7c2; }
.ama-nav__topbar a:hover { color: var(--cream); }

/* ── Elementor utility class ────────────────────────────────────────────
   Add "ama-dark-bg" in Elementor → Advanced → CSS Classes on any
   container whose background is navy/dark.  All text and headings inside
   flip to cream automatically.
   ──────────────────────────────────────────────────────────────────── */
.ama-dark-bg,
.ama-dark-bg p,
.ama-dark-bg span,
.ama-dark-bg li,
.ama-dark-bg .elementor-widget-text-editor,
.ama-dark-bg .elementor-widget-text-editor * {
  color: var(--cream);
}

.ama-dark-bg h1,
.ama-dark-bg h2,
.ama-dark-bg h3,
.ama-dark-bg h4,
.ama-dark-bg h5,
.ama-dark-bg h6,
.ama-dark-bg .elementor-heading-title {
  color: var(--cream);
}

.ama-dark-bg a            { color: var(--blue-soft); }
.ama-dark-bg a:hover      { color: var(--cream); text-decoration: underline; }
.ama-dark-bg .ama-btn--primary       { color: var(--white); }
.ama-dark-bg .ama-btn--secondary     { color: var(--cream); border-color: rgba(255,255,255,.4); }
.ama-dark-bg .ama-btn--secondary:hover { background: rgba(255,255,255,.1); color: var(--cream); }

/* ==========================================================================
   37. ELEMENTOR SHORTCODE NAV — integration
   The [amaindiats_nav_menu] shortcode wraps output in
   <nav class="amaindiats-shortcode-nav">.
   Make it behave properly inside Elementor's flex containers.
   ========================================================================== */

.amaindiats-shortcode-nav {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;          /* prevent flex overflow in narrow viewports */
}

/* Remove any browser default margin / padding on the <nav> */
nav.amaindiats-shortcode-nav {
  margin: 0;
  padding: 0;
}

/* The inner ul flexes to fill the available space */
.amaindiats-shortcode-nav .ama-nav__menu {
  flex: 1;
  justify-content: flex-end;
}

/* ── Nav item box-shadow border indicator: no gap artefacts ─────────── */
/* The transparent shadow reserves 2px space; ensure no sub-pixel gap
   appears between the nav bar and page content. */
.ama-nav__item {
  align-self: stretch;     /* fill full height of nav bar */
  display: flex;
  align-items: center;
}

/* ==========================================================================
   38. MOBILE NAVIGATION — Elementor header context
   The Elementor header template does not contain a PHP hamburger button.
   We supply one via an HTML widget (.ama-nav__toggle class) and handle
   display-switching entirely in CSS so no JS changes are needed.
   ========================================================================== */

/* ── Hamburger button (HTML widget in Elementor header) ─────────────── */
/* Hidden on desktop — visible on mobile via media query below           */
.ama-nav__toggle {
  display: none;           /* default: desktop hides it */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid var(--blue-deep);
  border-radius: 2px;
  color: var(--blue-deep);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.ama-nav__toggle[aria-expanded="true"] {
  background: var(--blue-deep);
  color: var(--cream);
}

@media (max-width: 768px) {

  /* Show hamburger */
  .ama-nav__toggle {
    display: inline-flex !important;
  }

  /* ── Shortcode nav on mobile — full-screen overlay ────────────────── */
  /* The nav ul becomes a fixed overlay so it works regardless of
     Elementor's container nesting / positioning context.               */
  .amaindiats-shortcode-nav .ama-nav__menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 68px 0 24px;    /* 68px top leaves room for close button */
    z-index: var(--z-nav-drawer);
    overflow-y: auto;
    gap: 0;
    /* Subtle slide-in */
    transform: translateX(100%);
    transition: transform var(--duration-med) var(--ease-out);
  }

  .amaindiats-shortcode-nav .ama-nav__menu.is-open {
    display: flex;
    transform: translateX(0);
  }

  /* Full-width nav items inside the overlay */
  .amaindiats-shortcode-nav .ama-nav__item {
    width: 100%;
    align-self: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .amaindiats-shortcode-nav .ama-nav__link {
    padding: 0 20px;
    min-height: 52px;
    border-bottom: var(--hairline);
    font-size: 1rem;
    justify-content: space-between;
    box-shadow: none;        /* remove inset indicator on mobile */
  }

  .amaindiats-shortcode-nav .ama-nav__link:hover,
  .amaindiats-shortcode-nav .ama-nav__link[aria-expanded="true"] {
    box-shadow: none;
    background: var(--cream);
  }

  /* Mega panel as accordion inside the overlay */
  .amaindiats-shortcode-nav .ama-mega {
    position: static;
    transform: none;
    min-width: 0;
    max-width: 100%;
    border: none;
    border-top: var(--hairline);
    border-top-width: 2px;
    border-top-color: var(--red);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 20px 16px;
    display: none;
    flex-direction: column;
    background: var(--cream);
  }

  .amaindiats-shortcode-nav .ama-mega.is-open {
    display: flex;
  }

  .amaindiats-shortcode-nav .ama-mega__col {
    flex: unset;
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: var(--hairline);
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .amaindiats-shortcode-nav .ama-mega__col:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /* CTA button hidden on mobile (matches header JSON hide_mobile setting) */
  .elementor-hidden-mobile { display: none !important; }

  /* Topbar hidden on mobile to save space */
  .ama-hdr-topbar-mobile-hide {
    display: none !important;
  }

}

/* ==========================================================================
   24. PERSONA CARD
   ========================================================================== */
.amaindiats-persona-card {
  background: var(--cream);
  border: var(--hairline);
  padding: 28px 28px 24px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.amaindiats-persona-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 14px;
}

.amaindiats-persona-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--blue-deep);
  margin: 0 0 18px;
}

.amaindiats-persona-card__seats {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.amaindiats-persona-card__seat-num {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, calc(1.6727rem + 3.103vw), 4rem);
  line-height: 1;
  font-weight: 400;
  color: var(--red-deep);
  letter-spacing: -2px;
}

.amaindiats-persona-card__seat-label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.amaindiats-persona-card__desc {
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 38ch;
}

.amaindiats-persona-card__rule {
  border: none;
  border-top: var(--hairline);
  margin: 0 0 18px;
}

.amaindiats-persona-card__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--red-deep);
  margin: 0;
}

/* ==========================================================================
   25. PROGRAMME STATS BAR
   ========================================================================== */
.amaindiats-stats-bar {
  display: flex;
  flex-wrap: wrap;
  background: var(--cream);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  padding-block: 4px;
}

.amaindiats-stats-bar__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  flex: 1;
  min-width: 120px;
}

.amaindiats-stats-bar__col + .amaindiats-stats-bar__col {
  border-left: var(--hairline);
}

.amaindiats-stats-bar__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.amaindiats-stats-bar__value {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.amaindiats-stats-bar__value--bold {
  font-weight: 700;
}

@media (max-width: 600px) {
  .amaindiats-stats-bar {
    flex-direction: column;
  }
  .amaindiats-stats-bar__col + .amaindiats-stats-bar__col {
    border-left: none;
    border-top: var(--hairline);
  }
}

/* ==========================================================================
   26. COUNTER BLOCK
   ========================================================================== */
.amaindiats-counter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amaindiats-counter--card {
  background: var(--white);
  border: var(--hairline);
  border-radius: 2px;
  padding: 28px 24px 24px;
}

.amaindiats-counter__number-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.amaindiats-counter__number {
  font-family: var(--font-serif);
  font-size: clamp(2.7rem, calc(1.8818rem + 3.4909vw), 4.5rem);
  font-weight: 400;
  letter-spacing: -2px;
  color: var(--red-deep);
  line-height: 1;
  /* Prevent layout shift during count animation */
  min-width: 1ch;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.amaindiats-counter__prefix,
.amaindiats-counter__suffix {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: inherit;
  line-height: 1;
}

.amaindiats-counter__suffix {
  font-size: clamp(1.75rem, calc(1.4091rem + 1.4545vw), 2.5rem);
  color: var(--red-deep);
}

.amaindiats-counter__label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
  max-width: 28ch;
}

/* ==========================================================================
   27. PROGRAMME HIGHLIGHT CARD
   ========================================================================== */
.amaindiats-prog-highlight {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 24px;
  border-radius: 2px;
}

.amaindiats-prog-highlight--bordered {
  background: var(--cream);
  border: var(--hairline);
}

.amaindiats-prog-highlight--filled {
  background: var(--blue-deep);
  color: var(--cream);
}

.amaindiats-prog-highlight--paper {
  background: var(--paper);
  border: var(--hairline);
}

.amaindiats-prog-highlight__badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--red-deep);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.amaindiats-prog-highlight--filled .amaindiats-prog-highlight__badge {
  color: #fde7c2;
}

.amaindiats-prog-highlight__title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--blue-deep);
  margin: 0;
  letter-spacing: -0.3px;
}

.amaindiats-prog-highlight--filled .amaindiats-prog-highlight__title {
  color: var(--cream);
}

.amaindiats-prog-highlight__desc {
  font-size: 0.90625rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 44ch;
}

.amaindiats-prog-highlight--filled .amaindiats-prog-highlight__desc {
  color: #a9b2d0;
}

.amaindiats-prog-highlight__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--blue-deep);
  text-decoration: none;
  min-height: var(--tap-min);
  gap: 4px;
}

.amaindiats-prog-highlight__cta:hover {
  color: var(--red-deep);
  text-decoration: underline;
}

.amaindiats-prog-highlight--filled .amaindiats-prog-highlight__cta {
  color: var(--cream);
}

/* ==========================================================================
   28. SPLIT CONTENT BLOCK
   ========================================================================== */
.amaindiats-split {
  display: grid;
  grid-template-columns: var(--split-cols, 55fr 45fr);
  gap: 0;
  background: var(--cream);
}

.amaindiats-split__left {
  padding: 56px 48px 56px var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.amaindiats-split__right {
  padding: 56px var(--page-pad) 56px 48px;
  border-left: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.amaindiats-split__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--blue-deep);
  margin: 8px 0 20px;
}

.amaindiats-split__body {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 28px;
}

.amaindiats-split__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.amaindiats-split__list-head {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red-deep);
  margin: 0 0 20px;
}

.amaindiats-split__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.amaindiats-split__list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: var(--hairline);
}

.amaindiats-split__list-item:first-child {
  border-top: var(--hairline);
}

.amaindiats-split__list-icon {
  font-size: 0.75rem;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 3px;
}

.amaindiats-split__list-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}

a.amaindiats-split__list-text:hover .amaindiats-split__list-title {
  color: var(--red-deep);
  text-decoration: underline;
}

.amaindiats-split__list-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.35;
}

.amaindiats-split__list-desc {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

@media (max-width: 768px) {
  .amaindiats-split {
    grid-template-columns: 1fr;
  }
  .amaindiats-split__left {
    padding: 40px var(--page-pad-mobile);
  }
  .amaindiats-split__right {
    padding: 36px var(--page-pad-mobile) 48px;
    border-left: none;
    border-top: var(--hairline);
  }
}

/* ==========================================================================
   29. LXX HERITAGE HERO
   ========================================================================== */
.amaindiats-lxx {
  background: var(--blue-deep);
  color: var(--cream);
  padding: var(--section-gap) var(--page-pad);
}

.amaindiats-lxx__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.amaindiats-lxx--side-by-side .amaindiats-lxx__inner {
  flex-direction: row;
  align-items: flex-end;
  gap: 56px;
}

.amaindiats-lxx__numeral-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.amaindiats-lxx__numeral {
  font-family: var(--font-serif);
  font-size: clamp(5rem, 14vw, 11.25rem);
  font-weight: 400;
  line-height: 0.88;
  color: var(--cream);
  letter-spacing: -4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.amaindiats-lxx__suffix {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -1px;
  color: var(--cream);
}

.amaindiats-lxx__since {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a9b2d0;
  margin-top: 12px;
}

.amaindiats-lxx__headline {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--cream);
  margin: 0 0 16px;
}

.amaindiats-lxx__headline em {
  font-style: italic;
  color: var(--red-soft);
}

.amaindiats-lxx__body {
  font-size: 1rem;
  line-height: 1.6;
  color: #a9b2d0;
  max-width: 52ch;
  margin: 0 0 28px;
}

.amaindiats-lxx__editorial .ama-btn--secondary {
  border-color: rgba(255,255,255,0.4);
  color: var(--cream);
}

.amaindiats-lxx__editorial .ama-btn--secondary:hover {
  background: rgba(255,255,255,0.1);
  color: var(--cream);
}

@media (max-width: 768px) {
  .amaindiats-lxx {
    padding: var(--section-gap) var(--page-pad-mobile);
  }
  .amaindiats-lxx--side-by-side .amaindiats-lxx__inner {
    flex-direction: column;
    gap: 24px;
  }
}

/* ==========================================================================
   30. ACCREDITATION BAR
   ========================================================================== */
.amaindiats-accred {
  background: var(--cream);
  padding: 48px var(--page-pad);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.amaindiats-accred__statement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.amaindiats-accred__statement-left {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3vw, 2rem);
  color: var(--blue-deep);
  line-height: 1.1;
}

.amaindiats-accred__symbol {
  font-size: 1.125rem;
  color: var(--red);
  line-height: 1;
  flex-shrink: 0;
}

.amaindiats-accred__statement-right {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.amaindiats-accred__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.amaindiats-accred__logo-item {
  display: flex;
  align-items: center;
}

.amaindiats-accred__logo-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
}

.amaindiats-accred__logo-item img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: opacity var(--duration-fast) ease, filter var(--duration-fast) ease;
}

.amaindiats-accred__logo-item img:hover {
  opacity: 1;
  filter: none;
}

.amaindiats-accred__logo-text {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
}

/* ==========================================================================
   31. LONG-TERM PROGRAMME BLOCK
   ========================================================================== */
.amaindiats-long-prog {
  background: var(--white);
  border: var(--hairline);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.amaindiats-long-prog__header {
  padding: 28px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.amaindiats-long-prog__chip {
  align-self: flex-start;
  margin-bottom: 4px;
}

.amaindiats-long-prog__title {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3.5vw, 2.125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--blue-deep);
  margin: 0;
}

.amaindiats-long-prog__desc {
  padding: 16px 28px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 60ch;
}

.amaindiats-long-prog__desc p { margin: 0; }

.amaindiats-long-prog__features {
  list-style: none;
  margin: 0;
  padding: 0 28px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.amaindiats-long-prog__features li {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blue);
  padding: 4px 10px;
  background: var(--blue-soft);
  border-radius: 2px;
  font-family: var(--font-sans);
}

.amaindiats-long-prog__stats {
  display: flex;
  flex-wrap: wrap;
  border-top: var(--hairline);
  background: var(--paper);
}

.amaindiats-long-prog__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  flex: 1;
  min-width: 100px;
}

.amaindiats-long-prog__stat + .amaindiats-long-prog__stat {
  border-left: var(--hairline);
}

.amaindiats-long-prog__stat-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.amaindiats-long-prog__stat-value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}

.amaindiats-long-prog__stat-value--fee {
  color: var(--red-deep);
  font-weight: 700;
}

.amaindiats-long-prog__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 28px 24px;
  border-top: var(--hairline);
}

/* ==========================================================================
   32. BUTTON VARIANTS (additional)
   ========================================================================== */

/* "Book a 20-min call →" — primary with arrow */
.ama-btn--call {
  background: var(--blue-deep);
  color: var(--cream);
  border-color: var(--blue-deep);
}
.ama-btn--call:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--cream);
  text-decoration: none;
}

/* "Walk in — Mon–Sat 10–6 →" — outlined ghost with mono feel */
.ama-btn--walkin {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
  font-size: 0.875rem;
  letter-spacing: 0.2px;
}
.ama-btn--walkin:hover {
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}

/* ==========================================================================
   33. CONTENT PANEL (standalone left module)
   ========================================================================== */
.amaindiats-content-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Padding presets */
.amaindiats-content-panel--pad-section { padding: var(--section-gap) var(--page-pad); }
.amaindiats-content-panel--pad-card    { padding: 28px; }

.amaindiats-content-panel__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--blue-deep);
  margin: 8px 0 20px;
}

.amaindiats-content-panel__title em {
  font-style: italic;
  color: var(--red-deep);
}

.amaindiats-content-panel__body {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 54ch;
  margin-bottom: 28px;
}

.amaindiats-content-panel__body p { margin: 0 0 1em; }

.amaindiats-content-panel__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  /* Push CTAs toward bottom when panel is in a flex/grid layout */
  margin-top: auto;
}

/* WCAG 2.5.8 — touch target min 44px already enforced by .ama-btn min-height:48px */

/* ==========================================================================
   34. LIST PANEL (standalone right module)
   ========================================================================== */
.amaindiats-list-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Padding presets */
.amaindiats-list-panel--pad-section { padding: var(--section-gap) var(--page-pad); }
.amaindiats-list-panel--pad-card    { padding: 28px; }

/* Heading styles */
.amaindiats-list-panel__head {
  margin: 0 0 20px;
}

/* Empty heading kept only to reserve vertical space; invisible but sized. */
.amaindiats-list-panel__head--reserved {
  visibility: hidden;
}

.amaindiats-list-panel__head--eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red-deep);
}

.amaindiats-list-panel__head--serif {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--blue-deep);
}

.amaindiats-list-panel__head--sans {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
}

/* List base */
.amaindiats-list-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Divider variants */
.amaindiats-list-panel__list--line .amaindiats-list-panel__item {
  border-bottom: var(--hairline);
}
.amaindiats-list-panel__list--line .amaindiats-list-panel__item:first-child {
  border-top: var(--hairline);
}

/* A spacer holds a row's space and draws nothing — used to line a panel up with
   one beside it. Killing the border alone would leave the item that follows
   without its top rule, since --line puts that rule on :first-child, so it is
   handed over here. */
.amaindiats-list-panel__item--spacer {
  border: 0 !important;
  background: none !important;
}
.amaindiats-list-panel__list--line .amaindiats-list-panel__item--spacer + .amaindiats-list-panel__item {
  border-top: var(--hairline);
}

.amaindiats-list-panel__list--gap {
  gap: 16px;
}

.amaindiats-list-panel__list--card .amaindiats-list-panel__item {
  background: var(--white);
  border: var(--hairline);
  border-radius: 2px;
  margin-bottom: 4px;
}
.amaindiats-list-panel__list--card .amaindiats-list-panel__item:last-child {
  margin-bottom: 0;
}

/* Item inner (link or span) */
.amaindiats-list-panel__item-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
  /* WCAG 2.5.8: minimum touch target */
  min-height: var(--tap-min);
}

.amaindiats-list-panel__list--card .amaindiats-list-panel__item-inner {
  padding: 14px 16px;
}

a.amaindiats-list-panel__item-inner:hover .amaindiats-list-panel__item-title {
  color: var(--red-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Focus ring on linked items */
a.amaindiats-list-panel__item-inner:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Row density ─────────────────────────────────────────────────────────
   The rules above are the SPACED values, so only compact needs overriding.

   Measured on a typical panel, the padding is what drives the height: a
   one-line row comes to ~50px spaced, so min-height: var(--tap-min) (44px) was
   never binding and halving the padding is what buys the 14px per row.

   min-height is lowered to 32px all the same, for the rows where it IS binding
   — a short row with no icon. 32px stays a comfortable target and sits well
   above the 24px WCAG 2.2 AA minimum (2.5.8); 44px is the AAA figure, which
   the spaced setting keeps. */
.amaindiats-list-panel--compact .amaindiats-list-panel__item-inner {
  padding: 7px 0;
  gap: 10px;
  min-height: 32px;
}
.amaindiats-list-panel--compact .amaindiats-list-panel__text { gap: 1px; }
.amaindiats-list-panel--compact .amaindiats-list-panel__list--gap { gap: 8px; }
.amaindiats-list-panel--compact .amaindiats-list-panel__list--card .amaindiats-list-panel__item-inner {
  padding: 9px 12px;
}
.amaindiats-list-panel--compact .amaindiats-list-panel__list--card .amaindiats-list-panel__item {
  margin-bottom: 3px;
}

/* ── Inline: the whole list on one running line ──────────────────────────────
   Heading on its own line as always, then every item flowing after the last,
   wrapping only when the row runs out of width. For a short strip of facts —
   accreditations, a run of dates, "Mon–Fri · 9–6 · Closed Sunday" — where a
   stacked list of four two-word rows wastes a column of page on whitespace.

   Placed AFTER the density rules on purpose: those set the row padding at the
   same specificity, and inline has to win over both of them.

   WCAG 2.5.8: linked items keep a 24px minimum height — the AA floor — rather
   than the 32/44px the stacked settings use, since a row of inline links
   cannot be tall without looking like buttons. The column gap keeps adjacent
   targets from crowding each other. */
/* The panel itself becomes the running line: heading first, then the list after
   it, both as siblings on one row. The wrapper is already a flex column, so
   this only turns it on its side — the padding presets and background are
   untouched. The list takes the remaining width and wraps inside it, which
   keeps a long run of items under the heading rather than pushing it away. */
.amaindiats-list-panel--inline {
  flex-direction: row;
  /* nowrap, not wrap. A wrapping row relegates a whole item to the next line
     rather than squeezing it, so as soon as the list grew past the space left
     beside the heading the entire <ul> dropped below — heading alone on line
     one, every item on line two. Held on one line the heading keeps what it
     needs and the list takes the rest, wrapping INSIDE itself, so the first
     item always follows the heading and the overflow runs on underneath. */
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: 18px;
}
.amaindiats-list-panel--inline .amaindiats-list-panel__head {
  margin-bottom: 0;      /* the 20px below a stacked heading is now a column gap */
  flex: 0 0 auto;
}
.amaindiats-list-panel--inline .amaindiats-list-panel__list--inline {
  flex: 1 1 auto;
  min-width: 0;
}
/* Reserved heading space lines this panel's first row up with the panel beside
   it. On one running line there is no first row to line up, and an invisible
   heading would only open a gap before the items. */
.amaindiats-list-panel--inline .amaindiats-list-panel__head--reserved { display: none; }

.amaindiats-list-panel__list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 18px;
  row-gap: 4px;
}
.amaindiats-list-panel__list--inline .amaindiats-list-panel__item-inner,
.amaindiats-list-panel--compact .amaindiats-list-panel__list--inline .amaindiats-list-panel__item-inner {
  padding: 2px 0;
  min-height: 24px;
  align-items: baseline;
  gap: 7px;
}
/* Title above description becomes title beside description. */
.amaindiats-list-panel__list--inline .amaindiats-list-panel__text,
.amaindiats-list-panel--compact .amaindiats-list-panel__list--inline .amaindiats-list-panel__text {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 1 auto;
}
.amaindiats-list-panel__list--inline .amaindiats-list-panel__icon { margin-top: 0; }
.amaindiats-list-panel__list--inline .amaindiats-list-panel__item-badge { align-self: baseline; }

/* A spacer exists to line this panel's rows up with the panel beside it. On one
   running line there are no rows to line up, so it would only punch a gap. */
.amaindiats-list-panel__list--inline .amaindiats-list-panel__item--spacer { display: none; }

/* A separator between items, but only where the item brings no symbol of its
   own — otherwise an editor using bullets would get "· • Item". The class is
   set in PHP because CSS cannot ask whether a child exists. */
.amaindiats-list-panel__list--inline .amaindiats-list-panel__item + .amaindiats-list-panel__item:not(.amaindiats-list-panel__item--has-icon)::before {
  content: "·";
  color: var(--ink-soft);
  margin-right: 18px;
  margin-left: -11px;   /* sits the dot midway in the column gap */
}

.amaindiats-list-panel__icon {
  font-size: 0.8125rem;
  /* Matches the widget's icon_color default (see widget-amaindiats-list-panel.php).
     Elementor's inline CSS normally wins; this is the fallback when it emits none. */
  color: var(--red-deep);
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1.5;
  min-width: 16px;
}

.amaindiats-list-panel__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.amaindiats-list-panel__item-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.35;
  transition: color var(--duration-fast) ease;
}

.amaindiats-list-panel__item-desc {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.amaindiats-list-panel__item-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
  align-self: flex-start;
  flex-shrink: 0;
}

/* ==========================================================================
   35. RESPONSIVE ADDITIONS — tablet (768–1024 px)
   Covers components that previously had no tablet breakpoint.
   ========================================================================== */
@media (max-width: 1024px) {
  /* Content + List panels inside a split */
  .amaindiats-content-panel--pad-section,
  .amaindiats-list-panel--pad-section {
    padding-inline: var(--page-pad);
  }

  /* LXX side-by-side → stack at tablet */
  .amaindiats-lxx--side-by-side .amaindiats-lxx__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  /* Accreditation logos wrap tighter */
  .amaindiats-accred__logos {
    gap: 20px 28px;
  }

  /* Long programme stats bar wraps to 2 columns */
  .amaindiats-long-prog__stat {
    min-width: 140px;
  }
}

@media (max-width: 768px) {
  /* Phone widths: a heading plus a nowrap list on one line leaves the items a
     sliver to wrap in. Let the heading take its own line again here — the only
     place where the stacked reading is the better one. */
  .amaindiats-list-panel--inline { flex-wrap: wrap; row-gap: 4px; }
  .amaindiats-list-panel--inline .amaindiats-list-panel__head { flex-basis: 100%; }

  /* Content + List panels become full-width with mobile gutter */
  .amaindiats-content-panel--pad-section,
  .amaindiats-list-panel--pad-section {
    padding: 40px var(--page-pad-mobile);
  }

  .amaindiats-content-panel--pad-card,
  .amaindiats-list-panel--pad-card {
    padding: 20px;
  }

  /* Persona card — shrink seat number on narrow screens */
  .amaindiats-persona-card__seat-num {
    font-size: clamp(1.8rem, calc(1.2545rem + 2.3273vw), 3rem);
  }

  /* Counter number shrinks gracefully */
  .amaindiats-counter__number {
    font-size: clamp(2.1rem, calc(1.4636rem + 2.7152vw), 3.5rem);
  }

  /* Highlight card full padding on mobile */
  .amaindiats-prog-highlight {
    padding: 20px;
  }

  /* Programme highlight CTA touch-target enforcement */
  .amaindiats-prog-highlight__cta {
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
  }

  /* Long programme stats bar — 2 cols */
  .amaindiats-long-prog__stats {
    flex-wrap: wrap;
  }
  .amaindiats-long-prog__stat {
    min-width: calc(50% - 1px);
    flex: 1 0 calc(50% - 1px);
  }
  .amaindiats-long-prog__stat + .amaindiats-long-prog__stat:nth-child(odd) {
    border-left: none;
    border-top: var(--hairline);
  }

  /* Stats bar columns stack */
  .amaindiats-stats-bar__col {
    min-width: calc(50% - 1px);
    flex: 1 0 calc(50% - 1px);
  }

  /* Accreditation statement stacks */
  .amaindiats-accred__statement {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL CONTENT BREATHING ROOM
   50 px between the site header/footer and the main content area.
   Applies to Hello Elementor's default .site-main wrapper.
   Excluded:
   • Elementor-built pages (.elementor-page) — sections manage their own spacing
   • MEC event single pages — have their own .ama-mec-page-wrap padding
   • Single blog posts — custom single.php manages its own layout
   ════════════════════════════════════════════════════════════════════════════ */
.site-main {
  padding-top: 50px;
  padding-bottom: 50px;
}
.elementor-page .site-main,
.single-mec-events .site-main,
.single-post .site-main {
  padding: 0;
}

/* Elementor wp-page: add breathing room inside the page wrapper itself */
[data-elementor-type="wp-page"] {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Add body class "ama-flush" via Elementor Page Settings → Advanced → Body Class
   to disable the padding on pages with flush/full-bleed banners at the edges. */
body.ama-flush [data-elementor-type="wp-page"] {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 480px) {
  /* Single column everywhere on small phones */
  .amaindiats-long-prog__stat {
    min-width: 100%;
    flex: 1 0 100%;
    border-left: none !important;
    border-top: var(--hairline);
  }
  .amaindiats-long-prog__stat:first-child {
    border-top: none;
  }

  .amaindiats-stats-bar__col {
    min-width: 100%;
    flex: 1 0 100%;
    border-left: none !important;
    border-top: var(--hairline);
  }
  .amaindiats-stats-bar__col:first-child {
    border-top: none;
  }
}


/* ==========================================================================
   AMA HOURS  (Elementor widget: AMAINDIATS_Widget_Hours)
   A label/value schedule panel. Every colour here is overridden by the
   widget's own Style controls via Elementor selectors — the values below are
   what shows before an editor touches anything, and what shows if the widget
   is ever rendered outside Elementor.
   ========================================================================== */
.ama-hours {
  background-color: #131f3d;
  color: #fff;
}
.ama-hours--pad-section { padding: var(--section-gap) var(--page-pad); }
.ama-hours--pad-card    { padding: 28px; }

/* Heading: icon and text on one baseline, mono eyebrow treatment */
.ama-hours__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: #e0a733;
  font-family: var(--font-mono, var(--font-sans, sans-serif));
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ama-hours__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ama-hours__head-icon svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.ama-hours__head-icon i   { font-size: 20px; line-height: 1; }
.ama-hours__head-icon img { width: 22px; height: 22px; display: block; }

/* Rows. A <dl> with each pair wrapped in a div, so the row can be a flex
   container without breaking the dt/dd association screen readers rely on. */
.ama-hours__list { margin: 0; padding: 0; }
.ama-hours__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.ama-hours__list--gap .ama-hours__row { border-bottom: none; padding: 8px 0; }
.ama-hours__list--line .ama-hours__row:last-child { border-bottom: none; }

.ama-hours__label {
  margin: 0;
  color: #b9c2d6;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.ama-hours__value {
  margin: 0 0 0 auto;          /* pushes the value to the right edge */
  color: #fff;
  font-family: var(--font-mono, var(--font-sans, sans-serif));
  /* Theme fonts only — no mono face is loaded. tabular-nums makes the digits
     equal width in whatever face is active, so the times still line up. */
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}
.ama-hours__value--highlight { color: #e8853f; }

/* Left alignment: value sits under its label instead of opposite it. */
.ama-hours__list--left .ama-hours__row { flex-direction: column; align-items: flex-start; gap: 4px; }
.ama-hours__list--left .ama-hours__value { margin-left: 0; text-align: left; }

.ama-hours__desc {
  margin-top: 20px;
  color: #b9c2d6;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.ama-hours__desc :first-child { margin-top: 0; }
.ama-hours__desc :last-child  { margin-bottom: 0; }
.ama-hours__desc a { color: inherit; text-decoration: underline; }

/* Narrow columns: a long label beside a nowrap value overflows, so stack. */
@media (max-width: 480px) {
  .ama-hours__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ama-hours__value { margin-left: 0; text-align: left; }
  .ama-hours--pad-card { padding: 20px; }
}


/* ==========================================================================
   AMA STAT CARD  (Elementor widget: AMAINDIATS_Widget_Stat_Card)
   Figure + title + description in a bordered card with an accent rule on top.
   Colours and the accent are all driven by the widget's Style controls; the
   values here are the pre-edit defaults. Typography uses the theme tokens
   only — no font is loaded for this widget.
   ========================================================================== */
.ama-stat {
  background-color: #fff;
  border: 1px solid #e8e2d9;
  border-top: 3px solid #e8853f;
  border-radius: 2px;
}
.ama-stat--pad-card  { padding: 28px; }
.ama-stat--pad-roomy { padding: 40px; }

/* Figure: value and unit share a baseline, so "95 Titles" reads as one line */
.ama-stat__figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.ama-stat__value {
  font-family: var(--font-serif, var(--font-sans, sans-serif));
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: #1a2744;
}
.ama-stat__unit {
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #534c45;
  line-height: 1.2;
}

.ama-stat__title {
  font-family: var(--font-serif, var(--font-sans, sans-serif));
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  color: #1a2744;
  margin: 0 0 10px;
}

.ama-stat__desc {
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #4a5468;
}
.ama-stat__desc :first-child { margin-top: 0; }
.ama-stat__desc :last-child  { margin-bottom: 0; }
.ama-stat__desc a { color: inherit; text-decoration: underline; }

/* Equal heights across a row. Elementor stretches the widget box itself in a
   flex or grid container, but .elementor-widget-container and the card inside
   it still size to their content — so all three links in the chain need the
   height. Scoped with :has() to the cards that asked for it, so a card with the
   switch off is left to hug its own content. */
.elementor-widget-ama-stat-card:has(.ama-stat--fill),
.elementor-widget-ama-stat-card:has(.ama-stat--fill) > .elementor-widget-container {
  height: 100%;
}
.ama-stat--fill { height: 100%; }

@media (max-width: 480px) {
  .ama-stat--pad-card  { padding: 20px; }
  .ama-stat--pad-roomy { padding: 24px; }
}


/* ==========================================================================
   EQUAL-HEIGHT CARDS IN A ROW
   Elementor stretches the widget BOX in a flex or grid container, but
   .elementor-widget-container and the card element inside it still size to
   their own content — so a card's background and border stopped short while
   the invisible box around it was already full height. All three links in the
   chain need the height.

   Every widget whose root paints a background or a border is listed. That
   includes the section-width ones — hero, LXX hero, the accreditation band,
   the stats bar — because they are perfectly usable two to a row as side-by-side
   options, and ragged bottoms show there just as badly. Their inner max-width
   simply stops binding in a narrow column, which costs nothing.

   Left out are the widgets whose root paints nothing at all: related posts,
   the FAQ accordion and marquee, archives, the MEC views, and the inline
   pieces (event chip, search, account, mini cart, utility bar, post dynamic).
   Stretching a transparent wrapper has no visible effect.

   height:100% is inert when the parent has no definite height, so outside a
   stretching container this changes nothing.

   AMA Stat Card is absent on purpose: it carries its own "Match height"
   switch, handled further up this file.
   ========================================================================== */
.elementor-widget:is(
  .elementor-widget-ama-pillar-card,
  .elementor-widget-ama-programme-card,
  .elementor-widget-ama-hours,
  .elementor-widget-amaindiats-persona-card,
  .elementor-widget-amaindiats-counter,
  .elementor-widget-amaindiats-programme-highlight,
  .elementor-widget-amaindiats-long-programme,
  .elementor-widget-amaindiats-content-panel,
  .elementor-widget-amaindiats-list-panel,
  .elementor-widget-ama-hero,
  .elementor-widget-amaindiats-lxx-hero,
  .elementor-widget-amaindiats-accreditation
),
.elementor-widget:is(
  .elementor-widget-ama-pillar-card,
  .elementor-widget-ama-programme-card,
  .elementor-widget-ama-hours,
  .elementor-widget-amaindiats-persona-card,
  .elementor-widget-amaindiats-counter,
  .elementor-widget-amaindiats-programme-highlight,
  .elementor-widget-amaindiats-long-programme,
  .elementor-widget-amaindiats-content-panel,
  .elementor-widget-amaindiats-list-panel,
  .elementor-widget-ama-hero,
  .elementor-widget-amaindiats-lxx-hero,
  .elementor-widget-amaindiats-accreditation
) > .elementor-widget-container {
  height: 100%;
}

/* Each widget's own root element, which is what actually paints the card. */
.elementor-widget-ama-pillar-card .ama-pillar-card,
.elementor-widget-ama-programme-card .ama-card,
.elementor-widget-ama-hours .ama-hours,
.elementor-widget-amaindiats-persona-card .amaindiats-persona-card,
.elementor-widget-amaindiats-counter .amaindiats-counter,
.elementor-widget-amaindiats-programme-highlight .amaindiats-prog-highlight,
.elementor-widget-amaindiats-long-programme .amaindiats-long-prog,
.elementor-widget-amaindiats-content-panel .amaindiats-content-panel,
.elementor-widget-amaindiats-list-panel .amaindiats-list-panel,
.elementor-widget-ama-hero .ama-hero,
.elementor-widget-amaindiats-lxx-hero .amaindiats-lxx,
.elementor-widget-amaindiats-accreditation .amaindiats-accred {
  height: 100%;
}

/* NOT the stats bar. Its columns are flex items with
   .amaindiats-stats-bar__col + .amaindiats-stats-bar__col { border-left } — under
   the default align-items:stretch a full-height bar stretches every column, and
   those dividers then run the whole way down past the text. Its height is meant
   to be its content; there is nothing to gain by stretching it. */


/* ==========================================================================
   AMA PHOTO ALBUMS  (Elementor widget: AMAINDIATS_Widget_FooGallery_Album)
   Fixed-shape tiles for the galleries inside a FooGallery album. Colours, the
   grid size, tiles per row and the panel shape all come from the widget's own
   controls; the values here are the pre-edit defaults.
   ========================================================================== */
.ama-fga__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--ama-text, #0d1524);
}
.ama-fga__title {
  margin: 0;
  font-family: var(--font-serif, var(--font-sans, sans-serif));
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ama-navy, #1a2744);
}
.ama-fga__range {
  margin: 0;
  font-family: var(--font-mono, var(--font-sans, sans-serif));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ama-muted, #534c45);
}

.ama-fga__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ama-fga__item { margin: 0; }

.ama-fga__tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ── Panel ─────────────────────────────────────────────────────────────────
   aspect-ratio is what stops a tile growing with its cover photo: the panel is
   held to one shape and the image is cropped into it, so a portrait photo and a
   panorama produce identical tiles. */
.ama-fga__panel {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #16244a;
  aspect-ratio: 1 / 1;
}
.ama-fga--aspect-4-3  .ama-fga__panel { aspect-ratio: 4 / 3; }
.ama-fga--aspect-3-2  .ama-fga__panel { aspect-ratio: 3 / 2; }
.ama-fga--aspect-16-9 .ama-fga__panel { aspect-ratio: 16 / 9; }

.ama-fga__cover,
.ama-fga__tint {
  position: absolute;
  inset: 0;
}
/* Three classes deep on purpose. Elementor ships `.elementor img { height:auto }`
   at (0,1,1), which outranks a single-class rule — that is what was leaving the
   cover photo at its natural height and cropping the panel half way down.
   The same applies to the mosaic cells below. */
.ama-fga .ama-fga__panel .ama-fga__cover-img,
.ama-fga .ama-fga__panel .ama-fga__mimg {
  width: 100%;
  height: 100%;
  /* Crop to fill rather than letterbox — the panel's shape wins, always. */
  object-fit: cover;
  object-position: center;
  display: block;
  max-width: none;
  border-radius: 0;
}

/* ── Photo mosaic ─────────────────────────────────────────────────────── */
.ama-fga__mosaic {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.ama-fga__mcell {
  position: relative;
  overflow: hidden;
  background-color: rgba(255,255,255,.07);
  min-width: 0;
  min-height: 0;
}
/* The label sits over the mosaic, so it needs something to read against. */
.ama-fga--mosaic .ama-fga__label {
  padding: 14px 14px 18px;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
}
.ama-fga__tint {
  background-color: #16244a;
  opacity: .55;
}

.ama-fga__label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 18px 18px 0;
}
.ama-fga__month {
  display: block;
  font-family: var(--font-serif, var(--font-sans, sans-serif));
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.15;
  color: #e8b64c;
}
.ama-fga__year {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono, var(--font-sans, sans-serif));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: #9fb0d0;
}

/* Density grid, pinned below the label and inset from the panel edges. */
.ama-fga__cells {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  top: 76px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  align-content: start;
}
.ama-fga__cell {
  background-color: rgba(255,255,255,.07);
  aspect-ratio: 1 / 1;
  border-radius: 1px;
}
.ama-fga__cell--on { background-color: #e8b64c; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.ama-fga__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background-color: #fff;
  border: 1px solid #e8e2d9;
  border-top: none;
  flex: 1 1 auto;
}
.ama-fga__figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.ama-fga__count {
  font-family: var(--font-serif, var(--font-sans, sans-serif));
  font-size: 1.5rem;
  line-height: 1;
  color: #16244a;
}
.ama-fga__unit {
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #534c45;
}
.ama-fga__view {
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8a3a2a;
  white-space: nowrap;
}
.ama-fga__tile:hover .ama-fga__view { text-decoration: underline; }
.ama-fga__tile:focus-visible {
  outline: 3px solid var(--ama-navy, #1a2744);
  outline-offset: 3px;
}

/* Editor-only notice when FooGallery is inactive or no album is picked. */
.ama-fga__notice {
  padding: 12px 16px;
  border-left: 3px solid #8a3a2a;
  background: var(--cream, #faf6ee);
  font-size: 0.875rem;
}

/* ── Single gallery view (after a tile is clicked) ─────────────────────── */
.ama-fga-single__back {
  margin: 0 0 8px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.875rem;
}
.ama-fga-single__title {
  margin: 0 0 20px;
  font-family: var(--font-serif, var(--font-sans, sans-serif));
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ama-navy, #1a2744);
}

@media (max-width: 640px) {
  .ama-fga__head { margin-bottom: 20px; }
  .ama-fga__label { padding: 14px 14px 0; }
  .ama-fga__cells { left: 14px; right: 14px; bottom: 14px; top: 68px; }
}


/* ==========================================================================
   AMA SECTION HEADER  (AMAINDIATS_Widget_Section_Header)
   Title left, meta right, rule under. Every colour and size below is a widget
   control; these are the pre-edit defaults.
   ========================================================================== */
.ama-sech {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 28px;
  border-bottom: 0 solid #1a2744;
}
.ama-sech--ruled { border-bottom-width: 1px; padding-bottom: 12px; }
.ama-sech__title {
  margin: 0;
  font-family: var(--font-serif, var(--font-sans, sans-serif));
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
  color: #1a2744;
  text-wrap: balance;
}
.ama-sech__meta {
  margin: 0;
  font-family: var(--font-mono, var(--font-sans, sans-serif));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #534c45;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   AMA BATCH CARD  (AMAINDIATS_Widget_Batch_Card)
   ========================================================================== */
.ama-batch {
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* Equal heights across a row — same three-link chain as the other card widgets:
   Elementor stretches the widget box, but the container and the card inside it
   still size to content. */
.elementor-widget-ama-batch-card:has(.ama-batch--fill),
.elementor-widget-ama-batch-card:has(.ama-batch--fill) > .elementor-widget-container,
.elementor-widget-ama-batch-card-alt:has(.ama-batch--fill),
.elementor-widget-ama-batch-card-alt:has(.ama-batch--fill) > .elementor-widget-container {
  height: 100%;
}
.ama-batch--fill { height: 100%; }

/* ── Photo ──────────────────────────────────────────────────────────────── */
.ama-batch__photo {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #1a2744;
  aspect-ratio: 3 / 2;
}
.ama-batch__photo--16-9 { aspect-ratio: 16 / 9; }
.ama-batch__photo--3-2  { aspect-ratio: 3 / 2; }
.ama-batch__photo--4-3  { aspect-ratio: 4 / 3; }
.ama-batch__photo--1    { aspect-ratio: 1 / 1; }
/* 4:5 is what a 1080 × 1350 photo is. Neither 3:4 (0.75) nor 2:3 (0.667) is as
   wide as 4:5 (0.8), so object-fit: cover had to trim the left and right of
   every such photo to fill them — which is why both portrait options cropped
   the sides. With the matching shape the photo fills the box exactly: no crop
   and no bands. */
.ama-batch__photo--4-5  { aspect-ratio: 4 / 5; }
.ama-batch__photo--3-4  { aspect-ratio: 3 / 4; }
.ama-batch__photo--2-3  { aspect-ratio: 2 / 3; }

/* Three classes deep: Elementor ships `.elementor img { height:auto }` at
   (0,1,1), which beats a single-class rule and would leave the photo at its
   natural height instead of filling the shape above. */
.ama-batch .ama-batch__photo .ama-batch__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  max-width: none;
  border-radius: 0;
}

/* "Show the whole photo": fit it inside the shape instead of filling the shape.
   Nothing is ever cut off; a photo whose proportions differ from the chosen
   shape shows the card's background colour along two sides instead. Same
   specificity as the rule above (0,3,0), so this has to sit after it. */
.ama-batch .ama-batch__photo--contain .ama-batch__img {
  object-fit: contain;
}

/* Placeholder: hatching drawn with a gradient, so an unfinished card still
   holds its shape without shipping a stand-in image. */
.ama-batch__ph {
  position: absolute;
  inset: 0;
  display: block;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.05) 0 10px,
    rgba(255,255,255,0) 10px 20px
  );
}
.ama-batch__ph-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  background: rgba(255,255,255,.1);
  font-family: var(--font-mono, var(--font-sans, sans-serif));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

.ama-batch__accent {
  display: block;
  height: 3px;
  background-color: #e0a733;
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.ama-batch__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 18px;
  background-color: #fff;
  /* Grows so the buttons sit at the foot of every card in a row, whatever
     length the programme name runs to. */
  flex: 1 1 auto;
}
.ama-batch__eyebrow {
  margin: 0;
  font-family: var(--font-mono, var(--font-sans, sans-serif));
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a3a2a;
}
.ama-batch__title {
  margin: 0;
  font-family: var(--font-serif, var(--font-sans, sans-serif));
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  color: #1a2744;
  text-wrap: balance;
}
.ama-batch__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
/* One button alone spans the row rather than sitting half-width. */
.ama-batch__actions > :only-child { grid-column: 1 / -1; }

/* Doubled class, not !important — Elementor's link colours outrank a single
   class here, the same reason the theme's other button overrides repeat theirs. */
.ama-batch__btn.ama-batch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;          /* WCAG 2.5.8 target size */
  padding: 10px 14px;
  border: 1.5px solid #1a2744;
  border-radius: 2px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: filter .12s, background-color .12s, color .12s;
}
.ama-batch__btn--ghost.ama-batch__btn--ghost {
  background-color: transparent;
  color: #1a2744;
}
.ama-batch__btn--ghost.ama-batch__btn--ghost:hover,
.ama-batch__btn--ghost.ama-batch__btn--ghost:focus {
  background-color: rgba(26,39,68,.06);
}
.ama-batch__btn--solid.ama-batch__btn--solid {
  background-color: #c0562f;
  border-color: #c0562f;
  color: #fff;
}
.ama-batch__btn--solid.ama-batch__btn--solid:hover,
.ama-batch__btn--solid.ama-batch__btn--solid:focus {
  /* Darkens whatever colour is configured, so any accent works without a
     second control. */
  filter: brightness(.9);
  color: #fff;
}
.ama-batch__btn.ama-batch__btn:focus-visible {
  outline: 3px solid #1a2744;
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .ama-batch__actions { grid-template-columns: 1fr; }
}

/* ── Alternate foot: two icon buttons, then the text pair ──────────────────
   AMAINDIATS_Widget_Batch_Card_Alt only. The rest of the card is the shared
   .ama-batch above — this replaces the two-column grid with two groups, so the
   icon buttons can stay square while the text buttons take what is left.

   Flex, not grid: the icon group has to size to its content (two 44px squares)
   and the text group has to absorb the remainder. A four-column grid would
   either stretch the icons or squeeze the text buttons, and `auto auto 1fr 1fr`
   breaks as soon as one of the four is hidden. */
.ama-batch__actions.ama-batch__actions--alt {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  /* Undo the grid rule above, which the shared class still carries. */
  grid-template-columns: none;
}
.ama-batch__iconset {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;   /* never squeezed — see the target-size note below */
}
.ama-batch__textset {
  display: flex;
  gap: 10px;
  /* Takes the rest of the row, and may shrink to nothing before wrapping.
     min-width:0 is what lets a long button label wrap instead of forcing the
     whole group onto its own line. */
  flex: 1 1 0;
  min-width: 0;
}
.ama-batch__textset > * { flex: 1 1 0; }

/* Square, icon-only, and never below 44 × 44 (WCAG 2.5.8 Target Size). The
   width is fixed rather than padded so two of them line up whatever icons are
   chosen — a PDF glyph and a YouTube glyph are different widths. */
.ama-batch__btn--icon.ama-batch__btn--icon {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  padding: 0;
  background-color: transparent;
  color: #1a2744;
}
.ama-batch__btn--icon.ama-batch__btn--icon:hover,
.ama-batch__btn--icon.ama-batch__btn--icon:focus {
  background-color: rgba(26,39,68,.06);
}
/* The glyph. Sized by the Icon size control; line-height 1 keeps it centred in
   the square whatever the font-size. Font Awesome renders as an <i>, an
   uploaded SVG as an <svg> — both are handled. */
.ama-batch__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.ama-batch__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: block;
}

/* On a narrow card the two groups each take a full row — icons above, text
   buttons below — rather than the icons being pushed onto a line of their own
   by a text button that no longer fits. */
@media (max-width: 420px) {
  .ama-batch__iconset,
  .ama-batch__textset { flex: 1 1 100%; }
  .ama-batch__textset { flex-wrap: wrap; }
  .ama-batch__textset > * { flex: 1 1 100%; }
}

/* ── AMA Utility Bar — shared icon sizing ─────────────────────────────────
   Search, account and mini-cart are three separate components, each with its
   own box rules and a hard-coded width/height on its SVG. Inside the utility
   bar they have to agree with each other — and with any social icons dropped
   in beside them — so the bar publishes two custom properties and applies them
   to all three triggers. The widget's Icon Size and Tap Target Size controls
   write these; the fallbacks are what the components use on their own.

   CSS width/height on the <svg> beats the element's presentation attributes,
   so no markup change is needed. */
.ama-utility-bar {
  --ama-util-icon: 22px;
  --ama-util-box: 44px;
}
/* The wrappers each component renders must not contribute a box of their own,
   or the trigger inside them is no longer what you are sizing. */
.ama-utility-bar__item,
.ama-utility-bar .ama-search,
.ama-utility-bar .ama-search--icon,
.ama-utility-bar .ama-account,
.ama-utility-bar .ama-account--icon-only,
.ama-utility-bar .ama-mini-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  /* No line-height:0 here. These wrappers also CONTAIN the panels that open
     from them, and line-height inherits — it collapsed every row of the account
     menu to a zero-height line box. The flex layout above already removes the
     inline descender gap this was meant to kill. */
}

/* Size is PINNED, not suggested.
   min-width/min-height alone left each trigger free to grow past the box on its
   own content — the account button carries `padding: 6px 8px` and `gap: 8px`
   that search and cart do not, so it rendered taller at every setting. Fixing
   width and height as well as the minimums makes the three identical whatever
   they contain. box-sizing is border-box theme-wide, so padding cannot add to
   it either. flex-shrink:0 stops a narrow bar squashing one of them, and
   align-self:center stops a stretch parent pulling one taller. */
.ama-utility-bar .ama-search__icon-toggle,
.ama-utility-bar .ama-account__toggle,
.ama-utility-bar .ama-mini-cart__toggle {
  box-sizing: border-box;
  width: var(--ama-util-box);
  height: var(--ama-util-box);
  min-width: var(--ama-util-box);
  min-height: var(--ama-util-box);
  max-width: var(--ama-util-box);
  max-height: var(--ama-util-box);
  flex: 0 0 auto;
  align-self: center;
  padding: 0;
  gap: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.ama-utility-bar .ama-search__icon-toggle svg,
.ama-utility-bar .ama-account__toggle svg,
.ama-utility-bar .ama-mini-cart__toggle svg {
  width: var(--ama-util-icon);
  height: var(--ama-util-icon);
  flex: 0 0 auto;
  display: block;
}

/* ==========================================================================
   ARCHIVE PAGINATION  (.ama-pagination)
   Shared by the posts, product, event and search archives — see
   inc/class-ama-archive-pagination.php.

   These are real <a href> links, and they are the only crawlable path through
   any AMA archive: the Load-more buttons they sit beside POST to admin-ajax,
   which no crawler does. They are also the keyboard and no-JS path, so the
   touch targets are full size (44px, WCAG 2.2 AA 2.5.8) rather than the
   number-sized boxes a decorative pager would get away with.
   ========================================================================== */

.ama-pagination {
  margin: 2rem 0 0;
}

.ama-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ama-pagination__item {
  margin: 0;
}

/* Repeated class: theme buttons inside Elementor lose to
   `.elementor-widget-container a` (0-1-1), so a single class is not enough. */
.ama-pagination .ama-pagination__link,
.ama-pagination .ama-pagination__link:link,
.ama-pagination .ama-pagination__link:visited {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--ama-border, #d6cfc4);
  border-radius: 6px;
  background: #fff;
  color: var(--ama-text, #0d1524);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ama-pagination .ama-pagination__link:hover,
.ama-pagination .ama-pagination__link:focus-visible {
  border-color: var(--ama-maroon, #8a3a2a);
  background: var(--ama-cream, #f5f0e8);
  color: var(--ama-maroon, #8a3a2a);
}

/* Focus ring is kept separate from :hover styling so keyboard users get an
   indicator that does not depend on the colour change above. */
.ama-pagination .ama-pagination__link:focus-visible {
  outline: 2px solid var(--ama-maroon, #8a3a2a);
  outline-offset: 2px;
}

/* The current page is a <span>, not a link to itself. */
.ama-pagination .ama-pagination__link--current,
.ama-pagination .ama-pagination__link--current:hover {
  border-color: var(--ama-navy, #1a2744);
  background: var(--ama-navy, #1a2744);
  color: #fff;
  cursor: default;
}

.ama-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 44px;
  color: var(--ama-muted, #534c45);
}

/* Prev/Next keep their words on desktop and drop to the arrow on phones,
   where four number boxes plus two labelled buttons will not fit one row. */
@media (max-width: 480px) {
  .ama-pagination .ama-pagination__link--prev,
  .ama-pagination .ama-pagination__link--next {
    padding: 0 0.625rem;
  }
  /* Visually hidden, not display:none — the accessible name must survive. */
  .ama-pagination .ama-pagination__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ama-pagination .ama-pagination__link {
    transition: none;
  }
}

/* ==========================================================================
   TOUCH TARGET SIZE — Elementor social icon rows
   WCAG 2.2 AA, SC 2.5.8 Target Size (Minimum): 24x24 CSS px.

   The header, footer and dock social rows rendered as 18x18 boxes (15x15 in
   the footer) at 18-21px centre to centre, which fails the 24px minimum AND
   its spacing exception — a 24px circle on one icon overlapped its neighbour's.
   PageSpeed flagged it; it is a real failure, and the theme claims AA.

   Only the BOX grows. Elementor sizes a social icon as

       width/height: calc(var(--icon-size) + 2 * var(--icon-padding))

   and draws the glyph at --icon-size, so a min-width/min-height floor enlarges
   the tappable box and leaves the artwork alone. Measured on staging at 375px:
   box 18x18 -> 24x24, glyph 11x11 -> 11x11 (unchanged), centre to centre
   20px -> 27px, row 182px -> 240px inside a 333-375px parent, still one row,
   document scroll width unchanged at 375px. So it costs ~58px of row width and
   no layout break — which is why this is done here rather than by adding icon
   spacing in Elementor, where the gap is what grows and the target is not.

   Repeated three times for specificity: Elementor's own
   `.elementor-icon.elementor-social-icon` is 0-2-0, so a two-class selector
   only wins on source order, which is not something to depend on across a
   plugin update.

   NB 24px, not Lighthouse's 48px. Nine icons at 48px need 432px and cannot fit
   a 375px phone without wrapping to two rows; 24px is what the standard asks
   for and what fits. Lighthouse may keep reporting this.
   ========================================================================== */

.elementor-social-icon.elementor-social-icon.elementor-social-icon {
  min-width: 24px;
  min-height: 24px;
}

/* ==========================================================================
   AMA PEOPLE  (.ama-people)
   Committee / office-bearer / past-president rows — see
   inc/elementor-widgets/widget-ama-people.php.

   In style.css rather than its own file on purpose: the home page already
   serves 76 stylesheets, 71 of them render-blocking, and one more request for
   a handful of rules is the wrong trade.

   FLEXBOX, NOT GRID. The requirement is that a card is sized to the COLUMN
   COUNT and not to how many people there are — four people in a seven-column
   row stay one-seventh wide — and that a short row can then be aligned as a
   group. Grid would park those four in their column tracks; flex lets
   justify-content move the whole short row, which is also what handles the
   last row when a long list wraps.
   ========================================================================== */

.ama-people {
  /* --ama-people-cols / -align / -aspect come from the widget's inline style. */
  --ama-people-gap: 20px;
  /* The EFFECTIVE column count. Equal to the configured one on desktop, capped
     at the breakpoints below.

     An earlier version instead put a 150px floor under the card width via
     max(). Measuring it showed why that was wrong: in a 1000px container,
     seven columns should give 126px cards, and the floor forced 150px — so
     twelve people wrapped 6 + 6 instead of 7 + 5, and the column setting
     stopped meaning anything. Elementor content containers are routinely
     narrower than the ~1170px that floor needed, so it would have been wrong
     on the real pages, not just in a test. Capping the COUNT keeps the card a
     true fraction of the row at every width. */
  --ama-people-c: var(--ama-people-cols, 7);
}

.ama-people__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ama-people-gap);
  justify-content: var(--ama-people-align, center);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ama-people__item {
  /* (row width - the gaps between N cards) / N. Exactly one Nth, so four
     people in seven columns stay one-seventh wide and do not stretch. */
  flex: 0 0 calc(
    (100% - (var(--ama-people-c) - 1) * var(--ama-people-gap))
    / var(--ama-people-c)
  );
  margin: 0;
  min-width: 0; /* let long names wrap instead of forcing the row wider */
}

.ama-person {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  text-align: center;
}

/* ── Portrait ─────────────────────────────────────────────────────────────── */

/* Photo width is capped independently of the card, so a low column count gives
   wide TEXT without an enormous portrait — at two columns on a full-width
   section the card is ~560px, and a face does not want to be 560px. min()
   means the cap never makes a photo wider than its card, so at seven columns
   (card ~126px) it simply does not engage.

   220px is a baseline, not a decision: the widget's "Photo Max Width" control
   overrides it, and carries no Elementor default precisely so this rule stays
   overridable in both directions. */
.ama-person__photo {
  position: relative;
  overflow: hidden;
  width: min(100%, 220px);
  /* align-self, NOT margin-inline: auto. An auto margin on a flex item absorbs
     the free space and overrides align-self, so the Text Align control could
     never move the photo while that margin was here. */
  align-self: center;
  aspect-ratio: var(--ama-people-aspect, 3 / 4);
  background: var(--paper, #f1ece0);
  border-radius: 6px;
}

/* Three classes deep: Elementor ships `.elementor img { height: auto }` at
   (0,1,1), which beats a single class and would leave the portrait at its
   natural height instead of filling the shape above. */
.ama-person .ama-person__photo .ama-person__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top; /* faces sit high in a portrait crop */
}

/* ── Text ─────────────────────────────────────────────────────────────────── */

.ama-person__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ama-person__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--blue-deep, #0d2160);
}

/* Designation and the additional-info note are the eyebrow lines: small,
   uppercase, tracked. Both read as a label above (or below) the name. */
.ama-person__designation,
.ama-person__extra {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--red-deep, #a82720);
}

/* The qualifier ("ACTING PRESIDENT") is distinguished from the substantive
   designation so two stacked lines do not read as one. */
.ama-person__extra {
  color: var(--ama-muted, #534c45);
}

.ama-person__period {
  margin: 0;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums; /* year ranges line up down the row */
  color: var(--ama-muted, #534c45);
}

.ama-person__profile {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ama-text, #0d1524);
}

/* Text-only cards: no photo, so the block carries its own breathing room and
   a rule to keep the row legible as a row. */
.ama-person--no-photo {
  padding: 14px 10px;
  border-top: 2px solid var(--ama-border, #d6cfc4);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* The caps never RAISE the count — min() means a widget set to 3 columns stays
   3 all the way down, and only a 7 gets reduced. Breakpoints match the post
   grid in ama-posts-archive.css so the page changes shape in one place. */
@media (max-width: 1100px) {
  .ama-people { --ama-people-c: min(var(--ama-people-cols, 7), 5); }
}

@media (max-width: 860px) {
  .ama-people {
    --ama-people-gap: 16px;
    --ama-people-c: min(var(--ama-people-cols, 7), 3);
  }
}

@media (max-width: 540px) {
  .ama-people {
    --ama-people-gap: 16px;
    --ama-people-c: min(var(--ama-people-cols, 7), 2);
  }
}

/* Editor-only placeholder for a widget with nobody in it yet. */
.ama-people__empty {
  padding: 24px;
  border: 2px dashed var(--ama-border, #d6cfc4);
  border-radius: 6px;
  color: var(--ama-muted, #534c45);
  text-align: center;
}

/* Editor-only note: bulk-pasted rows are counted in the canvas, not rendered
   (see widget-ama-people.php content_template for why). */
.ama-people__bulk-note {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px dashed var(--ama-border, #d6cfc4);
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--ama-muted, #534c45);
  text-align: center;
}

/* ── Direction: down (column-major) ───────────────────────────────────────────
   A CSS grid with grid-auto-flow:column, so people fill the first column before
   starting the next — 9 in 3 columns read 1-2-3 / 4-5-6 / 7-8-9 downwards.

   The row count cannot be derived in CSS (it depends on how many people there
   are), so the widget computes one per breakpoint and sets them as custom
   properties; the media queries below just pick the right one. Card width is
   still a fraction of the column count, identical to the across mode, and
   justify-content still aligns the block when it does not fill the row.

   DOM order stays 1..n — which is why this is a grid rather than two stacked
   containers with the leftover centred underneath. That layout needs the people
   split in two, and the split depends on the column count that CSS changes at
   every breakpoint: it would cost either the responsive caps or the reading
   order a screen reader and a phone both rely on. */

.ama-people--down .ama-people__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--ama-people-rows, 1), auto);
  grid-auto-columns: calc(
    (100% - (var(--ama-people-c) - 1) * var(--ama-people-gap))
    / var(--ama-people-c)
  );
  justify-content: var(--ama-people-align, center);
}

/* flex-basis means nothing to a grid item, and a stale one would fight
   grid-auto-columns. */
.ama-people--down .ama-people__item {
  flex: none;
}

@media (max-width: 1100px) {
  .ama-people--down .ama-people__list {
    grid-template-rows: repeat(var(--ama-people-rows-lg, var(--ama-people-rows, 1)), auto);
  }
}

@media (max-width: 860px) {
  .ama-people--down .ama-people__list {
    grid-template-rows: repeat(var(--ama-people-rows-md, var(--ama-people-rows, 1)), auto);
  }
}

@media (max-width: 540px) {
  .ama-people--down .ama-people__list {
    grid-template-rows: repeat(var(--ama-people-rows-sm, var(--ama-people-rows, 1)), auto);
  }
}

/* ==========================================================================
   FORM BUSY STATE  —  paired with assets/js/ama-form-busy.js
   ==========================================================================
   Three of our forms post and reload the page: the Apply Form widget (which
   posts add-to-cart), WooCommerce's single-product add-to-cart, and the member
   dashboard's GSTIN save. The POST takes a second or two, so without this the
   button looks untouched and people click it again. The JS adds the classes;
   this gives them an appearance.

   The spinner is drawn with currentColor, so it inherits whatever colour each
   button already uses — crimson on the Apply button, navy on the product page,
   and correct for any button added later without naming a colour here.

   `pointer-events: none` does double duty: it stops further clicks landing,
   and it suppresses the buttons' own :hover rules, so a cursor resting on the
   button after a click cannot brighten it back up. That is why no !important
   is needed, unlike the MEC booking button in ama-mec-single.css.
   ========================================================================== */
.ama-busy { cursor: progress; }

.ama-busy-btn.ama-busy-btn {
  opacity: .65;
  pointer-events: none;
}

.ama-busy-btn.ama-busy-btn::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;              /* the Apply button is inline-flex */
  vertical-align: -2px;        /* ...the others are not */
  width: 13px;
  height: 13px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ama-busy-spin .7s linear infinite;
}

@keyframes ama-busy-spin { to { transform: rotate(360deg); } }

/* Still moving, just slowly: this spinner is the only feedback there is, so
   freezing it would leave nothing at all. */
@media (prefers-reduced-motion: reduce) {
  .ama-busy-btn.ama-busy-btn::before { animation-duration: 2.4s; }
}

/* --------------------------------------------------------------------------
   MEC-WooCommerce "Add to cart" — the link in the event booking flow
   --------------------------------------------------------------------------
   Not a form submit, so neither ama-form-busy.js nor MEC's booking-form JS
   touches it. It is an <a> that mec-woocommerce renders as:

     <a id="mec_woo_add_to_cart_btn_r" class="button mec-add-to-cart-btn-r" ...>

   and its own inline handler already does the mechanical half, the same as the
   booking button did: it preventDefaults, refuses a second click while the
   class is set (`if (jQuery(this).hasClass('loading')) return;`) and adds
   `loading` before firing two AJAX calls and a 500ms redirect to the cart.
   That is the second or two with no feedback. Nothing anywhere styles the
   class, so again only the appearance is missing.

   `filter: grayscale()` rather than a grey background on purpose. MEC's own
   colour for this button (#47dc6e) needs a .mec-click-pay ancestor that our
   skin does not emit, so the colour actually in force comes from whichever
   generic `.button` rule wins — and this greys whatever that turns out to be
   without naming a colour or starting an !important fight over `background`.
   -------------------------------------------------------------------------- */
#mec_woo_add_to_cart_btn_r.loading,
.mec-add-to-cart-btn-r.loading {
  filter: grayscale(1);
  opacity: .7;
  pointer-events: none;
  cursor: progress;
}

#mec_woo_add_to_cart_btn_r.loading::before,
.mec-add-to-cart-btn-r.loading::before {
  content: "";
  display: inline-block;
  vertical-align: -2px;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ama-busy-spin .7s linear infinite;   /* shared with the block above */
}

@media (prefers-reduced-motion: reduce) {
  #mec_woo_add_to_cart_btn_r.loading::before,
  .mec-add-to-cart-btn-r.loading::before { animation-duration: 2.4s; }
}