/*
Theme Name: Particology
Theme URI: https://particology.com
Description: Child theme for PB Boilerplate, customised for particology.com.
Author: The Publishing Bureau
Author URI: https://publishingbureau.co.uk
Template: pb-boilerplate
Version: 1.21.0
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: particology
*/

/* ==========================================================================
   CSS Variables - Customise for Your Project
   Override parent theme defaults here to match your design
   ========================================================================== */

:root {
    /* Layout - Customise dimensions and spacing */
    --header-height: 100px;
    --header--nav--font-size: 14px;
    /* --content-width: 1200px; */
    /* --content-padding: 20px; */

    /* Colours - Defined in theme.json
       To customise colours, edit the child theme's theme.json palette.
       Parent palette slugs: black, white, highlight, dark-grey, grey, blue, navy.
       Override values in theme.json → settings.color.palette */

    /* Typography - Define fonts in theme.json
       To customize fonts for your project, edit the child theme's theme.json file:
       settings.custom.typography.heading.fontFamily
       settings.custom.typography.body.fontFamily
    */
    /* --line-height-base: 1.6; */
    /* --line-height-heading: 1.2; */
    /* --font-weight-normal: 400; */
    /* --font-weight-bold: 600; */

    /* Font Sizes - Customise heading and text sizes
       Use theme.json for font sizes - it applies to both front end and editor */

    /* Spacing - Customise spacing scale */
    /* --spacing-xs: 0.5em; */
    /* --spacing-sm: 1em; */
    /* --spacing-md: 1.5em; */
    /* --spacing-lg: 2em; */
    /* --spacing-xl: 3em; */

    /* Border Radius - Customise corner roundness */
    /* --border-radius-sm: 3px; */
    /* --border-radius-md: 4px; */

    /* Transitions - Customise animation speed */
    /* --transition-speed: 0.2s; */

    /* Social Media Links - Defined in theme.json
       To customise social link appearance, edit the child theme's theme.json file:
       settings.custom.socialLinks

       Available options:
       - iconSize: Size of the icon SVG (default: 20px)
       - circleSize: Size of the circular button (default: 40px)
       - background: Background colour of the circle (default: #2C3E50)
       - iconColor: Colour of the icon (default: #FFFFFF)
       - backgroundHover: Background colour on hover (default: #3498DB)
       - iconColorHover: Icon colour on hover (default: #FFFFFF)
    */

    --header--background--colour: var(--wp--preset--color--black);
    --header--link--colour: var(--wp--preset--color--white);
}

/* ==========================================================================
   Child Theme Custom Styles
   Add your additional CSS below
   ========================================================================== */

/*
 * Add any custom styles that aren't variable overrides here.
 * These will be loaded after the parent theme styles.
 */
::selection {
   background-color: var(--wp--preset--color--lilac-grey);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
    text-decoration: none;
}

.main-navigation a {
   font-weight: 500;
}

.main-navigation a:hover,
.main-navigation a:focus,
.nav-search__toggle:hover,
.nav-search__toggle:focus {
    color: var(--wp--preset--color--mint) !important;
}

/* Parent theme uses --wp--preset--color--highlight here, which does not
   exist in this child palette, leaving the current item and the hovered
   or focused search toggle invisible on the dark header. */
.main-navigation .current-menu-item > a,
.main-navigation .current-page-ancestor > a {
    color: var(--wp--preset--color--white);
}

/* Menu item hover — a mint underline grows from the centre beneath the
   label, per the design's hover state; the colour shift to mint is
   handled above. Desktop only: the collapsed mobile menu keeps just the
   colour change. The social icon at the end of the menu is excluded. */
@media (min-width: 769px) {
    .main-navigation #primary-menu > li > a {
        position: relative;
    }

    .main-navigation #primary-menu > li > a:not(.social-link)::after {
        content: "";
        position: absolute;
        right: 16px;
        /* The link is vertically centred in the header, so half the
           height difference drops the bar to the header's bottom edge. */
        bottom: calc((100% - var(--header-height, 100px)) / 2);
        left: 16px;
        height: 3px;
        background-color: var(--wp--preset--color--mint);
        transform: scaleX(0);
        transition: transform 0.2s ease;
    }

    .main-navigation #primary-menu > li > a:hover::after,
    .main-navigation #primary-menu > li > a:focus::after {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-navigation #primary-menu > li > a:not(.social-link)::after {
        transition: none;
    }
}


