/*!
Theme Name: CESP
Theme URI: https://cesp.rutgers.edu/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: Custom WordPress theme for the Rutgers Center for Effective School Practices, Graduate School of Education.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cesp
Tags: custom-logo, custom-menu, featured-images, full-site-editing, gutenberg, accessibility-ready
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
    - Normalize
    - Box sizing
# CESP Design Tokens
# Base
    - Typography
    - Elements
    - Links
    - Forms
# Layout
    - Container
    - Site Structure
# Components
    - Header / Navigation
    - Hero Section
    - Intro Block + Icon Row
    - Projects Section
    - News Section
    - Informed Services Cards
    - Footer
    - Buttons
    - Cards
    - Page Banner
    - Person Banner
    - Project Banner
    - People Card Grid
    - EIR Resource Library + Filters
    - Search Page
    - Single News Page
    - File Download Cards
    - Pricing Table
    - Misc Utilities
# Gutenberg Block Overrides
# WordPress Core
    - Posts and Pages
    - Comments
    - Widgets
    - Media / Captions / Galleries
# Plugins
    - Jetpack infinite scroll
# Accessibility
# Alignments
# Text Utilities
# Responsive
    - Tablet  (max-width: 1100px)
    - Mobile  (max-width: 900px)
    - Mobile  (max-width: 768px)
    - Small   (max-width: 640px)
    - XSmall  (max-width: 540px)
    - XSmall  (max-width: 480px)
    - Reduced motion
--------------------------------------------------------------*/


/* ============================================================
   GENERIC — Normalize
   ============================================================ */

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

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

body { margin: 0; }
main { display: block; }

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

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

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

a { background-color: transparent; }

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

b, strong { font-weight: bolder; }

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

small { font-size: 80%; }

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

img { border-style: none; }

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

button, input { overflow: visible; }
button, select { text-transform: none; }

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

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

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

fieldset { padding: 0.35em 0.75em 0.625em; }

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

progress { vertical-align: baseline; }
textarea { overflow: auto; }

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

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

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

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

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

details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }


/* ============================================================
   CESP DESIGN TOKENS
   ============================================================ */

:root {
    /* Brand */
    --cesp-red:            #CC0033;
    --cesp-red-dark:       #9b0026;
    --cesp-footer-bg:      #6b0000;
    --cesp-footer-dark:    #3d0000;

    /* Neutrals */
    --cesp-white:          #ffffff;
    --cesp-off-white:      #f7f7f7;
    --cesp-light-bg:       #f2f2f2;
    --cesp-border:         #e0e0e0;
    --cesp-text:           #333333;
    --cesp-text-light:     #666666;
    --cesp-text-muted:     #888888;
    --cesp-dark:           #1a1a1a;

    /* Typography */
    --cesp-font:           'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cesp-font-heading:   'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --cesp-section-pad:    80px;
    --cesp-section-pad-sm: 48px;

    /* Layout */
    --cesp-max-width:      1200px;
    --cesp-nav-height:     70px;

    /* Shadows */
    --cesp-shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
    --cesp-shadow-md:      0 4px 16px rgba(0,0,0,0.12);
    --cesp-shadow-lg:      0 8px 32px rgba(0,0,0,0.16);

    /* Misc */
    --cesp-transition:     all 0.25s ease;
    --cesp-radius-sm:      4px;
    --cesp-radius:         8px;
    --cesp-radius-lg:      12px;
}


/* ============================================================
   BASE — Typography
   ============================================================ */

body,
button,
input,
select,
optgroup,
textarea {
    color: var(--cesp-text);
    font-family: var(--cesp-font);
    font-size: 1rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cesp-font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--cesp-dark);
    margin-top: 0;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p { margin-top: 0; margin-bottom: 1.25em; }

dfn, cite, em, i { font-style: italic; }

blockquote {
    margin: 0 1.5em;
    border-left: 4px solid var(--cesp-red);
    padding-left: 1.25em;
    color: var(--cesp-text-light);
    font-style: italic;
}

address { margin: 0 0 1.5em; font-style: normal; }

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
    border-radius: var(--cesp-radius-sm);
}

code, kbd, tt, var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 0.9em;
    background: var(--cesp-light-bg);
    padding: 2px 6px;
    border-radius: 3px;
}

abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
mark, ins { background: #fff9c0; text-decoration: none; }
big { font-size: 125%; }


/* ============================================================
   BASE — Elements
   ============================================================ */

body { background: var(--cesp-white); }

hr {
    background-color: var(--cesp-border);
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
}

ul, ol { margin: 0 0 1.5em 2em; padding: 0; }
ul { list-style: disc; }
ol { list-style: decimal; }
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; }

dt { font-weight: 700; }
dd { margin: 0 1.5em 1.5em; }

embed, iframe, object { max-width: 100%; }

img { height: auto; max-width: 100%; display: block; }
figure { margin: 1em 0; }

table { margin: 0 0 1.5em; width: 100%; border-collapse: collapse; }
th, td { padding: 10px 14px; border: 1px solid var(--cesp-border); text-align: left; }
th { background: var(--cesp-light-bg); font-weight: 700; }


/* ============================================================
   BASE — Links
   ============================================================ */

a {
    color: var(--cesp-red);
    text-decoration: none;
    transition: var(--cesp-transition);
}

a:hover,
a:active {
    color: var(--cesp-red-dark);
    text-decoration: underline;
}


/* ============================================================
   BASE — Forms
   ============================================================ */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 2px solid var(--cesp-red);
    border-radius: var(--cesp-radius-sm);
    background: var(--cesp-red);
    color: var(--cesp-white);
    font-family: var(--cesp-font);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.65em 1.4em;
    cursor: pointer;
    transition: var(--cesp-transition);
    letter-spacing: 0.02em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    background: var(--cesp-red-dark);
    border-color: var(--cesp-red-dark);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    color: var(--cesp-text);
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    padding: 10px 14px;
    width: 100%;
    font-family: var(--cesp-font);
    font-size: 1rem;
    transition: border-color 0.2s ease;
    background: var(--cesp-white);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
    color: var(--cesp-text);
    border-color: var(--cesp-red);
    outline: none;
    box-shadow: 0 0 0 3px rgba(204,0,51,0.12);
}

textarea { width: 100%; resize: vertical; min-height: 130px; }

label { display: block; font-weight: 600; margin-bottom: 5px; color: var(--cesp-text); }


/* ============================================================
   LAYOUT — Container
   ============================================================ */

.container,
.cesp-container {
    max-width: var(--cesp-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.container-narrow {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}


/* ============================================================
   LAYOUT — Site Structure
   ============================================================ */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
   overflow-x: clip;
}

.site-content { flex: 1 0 auto; }
#primary { width: 100%; }

.cesp-section { padding: var(--cesp-section-pad) 0; }
.cesp-section--gray { background: var(--cesp-off-white); }
.cesp-section--dark { background: var(--cesp-dark); color: var(--cesp-white); }
.cesp-section--red  { background: var(--cesp-red); color: var(--cesp-white); }

.cesp-section-title { text-align: center; margin-bottom: 48px; }
.cesp-section-title h2 { font-size: 2rem; margin-bottom: 12px; color: var(--cesp-dark); }
.cesp-section-title p { color: var(--cesp-text-light); max-width: 700px; margin: 0 auto; font-size: 1.05rem; }


/* ============================================================
   COMPONENT — Header / Navigation
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cesp-white);
    border-bottom: 1px solid #e8e8e8;
    transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}

.site-header__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 100px;
    min-height: 80px;
}

/* Logo */
.site-branding { display: flex; align-items: center; flex-shrink: 0; padding: 10px 0; }
.site-branding__link { display: block; line-height: 0; text-decoration: none; }
.site-branding .custom-logo,
.site-logo-fallback { max-height: 62px; width: auto; display: block; margin: 0; }

/* Right two-row block */
.site-header__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex: 1;
    padding: 8px 0 0;
}

/* Utility bar */
.site-header__utility { display: flex; justify-content: flex-end; align-items: center; }

.utility-nav { display: flex; list-style: none; margin: 0; padding: 0; }
.utility-nav li { margin: 0; }
.utility-nav li a {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 12px;
    line-height: 1;
    text-decoration: none;
    border-right: 1px solid #d8d8d8;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.utility-nav li:last-child a { border-right: none; padding-right: 0; }
.utility-nav li a:hover { color: var(--cesp-red); text-decoration: none; }

/* Nav row */
.site-header__nav-row { display: flex; align-items: center; }

/* Primary nav */
.main-navigation { display: flex; align-items: center; }
.main-navigation .primary-nav { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; }
.main-navigation .primary-nav > li > a {
    display: block;
    padding: 10px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #222222;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.main-navigation .primary-nav > li:first-child > a,
.main-navigation .primary-nav > li.current-menu-item > a,
.main-navigation .primary-nav > li.current-menu-ancestor > a { color: var(--cesp-red); }
.main-navigation .primary-nav > li > a:hover { color: var(--cesp-red); text-decoration: none; }
.main-navigation .primary-nav > li.menu-item-has-children > a::after { content: ' ›'; font-size: 0.8em; font-weight: 400; opacity: 0.6; }

/* Dropdown */
.main-navigation .primary-nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--cesp-white);
    border-top: 3px solid var(--cesp-red);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    border-radius: 0 0 4px 4px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 9999;
    display: none;
}
.main-navigation .primary-nav li { position: relative; }
.main-navigation .primary-nav li:hover > ul,
.main-navigation .primary-nav li.focus > ul { display: block; }
.main-navigation .primary-nav ul li a {
    display: block;
    padding: 9px 20px;
    font-size: 0.88rem;
    font-weight: 400;
    color: #333333;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.main-navigation .primary-nav ul li a:hover { background: #f5f5f5; color: var(--cesp-red); }

/* Third level dropdown — sub-sub menu */
.primary-nav .sub-menu .sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    background: var(--cesp-white);
    border-top: 3px solid var(--cesp-red);
    border: 1px solid var(--cesp-border);
    border-top: 3px solid var(--cesp-red);
    min-width: 180px;
    padding: 8px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
}

.primary-nav .sub-menu li:hover > .sub-menu {
    display: block;
}

/* Search button */
.header-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--cesp-red);
    border-radius: 50%;
    color: var(--cesp-white);
    text-decoration: none;
    margin-left: 14px;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.header-search-btn:hover { background: var(--cesp-red-dark); color: var(--cesp-white); text-decoration: none; transform: scale(1.08); }
