/* ============================================================
   Bridge between WordPress core block markup and the design system.
   ds/dist/abs.css is the design system as published: never edit it here.
   This file only maps core block classes (wp-block-*) onto the
   `abs-` components, so patterns can be built from core blocks.
   ============================================================ */

/* ---------- Page frame ---------- */
.abs .abs-main > .alignfull { width: 100%; max-width: none; }
.abs .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-5); background: var(--surface); color: var(--ink); font-weight: 700; border-radius: var(--radius-pill); }
.abs .skip-link:focus { top: var(--space-4); }

/* ---------- Header ---------- */
/* Site name when no logo is set */
.abs-header__name { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--on-navy); }
.abs-header__logo { flex: 0 1 auto; min-width: 0; text-decoration: none; }
.abs-header__name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 1000px) { .abs-header__name { font-size: 20px; } }
/* Second menu level (dropdowns in the design system): undo the legacy Business Pro .sub-menu
   rules, which load on the legacy route. */
.abs-header .abs-header__nav .sub-menu, .abs-sitefoot__menu .sub-menu { display: flex; font-size: 16px; clear: none; }
.abs-sitefoot__menu .sub-menu { display: grid; font-size: 15px; padding: 0; }
.abs-header .abs-header__nav .sub-menu { padding: var(--space-3) 0; }
:is(.abs-header__nav, .abs-sitefoot__menu) .sub-menu::before, :is(.abs-header__nav, .abs-sitefoot__menu) .sub-menu::after { content: none; }
:is(.abs-header__nav, .abs-sitefoot__menu) .sub-menu li { width: auto; margin: 0; }
.abs-header .abs-header__nav .sub-menu li a { padding: 10px var(--space-5); }
.abs-sitefoot .abs-sitefoot__menu .sub-menu li a { padding: 0; }
.abs-header .abs-header__nav .sub-menu .menu-item a:is(:hover, :focus), .abs-sitefoot .abs-sitefoot__menu .sub-menu .menu-item a:is(:hover, :focus) { color: var(--turquoise); }
/* Business Pro hides every .sub-menu on desktop with opacity: 0 !important and floats it: show the
   footer lists in place, and let the header dropdowns open on hover, focus and .is-sub-open. */
:is(.abs-header__nav, .abs-sitefoot__menu) .sub-menu { width: auto; border-radius: 0; box-shadow: none; pointer-events: auto; }
.abs-sitefoot .abs-sitefoot__menu .sub-menu { position: static; opacity: 1 !important; background: none; }
.abs-sitefoot .abs-sitefoot__menu .sub-menu a { font-weight: 400; }
.abs-header .abs-header__nav li:is(:hover, :focus-within, .is-sub-open) > .sub-menu { opacity: 1 !important; }
.abs-header .abs-header__nav li.is-sub-closed > .sub-menu { opacity: 0 !important; }
/* Menu panel on small screens */
@media (max-width: 1000px) {
  .abs-header { position: relative; }
  .abs-header.is-open .abs-header__nav { display: flex; position: absolute; inset: 100% 0 auto; z-index: 50; min-height: calc(100vh - 72px); max-height: calc(100vh - 72px); overflow-y: auto; background: var(--navy); padding: var(--space-6) var(--space-4); align-items: flex-start; }
  .abs-header.is-open .abs-header__nav ul { flex-direction: column; gap: var(--space-5); }
  .abs-header.is-open .abs-header__nav a { font-size: 24px; }
  /* In the panel the second level is always open, indented under its parent */
  .abs-header .abs-header__nav .menu-item-has-children > a::after { content: none; }
  .abs-header.is-open .abs-header__nav .sub-menu { position: static; visibility: visible; opacity: 1 !important; transform: none; min-width: 0; gap: var(--space-2); margin-top: var(--space-3); padding: 0 0 0 var(--space-4); background: none; border: 0; border-left: 2px solid var(--turquoise); border-radius: 0; }
  .abs-header.is-open .abs-header__nav .sub-menu a { padding: 6px 0; font-size: 18px; background: none; }
}

