/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
/* creating the max width of 1920px for the site body - to be moved to styles.css when ready for launch */
body {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    color: var(--contrast-2);
}
.site-header {
    padding-top: .5rem;
    padding-bottom: 1rem;
}
.title-hero h1 {
    color: #fff;
}

/* =============================================================
   Section System — the foundation for all page layouts
   ============================================================= */

/* 
 * Outer section. Full-width background area, capped at 1920px 
 * design width. Backgrounds (colors, images) live here.
 */
.gbp-section {
    max-width: 1920px;
    margin: 0 auto;
    position: relative; /* For absolute-positioned decorations */
}
.search-results .gbp-section, .search-no-results .gbp-section {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* 
 * Inner constrained content. This is where text and components live.
 * 1440px container + 40px padding = 1360px content area.
 * At viewport ≥ 1920px: 280px outer margins from viewport edge.
 */
.gbp-section__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* 
 * Standard vertical rhythm. Apply via modifier class on .gbp-section.
 * Most sections use this; the few that need different spacing 
 * (hero, footer) override individually.
 */
.gbp-section--padded > .gbp-section__inner {
    padding-top: 86px;
    padding-bottom: 86px;
}

/* Tablet: ~64px vertical, slightly tighter horizontal */
@media (max-width: 1024px) {
    .gbp-section__inner {
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .gbp-section--padded > .gbp-section__inner {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* Mobile: 48px vertical, 20px horizontal */
@media (max-width: 768px) {
    .gbp-section__inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .gbp-section--padded > .gbp-section__inner {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* 
 * Variant: section without horizontal padding 
 * (for full-bleed elements like full-width images inside sections)
 */
.gbp-section__inner--flush {
    padding-left: 0;
    padding-right: 0;
}

/* CSS for styling main menu and search icon */
/* =============================================================
   Primary Navigation — Responsive Gap Spacing
   ============================================================= */

#site-navigation {
    --nav-gap: 1rem;
}

@media (min-width: 1024px) {
    #site-navigation {
        --nav-gap: 1.5rem;
    }
}

@media (min-width: 1200px) {
    #site-navigation {
        --nav-gap: 4rem;
    }
}

@media (min-width: 1400px) {
    #site-navigation {
        --nav-gap: 5rem;
    }
}

/* Wrapper holding .main-nav and .menu-bar-items */
#site-navigation .inside-navigation {
    gap: var(--nav-gap);
}
.inside-header {
    padding: 20px 20px;
}
@media (min-width: 1024px) {
    .inside-header {
        padding: 20px 40px;
    }
}
@media (min-width: 1400px) {
    .inside-header {
        padding: 20px 60px;
    }
}
@media (min-width: 1700px) {
    .inside-header {
        padding: 20px 160px;
    }
}
.site-logo.mobile-header-logo a img {
    height: 100px;
    width: auto;
}
@media (max-width: 1700px) {
    .site-header .site-logo .header-image {
        width: auto;
        height: 90px;
    }
}
.title-hero.gbp-section {
    padding-top: 0;
    padding-bottom: 0;
}
/* 
 * Top-level <ul> has class "sf-menu" in GeneratePress.
 * Submenus use class "sub-menu", so they're unaffected by 
 * the flex layout below — flex only applies to direct children.
 */
#site-navigation .sf-menu {
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
}

/* Remove GP's default horizontal padding on menu links */
#site-navigation .sf-menu .menu-item a {
    padding-left: 0;
    padding-right: 0;
}

/* 
 * Restore padding inside dropdowns so submenu items stay 
 * comfortably clickable. Higher specificity wins over the rule above.
 */
#site-navigation .sf-menu .sub-menu .menu-item a {
    padding-left: 20px;
    padding-right: 20px;
}
/* =============================================================
   .gbp-split — Side-by-side text + media layout primitive
   
   Composes inside .gbp-section__inner. Carries no padding 
   or margin of its own — that's the section system's job.
   ============================================================= */

