/**
 * Orbit Theme Stylesheet
 * 
 * Table of Contents:
 * 1. Reset & Base Styles
 * 2. Layout & Containers
 * 3. Typography & Text
 * 4. Forms & Inputs
 * 5. Tooltips
 * 6. Header & Navigation
 * 7. Mobile Navigation
 * 8. Posts & Archives
 * 9. Grid & Flex Utilities
 * 10. Media Queries
 * 11. Card Component
 * 12. Block Extensions & Styles
 */


/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */

   html {
    line-height: 1.1;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    box-sizing: border-box;
    /* --header-offset is measured live by global.js (sticky header incl. the
       notice bar and admin bar). The fallback covers notice + main bar. */
    scroll-padding-top: calc(var(--header-offset, 106px) + 16px);
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* ----- Screen-reader-only utility -----
   Canonical WordPress accessibility pattern. Visually hides content while
   keeping it in the accessibility tree (used by the skip-link, pagination,
   comment nav, form labels, etc.). Without this rule those "hidden" labels
   render as visible on-screen text. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}

/* Reveal sr-only interactive controls (notably the skip-link) when they
   receive keyboard focus, so sighted keyboard users can see and use them. */
.screen-reader-text:focus {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    clip: auto !important;
    clip-path: none;
    display: block;
    width: auto;
    height: auto;
    left: 16px;
    top: 16px;
    z-index: 100000;
    padding: 12px 20px;
    border-radius: var(--wp--custom--border--radius--small, 6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 600;
    text-decoration: none;
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* The skip-link target wrapper shouldn't show a focus ring when focus falls
   back to it (the skip link normally lands on the first focusable child). */
#main-content:focus {
    outline: none;
}

/* Temporary highlight applied by global.js to whatever element the skip link
   sends focus to, so keyboard users clearly see where they landed. Added on
   activation, removed on blur. !important overrides the #main-content:focus
   reset above when focus falls back to the region itself. */
.skip-link-target {
    outline: 3px solid var(--wp--preset--color--primary) !important;
    outline-offset: 3px;
    border-radius: 4px;
    scroll-margin-top: calc(var(--header-offset, 106px) + 16px);
}

figure {
    margin: 0;
}

img {
    border-style: none;
}

iframe {
    display: block;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

blockquote {
    margin: 0;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

details {
    display: block;
}

summary {
    display: list-item;
}


/* ==========================================================================
   2. LAYOUT & CONTAINERS
   ========================================================================== */

.wrap {
    margin: auto;
    max-width: var(--wp--style--global--content-size);
    width: 100%;
    padding-left: var(--wp--preset--spacing--medium);
    padding-right: var(--wp--preset--spacing--medium);
}


/* ==========================================================================
   3. TYPOGRAPHY & TEXT
   ========================================================================== */

a {
    background-color: transparent;
    color: inherit;
    word-break: break-word;
    outline-offset: 2px;
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
}

b,
strong {
    font-weight: 700;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted;
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}


/* ==========================================================================
   4. FORMS & INPUTS
   ========================================================================== */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

input[type=search] {
    box-sizing: border-box;
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0;
    border: none;
    margin: 0;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Placeholders */
::-moz-placeholder {
    color: var(--wp--preset--color--primary);
    opacity: 1;
}

::-ms-input-placeholder {
    color: var(--wp--preset--color--primary);
}

::-webkit-input-placeholder {
    color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   5. TOOLTIPS
   ========================================================================== */

[data-tooltip] {
    position: relative;
    z-index: 10;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    visibility: hidden;
    width: max-content;
    max-width: 150px;
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
    text-align: center;
    padding: 8px 10px;
    border-radius: var(--wp--custom--border--radius--small);
    position: absolute;
    z-index: 1000;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
}

[data-tooltip]::before {
    content: '';
    visibility: hidden;
    position: absolute;
    z-index: 1000;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    opacity: 0;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--wp--preset--color--black);
}

[data-tooltip].visible::after,
[data-tooltip].visible::before {
    visibility: visible;
    opacity: 1;
}

/* Tooltip: Below */
[data-tooltip].below::after {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%);
}

[data-tooltip].below::before {
    bottom: auto;
    top: calc(100% - 4px);
    border-top-color: transparent;
    border-bottom-color: var(--wp--preset--color--black);
}

/* Tooltip: Right */
[data-tooltip].right::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
}

[data-tooltip].right::before {
    top: 50%;
    left: calc(100% + 5px);
    right: auto;
    transform: translateY(-50%) rotate(45deg);
    border-bottom-color: #333;
    border-left-color: #333;
    border-top-color: transparent;
    border-right-color: transparent;
}

/* Tooltip: Left */
[data-tooltip].left::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 5px);
    transform: translateY(-50%);
}

