/*
Theme Name:  Warneford Park
Theme URI:   https://warnefordpark.co.uk
Description: Custom theme for the Warneford Park development project. A hybrid classic/block-editor theme derived from the project's visual identity. Supports Gutenberg for page content while keeping structural elements (masthead, nav, footer) hardcoded for consistency.
Version:     1.0.7
Author:      Oxford Health NHS Foundation Trust Communications
Author URI:  https://www.oxfordhealth.nhs.uk
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: warneford-park
Tags:        custom-logo, editor-style, block-editor-styles
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (design tokens)
   Derived from the Warneford Park logo colour palette.
   Adjust here and changes propagate throughout.
   ============================================================ */

:root {
    /* Blues — extracted from the diamond motif and wordmark */
    --wp-blue-deep:    #1a2e5a;   /* navy — darkest diamond / nav background */
    --wp-blue-mid:     #1e5faa;   /* strong blue — wordmark / primary action */
    --wp-blue-bright:  #3a84cc;   /* mid diamond — accents, rules, tile borders */
    --wp-blue-light:   #7fb3d9;   /* lightest diamond — muted text on dark bg */
    --wp-blue-pale:    #e8f1f8;   /* very pale blue tint — hover states */

    /* Neutrals — cool-leaning to complement the blues */
    --wp-white:        #ffffff;
    --wp-off-white:    #f4f7fb;   /* slightly blue-tinted off-white */
    --wp-mid-grey:     #e2e8f0;   /* borders, dividers */
    --wp-text-dark:    #0f1f3d;   /* near-black with blue undertone — headings */
    --wp-text-mid:     #3d5070;   /* body copy */
    --wp-text-light:   #5a6e8f;   /* secondary / muted text — darkened from #6b80a0 for WCAG AA (5.17:1 on white) */
    --wp-footer-text:  #8a9ec0;   /* footer-only muted text on dark navy bg — lighter than text-light for WCAG AA (4.89:1 on blue-deep) */

    /* Typography */
    --wp-font-sans:    'DM Sans', system-ui, sans-serif;
    --wp-font-serif:   'DM Serif Display', Georgia, serif;

    /* Spacing */
    --wp-container:    1100px;
    --wp-gutter:       48px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--wp-font-sans);
    font-weight: 300;
    color: var(--wp-text-dark);
    background-color: var(--wp-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Skip link — WCAG 2.2 requirement */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 12px 24px;
    background: var(--wp-blue-mid);
    color: var(--wp-white);
    font-family: var(--wp-font-sans);
    font-size: 14px;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--wp-blue-mid);
    text-decoration: underline;
}
a:hover {
    color: var(--wp-blue-deep);
}
a:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ============================================================
   LAYOUT UTILITY
   ============================================================ */

.wp-container {
    max-width: var(--wp-container);
    margin-inline: auto;
    padding-inline: var(--wp-gutter);
}

/* ============================================================
   MASTHEAD
   ============================================================ */

.site-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 14px;
    padding-inline: var(--wp-gutter);
    background: var(--wp-white);
    border-bottom: 1px solid var(--wp-mid-grey);
}

.site-masthead__logo img {
    height: 48px;
    width: auto;
}

.site-masthead__partners img {
    height: 56px;
    width: auto;
}

/* ============================================================
   MAIN NAVIGATION
   ============================================================ */

.site-nav {
    background: var(--wp-blue-deep);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(127, 179, 217, 0.12);
}

/* Wrapper row that holds the nav list and search button together.
   Flex so the nav list can centre itself and the search button
   sits pinned to the right end. */
.site-nav__bar {
    display: flex;
    align-items: center;
    padding-inline: var(--wp-gutter);
}

.site-nav__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Allow the nav list to grow and centre within the bar,
       leaving room for the search button on the right. */
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__inner a {
    display: block;
    font-family: var(--wp-font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--wp-blue-light);
    text-decoration: none;
    padding: 13px 16px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.site-nav__inner a:hover,
.site-nav__inner a[aria-current="page"] {
    color: var(--wp-white);
    border-bottom-color: var(--wp-blue-bright);
}

.site-nav__inner a:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: -3px;
    border-radius: 0;
}