/* Full-viewport cover on the homepage — a cover set to 100vh in the
   editor should fill the viewport below the header, not overflow it by
   the header height. The attribute selector matches only covers
   explicitly set to 100vh, and !important is needed to beat the block's
   inline style. */
.home .wp-block-cover[style*="min-height:100vh"] {
    min-height: calc(100vh - var(--header-height, 100px)) !important;
}

@supports (height: 100svh) {
    .home .wp-block-cover[style*="min-height:100vh"] {
        /* Small-viewport units keep mobile browser chrome out of the sum. */
        min-height: calc(100svh - var(--header-height, 100px)) !important;
    }
}

/* ==========================================================================
   Social Links in Header
   Rendered as the last <li> of #primary-menu (see functions.php), so the
   icons collapse into the mobile menu panel automatically.
   ========================================================================== */

.menu-item-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Neutralise the parent theme's circular .social-link styling (footer) */
.main-navigation .menu-item-social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--header--link--colour);
    transition: color 0.2s ease;
}

.main-navigation .menu-item-social .social-link:hover,
.main-navigation .menu-item-social .social-link:focus {
    color: var(--wp--preset--color--mint);
}

.main-navigation .menu-item-social .social-link svg {
    width: 20px;
    height: 20px;
}

/* Mobile menu panel: match the menu item padding and centre the icons */
.main-navigation.toggled .menu-item-social {
    padding: 16px 30px;
    justify-content: center;
    gap: 12px;
}

.main-navigation.toggled .menu-item-search .nav-search {
    padding: 8px 30px;
    justify-content: center;
}

/* Desktop: space after the logo, then menu items, search and social
   icon evenly distributed across the remaining width */
@media (min-width: 769px) {
    .main-navigation {
        margin-left: 80px;
    }

    .main-navigation > ul {
        flex: 1;
        align-items: center;
        justify-content: space-between;
    }
}

/* ==========================================================================
   Footer
   Three columns (brand + blurb, contact, quick links) with dividers,
   above a legal bar. Template: footer.php (child override).
   ========================================================================== */

/* Content should meet the footer with no gap on pages: kill the bottom
   margin of the content wrapper and of the last block inside it (the
   block-gap margin otherwise collapses through <main>) */
.site-main {
    padding-top: 0;
}
.page .site-main .entry-content {
    margin-bottom: 0;
}

.page .site-main .entry-content > :last-child {
    margin-bottom: 0;
}

.site-footer {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--lilac-grey);
    border-top: none;
    margin-top: 0;
    padding-top: 5rem;
    padding-bottom: 2rem;
}

.site-footer h3 {
    color: var(--wp--preset--color--white);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold, 600);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.footer-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

/* Brand column */
.footer-logo .custom-logo {
    max-height: 45px;
    width: auto;
    height: auto;
}

.footer-brand .footer-blurb {
    margin-top: 2rem;
}

.footer-blurb p {
    margin: 0 0 1em;
}

.footer-blurb p:last-child {
    margin-bottom: 0;
}

/* Contact column */
.site-footer .footer-contact .contact-address strong {
    color: var(--wp--preset--color--white);
}

.site-footer .footer-contact p {
    margin-bottom: 1rem;
}

.site-footer .footer-contact .contact-address {
    margin-bottom: 1.5rem;
}

.site-footer .footer-contact .contact-email {
    margin-bottom: 0.25rem;
}

.site-footer .footer-contact a {
    color: var(--wp--preset--color--lilac-grey);
    text-decoration: none;
}

.site-footer .footer-contact a:hover,
.site-footer .footer-contact a:focus {
    color: var(--wp--preset--color--mint);
}

/* Quick links column */
.footer-quick-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-quick-links li {
    margin-bottom: 0.75rem;
}