[data-tooltip].left::before {
    top: 50%;
    left: auto;
    right: calc(100% + 5px);
    transform: translateY(-50%) rotate(-45deg);
    border-bottom-color: #333;
    border-right-color: #333;
    border-top-color: transparent;
    border-left-color: transparent;
}

.tooltip-desc {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
    --header-pad-x: clamp(20px, 2vw, 30px);
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--white);
}

.admin-bar .site-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header a {
    color: inherit;
    text-decoration: none;
}

/* ----- Top bar ----- */
.site-header__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 24px;
    padding: 8px var(--header-pad-x);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--wp--preset--font-size--tiny);
    line-height: 1.4;
}

.site-header__notice {
    margin: 0;
    color: var(--wp--custom--color--on-dark-text);
}

.site-header__notice a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-header__utility {
    margin-left: auto;
}

.utility-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

.utility-menu a:hover,
.utility-menu .current-menu-item > a {
    color: var(--wp--preset--color--primary);
}

/* ----- Main bar ----- */
.site-header__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    min-height: var(--wp--custom--header--height);
    padding: 16px var(--header-pad-x);
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 16px 26px;
    min-width: 0;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ----- Logo ----- */
.site-header__logo,
.custom-logo-link {
    display: inline-flex;
    align-items: center;
    flex: none;
    font-family: var(--wp--preset--font-family--archivo);
    font-stretch: 125%;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
}

.custom-logo-link .custom-logo {
    display: block;
    width: auto;
    height: 40px;
    max-width: 220px;
    object-fit: contain;
}

/* ----- Header buttons (Theme Features → Header) ----- */
.header-buttons {
    display: flex;
    gap: 12px;
}

.header-button {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.header-button--outline {
    padding: 11px 18px;
    border: 2px solid currentColor;
    color: var(--wp--preset--color--white);
}

.header-button--outline:hover {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--ink) !important;
}

.header-button--primary {
    padding: 13px 22px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--black) !important;
    box-shadow: var(--wp--preset--shadow--offset-white-sm);
}

.header-button--primary:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 var(--wp--preset--color--white);
}

/* ----- Desktop Navigation ----- */
#nav-menu {
    display: none;
}

.site-header #nav-menu ul.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header #nav-menu .menu-item {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.site-header #nav-menu .menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--wp--preset--color--white);
    cursor: pointer;
}

/* Dropdown caret on parent items. */
.site-header #nav-menu .menu > .menu-item-has-children > a::after {
    content: "";
    position: relative;
    top: 2px; /* optical centre: a down-pointing triangle sits high against bold caps */
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s ease;
}

.site-header #nav-menu .menu > .menu-item-has-children:hover > a::after,
.site-header #nav-menu .menu > .menu-item-has-children.is-open > a::after {
    transform: rotate(180deg);
}

.site-header #nav-menu .menu > li > a:hover,
.site-header #nav-menu .menu > .current-menu-item > a,
.site-header #nav-menu .menu > .current_page_item > a,
.site-header #nav-menu .menu > .current-menu-ancestor > a {
    color: var(--wp--preset--color--primary);
}

/* Visible keyboard focus for the desktop disclosure trigger and submenu links. */
#nav-menu .menu-item-has-children > a.pseudo:focus-visible,
#nav-menu .submenu a:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Submenu Dropdown */
.submenu {
    position: absolute;
    top: 100%;
    left: -24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: visibility 0ms ease 0ms, all 0.2s cubic-bezier(0.4, 0.01, 0.1, 1);
    z-index: 9999;
    padding-top: 14px;
}

#nav-menu li.menu-item-has-children:hover .submenu,
#nav-menu li.menu-item-has-children:focus .submenu,
#nav-menu li.menu-item-has-children:focus-within .submenu,
#nav-menu li.menu-item-has-children.is-open .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Escape dismisses a dropdown even while focus/pointer is still inside it (global.js). */
#nav-menu li.menu-item-has-children.is-dismissed .submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
}

.submenu-inner-wrap {
    min-width: 280px;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    box-shadow: var(--wp--preset--shadow--offset-orange);
    padding: 8px 24px;
}

/* Submenu Items */
.submenu-inner .menu-items {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav-menu .submenu ul li a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--wp--preset--color--black);
    text-decoration: none;
    border-bottom: 1.5px solid var(--wp--preset--color--black);
}

#nav-menu .submenu ul li:last-child a {
    border-bottom: 0;
}

#nav-menu .submenu a:hover,
#nav-menu .submenu .current_page_item > a {
    color: var(--wp--preset--color--primary);
}

#nav-menu .submenu-inner .sub-menu {
    display: none;
}

/* Right-aligned chevron on every submenu link (injected in the walker).
   Needs the #nav-menu prefix to beat `#nav-menu .submenu ul li a { display: block }`
   above; without it the link stays block and the inline SVG sits on the text
   baseline instead of centred on the line. */