/* Mobile nav toggle — hidden on desktop */
.site-nav__toggle {
    display: none;
    background: none;
    border: 1px solid rgba(127, 179, 217, 0.4);
    color: var(--wp-blue-light);
    font-family: var(--wp-font-sans);
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 2px;
    margin-inline: auto;
    margin-block: 10px;
}

/* ── SEARCH TOGGLE BUTTON ── */

/* The icon button at the right end of the nav bar */
.site-nav__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    /* Match the nav link colour so it sits naturally in the bar */
    color: var(--wp-blue-light);
    cursor: pointer;
    padding: 13px 0 13px 16px;
    /* No extra border — the icon itself is the affordance */
    transition: color 0.2s ease;
    /* Prevent the button shrinking when the nav list is long */
    flex-shrink: 0;
}

.site-nav__search-toggle:hover,
.site-nav__search-toggle[aria-expanded="true"] {
    color: var(--wp-white);
}

.site-nav__search-toggle:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── SEARCH DROPDOWN PANEL ── */

/* The panel is hidden by default; JS adds .is-open to reveal it */
.site-nav__search-panel {
    display: none;
    background: var(--wp-blue-deep);
    border-top: 1px solid rgba(127, 179, 217, 0.15);
    padding-block: 16px;
    padding-inline: var(--wp-gutter);
}

.site-nav__search-panel.is-open {
    display: block;
}

/* Constrain the form to the same max-width as the rest of the site */
.site-nav__search-inner {
    max-width: var(--wp-container);
    margin-inline: auto;
}

/* Style the search form inside the nav panel.
   Selectors target element types directly — more robust than
   relying on role attributes which can vary by WordPress version. */
.site-nav__search-panel form {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Visually hidden label — present for screen readers.
   Using our own selector rather than .screen-reader-text to avoid
   conflicts with WordPress block library styles which can apply
   display:none to that class in some versions. */
.site-nav__search-panel form label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.site-nav__search-panel input[type="search"] {
    /* Force visibility — block library or plugin resets can hide search inputs */
    display: block !important;
    flex: 1;
    min-width: 0; /* Prevents flex overflow on narrow viewports */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(127, 179, 217, 0.35);
    border-radius: 2px;
    color: var(--wp-white);
    font-family: var(--wp-font-sans);
    font-size: 14px;
    font-weight: 300;
    padding: 9px 14px;
    /* Remove browser default search field styling */
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.site-nav__search-panel input[type="search"]::placeholder {
    color: var(--wp-blue-light);
    opacity: 1;
}

.site-nav__search-panel input[type="search"]:focus {
    border-color: var(--wp-blue-bright);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(58, 132, 204, 0.35);
}

.site-nav__search-panel button[type="submit"] {
    display: block !important;
    background: var(--wp-blue-mid);
    border: none;
    border-radius: 2px;
    color: var(--wp-white);
    font-family: var(--wp-font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 9px 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.site-nav__search-panel button[type="submit"]:hover {
    background: var(--wp-blue-bright);
}

.site-nav__search-panel button[type="submit"]:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
    border-radius: 2px;
}



/* ============================================================
   HERO CAROUSEL
   ============================================================ */

.hero-carousel {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
    background: var(--wp-blue-deep);
}

.hero-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    /* Each slide's animation-delay is set inline in hero-carousel.php */
    animation: heroFade 22s infinite;
}

@keyframes heroFade {
    /*
     * True crossfade timing — slides overlap during transitions.
     *
     * Each slide's cycle:  1.5s fade in  +  4s hold  +  1.5s fade out
     * Slide interval:      5.5s  (hold + one fade = when next slide starts)
     * Total duration:      4 × 5.5s = 22s
     *
     * Because the next slide starts fading IN (delay = 5.5s) exactly when
     * the current slide starts fading OUT (at 5.5s into its 22s cycle),
     * the two images overlap for 1.5s — producing a true crossfade rather
     * than a fade-to-background between slides.
     *
     *   0%        start hidden
     *   6.8182%   fade in complete  (1.5s of 22s)
     *   25%       begin fade out    (5.5s of 22s — next slide starts here)
     *   31.8182%  fade out complete (7.0s of 22s)
     *   100%      remain hidden
     */
    0%        { opacity: 0; }
    6.8182%   { opacity: 1; }
    25%       { opacity: 1; }
    31.8182%  { opacity: 0; }
    100%      { opacity: 0; }
}

.hero-carousel__slide-caption {
    /* Positioned at the bottom of the slide, fades with it automatically */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Semi-transparent dark tint strip for legibility over any image */
    background: linear-gradient(
        to bottom,
        rgba(10, 20, 45, 0)   0%,
        rgba(10, 20, 45, 0.55) 100%
    );
    padding: 32px 24px 14px;
    /* Text styles */
    font-family: var(--wp-font-sans);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.9);
    /* Keep caption above the pause button z-index */
    z-index: 6;
    /* Prevent mouse events interfering with slide interaction */
    pointer-events: none;
    /* Ensure the pause button, which sits bottom-right, is not obscured */
    padding-right: 120px;
}

/* Pause/play button — required for WCAG 2.2 SC 2.2.2 */
.hero-carousel__pause {
    position: absolute;
    bottom: 14px;
    right: 20px;
    z-index: 10;
    background: rgba(26, 46, 90, 0.6);
    border: 1px solid rgba(127, 179, 217, 0.35);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--wp-font-sans);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 14px;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.2s ease;
}
.hero-carousel__pause:hover {
    background: rgba(26, 46, 90, 0.85);
}
.hero-carousel__pause:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
}