.header-search-btn svg { display: block; flex-shrink: 0; color: #fff; }

/* Hamburger toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 2px solid var(--cesp-red);
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-left: 12px;
}
.menu-toggle:hover { background: var(--cesp-red); }
.menu-toggle:hover .menu-toggle__bar { background: var(--cesp-white); }

.menu-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--cesp-red);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-toggle.toggled .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.toggled .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.toggled .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav panel */
.mobile-nav-panel {
    display: none;
    background: var(--cesp-white);
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.mobile-nav-panel.is-open { display: block; }
.mobile-nav-panel__inner { max-width: var(--cesp-max-width); margin: 0 auto; padding: 16px 24px 24px; }

.mobile-nav { list-style: none; margin: 0 0 20px; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid #f0f0f0; }
.mobile-nav li a { display: block; padding: 12px 4px; font-size: 1rem; font-weight: 600; color: #222; text-decoration: none; transition: color 0.2s ease; }
.mobile-nav li:first-child a,
.mobile-nav li.current-menu-item > a { color: var(--cesp-red); }
.mobile-nav li a:hover { color: var(--cesp-red); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.mobile-nav ul li a { font-size: 0.9rem; font-weight: 400; padding: 9px 4px; color: #555; }

.mobile-utility-links { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.mobile-utility-links a { font-size: 0.78rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; transition: color 0.2s ease; }
.mobile-utility-links a:hover { color: var(--cesp-red); }


/* ============================================================
   COMPONENT — Hero Section
   ============================================================ */

.cesp-hero * { box-sizing: border-box; margin: 0; padding: 0; }
.cesp-hero {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    font-family: var(--cesp-font);
}
.cesp-hero__slides { position: relative; width: 100%; height: 100%; }
.cesp-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.cesp-hero__slide--active { opacity: 1; }

.cesp-hero__content-box {
    position: absolute;
    left: 24%;
    bottom: 60px;
    width: 46%;
    background: rgba(255,255,255,0.88);
    padding: 28px 32px;
    z-index: 99;
}
.cesp-hero__content-box--centered { left: 50%; transform: translateX(-50%); width: 52%; text-align: center; }

.cesp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #c41230;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: 6px 20px;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    position: absolute;
    top: -37px;
    left: 0;
    width: 32%;
}
.cesp-hero__badge svg { width: 13px; height: 13px; flex-shrink: 0; }

.cesp-hero__title { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1.3; margin-bottom: 6px; }
.cesp-hero__subtitle { font-size: 15px; font-weight: 400; color: #2a2a2a; line-height: 1.4; margin-bottom: 8px; }
.cesp-hero__desc { font-size: 16px; color: #333; line-height: 1.6; margin-bottom: 18px; }

.cesp-hero__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.cesp-hero__content-box--centered .cesp-hero__buttons { justify-content: center; }

.cesp-btn--dark {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #1a1a1a;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.2px;
    text-decoration: none;
    display: inline-block;
}
.cesp-btn--dark:hover { border: 1px solid var(--cesp-red); background: none; color: var(--cesp-red); text-decoration: none; }

.cesp-btn--outline {
    background: transparent;
    color: #333;
    border: 1.5px solid #555;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.cesp-btn--outline:hover { background: rgba(0,0,0,0.06); }

.cesp-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    padding: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.3s ease;
}
.cesp-hero__arrow:hover { color: #fff; transform: translateY(-50%) scale(1.2); }
.cesp-hero__arrow--prev { left: 16px; }
.cesp-hero__arrow--next { right: 16px; }

.cesp-hero__dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
}
.cesp-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; }
.cesp-hero__dot--active { background: #fff; }


/* ============================================================
   COMPONENT — Intro Block + 4-Icon Row
   ============================================================ */

.cesp-intro {
    padding: var(--cesp-section-pad) 0;
    background: var(--cesp-white);
}

.cesp-intro .cesp-container { max-width: 980px; }

.cesp-intro__text { margin-bottom: 44px; }
.cesp-intro__text h2 { font-size: 1.8rem; font-weight: 700; color: var(--cesp-dark); margin-bottom: 14px; text-align: left; }
.cesp-intro__text p { font-size: 0.90rem; color: var(--cesp-text-light); line-height: 1.75; margin: 0; text-align: left; }

.cesp-intro h2 { font-size: 1.9rem; color: var(--cesp-dark); margin-bottom: 18px; }
.cesp-intro p { font-size: 0.80rem; color: var(--cesp-text-light); line-height: 1.8; margin: 0; }

.cesp-services-icons__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.cesp-service-icon-card {
    text-align: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    transition: none;
}
.cesp-service-icon-card:hover { transform: none; box-shadow: none; }

.cesp-service-icon-card__icon { width: 60px; height: 60px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.cesp-service-icon-card__icon img { width: 60px; height: 60px; object-fit: contain; margin: 0 auto; }
.cesp-service-icon-card__title { font-size: 1rem; font-weight: 700; color: var(--cesp-red); margin: 0 0 10px; }
.cesp-service-icon-card__desc { font-size: 0.85rem; color: var(--cesp-text-light); line-height: 1.65; margin: 0; }


/* ============================================================
   COMPONENT — Projects Section
   ============================================================ */

.cesp-projects {
    background: #007fac;
    padding: 0;
}

.cesp-projects__inner {
    display: grid;
    grid-template-columns: 400px 1fr;
    min-height: 480px;
}

.cesp-projects__left {
    color: var(--cesp-white);
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.cesp-projects__left h2 { font-size: 1.5rem; font-weight: 700; color: var(--cesp-white); margin-bottom: 18px; }
.cesp-projects__left p { font-size: 0.88rem; color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 14px; }

.cesp-btn--projects-outline {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 22px;
    background: transparent;
    border: 2px solid var(--cesp-white);
    color: var(--cesp-white);
    border-radius: var(--cesp-radius-sm);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--cesp-transition);
    align-self: flex-start;
}
.cesp-btn--projects-outline:hover { background: var(--cesp-white); color: #3a7fc1; text-decoration: none; }

.cesp-projects__right { padding: 32px; }

.cesp-projects__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    height: 100%;
}

.cesp-project-card {
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    overflow: hidden;
    background: var(--cesp-white);
    display: flex;
    flex-direction: column;
    transition: var(--cesp-transition);
    box-shadow: none;
}
.cesp-project-card:hover { box-shadow: var(--cesp-shadow-sm); }

.cesp-project-card__logo { padding: 16px 20px 0; height: 70px; display: flex; align-items: center; }
.cesp-project-card__logo img { max-height: 50px; max-width: 140px; width: auto; object-fit: contain; margin: 0; }

.cesp-project-card__body { padding: 12px 20px 20px; flex: 1; }
.cesp-project-card__funder { font-size: 0.75rem; font-weight: 700; color: var(--cesp-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.cesp-project-card__title { font-size: 0.95rem; font-weight: 700; color: var(--cesp-dark); margin: 0 0 8px; line-height: 1.35; }
.cesp-project-card__title a { color: inherit; text-decoration: none; }
.cesp-project-card__title a:hover { color: var(--cesp-red); }
.cesp-project-card__desc { font-size: 0.82rem; color: var(--cesp-text-light); line-height: 1.6; margin: 0; }

.cesp-projects__cta { text-align: center; }


/* ============================================================
   COMPONENT — News Section
   ============================================================ */

.cesp-news {
    padding: 56px 0;
    background: var(--cesp-white);
}

.cesp-news__header { text-align: center; margin-bottom: 36px; }
.cesp-news__header h2 { font-size: 1.8rem; font-weight: 700; color: var(--cesp-dark); margin: 0; }

.cesp-news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 36px;
}

.cesp-news-card {
    background: var(--cesp-white);
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--cesp-transition);
}
.cesp-news-card:hover { box-shadow: var(--cesp-shadow-md); transform: translateY(-2px); }

.cesp-news-card__thumbnail { width: 100%; height: 160px; overflow: hidden; }
.cesp-news-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform 0.35s ease; }
.cesp-news-card:hover .cesp-news-card__thumbnail img { transform: scale(1.04); }

.cesp-news-card__body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }

.cesp-news-card__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cesp-white);
    background: var(--cesp-red);
    border-radius: 3px;
    padding: 3px 8px;
    margin-bottom: 10px;
}

.cesp-news-card__title { font-size: 0.95rem; font-weight: 700; color: var(--cesp-dark); margin: 0 0 10px; line-height: 1.4; }
.cesp-news-card__title a { color: inherit; text-decoration: none; }
.cesp-news-card__title a:hover { color: var(--cesp-red); }

.cesp-news-card__excerpt { font-size: 0.85rem; color: var(--cesp-text-light); line-height: 1.65; margin: 0 0 14px; flex: 1; }

.cesp-news-card__link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cesp-red);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    transition: var(--cesp-transition);
}
.cesp-news-card__link:hover { color: var(--cesp-red-dark); text-decoration: none; gap: 7px; }
.cesp-news-card__link::after { content: '›'; font-size: 1.1em; }

.cesp-news__cta { text-align: center; }


/* ============================================================
   COMPONENT — Informed Services Cards (hover slide-up)
   ============================================================ */

.cesp-services-grid {
    padding: var(--cesp-section-pad) 0;
    background: #007fac;
}

.cesp-services-grid__header { text-align: center; margin-bottom: 48px; }
.cesp-services-grid__header h2 { font-size: 1.9rem; margin-bottom: 16px; }
.cesp-services-grid__header p { margin: 0 auto; color: var(--cesp-white); line-height: 1.75; }

.cesp-services-grid__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cesp-service-card {
    position: relative;
    border: 3px solid #2a7ab5;
    border-radius: var(--cesp-radius-sm);
    overflow: hidden;
    background: var(--cesp-white);
    cursor: pointer;
    height: 420px;
}

.cesp-service-card__image {
    position: absolute;
    inset: 0;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.cesp-service-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }

.cesp-service-card__image-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    background: var(--cesp-white);
    border-top: 3px solid #2a7ab5;
    padding: 18px 20px;
    text-align: center;
}
.cesp-service-card__image-label h3 { font-size: 1.05rem; font-weight: 700; color: var(--cesp-dark); margin: 0; line-height: 1.3; }

.cesp-service-card__body {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 24px 22px 28px;
    display: flex;
    flex-direction: column;
    background: var(--cesp-white);
    overflow: hidden;
}

.cesp-service-card__body-title {
    background: var(--cesp-white);
    border: 2px solid #2a7ab5;
    padding: 14px 18px;
    text-align: center;
    margin-bottom: 18px;
    border-radius: 2px;
}
.cesp-service-card__body-title h3 { font-size: 1.05rem; font-weight: 700; color: var(--cesp-dark); margin: 0; }

.cesp-service-card__desc { font-size: 0.88rem; color: var(--cesp-text); line-height: 1.75; margin: 0 0 14px; text-align: center; }

.cesp-service-card__list {
    list-style: disc;
    margin: 0 0 20px 20px;
    padding: 0;
    font-size: 0.88rem;
    color: var(--cesp-text);
    line-height: 1.75;
    text-align: left;
    flex: 1;
}
.cesp-service-card__list li { margin: 0 0 4px; padding: 0; }
.cesp-service-card__list li::before { display: none; }

.cesp-service-card__link {
    display: block;
    background: #2b2b2b;
    color: var(--cesp-white);
    text-align: center;
    padding: 14px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s ease;
    margin-top: auto;
}
.cesp-service-card__link::after { display: none; }
.cesp-service-card__link:hover { background: var(--cesp-red); color: var(--cesp-white); text-decoration: none; }

/* Slide up on hover */
.cesp-service-card:hover .cesp-service-card__image,
.cesp-service-card:focus-within .cesp-service-card__image { transform: translateY(-100%); }


/* ============================================================
   COMPONENT — Footer
   ============================================================ */

.site-footer { background: #1a1a1a; color: var(--cesp-white); }

.footer-main { padding: 52px 0 44px; }

.footer-col--brand { display: flex; flex-direction: column; gap: 16px; }

.footer-col__logo img,
.footer-col__logo .custom-logo { max-width: 180px; height: auto; filter: brightness(0) invert(1); margin: 0; }

.footer-col__org { font-size: 0.8rem; line-height: 1.65; color: rgba(255,255,255,0.7); }
.footer-org__name { font-weight: 700; color: var(--cesp-white); margin: 0 0 2px; font-size: 0.82rem; }
.footer-org__school,
.footer-org__university { margin: 0 0 2px; font-size: 0.8rem; }
.footer-org__address { font-style: normal; margin: 6px 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.65); }

.footer-col__social { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.footer-social__link {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.1); color: var(--cesp-white);
    transition: var(--cesp-transition); text-decoration: none;
}
.footer-social__link:hover { background: var(--cesp-red); color: var(--cesp-white); text-decoration: none; }
.footer-social__link svg { display: block; flex-shrink: 0; }

.footer-col--nav h4,
.footer-col__heading {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.45); margin: 0 0 14px;
}
.footer-col--nav ul { list-style: none; margin: 0; padding: 0; }
.footer-col--nav ul li { margin: 0 0 9px; }
.footer-col--nav ul li a { font-size: 0.85rem; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s ease; }
.footer-col--nav ul li a:hover { color: var(--cesp-white); text-decoration: none; }

.footer-col--newsletter .footer-col__heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); margin: 0 0 14px; }

.footer-newsletter__row { display: flex; flex-direction: column; gap: 8px; }
.footer-newsletter__form input[type="email"] {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: var(--cesp-white); padding: 9px 12px; border-radius: var(--cesp-radius-sm);
    font-size: 0.85rem; font-family: var(--cesp-font); width: 100%;
}
.footer-newsletter__form input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }
.footer-newsletter__form input[type="email"]:focus { border-color: rgba(255,255,255,0.5); outline: none; background: rgba(255,255,255,0.15); box-shadow: none; }
.footer-newsletter__form button {
    background: var(--cesp-red); border: none; color: var(--cesp-white);
    padding: 9px 18px; font-size: 0.85rem; font-weight: 700;
    font-family: var(--cesp-font); border-radius: var(--cesp-radius-sm);
    cursor: pointer; transition: var(--cesp-transition); width: 100%;
}
.footer-newsletter__form button:hover { background: var(--cesp-red-dark); }

.footer-bottom { background: #111111; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-bottom__inner { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.footer-bottom__legal { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin: 0; line-height: 1.6; }
.footer-bottom__legal a { color: rgba(255,255,255,0.6); text-decoration: underline; }
.footer-bottom__legal a:hover { color: var(--cesp-white); }
.footer-bottom__copyright { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin: 0; }

/* legacy footer vars */
.footer-main { padding: 60px 0 40px; }
.footer-col__social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: var(--cesp-transition); }
.footer-col__social a:hover { background: var(--cesp-red); text-decoration: none; }
.footer-col__social img { width: 20px; height: 20px; object-fit: contain; margin: 0; }
.footer-nav h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin: 0 0 16px; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav ul li { margin: 0 0 8px; }
.footer-nav ul li a { font-size: 0.88rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: var(--cesp-transition); }
.footer-nav ul li a:hover { color: var(--cesp-white); text-decoration: underline; }
.footer-bottom .cesp-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: 0; }
.footer-bottom a { color: rgba(255,255,255,0.7); text-decoration: underline; }
.footer-bottom a:hover { color: var(--cesp-white); }
.footer-mailing h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin: 0 0 14px; }
.footer-mailing .footer-form { display: flex; gap: 8px; }
.footer-mailing input[type="email"] { flex: 1; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: var(--cesp-white); padding: 9px 14px; border-radius: var(--cesp-radius-sm); font-size: 0.9rem; width: auto; }
.footer-mailing input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.footer-mailing input[type="email"]:focus { border-color: var(--cesp-white); box-shadow: none; background: rgba(255,255,255,0.18); }
.footer-mailing button { background: var(--cesp-red); border: none; color: var(--cesp-white); padding: 9px 18px; font-size: 0.88rem; font-weight: 700; border-radius: var(--cesp-radius-sm); cursor: pointer; white-space: nowrap; transition: var(--cesp-transition); }
.footer-mailing button:hover { background: var(--cesp-red-dark); }


/* ============================================================
   COMPONENT — Buttons
   ============================================================ */

.cesp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    font-family: var(--cesp-font);
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: var(--cesp-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--cesp-transition);
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.cesp-btn--primary { background: var(--cesp-red); color: var(--cesp-white); border-color: var(--cesp-red); }
.cesp-btn--primary:hover { background: var(--cesp-red-dark); border-color: var(--cesp-red-dark); color: var(--cesp-white); text-decoration: none; }
.cesp-btn--outline-red { background: transparent; color: var(--cesp-red); border-color: var(--cesp-red); }
.cesp-btn--outline-red:hover { background: var(--cesp-red); color: var(--cesp-white); text-decoration: none; }
.cesp-btn--sm { padding: 9px 18px; font-size: 0.85rem; }


/* ============================================================
   COMPONENT — Generic Card
   ============================================================ */

.cesp-card { background: var(--cesp-white); border-radius: var(--cesp-radius); border: 1px solid var(--cesp-border); box-shadow: var(--cesp-shadow-sm); overflow: hidden; transition: var(--cesp-transition); }
.cesp-card:hover { box-shadow: var(--cesp-shadow-md); transform: translateY(-3px); }


/* ============================================================
   COMPONENT — Page Banner (inner pages)
   ============================================================ */

