/* =====================================================================
   AB Starter — homepage sections (Gareth's design)

   HOW THIS WORKS
   You build each section in Elementor and type these class names into
   each element's Style → Classes box (choose "Create", leave the
   Elementor class empty). This file does all the styling, so text and
   images can be changed in Elementor without breaking the design.

   WHY EVERY RULE STARTS WITH "body.ab"
   Elementor styles its elements with rules like ".elementor .e-flexbox-base"
   (two classes). functions.php adds the class "ab" to <body>, so
   "body.ab .ab-hero" is two classes + a tag: slightly stronger, so the
   theme's design always wins. That's CSS "specificity".
   The flip side: Elementor's Style-tab settings can't override these
   rules. To change the design itself, change it here. Text, images,
   links and order are all still edited in Elementor.

   SECTIONS
   1. Shared pieces (eyebrow label, hidden heading)
   2. Hero
   3. "What we do" cards
   4. Split sections (text beside a photo): Become a Member, Volunteer
   5. Simple sections (heading, intro, content): Latest News, etc.
   6. Link cards: Information and Resources
   7. Contact Us: layout, side cards, and the WPForms form
   ===================================================================== */


/* ---------- 1. Shared pieces ---------- */

/* Small uppercase label with an orange bar in front of it,
   e.g. "BUCKINGHAMSHIRE CHARITY" */
body.ab .ab-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ab-teal);
}
body.ab .ab-eyebrow::before {
	content: "";
	flex: none;
	width: 32px;
	height: 4px;
	border-radius: 2px;
	background: var(--ab-orange);
}


/* Hidden heading: read out by screen readers, invisible on screen.
   Gives a section a proper heading without changing the design. */
body.ab .ab-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}


/* ---------- 2. Hero ----------
   Elementor structure:
   Flexbox .ab-hero                       (the full-width band)
     Flexbox .ab-hero__inner              (two columns: text | photo)
       Flexbox .ab-hero__text
         Paragraph .ab-eyebrow
         Heading (h1) .ab-hero__title
         Paragraph .ab-hero__lead
         Flexbox .ab-hero__buttons
           Button .ab-btn .ab-btn--primary
           Button .ab-btn .ab-btn--secondary
       Flexbox .ab-hero__media
         Image .ab-hero__image
------------------------------------------------------------------- */
body.ab .ab-hero {
	display: block;
	background: var(--ab-cream);
	padding: clamp(48px, 7vw, 88px) var(--ab-gutter) clamp(56px, 7vw, 80px);
}

body.ab .ab-hero__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(40px, 6vw, 72px);
	align-items: center;
	max-width: calc(var(--ab-container) - 2 * 40px);
	margin: 0 auto;
	padding: 0;
}

body.ab .ab-hero__text {
	display: block;
	padding: 0;
}

body.ab .ab-hero__title {
	margin: 0 0 20px;
	font-family: var(--ab-font-heading);
	font-weight: 700;
	font-size: var(--ab-text-h1);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--ab-teal);
}

body.ab .ab-hero__lead {
	margin: 0 0 36px;
	max-width: 30ch;
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.5;
	color: var(--ab-ink);
	text-wrap: pretty;
}

body.ab .ab-hero__buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
	padding: 0;
}
body.ab .ab-hero__buttons .ab-btn { flex: 1 1 200px; }

/* Photo with the two decorative shapes behind it. The shapes are drawn
   with ::before and ::after, so they can't be accidentally deleted. */
body.ab .ab-hero__media {
	display: block;
	position: relative;
	padding: 0;
}
/* Gareth's sage box and orange circle have been removed: the photo stands
   on its own. Elementor draws its own ::before/::after on containers, so
   these are switched off rather than just deleted. */
body.ab .ab-hero__media::before,
body.ab .ab-hero__media::after { content: none; }
body.ab .ab-hero__image,
body.ab .ab-hero__image img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 28px;
}
body.ab .ab-hero__image { box-shadow: var(--ab-shadow-soft); }


/* ---------- 3. "What we do" cards ----------
   Sits INSIDE the hero Flexbox, after .ab-hero__inner, as in Gareth's design.

   Elementor structure:
   Flexbox .ab-hero
     Flexbox .ab-hero__inner        (already built)
     Heading (h2) .ab-visually-hidden    "What we do"
     Flexbox .ab-features
       Flexbox .ab-feature .ab-feature--info
         Paragraph .ab-feature__text
       Flexbox .ab-feature .ab-feature--people
         Paragraph .ab-feature__text
       Flexbox .ab-feature .ab-feature--document
         Paragraph .ab-feature__text
       Flexbox .ab-feature .ab-feature--shield
         Paragraph .ab-feature__text

   The ICON is chosen by the second class on each card:
     ab-feature--info      (i in a circle)
     ab-feature--people    (two people)
     ab-feature--document  (lined page)
     ab-feature--shield    (shield with a tick)
   So there are no icon images to upload or lose.
------------------------------------------------------------------- */
body.ab .ab-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 16px;
	max-width: calc(var(--ab-container) - 2 * 40px);
	margin: clamp(48px, 6vw, 72px) auto 0;
	padding: 0;
}

body.ab .ab-feature {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	background: var(--ab-white);
	border: 1px solid #ECE8DF;
	border-radius: 22px;
	padding: clamp(18px, 3vw, 22px);
	box-shadow: var(--ab-shadow-soft);
}

/* The orange-tinted circle with the icon in it.
   Elementor uses ::before on every Flexbox for background overlays and
   positions it "absolute" (on top of the content). position: static
   puts our icon back into the row, beside the text. */
body.ab .ab-feature::before {
	content: "";
	position: static;
	inset: auto;
	display: block;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--ab-orange-tint);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
}
body.ab .ab-feature--info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16.5'/%3E%3Ccircle cx='12' cy='7.5' r='.6' fill='%23C25700'/%3E%3C/svg%3E");
}
body.ab .ab-feature--people::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8' r='3'/%3E%3Ccircle cx='16' cy='9' r='2.5'/%3E%3Cpath d='M3 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5'/%3E%3Cpath d='M15 14.2c3 0 6 1.6 6 4.8'/%3E%3C/svg%3E");
}
body.ab .ab-feature--document::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cline x1='8' y1='9' x2='16' y2='9'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
}
body.ab .ab-feature--shield::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V7z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

body.ab .ab-feature__text {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--ab-ink);
}


/* ---------- 4. Split sections ----------
   Text on one side, photo on the other. Used for "Become a Member" and
   "Volunteer". Side by side on wide screens, stacked on narrow ones.

   Elementor structure:
   Flexbox .ab-section .ab-section--white      (the full-width band)
     Flexbox .ab-split                         (the two columns)
       Flexbox .ab-split__text
         Heading (h2) .ab-h2        (draws the orange bar above itself)
         Paragraph .ab-body         (one per paragraph, as many as you like)
         Button .ab-btn .ab-btn--primary
       Image .ab-split__image

   To put the photo on the LEFT (as in Volunteer), just put the Image
   above the text Flexbox in the Structure panel.

   Background options for .ab-section (add ONE):
     ab-section--white   ab-section--cream   ab-section--sage
------------------------------------------------------------------- */
body.ab .ab-section {
	display: block;
	padding: var(--ab-section-y) var(--ab-gutter);
	background: var(--ab-cream);
}
body.ab .ab-section--white { background: var(--ab-white); }
body.ab .ab-section--cream { background: var(--ab-cream); }
body.ab .ab-section--sage  { background: var(--ab-sage); }

body.ab .ab-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(36px, 5vw, 64px);
	align-items: center;
	max-width: calc(var(--ab-container) - 2 * 40px);
	margin: 0 auto;
	padding: 0;
}

body.ab .ab-split__text {
	display: block;
	padding: 0;
}

/* Standard section heading (h2), with the short orange bar above it.
   The bar is drawn by the heading itself, so it can't get lost. */
body.ab .ab-h2 {
	margin: 0 0 20px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: var(--ab-text-h2);
	line-height: 1.15;
	color: var(--ab-teal);
}
body.ab .ab-h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	margin-bottom: 18px;
	border-radius: 2px;
	background: var(--ab-orange);
}

/* Standard body paragraph, kept to a comfortable reading width */
body.ab .ab-body {
	margin: 0 0 16px;
	max-width: 62ch;
	font-size: var(--ab-text-base);
	line-height: 1.6;
	color: var(--ab-ink);
}

/* Space between the last paragraph and the button */
body.ab .ab-split__text .ab-btn { margin-top: 16px; }

body.ab .ab-split__image,
body.ab .ab-split__image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 28px;
}


/* ---------- 5. Simple sections ----------
   A heading, an intro line, then content (often a shortcode from the
   Autism Bucks Core plugin), then optionally a button.

   Elementor structure, e.g. Latest Autism News:
   Flexbox .ab-section .ab-section--cream
     Flexbox .ab-inner
       Heading (h2) .ab-h2         "Latest Autism News"
       Paragraph   .ab-body .ab-intro   "Recent autism news from…"
       Shortcode   (classic widget)     [ab_news]
       Button      .ab-btn .ab-btn--secondary   "All news items"
------------------------------------------------------------------- */
body.ab .ab-inner {
	display: block;
	max-width: calc(var(--ab-container) - 2 * 40px);
	margin: 0 auto;
	padding: 0;
}

/* Intro line under a section heading: a little more space below it */
body.ab .ab-intro { margin-bottom: clamp(28px, 4vw, 40px); }

/* A button at the end of a simple section */
body.ab .ab-inner > .ab-btn { margin-top: 32px; }

/* "What our members say" (and similar follow-on blocks): its own band
   placed directly under another band of the same colour. The flush-top
   class removes the top padding so the two bands read as one section.

   Elementor structure (top level, straight after Become a Member):
   Flexbox .ab-section .ab-section--white .ab-section--flush-top
     Flexbox .ab-inner
       Heading (h3) .ab-h3                        "What our members say"
       Paragraph   .ab-body .ab-muted .ab-intro--tight   "Feedback from people…"
       Shortcode   (classic widget)               [ab_quotes]
*/
body.ab .ab-section--flush-top { padding-top: 0; }

/* Smaller sub-heading (h3) */
body.ab .ab-h3 {
	margin: 0 0 8px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.25;
	color: var(--ab-teal);
}

/* Grey secondary text */
body.ab .ab-muted { color: var(--ab-muted); }

/* Intro line with less space below it */
body.ab .ab-intro--tight { margin-bottom: 24px; }


/* ---------- 6. Link cards (Information and Resources) ----------
   White cards, each with a heading and a list of link rows. Each row is
   ONE Flexbox with a Link set (Elementor then makes it an <a>), holding
   two Paragraphs. The icon tile and the arrow are drawn by this CSS.

   Elementor structure:
   Flexbox .ab-section .ab-section--sage
     Flexbox .ab-inner
       Heading (h2) .ab-h2               "Information and Resources"
       Paragraph   .ab-body .ab-intro    "Autism is a long journey…"
       Flexbox .ab-link-cards                     (the 2-column grid)
         Flexbox .ab-link-card                    (one white card)
           Heading (h3) .ab-link-card__title      "Understanding autism"
           Paragraph   .ab-link-card__sub         "Background reading…"
           Flexbox .ab-link-row .ab-link-row--learn   ← set Link here
             Paragraph .ab-link-row__title        "Learn about Autism"
             Paragraph .ab-link-row__desc         "Why autism is called…"
           …more rows…
         Flexbox .ab-link-card
           …

   Icons — the second class on each row chooses it:
     ab-link-row--learn     open book
     ab-link-row--faq       question mark
     ab-link-row--books     books on a shelf
     ab-link-row--links     chain link
     ab-link-row--card      card
     ab-link-row--passport  passport
------------------------------------------------------------------- */
body.ab .ab-link-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(16px, 3vw, 28px);
	align-items: start;
	padding: 0;
}

body.ab .ab-link-card {
	display: block;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-lg);
	padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 28px) clamp(10px, 2vw, 16px);
}

body.ab .ab-link-card__title {
	margin: 0 0 2px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	color: var(--ab-teal);
}
body.ab .ab-link-card__sub {
	margin: 0 0 10px;
	font-size: 16px;
	color: var(--ab-muted);
}

/* One row: [icon] [title / description] [arrow], laid out as a grid so
   the icon and arrow sit beside BOTH lines of text. */
body.ab .ab-link-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 36px;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-items: center;
	min-height: 72px;
	padding: 14px 12px;
	margin: 0 -12px;
	border-top: 1px solid #EEF1EA;
	border-radius: 14px;
	color: var(--ab-ink);
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-link-row:hover { background: var(--ab-orange-wash); color: var(--ab-ink); }

/* Icon tile (left). position: static undoes Elementor's own ::before. */
body.ab .ab-link-row::before {
	content: "";
	position: static;
	inset: auto;
	grid-column: 1;
	grid-row: 1 / span 2;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background-color: var(--ab-orange-soft);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
}

/* Arrow (right) */
body.ab .ab-link-row::after {
	content: "→";
	position: static;
	inset: auto;
	grid-column: 3;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid #EBCDB2;
	color: var(--ab-orange-dark);
	font-size: 17px;
	background: none;
	opacity: 1;
}