/* ============================================================
   INTRO SECTION
   ============================================================ */

.section-intro {
    background: var(--wp-white);
    padding-block: 64px 52px;
    padding-inline: var(--wp-gutter);
}

.section-intro__inner {
    max-width: var(--wp-container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 64px;
    align-items: start;
}

.section-intro__headline {
    font-family: var(--wp-font-serif);
    font-size: 38px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--wp-text-dark);
    margin-bottom: 24px;
}

.section-intro__headline em {
    font-style: italic;
    color: var(--wp-blue-mid);
}

.section-intro__rule {
    width: 40px;
    height: 2px;
    background: var(--wp-blue-bright);
    margin-bottom: 24px;
    border: none;
}

.section-intro__body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--wp-text-mid);
}

/* Featured image column — replaces the former key facts column */
.section-intro__image {
    /* Align to the top of the grid row, matching the copy column */
    align-self: start;
    border-radius: 2px;
    overflow: hidden;
}

.section-intro__img {
    display: block;
    width: 100%;
    height: auto;
    /* Remove any default bottom gap on inline images */
    vertical-align: bottom;
}

/* ============================================================
   PLANS SECTION
   ============================================================ */

.section-plans {
    background: var(--wp-off-white);
    padding-block: 52px;
    padding-inline: var(--wp-gutter);
    border-top: 1px solid var(--wp-mid-grey);
    border-bottom: 1px solid var(--wp-mid-grey);
}

.section-plans__inner {
    max-width: var(--wp-container);
    margin-inline: auto;
}

/* Shared section label style */
.section-label {
    font-family: var(--wp-font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp-blue-mid);
    margin-bottom: 28px;
}

.plan-item {
    display: block;
    padding-block: 20px;
    border-top: 1px solid var(--wp-mid-grey);
}

.plan-item__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--wp-text-dark);
    margin-bottom: 5px;
}

.plan-item__desc {
    font-size: 13px;
    font-weight: 300;
    color: var(--wp-text-mid);
    line-height: 1.7;
}

/* ============================================================
   ANNOUNCEMENT BAND
   ============================================================ */

.announcement-band {
    background: var(--wp-blue-mid);
    padding-block: 20px;
    padding-inline: var(--wp-gutter);
}

.announcement-band__inner {
    max-width: var(--wp-container);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.announcement-band__flag {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp-white);
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 2px;
    white-space: nowrap;
}

.announcement-band__text {
    font-size: 14px;
    font-weight: 400;
    color: var(--wp-white);
    flex: 1;
    min-width: 200px;
}