#nav-menu .submenu-inner .menu-items > li > a,
#mobile-menu li ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    line-height: 1.3;
}

#nav-menu .submenu-inner .menu-items > li > a > svg,
#mobile-menu li ul li a > svg {
    flex: none;
    display: block;
    transition: transform 0.2s ease;
}

#nav-menu .submenu-inner .menu-items > li > a:hover > svg {
    transform: translateX(3px);
}

/* ----- Promo panel (Theme Features → Menu) ----- */
.submenu.has-promo .submenu-inner-wrap {
    width: min(760px, 90vw);
}

.submenu.has-promo .submenu-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--medium);
    align-items: stretch;
    padding: 16px 0;
}

.submenu.has-promo .submenu-inner .menu-items {
    align-self: start;
}

.menu-promo {
    position: relative;
    display: flex;
    min-height: 200px;
    overflow: hidden;
    background-color: var(--wp--preset--color--ink);
    background-size: cover;
    background-position: center;
}

.menu-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.menu-promo__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    padding: 20px;
}

.menu-promo__heading {
    margin: 0;
    font-family: var(--wp--preset--font-family--archivo);
    font-stretch: 125%;
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--wp--preset--color--white);
}

.menu-promo__text {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--white);
}

.site-header #nav-menu .submenu a.menu-promo__cta,
#mobile-menu .menu-promo a.menu-promo__cta {
    display: inline-flex;
    width: auto;
    padding: 12px 20px;
    border: 0;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--black);
    font-weight: 700;
    text-decoration: none;
}

#mobile-menu .menu-promo-item {
    display: block;
    padding: 15px var(--header-pad-x);
}

/* ----- Mobile Toggle ----- */
#toggle-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

#toggle {
    height: 46px;
    width: 46px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid var(--wp--preset--color--white);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

#toggle:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

#toggle .bar {
    height: 2px;
    width: 20px;
    display: block;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    transform-origin: center;
    background-color: var(--wp--preset--color--white);
    transition: top 0.2s ease, transform 0.2s ease 0.12s, opacity 0.15s ease;
}

#toggle .bar:nth-of-type(1) {
    top: 13px;
}

#toggle .bar:nth-of-type(2) {
    top: 20px;
}

#toggle .bar:nth-of-type(3) {
    top: 27px;
}

.active #toggle .bar:nth-of-type(1) {
    top: 20px;
    transform: rotate(45deg);
}

.active #toggle .bar:nth-of-type(2) {
    opacity: 0;
}

.active #toggle .bar:nth-of-type(3) {
    top: 20px;
    transform: rotate(-45deg);
}

/* Respect reduced-motion: keep the menu instant, drop the animation. */
@media (prefers-reduced-motion: reduce) {
    #mobile-nav-menu,
    .active #mobile-nav-menu,
    #toggle,
    #toggle .bar,
    #mobile-menu button svg,
    .submenu,
    .header-button {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* Below desktop the top-bar links move into the mobile panel. */
@media (max-width: 1199px) {
    .site-header__utility {
        display: none;
    }
}

@media (max-width: 700px) {
    .site-header__actions .header-button--outline {
        display: none;
    }

    .header-button--primary {
        padding: 11px 16px;
    }

    .custom-logo-link .custom-logo {
        height: 32px;
    }

    /* Only the main bar sticks; the notice bar scrolls away so the header
       doesn't take a quarter of the screen (height measured in global.js). */
    .site-header,
    body.admin-bar .site-header {
        top: calc(-1 * var(--topbar-height, 0px));
    }

    .site-header__notice-full {
        display: none;
    }

    .site-header .site-header__notice-short {
        display: inline;
    }

    .site-header__top {
        padding-left: 16px;
        padding-right: 16px;
        font-size: 12px;
    }

    .site-header__notice-short a {
        white-space: nowrap;
    }
}

.site-header__notice-short {
    display: none;
}

/* Logo and CTA would otherwise overlap on phones. */
@media (max-width: 480px) {
    .site-header__main {
        gap: 12px;
    }

    .site-header__logo {
        font-size: 20px;
    }

    .header-button--primary {
        padding: 10px 12px;
        font-size: 14px;
    }

    .site-header__actions {
        gap: 10px;
    }
}

/* Very narrow screens: the CTA lives in the menu panel instead. */
@media (max-width: 340px) {
    .site-header__actions .header-button--primary {
        display: none;
    }
}


/* ==========================================================================
   7. MOBILE NAVIGATION
   ========================================================================== */

#mobile-nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--wp--preset--color--ink);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    z-index: 500;
}

.active #mobile-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

#mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobile-menu a,
#mobile-menu span {
    display: block;
    padding: 16px var(--header-pad-x);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    text-decoration: none;
    color: var(--wp--preset--color--white);
    cursor: pointer;
}

