/*
Theme Name: EAO 2026
Theme URI: https://eao.org
Author: The Publishing Bureau
Author URI: https://publishingbureau.co.uk
Description: Child theme of the Publishing Bureau boilerplate for eao.org.
Template: pb-boilerplate
Version: 3.10.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: Proprietary
Copyright: © 2026 The Publishing Bureau. All rights reserved.
Text Domain: eao-2026
*/
/* ==========================================================================
   EAO stylesheet
   Merged from the former assets/css/style.css and assets/css/front.css, in
   that order, so the cascade is unchanged from eao-2025.
   ========================================================================== */

/* ---------- part 1: base, tokens, components (was style.css) ---------- */

/* Onest — self-hosted.
 *
 * The previous rules pointed at onest-latin-variable.woff2 and
 * onest-latin-{400,700}.woff2, none of which exist in assets/fonts/; every
 * src returned 404 and the site silently rendered in the fallback stack.
 * These faces name the files that are actually shipped. Browsers fetch only
 * the weights a page renders, so declaring all nine costs one request each
 * for the weights in use (~14 KB apiece).
 */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('assets/fonts/onest-v8-latin-100.woff2') format('woff2');
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('assets/fonts/onest-v8-latin-200.woff2') format('woff2');
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/onest-v8-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/onest-v8-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/onest-v8-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/onest-v8-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/onest-v8-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/onest-v8-latin-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/onest-v8-latin-900.woff2') format('woff2');
}

/* Font Awesome - Add font-display swap for better performance */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 6 Pro";
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-display: swap;
}

/* ---------- Form, pagination and notice components ----------

   What the templates used of Bootstrap's components, written out: the text
   field, the select, pagination and the notice. The colours are Bootstrap's, so
   that these still match the membership forms, which keep it.

   They come first in the file on purpose. Bootstrap's stylesheet loaded ahead of
   this one, so any rule below that ties with one of these on specificity has
   always won the tie, and has to go on winning it. */
.eao--input,
.eao--select {
    appearance: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    color: #212529;
    display: block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 0.375rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100%;
}

.eao--input {
    background-clip: padding-box;
}

textarea.eao--input {
    min-height: calc(1.5em + 0.75rem + 2px);
    resize: vertical;
}

.eao--select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

.eao--input:focus,
.eao--select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: 0;
}

.eao--input:focus {
    background-color: #fff;
    color: #212529;
}

.eao--input::placeholder {
    color: rgba(33, 37, 41, 0.75);
    opacity: 1;
}

.eao--input:disabled,
.eao--select:disabled {
    background-color: #e9ecef;
}

.eao--input:disabled {
    opacity: 1;
}

.eao--pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 2.5rem 0;
    padding-left: 0;
}