.announcement-band__link {
    font-size: 12px;
    font-weight: 500;
    color: var(--wp-white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 1px;
    white-space: nowrap;
    transition: border-color 0.2s ease;
}
.announcement-band__link:hover {
    color: var(--wp-white);
    border-bottom-color: rgba(255, 255, 255, 0.9);
}
.announcement-band__link:focus-visible {
    outline: 3px solid var(--wp-white);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============================================================
   SIGNPOST TILES
   ============================================================ */

.section-tiles {
    background: var(--wp-white);
    padding-block: 60px;
    padding-inline: var(--wp-gutter);
}

.section-tiles__inner {
    max-width: var(--wp-container);
    margin-inline: auto;
}

.tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.tile {
    border: 1px solid var(--wp-mid-grey);
    border-top: 3px solid var(--wp-blue-bright);
    background: var(--wp-white);
    padding: 24px 22px 20px;
    border-radius: 2px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-top-color 0.2s ease, background 0.2s ease;
}

.tile:hover {
    border-top-color: var(--wp-blue-deep);
    background: var(--wp-off-white);
}

.tile:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
}

.tile__title {
    font-family: var(--wp-font-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--wp-text-dark);
    line-height: 1.2;
}

.tile__desc {
    font-size: 12px;
    font-weight: 300;
    color: var(--wp-text-light);
    line-height: 1.6;
    flex: 1;
}

.tile__arrow {
    font-size: 14px;
    color: var(--wp-blue-mid);
    align-self: flex-end;
    /* Hide from screen readers — purely decorative */
    aria-hidden: true;
}

/* ============================================================
   NEWS SECTION
   ============================================================ */

.section-news {
    background: var(--wp-blue-deep);
    padding-block: 52px;
    padding-inline: var(--wp-gutter);
}

.section-news__inner {
    max-width: var(--wp-container);
    margin-inline: auto;
}

.section-news__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
}

.section-news__all-link {
    font-size: 11px;
    color: var(--wp-blue-light);
    text-decoration: none;
    border-bottom: 1px solid var(--wp-blue-bright);
    padding-bottom: 1px;
}
.section-news__all-link:hover {
    color: var(--wp-white);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.news-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(127, 179, 217, 0.18);
    border-top: 2px solid var(--wp-blue-bright);
    padding: 20px;
    border-radius: 2px;
    text-decoration: none;
    display: block;
    transition: background 0.2s ease;
}
.news-card:hover {
    background: rgba(255, 255, 255, 0.08);
}
.news-card:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
}

.news-card__date {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp-blue-light);
    margin-bottom: 8px;
    display: block;
}

.news-card__title {
    /* Target h3 directly — the title was changed from <p> to <h3> for correct
       semantics and to avoid browser font normalisation overriding the serif family.
       The margin-top reset prevents the entry-content h3 rule (40px top margin)
       from bleeding in if this card ever appears in a wider content context. */
    font-family: var(--wp-font-serif);
    font-size: 15px;
    font-weight: 400;
    color: var(--wp-white);
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: 8px;
}

.news-card__excerpt {
    /* Increased from 10px to 12px — was disproportionately small against the 16px title.
       12px is still clearly secondary but readable and in scale.
       Colour fixed in previous pass: full #7fb3d9 gives 5.91:1 on navy. */
    font-size: 12px;
    font-weight: 300;
    color: var(--wp-blue-light);
    line-height: 1.6;
}




/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer {
    background: var(--wp-blue-deep);
    border-top: 1px solid rgba(127, 179, 217, 0.15);
    padding-block: 24px;
    padding-inline: var(--wp-gutter);
}