.gbp-split {
    /* Configurable via the custom property — see usage notes below */
    --gbp-split-gap: 5rem;
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gbp-split-gap);
    align-items: start;              /* Top-align by default */
}

/* Center-align modifier */
.gbp-split--center {
    align-items: center;
}

/* 
 * Media column: center the image within the column.
 * The image's own max-width (set on the image block) controls 
 * its size. We just handle alignment here — no width constraints
 * that would compete with the image's own settings.
 */
.gbp-split__media img {
    display: block;
/*    margin-inline: auto; */
    height: auto;
}

/* Stack at the section system's mobile breakpoint */
@media (max-width: 1024px) {
    .gbp-split {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }
}

/* Ensure split columns don't pick up stray auto margins.
   The .gbp-split grid handles column placement; the columns 
   themselves should never need margin: auto. */
.gbp-split .gbp-split__text,
.gbp-split .gbp-split__media {
    margin-left: 0;
    margin-right: 0;
}
/* adjusts spacing for single logos */
.gbp-split .gbp-split__media.single {
    margin-left: auto;
    margin-right: auto;
}
/* adjusts sizing for single logos */
.single .gbp-partner-card__logo img {
    width: 100%;
    height: 100%;
}
/* Button styles that are difficult to add via GBP panels:
 * Focus-visible: meaningful indicator for keyboard users.
 * Uses a 3px outline offset from the button so it's clearly 
 * visible regardless of background contrast.
 * `:focus-visible` (rather than `:focus`) means the outline 
 * only appears for keyboard navigation, not mouse clicks — 
 * which is the modern, correct behavior.
 */
.gbp-button--primary:focus-visible, .gbp-button--secondary:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    opacity: 0.9;
}

/* 
 * Remove the default focus ring only when focus-visible isn't 
 * matched (i.e., on mouse click). Keeps clean visual on click,
 * full visibility on keyboard tab.
 */
.gbp-button--primary:focus:not(:focus-visible), .gbp-button--secondary:focus:not(:focus-visible) {
    outline: none;
}
.gbp-link--read-more:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}

/* =============================================================
   "Partners in Research" Section — Responsive Refinements
   ============================================================= */

/* 
 * Scale the top-left radius fluidly with viewport width.
 * Designed at 81px on a 1920px viewport (~4.2vw).
 * Floor at 24px so the curve stays subtle on phones,
 * ceiling at 81px so it never exceeds the spec.
 */
.home-partners {
    border-top-left-radius: clamp(24px, 4.2vw, 81px);
}

/* 
 * "Explore our partnerships" button — fixed width on desktop, 
 * full-width when the layout stacks at tablet and below.
 */
@media (min-width: 1025px) {
    .home-partners .gbp-button--primary, .home-partners .gbp-button--secondary {
        width: 486px;
        min-height: 75px;
    }
}

@media (max-width: 1024px) {
    .home-partners .gbp-button--primary, .home-partners .gbp-button--secondary {
        width: 100%;
        max-width: 486px;  /* Don't let it stretch wider than its desktop size */
        min-height: 75px;
    }
}
.has-divider, .has-full-divider {
    position: relative;
}
.has-divider::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40px;  /* Matches your left padding */
    right: 40px; /* Matches your right padding */
    height: 2px; /* The thickness of your border */
    background-color: var(--global-color-12); /* Your border color */
}
article:not(:last-of-type) section.has-full-divider::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0px;  /* Matches your left padding */
    right: 0px; /* Matches your right padding */
    height: 2px; /* The thickness of your border */
    background-color: var(--global-color-12); /* Your border color */
}
.home-trio::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px; /* The thickness of your border */
    background-color: var(--contrast); /* Your border color */
}
h2 a:link, h2 a:visited, h3 a:link, h3 a:visited {
    color: var(--contrast-2);
    text-decoration: none;
}
h2 a:hover, h2 a:active, h3 a:hover, h3 a:active {
    color: var(--contrast-2);
    text-decoration: underline;
}