body.ab .ab-link-row__title {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin: 0;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.35;
	color: var(--ab-ink);
}
body.ab .ab-link-row__desc {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin: 2px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ab-muted);
}

body.ab .ab-link-row--learn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C4 4.7 4.7 4 5.5 4H11v16H5.5c-.8 0-1.5-.7-1.5-1.5zM20 5.5c0-.8-.7-1.5-1.5-1.5H13v16h5.5c.8 0 1.5-.7 1.5-1.5z'/%3E%3C/svg%3E"); }
body.ab .ab-link-row--faq::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6M12 17h.01'/%3E%3C/svg%3E"); }
body.ab .ab-link-row--books::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4v16H5zM11 4h4v16h-4zM17 6.5l2.8.8-3 12.4-2.8-.8'/%3E%3C/svg%3E"); }
body.ab .ab-link-row--links::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
body.ab .ab-link-row--card::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 10h18M7 15h4'/%3E%3C/svg%3E"); }
body.ab .ab-link-row--passport::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM9 17h6'/%3E%3C/svg%3E"); }


/* ---------- 7. Contact Us ----------
   Elementor structure:
   Flexbox .ab-section .ab-section--white
     Flexbox .ab-inner
       Heading (h2) .ab-h2              "Contact Us"
       Paragraph   .ab-body .ab-intro   "Send us a message and a volunteer will reply by email…"
       Flexbox .ab-contact                        (form | side cards)
         Flexbox .ab-contact__form                (cream card)
           Shortcode   [wpforms id="170"]
           Paragraph   .ab-contact__note    "We usually reply within 3 to 5 working days."
         Flexbox .ab-contact__aside
           Flexbox .ab-contact__card
             Heading (h3) .ab-contact__title   "General enquiries"
             Paragraph   .ab-contact__email    (link: mailto:…)
           Flexbox .ab-contact__card
             Heading (h3) .ab-contact__title   "Safeguarding"
             Paragraph   .ab-body               "If you are worried…"
             Paragraph   .ab-contact__email     (link: mailto:…)
             Paragraph   .ab-contact__links     "Safeguarding Policy · Easy Read version"

   WPForms setting needed: WPForms → Settings → General →
   Include Form Styling → "No Styling". This file does it all.
------------------------------------------------------------------- */
body.ab .ab-contact {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 48px);
	align-items: flex-start;
	padding: 0;
}

body.ab .ab-contact__form {
	display: block;
	flex: 2 1 460px;
	min-width: 0;
	max-width: 760px;
	background: var(--ab-cream);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-lg);
	padding: clamp(20px, 4vw, 40px);
}
body.ab .ab-contact__note {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ab-muted);
}

body.ab .ab-contact__aside {
	display: flex;
	flex-direction: column;
	flex: 1 1 300px;
	gap: 16px;
	padding: 0;
}
body.ab .ab-contact__card {
	display: block;
	background: var(--ab-cream);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius-md);
	padding: 24px;
}
body.ab .ab-contact__title {
	margin: 0 0 6px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 19px;
	color: var(--ab-teal);
}
body.ab .ab-contact__card .ab-body { margin: 0 0 10px; font-size: 17px; }
body.ab .ab-contact__email {
	margin: 0 0 14px;
	font-weight: 700;
	word-break: break-word;
}
body.ab .ab-contact__card > :last-child { margin-bottom: 0; }
/* The two policy links: a Flexbox holding two linked Paragraphs, side by side */
body.ab .ab-contact__links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	font-size: 16px;
}
body.ab .ab-contact__links > * { margin: 0; }

/* Links in the cards: teal, underlined, orange on hover */
body.ab .ab-contact__card a {
	color: var(--ab-teal);
	text-decoration: underline;
	text-underline-offset: .15em;
}
body.ab .ab-contact__card a:hover { color: var(--ab-orange-dark); }
body.ab .ab-contact__card a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); border-radius: 4px; }

/* Put "We usually reply within…" beside the Send button on wider screens.
   The note is its own Elementor paragraph, so it's lifted into the space
   to the right of the button. Phones keep it underneath. */
@media (min-width: 600px) {
	body.ab .ab-contact__form { position: relative; }
	body.ab .ab-contact__form button.wpforms-submit { width: 240px; }
	body.ab .ab-contact__note {
		position: absolute;
		left: calc(clamp(20px, 4vw, 40px) + 264px);
		right: clamp(20px, 4vw, 40px);
		bottom: clamp(20px, 4vw, 40px);
		min-height: 60px;          /* same height as the button */
		display: flex;
		align-items: center;
		margin: 0;
	}
	/* After sending, the thank-you box replaces the form: hide the note */
	body.ab .ab-contact__form:has(.wpforms-confirmation-container-full) .ab-contact__note,
	body.ab .ab-contact__form:has(.wpforms-confirmation-container) .ab-contact__note { display: none; }
}

/* ----- The WPForms form, in Gareth's style ----- */
body.ab .wpforms-container { margin: 0; }

body.ab .wpforms-field-container {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.5vw, 24px);
}
body.ab .wpforms-field { padding: 0; margin: 0; }
body.ab .wpforms-field fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Labels */
body.ab .wpforms-field-label,
body.ab .wpforms-field-sublabel {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-weight: 700;
	font-size: 17px;
	color: var(--ab-ink);
}
/* Gareth marks optional fields instead of required ones, so hide the * */
body.ab .wpforms-required-label { display: none; }

/* Name: "First" and "Last" side by side, each with its label ABOVE the box.
   The overall "Name" heading is kept for screen readers only. */
body.ab .wpforms-field-name legend.wpforms-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
body.ab .wpforms-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: clamp(18px, 2.5vw, 24px);
}
body.ab .wpforms-field-row-block {
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}
body.ab .wpforms-field-sublabel { order: -1; }   /* move the label above the box */

/* Boxes */
body.ab .wpforms-field input[type="text"],
body.ab .wpforms-field input[type="email"],
body.ab .wpforms-field input[type="tel"],
body.ab .wpforms-field input[type="url"],
body.ab .wpforms-field input[type="number"],
body.ab .wpforms-field select,
body.ab .wpforms-field textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 56px;
	padding: 14px 16px;
	border: 1.5px solid var(--ab-field-border);
	border-radius: 14px;
	background: var(--ab-white);
	color: var(--ab-ink);
	font: inherit;
	font-size: 17px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
body.ab .wpforms-field textarea { min-height: 160px; resize: vertical; }
body.ab .wpforms-field input:hover,
body.ab .wpforms-field textarea:hover,
body.ab .wpforms-field select:hover { border-color: #9AA79F; }
body.ab .wpforms-field input:focus,
body.ab .wpforms-field textarea:focus,
body.ab .wpforms-field select:focus {
	outline: none;
	border-color: var(--ab-field-border);
	box-shadow: var(--ab-focus-ring);
}
body.ab .wpforms-field ::placeholder { color: #6B7774; opacity: 1; }

/* Errors: red border, and a bold red message with a "!" badge */
body.ab .wpforms-field input.wpforms-error,
body.ab .wpforms-field textarea.wpforms-error,
body.ab .wpforms-field select.wpforms-error { border-color: var(--ab-error); }

body.ab em.wpforms-error,
body.ab label.wpforms-error {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 0;
	font-style: normal;
	font-size: 16px;
	font-weight: 700;
	color: var(--ab-error);
}
body.ab em.wpforms-error::before,
body.ab label.wpforms-error::before {
	content: "!";
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--ab-error);
	color: #fff;
	font-size: 13px;
	line-height: 1;
}

/* Submit button */
body.ab .wpforms-submit-container { margin-top: clamp(18px, 2.5vw, 24px); padding: 0; }
body.ab button.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 60px;
	min-width: min(100%, 220px);
	padding: 0 34px;
	border: 2px solid var(--ab-orange-dark);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-orange-dark);
	color: #fff;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 18px;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(194, 87, 0, .25);
	transition: background-color .2s ease, transform .2s ease;
}
body.ab button.wpforms-submit::after { content: "→"; }
body.ab button.wpforms-submit:hover { background: var(--ab-orange-darker); border-color: var(--ab-orange-darker); transform: translateY(-1px); }
body.ab button.wpforms-submit:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
body.ab .wpforms-submit-spinner { margin-left: 12px; vertical-align: middle; }

/* "Thank you" message after sending */
body.ab .wpforms-confirmation-container-full,
body.ab .wpforms-confirmation-container {
	background: var(--ab-sage);
	border: 0;
	border-radius: 20px;
	padding: 32px;
	color: var(--ab-ink);
}
body.ab .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }


/* ---------- 8. Join us online (social media + YouTube) ----------
   Reuses the link cards from section 6. Elementor structure:

   Flexbox .ab-section .ab-section--cream
     Flexbox .ab-inner
       Heading (h2) .ab-h2              "Join us online"
       Paragraph   .ab-body .ab-intro   "Follow us for …"
       Flexbox .ab-link-cards                       (the two columns)
         Flexbox .ab-link-card                      LEFT: social media
           Heading (h3) .ab-link-card__title   "Join the conversation"
           Paragraph   .ab-link-card__sub      "Be the first to hear…"
           Flexbox .ab-link-row .ab-link-row--facebook   ← Link: Facebook page
             Image     .ab-link-row__icon   (Facebook icon from Media)
             Paragraph .ab-link-row__title   "Facebook"
             Paragraph .ab-link-row__desc    "Event reminders, photos…"
           …same for --instagram, --bluesky, --linkedin
         Flexbox .ab-link-card                      RIGHT: YouTube
           Heading (h3) .ab-link-card__title   "Watch and learn on YouTube"
           Shortcode   [ab_video id="O1QrWZAUyoc" …]
           Heading (h4) .ab-link-card__label   "More to watch"
           Flexbox .ab-link-row .ab-link-row--voices    "Autistic voices"
           Flexbox .ab-link-row .ab-link-row--stories   "Members' stories"
           Flexbox .ab-link-row .ab-link-row--topics    "Understanding autism"
           Flexbox .ab-btn-row
             Button .ab-btn .ab-btn--primary     "Subscribe"
             Button .ab-btn .ab-btn--secondary   "Visit our YouTube channel"

   Platform icons: upload the official icon to Media, then add an Image
   element as the FIRST thing inside the row, with class ab-link-row__icon.
------------------------------------------------------------------- */

/* Platform icons: an Image element (class ab-link-row__icon) inside the row,
   uploaded through Media like any other picture. It takes the place of
   the drawn icon tile. */
body.ab .ab-link-row:has(.ab-link-row__icon)::before { display: none; }
body.ab .ab-link-row .ab-link-row__icon,
body.ab .ab-link-row .ab-link-row__icon img {
	display: block;
	width: 44px;
	height: 44px;
	max-width: none;
	margin: 0;
}
body.ab .ab-link-row .ab-link-row__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	box-sizing: border-box;
	padding: 9px;
	border-radius: 12px;
	background: var(--ab-white);
	box-shadow: inset 0 0 0 1px var(--ab-border);
	object-fit: contain;
}
body.ab .ab-link-row .ab-link-row__icon img { width: 100%; height: 100%; padding: 0; box-shadow: none; object-fit: contain; }

/* YouTube rows: our own orange icons, like section 6 */
body.ab .ab-link-row--voices::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zM19 11a7 7 0 0 1-14 0M12 18v3M8 21h8'/%3E%3C/svg%3E"); }
body.ab .ab-link-row--stories::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM2.5 20a6.5 6.5 0 0 1 13 0M16 4.3a3.5 3.5 0 0 1 0 6.4M18 14.2a6.5 6.5 0 0 1 3.5 5.8'/%3E%3C/svg%3E"); }
body.ab .ab-link-row--topics::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM10 8l5 2.5-5 2.5zM8 21h8'/%3E%3C/svg%3E"); }

/* The video inside a card */
/* Spacing goes on Elementor's Shortcode box: Elementor resets margins on a figure inside its widgets */
body.ab .ab-link-card .elementor-widget-shortcode:has(.ab-video) { margin: 14px 0 0; }
body.ab .ab-link-card .elementor-widget-shortcode { width: 100%; }

/* Small orange label, e.g. "More to watch" */
body.ab .ab-link-card .ab-link-card__label {
	margin: 24px 0 6px;
	font-family: var(--ab-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ab-orange-dark);
}

/* A row of buttons (wraps on phones) */
body.ab .ab-btn-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	margin: 20px 0 14px;
}

/* Two link cards placed straight inside .ab-inner (no .ab-link-cards box
   around them) still sit side by side: the heading and intro span the full
   width, and each card takes one column. Phones: one column. */
body.ab .ab-inner:has(> .ab-link-card) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	column-gap: clamp(16px, 3vw, 28px);
	row-gap: 0;
	align-items: stretch;      /* side-by-side cards are the same height */
}
body.ab .ab-inner:has(> .ab-link-card) > :not(.ab-link-card) { grid-column: 1 / -1; }
body.ab .ab-inner > .ab-link-card {
	display: flex;
	flex-direction: column;
	margin-bottom: clamp(16px, 3vw, 28px);
}
/* The shorter card shares its spare height out between its link rows,
   so they grow evenly (text stays centred) instead of leaving a gap. */