.site-footer__inner {
    max-width: var(--wp-container);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.site-footer__copy {
    font-size: 11px;
    /* --wp-text-light (#5a6e8f) is too dark for a navy background (3.30:1 fails).
       Using --wp-footer-text (#8a9ec0) which gives 4.89:1 on --wp-blue-deep. */
    color: var(--wp-footer-text);
}

.site-footer__links {
    display: flex;
    gap: 20px;
    list-style: none;
}

.site-footer__links a {
    font-size: 11px;
    /* Same fix as footer copy — use lighter --wp-footer-text on the dark background */
    color: var(--wp-footer-text);
    text-decoration: none;
}
.site-footer__links a:hover {
    color: var(--wp-blue-light);
}

/* ============================================================
   INNER PAGE — generic content area
   ============================================================ */

.page-header {
    background: var(--wp-off-white);
    border-bottom: 1px solid var(--wp-mid-grey);
    padding-block: 48px 40px;
    padding-inline: var(--wp-gutter);
}

.page-header__inner {
    max-width: var(--wp-container);
    margin-inline: auto;
}

.page-header__title {
    font-family: var(--wp-font-serif);
    font-size: 36px;
    font-weight: 400;
    color: var(--wp-text-dark);
    line-height: 1.2;
}

/* Optional strapline below the page title — set via page editor metabox */
.page-header__strapline {
    font-family: var(--wp-font-serif);
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: var(--wp-text-light);
    line-height: 1.4;
    margin-top: 10px;
}

.page-content {
    padding-block: 52px;
    padding-inline: var(--wp-gutter);
}

.page-content__inner {
    max-width: var(--wp-container);
    margin-inline: auto;
}

/* ── TWO-COLUMN LAYOUT ──
   The sidebar is always present (for consistent content width).
   280px sidebar, remaining space for content, 48px gap between. */
.page-content__inner--with-sidebar {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    align-items: start;
}

/* ── SIDEBAR ── */

.page-sidebar {
    /* Stick the sidebar to the top of the viewport as the user scrolls.
       top value accounts for the sticky nav bar height (~44px) plus breathing room. */
    position: sticky;
    top: 60px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── SIDEBAR PANELS (shared styles) ── */

.sidebar-panel {
    background: var(--wp-off-white);
    border: 1px solid var(--wp-mid-grey);
    border-left: 3px solid var(--wp-blue-bright);
    border-radius: 2px;
    padding: 20px;
}

/* Panel heading label — matches the section-label style used elsewhere */
.sidebar-panel__heading {
    font-family: var(--wp-font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp-blue-mid);
    margin-bottom: 14px;
}

/* When the panel heading is a link to the parent page */
.sidebar-panel__heading-link {
    color: var(--wp-blue-mid);
    text-decoration: none;
    transition: color 0.15s ease;
}

.sidebar-panel__heading-link:hover {
    color: var(--wp-blue-deep);
}

/* Panel body — for the free-text info box */
.sidebar-panel__body {
    font-size: 13px;
    font-weight: 300;
    color: var(--wp-text-mid);
    line-height: 1.7;
}

.sidebar-panel__body p {
    margin-bottom: 12px;
}
.sidebar-panel__body p:last-child {
    margin-bottom: 0;
}

.sidebar-panel__body a {
    color: var(--wp-blue-mid);
}

.sidebar-panel__body ul,
.sidebar-panel__body ol {
    padding-left: 18px;
    margin-bottom: 12px;
}

.sidebar-panel__body li {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 4px;
}

/* ── TABLE OF CONTENTS ── */

.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Ordered list — we use a custom counter so we can style it */
    counter-reset: toc-counter;
}

.toc-list__item {
    counter-increment: toc-counter;
    padding-block: 5px;
    border-top: 1px solid var(--wp-mid-grey);
}

.toc-list__item:first-child {
    border-top: none;
}

.toc-list__link {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--wp-text-mid);
    text-decoration: none;
    line-height: 1.4;
    padding-left: 20px;
    position: relative;
    transition: color 0.15s ease;
}

/* Counter number before each TOC item */
.toc-list__link::before {
    content: counter(toc-counter);
    position: absolute;
    left: 0;
    font-size: 10px;
    font-weight: 500;
    color: var(--wp-blue-bright);
    top: 1px;
}

.toc-list__link:hover {
    color: var(--wp-blue-mid);
}

.toc-list__link:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── SUB-PAGES LIST ── */

.subpages-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.subpages-list__item {
    border-top: 1px solid var(--wp-mid-grey);
}

.subpages-list__item:first-child {
    border-top: none;
}

.subpages-list__link {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--wp-text-mid);
    text-decoration: none;
    padding-block: 7px;
    padding-left: 10px;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.subpages-list__link:hover,
.subpages-list__link[aria-current="page"] {
    color: var(--wp-blue-mid);
    border-left-color: var(--wp-blue-bright);
}

.subpages-list__link:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── SINGLE POST HEADER ── */