.eao--pagination--link {
    background-color: #fff;
    border: 1px solid #dee2e6;
    display: block;
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
    position: relative;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.eao--pagination--item:not(:first-child) .eao--pagination--link {
    margin-left: -1px;
}

.eao--pagination--item:first-child .eao--pagination--link {
    border-bottom-left-radius: 0.375rem;
    border-top-left-radius: 0.375rem;
}

.eao--pagination--item:last-child .eao--pagination--link {
    border-bottom-right-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

a.eao--pagination--link:hover {
    background-color: #f8f9fa;
    border-color: currentColor;
    z-index: 2;
}

a.eao--pagination--link:focus {
    background-color: #e9ecef;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: 0;
    z-index: 3;
}

/* The current page keeps its colours under the pointer. It used to take them
   from a colour this theme never defined, and went white on white. */
.eao--pagination--item.is-active > .eao--pagination--link {
    background-color: var(--wp--preset--color--eao-red);
    border-color: var(--wp--preset--color--eao-red);
    color: #fff !important;
    font-weight: bold;
    z-index: 3;
}

.eao--pagination--item.is-disabled > .eao--pagination--link {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: rgba(33, 37, 41, 0.75);
    pointer-events: none;
}

.eao--notice {
    border: 1px solid transparent;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    padding: 1rem;
    position: relative;
}

.eao--notice--info {
    background-color: #cff4fc;
    border-color: #9eeaf9;
    color: #055160;
}

.eao--notice--warning {
    background-color: #fff3cd;
    border-color: #ffe69c;
    color: #664d03;
}

.eao--notice--success {
    background-color: #d1e7dd;
    border-color: #a3cfbb;
    color: #0a3622;
}

@media (prefers-reduced-motion: reduce) {
    .eao--input,
    .eao--select,
    .eao--pagination--link {
        transition: none;
    }
}

/* An image that shrinks to fit its box and keeps its proportions. */
.eao--image-fluid {
    height: auto;
    max-width: 100%;
}

/* What a card shows where its picture would be. */
.eao--thumbnail-placeholder {
    align-items: center;
    color: rgba(33, 37, 41, 0.75);
    display: flex;
    height: 100%;
    justify-content: center;
}

:root {
    --font-family--default: "Onest", sans-serif;
    --font-family--heading: "Onest", sans-serif;

    --font-weight--thin: 100;
    --font-weight--extra-light: 200;
    --font-weight--light: 300;
    --font-weight--regular: 400;
    --font-weight--medium: 500;
    --font-weight--semi-bold: 600;
    --font-weight--bold: 700;
    --font-weight--black: 900;

    --bs-body-font-weight: var(--wp--custom--typography--font-weight);
    --colour--body: var(--wp--preset--color--black);
    --wp--preset--color--link: #CC012B;

    /* Header */
    --header--background-colour: var(--wp--preset--color--white);
    --header--bottom-border--width: 2px;
    --header--bottom-border: var(--header--bottom-border--width) solid var(--wp--preset--color--eao-red);
    --header--height: 104px;
    --header--sub-nav--height: 32px;
    
    /* Navbar */
    --navbar--item--colour: var(--wp--preset--color--black);
    --navbar--dropdown--item--colour: var(--wp--preset--color--black);
    --navbar--item--font-family: var(--font-family--default);
    --navbar--dropdown--menu--border--colour: var(--wp--preset--color--eao-red);
    --navbar--dropdown--menu--border--width: var(--header--bottom-border--width);
    --navbar--dropdown-item--colour: var(--navbar--item--colour);

    /* Footer */
    --footer--background-colour: #F5F5F5;
    --footer--colour: #000;
    --footer--link--colour: var(--wp--preset--color--eao-red);
}

/* WordPress and PB */
/* A constrained Group's gutter, and the rule that stops it doubling when they
   nest, are in assets/css/layout-defaults.css. A second copy used to sit here,
   and its nested reset was `padding: initial`: a card that is itself a
   constrained Group lost all of its padding, top and bottom included, whenever
   the Group around it was constrained too. */
.has-dark-background-color {
    color: #FFF;
}
.has-light-background-color {
    color: var(--colour--body);
}
.wp-block-quote,
.wp-block-quote *,
.has-dark-background-color table tbody,
.has-dark-background-color table tbody * {
    /* color: var(--colour--body); */
}
.has-dark-background-color .wp-block-quote {
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white) !important;
}
figure.img-fluid img {
    height: auto !important;
    width: 100% !important;
}
.video-wrapper > .wp-block-embed__wrapper {
    position: relative;
    margin-top: 45px;
    /* margin-bottom: 200px; */
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video-wrapper > .wp-block-embed__wrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.is-position-sticky {
    top: var(--header--height) !important;
}

/* Site specific styles */
b, strong {
    font-weight: 700;
}
img.img-cover, .wp-block-image.img-cover img {
    object-fit: cover;
    width: 100% !important;
}
.wp-block-button {
    display: inline-block;
    /* The wrapper's line box adds descender leading beneath the inline-block
       anchor, making an outline button's wrapper taller than a solid one's and
       knocking the two out of alignment inside .wp-block-buttons. Zeroing it
       makes every wrapper hug its anchor; the anchor restates its own
       line-height below. */
    line-height: 0;
}
.wp-block-button__link {
    /* Defensive fallback: WordPress core's wp-block-library stylesheet (display,
       border-radius) and theme.json's core/button CSS (red background, white
       text) are only emitted when WP's render pipeline detects block markup on
       the page. Hand-coded buttons in template parts (header logout, member
       sidebar, checkout) bypass that detection, leaving them as dark-grey
       square boxes. We restate the defaults here so they render correctly
       regardless of where the markup originates. The .is-style-outline rule
       below overrides background/border/colour with !important for outline
       buttons. */
    background-color: var(--wp--preset--color--eao-red);
    /* Transparent border so a solid button occupies the same box as an outline
       one, which carries a real 1px border. Without it the two differ by 2px in
       height and never line up side by side. */
    border: 1px solid transparent;
    border-radius: 100px;
    color: var(--wp--preset--color--white);
    display: inline-block;
    line-height: 1.5;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
button {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.wp-block-button__link:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 calc(2px + 2px) var(--wp--preset--color--eao-red);
}
.wp-block-button__link.has-slate-blue-background-color:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 calc(2px + 2px) var(--wp--preset--color--slate-blue);
}
.is-style-outline {
    display: inline-block;
    transition: color 0.3s ease;
}
/* Hover fill lives on the anchor (not the wrapper) so it can never overflow
   beyond the actual pill — e.g. when the .wp-block-button wrapper has w-100
   and is wider than the anchor's content-box. */
.is-style-outline a.wp-block-button__link, .is-style-outline button {
    background: transparent !important;
    border: 1px solid var(--wp--preset--color--eao-red);
    border-radius: 100px;
    color: var(--wp--preset--color--eao-red);
    overflow: hidden;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    position: relative;
    z-index: 1;
}
.is-style-outline a.wp-block-button__link::before,
.is-style-outline button::before {
    background-color: var(--wp--preset--color--eao-red);
    border-radius: 100px;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: width 0.4s ease;
    width: 0%;
    z-index: -1;
}
.is-style-outline a.wp-block-button__link:hover::before,
.is-style-outline button:hover::before {
    width: 100%;
}
.is-style-outline:hover a.wp-block-button__link, .is-style-outline:hover button {
    color: #FFF;
}

.eao--group--box-shadow, .eao--group-pricing-box {
    background-color: #FFF;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 24px rgba(0, 0, 0, 0.04);
    padding: 32px;
}
.is-vertically-aligned-stretch .eao--group--box-shadow, .is-vertically-aligned-stretch .eao--group-pricing-box {
    height: 100%;
}
.eao--group-pricing-box {
    padding: 0;
}
.eao--group-pricing-box > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 32px !important;
    text-align: center;
}
.eao--group-pricing-box > *:nth-child(1) {
    height: 280px;
}
.eao--group-pricing-box > *:nth-child(2) {
    background-color: var(--wp--preset--color--eao-red);
    color: #FFF;
    height: 180px;
}
.eao--group-pricing-box > * > * {
    justify-content: center;
    text-align: center;
}
.eao--group-pricing-box > *:nth-child(2) a {
    color: #FFF !important;
}
.eao--group--box-rounded-corners {
    background-color: #FFF;
    border: 1px solid #D5D5D5;
    border-radius: 4px;
    padding: 0.25rem;;
}
.eao--parallax-container {
    align-items: center;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display: flex;
    min-height: calc(100vh - var(--header--height));
}
.channel--latest-videos--video {
    color: #000 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}
.channel--latest-videos--video--details {
    padding: 1.25rem;
}
.channel--latest-videos--video--details--rundtime {
    font-size: 0.8em;
}
.square-block {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
}
.round-block {
    align-items: center;
    aspect-ratio: 1;
    border-radius: 9999px;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
}
.overlay--black, .overlay--red {
    position: relative;
    z-index: 0;
}
.overlay--black::before, .overlay--red::before {
    content: '';
    inset: 0;
    mix-blend-mode: hard-light;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}
.overlay--black::before {
    background: rgb(0 0 0 / 0.3)
}
.overlay--black > *, .overlay--red > * {
    z-index: 2;
}
.overlay--red::before {
    background: rgba(112 0 5 / 1);
}
.wp-block-quote {
    position: relative;
    z-index: 1;
}
.wp-block-quote::before {
    background-image: url('assets/images/quotes.svg');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: '';
    height: 276px;
    left: 0;
    position: absolute;
    width: 48vw;
    z-index: -1;
}
.wp-block-quote::after {
    background-image: url('assets/images/quotes.svg');
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    content: '';
    height: 276px;
    position: absolute;
    right: 0;
    transform: rotate(180deg);
    width: 48vw;
    z-index: -1;
}
a.wp-block-tiptip-hyperlink-group-block, a.wp-block-tiptip-hyperlink-group-block:hover {
    text-decoration: none;
}
.tag {
    background-color: var(--wp--preset--color--light-grey);
    border-radius: 100px;
    font-size: 14px;
    font-weight: var(--font-weight--semi-bold);
    padding: 0.25rem 1rem;
    text-decoration: none; /* Some are links: the invoice buttons in the order history. */
}
.tag.tag-green {
    background-color: #64AB7D;
    color: #FFF;
}
.tag.tag-highlight {
    background-color: var(--wp--preset--color--eao-red);
    color: #FFF;
}
.circular-tag img {
    aspect-ratio: 1;
    background-color: var(--wp--preset--color--light-grey);
    border-radius: 9999px;
    padding: 1rem;
}
.eao--page-header {
    padding: 0;
}
.eao--page-header > * {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.eao--page-header > * > *:first-child {
    border: 1rem solid #FFF;
    border-bottom: none;
    padding: 3rem 1rem;
}
.eao--page-header > * > *:last-child {
    width: 100%;
}
:root :where(.wp-block-separator.is-style-dots):before {
    color: #D5D5D5;
    content: "························";
    font-size: 46px;
    padding-left: 0;
}

/* Accordion */
.pb--accordion--item {
    border-top: 2px solid #F5F5F5;
    margin-top: 0;
    padding: 1em 0;
}
.pb--accordion--item--heading {
    position: relative;
}
.pb--accordion--item--heading:hover {
    cursor: pointer;
}
.pb--accordion--item--heading::after {
    border-bottom: 1px solid #4a6e78;
    border-right: 1px solid #4a6e78;
    content: " ";
    height: 12px;
    right: 10px;
    position: absolute;
    top: calc(50% - 6px);
    width: 12px;
    transform: rotate(-45deg);
    transition: all 0.2s ease-in-out;
}
.pb--accordion--item.active .pb--accordion--item--heading::after {
    transform: rotate(45deg);
    transition: all 0.2s ease-in-out;
}
.pb--accordion--item--heading > :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.5;
    margin-bottom: 0;
    padding-right: 4rem;
}
.pb--accordion--item--content {
    margin-top: 0;
    padding: 10px 15px 30px;
}
.img-has-midnight-blue-background-color img {
    background-color: var(--wp--preset--color--midnight-blue);
}
.email_back {
    display: none;
}

/* Collapse on mobile — a block style for the Group block.
   functions-front.js decides when it applies: below the width at which the
   Columns block stacks it adds .is-collapsible, keeps the group's direct-child
   headings visible and turns the last of them into a toggle for the rest.
   Nothing here hides anything on its own, so without JavaScript the group
   renders in full. */
.is-style-collapse-on-mobile.is-collapsible {
    /* The card's padding is a block attribute, so an inline style; the
       collapsed row needs less. */
    padding: 12px 20px !important;
}
.is-style-collapse-on-mobile.is-collapsible:not(.is-open) > :not(:is(h1, h2, h3, h4, h5, h6)) {
    display: none;
}
.is-style-collapse-on-mobile.is-collapsible > :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 0;
    margin-inline: 0;
    max-width: none;
    /* Padding set in the block's Dimensions panel is an inline style, so
       only !important keeps the collapsed heading on the card's edges. */
    padding: 0 !important;
    text-align: left;
}
/* A highlighted title wraps its text in a mark with side padding, which
   indents the first line only. */
.is-style-collapse-on-mobile.is-collapsible > :is(h1, h2, h3, h4, h5, h6) mark {
    padding: 0;
}
.is-style-collapse-on-mobile.is-collapsible > :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 4px;
}
.is-style-collapse-on-mobile.is-collapsible.is-open > .pb-collapse-toggle-heading {
    margin-bottom: 16px;
}
/* Open, the headings stay at the top whatever their source order, so the
   toggle is where the reader left it. */