/* ---------- Footer ---------- */
/* IFBSO badge the size of the social icons (client, 2026-11-04) */
.abs-sitefoot .abs-sitefoot__accredited img { width: 52px; height: 52px; object-fit: contain; }
/* Up to six menu columns in one row on desktop (Home + the five main items) */
@media (min-width: 801px) { .abs-sitefoot .abs-sitefoot__menu { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
/* Show hours (Customizer), above the copyright line */
.abs-sitefoot .abs-sitefoot__hours { margin-bottom: var(--space-2); }
.abs-sitefoot .abs-sitefoot__hours strong { font-weight: 600; }

/* ---------- FAQ: the Yoast FAQ block as the FAQ accordion (abs_faq_block) ---------- */
/* Centred at the narrow width with the container gutters, whatever the layout of the group around it
   (a flex group shrinks it to its content and widens it when an answer opens) */
.abs .abs-faq { align-self: center; box-sizing: border-box; width: min(var(--container-narrow), 100% - 2 * var(--space-8)); margin-inline: auto; }
.abs .is-style-abs-tint:has(> .abs-faq) { padding-block: var(--space-8); }
/* A text section right before it (the FAQ heading) joins the light-blue band */
.abs .abs-textsec:has(+ .is-style-abs-tint > .abs-faq) { display: flow-root; padding-bottom: 0; background: var(--aqua-100); } /* flow-root keeps the heading's bottom margin inside the band */
.abs .abs-textsec:has(+ .is-style-abs-tint > .abs-faq) + .is-style-abs-tint { margin-block-start: 0; padding-top: var(--space-6); }
/* FAQ pattern (patterns/faq.php): inside the container, left-aligned in the centred section */
.abs .abs-container > .abs-faq { width: 100%; text-align: left; }
.abs .abs-faq summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
/* Empty paragraphs left in a text section (the FAQ heading on Visit) */
.abs .abs-textsec p:empty { display: none; }
.abs .abs-textsec__head:not(:has(> :not(p:empty, .abs-section-title))) { margin-bottom: 0; }
@media (max-width: 900px) { .abs .abs-faq { width: min(var(--container-narrow), 100% - 2 * var(--space-6)); } .abs .is-style-abs-tint:has(> .abs-faq) { padding-bottom: var(--space-7); } }
@media (max-width: 560px) { .abs .abs-faq:not(.abs-container > *) { width: calc(100% - 2 * var(--space-4)); } .abs .abs-faq summary { font-size: 17px; } }

/* ---------- Footer: Smash Balloon Instagram feed in the SiteFooter ---------- */
/* The plugin ignores shortcode settings and styles with ID selectors: match its weight. Six round images. */
.abs-sitefoot__plugin #sb_instagram { padding: 0 !important; width: 100% !important; }
.abs-sitefoot__plugin #sb_instagram #sbi_images { background: none !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: var(--space-5) !important; padding: 0 !important; }
.abs-sitefoot__plugin #sb_instagram .sbi_item { width: auto !important; padding: 0 !important; margin: 0 !important; }
.abs-sitefoot__plugin #sb_instagram .sbi_item:nth-child(n+7) { display: none !important; }
.abs-sitefoot__plugin #sb_instagram .sbi_photo_wrap { position: relative; }
.abs-sitefoot__plugin #sb_instagram .sbi_photo { display: block; aspect-ratio: 1; height: auto !important; border-radius: 50%; overflow: hidden; }
.abs-sitefoot__plugin #sb_instagram .sbi_photo img { display: block !important; width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; }
.abs-sitefoot__plugin #sb_instagram :is(#sbi_load, .sb_instagram_header, .sbi_header) { display: none !important; }
@media (max-width: 800px) { .abs-sitefoot__plugin #sb_instagram #sbi_images { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--space-3) !important; } }

/* ---------- Core blocks inside the design system ---------- */
/* Grid and flex containers space their children with gap: drop the block-gap margins WordPress adds between siblings */
.abs :is(.abs-features, .abs-logos__track, .abs-textsec__cols, .abs-buttonbar) > * { margin-block: 0; }
/* Headings and paragraphs carry the DS classes directly (abs-section-title, abs-lead). */
.abs .wp-block-heading { margin: 0; }
/* The head spaces its children with its grid gap: drop the block-gap margins the editor adds */
.abs .abs-textsec__head > * { margin-block: 0; }

/* Buttons block -> abs-btn. Block styles: default (turquoise), Navy, Outline. */
.abs .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.abs .wp-block-button { margin: 0; }
.abs .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 14px 36px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--turquoise); color: var(--on-turquoise); text-shadow: var(--text-shadow-button);
  font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.abs .wp-block-button__link:hover { background: var(--navy); color: var(--on-navy); }
.abs .wp-block-button.is-style-navy .wp-block-button__link { background: var(--navy); color: var(--on-navy); text-shadow: none; }
.abs .wp-block-button.is-style-navy .wp-block-button__link:hover { background: var(--turquoise); }
.abs .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--navy); border: 0; box-shadow: inset 0 0 0 2px var(--navy); text-shadow: none; }
.abs .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--navy); color: var(--on-navy); }
@media (prefers-reduced-motion: reduce) { .abs .wp-block-button__link { transition: none; } }