#mobile-menu li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#mobile-menu > li:first-child {
    border-top: 0;
}

#mobile-menu li.menu-item-has-children {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

#mobile-menu li ul {
    display: none;
    width: 100%;
    background: var(--wp--preset--color--dark-grey);
    margin: 0;
    padding: 0;
}

#mobile-menu li ul li a {
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 500;
    color: var(--wp--custom--color--on-dark-text);
}

#mobile-menu a:hover,
#mobile-menu .current-menu-item > a {
    color: var(--wp--preset--color--primary);
}

#mobile-menu button {
    background: transparent;
    border: 0;
    width: 56px;
    height: 56px;
    padding: 0 var(--header-pad-x) 0 0;
    color: var(--wp--preset--color--white);
    cursor: pointer;
}

#mobile-menu button svg {
    fill: currentColor;
    transition: transform 0.3s ease-out;
}

#mobile-menu button:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: -2px;
}

#mobile-menu .menu-item.active button svg {
    transform: rotateX(180deg);
}

.mobile-utility-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 20px var(--header-pad-x) 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
}

.header-buttons--mobile {
    flex-wrap: wrap;
    padding: 24px var(--header-pad-x) 0;
}


/* ==========================================================================
   8. POSTS & ARCHIVES
   ========================================================================== */

/* Archive grid (opened/closed in inc/custom-blocks.php) */
.posts {
    padding-top: var(--wp--preset--spacing--x-large);
    padding-bottom: var(--wp--preset--spacing--x-large);
}

/* Pagination (inc/archive-navigation.php) */
.archive-pagination {
    padding-bottom: var(--wp--preset--spacing--x-large);
}

.archive-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.archive-pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--wp--preset--color--grey);
    border-radius: var(--wp--custom--border--radius--small);
    text-decoration: none;
}

.archive-pagination li a:hover,
.archive-pagination li.active a {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}

/* Single Post */
.single .entry-content .entry-title {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

.single .wp-block-image.aligncenter {
    width: 100%;
}

.single .wp-block-image.aligncenter img {
    margin: auto;
}

/* 404 / No results (partials/content/no-content.php) */
.error-404,
.no-results {
    padding: var(--wp--preset--spacing--xx-large) 0;
    text-align: center;
}

.error-404 .search-form,
.no-results .search-form {
    max-width: 480px;
    margin: var(--wp--preset--spacing--medium) auto 0;
}

div#wpadminbar {
    z-index: 9999999;
}

/* ==========================================================================
   9. GRID & FLEX UTILITIES
   ========================================================================== */

/* Flexbox */
.flex {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(0px - var(--wp--custom--layout--small-padding));
    margin-left: calc(0px - var(--wp--custom--layout--small-padding));
}

.flex>div {
    padding: var(--wp--custom--layout--small-padding);
}

.v-align {
    align-items: center;
    height: 100%;
}

.h-align {
    justify-content: center;
}

/* Flex Column Widths */
.col-100 {
    flex: 0 0 100%;
}

.col-75 {
    flex: 0 0 75%;
}

.col-66 {
    flex: 0 0 66.6666%;
}

.col-50 {
    flex: 0 0 50%;
}

.col-33 {
    flex: 0 0 33.3333%;
}

.col-25 {
    flex: 0 0 25%;
}

.col-20,
.has-5-columns>div {
    flex: 0 0 20%;
}

.col-10 {
    flex: 0 0 10%;
}

/* CSS Grid */
.grid {
    display: grid;
    grid-column-gap: var(--wp--preset--spacing--medium);
    grid-row-gap: var(--wp--preset--spacing--medium);
}

.columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

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

/* Responsive card / bento grids.
   Above 992px the authored layout stands: .columns-N sets the track count and
   WordPress' per-card .wp-container-content-*{grid-column:span N} rules form the
   bento. Below 992px we drop the fixed tracks AND neutralise those per-card spans
   so cards reflow fluidly by intrinsic min width — count- and span-agnostic, so
   every columns-N variation adapts without bespoke breakpoints.
   Two-class / attribute selectors (0,2,0) outrank the base .columns-N, WP's
   .wp-container-* parent rules and .wp-container-content-* span rules (all 0,1,0).
   Galleries use .is-layout-flex and are intentionally unmatched. */
@media (max-width: 992px) {
    .grid[class*="columns-"],
    .is-layout-grid[class*="columns-"] {
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    }

    .grid[class*="columns-"] > *,
    .is-layout-grid[class*="columns-"] > * {
        grid-column: auto;
        grid-row: auto;
    }
}





/* ==========================================================================
   10. MEDIA QUERIES
   ========================================================================== */

/* Desktop (1200px+) */
@media (min-width: 1200px) {
    #nav-menu {
        display: flex;
    }

    #mobile-nav-menu {
        display: none;
    }

    #toggle-wrap {
        display: none;
    }
}