.is-style-collapse-on-mobile.is-collapsible.is-open {
    display: flex;
    flex-direction: column;
}
.is-style-collapse-on-mobile.is-collapsible.is-open > :is(h1, h2, h3, h4, h5, h6) {
    order: -1;
}
.is-style-collapse-on-mobile.is-collapsible.is-open > :is(h1, h2, h3, h4, h5, h6) ~ * {
    margin-inline: 0;
    max-width: none;
}
.is-style-collapse-on-mobile.is-collapsible.is-open > :is(p, ul, ol) {
    text-align: left;
}
/* The theme styles every <button> as a red pill, hover and focus included,
   so the toggle has to undo that in each state at matching specificity. */
button.pb-collapse-toggle,
button.pb-collapse-toggle:not(:disabled):hover,
button.pb-collapse-toggle:focus {
    appearance: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit !important;
    cursor: pointer;
    display: block;
    font: inherit;
    padding: 0 40px 0 0;
    position: relative;
    text-align: inherit;
    text-decoration: none;
    transition: none;
    width: 100%;
}
button.pb-collapse-toggle:focus-visible {
    outline: 2px solid var(--wp--preset--color--eao-red);
    outline-offset: 4px;
}
.pb-collapse-toggle__icon {
    align-items: center;
    background-color: var(--wp--preset--color--eao-red);
    border-radius: 50%;
    color: var(--wp--preset--color--white);
    display: flex;
    font-size: 20px;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
}

/* Overlapping photos — a block style for a Group in row layout that holds
   Image blocks. Each photo is a circle with a white ring. On phones they
   shrink and overlap into a single line; from tablet width up they sit at
   full size with a gap. The Image block writes a resize as an inline style,
   so the size is asserted with !important: the style owns it. */
.wp-block-group.is-style-overlapping-photos {
    /* Sized so that six photos span the row exactly: 6 × 21% less five
       overlaps of 5.25%, with the row's left padding making up the first.
       Browsers without :has() wrap a seventh onto a second line. */
    --pb-photo-size: 21%;
    --pb-photo-overlap: 5.25%;
    flex-wrap: wrap;
    gap: 0;
    padding-left: var(--pb-photo-overlap);
}
/* Seven or more: the size at which eight span the row. */
.wp-block-group.is-style-overlapping-photos:has(> :nth-child(7)) {
    --pb-photo-size: 16%;
    --pb-photo-overlap: 4%;
}
.wp-block-group.is-style-overlapping-photos > .wp-block-image {
    flex: 0 0 auto;
    margin: 0 0 0 calc(var(--pb-photo-overlap) * -1);
    width: var(--pb-photo-size);
}
.wp-block-group.is-style-overlapping-photos img {
    aspect-ratio: 1;
    border: 2px solid var(--wp--preset--color--white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 6%);
    display: block;
    height: auto !important;
    object-fit: cover;
    width: 100% !important;
}
/* From tablet width the photos no longer overlap; they wrap into rows of up
   to three, sized to the row so that six fit a three-column card. */
@media (min-width: 782px) {
    .wp-block-group.is-style-overlapping-photos {
        --pb-photo-size: min(128px, calc((100% - 48px) / 3));
        --pb-photo-overlap: 0px;
        flex-wrap: wrap;
        gap: 24px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .is-layout-constrained,
    .eao--contained,
    .eao--page-content > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons, .wp-block-table, .wp-block-image, .wp-block-columns):where(:not(.alignfull):not(.has-background)) {
        max-width: 720px;
    }
    .eao--page-header > * {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
    }
    .eao--page-header > * > *:first-child {
        border: none;
        grid-column: 1 / span 7;
        padding: 0;
        padding-left: max(calc((100vw - 720px) / 2 + 2em), 1rem);
    }
    .eao--page-header > * > *:last-child {
        grid-column: 8 / span 6;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .is-layout-constrained,
    .eao--contained,
    .eao--page-content > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons, .wp-block-table, .wp-block-image, .wp-block-columns):where(:not(.alignfull):not(.has-background)) {
        max-width: 960px;
    }
    :root {
        --header--height: 130px;
        --header--sub-nav--height: 64px;
    }

    .wp-block-quote {
        padding-bottom: inherit;
    }
    .wp-block-quote::before {
        height: 276px;
        width: 391px;
    }
    .wp-block-quote::after {
        bottom: inherit;
        height: 276px;
        top: 0;
        width: 391px;
    }
    .eao--page-header > * > *:first-child {
        border: none;
        grid-column: 1 / span 8;
        padding: 0;
        padding-left: max(calc((100vw - 960px) / 2 + 1em), 1rem);
    }
    .eao--page-header > * > *:last-child {
        grid-column: 9 / span 4;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .is-layout-constrained,
    .eao--contained,
    .eao--page-content > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons, .wp-block-table, .wp-block-image, .wp-block-columns):where(:not(.alignfull):not(.has-background)) {
        max-width: 1140px;
    }
    .eao--page-header > * > *:first-child {
        padding-left: max(calc((100vw - 1200px) / 2 + 3em), 1rem);
    }
}

/* Extra xl large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
    .is-layout-constrained {
        max-width: 1320px;
    }

    /* A constrained Group is 1320px here but holds its children to the content
       size, so that is the width this box has to be: the content size plus its
       own gutter. */
    .eao--contained,
    .eao--page-content > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons, .wp-block-table, .wp-block-image, .wp-block-columns):where(:not(.alignfull):not(.has-background)) {
        max-width: calc(var(--wp--style--global--content-size) + 1.5rem);
    }
    .eao--page-header > * > *:first-child {
        padding-left: max(calc((100vw - 1320px) / 2 + 1em), 1rem);
    }
}

/* Publishing Bureau xxl large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {

}
/* Divided columns — inherits the border set on the parent Columns block via Gutenberg */
.has-divided-columns > .wp-block-column:not(:last-child) {
    border-bottom: inherit;
    margin-bottom: var(--wp--preset--spacing--30, 1.5rem);
    padding-bottom: var(--wp--preset--spacing--30, 1.5rem);
}