/* Group block style "Light blue" -> abs-section--tint */
.abs .is-style-abs-tint { background: var(--aqua-100); }
/* A light-blue section keeps its own padding, and so does the section after it */
.abs .abs-textsec + .abs-textsec.is-style-abs-tint, .abs .abs-textsec.is-style-abs-tint + .abs-textsec { padding-top: var(--space-9); }
@media (max-width: 900px) { .abs .abs-textsec + .abs-textsec.is-style-abs-tint, .abs .abs-textsec.is-style-abs-tint + .abs-textsec { padding-top: var(--space-8); } }

/* Columns block -> abs-textsec__cols (grid, stacks under 800px) */
.abs .wp-block-columns.abs-textsec__cols { display: grid; margin: 0; flex-wrap: initial !important; }
.abs .wp-block-columns.abs-textsec__cols > .wp-block-column { flex: initial; min-width: 0; margin: 0; }

/* Columns block -> IntroSplit (abs-intro) and the LoginCard split (abs-split): grids from the design system */
.abs .wp-block-columns:is(.abs-intro, .abs-split) { display: grid; margin: 0; flex-wrap: initial !important; }
.abs .wp-block-columns:is(.abs-intro, .abs-split) > .wp-block-column { flex: initial; min-width: 0; margin: 0; }
.abs .wp-block-columns.abs-split > .wp-block-column { align-self: start; }
/* A text section right under the page hero: the hero's bottom margin is enough space */
.abs .abs-hero--page + .abs-textsec { padding-top: 0; }
.abs .abs-intro > .abs-body > * + *, .abs .abs-split > .abs-body > * + * { margin-top: var(--space-4); }
/* LoginCard: Group with a heading, a paragraph and a Buttons block, spaced by the card's grid gap */
.abs .abs-logincard > * { margin-block: 0; }
.abs .abs-logincard .wp-block-buttons { justify-content: center; }

/* Image block used as the photo of a TextSection (pattern 1 on a photo) */
.abs .wp-block-image.abs-textsec__media { margin: 0; }
.abs .wp-block-image.abs-textsec__media img { height: 100%; }

/* Media & Text block -> abs-mediatext */
.abs .wp-block-media-text.abs-mediatext { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: center; }
.abs .wp-block-media-text.abs-mediatext > .wp-block-media-text__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-media); align-self: center; }
.abs .wp-block-media-text.abs-mediatext > .wp-block-media-text__media img { width: 100%; height: 100%; object-fit: cover; }
.abs .wp-block-media-text.abs-mediatext > .wp-block-media-text__content { padding: 0; }
.abs .abs-mediatext > .wp-block-media-text__content > * + * { margin-top: var(--space-4); }
.abs .abs-mediatext > .wp-block-media-text__content > .wp-block-buttons { margin-top: var(--space-6); }
.abs .wp-block-media-text.abs-mediatext.has-media-on-the-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abs .wp-block-media-text.abs-mediatext.has-media-on-the-right > .wp-block-media-text__media { grid-column: 2; grid-row: 1; }
.abs .wp-block-media-text.abs-mediatext.has-media-on-the-right > .wp-block-media-text__content { grid-column: 1; grid-row: 1; }
@media (max-width: 800px) {
  .abs .wp-block-media-text.abs-mediatext, .abs .wp-block-media-text.abs-mediatext.has-media-on-the-right { grid-template-columns: 1fr; gap: var(--space-6); }
  .abs .wp-block-media-text.abs-mediatext > .wp-block-media-text__media, .abs .wp-block-media-text.abs-mediatext.has-media-on-the-right > .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
  .abs .wp-block-media-text.abs-mediatext > .wp-block-media-text__content, .abs .wp-block-media-text.abs-mediatext.has-media-on-the-right > .wp-block-media-text__content { grid-column: 1; grid-row: 2; }
}

/* ---------- Home sections ---------- */
/* Video hero block: the space under the info box */
.abs .wp-block-aowb-video-hero { margin-bottom: var(--space-8); }

/* Large button: class abs-btn--large on the Button block */
.abs .wp-block-button.abs-btn--large .wp-block-button__link { min-height: 56px; padding: 18px 48px; font-size: 17px; }
/* Small button: class abs-btn--small on the Button block. The DS class also pads the wrapper div: reset it */
.abs .wp-block-button.abs-btn--small { min-height: 0; padding: 0; }
.abs .wp-block-button.abs-btn--small .wp-block-button__link { min-height: 40px; padding: 10px 22px; font-size: 14px; }

/* CtaBanner: Image block as the banner photo */
.abs .wp-block-image.abs-banner__media { margin: 0; }
.abs .wp-block-image.abs-banner__media img { height: 100%; }
.abs .abs-banner__inner > * { margin-block: 0; }
.abs .abs-banner__inner .wp-block-buttons { justify-content: center; }

/* LogoStrip: one Group per logo with a linked Image block */
.abs .abs-logos__item .wp-block-image { margin: 0; }
.abs .abs-logos__item .wp-block-image img { height: 80px; width: auto; }
/* The partner PNGs carry their own padding: show them taller than the bare 64px logos */
@media (max-width: 560px) { .abs .abs-logos__item .wp-block-image img { height: 56px; } }
.abs .abs-logos__item > * { margin-block: 0; }