body.ab .ab-inner > .ab-link-card > .ab-link-row {
	flex: 1 1 auto;
	align-content: center;
}

/* The video inside a link card is a compact "feature row": a smaller
   thumbnail with its caption beside it. It grows to full width while
   playing, and on phones it's always full width. */
@media (min-width: 600px) {
	body.ab .ab-link-card figure.ab-video {
		display: grid;
		grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
		gap: 18px;
		align-items: center;
	}
	body.ab .ab-link-card figure.ab-video .ab-video__frame { border-radius: var(--ab-radius-md); }
	body.ab .ab-link-card figure.ab-video .ab-video__caption {
		margin: 0;
		font-size: 16px;
		line-height: 1.45;
		color: var(--ab-ink);
	}
	body.ab .ab-link-card figure.ab-video .ab-video__icon {
		width: 52px;
		height: 52px;
		background-size: 20px;
	}
	/* No room for the "Play video" tag on the small thumbnail: screen
	   readers still hear it, sighted visitors see the play button. */
	body.ab .ab-link-card figure.ab-video .ab-video__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	/* While playing: back to one full-width column */
	body.ab .ab-link-card figure.ab-video.is-playing { grid-template-columns: minmax(0, 1fr); }
	body.ab .ab-link-card figure.ab-video.is-playing .ab-video__caption { order: 3; }
	body.ab .ab-link-card figure.ab-video.is-playing .ab-video__close { margin-top: 0; justify-self: start; }
}


/* ---------- 9. About Us ----------
   Elementor structure:

   Flexbox .ab-section .ab-section--sage
     Flexbox .ab-inner
       Flexbox .ab-about                          (story | facts)
         Flexbox .ab-about__text
           Heading (h2) .ab-h2          "About Us"
           Paragraph   .ab-body         (three paragraphs)
           Flexbox .ab-about__supporter          ← Link: the Foundation's website
             Paragraph .ab-about__supporter-label   "Supported by"
             Image     .ab-about__logo
           Button .ab-btn .ab-btn--secondary     "More about us"
         Flexbox .ab-about__facts                (white panel)
           Heading (h3) .ab-about__facts-title   "At a glance"
           Flexbox .ab-fact                      (× 4)
             Paragraph .ab-fact__num    "500+"
             Paragraph .ab-fact__text   "members across Buckinghamshire"
------------------------------------------------------------------- */
body.ab .ab-about {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	padding: 0;
}
@media (max-width: 900px) {
	body.ab .ab-about { grid-template-columns: minmax(0, 1fr); }
}

/* The text column wraps its items: heading and paragraphs take a full line
   each; "Supported by" and the button share the last line, at opposite ends. */
body.ab .ab-about__text {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	padding: 0;
	max-width: 62ch;
	font-size: var(--ab-text-base);
}
body.ab .ab-about__text > :not(.ab-about__supporter):not(.ab-btn) { flex: 0 0 100%; }
body.ab .ab-about__text .ab-body { max-width: 62ch; }
/* "More about us": on its own line, at the right of the text column,
   so it doesn't read as part of the "Supported by" box */
body.ab .ab-about__text .ab-btn { margin: 0 0 0 auto; }

/* "Supported by [logo]" — a thank-you, not an advert */
body.ab .ab-about__supporter {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 10px 16px;
	border-radius: var(--ab-radius-sm);
	background: rgba(255, 255, 255, .6);
	color: var(--ab-muted);
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-about__supporter:hover { background: #fff; color: var(--ab-muted); }
body.ab .ab-about__supporter:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
body.ab .ab-about__supporter-label {
	margin: 0;
	font-size: 15px;
	white-space: nowrap;
}
body.ab .ab-about__logo,
body.ab .ab-about__logo img {
	display: block;
	width: auto;
	height: 48px;
	max-width: 220px;
	object-fit: contain;
	margin: 0;
}

/* The facts panel */
body.ab .ab-about__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	padding: clamp(20px, 3vw, 28px);
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-lg);
}
body.ab .ab-about__facts-title {
	grid-column: 1 / -1;
	margin: 0 0 2px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 20px;
	color: var(--ab-teal);
}
body.ab .ab-fact {
	display: block;
	padding: 18px 16px;
	border-radius: var(--ab-radius-md);
	background: var(--ab-cream);
	border: 1px solid var(--ab-border);
}
body.ab .ab-fact__num {
	margin: 0 0 4px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.1;
	color: var(--ab-orange-dark);
	font-variant-numeric: lining-nums;
}
body.ab .ab-fact__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ab-ink);
}
@media (max-width: 420px) {
	body.ab .ab-about__facts { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- 10. Inner pages ----------
   a) The page header band — added automatically by page.php to every page
      except the homepage. The intro line is the page's Excerpt.
   b) "On this page" jump links          Flexbox .ab-jumps
        Paragraph .ab-jumps__label "On this page:"
        Button    .ab-jump  "Who we are"   → Link: #who-we-are
        (each section heading makes its own #id from its text)
   c) Document rows (reports, policies)   Flexbox .ab-docs  (white card)
        Flexbox .ab-doc
          Paragraph .ab-doc__title   "Safeguarding"
          Paragraph .ab-doc__desc    "How Autism Bucks works to keep…"
          Flexbox   .ab-doc__links
            Button  .ab-pill   "Read"       → the PDF
            Button  .ab-pill   "Easy Read"  → the Easy Read PDF
   d) A tidy list in columns: classic "Text Editor" widget with a bulleted
      list, CSS class (Advanced tab) ab-ticklist
------------------------------------------------------------------- */

/* a) Page header band */
.site-main--page:has(.ab-page-header) { padding-top: 0; }
body.ab .ab-page-header {
	background: var(--ab-cream);
	border-bottom: 1px solid var(--ab-border);
	padding: clamp(40px, 6vw, 72px) var(--ab-gutter) clamp(32px, 5vw, 56px);
}
body.ab .ab-page-header__inner {
	max-width: calc(var(--ab-container) - 2 * 40px);
	margin: 0 auto;
}
body.ab .ab-page-header__title {
	margin: 0;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.1;
	color: var(--ab-teal);
}
body.ab .ab-page-header__title::before {
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: var(--ab-orange);
	margin-bottom: 18px;
}
body.ab .ab-page-header__lead {
	margin: 16px 0 0;
	max-width: 62ch;
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.55;
	color: var(--ab-ink);
}

/* Headings that jump links land on: stop them hiding under the sticky header */
body.ab .ab-h2[id] { scroll-margin-top: 110px; }

/* b) Jump links */
body.ab .ab-jumps {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin: 0 0 clamp(28px, 4vw, 40px);
}
body.ab .ab-jumps__label {
	margin: 0 6px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ab-muted);
}
body.ab .ab-jump {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease, border-color var(--ab-dur-hover) ease;
}
body.ab .ab-jump:hover { background: var(--ab-sage); border-color: var(--ab-teal); color: var(--ab-teal); }
body.ab .ab-jump:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }

/* c) Document rows */
body.ab .ab-docs {
	display: block;
	max-width: 900px;
	padding: 6px clamp(18px, 3vw, 28px);
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-lg);
}
body.ab .ab-doc {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid #EEF1EA;
}
body.ab .ab-docs > .ab-doc:first-child { border-top: 0; }
body.ab .ab-doc::before {          /* document icon tile */
	content: "";
	position: static;
	inset: auto;
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--ab-orange-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E") center / 22px no-repeat;
}
body.ab .ab-doc__title {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin: 0;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.35;
	color: var(--ab-ink);
}
body.ab .ab-doc__desc {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin: 2px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ab-muted);
}
body.ab .ab-doc:not(:has(.ab-doc__desc)) .ab-doc__title { grid-row: 1 / span 2; align-self: center; }
body.ab .ab-doc__links {
	grid-column: 3;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: 0;
}
body.ab .ab-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 2px solid var(--ab-teal);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-pill:hover { background: var(--ab-sage); color: var(--ab-teal); }
body.ab .ab-pill:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
@media (max-width: 640px) {        /* phones: buttons go under the text */
	body.ab .ab-doc { grid-template-rows: auto auto auto; }
	body.ab .ab-doc__links { grid-column: 2; grid-row: 3; justify-content: flex-start; margin-top: 10px; }
	body.ab .ab-doc::before { grid-row: 1 / span 3; align-self: start; }
}

/* d) Tidy list in columns, with orange ticks */
body.ab .ab-ticklist ul,
body.ab ul.ab-ticklist {
	columns: 2 280px;
	column-gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.ab .ab-ticklist li {
	position: relative;
	break-inside: avoid;
	margin: 0 0 10px;
	padding-left: 30px;
	font-size: 17px;
	line-height: 1.45;
}
body.ab .ab-ticklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C25700' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Space after a document card before whatever comes next */
body.ab .ab-docs + * { margin-top: clamp(32px, 4vw, 44px); }
/* Several document cards one after another: a small gap between them */
body.ab .ab-docs + .ab-docs { margin-top: 12px; }


/* ---------- 11. Reading pages (built in the block editor) ----------
   Long text pages such as About Autism are written in the normal WordPress
   editor, not Elementor, so anyone can edit the words. Each block gets a
   class in its sidebar: Advanced → Additional CSS class(es).

     Group      ab-jumpbar          the "On this page" strip (sticky on wide screens)
       Paragraph ab-jumps           "On this page:" in bold, then links to #headings
     Heading H2 ab-h2               a section (orange bar above; makes its own #id)
     Heading H3 ab-h3               a sub-section
     Paragraph  ab-pullquote        a large highlighted sentence
     List       ab-ticklist         ticked list in two columns
     Group      ab-pair             two cards side by side
       Group    (each card)
         Paragraph ab-pair__label   small orange label
         Paragraph                  the text
     Group      ab-myths            myth / fact cards
       Group    ab-myth
         Paragraph ab-myth__claim   the myth
         Paragraph ab-myth__fact    the fact
------------------------------------------------------------------- */

/* Classic themes wrap a Group's contents in an extra div; let the cards
   inside act as if it wasn't there. */
body.ab .ab-jumpbar > .wp-block-group__inner-container,
body.ab .ab-pair > .wp-block-group__inner-container,
body.ab .ab-pair > * > .wp-block-group__inner-container,
body.ab .ab-myths > .wp-block-group__inner-container,
body.ab .ab-myth > .wp-block-group__inner-container { display: contents; }

/* Spacing for headings in a reading column */
body.ab .page-content > h2.ab-h2 { margin: clamp(48px, 6vw, 72px) auto 18px; }
body.ab .page-content > h3.ab-h3 { margin: 32px auto 10px; }

/* "On this page" strip */
body.ab .page-content > .ab-jumpbar {
	max-width: none;
	margin: 0 0 8px;
	padding: 12px var(--ab-gutter);
	background: var(--ab-white);
	border-bottom: 1px solid var(--ab-border);
}
body.ab .ab-jumpbar .ab-jumps {
	max-width: calc(var(--ab-container) - 80px);
	margin: 0 auto;
	padding: 0;
	justify-content: safe center;   /* "safe": if it's ever too long, start at the left so nothing is cut off */
}
body.ab p.ab-jumps strong { margin-right: 6px; font-size: 15px; color: var(--ab-muted); white-space: nowrap; }
body.ab p.ab-jumps a {             /* links in the paragraph look like the pills */
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ab-dur-hover) ease, border-color var(--ab-dur-hover) ease;
}
body.ab p.ab-jumps a:hover { background: var(--ab-sage); border-color: var(--ab-teal); }
body.ab p.ab-jumps a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
/* The section you're reading (set by navigation.js) */
body.ab .ab-jumps a[aria-current="true"],
body.ab .ab-jumps .ab-jump[aria-current="true"] {
	background: var(--ab-teal);
	border-color: var(--ab-teal);
	color: #fff;
}

@media (min-width: 768px) {
	body.ab .page-content > .ab-jumpbar {
		position: sticky;
		top: var(--ab-sticky-top, 76px);   /* just under the site header; set by navigation.js */
		z-index: 40;
	}
	body.ab .ab-jumpbar .ab-jumps {
		flex-wrap: nowrap;                 /* one line; scrolls sideways if it ever must */
		overflow-x: auto;
		scrollbar-width: thin;
	}
	body.ab:has(.ab-jumpbar) .ab-h2[id] { scroll-margin-top: calc(var(--ab-sticky-top, 76px) + 84px); }
}

/* Pull quote */
body.ab .page-content > .ab-pullquote {
	margin: 28px auto 32px;
	padding: 4px 0 4px 22px;
	border-left: 4px solid var(--ab-orange);
	font-family: var(--ab-font-heading);
	font-weight: 500;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.35;
	color: var(--ab-teal);
}

/* Two cards side by side */
body.ab .ab-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
	margin-top: 22px;
	margin-bottom: 26px;
}
body.ab .ab-pair > .wp-block-group,
body.ab .ab-pair > .wp-block-group__inner-container > .wp-block-group {
	margin: 0;
	padding: 20px 22px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-md);
	box-shadow: var(--ab-shadow-soft);
}
body.ab .ab-pair p { margin: 0; font-size: 17px; line-height: 1.55; }
body.ab .ab-pair .ab-pair__label {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ab-orange-dark);
}