@media (min-width: 782px) {
    .has-divided-columns > .wp-block-column:not(:last-child) {
        border-bottom: none;
        border-right: inherit;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

/* Content utilities.
   The classes editors add to a block through "Additional CSS class(es)". They
   replace the handful of Bootstrap utilities the content used to borrow —
   tools/content-classes.php does the renaming — so that page content no longer
   depends on Bootstrap being loaded. Each does one thing and is named for it.
   The -md variants apply from 768px, the breakpoint their Bootstrap originals
   used. */
.eao--inline {
    /* The pill labels that use this wrap onto two lines on a phone; without
       clone only the first line gets the left padding and rounded end, and only
       the last the right. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    display: inline;
}

.eao--flex {
    display: flex;
}

.eao--flex-column {
    flex-direction: column;
}

.eao--flex-fill {
    flex: 1 1 auto;
}

.eao--justify-between {
    justify-content: space-between;
}

.eao--justify-centre {
    justify-content: center;
}

.eao--margin-top-auto {
    margin-top: auto;
}

.eao--height-full {
    height: 100%;
}

.eao--width-full {
    width: 100%;
}

/* Shrinks a block to its text; with the next one, centres it in its column. */
.eao--table {
    display: table;
}

.eao--margin-x-auto {
    margin-left: auto;
    margin-right: auto;
}

/* The content-width box, for a block that cannot be set to the constrained
   layout — Columns, or a Group that is already a row. It is the same box a
   constrained Group draws on this site: the gutter here, the stepped widths
   with .is-layout-constrained's further down. */
/* A page's own blocks get the same box when an editor places them straight into
   the page rather than inside a Group: the closing heading and paragraphs of the
   Education page ran to both edges of a phone screen. Groups, covers and
   full-width blocks are left to span the page, which is how this site draws its
   coloured bands, and so is the quote, which it styles as one. A block with a
   background of its own is a band too: the red notice strip on the Congress page
   is a paragraph. */
.eao--contained,
.eao--page-content > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-buttons, .wp-block-table, .wp-block-image, .wp-block-columns):where(:not(.alignfull):not(.has-background)) {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(1.5rem * .5);
    padding-right: calc(1.5rem * .5);
    width: 100%; /* It is a flex item in the header, where auto would shrink it. */
}

/* A page that opens with one of these, rather than with a header Group, would
   otherwise start flush against the navigation, as the legal pages did. */
.eao--page-content > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-table):first-child {
    margin-top: 3rem;
}

/* A list keeps the indent its markers sit in, on top of the gutter. */
.eao--page-content > :where(ul, ol) {
    padding-left: calc(2rem + 1.5rem * .5);
}

/* Card grids. One column on a phone, then two or three side by side from 992px
   (--cols-2-3 already has two from 768px), a 1.5rem gutter between them and the
   cards in a row all as tall as the tallest. --spaced puts the vertical space
   under every card rather than between rows, so the last row has it too, which
   is where the lists that use it have always had it. */
.eao--grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

.eao--grid--spaced {
    row-gap: 0;
}

.eao--grid--spaced > * {
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .eao--grid--cols-2-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .eao--grid--cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eao--grid--cols-3,
    .eao--grid--cols-2-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The content-width box without its side gutter, so what is inside it runs the
   full 1140px. */
.is-layout-constrained.eao--no-gutter,
.eao--contained.eao--no-gutter {
    --pb-layout--gutter: 0px;
    padding-left: 0;
    padding-right: 0;
}

/* Written by tools/content-classes.php, not by hand. A Bootstrap .container
   inside another had the gutter twice; a constrained Group inside another gives
   its gutter up. This keeps it, so those sections sit where they always have.
   Delete this rule to let them widen by the 12px a side. */
.is-layout-constrained .is-layout-constrained.eao--gutter {
    --pb-layout--gutter: calc(1.5rem * .5);
}

@media (min-width: 768px) {
    .eao--justify-start-md {
        justify-content: flex-start;
    }

    .eao--text-start-md {
        text-align: left;
    }

    .eao--text-end-md {
        text-align: right;
    }
}

/* Columns utility: alignment that follows the column stack state.
   Stacked (mobile): all content centres (text and images).
   Side-by-side (>=782px): text reverts to default; images sit on the
   outer edges (first column left, second column right). */
.columns--auto-align {
    text-align: center;
}

/* Stacked-only override for flex-based blocks (text-align doesn't reach
   flex items, so the editor's is-content-justification-* classes win). */
@media (max-width: 781.99px) {
    .columns--auto-align .wp-block-buttons.is-content-justification-left,
    .columns--auto-align .wp-block-buttons.is-content-justification-right,
    .columns--auto-align .wp-block-buttons {
        justify-content: center;
    }
}

@media (min-width: 782px) {
    .columns--auto-align {
        text-align: inherit;
    }
    .columns--auto-align > .wp-block-column:first-child .wp-block-image {
        text-align: left;
    }
    .columns--auto-align > .wp-block-column:nth-child(2) .wp-block-image {
        text-align: right;
    }
}

.red {
    color: var(--wp--preset--color--eao-red);
}
/* EAO Timeline styling */
.eao-timeline {
    position: relative;
    padding: 2rem 0;
}

/* Timeline vertical line */
.eao-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #000;
    transform: translateX(-50%);
    z-index: -1;
}

/* Position timeline boxes */
.eao-timeline .eao--group--box-shadow {
    position: relative;
    margin-bottom: 3rem;
}

/* Timeline red circle */
#timeline-red-circle {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    background-color: #E91018;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    display: none;
    pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .eao-timeline .wp-block-column[style*="flex-basis:50%"] {
        flex-basis: 100% !important;
    }
    
    .eao-timeline .wp-block-column[style*="flex-basis:25%"] {
        display: none;
    }
}

/* ---------- part 2: page and section styles (was front.css) ---------- */

/* ========================================
   CSS CUSTOM PROPERTIES & ROOT STYLES
======================================== */
:root {
    --sticky-dots-height: 300px;
}

/* ========================================
   BASE STYLES
======================================== */
body {
    font-family: var(--font-family--default);
    font-size: var(--wp--preset--font-size--medium);
    font-optical-sizing: auto;
    line-height: var(--wp--custom--typography--line-height);
}

::selection {
    background-color: var(--wp--custom--color--selection);
    color: #FFF;
}

/* Links */
/* The link colour is theme.json's. This restates it here, last in the cascade,
   so that Bootstrap's own link colour loses on the checkout pages, where the
   plugin still loads it. It used to be !important in theme.json for the same
   reason, which also silenced the editor's Link colour setting on every block;
   :where() keeps this rule below a block's own choice. */
a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--link);
}

.has-eao-red-background-color a, .has-eao-red-background-color a:hover {
    color: #FFF !important;
}

/* The same on the other dark backgrounds. The link red on the navy gradient is
   about 3:1, under the 4.5:1 that body text needs, and the course cards on the
   Education page are exactly that. A light card inside a dark section keeps the
   red. !important only because theme.json's link colour carries it. */
:is(.has-midnight-blue-background-color, .has-black-background-color, .has-red-to-red-gradient-background, .has-blue-to-blue-gradient-background) a:not(.wp-element-button) {
    color: #FFF !important;
}

:is(.has-eao-red-background-color, .has-midnight-blue-background-color, .has-black-background-color, .has-red-to-red-gradient-background, .has-blue-to-blue-gradient-background) :is(.has-white-background-color, .has-light-background-color, .has-light-grey-background-color) a:not(.wp-element-button) {
    color: var(--wp--preset--color--link) !important;
}

/* Editors paste bare URLs as link text, and a long one is a single unbreakable
   word. On the payment terms page one ran 290px past a 390px screen and took
   the whole page sideways with it. break-word rather than anywhere, so this
   only applies when the word genuinely cannot fit and leaves the intrinsic
   width of flex and grid children alone. */
p,
li,
dd,
td,
figcaption {
    overflow-wrap: break-word;
}

/* Typography.
   Heading sizes are theme.json's: the "Heading 1" to "Heading 5" font size
   presets, which editors can also pick for any block. They used to be set here,
   from variables that stepped up to 64px at 1200px — a rule that never applied on
   the live site, where Bootstrap's heading scale came later in the cascade and
   won. The presets are that scale. */

/* ========================================
   HEADER & NAVIGATION
======================================== */

/* Main Header */
header {
    background-color: var(--header--background-colour);
    display: flex;
    flex-direction: column;
    height: var(--header--height);
}

header.fixed-top,
header.sticky {
    position: absolute;
    width: 100vw;
    z-index: 9999;
}

header.fixed-top + main,
header.sticky + main {
    padding-top: var(--header--height);
}

header.stuck {
    background-color: var(--header--background-colour);
    left: 0;
    position: fixed;
    right: 0;
    top: 0 !important;
    transition: top 0.5s ease;
    z-index: 1030;
}

header > * {
    width: 100%;
}

/* Sub Navigation */
.navigation--sub {
    background-color: var(--wp--preset--color--light-grey);
    display: flex;
    height: var(--header--sub-nav--height);
    min-height: var(--header--sub-nav--height);
}

.navigation--sub--inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
}

.navigation--sub--inner > *:first-child {
    flex: 1;
}

.navigation--sub--button {
    display: none;
}

.navigation--sub .wp-block-button__link {
    font-weight: var(--font-weight--bold);
}

.navigation--sub--time-to-congress {
    align-items: center;
    display: flex;
    font-weight: var(--font-weight--semi-bold);
}

.navigation--sub--custom-message {
    color: #E91018;
    font-weight: var(--font-weight--semi-bold);
}
.navigation--sub--custom-message > p {
    margin-bottom: 0;
}

.navigation--sub--custom-message a {
    color: #E91018;
    text-decoration: underline;
}

.navigation--sub--custom-message a:hover {
    color: #CC002B;
}

/* Logo and navigation bar */
.navigation--main--d--inner {
    align-items: center;
    display: flex;
    min-height: calc(var(--header--height) - var(--header--sub-nav--height));
}