/* Separator block between full-width sections (used on the pattern library page) */
.abs :is(.abs-main, .abs-blocks) > .wp-block-separator { width: 100%; max-width: none; height: 0; margin: var(--space-6) 0; border: 0; border-top: 2px solid var(--rule); opacity: 1; }

/* ButtonBar */
.abs .abs-buttonbar .wp-block-buttons { justify-content: center; }

/* FeatureSpots: Group per spot, Image block as the photo, "Read more" paragraph */
.abs .abs-feature > * { margin-block: 0; }
.abs .wp-block-image.abs-feature__media { margin-bottom: var(--space-3); }
.abs .abs-feature__more a { font-weight: 500; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.abs .abs-feature__more a:hover { text-decoration-thickness: 2px; }

/* ---------- Page templates ---------- */
/* Free blocks between the full-width sections of a block page sit in a text column */
.abs .abs-blocks > :not(.alignfull) { width: min(100% - 2 * var(--space-4), var(--container-text)); margin-inline: auto; }
.abs .abs-blocks > :not(.alignfull) + :not(.alignfull) { margin-top: var(--space-5); }
.abs .abs-blocks > .alignfull + :not(.alignfull) { margin-top: var(--space-8); }
.abs .abs-blocks > :not(.alignfull) + .alignfull { margin-top: var(--space-8); }
.abs .abs-blocks > :last-child:not(.alignfull) { margin-bottom: var(--space-9); }
.abs .abs-blocks > h2.wp-block-heading:not([class*="abs-"]) { font-weight: 700; font-size: 26px; line-height: 1.3; }
.abs .abs-blocks > h3.wp-block-heading:not([class*="abs-"]) { font-weight: 700; font-size: 21px; line-height: 1.35; }
.abs .abs-blocks > p a, .abs .abs-blocks > ul a, .abs .abs-blocks > ol a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
/* Lead under a photo hero (ContentPage) */
.abs .abs-page__lead { max-width: calc(var(--container-text) + 2 * var(--space-8)); margin-top: var(--space-7); }
/* Stories archive */
.abs .abs-archive__nav { margin-bottom: var(--space-7); }
.abs .abs-storycard__date { margin-top: var(--space-1); }
.abs .abs-pagination a, .abs .abs-pagination span { text-decoration: none; }
@media (max-width: 760px) { .abs .abs-pagination { margin-block: 2rem; } }
/* PageHero and title band built from core blocks */
.abs .wp-block-image.abs-hero__media { margin: 0; }
.abs .abs-hero--page > .wp-block-image.abs-hero__media img { height: 100%; }
.abs .abs-hero--plain > * { margin-block: 0; }
.abs .abs-hero--plain > .abs-lead { margin: var(--space-4) auto 0; }
.abs .abs-hero--page { margin-bottom: var(--space-8); }
/* `.abs p { margin: 0 }` in the bundle cancels these single-class margins */
.abs .abs-article__back { margin: var(--space-7) auto 0; }
/* Side gutter on phones: the article children are centred columns with no padding of their own */
.abs .abs-article { padding-inline: var(--space-4); }
/* Classic-editor captions carry an inline width (the image's full size): keep them, and their images, inside the column */
.abs .abs-prose .wp-caption { max-width: 100%; }
.abs .abs-prose img { max-width: 100%; height: auto; }
/* Story card without a featured image keeps the grid aligned */
.abs .abs-storycard__media:empty { background: var(--aqua-100); }
.abs .abs-hero--plain > .abs-titlebox__title { margin-inline: auto; }
.abs .abs-lead a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
/* Hover on text links, as .abs-link and .abs-prose a in the design system: navy, 2px underline */
.abs :is(.abs-feature__more, .abs-lead) a:hover, .abs .abs-blocks > :is(p, ul, ol) a:hover { color: var(--navy); text-decoration-thickness: 2px; }
/* MapBlock pattern: Group items (term + text) stand in for the design-system dl/dt/dd, spaced by the panel's grid gap */
.abs .abs-map > *, .abs .abs-map__info > * { margin-block: 0; }
.abs .abs-map__item { display: grid; gap: var(--space-1); }
.abs .abs-map__item > * { margin: 0; }
.abs .abs-map__item > p:not(.abs-map__term) { font-size: 16px; }
.abs .abs-map__term { font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise); }
.abs .abs-map__media > .wp-block-html { margin: 0; }
/* The default button hover is navy: on the navy panel it would vanish, so invert it */
.abs .abs-map .wp-block-button__link:hover { background: var(--on-navy); color: var(--navy); text-shadow: none; }