/* Back link — replaces the inline style from the original single.php */
.post-header__back a {
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--wp-blue-mid);
    text-decoration: none;
    text-transform: uppercase;
}
.post-header__back a:hover {
    color: var(--wp-blue-deep);
}
.post-header__back {
    margin-bottom: 16px;
}

/* Publication date — replaces the inline style from the original single.php */
.post-header__date {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp-text-light);
    margin-bottom: 12px;
}

/* ── RECENT POSTS SIDEBAR PANEL ── */

.recent-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recent-posts-list__item {
    border-top: 1px solid var(--wp-mid-grey);
}

.recent-posts-list__item:first-child {
    border-top: none;
}

/* Each recent post is a block link containing title + date */
.recent-posts-list__link {
    display: block;
    text-decoration: none;
    padding-block: 8px;
    padding-left: 10px;
    border-left: 2px solid transparent;
    transition: border-color 0.15s ease;
}

.recent-posts-list__link:hover {
    border-left-color: var(--wp-blue-bright);
}

.recent-posts-list__link:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

.recent-posts-list__title {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--wp-text-dark);
    line-height: 1.4;
    margin-bottom: 3px;
    transition: color 0.15s ease;
}

.recent-posts-list__link:hover .recent-posts-list__title {
    color: var(--wp-blue-mid);
}

.recent-posts-list__date {
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp-text-light);
}

/* "All news" link at the bottom of the recent posts panel */
.recent-posts-list__all {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--wp-mid-grey);
}

.recent-posts-list__all a {
    font-size: 11px;
    font-weight: 500;
    color: var(--wp-blue-mid);
    text-decoration: none;
    letter-spacing: 0.04em;
}

.recent-posts-list__all a:hover {
    color: var(--wp-blue-deep);
}



/* Prose typography for Gutenberg content */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: var(--wp-font-serif);
    font-weight: 400;
    color: var(--wp-text-dark);
    line-height: 1.2;
    margin-bottom: 16px;
    margin-top: 40px;
    /* Constrain headings to the same reading-width frame as paragraphs.
       Without this, h3/h4 at smaller sizes stretched across the full container. */
    max-width: 680px;
}
.entry-content h1 { font-size: 32px; }
.entry-content h2 { font-size: 26px; }
.entry-content h3 { font-size: 22px; }
.entry-content h4 { font-size: 18px; }

.entry-content p {
    font-size: 15px;
    font-weight: 300;
    color: var(--wp-text-mid);
    line-height: 1.8;
    margin-bottom: 20px;
    max-width: 680px;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 20px;
    padding-left: 24px;
    max-width: 680px;
}

.entry-content li {
    font-size: 15px;
    font-weight: 300;
    color: var(--wp-text-mid);
    line-height: 1.7;
    margin-bottom: 8px;
}

.entry-content a {
    color: var(--wp-blue-mid);
}

.entry-content strong {
    font-weight: 500;
    color: var(--wp-text-dark);
}

.entry-content blockquote {
    border-left: 3px solid var(--wp-blue-bright);
    padding-left: 24px;
    margin-block: 32px;
    font-family: var(--wp-font-serif);
    font-size: 20px;
    font-style: italic;
    color: var(--wp-text-mid);
    line-height: 1.5;
    /* Constrain to reading width — was previously unconstrained and extended
       beyond the paragraph frame, especially noticeable at wider viewports. */
    max-width: 680px;
}

/* ============================================================
   IMAGE ALIGNMENT
   Standard WordPress alignment classes generated by the classic
   editor when the editor sets image alignment to left, right,
   centre, or none. Without these rules the floats have no margin
   and text does not wrap around floated images.
   ============================================================ */

/*
 * Left-aligned image — floats left, text wraps to the right.
 * margin-right and margin-bottom create breathing room between
 * the image and the surrounding text.
 */
.entry-content .alignleft,
.entry-content img.alignleft {
    float: left;
    margin-right: 24px;
    margin-bottom: 16px;
    margin-top: 4px;
}

/*
 * Right-aligned image — floats right, text wraps to the left.
 */
.entry-content .alignright,
.entry-content img.alignright {
    float: right;
    margin-left: 24px;
    margin-bottom: 16px;
    margin-top: 4px;
}

/*
 * Centred image — displayed as a block so margin:auto works.
 * Clears any preceding floats so it sits on its own line.
 */