.navigation--main--d--brand {
    margin-right: 15px;
}

.navigation--main--d--brand img {
    height: auto;
    width: 110px; /* Mobile default */
}

/* Primary navigation.
   The markup follows the parent's contract (.main-navigation, .menu-toggle,
   #primary-menu, .sub-menu, a[role="menuitem"]) so the parent's main.js drives
   it — see inc/navigation.php. That also brings the parent's navigation CSS,
   from its style.css and again from assets/css/main.css for the open mobile
   menu, and it draws a different menu: a bordered toggle, padded links, a
   chevron pseudo-element, a boxed sub-menu, a list pinned to the viewport.

   Everything here is anchored on #site-navigation for that reason. The
   parent's rules run from one class to three classes and an element, so
   matching them one by one means a different selector weight for nearly every
   rule and a silent regression whenever the parent adds one. The id outranks
   all of them at once, and says what is meant: on this site, this design
   owns the navigation.

   One list serves both widths. Below 992px it is the panel the toggle opens,
   with every page's children listed under it. From 992px it is the menu bar
   and the children move into a full-width dropdown panel. */
#site-navigation {
    flex: 0 0 auto;
    gap: 0;
    margin-left: 0.5rem;
    position: static; /* The dropdown panel spans the header, not this element. */
}

#site-navigation #primary-menu {
    -webkit-overflow-scrolling: touch;
    background-color: var(--wp--preset--color--light-grey);
    border-top: none;
    bottom: auto;
    display: none;
    left: 0;
    max-height: calc(100vh - var(--header--height));
    max-height: calc(100dvh - var(--header--height));
    overflow-y: scroll;
    padding: 2rem 1rem;
    position: absolute;
    right: auto;
    top: var(--header--height);
    width: 100%;
    z-index: 1000;
}

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

#site-navigation.toggled #primary-menu {
    animation: fadeInDown 0.3s ease forwards;
    display: block;
}

#site-navigation .navigation--main--d--nav--item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    position: static;
}

#site-navigation .navigation--main--d--nav--item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#site-navigation .navigation--main--d--nav--item--link,
#site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item--link {
    display: block;
    min-height: 0;
    padding: 0;
    text-decoration: none;
}

/* The colours need !important for as long as theme.json's link colour has it,
   which is until Bootstrap leaves the theme. */
#site-navigation .navigation--main--d--nav--item--link,
#site-navigation .navigation--main--d--nav--item--link:hover {
    color: var(--navbar--item--colour) !important;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--font-weight--semi-bold);
    line-height: var(--wp--custom--typography--line-height);
}

#site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item--link,
#site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item--link:hover,
#site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item--link:focus {
    background-color: transparent;
    color: var(--navbar--dropdown--item--colour) !important;
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--custom--typography--line-height);
    white-space: normal;
}

#site-navigation .current-menu-item > .navigation--main--d--nav--item--link,
#site-navigation .current-page-ancestor > .navigation--main--d--nav--item--link,
#site-navigation .sub-menu .current-menu-item > .navigation--main--d--nav--item--dropdown-menu--item--link {
    font-weight: var(--font-weight--bold);
}

/* The parent's focus ring is drawn in its highlight colour, which this site's
   palette does not define. An undefined variable voids the whole outline
   declaration, which would leave keyboard focus with no indicator at all. */
#site-navigation a:focus-visible,
#site-navigation .sub-menu a:focus-visible {
    outline: 2px solid var(--wp--preset--color--eao-red);
    outline-offset: 2px;
}

/* The chevron is an inline SVG here, and belongs to the menu bar only. */
#site-navigation .menu-item-has-children > a::after {
    content: none;
}

.navigation--main--d--nav--item--link svg {
    display: none;
}

/* Dropdown panel. Below 992px it is not a panel at all: the heading and image
   are left out and the links sit in the flow under their parent, so the
   wrappers that lay the panel out are taken out of the layout until then. */
.navigation--main--d--nav--item--dropdown-menu h2,
.navigation--main--d--nav--item--dropdown-menu--image {
    display: none;
}

.navigation--main--d--nav--item--dropdown-menu--layout,
.navigation--main--d--nav--item--dropdown-menu--links {
    display: contents;
}

#site-navigation .sub-menu {
    background-color: transparent;
    border: none;
    box-shadow: none;
    display: block;
    margin: 1rem 0 0 0;
    min-width: 0;
    padding: 0 0 0 1.5rem;
    position: static;
}

#site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item {
    border-bottom: none;
    margin-bottom: 0.75rem;
}

#site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item:last-child {
    margin-bottom: 0;
}

/* Member links, shown below 992px. They sit beside the navigation rather than
   in it, so the parent's menu link styles do not reach them. */
.navigation--main--m--buttons {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.navigation--main--m--button {
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0;
}

.navigation--main--m--button img {
    height: 24px;
    width: 24px;
}

/* The toggle is a 24px icon with a 44px touch target: the padding that makes
   up the difference is cancelled by the margin, so it takes up 24px in the
   row. Everything else here undoes two rules that would otherwise reach it —
   the parent's bordered .menu-toggle, and this theme's own red pill for every
   <button>, whose hover forces white text with !important. */
#site-navigation .menu-toggle,
#site-navigation .menu-toggle:hover,
#site-navigation .menu-toggle:focus {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--wp--preset--color--eao-red) !important;
    display: flex;
    margin: -10px;
    min-height: 0;
    min-width: 0;
    outline: none;
    padding: 10px;
}

#site-navigation .menu-toggle:focus-visible {
    outline: 2px solid var(--wp--preset--color--eao-red);
    outline-offset: 2px;
}

.menu-toggle .line-top,
.menu-toggle .line-bottom {
    transition: transform 0.3s ease;
    transform-origin: 15px center;
}

.menu-toggle[aria-expanded="true"] .line-top {
    transform: translateY(5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .line-bottom {
    transform: translateY(-7px) rotate(-45deg);
}

/* Bootstrap's .container steps its width at 576px and 768px; the open menu
   used to sit inside one, so its links keep that alignment. */
@media (min-width: 576px) {
    #site-navigation #primary-menu {
        padding-left: calc((100% - 540px) / 2 + 1rem);
        padding-right: calc((100% - 540px) / 2 + 1rem);
    }
}

@media (min-width: 768px) {
    #site-navigation #primary-menu {
        padding-left: calc((100% - 720px) / 2 + 1rem);
        padding-right: calc((100% - 720px) / 2 + 1rem);
    }
}