/* Myth / fact cards */
body.ab .ab-myths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 16px;
	margin-top: 22px;
	margin-bottom: 26px;
}
body.ab .ab-myths .ab-myth {
	margin: 0;
	padding: 20px 22px 22px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-md);
	box-shadow: var(--ab-shadow-soft);
}
body.ab .ab-myth p { margin: 0; }
body.ab .ab-myth__claim {
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.35;
	color: var(--ab-ink);
}
body.ab .ab-myth__fact { margin-top: 10px !important; font-size: 16px; line-height: 1.55; color: var(--ab-ink); }
body.ab .ab-myth__claim::before,
body.ab .ab-myth__fact::before {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ab-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
body.ab .ab-myth__claim::before { content: "Myth"; color: var(--ab-error); }
body.ab .ab-myth__fact::before  { content: "Fact"; color: var(--ab-teal); }

/* "Back to top" button (added by navigation.js on pages with jump links) */
body.ab .ab-totop {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--ab-radius-pill);
	background: var(--ab-teal);
	color: #fff;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	box-shadow: 0 8px 20px rgba(39, 75, 71, .25);
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
body.ab .ab-totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }
body.ab .ab-totop:hover { background: var(--ab-teal-dark); }
body.ab .ab-totop:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
@media (prefers-reduced-motion: reduce) { body.ab .ab-totop { transition: none; } }

/* A ticked list placed straight in a reading page keeps the column width
   (the general list rule above resets its margins) */
body.ab .page-content > ul.ab-ticklist { margin: 18px auto 22px; padding-inline: var(--ab-gutter); }

/* The pull quote's orange line must sit on the text's left edge, so its box
   is the text width rather than the column-plus-gutters width. */
body.ab .page-content > .ab-pullquote {
	width: min(calc(100% - 2 * var(--ab-gutter)), calc(var(--ab-reading) - 2 * var(--ab-gutter)));
	box-sizing: border-box;
}

/* A document card placed straight in a reading page (e.g. [ab_documents]):
   the same width as the text column */
body.ab .page-content > .ab-docs {
	width: min(calc(100% - 2 * var(--ab-gutter)), calc(var(--ab-reading) - 2 * var(--ab-gutter)));
	max-width: none;
	box-sizing: border-box;
	margin-top: clamp(28px, 4vw, 40px);
}
body.ab .ab-doc .ab-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* [ab_documents] list: each document its own card, like Resources */
body.ab .ab-docs--list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
body.ab .ab-docs--list > .ab-doc,
body.ab .ab-docs--list > .ab-doc:first-child {
	padding: 14px 18px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}


/* ---------- 12. Picture cards (e.g. Assistance Cards) ----------
   Block editor:  Group  ab-assist
                    Image    ab-assist__img
                    Group    ab-assist__body
                      Heading H2  ab-assist__title
                      Paragraph   ab-assist__cost   (optional orange tag, e.g. "Free")
                      Paragraph(s)
                      Paragraph   ab-assist__more   (one link: shows as a button)
------------------------------------------------------------------- */
body.ab .ab-assist > .wp-block-group__inner-container { display: contents; }
body.ab .page-content > .ab-assist {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	width: min(calc(100% - 2 * var(--ab-gutter)), calc(var(--ab-reading) - 2 * var(--ab-gutter)));
	box-sizing: border-box;
	margin: 0 auto 20px;   /* bigger cards, so a bigger gap than the 7px lists */
	padding: 22px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}
body.ab .page-content > p + .ab-assist { margin-top: clamp(28px, 4vw, 40px); }
body.ab .ab-assist__img { margin: 0; }
body.ab .ab-assist__img img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 150px;
	object-fit: contain;
	border-radius: 6px;
}
body.ab .ab-assist__body { margin: 0; }
body.ab .ab-assist__body p { margin: 0 0 .7em; font-size: 17px; line-height: 1.6; }
body.ab .ab-assist__title {
	margin: 0 0 6px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.3;
	color: var(--ab-teal);
}
body.ab .ab-assist__body .ab-assist__cost {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ab-orange-soft);
	color: var(--ab-orange-darker);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}
body.ab .ab-assist__body .ab-assist__more { margin: 12px 0 0; }
body.ab .ab-assist__more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 2px solid var(--ab-teal);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-assist__more a:hover { background: var(--ab-sage); }
body.ab .ab-assist__more a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
@media (max-width: 560px) {      /* phones: picture above the text */
	body.ab .page-content > .ab-assist { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	body.ab .ab-assist__img img { max-width: 180px; }
}

/* Pages written in the block editor (not Elementor):
   - the header band's title and intro line up with the reading column below
   - a little space between the band and the first paragraph
     (except the "On this page" strip, which sits right under the band) */
body.ab .site-main--page:not(:has(.elementor)) .ab-page-header__inner {
	max-width: calc(var(--ab-reading) - 2 * var(--ab-gutter));
}
body.ab .site-main--page:not(:has(.elementor)) .page-content > :first-child:not(.ab-jumpbar) {
	margin-top: clamp(32px, 4vw, 48px);
}

/* Two pictures for one card (e.g. both Thames Valley cards), one above the other */
body.ab .ab-assist__imgs { display: flex; flex-direction: column; gap: 10px; margin: 0; }
body.ab .ab-assist__imgs > .wp-block-group__inner-container { display: contents; }
body.ab .ab-assist__imgs .ab-assist__img { margin: 0; }


/* ---------- 13. Download tiles (e.g. Neurodiversity Passports) ----------
   Block editor:  Group ab-tiles
                    Group ab-tile        (one per download)
                      Image     ab-tile__img
                      Heading   ab-tile__title
                      Paragraph ab-tile__more   (one link, shown as a button)
   And:           Paragraph ab-tip       (a highlighted tip)
------------------------------------------------------------------- */
body.ab .ab-tiles > .wp-block-group__inner-container,
body.ab .ab-tile > .wp-block-group__inner-container { display: contents; }
body.ab .page-content > .ab-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 20px;
	width: min(calc(100% - 2 * var(--ab-gutter)), calc(var(--ab-reading) - 2 * var(--ab-gutter)));
	box-sizing: border-box;
	margin: clamp(28px, 4vw, 40px) auto;
	padding: 0;
}
body.ab .ab-tile {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 18px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}
body.ab .ab-tile__img {
	margin: 0 0 14px;
	padding: 14px;
	background: var(--ab-sage);
	border-radius: 6px;
	text-align: center;
}
body.ab .ab-tile__img img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: 200px;
	object-fit: contain;
	box-shadow: 0 4px 14px rgba(39, 75, 71, .15);
}
body.ab .ab-tile__title {
	margin: 0 0 12px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	color: var(--ab-teal);
}
body.ab .ab-tile .ab-tile__more { margin: auto 0 0; }
body.ab .ab-tile__more a {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding: 9px 16px;
	border: 2px solid var(--ab-teal);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-tile__more a:hover { background: var(--ab-sage); }
body.ab .ab-tile__more a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
body.ab .ab-tile__meta { font-family: var(--ab-font-body); font-weight: 400; font-size: 14px; color: var(--ab-muted); }

body.ab .page-content > .ab-tip {
	width: min(calc(100% - 2 * var(--ab-gutter)), calc(var(--ab-reading) - 2 * var(--ab-gutter)));
	box-sizing: border-box;
	padding: 16px 20px;
	background: var(--ab-orange-wash);
	border-left: 4px solid var(--ab-orange);
	border-radius: 6px;
}

/* Sub-section headings that are H2s in the page outline but look like H3s
   (e.g. the Privacy Policy) */
body.ab .page-content > h2.ab-h3 { margin: 36px auto 10px; }

/* Ordinary bulleted / numbered lists in a reading page: bullets sit inside
   the text column, with the words indented a little after them */
body.ab .page-content > ul:not(.ab-ticklist),
body.ab .page-content > ol {
	padding-left: calc(var(--ab-gutter) + 1.5em);
	padding-right: var(--ab-gutter);
}
body.ab .page-content > ul:not(.ab-ticklist) li,
body.ab .page-content > ol li { margin-bottom: .35em; padding-left: .25em; }


/* ---------- 14. Articles listing (home.php / archive.php) ---------- */
body.ab .site-main--listing { padding-top: 0; }
body.ab .ab-listing {
	max-width: calc(var(--ab-container) - 80px);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 40px) var(--ab-gutter) clamp(48px, 6vw, 72px);
	box-sizing: content-box;
}
body.ab .ab-listing__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
}
body.ab .ab-listing__topics a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 20px;
	border: 2px solid var(--ab-teal);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	transition: box-shadow .2s ease;
}
body.ab .ab-listing__topics a:hover { box-shadow: 0 0 0 3px #FFD3AE; }
body.ab .ab-listing__topics a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
body.ab .ab-listing__topics a[aria-current="page"] { background: var(--ab-orange-dark); border-color: var(--ab-orange-dark); color: #fff; }

/* Page numbers */
body.ab .ab-listing .pagination { margin-top: 40px; }
body.ab .ab-listing .nav-links { justify-content: center; gap: 8px; }
body.ab .ab-listing .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
body.ab .ab-listing a.page-numbers:hover { background: var(--ab-sage); }
body.ab .ab-listing .page-numbers.current { background: var(--ab-teal); border-color: var(--ab-teal); color: #fff; }
body.ab .ab-listing .page-numbers.dots { border: 0; background: none; min-width: 0; }
body.ab .ab-listing__none { font-size: 18px; }


/* ---------- 15. Single article (single.php) ----------
   The frame:  header band (title, topic · date · reading time)
               featured picture, the article text, topic pills,
               comments, then "More … articles" cards.
   The content: tidies whatever is inside, block editor or Elementor,
               so old articles sit in the same reading column.
------------------------------------------------------------------- */
body.ab .site-main--post { padding: 0; }
body.ab .ab-post__header .ab-page-header__inner {
	max-width: calc(var(--ab-reading) - 2 * var(--ab-gutter));
}
body.ab .ab-post__header .ab-page-header__title { font-size: clamp(32px, 4.4vw, 48px); }
body.ab .ab-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 16px 0 0;
	font-size: 16px;
	color: var(--ab-muted);
}
body.ab .ab-post__topic {
	color: var(--ab-orange-dark);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
body.ab .ab-post__topic:hover { text-decoration: underline; }

body.ab .ab-post__body {
	max-width: var(--ab-reading);
	margin: 0 auto;
	padding: clamp(28px, 3.5vw, 40px) var(--ab-gutter) clamp(48px, 6vw, 72px);
	box-sizing: border-box;
}
body.ab .ab-post__hero { margin: 0 0 clamp(28px, 4vw, 40px); }
body.ab .ab-post__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}

/* --- The article text --- */
body.ab .ab-post__content { font-size: var(--ab-text-base); line-height: 1.65; color: var(--ab-ink); }
body.ab .ab-post__content > :first-child { margin-top: 0; }
body.ab .ab-post__content p { margin: 0 0 1.1em; }
body.ab .ab-post__content p.ab-lead,
body.ab .ab-post__content > p:first-child:not(:has(img)) {
	font-size: clamp(19px, 1.7vw, 21px);
	line-height: 1.55;
	color: var(--ab-teal);
}
body.ab .ab-post__content h2,
body.ab .ab-post__content h3,
body.ab .ab-post__content h4 {
	font-family: var(--ab-font-heading);
	font-weight: 600;
	color: var(--ab-teal);
	line-height: 1.25;
	margin: 1.8em 0 .5em;
}
body.ab .ab-post__content h2 { font-size: clamp(24px, 2.6vw, 30px); }
body.ab .ab-post__content h3 { font-size: clamp(20px, 2vw, 23px); }
body.ab .ab-post__content h4 { font-size: 19px; }
/* The page header already shows the title: hide a repeated one in the text */
body.ab .ab-post__content h1,
body.ab .ab-post__content .elementor-widget-heading:has(h1) { display: none; }
body.ab .ab-post__content .e-con.e-parent:has(.elementor-widget-heading h1):not(:has(.elementor-widget-text-editor, .elementor-widget-image, .elementor-widget-image-gallery, .elementor-widget-video, .elementor-widget-button, .elementor-widget-icon, .elementor-widget-shortcode)) { display: none; }
body.ab .ab-post__content a:not([class]) { color: var(--ab-teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.ab .ab-post__content a:not([class]):hover { color: var(--ab-orange-dark); }
body.ab .ab-post__content ul,
body.ab .ab-post__content ol { margin: 0 0 1.2em; padding-left: 1.5em; }
body.ab .ab-post__content li { margin-bottom: .35em; padding-left: .25em; }

/* Pictures: never wider than the column, softly rounded */
body.ab .ab-post__content img { max-width: 100%; height: auto; border-radius: 6px; }
body.ab .ab-post__content figure { margin: 28px 0; max-width: 100%; }
body.ab .ab-post__content figure.wp-block-gallery figure { margin: 0; }
body.ab .ab-post__content figcaption,
body.ab .ab-post__content .wp-caption-text,
body.ab .ab-post__content .widget-image-caption {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ab-muted);
	text-align: center;
}
body.ab .ab-post__content .wp-block-image.aligncenter img,
body.ab .ab-post__content .aligncenter { margin-inline: auto; }

/* Quotes */
body.ab .ab-post__content blockquote,
body.ab .ab-post__content .wp-block-quote {
	margin: 32px 0;
	padding: 4px 0 4px 22px;
	border-left: 4px solid var(--ab-orange);
	font-size: clamp(19px, 1.7vw, 21px);
	color: var(--ab-teal);
}
body.ab .ab-post__content blockquote p:last-child { margin-bottom: 0; }
body.ab .ab-post__content blockquote cite { display: block; margin-top: 8px; font-size: 15px; font-style: normal; color: var(--ab-muted); }

/* Old layouts: tame big spacers, keep columns tidy, stack on phones */
body.ab .ab-post__content .wp-block-spacer { max-height: 24px; }
body.ab .ab-post__content .wp-block-columns { gap: 24px; margin: 28px 0; }
body.ab .ab-post__content .wp-block-column > :last-child { margin-bottom: 0; }
body.ab .ab-post__content .wp-block-column figure { margin: 0 0 16px; }
/* Text beside a picture is cramped in a reading column: stack them.
   (Columns holding only pictures stay side by side.) */
body.ab .ab-post__content .wp-block-columns:has(> .wp-block-column > :is(p, ul, ol, h2, h3)) { display: block; }
body.ab .ab-post__content .wp-block-columns:has(> .wp-block-column > :is(p, ul, ol, h2, h3)) > .wp-block-column { width: 100%; flex-basis: auto; margin: 0 0 1.1em; }
body.ab .ab-post__content hr,
body.ab .ab-post__content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ab-sage-border);
	margin: 36px 0;
}

/* Photo galleries: a neat square grid (block editor and Elementor) */
body.ab .ab-post__content .wp-block-gallery.has-nested-images { gap: 8px; margin: 28px 0; }
body.ab .ab-post__content .wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 6px; }
body.ab .ab-post__content .gallery {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
	gap: 8px;
	margin: 28px 0;
}
body.ab .ab-post__content .gallery br { display: none; }
body.ab .ab-post__content .gallery .gallery-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.ab .ab-post__content .gallery .gallery-icon a { display: block; border-radius: 6px; overflow: hidden; }
body.ab .ab-post__content .gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 0 !important;
	border-radius: 6px;
	transition: transform var(--ab-dur-hover) var(--ab-ease-out);
}
body.ab .ab-post__content .gallery a:hover img { transform: scale(1.04); }
body.ab .ab-post__content .gallery a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }

/* Elementor-built articles: let them fill the reading column */
body.ab .ab-post__content .elementor .e-con {
	--container-max-width: 100%;
	--content-width: 100%;
}
body.ab .ab-post__content .elementor > .e-con.e-parent {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}
body.ab .ab-post__content .elementor-section .elementor-container { max-width: 100%; }
body.ab .ab-post__content .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0; }
body.ab .ab-post__content .elementor-widget-text-editor,
body.ab .ab-post__content .elementor-widget-text-editor p {
	font-family: var(--ab-font-body);
	font-size: var(--ab-text-base);
	line-height: 1.65;
	color: var(--ab-ink);
}
body.ab .ab-post__content .elementor-heading-title {
	font-family: var(--ab-font-heading);
	color: var(--ab-teal);
}
body.ab .ab-post__content .elementor-widget-divider { --divider-color: var(--ab-sage-border); }
body.ab .ab-post__content .elementor-widget:not(:last-child) { margin-block-end: 16px; }
/* Some old widgets were narrowed with side margins: use the full column */
body.ab .ab-post__content .elementor-widget,
body.ab .ab-post__content .elementor-widget > .elementor-widget-container {
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* --- Below the article --- */
body.ab .ab-post__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: clamp(36px, 5vw, 56px);
	padding-top: 24px;
	border-top: 1px solid var(--ab-sage-border);
}
body.ab .ab-post__topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
body.ab .ab-post__topics-label { font-size: 15px; color: var(--ab-muted); margin-right: 2px; }
body.ab .ab-post__topics a,
body.ab .ab-post__back {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 16px;
	box-sizing: border-box;
	border: 1px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-post__topics a:hover,
body.ab .ab-post__back:hover { background: var(--ab-sage); }
body.ab .ab-post__topics a:focus-visible,
body.ab .ab-post__back:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }

/* More … articles */
body.ab .ab-post__related {
	background: var(--ab-white);
	border-top: 1px solid var(--ab-border);
	padding: clamp(40px, 6vw, 64px) var(--ab-gutter) clamp(48px, 6vw, 72px);
}
body.ab .ab-post__related-inner { max-width: calc(var(--ab-container) - 80px); margin: 0 auto; }
@media (min-width: 900px) {
	body.ab .ab-post__related .ab-articles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.ab .ab-post__related-title {
	margin: 0 0 24px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: clamp(24px, 2.6vw, 30px);
	color: var(--ab-teal);
}

/* --- Comments --- */
body.ab .ab-comments { margin-top: clamp(40px, 5vw, 56px); }
body.ab .ab-comments__title {
	margin: 0 0 12px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: clamp(22px, 2.2vw, 26px);
	color: var(--ab-teal);
}
body.ab .ab-comments__title small { display: block; margin-top: 6px; font-size: 15px; font-weight: 400; }
body.ab .ab-comments__list,
body.ab .ab-comments__list .children { list-style: none; margin: 0; padding: 0; }
body.ab .ab-comments__list { margin-bottom: 40px; }
body.ab .ab-comments__list .children { margin-left: clamp(16px, 4vw, 40px); }
body.ab .ab-comments__list .comment-body {
	margin: 0 0 12px;
	padding: 16px 20px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}
body.ab .ab-comments__list .comment-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; font-size: 15px; }
body.ab .ab-comments__list .comment-author { font-family: var(--ab-font-heading); font-weight: 600; color: var(--ab-teal); }
body.ab .ab-comments__list .comment-author .says { display: none; }
body.ab .ab-comments__list .comment-metadata a { color: var(--ab-muted); text-decoration: none; }
body.ab .ab-comments__list .comment-awaiting-moderation { display: block; margin-top: 6px; color: var(--ab-orange-dark); font-size: 15px; }
body.ab .ab-comments__list .comment-content p { margin: 0 0 .7em; }
body.ab .ab-comments__list .reply a { font-size: 15px; font-weight: 600; color: var(--ab-teal); }
body.ab .ab-comments__note { margin: 0 0 18px; font-size: 16px; color: var(--ab-muted); }
body.ab .ab-comments__respond .comment-form p { margin: 0 0 16px; }
body.ab .ab-comments__respond label { display: block; margin-bottom: 6px; font-weight: 700; }
body.ab .ab-comments__respond .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
body.ab .ab-comments__respond .comment-form-cookies-consent label { font-weight: 400; margin: 0; }
body.ab .ab-comments__respond input[type="text"],
body.ab .ab-comments__respond input[type="email"],
body.ab .ab-comments__respond textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--ab-field-border);
	border-radius: 6px;
	background: var(--ab-white);
	font: inherit;
}
body.ab .ab-comments__respond textarea { min-height: 150px; }
body.ab .ab-comments__respond input:focus-visible,
body.ab .ab-comments__respond textarea:focus-visible { outline: none; border-color: var(--ab-orange-dark); box-shadow: var(--ab-focus-ring); }
body.ab .ab-comments__respond .required { color: var(--ab-error); }
body.ab .ab-comments__submit {
	min-height: 48px;
	padding: 10px 28px;
	border: 0;
	border-radius: var(--ab-radius-pill);
	background: var(--ab-orange-dark);
	color: #fff;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-comments__submit:hover { background: var(--ab-orange-darker); }
body.ab .ab-comments__submit:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
body.ab #cancel-comment-reply-link { margin-left: 12px; font-size: 15px; font-weight: 400; }


/* ---------- 16. Article building blocks (block editor) ----------
   For articles and guides. In the block editor, add the class under
   Block → Advanced → Additional CSS class(es).

   Paragraph  ab-lead            the opening sentence, a little larger
   Group      ab-callout         a boxed panel (put a Heading + text in it)
   Group      ab-callout ab-callout--warn   the same, for warnings
   Group      ab-stats           figures side by side; inside it, one
                                 Group ab-stat per figure holding
                                 Paragraph ab-stat__num + Paragraph
   List       ab-terms           short terms in a grid of small cards:
                                 each item "<strong>Term</strong><br>meaning"
   Group      ab-steps           numbered steps; inside it, one Group
                                 ab-step per step (Heading 3 + text)
   List       ab-links           a list of useful links, one per line
   List       ab-abbr            abbreviations, in two columns
   Paragraph  ab-post-more       a single link shown as a button
   Paragraph  ab-post-note       a small note at the end of an article
   Image      Align left/right   floats beside the text (stacks on phones)
------------------------------------------------------------------- */
body.ab .ab-post__content :is(.ab-callout, .ab-stats, .ab-stat, .ab-steps, .ab-step) > .wp-block-group__inner-container { display: contents; }

/* Boxed panel */
body.ab .ab-post__content .ab-callout {
	margin: 28px 0;
	padding: clamp(18px, 3vw, 26px);
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}
body.ab .ab-post__content .ab-callout > :first-child,
body.ab .ab-post__content .ab-callout > .wp-block-group__inner-container > :first-child { margin-top: 0; }
body.ab .ab-post__content .ab-callout > :last-child,
body.ab .ab-post__content .ab-callout > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
body.ab .ab-post__content .ab-callout h3 { margin: 0 0 .5em; }
body.ab .ab-post__content .ab-callout--warn {
	background: var(--ab-orange-wash);
	border-color: #F5D3B5;
	border-left: 4px solid var(--ab-orange-dark);
}
body.ab .ab-post__content .ab-callout--warn h3 { color: var(--ab-orange-darker); }
body.ab .ab-post__content .ab-callout--warn h3::before { content: "⚠ "; }

/* Figures side by side */
body.ab .ab-post__content .ab-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 16px;
	margin: 24px 0 32px;
}
body.ab .ab-post__content .ab-stat {
	padding: 20px;
	background: var(--ab-sage);
	border-radius: 6px;
	text-align: center;
}
body.ab .ab-post__content .ab-stat p { margin: 0; }
body.ab .ab-post__content .ab-stat .ab-stat__num {
	font-family: var(--ab-font-heading);
	font-weight: 700;
	font-size: clamp(36px, 5vw, 48px);
	line-height: 1.1;
	color: var(--ab-orange-dark);
}
body.ab .ab-post__content .ab-stat p + p { margin-top: 6px; }

/* Short terms in a grid */
body.ab .ab-post__content ul.ab-terms {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px;
	margin: 20px 0 28px;
	padding: 0;
}
body.ab .ab-post__content ul.ab-terms li {
	margin: 0;
	padding: 14px 18px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	line-height: 1.45;
}
body.ab .ab-post__content ul.ab-terms strong { font-family: var(--ab-font-heading); font-weight: 600; color: var(--ab-teal); }

/* Numbered steps */
body.ab .ab-post__content .ab-steps { counter-reset: ab-step; margin: 24px 0 32px; }
body.ab .ab-post__content .ab-step {
	position: relative;
	counter-increment: ab-step;
	padding: 0 0 22px 60px;
	margin: 0 0 22px;
	border-bottom: 1px solid var(--ab-sage-border);
}
body.ab .ab-post__content .ab-step:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
body.ab .ab-post__content .ab-step::before {
	content: counter(ab-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ab-teal);
	color: #fff;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 18px;
}
body.ab .ab-post__content .ab-step h3 { margin: 6px 0 .4em; }
body.ab .ab-post__content .ab-step p:last-child { margin-bottom: 0; }

/* Useful links */
body.ab .ab-post__content ul.ab-links { list-style: none; margin: 20px 0 28px; padding: 0; display: grid; gap: 7px; }
body.ab .ab-post__content ul.ab-links li {
	margin: 0;
	padding: 14px 18px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	color: var(--ab-muted);
	font-size: 16px;
	line-height: 1.45;
}
body.ab .ab-post__content ul.ab-links li a {
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 17px;
	color: var(--ab-teal);
	text-decoration: none;
}
body.ab .ab-post__content ul.ab-links li a:hover { text-decoration: underline; }

/* A single link as a button */
body.ab .ab-post__content p.ab-post-more a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 22px;
	box-sizing: border-box;
	border-radius: var(--ab-radius-pill);
	background: var(--ab-teal);
	color: #fff;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-post__content p.ab-post-more a:hover { background: var(--ab-teal-dark); color: #fff; }
body.ab .ab-post__content p.ab-post-more a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }

/* A small closing note */
body.ab .ab-post__content p.ab-post-note {
	margin-top: 36px;
	padding-top: 18px;
	border-top: 1px solid var(--ab-sage-border);
	font-size: 16px;
	color: var(--ab-muted);
}