.cesp-page-banner {
    background-image: url('https://miletestsite.com/cesp/wp-content/uploads/2026/07/header-banner-new.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cesp-page-banner h1 {
    color: #ffffff;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    padding: 30px 20px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.cesp-page-main { padding: 50px 0 60px; }
.cesp-page-main .cesp-page-content { max-width: 860px; margin: 0 auto; }
.cesp-page-main.is-full-width { padding: 0; }
.cesp-page-main.is-full-width .cesp-container { max-width: 100%; padding: 0; }

.cesp-breadcrumbs { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-bottom: 10px; }
.cesp-breadcrumbs a { color: rgba(255,255,255,0.75); text-decoration: none; }
.cesp-breadcrumbs a:hover { color: var(--cesp-white); text-decoration: underline; }
.cesp-breadcrumbs span { margin: 0 6px; }


/* ============================================================
   COMPONENT — Person Banner + Layout
   ============================================================ */

.cesp-person-container { max-width: 980px; margin: 0 auto; }

.cesp-person-banner {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: url('https://miletestsite.com/cesp/wp-content/uploads/2026/06/person-single-background.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.cesp-person-banner__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.52); z-index: 1; }
.cesp-person-banner__content { position: relative; z-index: 2; padding-top: 28px; padding-bottom: 32px; width: 100%; }
.cesp-person-banner__back { display: inline-flex; align-items: center; gap: 5px; font-size: 1rem; font-weight: 500; color: rgba(255,255,255,1); text-decoration: none; margin-bottom: 14px; transition: color 0.2s ease; }
.cesp-person-banner__back:hover { color: var(--cesp-white); text-decoration: none; }
.cesp-person-banner__name { font-size: 2.4rem; font-weight: 700; color: var(--cesp-white); margin: 0 0 8px; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.cesp-person-banner__role { font-size: 1.6rem; font-weight: 400; color: rgba(255,255,255,0.88); margin: 0; }

/* Person card (archive grid) */
.cesp-person-card { position: relative; border: 3px solid #2a7ab5; border-radius: 4px; overflow: hidden; background: var(--cesp-white); display: flex; flex-direction: column; transition: var(--cesp-transition); text-decoration: none; }
.cesp-person-card:hover { box-shadow: 0 6px 24px rgba(42,122,181,0.2); transform: translateY(-3px); text-decoration: none; }
.cesp-person-card__photo { width: 100%; aspect-ratio: 3 / 3.2; overflow: hidden; background: #c8d8e8; flex-shrink: 0; }
.cesp-person-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; margin: 0; transition: transform 0.35s ease; }
.cesp-person-card:hover .cesp-person-card__photo img { transform: scale(1.03); }

.cesp-person-card__info { position: absolute; bottom: 0; background-color: rgba(255,255,255,0.9); width: 100%; padding: 20px; }
.cesp-person-card__info h2 { font-size: 1.2rem; margin-bottom: 0; }
.cesp-person-card__info p { margin-bottom: 0; }

/* People grid */
.cesp-people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }


/* ============================================================
   COMPONENT — Project Banner
   ============================================================ */

.cesp-project-container { max-width: 980px; margin: 0 auto; }

.cesp-project-banner { position: relative; min-height: 200px; display: flex; align-items: center; overflow: hidden; background-color: #efefef; }
.cesp-project-banner__content { position: relative; z-index: 2; padding-top: 28px; padding-bottom: 32px; width: 100%; }
.cesp-project-banner__back { display: inline-flex; align-items: center; gap: 5px; font-size: 1rem; font-weight: 500; color: #111; text-decoration: none; margin-bottom: 14px; transition: color 0.2s ease; }
.cesp-project-banner__back:hover { text-decoration: none; }
.cesp-project-banner__name { font-size: 1.6rem; font-weight: 700; color: #111; margin: 0 0 15px; line-height: 1.2; text-align: center; }
.cesp-project-banner__role { font-size: 1.1rem; font-weight: 400; color: #111; margin: 0; text-align: center; }

.cesp-project-single-box h4 { margin-bottom: 5px; font-size: 1rem; }
.cesp-project-single-box p { font-size: 0.8rem; line-height: 1.8; }

.cesp-resources-single-box h4 { margin-bottom: 5px; font-size: 1rem; }
.cesp-resources-single-box p { font-size: 0.9rem; line-height: 1.8; }
.cesp-resources-single-box ul li { font-size: 0.9rem; line-height: 1.8; }

.cesp-project-inner-heading { padding: 12px 20px !important; margin-bottom: 0; font-weight: 400; }


/* ============================================================
   COMPONENT — EIR Resource Library + Filters
   ============================================================ */

.cesp-eir-main { padding: 48px 0 64px; }

.cesp-eir-filters { margin-bottom: 40px; }

.cesp-filter-group { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.cesp-filter-group + .cesp-filter-group { padding-top: 16px; border-top: 1px solid var(--cesp-border); }

.cesp-filter-group__label { font-size: 0.88rem; font-weight: 700; color: var(--cesp-red); white-space: nowrap; padding-top: 7px; display: block; width: 100%; }
.cesp-filter-group__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.cesp-filter-tag {
    display: inline-block;
    padding: 6px 16px;
    font-family: var(--cesp-font);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cesp-text);
    background: var(--cesp-white);
    border: 1px solid #cccccc;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
    user-select: none;
}
.cesp-filter-tag:hover { border-color: var(--cesp-red); color: var(--cesp-red); background: rgba(204,0,51,0.04); }
.cesp-filter-tag.is-active,
.cesp-filter-tag[aria-pressed="true"] { background: var(--cesp-red); border-color: var(--cesp-red); color: var(--cesp-white); }
.cesp-filter-tag.is-active:hover { background: var(--cesp-red-dark); border-color: var(--cesp-red-dark); color: var(--cesp-white); }

.cesp-filter-clear-wrap { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.cesp-filter-clear { font-family: var(--cesp-font); font-size: 0.82rem; font-weight: 600; color: var(--cesp-text-muted); background: transparent; border: 1px solid var(--cesp-border); border-radius: 100px; padding: 5px 14px; cursor: pointer; transition: var(--cesp-transition); }
.cesp-filter-clear:hover { color: var(--cesp-red); border-color: var(--cesp-red); }
.cesp-filter-count { font-size: 0.82rem; color: var(--cesp-text-muted); }

.cesp-eir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.cesp-eir-card { display: flex; flex-direction: column; background: var(--cesp-white); border: 1px solid var(--cesp-border); border-radius: var(--cesp-radius-sm); overflow: hidden; text-decoration: none; transition: var(--cesp-transition); box-shadow: var(--cesp-shadow-sm); }
.cesp-eir-card:hover { box-shadow: var(--cesp-shadow-md); transform: translateY(-3px); text-decoration: none; }

.cesp-eir-card__thumb { width: 100%; height: 125px; overflow: hidden; background: #e8eef4; flex-shrink: 0; }
.cesp-eir-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; transition: transform 0.35s ease; }
.cesp-eir-card:hover .cesp-eir-card__thumb img { transform: scale(1.04); }
.cesp-eir-card__thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #d0dce8, #b8ccd8); }

.cesp-eir-card__format { padding: 10px 16px 0; font-size: 0.78rem; font-weight: 700; color: var(--cesp-red); }
.cesp-eir-card__title { font-size: 0.95rem; font-weight: 700; color: var(--cesp-dark); margin: 6px 16px 8px; line-height: 1.4; }
.cesp-eir-card__topics { padding: 0 16px 16px; font-size: 0.78rem; font-weight: 700; color: var(--cesp-text-muted); margin-top: auto; }

.cesp-eir-no-results { text-align: center; padding: 48px 24px; font-size: 1rem; color: var(--cesp-text-muted); grid-column: 1 / -1; }


/* ============================================================
   COMPONENT — Search Page
   ============================================================ */

.cesp-search-main { padding: 48px 0 64px; }

.cesp-search-form-wrap { margin-bottom: 32px; }
.cesp-search-form__inner { display: flex; align-items: center; border: 2px solid var(--cesp-border); border-radius: var(--cesp-radius-sm); overflow: hidden; max-width: 680px; background: var(--cesp-white); transition: border-color 0.2s ease; }
.cesp-search-form__inner:focus-within { border-color: var(--cesp-red); }
.cesp-search-form__input { flex: 1; border: none; outline: none; padding: 14px 18px; font-family: var(--cesp-font); font-size: 1rem; color: var(--cesp-text); background: transparent; box-shadow: none; width: auto; }
.cesp-search-form__input::placeholder { color: var(--cesp-text-muted); }
.cesp-search-form__btn { background: var(--cesp-red); border: none; color: var(--cesp-white); padding: 0 20px; height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s ease; }
.cesp-search-form__btn:hover { background: var(--cesp-red-dark); }

.cesp-search-count { font-size: 0.95rem; color: var(--cesp-text-light); margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--cesp-border); }
.cesp-search-count strong { color: var(--cesp-dark); font-weight: 700; }
.cesp-search-count em { color: var(--cesp-red); font-style: normal; font-weight: 600; }

.cesp-search-results { display: flex; flex-direction: column; }
.cesp-search-result { padding: 24px 0; border-bottom: 1px solid var(--cesp-border); }

.cesp-search-result__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cesp-search-result__badge { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 100px; color: var(--cesp-white); }
.badge--news     { background: var(--cesp-red); }
.badge--project  { background: #3a7fc1; }
.badge--people   { background: #2e7d32; }
.badge--research { background: #6a1b9a; }
.badge--resource { background: #e65100; }
.badge--eir      { background: #00695c; }
.badge--page     { background: #555d66; }
.badge--default  { background: var(--cesp-text-muted); }
.cesp-search-result__date { font-size: 0.8rem; color: var(--cesp-text-muted); }

.cesp-search-result__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; line-height: 1.35; }
.cesp-search-result__title a { color: var(--cesp-dark); text-decoration: none; transition: color 0.2s ease; }
.cesp-search-result__title a:hover { color: var(--cesp-red); }

.cesp-search-result__excerpt { font-size: 0.9rem; color: var(--cesp-text-light); line-height: 1.7; margin: 0 0 12px; max-width: 820px; }
.cesp-search-result__excerpt mark { background: rgba(204,0,51,0.12); color: var(--cesp-red); font-weight: 600; border-radius: 2px; padding: 0 2px; }

.cesp-search-result__link { font-size: 0.85rem; font-weight: 700; color: var(--cesp-red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: var(--cesp-transition); }
.cesp-search-result__link::after { content: '›'; font-size: 1.1em; }
.cesp-search-result__link:hover { color: var(--cesp-red-dark); gap: 7px; text-decoration: none; }

.cesp-search-pagination { margin-top: 48px; display: flex; justify-content: center; }
.cesp-search-pagination .nav-links { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cesp-search-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--cesp-border); border-radius: var(--cesp-radius-sm); font-size: 0.9rem; font-weight: 500; color: var(--cesp-text); text-decoration: none; transition: var(--cesp-transition); }
.cesp-search-pagination .page-numbers:hover { border-color: var(--cesp-red); color: var(--cesp-red); }
.cesp-search-pagination .page-numbers.current { background: var(--cesp-red); border-color: var(--cesp-red); color: var(--cesp-white); }
.cesp-search-pagination .page-numbers.prev,
.cesp-search-pagination .page-numbers.next { width: auto; padding: 0 14px; }

.cesp-search-no-results { padding: 40px 0; color: var(--cesp-text-light); }
.cesp-search-no-results ul { margin-top: 10px; padding-left: 24px; }
.cesp-search-no-results ul li { margin-bottom: 6px; font-size: 0.92rem; }


/* ============================================================
   COMPONENT — Single News Page
   ============================================================ */

.cesp-news-single__back-bar { padding: 12px 0; border-bottom: 1px solid #e5e7eb; }
.cesp-news-single__back-link { font-size: 0.875rem; color: #374151; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s ease; }
.cesp-news-single__back-link:hover { color: var(--cesp-red); text-decoration: none; }

.cesp-news-single__hero { background-color: #f9fafb; padding: 40px 0 32px; border-bottom: 1px solid #e5e7eb; text-align: center; }
.cesp-news-single__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #111827; line-height: 1.3; margin: 0 0 10px; max-width: 800px; margin-left: auto; margin-right: auto; }
.cesp-news-single__subtitle { font-size: 1rem; color: #6b7280; margin: 0; font-style: italic; }

.cesp-news-single__article { padding: 48px 0 64px; }
.cesp-news-single__layout { max-width: 860px; }

.cesp-news-single__intro-block { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-bottom: 40px; padding: 24px; background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; }
.cesp-news-single__featured-image img { width: 100%; height: auto; display: block; border-radius: 2px; }
.cesp-news-single__dek { font-size: 0.9375rem; line-height: 1.7; color: #374151; }
.cesp-news-single__dek p { margin: 0; }

.cesp-news-single__content { font-size: 1rem; line-height: 1.8; color: #1f2937; }
.cesp-news-single__content p { margin: 0 0 1.25em; }
.cesp-news-single__content h2,
.cesp-news-single__content h3,
.cesp-news-single__content h4 { font-weight: 700; color: #111827; margin: 1.75em 0 0.5em; line-height: 1.3; }
.cesp-news-single__content h2 { font-size: 1.375rem; }
.cesp-news-single__content h3 { font-size: 1.125rem; }
.cesp-news-single__content h4 { font-size: 1rem; }
.cesp-news-single__content ul,
.cesp-news-single__content ol { margin: 0 0 1.25em 1.5em; padding: 0; }
.cesp-news-single__content li { margin-bottom: 0.375em; }
.cesp-news-single__content a { color: var(--cesp-red); text-decoration: underline; }
.cesp-news-single__content a.wp-block-button__link{
    color:#fff;
}
.cesp-news-single__content a.wp-block-button__link:hover{
    color:var(--cesp-red);
}
.cesp-news-single__content a:hover { color: #990025; }
.cesp-news-single__content strong { font-weight: 700; }
.cesp-news-single__content em { font-style: italic; }
.cesp-news-single__content figure { margin: 1.5em 0; }
.cesp-news-single__content figure img { max-width: 100%; height: auto; display: block; }
.cesp-news-single__content iframe { max-width: 100%; }
.cesp-news-single__content .resource-button,
.cesp-news-single__content a.resource-button { display: inline-block; background-color: var(--cesp-red); color: #ffffff !important; padding: 10px 24px; border-radius: 4px; text-decoration: none !important; font-weight: 600; font-size: 0.9375rem; transition: background-color 0.2s ease; }
.cesp-news-single__content .resource-button:hover { background-color: #990025; }

/* Floating images */
.cesp-news-single__content .wp-block-image.alignright{ float: right; margin: 0 0 0 20px !important; clear: right; }
.cesp-news-single__content .wp-block-image.alignleft { float: left; margin: 0 20px 0 0 !important; clear: left; }
.cesp-news-single__content::after { content: ''; display: table; clear: both; }

.cesp-news-single__share-bar { padding: 24px 0 40px; border-top: 1px solid #e5e7eb; }
.cesp-news-single__share-icons { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cesp-share-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d1d5db; color: #374151; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.cesp-share-icon:hover { background-color: #111827; color: #ffffff; border-color: #111827; text-decoration: none; }


/* ============================================================
   COMPONENT — File Download Cards
   ============================================================ */

.file-card { display: flex; align-items: center; gap: 16px; background: #e3edf2; border: 1px solid #c7d6dd; border-radius: 6px; padding: 16px 20px; text-decoration: none; color: inherit; }
.file-card .icon-box { flex-shrink: 0; width: 40px; height: 42px; }
.file-card .info { flex: 1; min-width: 0; }
.file-card .name-row { font-size: 17px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-card .sub-row { font-size: 14px; color: #6b7a82; margin-top: 2px; }
.file-card .download-icon { flex-shrink: 0; color: #3a4750; }


/* ============================================================
   COMPONENT — Pricing Table (Projects list)
   ============================================================ */

.pricing-table { margin-top: 0; }
.pricing-table table { table-layout: fixed; width: 100%; }
.pricing-table tbody tr:last-child td { border-bottom: 0; }
.pricing-table tbody tr { cursor: pointer; }
.pricing-table td { font-size: 13px; padding: 0 5px; border: 0; border-bottom: 1px solid; }
.pricing-table td a { display: flex; align-items: center; box-sizing: border-box; max-width: 100%; padding: 2px 2px 0; text-decoration: none; color: inherit; }
.pricing-table td a:hover { color: #95caef; }
.pricing-table td:nth-child(1), .pricing-table th:nth-child(1) { width: 2%; }
.pricing-table.projects-table td:nth-child(1), .pricing-table.projects-table th:nth-child(1) { width: 8%; }
.pricing-table td:nth-child(2), .pricing-table th:nth-child(2) { width: 20%; }
.pricing-table td:nth-child(3), .pricing-table th:nth-child(3) { width: 14%; }
.pricing-table.resources-table td:nth-child(3), .pricing-table.resources-table th:nth-child(3) {
    width: 24%;
}
.pricing-table td:nth-child(4), .pricing-table th:nth-child(4) { width: 19%; }
.pricing-table.resources-table td:nth-child(4), .pricing-table.resources-table th:nth-child(4) { width: 8%; }
.pricing-table td:nth-child(5), .pricing-table th:nth-child(5) { width: 45%; }
.pricing-table td:nth-child(5) a { align-items: baseline; }
.pricing-table tbody tr:hover { background-color: #f9f9f9; transition: background-color 0.2s ease; }
.pricing-table thead th { background-color: var(--cesp-red); color: #fff; border: 0; }
.pricing-table-hide { display: none !important; }
.apt-pagination { text-align: center; }


/* ============================================================
   COMPONENT — Misc Utilities
   ============================================================ */

.cesp-readmore-link a { font-size: 1rem; font-weight: 700; color: var(--cesp-red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: var(--cesp-transition); }
.cesp-readmore-link a:hover { color: var(--cesp-red-dark); text-decoration: none; gap: 7px; }
.cesp-readmore-link a::after { content: '›'; font-size: 1.1em; }

.cesp-gap-twelve { gap: 12px !important; }
.cesp-padding-lr { padding: 0 15px; }
.wp-block-group.has-background { padding: 20px; }


/* ============================================================
   GUTENBERG BLOCK OVERRIDES
   ============================================================ */

.wp-block-group.alignfull,
.wp-block-cover.alignfull { width: 100%; max-width: 100%; }

.wp-block-button__link { background: var(--cesp-red); border-radius: var(--cesp-radius-sm); font-weight: 700; transition: var(--cesp-transition); border: 1px solid; }
.wp-block-button__link:hover { background: none; border: 1px solid var(--cesp-red); color: var(--cesp-red); text-decoration: none; }
.is-style-outline .wp-block-button__link { border-color: var(--cesp-red); color: var(--cesp-red); background: transparent; }
.is-style-outline .wp-block-button__link:hover { background: var(--cesp-red); color: var(--cesp-white); }
.blueon-dark-btn .wp-block-button__link{
    color:var(--cesp-white);
    border-color:var(--cesp-white);
    background: initial;
}
.blueon-dark-btn .wp-block-button__link:hover{
    background: var(--cesp-red);
    color:var(--cesp-white);
    border-color:var(--cesp-red);
}

.wp-block-separator { border-color: var(--cesp-border); }
.wp-block-quote { border-left: 4px solid var(--cesp-red); padding-left: 1.25em; font-style: italic; color: var(--cesp-text-light); }
.wp-block-cover { min-height: 400px; }
.wp-block-columns { gap: 28px; }


/* ============================================================
   WORDPRESS CORE — Posts and Pages
   ============================================================ */

.sticky { display: block; }
.post, .page { margin: 0 0 1.5em; }
.updated:not(.published) { display: none; }
.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; }
.entry-content h2, .entry-content h3 { color: var(--cesp-dark); margin-top: 1.5em; }
.page-links { clear: both; margin: 0 0 1.5em; }
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation { margin: 0 0 1.5em; }
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links { display: flex; }
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous { flex: 1 0 50%; }
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next { text-align: end; flex: 1 0 50%; }


/* ============================================================
   WORDPRESS CORE — Comments
   ============================================================ */

.comment-content a { word-wrap: break-word; }
.bypostauthor { display: block; }


/* ============================================================
   WORDPRESS CORE — Widgets
   ============================================================ */

.widget { margin: 0 0 1.5em; }
.widget select { max-width: 100%; }


/* ============================================================
   WORDPRESS CORE — Media / Captions / Galleries
   ============================================================ */

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; }
.custom-logo-link { display: inline-block; }

.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text { margin: 0.8075em 0; font-size: 0.85rem; color: var(--cesp-text-muted); text-align: center; }
.wp-caption-text { text-align: center; }

.gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; }
.gallery-item { display: inline-block; text-align: center; width: 100%; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }
.gallery-caption { display: block; }


/* ============================================================
   PLUGINS — Jetpack infinite scroll
   ============================================================ */

.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none; }
.infinity-end.neverending .site-footer { display: block; }


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

#primary[tabindex="-1"]:focus { outline: 0; }

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--cesp-red);
    color: var(--cesp-white);
    padding: 10px 18px;
    font-weight: 700;
    z-index: 99999;
    border-radius: 0 0 var(--cesp-radius-sm) 0;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; outline: none; }


/* ============================================================
   ALIGNMENTS
   ============================================================ */

.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }


/* ============================================================
   TEXT UTILITIES
   ============================================================ */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-red    { color: var(--cesp-red); }
.text-muted  { color: var(--cesp-text-muted); }
.text-white  { color: var(--cesp-white); }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }


/*--------------------------------------------------------------
# BRIDGE BLOG — Single post page
# Append to style.css
--------------------------------------------------------------*/

/* ==========================================================
   BANNER — full-width background image + white content box
   ========================================================== */

.cesp-bridge-blog-banner {
    position: relative;
    width: 100%;
    min-height: 380px;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.cesp-bridge-blog-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.cesp-bridge-blog-banner__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: flex-start;
}

/* White content box */
.cesp-bridge-blog-banner__box {
    background: rgba(255, 255, 255, 0.95);
    padding: 32px 36px;
    max-width: 620px;
    width: 100%;
    border-radius: 2px;
    margin:0 auto;
}

/* Back link */
.cesp-bridge-blog-banner__back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cesp-text-muted);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cesp-bridge-blog-banner__back:hover {
    color: var(--cesp-red);
    text-decoration: none;
}

/* Tile text / tag */
.cesp-bridge-blog-banner__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cesp-white);
    background: var(--cesp-red);
    padding: 3px 10px;
    border-radius: 2px;
    margin-bottom: 12px;
}

/* Title */
.cesp-bridge-blog-banner__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0 0 12px;
    line-height: 1.25;
}

/* Byline + date row */
.cesp-bridge-blog-banner__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.cesp-bridge-blog-banner__byline {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cesp-text);
}

.cesp-bridge-blog-banner__sep {
    color: var(--cesp-text-muted);
    font-size: 0.85rem;
}

.cesp-bridge-blog-banner__date {
    font-size: 0.85rem;
    color: var(--cesp-text-muted);
}

/* Summary */
.cesp-bridge-blog-banner__summary {
    font-size: 0.92rem;
    color: var(--cesp-text-light);
    line-height: 1.7;
    margin: 0;
}

/* ==========================================================
   MAIN CONTENT AREA
   ========================================================== */

.cesp-bridge-blog-main {
    padding: 52px 0 64px;
}

.cesp-bridge-blog-layout {
    max-width: 980px;
    margin: 0 auto;
    background-color: #efefef;
    padding: 20px;
    border-radius: 20px;
}

/* Article body */
.cesp-bridge-blog-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--cesp-text);
    margin-bottom: 40px;
    background-color: var(--cesp-white);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0.64px 0.77px 4px 0px rgba(102, 102, 102, 0.3), 0 1px 4px #0002;
}

.cesp-bridge-blog-content p { margin-bottom: 1.3em; }

.cesp-bridge-blog-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 1.75em 0 0.5em;
}

.cesp-bridge-blog-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 1.5em 0 0.4em;
}

.cesp-bridge-blog-content ul,
.cesp-bridge-blog-content ol {
    margin: 0 0 1.3em 1.5em;
    padding: 0;
}

.cesp-bridge-blog-content li { margin-bottom: 0.4em; }

.cesp-bridge-blog-content a {
    color: var(--cesp-red);
    text-decoration: underline;
}
.cesp-bridge-blog-content a:hover { color: var(--cesp-red-dark); }

.cesp-bridge-blog-content strong { font-weight: 700; }
.cesp-bridge-blog-content em { font-style: italic; }

.cesp-bridge-blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--cesp-radius-sm);
    margin: 1em 0;
}

.cesp-bridge-blog-content figure { margin: 1.5em 0; }
.cesp-bridge-blog-content figcaption { font-size: 0.82rem; color: var(--cesp-text-muted); text-align: center; margin-top: 6px; }

blockquote.cesp-bridge-blog-content {
    border-left: 4px solid var(--cesp-red);
    padding-left: 1.25em;
    font-style: italic;
    color: var(--cesp-text-light);
    margin: 1.5em 0;
}

/* ==========================================================
   SHARE BAR
   ========================================================== */

.cesp-bridge-blog-share {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--cesp-border);
}

.cesp-bridge-blog-share__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cesp-text);
    margin-right: 4px;
}

/* Share icon buttons */
.cesp-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--cesp-border);
    color: var(--cesp-text);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    padding: 0;
    font-family: inherit;
}

.cesp-share-icon:hover {
    text-decoration: none;
}

/* Individual hover colors */
.cesp-share-icon--facebook:hover  { background: #1877F2; border-color: #1877F2; color: #fff; }
.cesp-share-icon--twitter:hover   { background: #000000; border-color: #000000; color: #fff; }
.cesp-share-icon--linkedin:hover  { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.cesp-share-icon--whatsapp:hover  { background: #25D366; border-color: #25D366; color: #fff; }
.cesp-share-icon--pinterest:hover { background: #E60023; border-color: #E60023; color: #fff; }
.cesp-share-icon--copy:hover      { background: var(--cesp-dark); border-color: var(--cesp-dark); color: #fff; }

/*--------------------------------------------------------------
# BRIDGE RESOURCE — Single post page
# Append to style.css
--------------------------------------------------------------*/

/* ==========================================================
   BANNER — image + dark overlay + centered white title box
   ========================================================== */

.cesp-bridge-resource-banner {
    position: relative;
    width: 100%;
    min-height: 220px;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.cesp-bridge-resource-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 1;
}

.cesp-bridge-resource-banner__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 32px;
    padding-bottom: 32px;
    display: flex;
    justify-content: center;
}

/* Centered dark semi-transparent title box */
.cesp-bridge-resource-banner__box {
    background: rgba(50, 50, 50, 0.78);
    padding: 28px 44px;
    max-width: 700px;
    width: 100%;
    text-align: center;
}

.cesp-bridge-resource-banner__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cesp-white);
    margin: 0;
    line-height: 1.3;
}


/* ==========================================================
   MAIN LAYOUT
   ========================================================== */

.cesp-bridge-resource-main {
    padding: 48px 0 64px;
    background: #f5f5f5;
}

.cesp-bridge-resource-wrap {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}


/* ==========================================================
   SECTION 1 — Resource Description box
   ========================================================== */

.cesp-bridge-resource-desc-box {
    background: var(--cesp-white);
    border: 1px solid #e0e0e0;
    border-radius: var(--cesp-radius-sm);
    padding: 28px 32px;
}

/* "RESOURCE DESCRIPTION" red uppercase label */
.cesp-bridge-resource-desc-box__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesp-red);
    margin: 0 0 10px;
}

/* Teaser — bold intro line */
.cesp-bridge-resource-desc-box__teaser {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0 0 12px;
    line-height: 1.5;
}

/* Description body paragraphs */
.cesp-bridge-resource-desc-box__body {
    font-size: 0.9rem;
    color: var(--cesp-text);
    line-height: 1.75;
    margin-bottom: 16px;
}
.cesp-bridge-resource-desc-box__body p {
    margin: 0 0 0.9em;
}
.cesp-bridge-resource-desc-box__body p:last-child {
    margin-bottom: 0;
}

/* Topics / Best For / Type / Language rows */
.cesp-bridge-resource-desc-box__meta {
    font-size: 0.82rem;
    color: var(--cesp-text-light);
    margin: 6px 0 0;
    line-height: 1.5;
    font-style: italic;
}

.cesp-bridge-resource-desc-box__meta-label {
    font-weight: 700;
    font-style: normal;
    color: var(--cesp-text);
    margin-right: 4px;
}


/* ==========================================================
   SECTION 2 — Back link + Gutenberg content box
   ========================================================== */

.cesp-bridge-resource-content-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* "← BACK TO RESOURCES" link */
.cesp-bridge-resource-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cesp-red);
    text-decoration: none;
    transition: color 0.2s ease;
}
.cesp-bridge-resource-back:hover {
    color: var(--cesp-red-dark);
    text-decoration: none;
}
.cesp-bridge-resource-back svg {
    flex-shrink: 0;
}

/* White content box — wraps Gutenberg editor output */
.cesp-bridge-resource-content-box {
    background: var(--cesp-white);
    border: 1px solid #e0e0e0;
    border-radius: var(--cesp-radius-sm);
    padding: 32px 36px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--cesp-text);
}

.cesp-bridge-resource-content-box p {
    margin-bottom: 1.2em;
}

.cesp-bridge-resource-content-box p:last-child {
    margin-bottom: 0;
}

.cesp-bridge-resource-content-box ul,
.cesp-bridge-resource-content-box ol {
    margin: 0 0 1.2em 1.5em;
    padding: 0;
}

.cesp-bridge-resource-content-box li {
    margin-bottom: 0.4em;
}

.cesp-bridge-resource-content-box h2,
.cesp-bridge-resource-content-box h3 {
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 1.5em 0 0.5em;
}

.cesp-bridge-resource-content-box strong {
    font-weight: 700;
}

/* CTA button inside Gutenberg content */
.cesp-bridge-resource-content-box .wp-block-button .wp-block-button__link,
.cesp-bridge-resource-content-box a.cesp-btn {
    background: var(--cesp-red);
    color: var(--cesp-white);
    border: none;
    padding: 13px 28px;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--cesp-radius-sm);
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}
.cesp-bridge-resource-content-box .wp-block-button .wp-block-button__link:hover,
.cesp-bridge-resource-content-box a.cesp-btn:hover {
    background: var(--cesp-red-dark);
    color: var(--cesp-white);
    text-decoration: none;
}

/* Centered text inside content box */
.cesp-bridge-resource-content-box .has-text-align-center,
.cesp-bridge-resource-content-box p.aligncenter {
    text-align: center;
}


/* ==========================================================
   SECTION 3 — Share This Resource
   ========================================================== */

.cesp-bridge-resource-share {
    text-align: center;
    padding: 8px 0 16px;
}

.cesp-bridge-resource-share__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesp-red);
    margin: 0 0 14px;
}

.cesp-bridge-resource-share__icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Share icons — reuse .cesp-share-icon from bridge-blog-single.css */
/* Colors already defined there. Adding dark fill version for this page */
.cesp-bridge-resource-share .cesp-share-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cesp-dark);
    border: none;
    color: var(--cesp-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.15s ease;
    font-family: inherit;
}

.cesp-bridge-resource-share .cesp-share-icon:hover {
    transform: scale(1.1);
    text-decoration: none;
}

.cesp-bridge-resource-share .cesp-share-icon--facebook:hover  { background: #1877F2; }
.cesp-bridge-resource-share .cesp-share-icon--twitter:hover   { background: #000000; }
.cesp-bridge-resource-share .cesp-share-icon--whatsapp:hover  { background: #25D366; }
.cesp-bridge-resource-share .cesp-share-icon--linkedin:hover  { background: #0A66C2; }
.cesp-bridge-resource-share .cesp-share-icon--pinterest:hover { background: #E60023; }
.cesp-bridge-resource-share .cesp-share-icon--copy:hover      { background: #555555; }


/*--------------------------------------------------------------
# CESP ACCORDION
# Styles the native WordPress Details block (core/details)
# to match the BRIDGE resource page accordion design.
#
# HOW TO USE IN GUTENBERG:
# Add a "Details" block (search for "Details" in the inserter).
# The summary becomes the accordion header.
# Everything inside the details becomes the content.
# Nest another Details block inside for sub-accordions.
#
# Append to style.css
--------------------------------------------------------------*/

/* ==========================================================
   RESET native <details> / <summary> browser styles
   ========================================================== */

.wp-block-details {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 0 !important;
    background: none !important;
}

/* Remove default triangle marker */
.wp-block-details > summary {
    list-style: none !important;
}
.wp-block-details > summary::-webkit-details-marker {
    display: none !important;
}
.wp-block-details > summary::marker {
    display: none !important;
}

/* ==========================================================
   OUTER ACCORDION — top level
   ========================================================== */

/* Wrapper — add a bottom border separator between items */
.wp-block-details {
    border-bottom: 1px solid #e0e0e0 !important;
}

.wp-block-details:first-of-type {
    border-top: 1px solid #e0e0e0 !important;
}

/* Summary / Header row */
.wp-block-details > summary {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 4px !important;
    cursor: pointer !important;
    user-select: none !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: #111 !important;
    font-family: var(--cesp-font) !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
    outline: none !important;
    letter-spacing: 1px;
}

.wp-block-details > summary:hover {
    color: var(--cesp-red-dark) !important;
}

.wp-block-details > summary:focus-visible {
    outline: 2px solid var(--cesp-red) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* Arrow icon — rotates on open */
.wp-block-details > summary::before {
    content: '›' !important;
    display: inline-block !important;
    font-size: 1.3rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--cesp-red) !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
    width: 16px !important;
}

/* Rotate arrow when open */
.wp-block-details[open] > summary::before {
    transform: rotate(90deg) !important;
}

/* Content area — hidden by default, animated open */
.wp-block-details > summary + * {
    margin-top: 0 !important;
}

/* Inner content wrapper (injected by JS for animation) */
.cesp-accordion-inner {
    overflow: hidden;
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cesp-accordion-inner-content {
    padding: 4px 4px 20px 26px;
    font-size: 0.92rem;
    color: var(--cesp-text);
    line-height: 1.75;
}

/* ==========================================================
   NESTED ACCORDION — sub-level (Details inside Details)
   ========================================================== */

.wp-block-details .wp-block-details {
    border-top: none !important;
    border-bottom: none !important;
    margin: 4px 0 !important;
}

.wp-block-details .wp-block-details > summary {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--cesp-red) !important;
    padding: 8px 4px !important;
}

.wp-block-details .wp-block-details .cesp-accordion-inner-content {
    padding: 4px 4px 14px 26px;
}

/* ==========================================================
   CONTENT TYPOGRAPHY INSIDE ACCORDION
   ========================================================== */

.cesp-accordion-inner-content p {
    margin: 0 0 0.9em;
}
.cesp-accordion-inner-content p:last-child {
    margin-bottom: 0;
}

.cesp-accordion-inner-content ul,
.cesp-accordion-inner-content ol {
    margin: 0.5em 0 0.9em 1.5em;
    padding: 0;
}

.cesp-accordion-inner-content li {
    margin-bottom: 0.4em;
    font-size: 0.92rem;
    line-height: 1.7;
}

.cesp-accordion-inner-content strong {
    font-weight: 700;
    color: var(--cesp-dark);
}

.cesp-accordion-inner-content h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0.8em 0 0.3em;
}

/* Spanish / secondary language section separator */
.cesp-accordion-inner-content hr {
    border: none;
    border-top: 1px solid var(--cesp-border);
    margin: 20px 0;
}

/* ==========================================================
   EDITOR — make it look the same in Gutenberg block editor
   ========================================================== */

.editor-styles-wrapper .wp-block-details > summary {
    color: var(--cesp-red, #CC0033);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    font-size: 1.05rem;
}

.editor-styles-wrapper .wp-block-details > summary::before {
    content: '›';
    font-size: 1.3rem;
    color: var(--cesp-red, #CC0033);
    width: 16px;
    flex-shrink: 0;
}

/*--------------------------------------------------------------
# BRIDGE HEADER + FOOTER
# Append to style.css
--------------------------------------------------------------*/

/* ==========================================================
   BRIDGE HEADER
   ========================================================== */

.bridge-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cesp-white);
    border-bottom: 1px solid #e8e8e8;
    transition: box-shadow 0.2s ease;
}

.bridge-header.is-scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}

.bridge-header__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin: 0 auto;
    padding: 10px 75px;
    min-height: 72px;
}

/* ── Branding ── */
.bridge-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 12px 0;
}

.bridge-branding__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.2;
}

.bridge-branding__name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cesp-dark);
    letter-spacing: -0.01em;
}

.bridge-branding__sub {
    font-size: 1.2rem;
    font-weight: 600;
    font-style: italic;
    color: var(--cesp-red);
    margin-top: 1px;
}

.bridge-branding__link:hover .bridge-branding__name { color: #000; }
.bridge-branding__link:hover { text-decoration: none; }

/* ── Right block ── */
.bridge-header__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex: 1;
    padding: 10px 0 8px;
}

/* ── Utility — "Return to CESP ›" ── */
.bridge-header__utility {
    display: flex;
    justify-content: flex-end;
}

.bridge-return-link {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--cesp-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
}

.bridge-return-link span {
    font-size: 1rem;
    line-height: 1;
}

.bridge-return-link:hover {
    color: var(--cesp-red);
    text-decoration: none;
}

/* ── Nav row ── */
.bridge-header__nav-row {
    display: flex;
    align-items: center;
}

/* ── Primary nav ── */
.bridge-nav { display: flex; align-items: center; }

.bridge-nav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    align-items: center;
}

.bridge-nav__list li { margin: 0; position: relative; }

.bridge-nav__list > li > a {
    display: block;
    padding: 4px 22px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cesp-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* Active / current item — red */
.bridge-nav__list > li.current-menu-item > a,
.bridge-nav__list > li.current-menu-ancestor > a {
    color: var(--cesp-red);
}

.bridge-nav__list > li > a:hover {
    color: var(--cesp-red);
    text-decoration: none;
}

/* Dropdown */
.bridge-nav__list > li.menu-item-has-children > a::after {
    content: ' ›';
    font-size: 0.8em;
    font-weight: 400;
    opacity: 0.5;
}

.bridge-nav__list ul {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    min-width: 200px;
    background: var(--cesp-white);
    border-top: 3px solid var(--cesp-red);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    border-radius: 0 0 4px 4px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 9999;
    display: none;
}

.bridge-nav__list li:hover > ul,
.bridge-nav__list li.focus > ul { display: block; }

.bridge-nav__list ul li a {
    display: block;
    padding: 9px 18px;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--cesp-text);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.bridge-nav__list ul li a:hover {
    background: #f5f5f5;
    color: var(--cesp-red);
}

/* ── Mobile toggle ── */
.bridge-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 2px solid var(--cesp-red);
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-left: 12px;
}
.bridge-menu-toggle:hover { background: var(--cesp-red); }
.bridge-menu-toggle:hover .menu-toggle__bar { background: var(--cesp-white); }
.bridge-menu-toggle .menu-toggle__bar { background: var(--cesp-red); }
.bridge-menu-toggle.toggled .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bridge-menu-toggle.toggled .menu-toggle__bar:nth-child(2) { opacity: 0; }
.bridge-menu-toggle.toggled .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile panel ── */
.bridge-mobile-panel {
    display: none;
    background: var(--cesp-white);
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.bridge-mobile-panel.is-open { display: block; }
.bridge-mobile-panel__inner { max-width: var(--cesp-max-width); margin: 0 auto; padding: 16px 24px 24px; }

.bridge-mobile-nav { list-style: none; margin: 0 0 16px; padding: 0; }
.bridge-mobile-nav li { margin: 0; border-bottom: 1px solid #f0f0f0; }
.bridge-mobile-nav li a { display: block; padding: 12px 4px; font-size: 1rem; font-weight: 700; color: var(--cesp-dark); text-decoration: none; }
.bridge-mobile-nav li.current-menu-item > a { color: var(--cesp-red); }
.bridge-mobile-nav li a:hover { color: var(--cesp-red); }
.bridge-mobile-nav ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.bridge-mobile-nav ul li a { font-size: 0.9rem; font-weight: 400; color: #555; }

.bridge-mobile-panel__utility {
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.bridge-mobile-panel__utility .bridge-return-link {
    font-size: 0.82rem;
    font-weight: 600;
}


/* ==========================================================
   BRIDGE FOOTER
   ========================================================== */

.bridge-footer {
    background: #2a2a2a;
    color: var(--cesp-white);
}

/* ── Top section: 2-col logos ── */
.bridge-footer__top {
    padding: 44px 0 36px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bridge-footer__top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

/* Left col */
.bridge-footer__col--left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* NJ DOE logo */
.bridge-footer-njdoe { display: flex; flex-direction: column; gap: 14px; }

.bridge-footer-njdoe__logo {
    width: 50%;
    object-fit: contain;
}

.bridge-footer-njdoe__text {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    margin: 0;
    max-width: 420px;
}

/* Widget area overrides for left col */
.bridge-footer__col--left .bridge-footer-widget img {
    max-height: 70px;
    width: auto;
    margin: 0 0 14px;
}

.bridge-footer__col--left .bridge-footer-widget p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    margin: 0;
}

/* Right col */
.bridge-footer__col--right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bridge-footer-rutgers { display: block; text-decoration: none; }

.bridge-footer-rutgers__logo {
    max-width: 280px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0;
    filter: brightness(0) invert(1); /* make logo white */
}

/* Widget area overrides for right col */
.bridge-footer__col--right .bridge-footer-widget {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bridge-footer__col--right .bridge-footer-widget img {
    max-width: 280px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0;
    filter: brightness(0) invert(1);
}

/* ── Bottom section: accessibility + copyright ── */
.bridge-footer__bottom {
    padding: 28px 0 24px;
    text-align: center;
}

.bridge-footer__legal {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    margin: 0 0 10px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.bridge-footer__legal a {
    color: rgba(255,255,255,0.7);
    text-decoration: underline;
    transition: color 0.2s ease;
}
.bridge-footer__legal a:hover { color: var(--cesp-white); }

.bridge-footer__copyright {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
}

/*--------------------------------------------------------------
# BRIDGE BLOG ARCHIVE — /bridge/blog
# Append to style.css
--------------------------------------------------------------*/

/* ==========================================================
   BANNER
   ========================================================== */

.bridge-blog-banner {
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url('https://miletestsite.com/cesp/wp-content/uploads/2026/07/Bridge-Blog-banner-scaled.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bridge-blog-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 1;
}

.bridge-blog-banner__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.bridge-blog-banner__title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--cesp-white);
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}


/* ==========================================================
   SHARED — Category tag pill
   ========================================================== */

.bridge-blog-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    border-radius: 2px;
    line-height: 1.4;
    white-space: nowrap;
}

.bridge-blog-empty {
    font-size: 0.88rem;
    color: var(--cesp-text-muted);
    font-style: italic;
}


/* ==========================================================
   SECTION 1 — Featured + Latest (white bg)
   ========================================================== */

.bridge-blog-top {
    background: var(--cesp-white);
    padding: 36px 0 40px;
}

.bridge-blog-top__container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

/* ── Featured Post box ── */
.bridge-blog-featured {
    background: #efefef;
    border: 1px solid var(--cesp-border);
    padding: 16px;
    border-radius:20px;
}

.bridge-blog-featured__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesp-red);
    margin: 0 0 12px;
}

.bridge-blog-featured__card {
    display: block;
    text-decoration: none;
}
.bridge-blog-featured__card:hover { text-decoration: none; }

.bridge-blog-featured__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    margin-bottom: 14px;
    background: #e0e0e0;
}
.bridge-blog-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    display: block;
    transition: transform 0.35s ease;
}
.bridge-blog-featured__card:hover .bridge-blog-featured__image img {
    transform: scale(1.03);
}

.bridge-blog-featured__body { padding: 0 2px; }

.bridge-blog-featured__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 8px 0 0;
    line-height: 1.3;
}
.bridge-blog-featured__card:hover .bridge-blog-featured__title {
    color: var(--cesp-red);
}

/* ── Latest Posts box ── */
.bridge-blog-latest {
    background: #efefef;
    border: 1px solid var(--cesp-border);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bridge-blog-latest__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesp-red);
    margin: 0 0 8px;
}