.site-footer .footer-navigation a {
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

.site-footer .footer-navigation a:hover,
.site-footer .footer-navigation a:focus {
    color: var(--wp--preset--color--mint);
}

/* Flat social icons under the quick links */
.footer-social-links {
    margin-top: 0.75rem;
}

.site-footer .footer-social-links .social-link {
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    color: var(--wp--preset--color--white);
}

.site-footer .footer-social-links .social-link:hover,
.site-footer .footer-social-links .social-link:focus {
    color: var(--wp--preset--color--mint);
    transform: none;
}

.site-footer .footer-social-links .social-link svg {
    width: 20px;
    height: 20px;
}

/* Legal bar */
.site-footer .site-info {
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
    padding: 2rem 0 0;
    border-top: 1px solid rgba(214, 205, 217, 0.3);
    color: var(--wp--preset--color--lilac-grey);
    text-align: left;
}

.site-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.legal-navigation .legal-menu {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.legal-navigation a {
    color: var(--wp--preset--color--lilac-grey);
    text-decoration: none;
}

.legal-navigation a:hover,
.legal-navigation a:focus {
    color: var(--wp--preset--color--mint);
}

/* Scoped to .site-info so this beats the parent theme's `.site-info p`
   reset, which is more specific than a bare `.site-credit` and was
   silently cancelling the gap above the credit line. */
.site-info .site-credit {
    margin-top: 1.5rem;
    font-size: var(--font-size-small, 0.875rem);
}

.site-credit a {
    color: inherit;
    text-decoration: underline;
}

.site-credit a:hover,
.site-credit a:focus {
    color: var(--wp--preset--color--mint);
}

/* Desktop: three columns with vertical dividers */
@media (min-width: 769px) {
    .footer-content {
        grid-template-columns: 1.4fr 1.1fr 0.9fr;
        gap: 0;
    }

    .footer-brand {
        padding-right: 3rem;
    }

    .footer-content .footer-contact,
    .footer-content .footer-links {
        border-left: 1px solid rgba(214, 205, 217, 0.3);
        padding-left: 3rem;
        padding-right: 2rem;
    }
}
/* ==========================================================================
   Resources
   The [resources] listing on the Resources page. Each card's contents are
   the resource's own blocks, so this only styles the glass panel around
   them and the cover thumbnail beside them.

   The panel is a translucent white designed to sit on the dark hexagon
   background, so put the shortcode inside the page's dark section. Text
   colour is inherited rather than set here, so the cards follow whatever
   that section uses.
   ========================================================================== */

.resources-list {
    display: grid;
    gap: 2.5rem;
}

.resource-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: 10px;
    background-color: var(--wp--preset--color--glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.resource-card__cover {
    flex-shrink: 0;
}

.resource-card__cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* The card's blocks carry their own spacing; drop the trailing margin so
   the padding below the download button matches the other three sides. */
.resource-card__body > :last-child {
    margin-bottom: 0;
}

/* Pagination */
.resources-pagination {
    margin-top: 2.5rem;
}

.resources-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.resources-pagination a,
.resources-pagination span {
    display: block;
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-md, 4px);
    color: var(--wp--preset--color--white);
    text-align: center;
    text-decoration: none;
}

.resources-pagination a:hover,
.resources-pagination a:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--wp--preset--color--turquoise);
    text-decoration: none;
}

.resources-pagination .current {
    background-color: var(--wp--preset--color--royal-purple);
}

@media (min-width: 769px) {
    .resources-list {
        gap: 3.75rem;
    }

    .resource-card {
        flex-direction: row;
        gap: 2.75rem;
        padding: 2.5rem;
    }

    .resource-card__cover {
        width: 185px;
    }
}

/* ==========================================================================
   Resource request form
   The gated-download form: shown in a <dialog> on listing pages and
   inline on single resource pages. The form itself is Contact Form 7 —
   see inc/resource-request.php.
   ========================================================================== */