/* Tablet & Below (782px) */
@media (max-width: 782px) {
    #wpadminbar {
        display: none !important;
    }

    .admin-bar .site-header {
        top: 0;
    }
}

/* ==========================================================================
   11. CARD COMPONENT
   ========================================================================== */

/* Base Card (archive.php) */
.card {
    position: relative;
    background: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border--radius--medium);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 10%);
    overflow: hidden;
    transition: all 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04);
}

.card a,
.card .card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.card .card-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wp--preset--color--grey);
}

.card .card-thumbnail img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card .card-meta {
    padding: var(--wp--preset--spacing--medium);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--small);
}

.card .card-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    font-size: var(--wp--preset--font-size--min);
}

.card .card-category {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wp--preset--color--primary);
}

.card .card-title {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--custom--line-height--small);
    margin: 0;
}


.card .card-excerpt {
    font-size: var(--wp--preset--font-size--tiny);
    color: var(--wp--custom--color--neutral--700);
    margin-bottom: auto;
    /* Push read more to bottom */
    line-height: var(--wp--custom--line-height--normal);
}

.card .card-readmore,
.card .button {
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    align-self: flex-start;
}

/* Mobile Adjustments */
@media screen and (max-width: 768px) {
    .card .card-meta {
        padding: var(--wp--preset--spacing--small);
    }

    .card .card-title {
        font-size: var(--wp--preset--font-size--normal);
    }
}


/* ==========================================================================
   12. BLOCK EXTENSIONS & STYLES
   ========================================================================== */

/* ----- Gradient border toggle (core/group, core/column) ----- */

.wp-block-group.has-gradient-border,
.wp-block-column.has-gradient-border {
    position: relative;
    border: 1.5px solid #e2e8f0;
}

.wp-block-group.has-gradient-border::before,
.wp-block-column.has-gradient-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: calc(24px + -1px);
    background: linear-gradient(135deg,
            var(--wp--preset--color--primary),
            var(--wp--preset--color--primary),
            var(--wp--preset--color--ink));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


/* ==========================================================================
   Sticky (core/group, core/column)

   Block style preset that pins the block to the top of the viewport once its
   parent container scrolls past. Registered in inc/block-styles.php; pick
   "Sticky on scroll" from the Styles panel after inserting a Group or Column.

   Requires the block's direct parent to be a flex/grid container (which is
   how core/columns already renders) and to be taller than the sticky item -
   otherwise there is nothing to scroll past.

   Offset from the top is controlled by --orbit-sticky-top (default 140px to
   clear the fixed header). Override per-instance with inline style="" or
   globally in theme.json.
   ========================================================================== */

.is-style-sticky {
    position: sticky;
    top: var(--orbit-sticky-top, calc(var(--header-offset, 106px) + 32px));
    align-self: start;
}

/* On mobile the layout is a single column, so sticky positioning just
   causes the element to overlap the content below it - turn it off. */
@media (max-width: 781px) {
    .is-style-sticky {
        position: static;
        top: auto;
    }
}


/* ---------- core/table - default style matches nblocks/comparison-table ---------- */
.wp-block-table {
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--grey);
    border-radius: var(--wp--custom--border--radius--medium);
    /* x: sideways scroll on narrow screens; y: hidden keeps the radius clip. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.wp-block-table table { width: 100%; border-collapse: collapse; }
/* Below tablet width, stop columns crushing — hold a readable minimum and
 * let the figure scroll instead. */