/* Menu bar, from 992px */
@media (min-width: 992px) {
    #site-navigation {
        flex: 1;
        margin-left: auto;
    }

    #site-navigation #primary-menu,
    #site-navigation.toggled #primary-menu {
        animation: none;
        background-color: transparent;
        display: flex;
        margin-left: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        position: static;
        width: auto;
    }

    .navigation--main--m--buttons,
    #site-navigation .menu-toggle {
        display: none;
    }

    #site-navigation .navigation--main--d--nav--item {
        border-bottom: none;
        margin-bottom: 0;
        padding: 0 1rem;
    }

    #site-navigation .navigation--main--d--nav--item:first-child {
        padding-left: 0;
    }

    #site-navigation .navigation--main--d--nav--item:last-child {
        padding-right: 0;
    }

    #site-navigation .navigation--main--d--nav--item--link,
    #site-navigation .navigation--main--d--nav--item--link:hover {
        align-items: center;
        display: flex;
        font-weight: inherit;
        height: 100%;
        line-height: 1.3;
    }

    #site-navigation .current-menu-item > .navigation--main--d--nav--item--link,
    #site-navigation .current-page-ancestor > .navigation--main--d--nav--item--link {
        font-weight: var(--font-weight--bold);
    }

    .navigation--main--d--nav--item--link svg {
        display: inline-block;
        margin-left: 5px;
    }

    /* Open on hover and on keyboard focus. functions-front.js adds .is-closed
       when Escape is pressed, so a panel can be dismissed without moving focus
       out of it, and mirrors the state into aria-expanded. */
    .navigation--main--d--nav--item--dropdown-menu {
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
        display: none;
        left: 0;
        padding-top: calc((var(--header--height) - var(--header--sub-nav--height) - (var(--wp--preset--font-size--medium) * 1.3)) / 2);
        position: absolute;
        width: 100vw;
    }

    .menu-item-has-children:hover > .navigation--main--d--nav--item--dropdown-menu,
    .menu-item-has-children:focus-within > .navigation--main--d--nav--item--dropdown-menu {
        display: block;
    }

    .menu-item-has-children.is-closed > .navigation--main--d--nav--item--dropdown-menu {
        display: none;
    }

    .navigation--main--d--nav--item--dropdown-menu--inner {
        background-color: var(--wp--preset--color--light-grey);
        background-image: url(assets/images/dots-dark.svg);
        background-position: right;
        background-repeat: repeat-y;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }

    .navigation--main--d--nav--item--dropdown-menu h2 {
        display: block;
        margin-bottom: 3rem;
    }

    /* Links in seven twelfths, the page's featured image in the rest. The
       10px is what Bootstrap's gutters came to: its col-lg-7 was seven twelfths
       of a row 24px wider than this box, less 24px of its own padding. */
    .navigation--main--d--nav--item--dropdown-menu--layout {
        column-gap: 1.5rem;
        display: grid;
        grid-template-columns: calc(58.33333333% - 10px) minmax(0, 1fr);
    }

    .navigation--main--d--nav--item--dropdown-menu--links,
    .navigation--main--d--nav--item--dropdown-menu--image {
        display: block;
    }

    #site-navigation .sub-menu {
        column-gap: 2rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 0 1rem 0;
        padding: 0;
        row-gap: 2.25rem;
    }

    #site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item {
        margin-bottom: 0;
    }

    #site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item--link,
    #site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item--link:hover,
    #site-navigation .sub-menu .navigation--main--d--nav--item--dropdown-menu--item--link:focus {
        font-size: var(--wp--preset--font-size--medium);
    }
}

/* Navigation Button Styling */
.navigation .wp-block-button__link {
    font-size: 14px;
    padding: 0.25rem 0.75rem;
}

/* Header Basket */
.header__navbar__basket {
    margin-right: 0;
    margin-left: auto;
}

.header__navbar__basket a {
    color: var(--wp--preset--color--eao-red);
    font-size: 1.2rem;
}

.header__navbar__basket__hidden {
    display: none;
}

/* ========================================
   UTILITY COMPONENTS
======================================== */

/* Sticky Dots Background */
.has-sticky-dark-dots-background {
    position: relative;
}

.sticky-dots-bg {
    height: var(--sticky-dots-height);
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.sticky-dots-bg--inner {
    background-image: url(assets/images/dots-dark.svg);
    background-repeat: repeat;
    height: 100%;
    width: 100%;
}

/* Time to Congress Widget */
.eao-widget--time-to-congress {
    display: flex;
    margin: 0;
}

.eao-widget--time-to-congress > * {
    align-items: center;
    display: flex;
    font-size: 40px;
    flex-direction: column;
    justify-content: center;
}

.eao-widget--time-to-congress > * > *:first-child {
    color: var(--wp--preset--color--slate-blue);
    font-weight: bold;
}

.eao-widget--time-to-congress > * > *:nth-child(2) {
    font-size: 0.3em;
    margin-right: 1em;
    text-align: center;
}

/* Ticker */
.ticker {
    background-color: var(--wp--preset--color--eao-red);
    color: #FFF;
    overflow: hidden;
    padding: 0.5rem 0;
    position: relative;
    width: 100%;
}

/* The wrapper the content actually uses. Unclipped, the scrolling row made the
   certificate pages some 4,000px wide, and they scrolled sideways on a phone. */
.ticker-wrapper {
    overflow: hidden;
}

.ticker-content {
    display: flex;
    white-space: nowrap;
    animation: ticker 20s linear infinite;
}

.ticker-content.paused {
    animation-play-state: paused;
}

.ticker-content > * {
    flex-shrink: 0;
    padding: 0 1rem;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Counters */
.eao--counter {
    font-size: 3rem;
    font-weight: var(--font-weight--bold);
}

/* ========================================
   UI COMPONENTS
======================================== */

/* Accordions */
.pb--accordion--item {
    margin-top: 0;
}

.pb--accordion--item--heading {
    position: relative;
}

.pb--accordion--item--heading:hover {
    cursor: pointer;
}

.pb--accordion--item--heading::after {
    border-bottom: 1px solid #4a6e78;
    border-right: 1px solid #4a6e78;
    content: " ";
    height: 12px;
    right: 10px;
    position: absolute;
    top: calc(50% - 6px);
    width: 12px;
    transform: rotate(-45deg);
    transition: all 0.2s ease-in-out;
}

.pb--accordion--item.active .pb--accordion--item--heading::after {
    transform: rotate(45deg);
    transition: all 0.2s ease-in-out;
}

/* The room above and below the title is margin, not line height. At a line
   height of 2 a title that wrapped, as they all do on a phone, had a full blank
   line between its two lines. 1.3 and 0.35em either side is the same 2em for a
   title on one line. */
.pb--accordion--item--heading > :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.3;
    margin-bottom: 0.35em;
    margin-top: 0.35em;
    padding-right: 4rem;
}

.pb--accordion--item--content {
    margin-top: 0;
    padding-bottom: 30px;
    padding-top: 10px;
}

.pb--accordion--item:not(.active) .pb--accordion--item--content {
    display: none;
}

/* Swiper */
.swiper {
    margin-bottom: 2rem;
    position: relative;
}

.swiper-wrapper {
    align-items: stretch;
}

.swiper-slide {
    height: auto;
}

.swiper--button-prev,
.swiper--button-next {
    background-color: var(--wp--preset--color--eao-red);
    border-radius: 50%;
    color: #FFF;
    cursor: pointer;
    height: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    z-index: 10;
}
.swiper--button-prev > img,
.swiper--button-next > img {
    display: none;
}

.swiper--button-prev {
    left: 10px;
}

.swiper--button-next {
    right: 10px;
}

.swiper--button-prev::after,
.swiper--button-next::after {
    align-items: center;
    display: flex;
    font-size: 1.5rem;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.swiper--button-prev::after {
    content: "<";
}

.swiper--button-next::after {
    content: ">";
}

.swiper--content .swiper-backface-hidden .swiper-slide {
    margin-right: 0 !important;
}
.swiper-button-next, .swiper-button-prev {
    margin: 0 1rem;
}

/* WP Swiper Overrides */
.swiper-button-next, .swiper-button-prev {
    background-color: var(--wp--preset--color--eao-red) !important;
    border-radius: 50% !important;
    color: #FFF !important;
    height: 40px !important;
    width: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 15px !important;
    color: #FFF !important;
    line-height: 40px;
}
/* The plugin's Swiper 14 draws its navigation arrow as an injected
   <svg class="swiper-navigation-icon">, not the ::after glyph that Swiper 11
   used, so the arrow is styled here rather than through the ::after rule
   above. Both were briefly drawn at once — a double arrow — while this theme
   still loaded its own Swiper 11 alongside the plugin's; see
   eao_enqueue_swiper() for why only one copy loads now. */
.swiper-button-next .swiper-navigation-icon,
.swiper-button-prev .swiper-navigation-icon,
.wp_swiper__navigation-container .swiper-navigation-icon {
    color: #FFF;
    height: 15px !important;
    width: 15px !important;
}

/* ========================================
   FOOTER
======================================== */
.footer {
    background: var(--footer--background-colour);
    color: var(--footer--colour);
    padding-bottom: 6rem;
    padding-top: 6rem;
}

.footer a {
    color: var(--wp--preset--color--black) !important;
    text-decoration: none;
}

/* One column on a phone. From 992px the link lists take three quarters, four
   to a row, and the logo, address and newsletter take the rest.
   The 6px is Bootstrap's gutter arithmetic: its col-lg-9 was three quarters of a
   row 24px wider than this box, less 24px of its own padding. */
.footer--layout,
.footer--columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.footer--about {
    margin-bottom: 3rem;
}

.footer--logo,
.footer--address,
.footer--socials {
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .footer--layout {
        column-gap: 1.5rem;
        grid-template-columns: calc(75% - 6px) minmax(0, 1fr);
    }

    /* Four lists to a row, as the live site has them; the rest wrap onto a
       second row. All six in one row left each 119px wide, and nearly every
       link on three lines. */
    .footer--columns {
        column-gap: 1.5rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.footer--navigation {
    list-style: none;
    padding-left: 0;
    margin-bottom: 3rem;
}

.footer--navigation > li {
    margin-bottom: 12px;
}

.footer--navigation > li:first-child {
    font-weight: bold;
}

.footer--navigation > li:last-child {
    margin-bottom: 0;
}

.footer--logo img {
    max-width: 160px;
    height: auto;
}

.footer--address {
    font-size: 14px;
    font-style: normal;
    line-height: 1.6;
}

.footer--socials {
    align-items: center;
    display: flex;
    gap: 10px;
    list-style: none;
    padding-left: 0;
}

.footer--socials li a {
    align-items: center;
    border: 1px solid var(--wp--preset--color--eao-red);
    border-radius: 999px;
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.footer--socials i {
    color: var(--wp--preset--color--eao-red) !important;
    font-size: 18px;
}

.footer--legals a {
    display: inline-block;
    font-size: 13px;
    text-decoration: underline;
}

.footer--legals a:not(:last-child)::after {
    content: '|';
    margin-left: 8px;
    margin-right: 3px;
}

/* Build versions: muted, but slate-blue rather than a light grey so it still
   clears AA contrast against the footer background */
.footer--versions {
    color: var(--wp--preset--color--slate-blue);
    font-size: 12px;
    margin-top: 1rem;
    text-align: right;
}

/* ========================================
   FORMS & BUTTONS
======================================== */

/* General Button Styling */
button, 
input[type="submit"] {
    background-color: var(--wp--preset--color--eao-red);
    border: none;
    border-radius: 999px;
    color: var(--wp--preset--color--white);
    font-family: var(--font-family--default);
    font-size: 14px;
    font-weight: var(--font-weight--bold);
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

button:not(:disabled):hover, 
input[type="submit"]:hover {
    background: var(--wp--preset--color--eao-red); 
    box-shadow: 0 0 0 2px white, 0 0 0 calc(2px + 2px) var(--wp--preset--color--eao-red);
    color: var(--wp--preset--color--white) !important; 
    text-decoration: none !important;
}

button:disabled, 
a.button:not([href]), 
a.wp-block-button__link:not([href]), 
input[type="submit"]:disabled {
    background-color: #E4E6E7;
    color: #5F6265;
}

a.button:not([href]):hover,
a.wp-block-button__link:not([href]):hover {
    box-shadow: none;
    color: #5F6265 !important;
    cursor: default;
}

/* Required Field Indicators */
/* Contact form. The 12px either side is what its Bootstrap container had, and
   flow-root keeps the last field's margin inside it, as that container did. */
.contact_us_form {
    display: flow-root;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* The single-line fields are the flat grey ones of the membership forms. They
   had that from pb-checkout's stylesheet, which styles anything carrying
   Bootstrap's form-control class and is loaded on every page; this form no
   longer relies on either. The message box was never covered by it. */
.contact_us_form input.eao--input {
    background-color: #f2f2f2;
    border: none;
    border-radius: 0;
    color: #000;
    height: 40px;
}

.contact_us_form input.eao--input:focus {
    background-color: #fff;
    border-color: #86b7fe;
    color: #212529;
}

.contact_us_form--field {
    margin-bottom: 1rem;
}

.contact_us_form--field--last {
    margin-bottom: 3rem;
}

.contact_us_form textarea {
    height: 150px;
}

/* Shown by functions-front.js once the form has been sent. */
.contact_us_form .errors,
.contact_us_form .success {
    display: none;
}

.contact_us_form--submit {
    appearance: none;
    background-clip: padding-box;
    display: block;
    height: 40px;
    width: 100%;
}

.contact_us_form--field.required label::after {
    content: " *";
    color: var(--wp--preset--color--eao-red);
    font-size: 0.9em;
    font-weight: bold;
}

/* Gravity Forms Styling */
.gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), 
.gform-theme.gform-theme--framework.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), 
.gform-theme.gform-theme--framework.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), 
.gform-theme.gform-theme--framework.gform_wrapper button.button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), 
.gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), 
.gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), 
.gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    background-color: var(--wp--preset--color--eao-red) !important;
    border: none;
    border-radius: 999px !important;
    color: var(--wp--preset--color--white);
    font-family: var(--font-family--default);
    font-size: 14px;
    font-weight: var(--font-weight--bold);
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    background: #F9F9FB !important;
}