.entry-content .aligncenter,
.entry-content img.aligncenter {
    display: block;
    margin-inline: auto;
    margin-block: 24px;
    clear: both;
}

/*
 * No alignment set — display as block, no float.
 * Clears floats so the image starts below any preceding floated content.
 */
.entry-content .alignnone,
.entry-content img.alignnone {
    display: block;
    margin-bottom: 20px;
    clear: both;
}

/*
 * WordPress wraps aligned images in a <figure class="wp-caption alignleft">
 * (or alignright etc.) when a caption is added. These rules ensure the
 * caption container floats correctly alongside the caption text below it.
 */
.entry-content .wp-caption {
    max-width: 100%;
}

.entry-content .wp-caption.alignleft {
    float: left;
    margin-right: 24px;
    margin-bottom: 16px;
    margin-top: 4px;
}

.entry-content .wp-caption.alignright {
    float: right;
    margin-left: 24px;
    margin-bottom: 16px;
    margin-top: 4px;
}

.entry-content .wp-caption.aligncenter {
    display: block;
    margin-inline: auto;
    margin-block: 24px;
    clear: both;
}

.entry-content .wp-caption-text {
    font-size: 12px;
    font-weight: 400;
    color: var(--wp-text-light);
    line-height: 1.5;
    margin-top: 6px;
    font-style: italic;
}

/*
 * Clearfix on entry-content itself — ensures the content container
 * expands to contain any floated images at the end of the content,
 * preventing them from bleeding into the footer or next section.
 */
.entry-content::after {
    content: '';
    display: table;
    clear: both;
}

/*
 * On mobile, floated images would be too wide relative to the
 * narrow viewport. Cancel floats below 540px so images stack
 * naturally above text rather than squeezing it into a thin column.
 */
@media (max-width: 540px) {
    .entry-content .alignleft,
    .entry-content .alignright,
    .entry-content img.alignleft,
    .entry-content img.alignright,
    .entry-content .wp-caption.alignleft,
    .entry-content .wp-caption.alignright {
        float: none;
        margin-inline: 0;
        display: block;
        margin-bottom: 16px;
    }
}


/* ============================================================
   SITEMAP
   ============================================================ */

.sitemap-nav {
    margin-top: 8px;
}

/* Base list — all depths share these rules */
.sitemap-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Top-level list items */
.sitemap-list--depth-0 > .sitemap-list__item {
    border-top: 1px solid var(--wp-mid-grey);
    padding-block: 2px;
}

.sitemap-list--depth-0 > .sitemap-list__item:first-child {
    border-top: none;
}

/* All links */
.sitemap-list__link {
    display: inline-block;
    font-family: var(--wp-font-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--wp-blue-mid);
    text-decoration: none;
    padding-block: 7px;
    transition: color 0.15s ease;
}

.sitemap-list__link:hover {
    color: var(--wp-blue-deep);
    text-decoration: underline;
}