.bridge-blog-latest__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cesp-border);
    text-decoration: none;
    transition: opacity 0.2s ease;
    background: #fff;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 20px;
}

.bridge-blog-latest__item:hover { opacity: 0.75; text-decoration: none; }

.bridge-blog-latest__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cesp-dark);
    margin: 4px 0 0;
    line-height: 1.35;
}


/* ==========================================================
   SECTION 2 — Explore All Posts (gray bg)
   ========================================================== */

.bridge-blog-all {
    background: #f2f2f2;
    padding: 40px 0 56px;
}

.bridge-blog-all__container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
}

.bridge-blog-all__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cesp-red);
    text-align: center;
    margin: 0 0 24px;
}

/* ── 3-col card grid ── */
.bridge-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* ── Individual card ── */
.bridge-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--cesp-white);
    border-radius: var(--cesp-radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--cesp-border);
}
.bridge-blog-card:hover {
    box-shadow: var(--cesp-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Image wrap — tag overlays bottom-left */
.bridge-blog-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 15 / 10;
    overflow: hidden;
    background: #d0d0d0;
    flex-shrink: 0;
}
.bridge-blog-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    display: block;
    transition: transform 0.35s ease;
}
.bridge-blog-card:hover .bridge-blog-card__image-wrap img {
    transform: scale(1.04);
}