.resource-request {
    color: var(--wp--preset--color--black, #190933);
    background-color: var(--wp--preset--color--white, #fff);
    border-radius: 12px;
}

.resource-request__title {
    /* Rein in the global h2 scale — this is a form heading, not a page one. */
    margin: 0 0 0.25rem;
    font-size: 1.625rem;
    line-height: 1.2;
    padding-right: 2.5rem; /* clear the close button */
}

.resource-request__intro {
    margin: 0 0 1.75rem;
    color: var(--wp--preset--color--heather, #665687);
    font-size: 0.9375rem;
}

.resource-request--dialog {
    width: min(92vw, 42rem);
    padding: 1.75rem 1.5rem;
    border: none;
    box-shadow: 0 24px 64px rgba(25, 9, 51, 0.35);
}

.resource-request--dialog::backdrop {
    background-color: rgba(25, 9, 51, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.resource-request--inline {
    max-width: var(--wp--style--global--content-size, 42rem);
    margin: 2.5rem auto;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 8px 24px rgba(25, 9, 51, 0.08);
}

.resource-request__close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--wp--preset--color--heather, #665687);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.resource-request__close:hover,
.resource-request__close:focus-visible {
    background-color: var(--wp--preset--color--ghost-white, #F5F0F7);
    color: var(--wp--preset--color--black, #190933);
}

.resource-request__fields {
    display: grid;
    gap: 1.125rem;
}

.resource-request__field {
    margin: 0;
}

.resource-request label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.resource-request input[type="text"],
.resource-request input[type="email"] {
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--wp--preset--color--lilac-grey, #D6CDD9);
    border-radius: 6px;
    background-color: var(--wp--preset--color--white, #fff);
    color: inherit;
    font: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.resource-request input[type="text"]:focus,
.resource-request input[type="email"]:focus {
    outline: none;
    border-color: var(--wp--preset--color--royal-purple, #533691);
    box-shadow: 0 0 0 3px rgba(83, 54, 145, 0.2);
}

/* Consent checkbox — hanging indent so wrapped lines align with the text. */
.resource-request .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.resource-request .wpcf7-acceptance .wpcf7-list-item label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.625rem;
    align-items: start;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wp--preset--color--heather, #665687);
}

.resource-request .wpcf7-acceptance input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    accent-color: var(--wp--preset--color--royal-purple, #533691);
}

.resource-request .wpcf7-acceptance a {
    color: var(--wp--preset--color--royal-purple, #533691);
}

/* wpautop wraps the acceptance and submit lines in their own paragraphs. */
.resource-request .wpcf7-form > p {
    margin: 1.25rem 0 0;
}

.resource-request .wpcf7-submit {
    width: 100%;
    margin-top: 0.25rem;
    cursor: pointer;
}

/* Validation and response messages — Contact Form 7's defaults restyled
   to sit inside the card. */
.resource-request .wpcf7-not-valid-tip {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: #B3261E;
}

/* form.wpcf7-form in the selectors out-specifies Contact Form 7's own
   stylesheet (.wpcf7 form .wpcf7-response-output and its state variants),
   which otherwise re-applies its coloured borders. */
.resource-request form.wpcf7-form .wpcf7-response-output {
    margin: 1.25rem 0 0;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 6px;
    background-color: var(--wp--preset--color--ghost-white, #F5F0F7);
    font-size: 0.9rem;
}

.resource-request form.wpcf7-form.sent .wpcf7-response-output {
    background-color: var(--wp--preset--color--pale-mint, #ACFCD9);
    color: var(--wp--preset--color--black, #190933);
}

.resource-request form.wpcf7-form.invalid .wpcf7-response-output,
.resource-request form.wpcf7-form.unaccepted .wpcf7-response-output,
.resource-request form.wpcf7-form.failed .wpcf7-response-output,
.resource-request form.wpcf7-form.spam .wpcf7-response-output,
.resource-request form.wpcf7-form.aborted .wpcf7-response-output {
    background-color: #FBEAEA;
    color: #8A2432;
}

/* After a successful send, collapse the form down to the success message
   so it cannot be posted again from the same view. Reopening the dialog
   resets the form — see assets/js/main.js. */
.resource-request form.wpcf7-form.sent > :not(.wpcf7-response-output) {
    display: none;
}

.resource-request:has(form.wpcf7-form.sent) .resource-request__intro {
    display: none;
}

.resource-request form.wpcf7-form.sent .wpcf7-response-output {
    margin-top: 0;
}

/* Honeypot — hidden from people, filled only by bots. */
.resource-request__website {
    display: none;
}

/* ==========================================================================
   Value cards
   The "Value card" group block style (is-style-value-card), registered in
   functions.php and baked into the Highlight container pattern — the "How
   we work" boxes on the About page. On hover the card lifts and a mint
   accent bar appears along the left edge — the same left-bar emphasis
   motif as the theme's pull-quotes. Decorative only, so hover-only is
   fine for keyboard users.
   ========================================================================== */

.is-style-value-card {
    position: relative;
    transition: box-shadow 0.2s ease;
}

/* The bar grows downwards from the top on hover; on unhover it shrinks
   back up, faster — the shorter transition here is the unhover one. */
.is-style-value-card::before {
    content: "";
    position: absolute;
    top: -1px; /* cover the card's own 1px border */
    bottom: -1px;
    left: -1px;
    width: 6px;
    border-radius: 10px 0 0 10px;
    background-color: var(--wp--preset--color--mint, #4FC49A);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.15s ease-in;
}

.is-style-value-card:hover {
    box-shadow: 0 12px 28px rgba(25, 9, 51, 0.14);
}

.is-style-value-card:hover::before {
    transform: scaleY(1);
    transition: transform 0.35s ease-out;
}

.is-style-value-card--no-border-animation::before {
    background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .is-style-value-card,
    .is-style-value-card::before {
        transition: none;
    }
}

/* ==========================================================================
   Hexagon buttons
   The "Hexagon" core/button block style (is-style-hexagon), registered in
   functions.php with a matching inserter variation in assets/js/editor.js.
   An arrow on a hexagon, picking up the motif from the section
   backgrounds. Usable on any Button block — placement is left to whatever
   is around it; see "Help cards" for the home page cards.

   The label is hidden with font-size rather than display/visibility so it
   stays in the accessibility tree as the link's accessible name — the
   arrow is decorative and would otherwise leave the link unnamed.
   ========================================================================== */

.wp-block-button.is-style-hexagon .wp-block-button__link {
    position: relative;
    display: block;
    width: 42px;
    height: 37px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background-color: var(--wp--preset--color--lilac-grey, #D6CDD9);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    transition: background-color 0.2s ease;
}

/* The arrow is masked rather than drawn as a background image so it can be
   recoloured alongside the hexagon on hover. */
.wp-block-button.is-style-hexagon .wp-block-button__link::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 16px;
    height: 12px;
    margin: auto;
    background-color: var(--wp--preset--color--black, #190933);
    -webkit-mask: url("assets/images/arrow-right.svg") center / contain no-repeat;
    mask: url("assets/images/arrow-right.svg") center / contain no-repeat;
    transition: background-color 0.2s ease;
}

.wp-block-button.is-style-hexagon .wp-block-button__link:hover,
.wp-block-button.is-style-hexagon .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--mint, #4FC49A);
}

.wp-block-button.is-style-hexagon .wp-block-button__link:hover::after,
.wp-block-button.is-style-hexagon .wp-block-button__link:focus-visible::after {
    background-color: var(--wp--preset--color--white, #FFFFFF);
}

/* clip-path would crop an outline on the link itself, so the focus ring
   goes on the wrapping block instead. */
.wp-block-button.is-style-hexagon:has(:focus-visible) {
    outline: 2px solid var(--wp--preset--color--mint, #4FC49A);
    outline-offset: 3px;
}

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

/* ==========================================================================
   Help cards
   The "Where we can help" boxes on the home page — columns carrying a
   hexagon button. Placement is left entirely to the Columns and Buttons
   blocks' own layout controls — nothing here positions the button.

   The only rule is the hover: per the design the hexagon lights when the
   pointer is anywhere on the card, not just on the button itself, which is
   why it is driven from the column via :has().
   ========================================================================== */

.wp-block-column:has(> .wp-block-buttons .is-style-hexagon):hover
    .is-style-hexagon .wp-block-button__link {
    background-color: var(--wp--preset--color--mint, #4FC49A);
}

.wp-block-column:has(> .wp-block-buttons .is-style-hexagon):hover
    .is-style-hexagon .wp-block-button__link::after {
    background-color: var(--wp--preset--color--white, #FFFFFF);
}

@media (min-width: 600px) {
    .resource-request--dialog,
    .resource-request--inline {
        padding: 2.5rem;
    }

    .resource-request__fields {
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
    }

    .resource-request .wpcf7-submit {
        width: auto;
    }
}

/* ==========================================================================
   News
   The [news] listing on the News page, and the single news item template
   (single-news.php). Cards sit on the page's dark section like the
   resource cards; the single's hero restates the dark band above a white
   content area.
   ========================================================================== */

/* Listing grid: one column on mobile, three on desktop */
.news-grid {
    display: grid;
    gap: 1.5rem;
}

.news-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--wp--preset--color--white);
}

.news-card__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--wp--preset--color--white);
}

.news-card__meta {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex-grow: 1;
    padding: 1.5rem;
    background-color: var(--wp--preset--color--glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.news-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-family: var(--wp--custom--typography--body--font-family);
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
}

.news-card__date {
    margin-top: auto;
}

.news-card__link:hover .news-card__title,
.news-card__link:focus .news-card__title {
    color: var(--wp--preset--color--turquoise);
}

.news-card__link:hover,
.news-card__link:focus {
    text-decoration: none;
}

/* Pagination inherits the resources styling */
.news-pagination {
    margin-top: 2.5rem;
}

.news-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-pagination a,
.news-pagination span {
    display: block;
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-md, 4px);
    color: var(--wp--preset--color--white);
    text-align: center;
    text-decoration: none;
}

.news-pagination a:hover,
.news-pagination a:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--wp--preset--color--turquoise);
    text-decoration: none;
}

.news-pagination .current {
    background-color: var(--wp--preset--color--royal-purple);
}

/* Single news item — dark hero band, full width */
.news-hero {
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
    margin-right: calc(var(--wp--style--root--padding-right) * -1);
    /* The background colour matches the SVG's own base, so the hero
       stays consistent if the image fails to load or while it loads. */
    background-color: var(--wp--preset--color--black);
    background-image: url('assets/images/news-bg.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: var(--wp--preset--color--white);
}

.news-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
    padding: 3rem var(--wp--style--root--padding-right) 3rem var(--wp--style--root--padding-left);
}

/* Design sizes the story title like an H2, not the default page H1 */
.news-hero__title {
    margin: 0 0 1rem;
    font-size: var(--wp--preset--font-size--heading-2);
    color: var(--wp--preset--color--white);
}

.news-hero__date {
    color: var(--wp--preset--color--turquoise);
}

.news-hero__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Body constrained on white below the hero */
.news-content {
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
    padding-top: 3rem;
    padding-bottom: 4rem;
}

@media (min-width: 769px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .news-hero__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 4rem;
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .news-hero__text {
        flex: 1 1 55%;
    }

    .news-hero__image {
        flex: 0 0 320px;
    }
}

/* ==========================================================================
   404 / Page not found
   Mirrors the inner-page shape used on Services and Contact: a dark,
   hexagon-textured title card on the left, supporting copy in a column to
   its right, over the mint glow that washes in from the bottom left.

   Those pages build that shape from blocks in the editor. A 404 has no
   post content, so 404.php hand-codes the markup and everything it needs
   is restated here — core block classes are deliberately avoided, because
   block-level styles only load when render_block() runs and hand-coded
   block markup would render half-styled (see wp7-styling-audit.md).
   ========================================================================== */

/* The parent theme holds .site-main open to 60vh and pushes .site-footer
   down with a 40px top margin and a light border. On a page this short
   that leaves a white band under the glow, so the section grows into the
   spare height and the gap below it is closed — the background then runs
   flush into the footer. */
.site-main--404 {
    display: flex;
    flex-direction: column;
}

.site-main--404 .error-404 {
    flex: 1;
}

.site-main--404 + .site-footer {
    margin-top: 0;
    border-top: 0;
}

.error-404 {
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
    margin-right: calc(var(--wp--style--root--padding-right) * -1);
    background-color: var(--wp--preset--color--white);
    background-image: url('assets/images/green-glow-bg.svg');
    background-repeat: no-repeat;
    background-position: left bottom;
    /* Scaled to the full width rather than cover: the glow is a blurred
       ellipse anchored to the SVG's bottom left, and cover crops it
       mid-fade on a short page, leaving a hard edge across the section. */
    background-size: 100% auto;
}

.error-404__inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
    padding: 3rem var(--wp--style--root--padding-right) 4rem var(--wp--style--root--padding-left);
}

/* The title card — same treatment as the page-title boxes on Services and
   Contact: the hexagon texture over the brand black, 10px radius, title
   centred vertically. The colour underneath matches the image's own base
   so the card holds up while the texture loads, or if it fails to. */
.error-404__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
    padding: 1.5rem;
    border-radius: 10px;
    background-color: var(--wp--preset--color--black);
    background-image: url('assets/images/box-bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.error-404__title {
    margin: 0;
    font-size: var(--wp--preset--font-size--heading-3);
    color: var(--wp--preset--color--white);
}

.error-404__body > * + * {
    margin-top: 2rem;
}

.error-404__lead {
    margin: 0;
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--heather);
}

/* Search — the parent theme's search styling is scoped to the header's
   .nav-search__form-wrapper, so the form here carries its own. */
.error-404__search-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 500;
    color: var(--wp--preset--color--black);
}

.error-404__search-form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    max-width: 30rem;
}

.error-404__search-field {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--wp--preset--color--lilac-grey);
    border-radius: 5px;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
}

.error-404__search-field:focus-visible {
    outline: 2px solid var(--wp--preset--color--mint);
    outline-offset: 2px;
}

.error-404__search-submit {
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--wp--preset--color--black);
    border-radius: 5px;
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--small);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Black on mint, not the white used elsewhere on the site: white on mint
   is 2.2:1, below the 4.5:1 minimum, whereas black on mint is 8.5:1. */
.error-404__search-submit:hover,
.error-404__search-submit:focus-visible {
    border-color: var(--wp--preset--color--mint);
    background-color: var(--wp--preset--color--mint);
    color: var(--wp--preset--color--black);
}

/* Onward routes — a 404 here is usually a stale link from an email or an
   old service URL, so the page names real destinations rather than only
   offering the homepage. */
.error-404__routes-heading {
    margin: 0 0 1rem;
    font-size: var(--wp--preset--font-size--heading-6);
    color: var(--wp--preset--color--black);
}

.error-404__routes-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
}

.error-404__route-link {
    display: block;
    padding: 1.25rem;
    border: 1px solid var(--wp--preset--color--lilac-grey);
    border-left: 4px solid var(--wp--preset--color--mint);
    border-radius: 10px;
    background-color: var(--wp--preset--color--white);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.error-404__route-link:hover,
.error-404__route-link:focus-visible {
    border-color: var(--wp--preset--color--mint);
    text-decoration: none;
    transform: translateX(5px);
}

.error-404__route-title {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    color: var(--wp--preset--color--royal-purple);
}

.error-404__route-desc {
    display: block;
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--heather);
}

/* The homepage link restates the site's button treatment — the arrow and
   the hover shift come from theme.json's styles.blocks.core/button, which
   is per-block CSS and would not load for markup outside a real Button
   block. Same tokens, same arrow asset, so the two stay in step. */
.error-404__cta {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--wp--preset--color--white);
    border-radius: 5px;
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--small);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease,
        border-color 0.2s ease, transform 0.2s ease;
}

.error-404__cta::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 0.75em;
    margin-left: 0.6em;
    vertical-align: -0.05em;
    background-color: currentColor;
    -webkit-mask: url('assets/images/arrow-right.svg') no-repeat center / contain;
    mask: url('assets/images/arrow-right.svg') no-repeat center / contain;
}

/* As above: the site's button hover puts white on mint, which fails
   contrast, so this one darkens the label instead. The arrow follows,
   because it is masked against currentColor. */
.error-404__cta:hover,
.error-404__cta:focus-visible {
    border-color: var(--wp--preset--color--mint);
    background-color: var(--wp--preset--color--mint);
    color: var(--wp--preset--color--black);
    /* The theme underlines links on hover; buttons opt out. */
    text-decoration: none;
    transform: translateX(5px);
}

.error-404__actions {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .error-404__route-link,
    .error-404__cta {
        transition: none;
    }

    .error-404__route-link:hover,
    .error-404__route-link:focus-visible,
    .error-404__cta:hover,
    .error-404__cta:focus-visible {
        transform: none;
    }
}

@media (min-width: 769px) {
    .error-404__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 4rem;
        padding-top: 4.5rem;
        padding-bottom: 6rem;
    }

    .error-404__card {
        flex: 0 0 33.33%;
    }

    .error-404__body {
        flex: 1 1 66.66%;
    }

    .error-404__title {
        font-size: var(--wp--preset--font-size--heading-2);
    }

    .error-404__routes-list {
        grid-template-columns: repeat(3, 1fr);
    }
}