#gform_submit_button_5 {
    box-sizing: border-box;
    height: 50px;
    padding: 15px;
    width: 80px;
}
.gform_wrapper .gform_labels_white .gfield_label {
    color: #ffffff;
}

.has-blue-to-blue-gradient-background .gform_confirmation_message {
    color: #FFF;
}

.has-text-align-center--children > * {
    text-align: center;
}

/* ========================================
   EAO CHANNEL COMPONENTS - MOBILE FIRST
======================================== */

/* Channel Dashboard */
.eao-channel-filter {
    align-items: center;
    column-gap: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 1.5rem;
}

.eao-channel-filter h4 {
    margin-bottom: 0;
}

.eao-channel-dashboard .channel-item {
    border-radius: 5px;
    height: 100%;
    overflow: hidden;
}

.eao-channel-dashboard .channel-item-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.eao-channel-dashboard .channel-item-link:hover {
    text-decoration: none;
    color: inherit;
}

.eao-channel-dashboard .channel-item-link * {
    color: inherit !important;
}

.eao-channel-dashboard .channel-thumbnail {
    position: relative;
    overflow: hidden;
    height: 200px;
    background: #f5f5f5;
}

.eao-channel-dashboard .channel-thumbnail img {
    object-fit: cover;
}

.eao-channel-dashboard .channel-thumbnail--image {
    height: 100%;
    max-width: 100%;
    width: 100%;
}

.eao-channel-dashboard .channel-title {
    color: #000 !important;
    margin-bottom: 0.25rem !important;
    margin-top: 0.25rem !important;
}

.eao-channel-dashboard .channel-content {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: #000;
}

.eao-channel-dashboard .channel-meta {
    margin-bottom: 0.5rem;
}

.eao-channel-dashboard .channel-meta small {
    color: #6c757d !important;
}

.eao-channel-dashboard .channel-excerpt {
    margin-bottom: 0.5rem;
    color: #6c757d !important;
}

.eao-channel-dashboard .channel-details {
    margin-bottom: 0.5rem;
}

.eao-channel-dashboard .channel-details small {
    color: #6c757d !important;
    display: block;
}

.eao-channel-dashboard .channel-watch-link {
    color: var(--wp--preset--color--eao-red) !important;
    margin-top: auto;
    padding-top: 0.75rem;
}

.eao-channel-dashboard .filter-form {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start; /* Mobile default */
    margin-top: 1rem; /* Mobile default */
    width: auto;
}

/* The shape of a Bootstrap button in this theme's red. It stays red while it is
   pressed; it used to flash Bootstrap's blue. */
.eao-channel-dashboard .filter-button {
    align-items: center;
    background-color: var(--wp--preset--color--eao-red);
    border: 1px solid var(--wp--preset--color--eao-red);
    border-radius: 0.375rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    gap: 0.5rem;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

.eao-channel-dashboard .filter-button:hover {
    opacity: 0.9;
}

.eao-channel-dashboard .filter-button:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
    outline: 0;
}

.eao-channel-pagination,
.eao-digest-pagination {
    margin-top: 1.5rem;
}