.bridge-blog-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #d0dce8, #b8ccd8);
}

/* Tag badge — overlays bottom-left of image */
.bridge-blog-card__tag {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cesp-white);
    background: var(--cesp-red);
    padding: 3px 10px;
    line-height: 1.6;
    z-index: 2;
    white-space: nowrap;
}

/* Card body — title only */
.bridge-blog-card__body {
    padding: 12px 14px 16px;
    flex: 1;
}

.bridge-blog-card__title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0;
    line-height: 1.4;
}
.bridge-blog-card:hover .bridge-blog-card__title {
    color: var(--cesp-red);
}


/* ==========================================================
   LOAD MORE BUTTON
   ========================================================== */

.bridge-blog-loadmore {
    text-align: center;
    margin-top: 36px;
}

.bridge-blog-loadmore__btn {
    display: inline-block;
    background: transparent;
    border: 2px solid var(--cesp-red);
    color: var(--cesp-red);
    font-family: var(--cesp-font);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 12px 40px;
    border-radius: var(--cesp-radius-sm);
    cursor: pointer;
    transition: var(--cesp-transition);
    letter-spacing: 0.03em;
}
.bridge-blog-loadmore__btn:hover {
    background: var(--cesp-red);
    color: var(--cesp-white);
}
.bridge-blog-loadmore__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.bridge-blog-loadmore__btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
}
.bridge-blog-loadmore__btn.is-loading::after {
    content: ' …';
}

/*--------------------------------------------------------------
# BRIDGE RESOURCE PORTAL — /bridge/portal
# Append to style.css
--------------------------------------------------------------*/

/* ==========================================================
   BANNER
   ========================================================== */

.bridge-resource-portal-banner {
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url('https://miletestsite.com/cesp/wp-content/uploads/2026/07/Bridge-Blog-banner-scaled.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bridge-resource-portal-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 1;
}

.bridge-resource-portal-banner__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.bridge-resource-portal-banner__content h1 {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--cesp-white);
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}


/* ==========================================================
   PAGE LAYOUT — Sidebar + Content
   ========================================================== */

.bridge-portal-main {
    background: var(--cesp-white);
    padding: 40px 0 64px;
}

.bridge-portal-wrap {
    max-width: var(--cesp-max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: start;
}


/* ==========================================================
   LEFT SIDEBAR — Filters
   ========================================================== */

.bridge-portal-sidebar {
    position: sticky;
    top: 90px; /* below sticky header */
}

.bridge-portal-filters { margin: 0; }

/* "FILTER RESOURCES" heading */
.bridge-filter__heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesp-red);
    margin: 0 0 20px;
}

/* Each filter group */
.bridge-filter-section {
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cesp-border);
}
.bridge-filter-section:last-of-type {
    border-bottom: none;
}

/* Section title */
.bridge-filter-section__title {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--cesp-red);
    margin: 0 0 10px;
    letter-spacing: 0.01em;
    text-transform: none;
}

.bridge-filter-section__title--bold {
    font-weight: 700;
    color: var(--cesp-dark);
}

/* ── Radio buttons (Resource Area) ── */
.bridge-filter-radio-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bridge-filter-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--cesp-text);
    line-height: 1.3;
}

.bridge-filter-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--cesp-red);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    width: auto;
}

.bridge-filter-radio input[type="radio"]:focus {
    outline: 2px solid var(--cesp-red);
    outline-offset: 1px;
    box-shadow: none;
}

/* ── Checkbox list (Audience, Language) ── */
.bridge-filter-checkbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bridge-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--cesp-text);
    line-height: 1.3;
}

.bridge-filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--cesp-red);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    width: auto;
}

.bridge-filter-checkbox input[type="checkbox"]:focus {
    outline: 2px solid var(--cesp-red);
    outline-offset: 1px;
    box-shadow: none;
}

/* ── Pill tags (Type, Topic) ── */
.bridge-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bridge-filter-pill {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--cesp-text);
    background: var(--cesp-white);
    border: 1px solid #cccccc;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;
    user-select: none;
}

.bridge-filter-pill:hover {
    border-color: var(--cesp-red);
    color: var(--cesp-red);
    background: rgba(204,0,51,0.04);
}

.bridge-filter-pill.is-active {
    background: var(--cesp-red);
    border-color: var(--cesp-red);
    color: var(--cesp-white);
}

.bridge-filter-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Clear all filters link */
.bridge-filter-clear-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cesp-text-muted);
    text-decoration: none;
    border: 1px solid var(--cesp-border);
    border-radius: 100px;
    padding: 4px 12px;
    transition: var(--cesp-transition);
}
.bridge-filter-clear-link:hover {
    color: var(--cesp-red);
    border-color: var(--cesp-red);
    text-decoration: none;
}

/* No-JS submit button */
.bridge-filter-submit {
    display: none;
}
.no-js .bridge-filter-submit {
    display: inline-block;
    margin-top: 12px;
}


/* ==========================================================
   RIGHT CONTENT — 3-col card grid
   ========================================================== */

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

/* ── Resource card ── */
.bridge-portal-card {
    display: flex;
    flex-direction: column;
    background: var(--cesp-white);
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bridge-portal-card:hover {
    box-shadow: var(--cesp-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Thumbnail with type badge overlay */
.bridge-portal-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 15 / 10;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
}
.bridge-portal-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    display: block;
    transition: transform 0.35s ease;
}
.bridge-portal-card:hover .bridge-portal-card__thumb img {
    transform: scale(1.04);
}

.bridge-portal-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c8d8e4, #b0c8d8);
}

/* Type badge — bottom-right of image */
.bridge-portal-card__type {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cesp-white);
    background: rgba(0,0,0,0.65);
    padding: 3px 8px;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card body */