@media (max-width: 781px) {
    .wp-block-table table { min-width: 640px; }
}
.wp-block-table thead { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
.wp-block-table thead th {
    font-size: var(--wp--preset--font-size--tiny);
    line-height: var(--wp--custom--line-height--small);
    font-weight: 500;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
    padding: 22px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.wp-block-table thead th:last-child { border-right: none; }
.wp-block-table tbody td,
.wp-block-table:not(.has-fixed-layout) td {
    padding: 22px 28px;
    border-right: 1px solid var(--wp--preset--color--grey);
    border-top: 1px solid var(--wp--preset--color--grey);
    vertical-align: top;
}
.wp-block-table tbody tr:first-child td { border-top: none; }
.wp-block-table tbody td:last-child,
.wp-block-table:not(.has-fixed-layout) td:last-child { border-right: none; }
.wp-block-table tfoot tr td { border-top: 1px solid var(--wp--preset--color--grey); }

/* When the block has no <thead> WP still wraps all rows in <tbody>; the block
 * above already covers that. If the editor marks the first row as a header via
 * the header-row toggle, WP emits a <thead>, which gets the dark treatment. */

/* Caption: keep outside the rounded container's contrast zone. */
.wp-block-table figcaption {
    color: var(--wp--preset--color--charcoal);
    font-size: var(--wp--preset--font-size--tiny);
    margin-top: 8px;
    text-align: center;
}

@media (max-width: 768px) {
    .wp-block-table { overflow-x: auto; }
    .wp-block-table thead th,
    .wp-block-table tbody td,
    .wp-block-table:not(.has-fixed-layout) td { padding: 16px 18px; }
}




/* ---------------------------------------------------------------- */
/*  Checklist / Crosslist (core/list) - palette-aware fit & not-fit */
/* ---------------------------------------------------------------- */

/* Checklist (base in style.css) - the tick circle colour is controlled
   independently of the list's text colour via a `checkmark-{slug}` class
   added in the editor's Advanced - Additional CSS classes field. This keeps
   text formatting the editor's concern (via the standard colour controls)
   while the tick stays a design-system accent. Tick glyph is an SVG baked
   with stroke="white", so these rules only repaint the circle. */
.wp-block-list.is-style-checklist.checkmark-primary    > li::before { background-color: var(--wp--preset--color--primary); }
.wp-block-list.is-style-checklist.checkmark-secondary  > li::before { background-color: var(--wp--preset--color--ink); }
.wp-block-list.is-style-checklist.checkmark-tertiary   > li::before { background-color: var(--wp--preset--color--primary); }
.wp-block-list.is-style-checklist.checkmark-quaternary > li::before { background-color: var(--wp--preset--color--primary); }
.wp-block-list.is-style-checklist.checkmark-quinary    > li::before { background-color: var(--wp--preset--color--primary); }
.wp-block-list.is-style-checklist.checkmark-senary     > li::before { background-color: var(--wp--preset--color--ink); }
.wp-block-list.is-style-checklist.checkmark-ink        > li::before { background-color: var(--wp--preset--color--ink); }

/* Crosslist - white circle with a currentColor border and a currentColor X.
   The X is a ::after layer using a CSS mask so its colour follows the list's
   text colour without needing explicit per-palette rules. */
.wp-block-list.is-style-crosslist,
ul.is-style-crosslist {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.wp-block-list.is-style-crosslist > li,
ul.is-style-crosslist > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0.5em 0;
    padding-left: 0;
    position: relative;
}

.wp-block-list.is-style-crosslist > li::before,
ul.is-style-crosslist > li::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wp--preset--color--primary-50);
    box-sizing: border-box;
    margin-top: calc((1.55em - 22px) / 2);
}

.wp-block-list.is-style-crosslist > li::after,
ul.is-style-crosslist > li::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc((1.55em - 22px) / 2);
    width: 22px;
    height: 22px;
    background-color: var(--wp--preset--color--primary);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><line x1='7' y1='7' x2='17' y2='17'/><line x1='17' y1='7' x2='7' y2='17'/></svg>") center / 10px 10px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><line x1='7' y1='7' x2='17' y2='17'/><line x1='17' y1='7' x2='7' y2='17'/></svg>") center / 10px 10px no-repeat;
    pointer-events: none;
}



/* ---------------------------------------------------------------- */
/*  Steps (smaller number circles)                */
/* ---------------------------------------------------------------- */

.wp-block-nblocks-steps.is-style-compact .nblocks-step__number {
    width: 38px;
    height: 38px;
    font-size: var(--wp--preset--font-size--normal);
}

/* ---------------------------------------------------------------- */
/*  Add Noise toggle (core/group, core/column, core/image)          */
/* ---------------------------------------------------------------- */

.wp-block-group.has-noise,
.wp-block-column.has-noise,
.wp-block-image.has-noise {
    position: relative;
    isolation: isolate;
}

.wp-block-group.has-noise::after,
.wp-block-column.has-noise::after,
.wp-block-image.has-noise::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: hard-light;
    opacity: 0.85;
    z-index: 0;
}

/* Lift the inner blocks above the noise so it reads as a background texture
   behind text/content. */
.wp-block-group.has-noise > *,
.wp-block-column.has-noise > * {
    position: relative;
    z-index: 1;
}

/* An Image block's only content is the <img> itself - sitting behind it would
   hide the texture entirely, so keep it overlaid on top of the image. */
.wp-block-image.has-noise::after {
    z-index: 1;
}

/* ==========================================================================
   Theme button (.button) — matches theme.json's core button element styles
   so theme markup (header contact link, 404 link, menu promo CTA) lines up
   with Gutenberg buttons.
   ========================================================================== */
.button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--wp--custom--border--radius--large, 8px);
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.button:hover,
.button:focus-visible {
    background-color: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--white);
}


/* ==========================================================================
   13. HUMEN DESIGN LAYER
   Brand details theme.json can't express. Everything else (colour, type,
   spacing, shadows) is set per block in the editor from theme.json presets.
   ========================================================================== */

/* Archivo is used at its widest (expanded) cut for display type. */
h1, h2, h3, h4, h5, h6,
.has-archivo-font-family {
    font-stretch: 125%;
    text-wrap: balance;
}