.sitemap-list__link:focus-visible {
    outline: 3px solid var(--wp-blue-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Nested lists — each depth gets progressively more indent */
.sitemap-list--depth-1 {
    padding-left: 20px;
    border-left: 2px solid var(--wp-mid-grey);
    margin-top: 4px;
    margin-bottom: 6px;
}

.sitemap-list--depth-2 {
    padding-left: 20px;
    border-left: 2px solid var(--wp-blue-pale);
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Further depths — same style as depth-2 */
.sitemap-list--depth-3,
.sitemap-list--depth-4,
.sitemap-list--depth-5 {
    padding-left: 20px;
    border-left: 2px solid var(--wp-blue-pale);
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Slightly smaller text at depth 1+ */
.sitemap-list--depth-1 .sitemap-list__link {
    font-size: 14px;
    color: var(--wp-text-mid);
}

.sitemap-list--depth-2 .sitemap-list__link,
.sitemap-list--depth-3 .sitemap-list__link,
.sitemap-list--depth-4 .sitemap-list__link,
.sitemap-list--depth-5 .sitemap-list__link {
    font-size: 13px;
    color: var(--wp-text-light);
}

.sitemap-list--depth-1 .sitemap-list__link:hover,
.sitemap-list--depth-2 .sitemap-list__link:hover,
.sitemap-list--depth-3 .sitemap-list__link:hover {
    color: var(--wp-blue-mid);
}



.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.archive-card {
    border: 1px solid var(--wp-mid-grey);
    border-top: 3px solid var(--wp-blue-bright);
    padding: 24px;
    border-radius: 2px;
    text-decoration: none;
    display: block;
    transition: background 0.2s ease;
}
.archive-card:hover {
    background: var(--wp-off-white);
}

.archive-card__date {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp-text-light);
    margin-bottom: 8px;
    display: block;
}

.archive-card__title {
    font-family: var(--wp-font-serif);
    font-size: 18px;
    color: var(--wp-text-dark);
    line-height: 1.3;
    margin-bottom: 10px;
}

.archive-card__excerpt {
    font-size: 13px;
    font-weight: 300;
    color: var(--wp-text-mid);
    line-height: 1.6;
}

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

.not-found {
    padding-block: 80px;
    padding-inline: var(--wp-gutter);
    text-align: center;
}

.not-found__heading {
    font-family: var(--wp-font-serif);
    font-size: 48px;
    /* --wp-blue-light on white was 2.25:1 — fails even the 3:1 large text threshold.
       #4a7fb0 gives 4.24:1 — comfortably passes AA large text and looks appropriate. */
    color: #4a7fb0;
    margin-bottom: 16px;
}

.not-found__message {
    font-size: 16px;
    color: var(--wp-text-mid);
    margin-bottom: 32px;
}

.btn-primary {
    display: inline-block;
    background: var(--wp-blue-mid);
    color: var(--wp-white);
    font-family: var(--wp-font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 12px 28px;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.btn-primary:hover {
    background: var(--wp-blue-deep);
    color: var(--wp-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    :root {
        --wp-gutter: 24px;
    }

    /* Masthead — stack logos and centre both on mobile */
    .site-masthead {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    /* Full-size images — override any hardcoded width/height attributes
       WordPress sets on inserted images, so they scale down on narrow screens.
       Applies to images in post/page content and to wp-caption wrappers. */
    .entry-content img,
    .entry-content figure,
    .entry-content .wp-caption {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }

    /* Nav bar — stack toggle and search icon on mobile */
    .site-nav__bar {
        flex-wrap: wrap;
    }

    /* Nav collapses to toggled menu */
    .site-nav__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        display: none; /* toggled by JS */
        padding-block: 8px;
        /* On mobile the nav list sits below the bar row, spanning full width */
        width: 100%;
        order: 3;
    }
    .site-nav__inner.is-open {
        display: flex;
    }
    .site-nav__inner a {
        padding: 10px 16px;
        width: 100%;
        border-bottom: 1px solid rgba(127, 179, 217, 0.1);
        border-left: 2px solid transparent;
    }
    .site-nav__inner a:hover,
    .site-nav__inner a[aria-current="page"] {
        border-bottom-color: rgba(127, 179, 217, 0.1);
        border-left-color: var(--wp-blue-bright);
        border-bottom-width: 1px;
    }
    .site-nav__toggle {
        display: block;
        /* Push toggle to the left, search icon stays right */
        order: 1;
        margin-inline: 0;
    }

    /* Search icon stays in bar row, pinned right */
    .site-nav__search-toggle {
        order: 2;
        margin-left: auto;
    }

    /* Hero */
    .hero-carousel {
        height: 300px;
    }

    /* Intro — stack columns */
    .section-intro__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .section-intro__headline {
        font-size: 28px;
    }

    /* Tiles — 2 column */
    .tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* News — 1 column */
    .news-grid,
    .archive-grid {
        grid-template-columns: 1fr;
    }

    /* Page header */
    .page-header__title {
        font-size: 28px;
    }

    /* Inner page sidebar — stack below content on mobile */
    .page-content__inner--with-sidebar {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Sidebar no longer sticky when stacked — would cause odd behaviour */
    .page-sidebar {
        position: static;
    }
}

@media (max-width: 540px) {
    .tiles-grid {
        grid-template-columns: 1fr;
    }
    .section-intro__headline {
        font-size: 24px;
    }
    .hero-carousel {
        height: 220px;
    }
}