.bridge-portal-card__body {
    padding: 12px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bridge-portal-card__title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0;
    line-height: 1.35;
}
.bridge-portal-card:hover .bridge-portal-card__title {
    color: var(--cesp-red);
}

.bridge-portal-card__teaser {
    font-size: 0.78rem;
    color: var(--cesp-text-light);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

.bridge-portal-pagination {
    margin-top: 36px;
}

.bridge-portal-pagination ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bridge-portal-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--cesp-text);
    text-decoration: none;
    transition: var(--cesp-transition);
    background: var(--cesp-white);
}

.bridge-portal-pagination .page-numbers:hover {
    border-color: var(--cesp-red);
    color: var(--cesp-red);
}

.bridge-portal-pagination .page-numbers.current {
    background: var(--cesp-red);
    border-color: var(--cesp-red);
    color: var(--cesp-white);
    font-weight: 700;
}

.bridge-portal-pagination .page-numbers.dots {
    border: none;
    background: none;
    cursor: default;
}

.bridge-portal-pagination .page-numbers.prev,
.bridge-portal-pagination .page-numbers.next {
    font-size: 1rem;
    font-weight: 400;
}

/* No results */
.bridge-portal-no-results {
    padding: 48px 0;
    text-align: center;
}
.bridge-portal-no-results p {
    font-size: 1rem;
    color: var(--cesp-text-muted);
    margin-bottom: 16px;
}

/*--------------------------------------------------------------
# BRIDGE HOME PAGE
# Append to style.css
--------------------------------------------------------------*/

/* ==========================================================
   SHARED — section wrapper
   ========================================================== */

.bridge-home-section {
    padding: 56px 0;
}

.bridge-home-section--gray {
    background: #f5f5f5;
}

.bridge-home-section--dark {
    background: #1a1a1a;
    color: var(--cesp-white);
}

.bridge-home-section__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cesp-red);
    margin: 0 0 8px;
    display: block;
}

.bridge-home-section__title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--cesp-dark);
}

.bridge-home-section__desc {
    font-size: 0.92rem;
    color: var(--cesp-text-light);
    line-height: 1.75;
    max-width: 680px;
    margin: 0 0 32px;
}

.bridge-home-empty {
    font-size: 0.88rem;
    color: var(--cesp-text-muted);
    font-style: italic;
    padding: 24px 0;
}


/* ==========================================================
   BRIDGE SLIDER — Major Focus Areas & Featured Opportunities
   Reuses .cesp-hero carousel pattern but in a content section
   ========================================================== */

.bridge-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.bridge-slider__track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.bridge-slider__slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
}

/* Slide inner layout: image left, content right */
.bridge-slider__slide-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 280px;
}

.bridge-slider__image {
    width: 100%;
    height: 100%;
    min-height: 260px;
    overflow: hidden;
}

.bridge-slider__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

.bridge-slider__content {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--cesp-white);
}

.bridge-slider__content .bridge-home-section__label {
    margin-bottom: 6px;
}

.bridge-slider__content h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0 0 14px;
    line-height: 1.3;
}

.bridge-slider__content p {
    font-size: 0.88rem;
    color: var(--cesp-text-light);
    line-height: 1.75;
    margin: 0 0 20px;
}

.bridge-slider__content a.cesp-btn {
    align-self: flex-start;
}

/* Navigation arrows */
.bridge-slider__arrows {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.bridge-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--cesp-red);
    border-radius: 50%;
    background: transparent;
    color: var(--cesp-red);
    cursor: pointer;
    font-size: 1.1rem;
    transition: var(--cesp-transition);
    padding: 0;
    font-family: inherit;
    line-height: 1;
}

.bridge-slider__arrow:hover {
    background: var(--cesp-red);
    color: var(--cesp-white);
}

/* Dots */
.bridge-slider__dots {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    align-items: center;
}

.bridge-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cesp-border);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}

.bridge-slider__dot.is-active {
    background: var(--cesp-red);
    width: 10px;
    height: 10px;
}


/* ==========================================================
   UPCOMING EVENTS
   ========================================================== */

.bridge-home-events {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bridge-home-event-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    align-items: center;
    text-decoration: none;
    padding: 16px;
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    background: var(--cesp-white);
    transition: var(--cesp-transition);
}

.bridge-home-event-card:hover {
    box-shadow: var(--cesp-shadow-sm);
    border-color: var(--cesp-red);
    text-decoration: none;
}

.bridge-home-event-card__thumb {
    width: 100px;
    height: 60px;
    overflow: hidden;
    border-radius: 2px;
    flex-shrink: 0;
}

.bridge-home-event-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

.bridge-home-event-card__date {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cesp-red);
    display: block;
    margin-bottom: 4px;
}

.bridge-home-event-card__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0 0 4px;
    line-height: 1.35;
}

.bridge-home-event-card__location {
    font-size: 0.78rem;
    color: var(--cesp-text-muted);
}

.bridge-home-events__cta {
    margin-top: 8px;
}


/* ==========================================================
   FEATURED RESOURCES
   ========================================================== */

.bridge-home-resources__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.bridge-home-resource-card {
    display: flex;
    flex-direction: column;
    background: var(--cesp-white);
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: var(--cesp-transition);
}

.bridge-home-resource-card:hover {
    box-shadow: var(--cesp-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

.bridge-home-resource-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 15 / 10;
    overflow: hidden;
    background: #d8e4ec;
}

.bridge-home-resource-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    transition: transform 0.35s ease;
}

.bridge-home-resource-card:hover .bridge-home-resource-card__thumb img {
    transform: scale(1.04);
}

.bridge-home-resource-card__type {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cesp-white);
    background: rgba(0,0,0,0.65);
    padding: 3px 8px;
}

.bridge-home-resource-card__body {
    padding: 12px 14px 16px;
}

.bridge-home-resource-card__title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0;
    line-height: 1.35;
}

.bridge-home-resource-card:hover .bridge-home-resource-card__title {
    color: var(--cesp-red);
}

.bridge-home-resources__cta {
    margin-top: 8px;
    text-align:center;
}


/* ==========================================================
   FROM THE BLOG
   ========================================================== */

.bridge-home-blog__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.bridge-home-blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: var(--cesp-transition);
}

.bridge-home-blog-card:hover { text-decoration: none; }

.bridge-home-blog-card__thumb {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--cesp-radius-sm);
    background: #e0e0e0;
    margin-bottom: 10px;
}

.bridge-home-blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    transition: transform 0.35s ease;
}

.bridge-home-blog-card:hover .bridge-home-blog-card__thumb img {
    transform: scale(1.04);
}

.bridge-home-blog-card__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cesp-red);
    text-transform: none;
    margin-bottom: 4px;
}

.bridge-home-blog-card__title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0;
    line-height: 1.35;
}

.bridge-home-blog-card:hover .bridge-home-blog-card__title {
    color: var(--cesp-red);
}

.bridge-home-blog__cta {
    margin-top: 16px;
}

/*--------------------------------------------------------------
# BRIDGE EVENTS ARCHIVE — /bridge/events
# Append to style.css
--------------------------------------------------------------*/

/* ==========================================================
   BANNER
   ========================================================== */

.bridge-events-banner {
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url('https://miletestsite.com/cesp/wp-content/uploads/2026/07/Bridge-Blog-banner-scaled.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bridge-events-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    z-index: 1;
}

.bridge-events-banner__content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.bridge-events-banner__content h1 {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--cesp-white);
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}


/* ==========================================================
   SHARED — label + empty
   ========================================================== */

.bridge-events-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesp-red);
    margin: 0 0 20px;
    display: block;
}

.bridge-events-label--centered {
    text-align: center;
}

.bridge-events-empty {
    font-size: 0.88rem;
    color: var(--cesp-text-muted);
    font-style: italic;
    margin: 0;
    padding: 8px 0;
}


/* ==========================================================
   UPCOMING EVENTS — gray bg + white bordered box
   ========================================================== */

.bridge-events-upcoming {
    background: #f2f2f2;
    padding: 40px 0 48px;
}

.bridge-events-upcoming__box {
    background: var(--cesp-white);
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    padding: 28px 32px 32px;
    max-width: 900px;
    margin: 0 auto;
}


/* ==========================================================
   PAST EVENTS — white bg + centered header
   ========================================================== */

.bridge-events-past {
    background: var(--cesp-white);
    padding: 48px 0 64px;
}

.bridge-events-past__desc {
    font-size: 0.88rem;
    color: var(--cesp-text-light);
    line-height: 1.75;
    text-align: center;
    max-width: 680px;
    margin: 0 auto 32px;
}


/* ==========================================================
   EVENT CARD — shared between upcoming + past
   ========================================================== */

.bridge-events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 8px;
}

.bridge-event-card {
    display: flex;
    flex-direction: column;
    background: var(--cesp-white);
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bridge-event-card:hover {
    box-shadow: var(--cesp-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Thumbnail with date badge */
.bridge-event-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 15 / 10;
    overflow: hidden;
    background: #d0d8e0;
    flex-shrink: 0;
}

.bridge-event-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    display: block;
    transition: transform 0.35s ease;
}

.bridge-event-card:hover .bridge-event-card__thumb img {
    transform: scale(1.04);
}

.bridge-event-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c8d8e8, #b0c8d8);
}

/* Red date badge — bottom-left of image (matching screenshot) */
.bridge-event-card__date {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cesp-white);
    background: var(--cesp-red);
    padding: 4px 10px;
    line-height: 1.5;
    white-space: nowrap;
}

/* Card body */
.bridge-event-card__body {
    padding: 14px 16px 18px;
    flex: 1;
}

.bridge-event-card__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0;
    line-height: 1.4;
}

.bridge-event-card:hover .bridge-event-card__title {
    color: var(--cesp-red);
}

.bridge-info-bar p{
    margin-bottom:0;
}

/* ── Page Banner ── */
.cesp-archive-banner {
    background-image: url('https://miletestsite.com/cesp/wp-content/uploads/2026/07/header-banner-new.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cesp-archive-banner h1 {
    color: #ffffff;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
    padding: 30px 20px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

/* ── Posts Container ── */
.cesp-archive-wrap {
    max-width: 860px;
    margin: 50px auto 60px;
    padding: 0 20px;
}

/* ── Single Post Card ── */
.cesp-news-card-archive {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-bottom: 0;
    border: 1px solid #e0e0e0;
    background: #fff;
    margin-bottom: 20px;
}

.cesp-news-card__thumb {
    flex: 0 0 190px;
    width: 190px;
    min-height: 170px;
    overflow: hidden;
    background: #c8c8c8;
}

.cesp-news-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cesp-news-card__thumb .cesp-no-image {
    width: 100%;
    height: 100%;
    min-height: 170px;
    background: #b0b7c3;
    display: block;
}

.cesp-news-card__body {
    flex: 1;
    padding: 22px 28px 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.cesp-news-card__date {
    font-size: 0.78rem;
    color: #cc0033;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.cesp-news-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
    line-height: 1.35;
}

.cesp-news-card__title a {
    color: inherit;
    text-decoration: none;
}

.cesp-news-card__title a:hover {
    color: #cc0033;
}

.cesp-news-card__excerpt {
    font-size: 0.88rem;
    color: #444;
    line-height: 1.65;
    margin-bottom: 14px;
    flex: 1;
}

.cesp-news-card__readmore {
    font-size: 0.84rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cesp-news-card__readmore:hover {
    color: #cc0033;
}

.cesp-news-card__readmore::after {
    content: '›';
    font-size: 1.1rem;
    line-height: 1;
}

/* ── Load More ── */
.cesp-loadmore-wrap {
    text-align: center;
    margin-top: 40px;
}

#cesp-load-more {
    display: inline-block;
    background: #1a1a1a;
    color: #fff;
    border: none;
    padding: 13px 44px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease;
}

#cesp-load-more:hover { background: #cc0033; }
#cesp-load-more:disabled { background: #aaa; cursor: not-allowed; }

.cesp-no-more {
    font-size: 0.88rem;
    color: #888;
    margin-top: 10px;
}

/* Fix SVG images showing as invisible */
img[src$=".svg"] {
    width: 100%;
    height: auto;
}

/* ==========================================================
   MOBILE NAV ACCORDION — + / - toggle
   ========================================================== */

/* Row wrapping link + toggle button */
.mobile-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cesp-border);
}

/* Remove border from li since row handles it */
.mobile-nav .menu-item-has-children,
.mobile-nav--bridge .menu-item-has-children {
    border-bottom: none;
}

/* Link inside row takes all space */
.mobile-nav-row > a {
    flex: 1;
    border-bottom: none !important;
}

/* + / - toggle button */
.mobile-nav-toggle {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--cesp-border);
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--cesp-text-muted);
    transition: color 0.2s ease, background 0.2s ease;
    padding: 0;
    line-height: 1;
}

.mobile-nav-toggle:hover {
    color: var(--cesp-red);
    background: #fafafa;
}

.menu-item-has-children.is-open > .mobile-nav-row .mobile-nav-toggle {
    color: var(--cesp-red);
}

/* Submenu hidden by default — JS controls height */
.mobile-nav .sub-menu,
.mobile-nav--bridge .sub-menu {
    display: block;
    height: 0;
    overflow: hidden;
    background: #f9f9f9;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav .sub-menu li,
.mobile-nav--bridge .sub-menu li {
    border-bottom: 1px solid #f0f0f0;
    display: block;
}

.mobile-nav .sub-menu li a,
.mobile-nav--bridge .sub-menu li a {
    display: block !important;
    padding: 11px 20px 11px 36px !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: var(--cesp-text-light) !important;
}

.mobile-nav .sub-menu li a:hover,
.mobile-nav--bridge .sub-menu li a:hover {
    color: var(--cesp-red) !important;
}

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

.cesp-404-main {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
}

.cesp-404-wrap {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.cesp-404-number {
    font-size: 9rem;
    font-weight: 800;
    color: var(--cesp-red);
    line-height: 1;
    letter-spacing: -4px;
}

.cesp-404-divider {
    width: 60px;
    height: 4px;
    background: var(--cesp-red);
    margin: 16px auto 28px;
}

.cesp-404-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0 0 14px;
}

.cesp-404-desc {
    font-size: 0.95rem;
    color: var(--cesp-text-light);
    line-height: 1.75;
    margin: 0 0 36px;
}

.cesp-404-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.cesp-404-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cesp-404-links {
    border-top: 1px solid var(--cesp-border);
    padding-top: 32px;
}

.cesp-404-links__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesp-text-muted);
    margin: 0 0 16px;
}

.cesp-404-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.cesp-404-pill {
    font-size: 0.85rem;
    color: var(--cesp-red);
    text-decoration: none;
    padding: 6px 16px;
    border: 1px solid var(--cesp-border);
    border-radius: 100px;
    transition: var(--cesp-transition);
}

.cesp-404-pill:hover {
    border-color: var(--cesp-red);
    background: #fff5f7;
    text-decoration: none;
}

@media screen and (max-width: 480px) {
    .cesp-404-number { font-size: 6rem; }
    .cesp-404-title  { font-size: 1.3rem; }
    .cesp-404-actions { flex-direction: column; align-items: center; }
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .cesp-news-card-archive {
        flex-direction: column;
    }
    .cesp-news-card__thumb {
        width: 100%;
        flex: none;
        height: 200px;
        min-height: unset;
    }
    .cesp-news-card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .cesp-news-card__body {
        padding: 16px;
    }
    .cesp-news-card__title {
        font-size: 1rem;
    }
    .cesp-archive-banner h1 {
        font-size: 1.8rem;
    }
}

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

@media screen and (max-width: 900px) {
    .bridge-events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .apt-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pricing-table table {
        min-width: 600px;
        table-layout: auto;
    }

    .pricing-table td:nth-child(1), .pricing-table th:nth-child(1) { width: auto; min-width: 60px; }
    .pricing-table td:nth-child(2), .pricing-table th:nth-child(2) { width: auto; min-width: 160px; }
    .pricing-table td:nth-child(3), .pricing-table th:nth-child(3) { width: auto; min-width: 140px; }
    .pricing-table td:nth-child(4), .pricing-table th:nth-child(4) { width: auto; min-width: 160px; }
    .pricing-table td:nth-child(5), .pricing-table th:nth-child(5) { width: auto; min-width: 200px; }
}