/* Inline orange highlight inside headings (Highlight → text colour). */
:is(h1, h2, h3) mark.has-inline-color {
    background: none;
}

/* Buttons: a small "press" towards their offset shadow on hover. */
.wp-block-button__link,
.wp-element-button {
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    transform: translate(2px, 2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--ink);
}

/* Outline buttons left in the default text colour sit on light backgrounds,
   where a white fill would make them vanish — invert to ink instead. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover {
    background-color: var(--wp--preset--color--ink);
    border-color: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-button__link,
    .wp-element-button {
        transition: none;
    }

    .wp-block-button__link:hover,
    .wp-element-button:hover {
        transform: none;
    }
}

/* ----- Accordion (core/accordion) — orange square +/– icon ----- */
:root :where(.wp-block-accordion-item) {margin:0;}

.wp-block-accordion-heading {
    margin: 0;
    font-stretch: 100%;
    text-wrap: wrap;
}

.wp-block-accordion-heading__toggle {
    gap: 24px;
    padding: 22px 0;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
    color: var(--wp--preset--color--primary);
}

.wp-block-accordion-heading__toggle-icon {
    flex: none;
    width: 34px;
    height: 34px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--black);
    font-size: 0;
}

.wp-block-accordion-heading__toggle-icon::before {
    content: "+";
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    transform: none;
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before {
    content: "–";
}

.wp-block-accordion-panel {
    padding: 0 58px 26px 0;
    margin: 0;
}

.wp-block-accordion-panel > :first-child {
    margin-top: 0;
}

/* ----- Embeds inside an offset-shadow group sit flush ----- */
.wp-block-group > .wp-block-embed:only-child {
    margin: 0;
}

.wp-block-embed .wp-block-embed__wrapper iframe {
    display: block;
}

/* ----- Cover: let the inner container use the full row ----- */
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
    width: 100%;
}

/* ----- Numbered rows (core/group, flex) — keep the number column fixed ----- */
.wp-block-group.is-nowrap > p.has-archivo-font-family:first-child {
    flex: none;
}


/* A lone group inside a column fills it, so card rows line up. */
.wp-block-column > .wp-block-group:only-child {
    height: 100%;
}

/* ----- Link card (core/group → Styles → Link card) -----
   Link the card's heading and that link stretches over the whole card, so the
   card is one click target without wrapping blocks in an <a>. The orange
   arrow square appears beside a linked heading. */
.wp-block-group.is-style-link-card {
    position: relative;
    transition: box-shadow 0.15s ease;
}

.wp-block-group.is-style-link-card:has(a):hover,
.wp-block-group.is-style-link-card:focus-within {
    box-shadow: var(--wp--preset--shadow--offset-orange);
}

.wp-block-group.is-style-link-card :is(h2, h3, h4):has(a) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.wp-block-group.is-style-link-card :is(h2, h3, h4) a {
    color: inherit;
    text-decoration: none;
}

.wp-block-group.is-style-link-card :is(h2, h3, h4):has(a)::after {
    content: "→";
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--black);
    font-family: var(--wp--preset--font-family--montserrat);
    font-size: 18px;
    font-stretch: 100%;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

/* Not in the editor, where the overlay would swallow clicks meant for the
   card's other blocks. */
.wp-block-group.is-style-link-card:not(.block-editor-block-list__block) :is(h2, h3, h4) a::after {
    content: "";
    position: absolute;
    inset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-group.is-style-link-card {
        transition: none;
    }
}

/* ----- Inline strip (core/list → Styles → Inline strip) -----
   A wrapping row of short display phrases with an orange square between each. */
.wp-block-list.is-style-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--wp--preset--font-family--archivo);
    font-size: clamp(13px, 1.2vw, 18px);
    font-stretch: 125%;
    font-weight: 900;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-transform: uppercase;
}

.wp-block-list.is-style-strip > li {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
}

.wp-block-list.is-style-strip > li:not(:last-child)::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    background: var(--wp--preset--color--primary);
}

/* ----- Steps (nblocks/steps) — square orange numbers, ink connecting line ----- */
.wp-block-nblocks-steps {
    --humen-step-size: clamp(48px, 4.4vw, 68px);
}

.wp-block-nblocks-steps.is-style-compact {
    --humen-step-size: 38px;
}

.wp-block-nblocks-steps .nblocks-step {
    gap: 22px;
}

.wp-block-nblocks-steps .nblocks-step__number {
    width: var(--humen-step-size);
    height: var(--humen-step-size);
    border: 2px solid var(--wp--preset--color--ink);
    border-radius: 0;
    box-shadow: var(--wp--preset--shadow--offset-ink);
    color: var(--nblocks-step-number-color, var(--wp--preset--color--black));
    font-family: var(--wp--preset--font-family--archivo);
    font-size: clamp(20px, 2vw, 30px);
    font-stretch: 125%;
    font-weight: 900;
}