/* Update transition to include transform for the press effect */
.gbp-button--primary, .gbp-button--secondary {
    transition: background-color 0.2s ease,
                color 0.2s ease,
                opacity 0.2s ease,
                transform 0.1s ease;
}

/* Hover effect */
.gbp-button--primary:hover, .gbp-button--secondary:hover {
    opacity: 0.9;
}

/* Active: tactile "press" feedback */
.gbp-button--primary:active, .gbp-button--secondary:active {
    transform: translateY(1px);
    opacity: 0.85;
}
@media (max-width: 480px) {
    .kidney-hero .gbp-button--primary, .kidney-hero .gbp-button--secondary {
        white-space: normal;
        text-align: center;
        max-width: 100%;
        min-width: 0;          /* Critical for flex/grid children */
        word-break: break-word;
    }
}
/* Honor users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gbp-button--primary, .gbp-button--secondary {
        /* Keep color/opacity transitions, drop transform */
        transition: background-color 0.2s ease, 
                    color 0.2s ease, 
                    opacity 0.2s ease;
    }
    .gbp-button--primary:active, .gbp-button--secondary:active {
        transform: none;  /* No physical movement */
    }
}

/* override of styles for Read More link on homepage */
.gbp-link--read-more a:link, .gbp-link--read-more a:visited {
    color: var(--accent);
    text-decoration: none;
}
.gbp-link--read-more a:hover, .gbp-link--read-more a:active {
    color: var(--accent);
    text-decoration: underline;
}
/* Footer Styles */
/* footer link styles */
.footnav a:link, .footnav a:visited {
	color: var(--global-color-13);
	font-size: 16px;
	text-decoration: none;
	text-transform: uppercase;
}
.footnav a:hover, .footnav a:active {
	color: var(--accent);
	text-decoration: underline;
}
.footnav .linkout a:link, .footnav .linkout a:visited {
	color: var(--accent);
}
.footnav .linkout a:hover, .footnav .linkout a:active {
	color: var(--accent);
	text-decoration: underline;
}
.footlegal a:link, .footlegal a:visited {
	color: var(--global-color-12);
	font-size: 14px;
	text-decoration: none;
}
.footlegal a:hover, .footlegal a:active {
	color: var(--accent);
	text-decoration: underline;
}
/* Top-left radius scaling, matching the Partners section pattern */
footer {
    border-top-left-radius: clamp(24px, 4.2vw, 81px);
}
footer .footer-inner {
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
}
footer .gb-element-ef3bde62 {
    max-width: 767px;
}
/* 
 * Tier 2 — Narrower desktop (1024px–1679px)
 * Top row: Logo (left) + Nav (right). 
 * Bottom row: Acknowledgement, centered.
 * Nav stays at its full 427px width — no compression.
 */
@media (max-width: 1679px) {
    footer .footer-inner {
        grid-template-columns: auto 427px;
        grid-template-areas:
            "logo nav"
            "acknowledgement acknowledgement";
        row-gap: 3rem;
        column-gap: 3rem;
        justify-content: space-around;
    }
    
    footer .logo { 
        grid-area: logo; 
    }
    
    footer .footer-nav { 
        grid-area: nav;
    }
    
    footer .acknowledgement {
        grid-area: acknowledgement;
        max-width: 800px;
        margin-inline: auto;
        text-align: center;
    }
}

/* 
 * Tier 3 — Mobile (≤ 1023px)
 * Everything stacked vertically, centered.
 */
@media (max-width: 1023px) {
    footer .footer-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "nav"
            "acknowledgement";
        row-gap: 2.5rem;
        padding: 48px 24px 32px;
    }
    
    footer .logo { 
        justify-self: center; 
    }
    
    footer .footer-nav { 
        justify-self: center;
        width: 100%;
        max-width: 427px;
    }
    
    footer .acknowledgement {
        max-width: 100%;
    }
}

/* =============================================================
   Strategic Research Roadmap on About page — Numbered Priority Cards
   ============================================================= */