/* Pictures beside the text */
@media (min-width: 600px) {
	body.ab .ab-post__content figure.alignright { float: right; width: 42%; margin: 6px 0 16px 28px; }
	body.ab .ab-post__content figure.alignleft  { float: left;  width: 42%; margin: 6px 28px 16px 0; }
	body.ab .ab-post__content figure.alignright img,
	body.ab .ab-post__content figure.alignleft img { width: 100%; }
}
body.ab .ab-post__content h2,
body.ab .ab-post__content .ab-callout,
body.ab .ab-post__content .ab-post-note,
body.ab .ab-post__content .clear { clear: both; }
body.ab .ab-post__content::after { content: ""; display: block; clear: both; }

/* Videos in articles */
body.ab .ab-post__content .ab-video { margin: 28px 0; }
body.ab .ab-post__content .ab-video__frame { border-radius: 6px; }

/* Abbreviations (List ab-abbr): "<strong>ADHD</strong> – meaning", in two columns */
body.ab .ab-post__content ul.ab-abbr { list-style: none; margin: 16px 0 28px; padding: 0; columns: 2 260px; column-gap: 32px; }
body.ab .ab-post__content ul.ab-abbr li { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); margin: 0 0 6px; padding: 0; break-inside: avoid; font-size: 16px; line-height: 1.45; }
body.ab .ab-post__content ul.ab-abbr strong { color: var(--ab-teal); font-family: var(--ab-font-heading); font-weight: 600; }

/* Gallery captions sit under each picture (not over it) */
body.ab .ab-post__content .wp-block-gallery.has-nested-images figure.wp-block-image { flex-direction: column; justify-content: flex-start; }
body.ab .ab-post__content .wp-block-gallery.has-nested-images figure.wp-block-image::before { display: none; }
body.ab .ab-post__content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	overflow: visible;
	padding: 8px 0 0;
	background: none;
	color: var(--ab-muted);
	font-size: 15px;
	text-shadow: none;
}
body.ab .ab-post__content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption a { color: var(--ab-teal); }


/* ---------- 17. Join pages (New Member) ----------
   Block editor:
     Paragraph ab-lead          short welcome
     Group ab-keyfacts          three small fact cards; inside, one
       Group ab-keyfact           per fact: Paragraph ab-keyfact__label + Paragraph
     Group ab-form-card         white card holding the form (Shortcode block)
     Details ab-more            fold-out panels for the longer information
------------------------------------------------------------------- */
body.ab .page-content > p.ab-lead {
	font-size: clamp(19px, 1.8vw, 22px);
	line-height: 1.55;
	color: var(--ab-teal);
}
body.ab :is(.ab-keyfacts, .ab-keyfact, .ab-form-card) > .wp-block-group__inner-container { display: contents; }
body.ab .page-content > .ab-keyfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px;
	width: min(calc(100% - 2 * var(--ab-gutter)), calc(var(--ab-reading) - 2 * var(--ab-gutter)));
	box-sizing: border-box;
	margin: 24px auto 8px;
	padding: 0;
}
body.ab .ab-keyfact {
	padding: 16px 18px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
	font-size: 16px;
	line-height: 1.45;
}
body.ab .ab-keyfact p { margin: 0; }
body.ab .ab-keyfact .ab-keyfact__label {
	margin-bottom: 6px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ab-orange-dark);
}

/* The form in a white card */
body.ab .page-content > .ab-form-card {
	width: min(calc(100% - 2 * var(--ab-gutter)), calc(var(--ab-reading) - 2 * var(--ab-gutter)));
	box-sizing: border-box;
	margin: 20px auto 20px;
	padding: clamp(20px, 3.5vw, 32px);
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}
/* Optional fields say so (required ones carry no mark, as on the Contact form) */
body.ab .ab-form-card .wpforms-field:not(:has(.wpforms-field-required)) > .wpforms-field-label::after {
	content: " (optional)";
	font-weight: 400;
	color: var(--ab-muted);
}
/* Tick boxes: no bullets, a proper-sized box, comfortable spacing */
body.ab .ab-form-card .wpforms-field-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
body.ab .ab-form-card .wpforms-field-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
}
body.ab .ab-form-card .wpforms-field-checkbox input[type="checkbox"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--ab-teal);
	cursor: pointer;
}
body.ab .ab-form-card .wpforms-field-checkbox li label {
	font-weight: 400;
	font-size: 17px;
	line-height: 1.4;
	cursor: pointer;
}
/* The consent statement: normal-weight text in a soft panel, tick box underneath */
body.ab .ab-form-card #wpforms-13100-field_13-container,
body.ab .ab-form-card #wpforms-13115-field_13-container,
body.ab .ab-form-card #wpforms-13115-field_12-container {
	padding: 16px 18px;
	background: var(--ab-sage);
	border-radius: 6px;
}
body.ab .ab-form-card #wpforms-13100-field_13-container > .wpforms-field-label,
body.ab .ab-form-card #wpforms-13100-field_13-container legend,
body.ab .ab-form-card #wpforms-13115-field_12-container legend,
body.ab .ab-form-card #wpforms-13115-field_13-container legend {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	margin-bottom: 12px;
}
body.ab .ab-form-card :is(#wpforms-13100-field_13-container, #wpforms-13115-field_12-container, #wpforms-13115-field_13-container) li label { font-weight: 700; }
body.ab .ab-form-card .wpforms-confirmation-container-full,
body.ab .ab-form-card .wpforms-confirmation-container {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ab-ink);
}

/* Fold-out panels */
body.ab .page-content > .wp-block-details.ab-more {
	width: min(calc(100% - 2 * var(--ab-gutter)), calc(var(--ab-reading) - 2 * var(--ab-gutter)));
	box-sizing: border-box;
	margin: 0 auto 7px;
	padding: 0;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
}
body.ab .ab-more > summary {
	position: relative;
	list-style: none;
	padding: 16px 52px 16px 20px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 18px;
	color: var(--ab-teal);
	cursor: pointer;
	border-radius: 6px;
}
body.ab .ab-more > summary::-webkit-details-marker { display: none; }
body.ab .ab-more > summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ab-sage);
	font-size: 20px;
	line-height: 1;
}
body.ab .ab-more[open] > summary::after { content: "−"; }
body.ab .ab-more > summary:hover { background: var(--ab-cream); }
body.ab .ab-more > summary:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
body.ab .ab-more > :not(summary) { margin-left: 20px; margin-right: 20px; }
body.ab .ab-more > summary + * { margin-top: 4px; }
body.ab .ab-more > :last-child { margin-bottom: 20px; }
body.ab .ab-more h3 { font-family: var(--ab-font-heading); font-size: 19px; color: var(--ab-teal); margin: 20px 20px 8px; }
body.ab .ab-more ul.ab-ticklist { columns: 1; }
body.ab .ab-more blockquote {
	margin: 16px 20px;
	padding: 2px 0 2px 18px;
	border-left: 4px solid var(--ab-orange);
	color: var(--ab-teal);
	font-style: italic;
}
body.ab .ab-more blockquote p { margin: 0; }
body.ab .page-content > .ab-more + :not(.ab-more) { margin-top: 32px; }
body.ab .page-content > .ab-keyfacts + h2.ab-h2 { margin-top: clamp(36px, 4vw, 48px); }
body.ab .ab-keyfact strong { color: var(--ab-teal); }
/* A hint such as "Tick all that apply" sits under the question, before the options */
body.ab .ab-form-card .wpforms-field-checkbox fieldset { display: flex; flex-direction: column; }
body.ab .ab-form-card .wpforms-field-checkbox legend { order: -2; }
body.ab .ab-form-card .wpforms-field-checkbox .wpforms-field-description {
	order: -1;
	margin: -2px 0 12px;
	font-size: 15px;
	color: var(--ab-muted);
}
/* Radio choices (e.g. Yes / No / Sometimes): the same tidy look as tick boxes, side by side */
body.ab .ab-form-card .wpforms-field-radio ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}
body.ab .ab-form-card .wpforms-field-radio li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; }
body.ab .ab-form-card .wpforms-field-radio input[type="radio"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--ab-teal);
	cursor: pointer;
}
body.ab .ab-form-card .wpforms-field-radio li label { font-weight: 400; font-size: 17px; cursor: pointer; }
body.ab .ab-form-card :is(.wpforms-field-radio, .wpforms-field-textarea) > .wpforms-field-label,
body.ab .ab-form-card .wpforms-field-radio legend { line-height: 1.45; }
body.ab .ab-form-card .wpforms-field:not(:has(.wpforms-field-required)) legend.wpforms-field-label::after {
	content: " (optional)";
	font-weight: 400;
	color: var(--ab-muted);
}
/* Ticked lists in fold-out panels: the same space below as above (one paragraph gap) */
body.ab .ab-more > ul.ab-ticklist { margin-bottom: 1.2em; }
body.ab .ab-more > ul.ab-ticklist > li:last-child { margin-bottom: 0; }


/* ---------- 18. Ways to give (Donations) ----------
   Block editor:  Group ab-give
                    Group ab-give__card   (one per way of giving)
                      Image ab-give__logo  (optional logo)
                      Heading 3
                      Paragraph           (a sentence or two)
                      Paragraph ab-give__btn   (one link, shown as a button)
------------------------------------------------------------------- */
body.ab :is(.ab-give, .ab-give__card) > .wp-block-group__inner-container { display: contents; }
body.ab .page-content > .ab-give {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 14px;
	width: min(calc(100% - 2 * var(--ab-gutter)), calc(var(--ab-reading) - 2 * var(--ab-gutter)));
	box-sizing: border-box;
	margin: 20px auto 24px;
	padding: 0;
}
body.ab .ab-give__card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-top: 4px solid var(--ab-orange);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}
body.ab .ab-give__card h3 {
	margin: 0 0 8px;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	color: var(--ab-teal);
}
body.ab .ab-give__card p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
body.ab .ab-give__card p.ab-give__btn { margin: auto 0 0; }
body.ab .ab-give__btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	padding: 8px 16px;
	box-sizing: border-box;
	border-radius: var(--ab-radius-pill);
	background: var(--ab-orange-dark);
	color: #fff;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-give__btn a:hover { background: var(--ab-orange-darker); color: #fff; }
body.ab .ab-give__btn a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }

/* A plain link shown as a quieter (outline) button, e.g. "Volunteer with us" */
body.ab .page-content > p.ab-btn-links { display: flex; flex-wrap: wrap; gap: 10px; }
body.ab .page-content > p.ab-btn-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 20px;
	box-sizing: border-box;
	border: 1px solid var(--ab-teal);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .page-content > p.ab-btn-links a:hover { background: var(--ab-sage); }
body.ab .page-content > p.ab-btn-links a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
/* The organisation's logo at the top of each card, all the same height */
body.ab .ab-give__card figure.ab-give__logo { margin: 0 0 14px; height: 56px; display: flex; align-items: center; }
body.ab .ab-give__card figure.ab-give__logo img { max-height: 56px; max-width: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; }
body.ab .ab-give__card figure.ab-give__logo { justify-content: center; }


/* ---------- 19. Search results and "not found" (search.php, 404.php) ---------- */
body.ab .site-main--search { padding: 0; }
body.ab .site-main--search .ab-page-header__inner { max-width: calc(var(--ab-reading) - 2 * var(--ab-gutter)); }

/* The search box: a pill with a button */
body.ab .ab-search { display: flex; gap: 8px; margin: 22px 0 0; max-width: 560px; }
body.ab .ab-search input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 50px;
	box-sizing: border-box;
	padding: 10px 18px 10px 44px;
	border: 1px solid var(--ab-field-border);
	border-radius: var(--ab-radius-pill);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23274B47' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 16px 50% / 18px no-repeat;
	font: inherit;
	font-size: 17px;
}
body.ab .ab-search input[type="search"]:focus-visible { outline: none; border-color: var(--ab-orange-dark); box-shadow: var(--ab-focus-ring); }
body.ab .ab-search button {
	min-height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--ab-radius-pill);
	background: var(--ab-teal);
	color: #fff;
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-search button:hover { background: var(--ab-teal-dark); }
body.ab .ab-search button:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }

/* Results */
body.ab .ab-results {
	max-width: var(--ab-reading);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 40px) var(--ab-gutter) clamp(48px, 6vw, 72px);
	box-sizing: border-box;
}
body.ab .ab-results__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
body.ab .ab-result { margin: 0; }
body.ab .ab-result__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	color: var(--ab-ink);
	text-decoration: none;
	transition: border-color var(--ab-dur-hover) ease, background-color var(--ab-dur-hover) ease;
}
body.ab .ab-result__link:hover { border-color: #F3B98A; background: #FFFBF7; }
body.ab .ab-result__link:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
body.ab .ab-result__label {
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ab-orange-dark);
}
body.ab .ab-result__title { font-family: var(--ab-font-heading); font-weight: 600; font-size: 19px; line-height: 1.35; color: var(--ab-teal); }
body.ab .ab-result__extract { font-size: 16px; line-height: 1.55; color: var(--ab-muted); }
body.ab .ab-results .pagination { margin-top: 32px; }
body.ab .ab-results .nav-links { justify-content: center; gap: 8px; }
body.ab .ab-results .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
body.ab .ab-results .page-numbers.current { background: var(--ab-teal); border-color: var(--ab-teal); color: #fff; }
body.ab .ab-results__none p { font-size: 18px; }

/* Quick links (no results, and the "not found" page) */
body.ab .ab-results__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
body.ab .ab-results__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 20px;
	box-sizing: border-box;
	border: 1px solid var(--ab-sage-border);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-results__links a:hover { background: var(--ab-sage); }
body.ab .ab-results__links a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }


/* ---------- 20. Members' portal (Admin – Control Centre and its pages) ---------- */
/* Control Centre: one card per table, each with Add and Edit buttons */
body.ab .page-content > .ab-portal { max-width: calc(1040px - 2 * var(--ab-gutter)); }
/* (classic themes wrap a Group's blocks in an inner container, so the grid goes on that) */
body.ab .ab-portal > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}
body.ab .ab-portal__card {
	margin: 0;
	padding: 22px 24px 24px;
	border: 1px solid var(--ab-sage-border);
	border-radius: 16px;
	background: var(--ab-white);
}
body.ab .ab-portal__card h2 { margin: 0 0 14px; font-size: 24px; }
body.ab .ab-portal__card p { margin: 0; }
body.ab .ab-portal__card .ab-portal__btns { display: flex; flex-wrap: wrap; gap: 10px; }
body.ab .ab-portal__btns a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 20px;
	box-sizing: border-box;
	border: 1px solid var(--ab-teal);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-portal__btns a:first-child { background: var(--ab-orange-dark); border-color: var(--ab-orange-dark); color: #fff; }
body.ab .ab-portal__btns a:hover { background: var(--ab-sage); }
body.ab .ab-portal__btns a:first-child:hover { background: var(--ab-orange-darker); color: #fff; }
body.ab .ab-portal__btns a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }

/* Each form page: "← Control Centre", then the form (at the normal reading width) */
body.ab .page-content > .ab-portal-back { margin-bottom: 8px; }
body.ab .page-content > .ab-portal-back a { font-family: var(--ab-font-heading); font-weight: 600; color: var(--ab-teal); }

/* The password box */
body.ab .post-password-form { max-width: 460px; }
body.ab .post-password-form input[type="password"] {
	display: block; width: 100%; min-height: 48px; margin-top: 6px; box-sizing: border-box;
	padding: 10px 14px; border: 1px solid var(--ab-field-border); border-radius: 10px; font: inherit;
}
body.ab .post-password-form input[type="submit"] {
	margin-top: 12px; min-height: 46px; padding: 8px 26px; border: 0; border-radius: var(--ab-radius-pill);
	background: var(--ab-orange-dark); color: #fff; font-family: var(--ab-font-heading); font-weight: 600; font-size: 16px; cursor: pointer;
}
body.ab .post-password-form input[type="submit"]:hover { background: var(--ab-orange-darker); }

/* The forms inside each portal page (they come from WPCode snippets, so they are styled from here) */
body.ab .ab-portal-tool form:not(td form) { max-width: 760px; }
body.ab .ab-portal-tool form:not(td form) > div,
body.ab .ab-portal-tool form:not(td form) > p { margin: 0 0 20px; }
body.ab .ab-portal-tool label:not(:has(input[type="radio"], input[type="checkbox"])) {
	display: block; margin: 0 0 6px;
	font-family: var(--ab-font-heading); font-weight: 600; font-size: 16px; color: var(--ab-teal);
}
body.ab .ab-portal-tool p > b,
body.ab .ab-portal-tool p > strong { font-family: var(--ab-font-heading); font-weight: 600; color: var(--ab-teal); }
body.ab .ab-portal-tool :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], select, textarea) {
	display: block; width: 100% !important; min-height: 48px; box-sizing: border-box;
	padding: 10px 14px; border: 1px solid var(--ab-field-border); border-radius: 10px;
	background: #fff !important; font: inherit; font-size: 16px; color: inherit;
}
body.ab .ab-portal-tool textarea { min-height: 150px !important; resize: vertical; }
body.ab .ab-portal-tool :is(input, select, textarea):focus-visible { outline: none; border-color: var(--ab-teal); box-shadow: var(--ab-focus-ring); }
body.ab .ab-portal-tool input[type="file"] { font: inherit; font-size: 15px; }
/* Radio buttons and tick boxes: one per line, label beside */
body.ab .ab-portal-tool label:has(input[type="radio"], input[type="checkbox"]) {
	display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: 16px; cursor: pointer;
}
body.ab .ab-portal-tool :is(input[type="radio"], input[type="checkbox"]) { width: 20px; height: 20px; margin: 0; accent-color: var(--ab-teal); }
/* Submit / Save buttons (not the small Edit | Delete ones in the tables) */
body.ab .ab-portal-tool :is(input[type="submit"], button):not(td *) {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 28px;
	border: 0; border-radius: var(--ab-radius-pill); background: var(--ab-orange-dark); color: #fff;
	font-family: var(--ab-font-heading); font-weight: 600; font-size: 16px; cursor: pointer;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-portal-tool :is(input[type="submit"], button):not(td *):hover { background: var(--ab-orange-darker); }
body.ab .ab-portal-tool :is(input[type="submit"], button):not(td *):focus-visible { outline: none; box-shadow: var(--ab-focus-ring); }
/* The lists on the Edit pages */
body.ab .ab-portal-tool h2 { font-size: 26px; margin: 8px 0 16px; }
body.ab .ab-portal-tool table { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; line-height: 1.45; }
body.ab .ab-portal-tool th, body.ab .ab-portal-tool td { padding: 10px 12px; border: 1px solid var(--ab-sage-border); text-align: left; vertical-align: top; }
body.ab .ab-portal-tool th { background: var(--ab-sage); font-family: var(--ab-font-heading); font-weight: 600; color: var(--ab-teal); }
body.ab .ab-portal-tool tbody tr:nth-child(even) td { background: var(--ab-cream, #faf8f4); }
body.ab .ab-portal-tool td a { color: var(--ab-teal); font-weight: 600; }
body.ab .ab-portal-tool td form { display: inline; margin: 0; }
@media (max-width: 700px) { body.ab .ab-portal-tool table { display: block; overflow-x: auto; } }

/* Photo credit in the footer (Home page only, required by the photo's licence) */
body.ab .site-footer .ab-photo-credit { font-size: 13px; opacity: .85; }
body.ab .site-footer .ab-photo-credit a { text-decoration: underline; }

/* Footer link columns ("Find out more", "Get involved"): one link per line */
body.ab .footer-widgets .widget_nav_menu { max-width: none; }
body.ab .footer-widgets .widget_nav_menu .menu { flex-direction: column; flex-wrap: nowrap; gap: 6px; }


/* =====================================================================
   21. Gareth's page design (October 2026)
   a) Dark-teal header band with breadcrumb (every page except Home)
   b) Numbered "On this page" bar
   c) Numbered page sections: Group with style "Page section" (ab-sec),
      built by ab-core/includes/sections.php
   d) Cards inside sections: pull quote, pair, checklist, routes, myths
   ===================================================================== */

/* a) Header band */
body.ab .ab-page-header--hero {
	position: relative;
	overflow: hidden;
	background: var(--ab-teal);
	border-bottom: 0;
	color: #fff;
	padding: clamp(56px, 9vw, 112px) var(--ab-gutter) clamp(56px, 8vw, 96px);
}
body.ab .ab-page-header--hero::after {          /* the faint ring, top right */
	content: "";
	position: absolute;
	right: -140px; top: -160px;
	width: 520px; height: 520px;
	border-radius: 50%;
	border: 64px solid rgba(255, 255, 255, .04);
	pointer-events: none;
}
body.ab .ab-page-header--hero .ab-page-header__inner { position: relative; }
body.ab .site-main--page:has(.ab-sec) .ab-page-header--hero .ab-page-header__inner { max-width: 1080px; }
body.ab .ab-page-header--hero .ab-page-header__title {
	color: #fff;
	font-weight: 600;
	font-size: clamp(40px, 7vw, 76px);
	line-height: 1.05;
	letter-spacing: -.02em;
}
body.ab .ab-page-header--hero .ab-page-header__title::before {
	width: 56px; height: 5px; border-radius: 3px; margin-bottom: 24px;
}
body.ab .ab-page-header--hero .ab-page-header__lead {
	margin-top: 24px;
	max-width: 680px;
	font-size: clamp(18px, 2.1vw, 22px);
	line-height: 1.6;
	color: #E3ECEA;
	text-wrap: pretty;
}
body.ab .ab-crumbs ol {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 0 0 28px; padding: 0;
	font-size: 15px; color: #C9D8D5;
}
body.ab .ab-crumbs li + li::before { content: "/"; margin-right: 8px; }
body.ab .ab-crumbs a { color: #C9D8D5; text-decoration: underline; text-underline-offset: 3px; }
body.ab .ab-crumbs a:hover { color: #fff; }
body.ab .ab-crumbs [aria-current="page"] { color: #fff; }
body.ab .ab-crumbs a:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; border-radius: 3px; }

/* b) Numbered "On this page" bar */
body.ab .page-content > .ab-jumpbar--num {
	margin: 0;
	padding: 0 var(--ab-gutter);
	background: var(--ab-white);
	border-bottom: 1px solid var(--ab-border);
	box-shadow: 0 6px 18px -14px rgba(31, 42, 40, .35);
}
body.ab .ab-jumpbar--num .ab-jumps {
	max-width: 1080px;
	min-height: 68px;
	align-items: center;
	justify-content: flex-start;
	gap: 2px;
}
body.ab .ab-jumpbar--num .ab-jumps strong {
	margin-right: 6px;
	font: 600 13px var(--ab-font-heading);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ab-muted);
}
body.ab .ab-jumpbar--num p.ab-jumps a {
	gap: 7px;
	min-height: 44px;
	padding: 0 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #4E5F5C;
	transition: color var(--ab-dur-hover) ease, box-shadow var(--ab-dur-hover) ease;
}
body.ab .ab-jumpbar--num p.ab-jumps a:hover { background: transparent; color: var(--ab-orange-dark); }
body.ab .ab-jumpbar--num p.ab-jumps a[aria-current="true"] {
	background: transparent;
	color: var(--ab-teal);
	box-shadow: inset 0 -3px 0 var(--ab-orange);
}
body.ab .ab-jumpbar--num .ab-jump__n { font-size: 12px; font-weight: 600; color: var(--ab-orange-dark); }

/* c) Sections */
body.ab .page-content > section.ab-sec {
	width: auto;
	max-width: none;
	margin: 0;
	padding: clamp(56px, 7vw, 96px) var(--ab-gutter);
	background: var(--ab-cream);
	scroll-margin-top: calc(var(--ab-sticky-top, 76px) + 60px);
}
body.ab .page-content > section.ab-sec--alt { background: var(--ab-white); border-top: 1px solid var(--ab-border); border-bottom: 1px solid var(--ab-border); }
body.ab .site-main--page:not(:has(.elementor)) .page-content > section.ab-sec:first-child { margin-top: 0; }
body.ab .ab-sec__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 28px 72px;
}
body.ab .ab-sec__side { flex: 1 1 220px; align-self: flex-start; }
@media (min-width: 900px) {
	body.ab .ab-sec__side { position: sticky; top: calc(var(--ab-sticky-top, 76px) + 100px); }
}
body.ab .ab-sec__num {
	margin: 0;
	font: 600 14px var(--ab-font-heading);
	letter-spacing: .06em;
	color: var(--ab-orange-dark);
}
body.ab .ab-sec__num::after {
	content: "";
	display: block;
	width: 48px; height: 4px; border-radius: 2px;
	background: var(--ab-orange);
	margin: 14px 0 18px;
}
body.ab .ab-sec__title {
	margin: 0;
	font: 600 clamp(30px, 3.6vw, 40px) / 1.15 var(--ab-font-heading);
	letter-spacing: -.01em;
	color: var(--ab-teal);
}
body.ab .ab-sec__toc {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex; flex-direction: column; gap: 2px;
	border-left: 2px solid #E3E2DA;
}
body.ab .ab-sec__toc a { display: block; padding: 7px 0 7px 16px; font-size: 16px; line-height: 1.4; color: #4E5F5C; text-decoration: none; }
body.ab .ab-sec__toc a:hover { color: var(--ab-orange-dark); }
body.ab .ab-sec__toc a:focus-visible { outline: none; box-shadow: var(--ab-focus-ring); border-radius: 4px; }
@media (max-width: 899px) { body.ab .ab-sec__toc { display: none; } }

body.ab .ab-sec__main {
	flex: 999 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-size: 18px;
	line-height: 1.7;
}
body.ab .ab-sec__main > * { margin: 0; max-width: none; width: auto; }
body.ab .ab-sec__main h3 {
	margin: 26px 0 0;
	font: 600 clamp(22px, 2.4vw, 26px) / 1.3 var(--ab-font-heading);
	color: var(--ab-teal);
	scroll-margin-top: calc(var(--ab-sticky-top, 76px) + 100px);
}
body.ab .ab-sec__main > h3:first-child { margin-top: 0; }

/* d) Inside sections. Cards are white on cream bands and cream on white bands. */
body.ab .ab-sec__main .wp-block-group__inner-container { display: contents; }
body.ab .ab-sec__main p.ab-pullquote {
	margin: 0 0 10px;
	padding: 4px 0 4px 26px;
	border: 0;
	border-left: 4px solid var(--ab-orange);
	background: none;
	font: 500 clamp(22px, 2.6vw, 28px) / 1.35 var(--ab-font-heading);
	color: var(--ab-teal);
	text-wrap: balance;
}
body.ab .ab-sec__main .ab-pair,
body.ab .ab-sec__main .ab-myths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 16px;
	margin: 6px 0;
}
body.ab .ab-sec__main .ab-pair > *,
body.ab .ab-sec__main .ab-myth {
	margin: 0;
	padding: 24px 26px;
	background: var(--ab-white);
	border: 1px solid #DCDCD3;
	border-radius: 18px;
	box-shadow: none;
	font-size: 17px;
	line-height: 1.6;
}
body.ab .ab-sec--alt .ab-sec__main .ab-pair > *,
body.ab .ab-sec--alt .ab-sec__main .ab-myth { background: var(--ab-cream); border-color: #E3E2DA; }
body.ab .ab-sec__main .ab-pair p,
body.ab .ab-sec__main .ab-myth p { margin: 0; }
body.ab .ab-sec__main .ab-pair__label,
body.ab .ab-sec__main .ab-route__label {
	margin: 0 0 8px;
	font: 700 13px var(--ab-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ab-orange-dark);
}

/* Checklist box */
body.ab .ab-sec__main ul.ab-ticklist {
	margin: 4px 0;
	padding: 22px 26px;
	background: var(--ab-cream);
	border: 1px solid #E3E2DA;
	border-radius: 18px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px 28px;
	columns: auto;
	font-size: 17px;
	line-height: 1.5;
}
body.ab .ab-sec:not(.ab-sec--alt) .ab-sec__main ul.ab-ticklist { background: var(--ab-white); }
body.ab .ab-sec__main ul.ab-ticklist li { margin: 0; break-inside: avoid; }

/* Route cards */
body.ab .ab-sec__main .ab-routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
	margin-top: 22px;
	align-items: start;
}
body.ab .ab-sec__main .ab-route {
	display: flex; flex-direction: column; gap: 16px;
	padding: clamp(22px, 3vw, 32px);
	background: var(--ab-cream);
	border: 1px solid #E3E2DA;
	border-radius: 20px;
	font-size: 17px;
	line-height: 1.65;
}
body.ab .ab-sec:not(.ab-sec--alt) .ab-sec__main .ab-route { background: var(--ab-white); }
body.ab .ab-sec__main .ab-route > * { margin: 0; }
body.ab .ab-sec__main .ab-route__label { margin: 0; }
body.ab .ab-sec__main .ab-route h3 { margin: 0; font-size: clamp(21px, 2.2vw, 24px); }

/* Myth / fact cards */
body.ab .ab-sec__main .ab-myth { display: flex; flex-direction: column; gap: 8px; }
body.ab .ab-sec__main .ab-myth__claim::before,
body.ab .ab-sec__main .ab-myth__fact::before {
	display: block;
	margin-bottom: 8px;
	font: 700 13px var(--ab-font-body);
	letter-spacing: .1em;
}
body.ab .ab-sec__main .ab-myth__claim::before { content: "MYTH"; color: #A8281B; }
body.ab .ab-sec__main .ab-myth__fact::before  { content: "FACT"; color: var(--ab-teal); }
body.ab .ab-sec__main .ab-myth__claim {
	font: 600 19px / 1.35 var(--ab-font-heading);
	color: var(--ab-ink);
	text-decoration: none;
	padding: 0;
	background: none;
}
body.ab .ab-sec__main .ab-myth__fact {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid #EDECE5;
	font-size: 17px;
	line-height: 1.6;
}
/* The bar scrolls sideways if it's ever too long (narrow screens), without a visible scrollbar */
body.ab .ab-jumpbar--num .ab-jumps {
	scrollbar-width: none;
}
body.ab .ab-jumpbar--num .ab-jumps::-webkit-scrollbar { display: none; }
body.ab .ab-sec__main .ab-route p,
body.ab .ab-sec__main .ab-route h3,
body.ab .ab-sec__main .ab-myth p { margin: 0; }

/* ---------------------------------------------------------------------
   22. One frame for every page (Oct 2026)
   Every page lines up on the same 1080px frame as About Autism:
   - the header band's breadcrumb and title always use the full frame;
   - on ordinary (non-section) pages the reading column keeps its
     comfortable width but sits at the LEFT of the frame, so its left
     edge matches the title's (the spare space goes on the right).
   --------------------------------------------------------------------- */
body.ab .site-main--page:not(:has(.elementor)) .ab-page-header--hero .ab-page-header__inner { max-width: 1080px; }
body.ab .site-main--page:not(:has(.elementor)):not(:has(.ab-sec)) .page-content {
	--ab-pr: max(0px, min(calc(1080px + 2 * var(--ab-gutter) - var(--ab-reading)), calc(100vw - var(--ab-reading))));
	box-sizing: border-box;
	max-width: calc(1080px + 2 * var(--ab-gutter));
	margin-inline: auto;
	padding-right: var(--ab-pr);
}
/* The older "On this page" pill strip: as wide as the frame, with its
   white background running to both edges of the screen */
body.ab .site-main--page:not(:has(.elementor)):not(:has(.ab-sec)) .page-content > .ab-jumpbar {
	margin-right: calc(-1 * var(--ab-pr));
	max-width: none;
	border-bottom: 0;
	box-shadow: 0 0 0 100vmax var(--ab-white), 0 1px 0 100vmax var(--ab-border);
	clip-path: inset(0 -100vmax -1px);
}
body.ab .site-main--page:not(:has(.ab-sec)) .ab-jumpbar .ab-jumps { max-width: none; justify-content: flex-start; }
/* Card grids (and the Books and All News listings) use the
   whole frame; paragraphs keep the reading width */
body.ab .site-main--page:not(:has(.elementor)):not(:has(.ab-sec)) .page-content > :is(.ab-keyfacts, .ab-give, .ab-tiles, .ab-books, .ab-newsall) {
	width: calc(100% + var(--ab-pr) - 2 * var(--ab-gutter));
	max-width: 1080px;
	margin-left: var(--ab-gutter);
	margin-right: 0;
}


/* ---------------------------------------------------------------------
   23. Page sections on any page (Oct 2026)
   a) Blocks outside the sections (e.g. an intro and key facts) use the frame
   b) The usual building blocks (cards, forms, "More about" panels, tips…)
      look the same inside a section's right-hand column. (Generated from
      the rules above, without their widths and margins.)
   --------------------------------------------------------------------- */
body.ab .site-main--page:has(.ab-sec) .page-content > :not(.ab-sec):not(.ab-jumpbar) {
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin-left: max(var(--ab-gutter), calc((100% - 1080px) / 2));
	margin-right: max(var(--ab-gutter), calc((100% - 1080px) / 2));
	padding-inline: 0;
}
body.ab .site-main--page:has(.ab-sec) .page-content > :is(p, ul, ol, h2, h3, .ab-tip, .ab-form-card):not(.ab-sec):not(.ab-jumpbar) { max-width: var(--ab-reading); margin-right: auto; }
body.ab .site-main--page:has(.ab-sec) .page-content > .ab-jumpbar + * { margin-top: clamp(32px, 4vw, 48px); }
body.ab .ab-sec__main > .wp-block-details.ab-more + .wp-block-details.ab-more { margin-top: -12px; }
@media (max-width: 560px) {
/* phones: picture above the text */
	body.ab .ab-sec__main > .ab-assist {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}
}
body.ab .ab-sec__main > .ab-pullquote {
	padding: 4px 0 4px 22px;
	border-left: 4px solid var(--ab-orange);
	font-family: var(--ab-font-heading);
	font-weight: 500;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.35;
	color: var(--ab-teal);
}
body.ab .ab-sec__main > .ab-assist {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding: 22px;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}
body.ab .ab-sec__main > .ab-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 20px;
	padding: 0;
}
body.ab .ab-sec__main > .ab-tip {
	padding: 16px 20px;
	background: var(--ab-orange-wash);
	border-left: 4px solid var(--ab-orange);
	border-radius: 6px;
}
/* (Plain lists only: lists with their own design, such as the tick list,
   trustee cards and Resources cards, are left alone) */
body.ab .ab-sec__main > ul:not([class*="ab-"]),
body.ab .ab-sec__main > ol {
	padding-left: 1.5em;   /* the column has no side gutter, so no extra indent */
	padding-right: 0;
}
body.ab .ab-sec__main > ul:not([class*="ab-"]) li,
body.ab .ab-sec__main > ol li {
	padding-left: .25em;
}
body.ab .ab-sec__main > p.ab-lead {
	font-size: clamp(19px, 1.8vw, 22px);
	line-height: 1.55;
	color: var(--ab-teal);
}
body.ab .ab-sec__main > .ab-keyfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px;
	padding: 0;
}
body.ab .ab-sec__main > .ab-form-card {
	padding: clamp(20px, 3.5vw, 32px);
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
	box-shadow: var(--ab-shadow-soft);
}
body.ab .ab-sec__main > .wp-block-details.ab-more {
	padding: 0;
	background: var(--ab-white);
	border: 1px solid var(--ab-sage-border);
	border-radius: 6px;
}
body.ab .ab-sec__main > .ab-give {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 14px;
	padding: 0;
}
body.ab .ab-sec__main > p.ab-btn-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
body.ab .ab-sec__main > p.ab-btn-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 20px;
	border: 1px solid var(--ab-teal);
	border-radius: var(--ab-radius-pill);
	background: var(--ab-white);
	color: var(--ab-teal);
	font-family: var(--ab-font-heading);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color var(--ab-dur-hover) ease;
}
body.ab .ab-sec__main > p.ab-btn-links a:hover {
	background: var(--ab-sage);
}
body.ab .ab-sec__main > p.ab-btn-links a:focus-visible {
	outline: none;
	box-shadow: var(--ab-focus-ring);
}
/* Every section's right-hand column starts at exactly the same place:
   the left column has a fixed width on wide screens (long words in a
   title simply wrap or break inside it). */
@media (min-width: 900px) {
	body.ab .ab-sec__side { flex: 0 0 260px; max-width: 260px; }
	body.ab .ab-sec__title { overflow-wrap: break-word; hyphens: auto; }
}
/* Intro text above the sections ends in line with the right edge of the
   middle card of a three-card row (2 of 3 columns, 12px gaps) */
body.ab .site-main--page:has(.ab-sec):has(.ab-keyfacts) .page-content > p:not(.ab-sec):not(.ab-jumpbar):not(.ab-tip) {
	max-width: calc((min(100vw - 2 * var(--ab-gutter), 1080px) - 24px) * 2 / 3 + 12px);
}
/* Section pages: the last band runs straight into the footer (no cream strip) */
body.ab .site-main--page:has(.ab-sec) { padding-bottom: 0; }
/* Resources: the numbered bar shares its row with the search box */
body.ab .ab-jumpbar--num .ab-jumpbar__inner { justify-content: space-between; }
body.ab .ab-jumpbar--num .ab-jumpbar__inner .ab-jumps { margin: 0; }
/* Resources: the number of organisations, under the category title */
body.ab .ab-sec__side .ab-res-count-line { margin: 16px 0 0; font-size: 15px; color: var(--ab-muted); }
body.ab .ab-sec__side .ab-res-count { margin: 0 4px 0 0; }
body.ab .ab-sec.ab-res-group[hidden] { display: none; }
body.ab .ab-jumpbar--num .ab-jumpbar__inner { max-width: 1080px; margin-inline: auto; }

/* About Us: document rows inside a numbered section — no paragraph gaps,
   so the Read buttons sit level with the title */
body.ab .ab-sec__main .ab-doc p { margin: 0; }
body.ab .ab-sec__main .ab-doc .ab-doc__title { margin-bottom: 2px; }

/* Articles page and topic pages: the same 1080px frame as every other page */
body.ab .site-main--listing .ab-page-header--hero .ab-page-header__inner { max-width: 1080px; }
body.ab .site-main--listing .ab-listing { max-width: 1080px; }

/* Assistance Cards: two cards side by side across the 1080px frame
   (one under another on phones and small tablets). Intro text keeps the
   reading width and starts at the frame's left edge. */
@media (min-width: 900px) {
	body.ab .site-main--page:not(:has(.ab-sec)) .page-content:has(> .ab-assist) {
		display: flex;
		flex-wrap: wrap;
		column-gap: 24px;
		align-items: stretch;
		align-content: flex-start;
		padding-inline: var(--ab-gutter);
	}
	body.ab .site-main--page:not(:has(.ab-sec)) .page-content:has(> .ab-assist) > * { flex: 0 0 100%; }
	body.ab .site-main--page:not(:has(.ab-sec)) .page-content:has(> .ab-assist) > :not(.ab-assist) {
		padding-inline: 0;
		margin-inline: 0;
		max-width: calc(var(--ab-reading) - 2 * var(--ab-gutter));
	}
	body.ab .site-main--page:not(:has(.ab-sec)) .page-content:has(> .ab-assist) > .ab-assist {
		flex: 0 0 calc(50% - 12px);
		width: auto;
		margin: 0 0 24px;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 20px;
	}
}