.wp-block-nblocks-steps .nblocks-step__body > * {
    margin-block: 0;
}

.wp-block-nblocks-steps .nblocks-step__body > * + * {
    margin-block-start: 14px;
}

/* Line runs centre-to-centre down the numbers when stacked… */
.wp-block-nblocks-steps .nblocks-step::after {
    top: calc(var(--humen-step-size) / 2);
    bottom: calc(-24px - var(--humen-step-size) / 2);
    left: calc(var(--humen-step-size) / 2);
    width: 3px;
    background: var(--wp--preset--color--ink);
}

/* …and from just past each number to the next when in a row. */
@media (min-width: 768px) {
    .wp-block-nblocks-steps .nblocks-step::after {
        top: calc(var(--humen-step-size) / 2);
        right: -12px;
        bottom: auto;
        left: calc(var(--humen-step-size) + 12px);
        width: auto;
        height: 3px;
        background: var(--wp--preset--color--ink);
    }
}

/* ----- Inner page header + spacing ----- */
.entry-header {
    padding-top: var(--wp--preset--spacing--xx-large);
    padding-bottom: var(--wp--preset--spacing--large);
}

.entry-header .entry-title {
    margin: 0;
    font-size: var(--wp--preset--font-size--massive);
}

/* Breathing room under page content unless it ends on a full-bleed section. */
.entry-content:not(:has(> .alignfull:last-child)) {
    padding-bottom: var(--wp--preset--spacing--section);
}

.entry-content > .alignfull:first-child {
    margin-top: 0;
}

/* ----- Eyebrow label (core/paragraph → Styles → Eyebrow / Eyebrow with marker) -----
   Small uppercase section label. The marker variant adds a square in the
   accent colour (primary by default; add class marker-ink / marker-white). */
p.is-style-eyebrow,
p.is-style-marker {
    font-size: var(--wp--preset--font-size--min);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
}

p.is-style-marker {
    display: flex;
    align-items: center;
    gap: 12px;
}

p.is-style-marker::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: var(--humen-marker, var(--wp--preset--color--primary));
}

p.is-style-marker.marker-ink {
    --humen-marker: var(--wp--preset--color--ink);
}

p.is-style-marker.marker-white {
    --humen-marker: var(--wp--preset--color--white);
}

/* ----- CTA link (core/paragraph → Styles → CTA link) -----
   Bold text link sitting on a 2px orange rule. */
p.is-style-cta-link {
    font-weight: 700;
}

p.is-style-cta-link a {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--wp--preset--color--primary);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

p.is-style-cta-link a:hover,
p.is-style-cta-link a:focus-visible {
    color: var(--wp--preset--color--primary);
}

/* ----- Arrow links (core/list → Styles → Arrow links) -----
   Plain list of links, each led by an arrow. Keeps the surrounding text
   colour so it works on orange, white and ink cards alike. */
ul.is-style-arrows {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.is-style-arrows > li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

ul.is-style-arrows > li + li {
    margin-top: 12px;
}

ul.is-style-arrows > li::before {
    content: "→";
    flex: none;
    font-weight: 700;
}

ul.is-style-arrows a {
    color: inherit;
    text-decoration: none;
}

ul.is-style-arrows a:hover,
ul.is-style-arrows a:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

/* ----- Full-bleed square gallery strip (Instagram row) ----- */
.wp-block-gallery.is-style-strip-tiles {
    gap: 0 !important;
}

.wp-block-gallery.is-style-strip-tiles .wp-block-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* ----- Button focus ring -----
   The default primary-coloured ring disappears against orange buttons, so
   buttons get an ink ring on light/orange grounds and a white one on dark. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.header-button:focus-visible {
    outline: 3px solid var(--wp--preset--color--ink);
    outline-offset: 3px;
}

.site-header .header-button:focus-visible,
.site-header #toggle:focus-visible,
.wp-block-cover .wp-block-button__link:focus-visible,
.has-ink-background-color .wp-element-button:focus-visible,
.has-black-background-color .wp-element-button:focus-visible,
.has-dark-grey-background-color .wp-element-button:focus-visible,
.wp-block-nblocks-donate-widget .wp-element-button:focus-visible,
.wp-block-nblocks-donate-widget button:focus-visible {
    outline-color: var(--wp--preset--color--white);
}

/* Small primary-coloured text on light grounds is under 4.5:1 contrast;
   keep orange for markers/large type and set small labels in ink. */
.has-light-grey-background-color p.is-style-eyebrow.has-primary-color,
.has-white-background-color p.is-style-eyebrow.has-primary-color,
.has-light-grey-background-color p.is-style-marker.has-primary-color,
.has-white-background-color p.is-style-marker.has-primary-color {
    color: var(--wp--preset--color--ink) !important;
}