@media screen and (max-width: 768px) {
    .bridge-events-banner { height: 140px; }
    .bridge-events-banner__content h1 { font-size: 1.8rem; }

    .bridge-events-upcoming__box {
        padding: 20px 18px 24px;
    }

    .bridge-events-upcoming { padding: 28px 0 36px; }
    .bridge-events-past     { padding: 36px 0 48px; }
}

@media screen and (max-width: 540px) {
    .bridge-events-grid {
        grid-template-columns: 1fr;
    }

    .bridge-events-banner__content h1 { font-size: 1.5rem; }
}


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

@media screen and (max-width: 1024px) {
    .bridge-home-blog__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .bridge-slider__slide-inner {
        grid-template-columns: 1fr;
    }

    .bridge-slider__image {
        min-height: 200px;
        height: 200px;
    }

    .bridge-slider__content {
        padding: 28px 24px;
    }

    .bridge-home-resources__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bridge-home-blog__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bridge-home-event-card {
        grid-template-columns: 80px 1fr;
    }
}

@media screen and (max-width: 480px) {
    .bridge-home-resources__grid,
    .bridge-home-blog__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   BRIDGE HOME — About box (white bordered card)
   ========================================================== */

.bridge-home-about-box {
    max-width: 980px;
    margin: 0 auto;
    background: var(--cesp-white);
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    padding: 20px 20px;
    background: #efefef;
    border-radius:20px;
}

.bridge-home-about-box-inner {
    background: var(--cesp-white);
    padding: 36px 40px;
    border-radius:20px;    
}

.bridge-home-about-box__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesp-red);
    margin: 0 0 12px;
}

.bridge-home-about-box__heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0 0 16px;
    line-height: 1.3;
}

.bridge-home-about-box__intro {
    font-size: 0.88rem;
    color: var(--cesp-text);
    line-height: 1.75;
    margin: 0 0 28px;
}

.bridge-home-about-box__body {
    font-size: 0.88rem;
    color: var(--cesp-text);
    line-height: 1.75;
    margin: 28px 0 20px;
}

/* 3 icon row inside about box */
.bridge-home-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
    margin-bottom: 8px;
}

.bridge-home-icon-item img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 0 auto 12px;
}

.bridge-home-icon-item p {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cesp-text);
    margin: 0;
    line-height: 1.5;
}

.bridge-home-icon-item p a {
    color: var(--cesp-text);
    text-decoration: none;
}

.bridge-home-icon-item p a:hover { color: var(--cesp-red); }

/* ==========================================================
   BRIDGE HOME — Upcoming Events (centered, text only)
   ========================================================== */

.bridge-home-events-wrap {
    text-align: center;
}

.bridge-home-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cesp-red);
    margin: 0 0 12px;
    display: block;
    text-align:center;
}

.bridge-home-events-desc {
    font-size: 0.88rem;
    color: var(--cesp-text-light);
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto 16px;
}

.bridge-home-seeall-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cesp-dark);
    text-decoration: none;
    display: inline-block;
}

.bridge-home-seeall-link:hover { color: var(--cesp-red); }

/* ==========================================================
   BRIDGE HOME — Focus Areas + Quick Access (2-col row)
   ========================================================== */

.bridge-home-focus-row {
    align-items: start;
        max-width: 980px;
    margin: 0 auto;
}

.bridge-home-focus-left{
    padding: 25px;
    background-color: #efefef;
    border-radius: 20px;
}

.bridge-home-focus-right{
    padding: 25px;
    background-color: #efefef;
    border-radius: 20px;
}

.bridge-home-blog-col{
    padding: 25px;
    background-color: #efefef;
    border-radius: 20px;    
}

.bridge-home-opps-col{
    padding: 25px;
    background-color: #efefef;
    border-radius: 20px;      
}

/* Slider in this layout: image on top, caption below */
.bridge-slider__slide-stacked { display: flex; flex-direction: column; }

.bridge-slider__image-sq {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #d0d0d0;
}

.bridge-slider__image-sq img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    display: block;
}

.bridge-slider__caption {
    padding: 16px 0 8px;
}

.bridge-slider__caption h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cesp-dark);
    margin: 0 0 10px;
    line-height: 1.35;
}

.bridge-slider__caption h3 a { color: inherit; text-decoration: none; }
.bridge-slider__caption h3 a:hover { color: var(--cesp-red); }

.bridge-slider__caption p {
    font-size: 0.85rem;
    color: var(--cesp-text-light);
    line-height: 1.7;
    margin: 0;
}

.bridge-slider__caption p a{
    color: var(--cesp-text-light);    
}

/* Slider controls row */
.bridge-slider__controls {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* ==========================================================
   BRIDGE HOME — Quick Access vertical list
   ========================================================== */

.bridge-quick-access {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.bridge-quick-access__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--cesp-white);
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    text-decoration: none;
    transition: var(--cesp-transition);
}

.bridge-quick-access__item:hover {
    border-color: var(--cesp-red);
    box-shadow: var(--cesp-shadow-sm);
    text-decoration: none;
}

.bridge-quick-access__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bridge-quick-access__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
}

.bridge-quick-access__label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cesp-dark);
    line-height: 1.3;
}

/* ==========================================================
   BRIDGE HOME — Featured Resources (centered)
   ========================================================== */

.bridge-home-resources-wrap { text-align: center; }

.bridge-home-resources-desc {
    font-size: 0.88rem;
    color: var(--cesp-text-light);
    line-height: 1.75;
    max-width: 680px;
    margin: 0 auto 8px;
}

/* Override shortcode grid to match screenshot style */
.bridge-home-resources-wrap .bridge-home-resources__grid {
    text-align: left;
}

/* ==========================================================
   BRIDGE HOME — Blog + Opportunities (2-col bottom row)
   ========================================================== */

.bridge-home-bottom-row {
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}

/* Blog: tag + title stacked list (no images) */
.bridge-home-blog-col .bridge-home-blog__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--cesp-radius-sm);
    overflow: hidden;
    gap: 10px;
}

.bridge-home-blog-col .bridge-home-blog-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cesp-border);
    text-decoration: none;
    border-radius: 20px;
    background: #fff;
}

.bridge-home-resources{
    max-width: 980px;
    margin: 0 auto;
}

.bridge-home-blog-col .bridge-home-blog-card:last-child { border-bottom: none; }
.bridge-home-blog-col .bridge-home-blog-card:hover { background: #fafafa; text-decoration: none; }

.bridge-home-blog-col .bridge-home-blog-card__thumb { display: none; } /* hide images in list view */

.bridge-home-blog-col .bridge-home-blog-card__tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cesp-red);
    margin-bottom: 2px;
}

.bridge-home-blog-col .bridge-home-blog-card__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cesp-dark);
    margin: 0;
    line-height: 1.35;
}

.bridge-home-blog-col .bridge-home-blog-card:hover .bridge-home-blog-card__title {
    color: var(--cesp-red);
}

.bridge-home-blog-col .bridge-home-blog__cta {
    margin-top: 12px;
}

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

@media screen and (max-width: 1024px) {
    .bridge-home-focus-row { grid-template-columns: 1fr 260px; gap: 28px; }
    .bridge-home-bottom-row { grid-template-columns: 260px 1fr; gap: 28px; }
}

@media screen and (max-width: 768px) {
    .bridge-home-about-box { padding: 24px 20px; }
    .bridge-home-icons { grid-template-columns: 1fr; gap: 20px; }
    .bridge-home-focus-row { grid-template-columns: 1fr; }
    .bridge-home-bottom-row { grid-template-columns: 1fr; }
    .bridge-slider__image-sq { height: 180px; }
}

@media screen and (max-width: 480px) {
    .bridge-home-about-box { padding: 20px 10px; }
}


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

@media screen and (max-width: 1024px) {
    .bridge-portal-wrap {
        grid-template-columns: 190px 1fr;
        gap: 32px;
    }

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

@media screen and (max-width: 768px) {
    .bridge-resource-portal-banner { height: 140px; }
    .bridge-resource-portal-banner__content h1 { font-size: 1.8rem; }

    /* Stack sidebar above grid on mobile */
    .bridge-portal-wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bridge-portal-sidebar {
        position: static;
    }

    /* Collapse filters into horizontal pills on mobile */
    .bridge-filter-radio-list,
    .bridge-filter-checkbox-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .bridge-filter-radio,
    .bridge-filter-checkbox {
        border: 1px solid var(--cesp-border);
        border-radius: 100px;
        padding: 4px 10px;
        font-size: 0.78rem;
    }

    .bridge-portal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media screen and (max-width: 480px) {
    .bridge-portal-grid {
        grid-template-columns: 1fr;
    }

    .bridge-resource-portal-banner__content h1 { font-size: 1.5rem; }
}

/* ==========================================================
   AJAX — Loading spinner + active checkbox styles
   ========================================================== */

/* Loading overlay */
.bridge-portal-loading {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    margin-bottom: -20px;
}

.bridge-portal-loading[aria-hidden="false"] {
    display: flex;
}

.bridge-portal-loading__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--cesp-border);
    border-top-color: var(--cesp-red);
    border-radius: 50%;
    animation: bridge-spin 0.7s linear infinite;
}

@keyframes bridge-spin {
    to { transform: rotate(360deg); }
}

/* Grid fade during loading */
.bridge-portal-grid {
    transition: opacity 0.2s ease;
}

/* Results count */
.bridge-portal-count {
    font-size: 0.82rem;
    color: var(--cesp-text-muted);
    margin: 0 0 12px;
    min-height: 1.2em;
}

/* Active state for radio labels */
.bridge-filter-radio.is-active span {
    font-weight: 700;
    color: var(--cesp-dark);
}

/* Active state for checkbox labels */
.bridge-filter-checkbox.is-active span {
    font-weight: 700;
    color: var(--cesp-dark);
}

/* Clear all button */
.bridge-filter-clear-btn {
    display: none;
    margin-top: 16px;
    font-family: var(--cesp-font);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cesp-text-muted);
    background: transparent;
    border: 1px solid var(--cesp-border);
    border-radius: 100px;
    padding: 5px 14px;
    cursor: pointer;
    transition: var(--cesp-transition);
    width: 100%;
    text-align: center;
}
.bridge-filter-clear-btn:hover {
    color: var(--cesp-red);
    border-color: var(--cesp-red);
}

/* Pagination — AJAX page buttons */
.bridge-portal-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.bridge-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--cesp-border);
    border-radius: var(--cesp-radius-sm);
    background: var(--cesp-white);
    font-family: var(--cesp-font);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--cesp-text);
    cursor: pointer;
    transition: var(--cesp-transition);
}
.bridge-page-btn:hover {
    border-color: var(--cesp-red);
    color: var(--cesp-white);
}
.bridge-page-btn.is-active {
    background: var(--cesp-red);
    border-color: var(--cesp-red);
    color: var(--cesp-white);
    font-weight: 700;
}
.bridge-page-btn--arrow {
    font-size: 1.1rem;
    font-weight: 400;
    padding: 0 10px;
}
.bridge-page-dots {
    font-size: 0.88rem;
    color: var(--cesp-text-muted);
    padding: 0 4px;
}


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