.gbp-roadmap {
    list-style: none;            /* Remove default list markers */
    counter-reset: roadmap;      /* Initialize counter at 0 */
    padding: 0;
    margin: 0;
    
    /* 4-column grid at desktop */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    
    /* Extra top space so the badges have room to "float" above */
    padding-top: 4rem;
}

.gbp-roadmap li {
    counter-increment: roadmap;  /* Each <li> increments the counter */
    
    /* The card box */
    background-color: var(--base-2);  
    border-radius: 16px;
    padding: 3.5rem 1.5rem 2rem; /* Extra top padding for badge overlap */
    
    /* Text */
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--global-color-8);
    
    /* Position relative so we can absolute-position the badge */
    position: relative;
}

@media (min-width: 1400px) {
    .gbp-roadmap li {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

.gbp-roadmap li::before {
    /* 
     * The numbered badge.
     * counter() with `decimal-leading-zero` automatically formats 
     * single digits with a leading zero: 01, 02, 03, ... 09, 10, 11.
     * Built into CSS — no custom counter-style needed.
     */
    content: counter(roadmap, decimal-leading-zero);
    
    /* Circular badge styling */
    position: absolute;
    top: -2.5rem;                /* Pull above the card */
    left: 50%;
    transform: translateX(-50%);  /* Horizontally center */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 5rem;
    height: 5rem;
    border-radius: 50%;          /* Perfect circle */
    
    background-color: var(--contrast-2);
    color: white;
    
    font-weight: 700;
    font-size: 2.5rem;
    font-family: inherit;        /* Match body font */
    font-weight: 400;
}

/* Responsive: 2 columns at tablet, 1 column at mobile */
@media (max-width: 1024px) {
    .gbp-roadmap {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        row-gap: 3rem;           /* More vertical room between rows for badges */
    }
}

@media (max-width: 600px) {
    .gbp-roadmap {
        grid-template-columns: 1fr;
        row-gap: 3.5rem;
    }
}

/* =============================================================
   Team Grid — GBP Accordion styled as a CSS grid layout
   ============================================================= */

.gbp-team-grid.gb-accordion {
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    gap: 215px;
    align-items: start;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 600px) {
    .gbp-team-grid.gb-accordion {
        grid-template-columns: 1fr;
    }
}

/* Reset GBP default item styling — cards have no visible boundary */
.gbp-team-grid .gb-accordion__item {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

/* The toggle (clickable card area) */
.gbp-team-grid .gb-accordion__toggle {
    cursor: pointer;
}

.gbp-team-grid .gb-accordion__toggle:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.gbp-team-grid .gb-accordion__toggle:focus:not(:focus-visible) {
    outline: none;
}

/* Photo (class is on the <img> directly) */
.gbp-team-card__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 16px;
    background-color: var(--gbp-card-placeholder, #d8d9ec);
    margin-bottom: 1rem;
}

/* Name */
.gbp-team-card__name {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Position / credentials */
.gbp-team-card__title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.4;
}

/* Read More / Read Less toggle text */
.gbp-team-card__toggle-more,
.gbp-team-card__toggle-less {
    display: inline-block;
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Default state: show "Read More", hide "Read Less" */
.gbp-team-card__toggle-less {
    display: none;
}

/* When the toggle is expanded, swap labels.
   The selector targets the toggle's open state. GBP exposes this 
   via aria-expanded on the clickable element. */
.gbp-team-grid .gb-accordion__toggle[aria-expanded="true"] .gbp-team-card__toggle-more {
    display: none;
}

.gbp-team-grid .gb-accordion__toggle[aria-expanded="true"] .gbp-team-card__toggle-less {
    display: inline-block;
}

/* Hide default toggle icon if you kept the block. 
   If you deleted the block, this rule is harmless no-op. */
.gbp-team-grid .gb-accordion__toggle-icon {
    display: none;
}

/* Content (bio) area */
.gbp-team-grid .gb-accordion__content {
    padding-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.gbp-team-grid .gb-accordion__content p:first-child {
    margin-top: 0;
}

.gbp-team-grid .gb-accordion__content p:last-child {
    margin-bottom: 0;
}

/* =============================================================
   .gbp-partner-grid — Partner organization card grid
   ============================================================= */

.gbp-partner-grid {
    --gbp-partner-gap: 1rem;
    
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;  /* bottom margin separates groups */
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gbp-partner-gap);
}

@media (max-width: 900px) {
    .gbp-partner-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .gbp-partner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 380px) {
    .gbp-partner-grid {
        grid-template-columns: 1fr;
    }
}

.gbp-partner-group__heading {
    /* Small, slightly muted heading style above each group */
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--contrast);
}

/* =============================================================
   .gbp-partner-card — Individual partner card
   ============================================================= */

.gbp-partner-card {
    /* Reset li styles */
    margin: 0;
    padding: 0;
}

.gbp-partner-card__link {
    /* The entire card is the click target */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    /* Subtle hover/focus feedback */
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gbp-partner-card__link:hover {
    transform: translateY(-2px);
}

.gbp-partner-card__link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

.gbp-partner-card__link:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .gbp-partner-card__link {
        transition: none;
    }
    .gbp-partner-card__link:hover {
        transform: none;
    }
}

/* -------------------------------------------------------------
   Logo area — white background with the decorative arc
   ------------------------------------------------------------- */

.gbp-partner-card__logo {
    position: relative;
    aspect-ratio: 3 / 2;
    background-color: white;
    background-image: url('/wp-content/uploads/2026/05/logo-borders.svg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 103% 103%;  /* fills container exactly */
    border-bottom: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.gbp-partner-card__logo img {
    max-width: 70%;     /* was 100% — shrinks the logo's footprint */
    max-height: 70%;    /* was 100% — same, for taller logos */
    width: auto;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 1;

    /* Visually re-balance against the arc in the upper-right corner.
       Percentages on translate() are relative to the element's own
       rendered size, so this offset stays proportional at any viewport
       width — the logo won't drift as the card resizes. */
    transform: translate(-8%, 8%);
}

/* -------------------------------------------------------------
   Name strip — dark navy footer with the organization name
   ------------------------------------------------------------- */

.gbp-partner-card__name {
    background: var(--gbp-partner-name-bg, var(--global-color-8));
    color: white;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    /* Make the strip fill the remaining vertical space if cards 
       are forced to equal heights by the grid */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================
   .gbp-disclosure — Accordion styled as horizontal-rule list
   ============================================================= */

.gbp-disclosure {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* -------------------------------------------------------------
   Item — full-width horizontal divider above each
   ------------------------------------------------------------- */

.gbp-disclosure .gb-accordion__item {
    background: transparent;
    border: none;
    border-top: 1px solid var(--gbp-divider-color, #b5b5c4);
    margin: 0;
    padding: 0;
}

.gbp-disclosure .gb-accordion__item:last-child {
    border-bottom: 1px solid var(--gbp-divider-color, #b5b5c4);
}

/* -------------------------------------------------------------
   Toggle (clickable header row)
   
   Title is left-aligned with 245px left padding. Icon is 
   absolutely positioned 245px from the right edge. Dividers on 
   the .gb-accordion__item above extend full width regardless 
   of the toggle's indent.
   ------------------------------------------------------------- */

.gbp-disclosure .gb-accordion__toggle {
    background: transparent;
    border: none;

    position: relative;
    padding: 1.5rem 245px;          /* 245px on left for title; 245px on right reserves space for icon */

    font-weight: 700;
    font-size: 1.125rem;
    color: var(--gbp-heading-color, currentColor);
    text-align: left;

    cursor: pointer;
}

.gbp-disclosure .gb-accordion__toggle:hover {
    opacity: 0.85;
}

.gbp-disclosure .gb-accordion__toggle:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: -3px;
}

.gbp-disclosure .gb-accordion__toggle:focus:not(:focus-visible) {
    outline: none;
}

/* -------------------------------------------------------------
   Toggle icon — GBP's SVG already has a circle baked in, so we 
   only position it. No border/border-radius styling needed.
   ------------------------------------------------------------- */

.gbp-disclosure .gb-accordion__toggle-icon {
    position: absolute;
    right: 245px;
    top: 50%;
    transform: translateY(-50%);

    line-height: 0;                  /* prevents extra inline space around the SVG */
    color: var(--gbp-heading-color, currentColor);
}

/* -------------------------------------------------------------
   Revealed content
   
   No vertical padding on the content wrapper — when GBP collapses 
   the panel via max-height/overflow, padding-top/bottom contribute 
   to the box's height and create visible space below the toggle in 
   the closed state. Instead, put vertical spacing on the children's 
   margins, which collapse cleanly when the parent is height-zero.
   ------------------------------------------------------------- */

.gbp-disclosure .gb-accordion__content {
    padding-left: 245px;
    padding-right: 245px;
    /* No vertical padding here — children's margins handle it */

    font-size: 0.95rem;
    line-height: 1.6;
}

/* Optional: comfortable reading line length for prose */
.gbp-disclosure .gb-accordion__content > * {
    max-width: 65ch;
}

/* Vertical spacing handled by first/last child margins */
.gbp-disclosure .gb-accordion__content > :first-child {
    margin-top: 1rem;
}

.gbp-disclosure .gb-accordion__content > :last-child {
    margin-bottom: 2rem;
}

/* -------------------------------------------------------------
   Responsive overrides
   ------------------------------------------------------------- */

/* At 1300px and below — halve the indent */
@media (max-width: 1300px) {
    .gbp-disclosure .gb-accordion__toggle {
        padding-left: 122.5px;
        padding-right: 122.5px;
    }
    .gbp-disclosure .gb-accordion__toggle-icon {
        right: 122.5px;
    }
    .gbp-disclosure .gb-accordion__content {
        padding-left: 122.5px;
        padding-right: 122.5px;
    }
}

/* At 1024px and below — drop the indent entirely; section padding 
   provides the outer breathing room. Toggle keeps a small right 
   padding to reserve space for the icon so the title text doesn't 
   collide with it on longer titles. */
@media (max-width: 1024px) {
    .gbp-disclosure .gb-accordion__toggle {
        padding-left: 0;
        padding-right: 4rem;
    }
    .gbp-disclosure .gb-accordion__toggle-icon {
        right: 0;
    }
    .gbp-disclosure .gb-accordion__content {
        padding-left: 0;
        padding-right: 0;
    }
}

/* minor layout tweaks */
.gb-accordion__toggle h3 {
    margin-bottom: 0;
}
.gb-accordion__toggle .gb-accordion__toggle-icon svg {
    width: 3em;
    height: 3em;
}
span.gb-accordion__toggle-icon-open {
    color: var(--accent);
}
span.gb-accordion__toggle-icon-close {
    color: var(--global-color-10);
}

/* page title formatting - all caps for parent pages */
.page-id-417 h1.gb-headline, .page-id-419 h1.gb-headline, .page-id-421 h1.gb-headline, .page-id-423 h1.gb-headline {
    text-transform: uppercase;
}
/* page title background color changes for Services section */
.page-id-419 .title-hero.gbp-section, .page-id-588 .title-hero.gbp-section {
	background-color: var(--accent);
}
/* page title background color changes for Partners section */
.page-id-421 .title-hero.gbp-section, .page-id-590 .title-hero.gbp-section {
	background-color: var(--global-color-8);
}
/* page title background colour change for Contact page */
.page-id-423 .title-hero.gbp-section {
	background-color: var(--global-color-8);
}
/* Fixing News layout issues */
.blog.one-container .site-content {
	padding: 0;
}
.blog .grid-container {
	max-width: 100%;
}
.blog h2 {
    line-height: .9;
    margin-bottom: .5rem;
}
.blog h2 a:link, .blog h2 a:visited {
    text-decoration: none;
    color: var(--contrast-2);
    font-size: 26px;
    font-weight: 600;
}
.blog h2 a:hover, .blog h2 a:active {
    text-decoration: underline;
    color: var(--accent);
}
.gbp-section.news-archive-section {
    padding-top: 1rem;
    padding-bottom: 2rem;
}
/**
 * Match GeneratePress's default archive pagination to the style
 * used by the search results template's GenerateBlocks pagination.
 *
 * GP renders pagination as:
 *   <nav class="paging-navigation">
 *     <div class="nav-links">
 *       <a class="prev page-numbers" href="…">← Previous</a>
 *       <a class="page-numbers" href="…">1</a>
 *       <span class="page-numbers current">2</span>
 *       <a class="page-numbers" href="…">3</a>
 *       <span class="page-numbers dots">…</span>
 *       <a class="next page-numbers" href="…">Next →</a>
 *     </div>
 *   </nav>
 *
 * All clickable elements share the .page-numbers class, with
 * extra modifiers .prev / .next / .current / .dots on specific ones.
 */

/* Outer wrapper — matches gb-query-loop-pagination margin */
.paging-navigation {
    margin-top: 20px;
}

/* Inner flex row — replicates the search template's flex layout */
.paging-navigation .nav-links {
    align-items: center;
    column-gap: 10px;
    display: flex;
    flex-wrap: wrap;      /* allow wrapping on small screens */
    justify-content: center;
    row-gap: 10px;
}

/*
 * Every pagination "chip" — applies to:
 *  - prev/next link buttons (.page-numbers.prev / .next)
 *  - numbered page links (.page-numbers)
 *  - current page indicator (.page-numbers.current)
 *  - ellipsis (.page-numbers.dots)
 *
 * Padding, border, and colors mirror the GenerateBlocks button styles
 * defined inline on the search template's pagination links.
 */
.paging-navigation .page-numbers {
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #000000;
    color: #000000;
    display: inline-flex;
    font-size: 14px;
    justify-content: center;
    line-height: 1;
    padding: 1rem;
    text-decoration: none;

    /* Smooth hover transition — not in the original but improves UX */
    transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Hover & keyboard focus states.
 *
 * The original search pagination has no defined hover state, so this is
 * a small improvement for accessibility — visitors and keyboard users
 * get clear feedback on what they're about to click.
 *
 * :focus-visible only shows focus rings for keyboard navigation,
 * not for mouse clicks, which is the modern best practice.
 */
.paging-navigation a.page-numbers:is(:hover, :focus-visible) {
    background-color: #000000;
    color: #ffffff;
    outline: none;
}

/* Add an explicit focus outline for accessibility (WCAG 2.4.7) */
.paging-navigation a.page-numbers:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

/*
 * Current page indicator — no border, matches the search template.
 * Visitors see which page they're on without an action affordance.
 */
.paging-navigation .page-numbers.current {
    border-width: 0;
    /*
     * Optional: make it stand out more than just "no border."
     * Color-only differentiation fails WCAG color contrast rules
     * for some users, so add a weight or background change too.
     */
    font-weight: 600;
}

/* Ellipsis — no border, no interactivity */
.paging-navigation .page-numbers.dots {
    border-width: 0;
}
.blog .nav-links {
    margin-bottom: 2rem;
}
/**
 * Relevanssi search term highlighting.
 *
 * Styles the <mark> tags that Relevanssi wraps around matched search
 * terms in results. Combines a light yellow background with bold text
 * so highlights are obvious to sighted users, while the bold weight
 * provides a non-colour cue for users who can't perceive the
 * background colour (WCAG 1.4.1 — don't rely on colour alone).
 */
mark {
    background-color: #fff3b0; /* Light yellow */
    color: #1a1a1a;            /* Dark text for strong contrast on yellow */
    font-weight: 700;          /* Bold — the non-colour highlight cue */
    padding: 0 2px;
    border-radius: 2px;
}

/* Remove the default browser mark styling we're overriding, just in case */
mark {
    text-decoration: none;
}