/* Single Channel Template - Mobile First */
.single-channel .video-navigation,
.single-digest .article-navigation {
    border-top: 1px solid #dee2e6;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

/* One column on a phone, three from 768px with a 1.5rem gutter. */
.video-meta--layout,
.video-navigation--layout,
.article-navigation--layout {
    align-items: center;
    column-gap: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.video-meta--layout {
    align-items: start;
}

.single-channel .video-navigation--layout > div {
    margin-bottom: 1rem; /* Mobile default */
    text-align: center; /* Mobile default */
}

.article-navigation--centre {
    text-align: center;
}

.article-navigation--end {
    text-align: right;
}

.single-channel .entry-footer {
    margin-bottom: 2rem;
}

.single-channel .youtube-embed-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* Mobile aspect ratio default */
}

.single-channel .youtube-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.single-channel .video-url-container {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.single-channel .featured-image-container {
    text-align: center;
}

.single-channel .featured-image-container img {
    border-radius: 8px;
    max-height: 500px;
    object-fit: cover;
}

.single-channel .video-meta {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.single-channel .video-meta--layout > div {
    margin-bottom: 1rem; /* Mobile default */
}

.single-channel .video-meta strong {
    color: var(--wp--preset--color--eao-red);
}

.single-channel .entry-content {
    font-size: 1.1rem;
    line-height: 1.6;
}

.single-channel .entry-footer {
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

.single-channel .entry-footer,
.single-digest .entry-footer {
    margin-top: 1.5rem;
}


/* ========================================
   DIGEST
======================================== */
/* On the inner wrapper: the dashboard itself is a child of a constrained Group,
   whose block-gap rule sets its margins. */
.eao-digest-dashboard--inner {
    margin-bottom: 3rem;
    margin-top: 3rem;
}

.digest-item {
    height: 100%;
}

.digest-item-link {
    text-decoration: none;
}
.digest-item-link, .digest--latest-articles--article {
    color: #000 !important;
    display: flex !important;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}
.digest-item-link h5 {
    color: var(--wp--preset--color--eao-red);
}
.digest-thumbnail, .digest--latest-articles--article--thumbnail {
    margin-bottom: 0.5rem;
}
.digest-content, .digest--latest-articles--article--details {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.digest-content > *:last-child, .digest--latest-articles--article--details *:last-child {
    margin-top: auto;
}
.digest-meta {
    margin-bottom: 0.5rem;
}

.digest-meta small,
.digest-excerpt,
.digest--latest-articles--article--date {
    color: rgba(33, 37, 41, 0.75);
}

.digest-title,
.digest-excerpt {
    margin-bottom: 0.5rem;
}
.digest-thumbnail-img {
    border-radius: 5px;
}
.digest-read-link .fa-lock,
.digest-read-link .fa-lock-open {
    margin-right: 0.25em;
}

/* Digest Single */
.digest-single-has-image {
    padding-top: 0.75rem;
    padding-bottom: 0;
}
.digest-single-featured-image {
    border-radius: 5px;
    width: 100%;
}
.single-digest .featured-image-container {
    margin-bottom: 1.5rem;
}
.digest-single-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}
.single-digest .article-excerpt {
    background-color: #f8f9fa;
    border-left: 4px solid #007cba;
    border-radius: 5px;
    margin-bottom: 1.5rem;
    padding: 1rem;
}
.single-digest .article-excerpt h5 {
    margin-bottom: 0.5rem;
}
.digest-single-meta__item strong {
    margin-right: 0.35em;
}
@media (min-width: 768px) {
    .digest-single-meta {
        flex-direction: row;
        gap: 2rem;
    }
}


/* ========================================
   CUSTOM POST TYPES & CONTENT
======================================== */

/* Page Headers */
.eao--page-header img {
    border-radius: 10px;
    border: none !important;
}

/* Home Cover Video */
.home--cover-video {
    height: auto;
    width: 100vw;
}

/* Search results. A flex column so that no margin collapses into its
   neighbour's: each of these was its own Bootstrap row, and rows do not let
   their children's margins out. Not .search-results, which WordPress puts on
   the body of this page. */
.search--results {
    margin-top: 3rem;
}

.search--results--main {
    display: flex;
    flex-direction: column;
}

.search--results--main > hr {
    margin: 2.5rem 0;
}

/* The rule under each result ran the width of a Bootstrap row, which is 12px
   wider than its content on either side. */
.search--results--item {
    border-bottom: 1px solid #dee2e6;
    display: flow-root;
    margin: 0 -0.75rem 3rem;
    padding: 0 0.75rem 1.5rem;
}

.search--results--none {
    display: flow-root;
}

@media (min-width: 992px) {
    .search--results--main {
        max-width: calc(66.66666667% - 8px);
    }
}

/* Committee Single */
.committee--single--people {
    padding-bottom: 3rem;
    padding-top: 3rem;
}

.committee--single--quote-role {
    margin-top: 0;
}

/* Committees grid */
.committees_grid__committee {
    height: 100%;
}

/* People */
.people--single {
    margin-top: 3rem;
}

/* Two classes, to outrank the block library's body .is-layout-flex. */
.people--swiper .people--swiper--card {
    display: inline-flex;
    flex-direction: column;
}

.people--swiper--card--details {
    width: 100%;
}

/* Committee Single Person */
.committee--single--person {
    height: 100%;
    padding: 5px;
}

.committee--single--person--chair, 
.committee--single--person--chair a {
    color: #FFF !important;
}

.committee--single--person--image {
    text-align: center;
    border-radius: 10px;
    height: 252px !important;
    overflow: hidden;
}

.committee--single--person--image img {
    height: 252px !important;
    object-fit: cover;
    width: 100% !important;
}

.committee--single--person--contact .committee--single--person--image {
    background-color: #F5F5F5;
}

.committee--single--person--details {
    padding: 15px;
}

/* People Person */
.people--person {
    align-items: stretch;
    height: 100%;
    padding: 5px;
}

.people--person--image {
    height: 250px;
    overflow: hidden;
}

.people--person--image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.people--person--details {
    padding: 15px;
}

/* ========================================
   404
======================================== */

.page-not-found {
    background-image: url('assets/images/cross-pattern.svg');
    height: calc(100vh - var(--header--height));
    min-height: calc(100vh - var(--header--height));
}
.page-not-found--inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
}
.page-not-found--inner > * {
    margin: 15px 0;
}
/* The graphic is 849px wide and carried a .w-full class that is defined
   nowhere — that is a Tailwind name, and this site is on Bootstrap, where the
   equivalent is .w-100. With no sizing at all it pushed the 404 page 230px
   wider than a 390px screen, so the whole page scrolled sideways. */
.page-not-found--graphic {
    display: block;
    height: auto;
    max-width: 100%;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
======================================== */

/* Small devices (576px and up) */
@media (min-width: 576px) {
    /* Add small device specific styles here if needed */
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .eao-channel-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eao-channel-dashboard .filter-form {
        margin-top: 0;
        justify-content: flex-end;
    }

    .video-meta--layout,
    .video-navigation--layout,
    .article-navigation--layout {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .single-channel .video-navigation--layout > div {
        margin-bottom: 0;
        text-align: left;
    }
    
    .single-channel .youtube-embed-container {
        padding-bottom: 56.25%; /* Standard 16:9 aspect ratio */
    }
    
    .single-channel .video-meta--layout > div {
        margin-bottom: 0;
    }
}

/* Large devices (992px and up) */
@media (min-width: 992px) {
    /* Header */
    .navigation--main--d--brand img {
        width: 175px; /* Larger logo on desktop */
    }
    
    .navigation--sub--button {
        display: block;
    }

    .navigation--sub--inner > *:not(:last-child) {
        margin-right: 1rem;
    }
    
    .header__navbar__basket {
        margin-right: 1rem !important;
    }
    
    .header__navbar__basket a {
        font-size: 1.5rem;
    }
    
    /* Button styling */
    .navigation .wp-block-button__link {
        font-size: 16px;
        padding: 0.5rem calc(1.333em + 2px);
    }
    
    /* Time to Congress Widget */
    .eao-widget--time-to-congress > * {
        font-size: 70px;
    }
    
    .eao-widget--time-to-congress > * > *:nth-child(2) {
        font-size: 14px;
    }
    
    /* Home Cover Video */
    .home--cover-video {
        height: calc(100vh - var(--header--height));
    }
}

/* WordPress mobile break point display management*/
.pb-display-mobile-only {
    display: none;
}
@media (max-width: 781px) {
    .pb-display-mobile-only {
        display: block;
    }
    .pb-display-desktop-only {
        display: none;
    }
}