@media screen and (max-width: 1024px) {
    .bridge-portal-wrap {
        grid-template-columns: 190px 1fr;
        gap: 32px;
    }

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

@media screen and (max-width: 768px) {
    .bridge-resource-portal-banner { height: 140px; }
    .bridge-resource-portal-banner__content h1 { font-size: 1.8rem; }

    /* Stack sidebar above grid on mobile */
    .bridge-portal-wrap {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bridge-portal-sidebar {
        position: static;
    }

    /* Collapse filters into horizontal pills on mobile */
    .bridge-filter-radio-list,
    .bridge-filter-checkbox-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .bridge-filter-radio,
    .bridge-filter-checkbox {
        border: 1px solid var(--cesp-border);
        border-radius: 100px;
        padding: 4px 10px;
        font-size: 0.78rem;
    }

    .bridge-portal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media screen and (max-width: 480px) {
    .bridge-portal-grid {
        grid-template-columns: 1fr;
    }

    .bridge-resource-portal-banner__content h1 { font-size: 1.5rem; }
}


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

@media screen and (max-width: 768px) {
    .bridge-blog-banner { height: 140px; }
    .bridge-blog-banner__title { font-size: 1.8rem; }

    /* Stack featured + latest vertically */
    .bridge-blog-top__container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 2-col card grid */
    .bridge-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media screen and (max-width: 540px) {
    /* 1-col card grid */
    .bridge-blog-grid { grid-template-columns: 1fr; }

    .bridge-blog-banner__title { font-size: 1.5rem; }
}


/* ==========================================================
   RESPONSIVE — BRIDGE header + footer
   ========================================================== */

/* Tablet */
@media screen and (max-width: 1024px) {
    .bridge-nav__list > li > a { padding: 4px 12px; font-size: 0.92rem; }
}

/* Mobile nav breakpoint */
@media screen and (max-width: 860px) {
    .bridge-header__inner { min-height: 60px; padding: 0 16px; align-items: center; }
    .bridge-header__right { flex-direction: row; align-items: center; justify-content: flex-end; padding: 0; }
    .bridge-header__utility { display: none; }
    .bridge-nav { display: none; }
    .bridge-menu-toggle { display: flex; }
    .bridge-branding__name { font-size: 0.95rem; }
    .bridge-branding__sub { font-size: 0.8rem; }
}

/* Mobile footer */
@media screen and (max-width: 768px) {
    .bridge-footer__top-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .bridge-footer__col--right {
        justify-content: flex-start;
    }

    .bridge-footer__top { padding: 32px 0 28px; }
}

/* Small mobile */
@media screen and (max-width: 480px) {
    .bridge-branding__name { font-size: 1.2rem; }
    .bridge-header__inner { padding: 0 12px; }

    .bridge-footer__legal { font-size: 0.74rem; }
    .bridge-footer__copyright { font-size: 0.74rem; }
}


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

@media screen and (max-width: 768px) {
    .cesp-bridge-resource-banner {
        min-height: 160px;
    }

    .cesp-bridge-resource-banner__box {
        padding: 20px 24px;
    }

    .cesp-bridge-resource-banner__title {
        font-size: 1.3rem;
    }

    .cesp-bridge-resource-main {
        padding: 32px 0 48px;
    }

    .cesp-bridge-resource-desc-box {
        padding: 22px 20px;
    }

    .cesp-bridge-resource-content-box {
        padding: 24px 20px;
    }
}

@media screen and (max-width: 480px) {
    .cesp-bridge-resource-banner__title {
        font-size: 1.1rem;
    }

    .cesp-bridge-resource-banner__box {
        padding: 16px 18px;
    }

    .cesp-bridge-resource-share .cesp-share-icon {
        width: 36px;
        height: 36px;
    }
}

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

@media screen and (max-width: 768px) {
    .cesp-bridge-blog-banner {
        min-height: 280px;
    }

    .cesp-bridge-blog-banner__box {
        padding: 24px 22px;
        max-width: 100%;
    }

    .cesp-bridge-blog-banner__title {
        font-size: 1.35rem;
    }

    .cesp-bridge-blog-main {
        padding: 36px 0 48px;
    }

    .cesp-bridge-blog-share {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 480px) {
    .cesp-bridge-blog-banner__title {
        font-size: 1.15rem;
    }

    .cesp-bridge-blog-banner__box {
        padding: 20px 16px;
    }

    .cesp-share-icon {
        width: 32px;
        height: 32px;
    }
}


/* ============================================================
   RESPONSIVE — Tablet (max-width: 1100px)
   ============================================================ */

@media screen and (max-width: 1100px) {
    .main-navigation .primary-nav > li > a { padding: 6px 10px; font-size: 0.88rem; }
}


/* ============================================================
   RESPONSIVE — Mobile nav breakpoint (max-width: 900px)
   ============================================================ */

@media screen and (max-width: 900px) {
    .site-header__inner { min-height: 64px; padding: 0 16px; align-items: center; }
    .site-header__right { flex-direction: row; align-items: center; justify-content: flex-end; padding: 0; }
    .site-header__utility { display: none; }
    .main-navigation { display: none; }
    .menu-toggle { display: flex; }
    .site-branding .custom-logo,
    .site-logo-fallback { max-height: 48px; }
}


/* ============================================================
   RESPONSIVE — Mobile (max-width: 768px)
   ============================================================ */

@media screen and (max-width: 768px) {
    :root {
        --cesp-section-pad: 48px;
        --cesp-nav-height: 60px;
    }

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }

    /* Page banner */
    .cesp-page-banner { min-height: 100px; }
    .cesp-page-banner h1 { font-size: 1.8rem; letter-spacing: 0.06em; }
    .cesp-page-main { padding: 36px 0 48px; }

    /* Person banner */
    .cesp-person-banner__name { font-size: 1.6rem; }
    .cesp-person-banner__role { font-size: 0.92rem; }

    /* Hero */
    .cesp-hero { height: auto; min-height: 360px; }
    .cesp-hero__slides { min-height: 450px; }
    .cesp-hero__content-box {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 48px;
        width: auto;
        transform: none;
        padding: 20px 18px;
    }
    .cesp-hero__content-box--centered {
        left: 16px;
        right: 16px;
        transform: none;
        width: auto;
        text-align: left;
    }
    .cesp-hero__content-box--centered .cesp-hero__buttons {
        justify-content: flex-start;
    }
    .cesp-hero__title { font-size: 1.15rem; }
    .cesp-hero__subtitle { font-size: 0.85rem; }
    .cesp-hero__desc { font-size: 0.88rem; }
    .cesp-hero__badge { font-size: 0.78rem; padding: 4px 12px; width: 50%;
        top: -28px;}
    .cesp-btn--dark, .cesp-btn--outline { padding: 8px 14px; font-size: 0.8rem; }

    /* Intro icons: 2 col */
    .cesp-services-icons__grid { grid-template-columns: repeat(2, 1fr); }
    
        .cesp-services-icons__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Projects: stack */
    .cesp-projects__inner { grid-template-columns: 1fr; }
    .cesp-projects__left { padding: 36px 24px; }
    .cesp-projects__right { padding: 24px; background: var(--cesp-white); }
    .cesp-projects__grid { grid-template-columns: 1fr; }

    /* News: 1 col */
    .cesp-news__grid { grid-template-columns: 1fr; }

    /* Services cards: 2 col */
    .cesp-services-grid__items { grid-template-columns: repeat(2, 1fr); }
    .cesp-service-card { height: 380px; }

    /* People grid */
    .cesp-people-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

    /* EIR grid */
    .cesp-eir-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .cesp-filter-group { flex-direction: column; gap: 10px; }
    .cesp-filter-group__label { min-width: auto; padding-top: 0; }

    /* Search */
    .cesp-search-main { padding: 32px 0 48px; }
    .cesp-search-form__input { font-size: 0.95rem; padding: 12px 14px; }
    .cesp-search-result__title { font-size: 1rem; }

    /* Single news */
    .cesp-news-single__hero { padding: 28px 0 24px; }
    .cesp-news-single__intro-block { grid-template-columns: 1fr; gap: 20px; }
    .cesp-news-single__article { padding: 32px 0 48px; }

    /* Footer */
    .footer-main { padding: 40px 0 32px; }
    .footer-main__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-col--brand { grid-column: 1 / -1; flex-direction: column; gap: 16px; padding-bottom: 20px; }
    .footer-col--newsletter { grid-column: 1 / -1; }
    .footer-newsletter__row { flex-direction: row; }
    .footer-newsletter__form input[type="email"] { flex: 1; }
    .footer-newsletter__form button { width: auto; white-space: nowrap; }
    .footer-bottom .cesp-container { flex-direction: column; text-align: center; }
    .wp-block-group.has-background {
    padding: 5px;
}

.wp-block-group.cesp-resources-single-box.has-background{
    padding:20px;
}

.wp-block-group.cesp-project-single-box.has-background{
    padding:20px;
}

.wp-block-group.cesp-people-single-box.has-background{
    padding:20px;
}

.wp-block-group.has-cesp-red-background-color.has-background{
    padding:20px;
}
}



/* ============================================================
   RESPONSIVE — Small (max-width: 640px)
   ============================================================ */

@media screen and (max-width: 640px) {
    /* Floating images in news */
    .cesp-news-single__content .wp-block-image.alignright,
    .cesp-news-single__content .wp-block-image.alignleft,
    .cesp-news-single__content .wp-block-image figure.alignright,
    .cesp-news-single__content .wp-block-image figure.alignleft {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
    }

    /* Person layout: single col */
    .cesp-person-layout { grid-template-columns: 1fr; gap: 28px; }
    .cesp-person-photo img { max-width: 220px; }
    
    .bridge-home-about-box-inner {
    padding: 20px 20px;
}
}


/* ============================================================
   RESPONSIVE — XSmall (max-width: 540px)
   ============================================================ */

@media screen and (max-width: 540px) {
    /* Services: 1 col */
    .cesp-services-grid__items { grid-template-columns: 1fr; }
    .cesp-service-card { height: 400px; }

    /* EIR: 1 col */
    .cesp-eir-grid { grid-template-columns: 1fr; }
    .cesp-filter-tag { font-size: 0.8rem; padding: 5px 12px; }
}


/* ============================================================
   RESPONSIVE — XSmall (max-width: 480px)
   ============================================================ */

@media screen and (max-width: 480px) {
    :root { --cesp-section-pad: 36px; }

    .container,
    .cesp-container,.partners-wrap,.cesp-person-container,.cesp-project-container { padding-left: 16px; padding-right: 16px; }

    .cesp-btn { padding: 12px 20px; font-size: 0.9rem; }

    /* Intro icons: 1 col */
    .cesp-services-icons__grid { grid-template-columns: repeat(2, 1fr); }

    /* Header logo */
    .site-header__inner { padding: 0 12px; }
    .site-branding .custom-logo,
    .site-logo-fallback { max-height: 42px; }

    /* Page banner */
    .cesp-page-banner h1 { font-size: 1.4rem; }

    /* Footer */
    .footer-main__grid { grid-template-columns: 1fr 1fr; }
    .footer-newsletter__row { flex-direction: column; }
    .footer-newsletter__form button { width: 100%; }
    .footer-bottom__inner { text-align: left; }

    /* News single */
    .cesp-news-single__title { font-size: 1.375rem; }
    .cesp-share-icon { width: 36px; height: 36px; }

    /* People grid: 2 col on small */
    .cesp-people-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media screen and (max-width: 600px) {

    /* Keep table layout — just hide columns 3 and 4 */
    .pricing-table table { display: table; width: 100%; }
    .pricing-table thead { display: table-header-group; }
    .pricing-table tbody { display: table-row-group; gap: 0; }
    .pricing-table tbody tr {
        display: table-row;
        background: none;
        border: none;
        border-radius: 0;
    }
    .pricing-table tbody tr:hover { background: #fafafa; }
    .pricing-table tbody td {
        display: table-cell;
        padding: 10px 12px;
        border-bottom: 1px solid var(--cesp-border);
        font-size: 0.85rem;
    }
    .pricing-table tbody td::before { display: none; }
    .pricing-table td a { font-size: 0.85rem; color: var(--cesp-dark); text-decoration: underline; }
    .pricing-table td a:hover { color: var(--cesp-red); }

    /* Hide Description (col 3) and Tags (col 4) */
    .pricing-table thead th:nth-child(3),
    .pricing-table thead th:nth-child(4),
    .pricing-table tbody td:nth-child(3),
    .pricing-table tbody td:nth-child(4) { display: none; }

    /* Year col — compact */
    .pricing-table thead th:nth-child(1),
    .pricing-table tbody td:nth-child(1) {
        width: 60px;
        white-space: nowrap;
    }

    /* Resource/Title col — takes remaining space */
    .pricing-table thead th:nth-child(2),
    .pricing-table tbody td:nth-child(2) { width: auto; }

    .apt-table-wrapper { overflow-x: visible; }
    .apt-pagination { margin-top: 20px; font-size: 0.9rem; }
}

@media screen and (max-width: 700px) {

    .projects-table table { display: block; width: 100%; min-width:auto;}
    .projects-table tbody td::before{
        min-width:auto;
    }

    .projects-table table tbody {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .projects-table table tbody tr {
        display: grid;
        grid-template-columns: 80px 1fr;
        background: var(--cesp-white);
        border: 1px solid var(--cesp-border);
        border-radius: var(--cesp-radius-sm);
        overflow: hidden;
        padding: 0;
    }

    .projects-table table tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / 4;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 14px 8px;
        border: none;
        border-right: 1px solid var(--cesp-border);
        background: #f5f5f5;
    }
    
    .pricing-table.projects-table td:nth-child(1), .pricing-table.projects-table th:nth-child(1) {
        width: auto;
    }

    .projects-table table tbody td:nth-child(1) img {
        width: 60px;
        height: auto;
        object-fit: contain;
        margin: 0;
    }

    .projects-table table tbody td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        padding: 12px 14px 6px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--cesp-dark);
    }

    .projects-table table tbody td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        padding: 4px 14px;
        border: none;
        font-size: 0.78rem;
        color: var(--cesp-red);
        font-weight: 700;
    }

    .projects-table table tbody td:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
        padding: 2px 14px 10px;
        border: none;
        font-size: 0.78rem;
        color: var(--cesp-text-muted);
    }

    .projects-table table tbody td:nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 4;
        padding: 10px 14px 14px;
        border: none;
        border-top: 1px solid #f0f0f0;
        font-size: 0.82rem;
        color: var(--cesp-text-light);
        line-height: 1.65;
    }

    .projects-table table tbody td a { color: inherit; text-decoration: none; }
    .projects-table table tbody td:nth-child(2) a { color: var(--cesp-dark); }
    .projects-table table tbody td:nth-child(2) a:hover { color: var(--cesp-red); }
}


/* ============================================================
   RESPONSIVE — Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================
   BRIDGE RESOURCE PORTAL — Horizontal area pills + full grid
   ========================================================== */
 
/* Area filter bar */
.bridge-portal-area-bar {
    background: #f2f2f2;
    padding: 20px 0;
    border-bottom: 1px solid var(--cesp-border);
}
 
.bridge-portal-area-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
 
.bridge-area-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    border: 2px solid var(--cesp-border);
    border-radius: 100px;
    background: var(--cesp-white);
    font-family: var(--cesp-font);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cesp-text);
    cursor: pointer;
    transition: var(--cesp-transition);
    white-space: nowrap;
}
 
.bridge-area-pill:hover {
    border-color: var(--cesp-red);
    color: var(--cesp-white);
}
 
.bridge-area-pill.is-active {
    background: var(--cesp-red);
    border-color: var(--cesp-red);
    color: var(--cesp-white);
}
 
/* Full width main — no sidebar */
.bridge-portal-main--full {
    padding: 40px 0 64px;
}
 
/* Full width grid — 4 cols instead of 3 */
.bridge-portal-grid--full {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 20px;
    margin-top: 8px;
}
 
@media screen and (max-width: 1100px) {
    .bridge-portal-grid--full { grid-template-columns: repeat( 3, 1fr ); }
}
 
@media screen and (max-width: 768px) {
    .bridge-portal-area-pills { justify-content: flex-start; }
    .bridge-portal-grid--full { grid-template-columns: repeat( 2, 1fr ); }
}
 
@media screen and (max-width: 480px) {
    .bridge-portal-grid--full { grid-template-columns: 1fr; }
    .bridge-area-pill { font-size: 0.82rem; padding: 7px 16px; }
}

/* ==========================================================
   FOOTER — Custom inner wrapper (no cesp-container)
   ========================================================== */

.footer-main-inner {
    padding: 0 50px;
    max-width: 1600px;
    margin: 0 auto;
}

.footer-main__grid {
    display: grid;
    grid-template-columns: 380px 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Large desktop — slightly tighter padding */
@media screen and (max-width: 1400px) {
    .footer-main-inner {
        padding: 0 60px;
    }
}

/* Tablet landscape — collapse to 2 cols */
@media screen and (max-width: 1100px) {
    .footer-main-inner {
        padding: 0 40px;
    }

    .footer-main__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* First col (logo/about) spans full width */
    .footer-main__grid > *:first-child {
        grid-column: 1 / -1;
    }
}

/* Tablet portrait */
@media screen and (max-width: 768px) {
    .footer-main-inner {
        padding: 0 24px;
    }

    .footer-main__grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .footer-main__grid > *:first-child {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media screen and (max-width: 480px) {
    .footer-main-inner {
        padding: 0 16px;
    }

    .footer-main__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* All cols full width on mobile */
    .footer-main__grid > *:first-child {
        grid-column: 1;
    }
}

/* ==========================================================
   BRIDGE — Sticky Mailing List Button (bottom right)
   ========================================================== */

.bridge-sticky-signup {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cesp-red);
    color: var(--cesp-white);
    font-family: var(--cesp-font);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.bridge-sticky-signup:hover {
    background: var(--cesp-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    color: var(--cesp-white);
    text-decoration: none;
}

.bridge-sticky-signup svg {
    flex-shrink: 0;
}

.bridge-signup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cesp-red);
    color: var(--cesp-white);
    font-family: var(--cesp-font);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.bridge-signup:hover {
    background: var(--cesp-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    color: var(--cesp-white);
    text-decoration: none;
}

.bridge-signup svg {
    flex-shrink: 0;
}

/* Collapse to icon only on mobile */
@media screen and (max-width: 600px) {
    .bridge-sticky-signup span {
        display: none;
    }

    .bridge-sticky-signup {
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        bottom: 20px;
        right: 16px;
    }
}

.bridge-home-mail-list{
    padding:20px;
    text-align:center;
}

.bridge-home-mail-list h4{
    text-align:center;
    margin-bottom:10px;
}

#gform_wrapper_3 #gform_fields_3 {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    transition: box-shadow 0.2s ease;
}

#gform_wrapper_3 #field_3_1 {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    width: auto;
    max-width: none;
    margin: 0;
}

#gform_wrapper_3 #field_3_1 .ginput_container_email {
    flex: 1 1 auto;
    display: flex;
    margin: 0;
}

#gform_wrapper_3 #input_3_1 {
    width: 100%;
    border: none;
    outline: none;
    padding: 22px 22px;
    font-size: 16px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: #1a1a1a;
    font-family: var(--cesp-font);
}

#gform_wrapper_3 #input_3_1::placeholder {
    color: #9a9a9a;
}

#gform_wrapper_3 #field_submit {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
}

#gform_wrapper_3 #gform_submit_button_3 {
    border: none;
    border-radius: 0;
    padding: 16px 32px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: #CC0033;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--cesp-font);
    transition: background 0.2s ease, transform 0.15s ease;
}

#gform_wrapper_3 #gform_submit_button_3:hover {
    background: #9b0026;
    transform: scale(1.035);
}

#gform_wrapper_3 #gform_submit_button_3:active {
    transform: scale(0.98);
}

#gform_wrapper_3 .gform-footer,
#gform_wrapper_3 .gform_footer {
    margin: 0;
    padding: 0;
}

@media (max-width: 480px) {
    #gform_wrapper_3 #gform_fields_3 {
        flex-direction: column;
        border-radius: 20px;
        max-width: 100%;
    }

    #gform_wrapper_3 #gform_submit_button_3 {
        border-radius: 0;
        padding: 16px;
        text-align: center;
    }
}