/*
Theme Name: HerRights
Theme URI: https://herrights.org
Author: Anthology Group
Author URI: https://anthologygroup.llc
Description: Custom theme for HerRights.org built from the ground up by Anthology Group
Version: 1.0.15
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: her-rights
Tags: modern, responsive, clean, minimal

This theme is licensed only for use by HerRights.org and any subsidiaries.
*/

/* ============================================
   Color Palette (HerRights Brand Colors)
   ============================================ */
:root {
    --primary-color: #c41e3a;
    --primary-dark: #9a1625;
    --primary-light: #d93d56;
    --secondary-color: #1e3a5f;
    --secondary-dark: #152943;
    --secondary-light: #2a4d7a;
    --accent-color: #e63946;
    --accent-dark: #c41e3a;
    --text-dark: #1a1a1a;
    --text-medium: #4a4a4a;
    --text-light: #6a6a6a;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --bg-gradient-start: #c41e3a;
    --bg-gradient-end: #e63946;
    --border-color: #e1e8ed;
    --success-color: #28a745;
    --warning-color: #ffc107;
}

/* ============================================
   Reset and Base Styles
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Customizer preview: briefly highlight the focused section. */
.her-rights-customizer-focus {
    animation: herRightsCustomizerPreviewFocus 1.2s ease-out;
}

/* Invisible anchor in Customizer preview when the real block is not rendered. */
.her-rights-customizer-section-marker {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    position: absolute;
    width: 1px;
}

@keyframes herRightsCustomizerPreviewFocus {
    0% { box-shadow: 0 0 0 0 rgba(0, 115, 170, 0.0); }
    20% { box-shadow: 0 0 0 5px rgba(0, 115, 170, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(0, 115, 170, 0.0); }
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--bg-white);
    font-size: 16px;
}

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

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
}

/* ============================================
   Container
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   Header Styles
   ============================================ */
.site-header {
    background-color: var(--bg-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0; /* reduced ~10px top/bottom */
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.custom-logo {
    max-height: 175px; /* target height ~175px */
    max-width: 375px;  /* target width ~375px */
    height: auto;
    width: auto;
}

.site-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.site-title:hover {
    color: var(--primary-color);
}

.site-description {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-top: 0.25rem;
    font-weight: 400;
}

/* ============================================
   Navigation
   ============================================ */
.main-navigation {
    display: flex;
    align-items: center;
    position: relative;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

/* Donate Button */
.donate-button {
    margin-left: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 48px;
    padding: 0; /* fixed size button */
    background-color: #BE1F2D; /* brand red */
    color: #fff !important;
    border-radius: 0; /* Square corners */
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: 2px solid #BE1F2D;
    transition: all 0.25s ease;
    white-space: nowrap;
}

/* Remove underline hover effect from donate button */
.donate-button::after {
    display: none !important;
}

.donate-button:hover {
    background-color: transparent;
    color: #BE1F2D !important;
}

.donate-button:hover::after {
    display: none !important;
}

.main-navigation a {
    color: #BE1F2D;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Extend hover area for parent menu items with children */
.main-navigation .menu-item-has-children > a {
    padding-bottom: 0.75rem;
}

.main-navigation a:hover {
    color: #BE1F2D;
    opacity: 0.8;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #BE1F2D;
    transition: width 0.3s ease;
}

.main-navigation a:hover::after {
    width: 100%;
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: #BE1F2D;
}

.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
    width: 100%;
}

/* Submenu/Dropdown Styles */
.main-navigation ul li {
    position: relative;
}

.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% - 0.25rem);
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 0.75rem 0 0.5rem 0;
    margin-top: 0;
    z-index: 1000;
    list-style: none;
    flex-direction: column;
    gap: 0;
}

/* Show submenu when hovering over parent or submenu itself */
.main-navigation ul li:hover > .sub-menu,
.main-navigation ul li.focus > .sub-menu,
.main-navigation .sub-menu:hover {
    display: flex;
}

/* Ensure submenu stays visible when moving cursor to it */
.main-navigation ul li.menu-item-has-children:hover .sub-menu {
    display: flex;
}

.main-navigation .sub-menu li {
    width: 100%;
    border-bottom: none;
}

.main-navigation .sub-menu li:last-child {
    border-bottom: none;
}

.main-navigation .sub-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text-dark);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.main-navigation .sub-menu a::after {
    display: none;
}

.main-navigation .sub-menu a:hover {
    background-color: var(--bg-light);
    color: #BE1F2D;
    opacity: 1;
}

.main-navigation .sub-menu .current-menu-item > a,
.main-navigation .sub-menu .current_page_item > a {
    color: #BE1F2D;
    background-color: var(--bg-light);
}

/* Dropdown arrow indicator for parent items - removed per request */

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.75rem;
    cursor: pointer;
    color: var(--text-dark);
    padding: 0.5rem;
    transition: color 0.3s ease;
}

.menu-toggle:hover {
    color: #BE1F2D;
}

/* ============================================
   Hero Section
   ============================================ */
.hero-section {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    color: #fff;
    padding: 6rem 0 1.2rem 0; /* Reduced bottom padding by 80% from 6rem to 1.2rem */
    position: relative;
    overflow: hidden;
}

.hero-section.video-hero-section {
    padding: 0;
    background: #000;
    position: relative;
    z-index: 10; /* Behind the boxes section */
    overflow: visible; /* allow next section to overlap */
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.05"><path d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/></g></g></svg>');
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -1px;
}

.hero-text {
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    opacity: 0.95;
}

/* ============================================
   Button Styles
   ============================================ */
.btn,
.button,
.wp-block-button__link {
    display: inline-block;
    padding: 0.875rem 2rem;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}

.btn:hover,
.button:hover,
.wp-block-button__link:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
}

.btn-primary {
    background-color: #fff;
    color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #f0f0f0;
    color: var(--primary-dark);
}

.btn-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-secondary:hover {
    background-color: #fff;
    color: var(--primary-color);
    border-color: #fff;
}

.btn-hero {
    font-size: 1.125rem;
    padding: 1rem 2.5rem;
}

/* ============================================
   Sections
   ============================================ */
section {
    padding: 5rem 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: var(--text-dark);
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

/* ============================================
   Home Page Boxes Section (Services, Locations, Careers)
   ============================================ */
.home-boxes-section {
    background-color: var(--bg-white);
    padding: 6rem 0 0 0;
    position: relative;
    z-index: 20; /* Ensure boxes appear above video */
}

/* ============================================
   Our Areas of Focus Section (Three Columns)
   ============================================ */
.areas-of-focus-section {
    background-color: var(--bg-light);
    padding: 0.15rem 0 1.2rem 0;
    width: 100%;
    margin-top: -6rem;
    position: relative;
    z-index: 21;
}

.areas-of-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.area-of-focus-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.area-of-focus-icon {
    margin-bottom: 1.5rem;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.area-of-focus-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.area-of-focus-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.area-of-focus-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-medium);
    max-width: 350px;
}

/* ============================================
   Homepage Full-Width Graphic (after Areas of Focus)
   ============================================ */
.home-full-width-graphic-section {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding: 0;
    background: transparent;
}

.home-full-width-graphic-section .home-full-width-graphic {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .areas-of-focus-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .area-of-focus-description {
        max-width: 100%;
    }
}

/* ============================================
   Board of Directors Section (Six Cards)
   ============================================ */
.board-section {
    background-color: var(--bg-white);
    padding: 6rem 0 2rem 0;
}

.board-grid {
    display: grid;
    /* Fixed-width columns + centered grid to center short last rows (1–2 cards). */
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    justify-content: center;
    gap: 2.5rem;
}

.junior-board-intro-wrapper {
    margin-top: 1rem;
    padding-bottom: 3rem;
}

.junior-board-intro {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media (max-width: 1200px) {
    .board-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 768px) {
    /* Keep header (logo + toggle) above full-screen menu */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1200;
        background-color: #fff;
    }

    .header-wrapper {
        position: relative;
        z-index: 1201; /* ensure toggle stays clickable */
    }
    .board-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        justify-content: center;
    }
}

/* Hide donate button on tablet/smaller until menu is open */
@media (max-width: 1024px) {
    .main-navigation .donate-button { display: none !important; }
    .main-navigation.toggled .donate-button { display: flex !important; }
}

@media (max-width: 480px) {
    .board-grid {
        grid-template-columns: 1fr;
    }
}

.board-card {
    perspective: 1200px; /* 3D container */
}

.board-card-inner {
    position: relative;
    width: 100%;
    min-height: 320px;
    transition: transform 0.7s ease;
    transform-style: preserve-3d;
    cursor: pointer;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.board-card:hover .board-card-inner,
.board-card-inner:focus {
    transform: rotateY(180deg);
    outline: none;
}

/* Programmatic/mobile flip */
.board-card-inner.is-flipped {
    transform: rotateY(180deg);
}

.board-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: #E8EAED;
    border: 1px solid #C4C7CC;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.board-card-front {
    z-index: 2;
}

.board-card-back {
    transform: rotateY(180deg);
    /* Match site brand colors (primary gradient) */
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    color: #fff;
}

.board-card-back.is-bio-shrunk .board-back-content {
    justify-content: flex-start;
    padding: 1rem 1.2rem 1.1rem 1.2rem;
}

.board-image {
    height: 140px;
    width: 140px;
    margin: 0 auto;
    background-color: var(--bg-light);
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 50%;
}

.board-card:hover .board-card-front .board-image img { transform: scale(1.05); }

.board-content {
    padding: 1.25rem;
    text-align: center;
}

.board-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
    color: var(--text-dark);
}

.board-role {
    font-size: 0.95rem;
    color: var(--text-medium);
}

/* .board-hint removed per request */

.board-back-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.5rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

.board-card-back .board-name { 
    color: #fff; 
    margin-bottom: 0;
}

.board-card-back .board-role { 
    color: #eaeaea; 
    font-size: 0.8125rem;
    margin-top: 0;
}
.board-bio { color: #ffffff; opacity: 0.95; line-height: 1.8; font-size: 0.875rem; transition: font-size 0.2s ease; }

/* ============================================
   Community Liaisons & Emeriti Section - Scrolling Cards
   ============================================ */
.emeriti-section {
    padding: 2rem 0 0.6rem 0; /* Reduced bottom padding by 85% from 4rem to 0.6rem */
    background-color: var(--bg-white);
}

.emeriti-carousel-wrapper {
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.emeriti-carousel-prev,
.emeriti-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1;
    font-size: 0;
}

.emeriti-carousel-prev:hover,
.emeriti-carousel-next:hover {
    background: var(--primary-dark);
    transform: translateY(-50%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.emeriti-carousel-prev:active,
.emeriti-carousel-next:active {
    transform: translateY(-50%);
    opacity: 0.8;
}

.emeriti-carousel-prev {
    left: 1rem;
}

.emeriti-carousel-next {
    right: 1rem;
}

.emeriti-carousel-prev svg,
.emeriti-carousel-next svg {
    width: 18px;
    height: 18px;
}

.emeriti-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1rem 2rem;
    will-change: scroll-position;
}

.emeriti-carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.emeriti-card {
    flex: 0 0 450px;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background-color: #F8F9FA;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 160px;
    min-height: 160px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    overflow: hidden;
    will-change: transform, max-height; /* Optimize hover animations */
}

.emeriti-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    max-height: 500px;
    z-index: 10;
    overflow: visible;
    /* Prevent layout shifts from affecting scroll position */
    margin-bottom: 0;
}

.emeriti-image {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.emeriti-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.emeriti-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--bg-light);
    border-radius: 50%;
}

.emeriti-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
}

.emeriti-name {
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 0 0 0.125rem 0;
    color: var(--text-dark);
    line-height: 1.3;
    flex-shrink: 0;
}

.emeriti-bio {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-medium);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: contents; /* Optimize text expansion */
}

.emeriti-card:hover .emeriti-bio {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    text-overflow: unset;
}

.no-emeriti-message {
    text-align: center;
    padding: 2rem;
    color: var(--text-medium);
    font-style: italic;
}

@media (max-width: 768px) {
    .emeriti-card {
        flex: 0 0 360px;
        padding: 1.25rem;
        gap: 1rem;
        max-height: 140px;
        min-height: 140px;
    }

    .emeriti-card:hover {
        max-height: 400px;
    }

    .emeriti-image {
        width: 80px;
        height: 80px;
    }

    .emeriti-name {
        font-size: 0.8125rem;
    }

    .emeriti-bio {
        font-size: 0.75rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .emeriti-card:hover .emeriti-bio {
        -webkit-line-clamp: unset;
        line-clamp: unset;
    }
}
.home-boxes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    transform: translateY(-200px); /* Overlap video by 200px */
    position: relative;
    z-index: 21;
}

/* Adjust grid for different box counts */
.home-boxes-grid.home-boxes-count-1 {
    grid-template-columns: 1fr;
    max-width: 600px;
}

.home-boxes-grid.home-boxes-count-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
}

.home-boxes-grid.home-boxes-count-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
}

.home-box {
    background-color: #F7F8F9;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 3rem 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.home-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.home-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.home-box:hover::before {
    transform: scaleX(1);
}

.home-box-icon {
    margin-bottom: 1.5rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    border-radius: 50%;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.home-box:hover .home-box-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(196, 30, 58, 0.3);
}

.home-box-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.home-box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.home-box-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--text-dark);
    line-height: 1.3;
}

.home-box-description {
    font-size: 1rem;
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 2rem;
    flex: 1;
}

.home-box-button {
    display: inline-block;
    padding: 0.875rem 2rem;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
    align-self: center;
    margin-top: auto;
}

.home-box-button:hover {
    background-color: transparent;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(196, 30, 58, 0.25);
}

/* Individual box color accents (optional) */
.home-box-services .home-box-icon {
    background: linear-gradient(135deg, #4a90e2, #357abd);
}

.home-box-locations .home-box-icon {
    background: linear-gradient(135deg, #50c878, #3fa863);
}

.home-box-careers .home-box-icon {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
}

/* ============================================
   Join Us Page Boxes Section
   ============================================ */
.join-us-boxes-section {
    background-color: var(--bg-white);
    padding: 6rem 0;
}

.join-us-boxes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Adjust grid for different box counts */
.join-us-boxes-grid.join-us-boxes-count-1 {
    grid-template-columns: 1fr;
    max-width: 600px;
}

.join-us-boxes-grid.join-us-boxes-count-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
}

.join-us-boxes-grid.join-us-boxes-count-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
}

.join-us-box {
    background-color: #fff;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    position: relative;
}

.join-us-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
    z-index: 1;
}

.join-us-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.join-us-box:hover::before {
    transform: scaleX(1);
}

.join-us-box-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background-color: var(--bg-light);
}

.join-us-box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.join-us-box:hover .join-us-box-image img {
    transform: scale(1.05);
}

.join-us-box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem;
    width: 100%;
}

.join-us-box-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--text-dark);
    line-height: 1.3;
}

.join-us-box-description {
    font-size: 1rem;
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 2rem;
    flex: 1;
}

.join-us-box-button {
    display: inline-block;
    padding: 0.875rem 2rem;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
    align-self: center;
    margin-top: auto;
}

.join-us-box-button:hover {
    background-color: transparent;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(196, 30, 58, 0.25);
}

/* ============================================
   Projects Cards Section (Stacking Cards)
   ============================================ */
.projects-cards-section {
    background-color: var(--bg-white);
    padding: 0;
    width: 100%;
    margin-top: 0;
    padding-top: 10.8125rem; /* 5.5rem (88px) + 85px = 173px total spacing */
    position: relative;
    overflow: visible;
    min-height: 100vh; /* Ensure container has enough height for sticky positioning */
}

/* Hide entry-header on Projects page */
.page-template-page-projects .entry-header {
    display: none;
}

.projects-stack {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    box-sizing: border-box;
    overflow: visible; /* Ensure sticky positioning works */
    min-height: calc(100vh * 2); /* Ensure enough height for sticky positioning to work */
}

.project-card {
    position: sticky;
    top: calc(20vh + 8.65rem); /* Keep bottom aligned: top + height ~= 100vh */
    bottom: auto;
    margin-bottom: 240px; /* ~20% less scroll space than 300px */
    transition: opacity 0.3s ease, z-index 0s; /* Removed transform transition to prevent jitter */
    cursor: pointer;
    z-index: 1;
    width: 100%;
    height: calc(80vh - 8.65rem); /* ~20% shorter than (100vh - 10.8125rem) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 1rem; /* Reduced horizontal padding for wider cards */
    padding-top: 0;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    will-change: transform, opacity, z-index; /* Optimize for smooth scrolling */
}

/* First card stays fixed at top with spacing */
.project-card:first-child {
    margin-top: 0;
    top: calc(20vh + 8.65rem); /* Keep bottom aligned: top + height ~= 100vh */
    bottom: auto;
    z-index: 1; /* Base z-index */
    position: sticky !important; /* Force sticky positioning */
    height: calc(80vh - 8.65rem); /* ~20% shorter than (100vh - 10.8125rem) */
}

/* Subsequent cards scroll over the first */
.project-card:nth-child(n+2) {
    z-index: 2; /* Higher z-index so they scroll over the first card */
}

.project-card.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.project-card.is-transitioning {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.project-card.is-past {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: none;
}

.project-card:last-child {
    margin-bottom: 0;
}

/* Add minimal spacer after last card - reduced to allow next section to appear sooner */
.projects-stack::after {
    content: '';
    display: block;
    height: 2rem; /* Minimal spacer - just enough to prevent overlap */
    width: 100%;
}

.project-card:hover {
    transform: translateY(0);
}

.project-card-inner {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 2rem 4.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    width: 100%;
    max-width: 78vw; /* ~20% narrower than previous 98vw */
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden; /* Ensure background images respect rounded corners */
    height: 100%; /* Fill parent card height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
    padding-top: 1.5rem; /* Reduced top padding to align content closer to top */
}

/* Image layout styles */
.project-card-inner.has-image {
    flex-direction: row;
    align-items: stretch; /* Stretch to full height */
    gap: 0;
    padding: 0;
    overflow: hidden; /* Ensure image doesn't overflow rounded corners */
}

.project-card-inner.has-image.image-left {
    flex-direction: row-reverse;
}

.project-card-inner.has-image .project-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2rem 4.5rem;
    padding-top: 1.5rem; /* Reduced top padding */
}

.project-card-inner.has-image .project-text-content {
    flex: 1;
}

.project-card-inner.has-image .project-image-wrapper {
    flex: 0 0 45%;
    max-width: 45%;
    height: 100%;
    display: flex;
    align-items: stretch; /* Stretch to full height */
    justify-content: center;
    overflow: hidden; /* Ensure image doesn't overflow */
}

.project-card-inner.has-image .project-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire area */
    object-position: center;
}

/* Background image styles */
.project-card-inner.has-background-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 0; /* Remove padding to make image edge-to-edge */
    overflow: hidden; /* Ensure image stays within rounded corners */
}

.project-card-inner.has-background-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5); /* Reduced opacity from 0.85 to 0.5 for better image visibility */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    z-index: 1;
}

.project-card-inner.has-background-image .project-text-content {
    position: relative;
    z-index: 2;
    padding: 2rem 4.5rem;
    padding-top: 1.5rem; /* Move padding to text content */
}

.project-card:hover .project-card-inner {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.project-year {
    font-size: 1.5rem; /* 6× previous 0.875rem */
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    display: block;
    line-height: 1;
}

.project-title {
    font-size: 1.75rem; /* 2× previous 1.75rem */
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.project-description {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.project-footer-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.project-category {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.375rem 0.875rem;
    background-color: var(--bg-light);
    border-radius: 20px;
}

/* Ensure buttons and links are always clickable even when card has pointer-events: none */
.project-card[style*="pointer-events: none"] .project-button,
.project-card[style*="pointer-events: none"] a {
    pointer-events: auto !important;
}

.project-button {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.5rem;
    background-color: var(--primary-color);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
}

.project-button:hover,
.project-button:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Projects Timeline Section
   ============================================ */
.projects-timeline-section {
    background-color: var(--bg-white);
    padding: 0 0 6rem;
    width: 100%;
    margin: 0;
    margin-top: 0;
}

.timeline-wrapper {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.timeline-wrapper iframe {
    display: block;
    width: 100%;
    border: none;
}

/* Note: TimelineJS iframe is cross-origin, so we cannot directly style its content with CSS.
   The font is controlled via the iframe src URL parameter. To match the site font,
   you may need to configure the TimelineJS source (Google Sheet) with font settings,
   or use TimelineJS font parameter options. The iframe currently uses 'Default' font.
   
   Alternative: If you have control over the TimelineJS source, you can:
   1. Use TimelineJS font parameter: &font=FontName
   2. Use a Google Font: &font=https://fonts.googleapis.com/css?family=FontName
   3. Configure font in the TimelineJS source data itself
*/

/* ============================================
   Jump to Timeline Floating Button
   ============================================ */
.jump-to-timeline-button {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-family: inherit;
    opacity: 1;
    visibility: visible;
}

.jump-to-timeline-button.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.jump-to-timeline-button:hover,
.jump-to-timeline-button:focus {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    outline: none;
}

.jump-to-timeline-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .jump-to-timeline-button {
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* Keep old section classes for backward compatibility if needed elsewhere */
.services-section {
    background-color: var(--bg-white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.service-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color);
}

.service-image {
    overflow: hidden;
    height: 200px;
    background-color: var(--bg-light);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-card:hover .service-image img {
    transform: scale(1.05);
}

.service-content {
    padding: 2rem;
}

.service-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.service-title a {
    color: var(--text-dark);
}

.service-title a:hover {
    color: var(--primary-color);
}

.service-description {
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.service-link {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.service-link:hover {
    color: var(--primary-dark);
    gap: 0.75rem;
}

.locations-section {
    background-color: var(--bg-light);
}

.locations-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.locations-description {
    font-size: 1.125rem;
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.careers-section {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
    color: #fff;
}

.careers-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.careers-section .section-title {
    color: #fff;
}

.careers-section .section-title::after {
    background: #fff;
}

.careers-description {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    opacity: 0.95;
}

/* ============================================
   Video Section (Full Width)
   ============================================ */
.video-section {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background-color: #000;
}

.video-container video,
.video-container iframe {
    pointer-events: none; /* Make all video elements non-interactive */
}

.hero-video,
.hero-video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    opacity: 0.6;
}

.hero-video-embed {
    pointer-events: none;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), transparent);
    pointer-events: none;
    z-index: 10;
}

/* Video Text Overlay (Editable from Video Settings) */
.video-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: none;
    padding: 3rem 0;
}

.video-overlay-content {
    text-align: center;
    color: #fff;
    max-width: 900px;
    padding: 0 20px;
    pointer-events: auto;
}

.video-overlay-content h1,
.video-overlay-content h2,
.video-overlay-content h3 {
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.video-overlay-content h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    letter-spacing: -1px;
}

.video-overlay-content h2 {
    font-size: 2.5rem;
    line-height: 1.3;
}

.video-overlay-content h3 {
    font-size: 2rem;
    line-height: 1.4;
}

.video-overlay-content p {
    font-size: 1.25rem;
    line-height: 1.8;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 2rem;
    opacity: 0.95;
}

.video-overlay-content a {
    color: #fff;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.video-overlay-content a:hover {
    opacity: 0.8;
}

.video-overlay-content .btn,
.video-overlay-content .button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: #fff;
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    border: none;
    margin-top: 1rem;
}

.video-overlay-content .btn:hover,
.video-overlay-content .button:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
}

.video-hero-section .hero-content {
    position: relative;
    z-index: 11;
    pointer-events: auto;
    width: 100%;
}

.video-hero-section .hero-content .container {
    position: relative;
    z-index: 1;
    pointer-events: auto; /* Ensure content container is interactive */
}

/* Make sure all interactive elements in overlay remain clickable */
.video-hero-section .hero-content a,
.video-hero-section .hero-content button,
.video-hero-section .hero-content input,
.video-hero-section .hero-content textarea,
.video-hero-section .hero-content select {
    pointer-events: auto;
    position: relative;
    z-index: 12;
}

.video-hero-section .hero-title {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin-bottom: 1.5rem;
}

.video-hero-section .hero-text {
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.video-title {
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.video-placeholder {
    background-color: var(--bg-light);
    padding: 4rem 0;
}

/* Responsive video adjustments */
@media (max-width: 768px) {
    .custom-logo {
        max-height: 80px;
        max-width: 240px;
    }
    .video-title {
        font-size: 2rem;
    }

    .video-container {
        padding-top: 75%; /* Taller on mobile for better visibility */
    }

    .video-overlay-content h1 {
        font-size: 2.5rem;
    }

    .video-overlay-content h2 {
        font-size: 2rem;
    }

    .video-overlay-content h3 {
        font-size: 1.75rem;
    }

    .video-overlay-content p {
        font-size: 1.125rem;
    }

    .video-text-overlay {
        padding: 2rem 0;
    }
}

@media (max-width: 480px) {
    .video-title {
        font-size: 1.5rem;
    }

    .video-overlay-content h1 {
        font-size: 2rem;
    }

    .video-overlay-content h2 {
        font-size: 1.75rem;
    }

    .video-overlay-content h3 {
        font-size: 1.5rem;
    }

    .video-overlay-content p {
        font-size: 1rem;
    }

    .video-overlay-content .btn,
    .video-overlay-content .button {
        font-size: 1rem;
        padding: 0.875rem 2rem;
    }
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.news-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.news-thumbnail {
    overflow: hidden;
    height: 220px;
    background-color: var(--bg-light);
}

.news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-card:hover .news-thumbnail img {
    transform: scale(1.05);
}

.news-content {
    padding: 2rem;
}

.news-meta {
    margin-bottom: 1rem;
}

.news-date {
    font-size: 0.875rem;
    color: var(--text-light);
    font-weight: 500;
}

.news-title {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.news-title a {
    color: var(--text-dark);
}

.news-title a:hover {
    color: var(--primary-color);
}

.news-excerpt {
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.news-link {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.news-link:hover {
    color: var(--primary-dark);
    gap: 0.75rem;
}

.news-more {
    text-align: center;
}

/* ============================================
   Main Content (Posts/Pages)
   ============================================ */
.site-main {
    padding: 3rem 0 0rem 0;
    min-height: 60vh;
}

/* Remove top spacing on homepage so video touches the nav */
.home .site-main {
    padding-top: 0;
}

/* Remove top spacing on pages so gray title section touches the nav */
.page .site-main,
.page-template-page-projects .site-main,
.page-template-page-join-us .site-main,
.page-template-page-our-team .site-main,
.page-template-page-resources .site-main,
.page-template-page-media .site-main,
.page-template-page-food-for-thought .site-main,
.single .site-main {
    padding-top: 0;
}

.page .site-main .container,
.page-template-page-projects .site-main .container,
.page-template-page-join-us .site-main .container,
.page-template-page-our-team .site-main .container,
.page-template-page-resources .site-main .container,
.page-template-page-media .site-main .container,
.page-template-page-food-for-thought .site-main .container,
.single .site-main .container {
    padding-top: 0;
}

/* Resources page - extend sidebar background to footer */
.page-template-page-resources .site-main {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Resources page lists use same prose list rules as rest of site */

/* ============================================
   Resources Slider
   ============================================ */
.resources-slider-wrapper {
    width: calc(100% + 40px);
    margin: 2rem -20px;
    position: relative;
    overflow: visible;
    border-radius: 12px;
    isolation: isolate;
}

.resources-slider {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
}

.resources-slide {
    display: none;
    width: 100%;
    height: 100%;
    min-height: 500px;
    padding: 3rem 2rem;
    opacity: 0;
    transition: opacity 0.5s ease;
    box-sizing: border-box;
    pointer-events: none;
    overflow: auto;
    max-height: none;
    -webkit-overflow-scrolling: touch;
    background-color: var(--bg-light);
    position: relative;
}

.resources-slide.active {
    display: block !important;
    opacity: 1;
    pointer-events: auto;
}

.resources-slide.has-background {
    position: relative;
    color: #fff;
}

.resources-slide-bg {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
    z-index: 0;
}

.resources-slide.has-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 0;
}

.resources-slide.has-background .resources-slide-inner,
.resources-slide.has-background .resources-slide-actions {
    position: relative;
    z-index: 1;
}

.resources-slide-content {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.resources-slide-inner {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.resources-slide .resources-slide-actions {
    position: absolute !important;
    right: 2rem;
    bottom: 2rem;
    top: auto !important;
    left: auto !important;
    margin-top: 0 !important;
    z-index: 2;
}

.resources-slide-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #fff;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.resources-slide-button:hover {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.resources-slide-content iframe,
.resources-slide-content embed,
.resources-slide-content object {
    max-width: 100%;
    width: 100%;
    min-height: 400px;
    border: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.resources-slide-content {
    overflow: auto;
    max-height: 100%;
    -webkit-overflow-scrolling: touch;
}

.resources-slider-prev,
.resources-slider-next,
.emeriti-carousel-prev,
.emeriti-carousel-next,
.media-posts-carousel-prev,
.media-posts-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    box-sizing: border-box !important;
    overflow: hidden;
    line-height: 1 !important;
    font-size: 0 !important;
}

.resources-slider-prev,
.emeriti-carousel-prev,
.media-posts-carousel-prev {
    left: 1rem;
}

.resources-slider-next,
.emeriti-carousel-next,
.media-posts-carousel-next {
    right: 1rem;
}

.resources-slider-prev:hover,
.resources-slider-next:hover,
.emeriti-carousel-prev:hover,
.emeriti-carousel-next:hover,
.media-posts-carousel-prev:hover,
.media-posts-carousel-next:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
    top: 50% !important;
}

.resources-slider-prev:active,
.resources-slider-next:active,
.emeriti-carousel-prev:active,
.emeriti-carousel-next:active,
.media-posts-carousel-prev:active,
.media-posts-carousel-next:active {
    transform: translateY(-50%) !important;
    opacity: 0.8;
    top: 50% !important;
}

.resources-slider-prev svg,
.resources-slider-next svg,
.emeriti-carousel-prev svg,
.emeriti-carousel-next svg,
.media-posts-carousel-prev svg,
.media-posts-carousel-next svg {
    width: 18px;
    height: 18px;
}

.resources-slider-dots {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.85);
    padding: 0.5rem 0.875rem;
    border-radius: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.resources-slider-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    max-width: 8px !important;
    max-height: 8px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.3) !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    text-indent: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    overflow: hidden;
}

.resources-slider-dot:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.2);
}

.resources-slider-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

@media (max-width: 968px) {
    .resources-slider-wrapper {
        margin-left: -20px;
        margin-right: -20px;
        border-radius: 0;
    }

    .resources-slide {
        padding: 2rem 1.5rem;
    }

    .resources-slide-inner {
        flex-direction: column;
    }

    .resources-slide-content iframe,
    .resources-slide-content embed,
    .resources-slide-content object {
        min-height: 300px;
    }
}

.content-area {
    width: 100%;
}

.post {
    margin-bottom: 3rem;
}

.entry-header,
.page-header {
    margin-bottom: 2rem;
    margin-top: 0;
    background-color: var(--bg-light);
    padding: 2.0625rem 2rem;
    border-radius: 0; /* Remove border radius for full-width effect */
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + 2rem);
    padding-right: calc(50vw - 50% + 2rem);
    border-bottom: 1px solid #e4bc76;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.entry-title,
.page-title {
    font-size: 2.5rem;
    margin-bottom: 0;
    color: #BE1F2D; /* brand red */
    text-transform: uppercase;
    line-height: 1.3;
    font-weight: 700;
}

.entry-title a {
    color: #BE1F2D; /* brand red */
    text-transform: uppercase;
}

.entry-title a:hover {
    color: var(--primary-color);
}

.entry-meta {
    font-size: 0.9375rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.entry-content {
    line-height: 1.8;
    font-size: 1.0625rem;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

/* Prose lists: left-aligned text, subtle indent (entry + common WYSIWYG blocks) */
.entry-content ul,
.entry-content ol,
.project-description ul,
.project-description ol,
.board-bio ul,
.board-bio ol,
.emeriti-bio ul,
.emeriti-bio ol,
.junior-board-intro ul,
.junior-board-intro ol {
    list-style-position: outside;
    margin: 0 0 1.25rem 0;
    padding-left: 1.125em;
    text-align: left;
}

.entry-content ul li,
.entry-content ol li,
.project-description ul li,
.project-description ol li,
.board-bio ul li,
.board-bio ol li,
.emeriti-bio ul li,
.emeriti-bio ol li,
.junior-board-intro ul li,
.junior-board-intro ol li {
    padding-left: 0;
    margin-bottom: 0.35em;
    text-align: left;
}

.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul,
.project-description ul ul,
.project-description ol ol {
    margin-top: 0.35em;
    margin-bottom: 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    color: var(--text-dark);
    font-weight: 600;
}

.entry-content h2 {
    font-size: 2rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    margin: 2rem 0;
    border-radius: 8px;
}

.post-thumbnail {
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
}

/* Single post: Float thumbnail to the right with text wrapping */
.single .post-thumbnail-float {
    float: right;
    width: 300px;
    max-width: 40%;
    margin-left: 2rem;
    margin-bottom: 1.5rem;
    margin-top: 0;
    border-radius: 8px;
    overflow: hidden;
}

.single .post-thumbnail-float img {
    width: 100%;
    height: auto;
    display: block;
}

/* Clearfix for entry-content to contain floated image */
.single .entry-content::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================
   Footer Banner
   ============================================ */
.footer-banner {
    width: 100%;
    height: 35px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    border-top: 1px solid #e4bc76;
    border-bottom: 1px solid #e4bc76;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background-color: #2a2a2a;
    color: #e0e0e0;
    padding: 2rem 0 1rem;
    margin-top: 0;
}

/* Remove margin-top from footer when partners ticker is present */
.partners-ticker-box + .site-footer,
.partners-ticker-box ~ .site-footer {
    margin-top: 0;
}

.footer-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-widget {
    margin-bottom: 0;
}

.footer-widget h3 {
    margin-bottom: 0.75rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
}

.footer-widget ul {
    list-style: none;
}

.footer-widget ul li {
    margin-bottom: 0.5rem;
}

.footer-widget a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-widget a:hover {
    color: #fff;
}

.footer-widget p {
    color: #b0b0b0;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.footer-about p {
    margin-top: 0.25rem;
}

.footer-contact ul {
    list-style: none;
}

.site-info a {
    color: #888;
    margin: 0 0.5rem;
}

.site-info .footer-anthology-link {
    margin-left: 0;
    margin-right: 0.5rem;
}

.site-info a:hover {
    color: #fff;
}

.site-info {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #e4bc76;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: #888;
    line-height: 1.6;
}

.site-info p {
    margin: 0;
}

/* Footer Social - inside Contact widget */
.footer-contact .footer-social {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
    margin-bottom: 0;
}

.footer-social .social-list {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-social .icon {
    width: 22px;
    height: 22px;
    color: #fff;
    opacity: 0.9;
    transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
}

.footer-social a:hover .icon {
    color: var(--accent-color);
    opacity: 1;
    transform: translateY(-2px);
}

.guidestar-badge {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .footer-brand-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

.guidestar-badge a {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.guidestar-badge a:hover {
    opacity: 0.8;
}

.guidestar-img {
    max-width: 120px;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* ============================================
   Post Navigation
   ============================================ */
.post-navigation {
    margin: 4rem 0;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.post-navigation .nav-title {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
}

.post-navigation a {
    text-decoration: none;
    display: block;
    padding: 1.5rem;
    background-color: var(--bg-light);
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.post-navigation a:hover {
    background-color: #fff;
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.post-navigation .nav-next a:hover {
    transform: translateX(-5px);
}

/* ============================================
   Comments
   ============================================ */
.comments-area {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid var(--border-color);
}

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

.comment {
    margin-bottom: 2.5rem;
    padding: 2rem;
    background-color: var(--bg-light);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-author .avatar {
    border-radius: 50%;
}

.comment-metadata {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

/* ============================================
   Form Input Styles
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: var(--text-dark);
    background-color: #fff;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.5rem;
    appearance: none;
    cursor: pointer;
}

/* Checkbox and Radio Button Styles */
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    cursor: pointer;
    accent-color: var(--primary-color);
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Form Button Styles */
input[type="submit"],
input[type="button"],
input[type="reset"],
button[type="submit"],
button[type="button"],
button[type="reset"] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 2px solid var(--primary-color);
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button[type="submit"]:hover,
button[type="button"]:hover,
button[type="reset"]:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
}

input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
button[type="submit"]:active,
button[type="button"]:active,
button[type="reset"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(196, 30, 58, 0.2);
}

/* Form Layout */
form {
    max-width: 100%;
}

.form-group,
.form-row {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9375rem;
}

label.required::after {
    content: " *";
    color: var(--primary-color);
}

/* Form Error States */
input.error,
textarea.error,
select.error {
    border-color: #dc3545;
}

input.error:focus,
textarea.error:focus,
select.error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

/* Form Success States */
input.success,
textarea.success,
select.success {
    border-color: #28a745;
}

/* Placeholder Styling */
input::placeholder,
textarea::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

/* Disabled Form Elements */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled,
input[type="submit"]:disabled,
button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-light);
}

/* ============================================
   Search Form
   ============================================ */
.search-form {
    display: flex;
    gap: 0.75rem;
    margin: 2rem 0;
    max-width: 500px;
}

.search-field {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.search-field:focus {
    outline: none;
    border-color: var(--primary-color);
}

.search-submit {
    padding: 0.875rem 2rem;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.search-submit:hover {
    background-color: var(--primary-dark);
}

/* ============================================
   Utility Classes
   ============================================ */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   Partners Carousel
   ============================================ */
.partners-carousel-section {
    background-color: var(--bg-light);
    padding: 5rem 0 1rem 0; /* Reduced bottom padding by 80% from 5rem to 1rem */
    overflow: hidden;
}

.partners-carousel-section .section-title {
    margin-bottom: 3rem;
}

.partners-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.partners-carousel {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 2rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.partners-carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.partners-carousel-wrapper::before,
.partners-carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 10;
    pointer-events: none;
}

.partners-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-light), transparent);
}

.partners-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-light), transparent);
}

.partner-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
    min-width: 200px;
    height: 120px;
}

.partner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.partner-link:hover {
    transform: scale(1.05);
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-item:hover .partner-logo {
    filter: grayscale(70%);
    opacity: 1;
}

.partner-logo img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Responsive adjustments for carousel */
@media (max-width: 768px) {
    .partners-carousel {
        gap: 2rem;
    }

    .partner-item {
        min-width: 150px;
        height: 100px;
        padding: 1rem 1.5rem;
    }

    .partner-logo img {
        max-height: 60px;
    }

    .partners-carousel-wrapper::before,
    .partners-carousel-wrapper::after {
        width: 50px;
    }
}

/* Partners Ticker Section */
.partners-ticker-section {
    padding: 0;
    margin-bottom: 0;
}

.partners-ticker-section .section-title {
    margin-bottom: 3rem;
}

.partners-ticker-box {
    background-color: var(--primary-color, #c8102e);
    color: #fff;
    padding: 1rem 0;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
}

.partners-ticker-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.partners-ticker-wrapper::-webkit-scrollbar {
    display: none;
}

.partners-ticker {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 1.5rem;
    padding: 0 2rem;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
}

.ticker-link {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.ticker-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.ticker-separator {
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0.5rem;
    font-size: 1.2rem;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.333%);
    }
}

@media (max-width: 768px) {
    .partners-ticker {
        font-size: 0.9rem;
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .ticker-separator {
        margin: 0 0.25rem;
        font-size: 1rem;
    }
}

/* Media Headlines Ticker */
.media-ticker-section {
    padding: 0;
    margin-top: 0.3rem;
    margin-bottom: 0;
}

.media-ticker-section .section-title {
    margin-bottom: 2rem;
}

.media-ticker-box {
    background-color: var(--primary-color, #c8102e);
    color: #fff;
    padding: 1rem 0 1rem 0;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.media-ticker-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.media-ticker {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: ticker-scroll linear infinite;
    animation-duration: var(--ticker-duration, 35s);
    gap: 1.5rem;
    padding: 0 2rem;
}

.media-ticker:hover {
    animation-play-state: paused;
}

.media-ticker.is-force-running {
    animation-play-state: running !important;
}

.media-ticker .ticker-item {
    font-size: 1.25rem;
}

@media (max-width: 768px) {
    .media-ticker {
        gap: 1rem;
        padding: 0 1rem;
    }

    .media-ticker .ticker-item {
        font-size: 1.125rem;
    }
}

/* ============================================
   Media Posts Carousel Section
   ============================================ */
.media-posts-carousel-section {
    margin-top: 0rem; /* Minimal spacing to bring carousel very close to page title */
    padding: 0.5rem 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Reduce space between carousel title and cards by 60% (title margin + wrapper top padding) */
.media-posts-carousel-section .section-title {
    margin-bottom: 1.2rem;   /* 40% of 3rem */
}

.media-posts-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0.8rem 0 0.6rem 0;   /* top 40% of 2rem */
}

.media-posts-carousel {
    display: flex;
    gap: 0.8rem;   /* 40% of 2rem - space between cards */
    overflow-x: auto;
    scroll-behavior: auto; /* Changed from smooth to prevent conflicts with JS scrolling */
    scrollbar-width: none; /* Firefox */
    will-change: scroll-position; /* Optimize for smooth scrolling */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 0.4rem 0;   /* 40% of 1rem */
}

.media-posts-carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.media-post-card {
    flex: 0 0 298px;   /* 350px reduced by 15% */
    height: 383px;     /* 450px reduced by 15% */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.media-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.media-post-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.media-post-card-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.media-post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.media-post-card:hover .media-post-card-image img {
    transform: scale(1.05);
}

.media-post-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
    padding: 2rem 1.5rem 1.5rem;
    color: #fff;
    z-index: 2;
}

.media-post-card-content {
    position: relative;
}

.media-post-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #fff;
    line-height: 1.3;
}

.media-post-card-excerpt {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media-post-card-button {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.media-post-card-button:hover {
    background-color: var(--primary-dark);
    color: #fff;
}

.media-post-card:hover .media-post-card-button {
    background-color: var(--primary-dark);
}

.no-posts-message {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-medium);
}

@media (max-width: 768px) {
    .media-post-card {
        flex: 0 0 238px;   /* 280px reduced by 15% */
        height: 323px;     /* 380px reduced by 15% */
    }

    .media-post-card-overlay {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .media-post-card-title {
        font-size: 1.25rem;
    }

    .media-post-card-excerpt {
        font-size: 0.875rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        position: relative;
        z-index: 1202; /* ensure visible above overlay */
    }

    .main-navigation ul {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        flex-direction: column;
        padding: 5rem 1.5rem 7rem; /* top room + bottom room for donate */
        box-shadow: none;
        gap: 0.5rem;
        z-index: 999;
    }

    /* Place Donate button fixed at bottom of opened mobile menu */
    #site-navigation { position: relative; }

    /* Hide donate button on mobile until menu is open */
    .donate-button { display: none; }

    .main-navigation.toggled .donate-button {
        position: fixed;
        left: 1.5rem;
        right: 1.5rem;
        bottom: 2rem;
        margin: 0;
        width: auto;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .main-navigation ul li {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    .main-navigation ul li:last-child {
        border-bottom: none;
    }

    .main-navigation a {
        display: block;
        padding: 1rem 0;
    }

    .main-navigation a::after {
        display: none;
    }

    /* Mobile submenu styles */
    .main-navigation .sub-menu {
        display: none;
        position: static;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        margin-top: 0;
        margin-left: 0;
        border-left: none;
    }

    .main-navigation .sub-menu.show {
        display: flex;
    }

    .main-navigation .sub-menu li {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    .main-navigation .sub-menu li:last-child {
        border-bottom: none;
    }

    .main-navigation .sub-menu a {
        padding: 1rem 0;
        font-size: 0.9375rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #BE1F2D;
        opacity: 0.85;
    }

    .main-navigation .sub-menu a:hover {
        opacity: 1;
        background-color: transparent;
    }

    /* Dropdown arrow indicator for parent items - removed per request */

    .main-navigation.toggled ul {
        display: flex;
    }

    /* Keep the toggle visible and reachable while menu is open */
    .main-navigation.toggled .menu-toggle {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1202;
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 0.25rem 0.5rem;
        line-height: 1;
    }

    /* Keep logo visible and scaled when menu is open */
    .site-branding {
        position: relative;
        z-index: 1202;
    }

    .site-branding .custom-logo {
        max-height: 60px;
        max-width: 200px;
        height: auto;
        width: auto;
        display: block;
    }

    .header-wrapper {
        flex-wrap: wrap;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-text {
        font-size: 1.125rem;
    }

    .section-title {
        font-size: 2rem;
    }

    section {
        padding: 3rem 0;
    }

    .services-grid,
    .news-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .home-boxes-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        padding: 0 1rem;
    }
    
    /* Ensure 2-box layout (Vision & Mission) stacks on mobile */
    .home-boxes-grid.home-boxes-count-2 {
        grid-template-columns: 1fr !important;
        max-width: 100%;
    }

    .home-box {
        padding: 2.5rem 2rem;
    }

    .home-box-title {
        font-size: 1.5rem;
    }

    .home-boxes-section {
        padding: 4rem 0 0 0;
    }

    .join-us-boxes-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        padding: 0 1rem;
    }
    
    /* Ensure 2-box layout stacks on mobile */
    .join-us-boxes-grid.join-us-boxes-count-2 {
        grid-template-columns: 1fr !important;
        max-width: 100%;
    }

    .join-us-box {
        padding: 0;
    }

    .join-us-box-content {
        padding: 2.5rem 2rem;
    }

    .join-us-box-title {
        font-size: 1.5rem;
    }

    .join-us-box-image {
        height: 200px;
    }

    .join-us-boxes-section {
        padding: 4rem 0;
    }

    .projects-cards-section {
        padding: 4rem 0;
    }

    .projects-stack {
        padding: 0; /* Remove padding for edge-to-edge on mobile */
        max-width: 100%;
    }

    .project-card {
        margin-bottom: 160px; /* ~20% less scroll space than 200px */
        top: calc(20vh + 1.6rem); /* Keep bottom aligned: top + height ~= 100vh */
        bottom: auto;
        height: calc(80vh - 1.6rem); /* ~20% shorter than (100vh - 2rem) */
        padding: 0 0.5rem; /* Minimal horizontal padding on mobile for edge-to-edge */
        align-items: flex-start;
    }

    .project-card:first-child {
        top: calc(20vh + 1.6rem); /* Keep bottom aligned: top + height ~= 100vh */
        bottom: auto;
        height: calc(80vh - 1.6rem); /* ~20% shorter than (100vh - 2rem) */
    }

    .project-card:last-child {
        margin-bottom: 2rem; /* Minimal margin to allow next section to appear */
    }

    .project-card-inner {
        padding: 1.5rem 2.25rem;
        padding-top: 1rem; /* Reduced top padding for content on mobile */
        max-width: 99vw; /* Almost edge-to-edge on mobile */
        height: 100%; /* Fill parent card height */
        justify-content: flex-start; /* Align content to top on mobile */
    }

    /* Mobile image layout - stack vertically */
    .project-card-inner.has-image {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .project-card-inner.has-image .project-card-content {
        padding: 1.5rem 2.5rem;
        padding-top: 1rem;
    }

    .project-card-inner.has-image.image-left {
        flex-direction: column;
    }

    .project-card-inner.has-image .project-image-wrapper {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        height: 40vh; /* Fixed height on mobile */
        min-height: 40vh;
    }

    .project-card-inner.has-image .project-image {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    /* Background image on mobile */
    .project-card-inner.has-background-image {
        padding: 0; /* Remove padding to make image edge-to-edge on mobile */
    }

    .project-card-inner.has-background-image .project-text-content {
        padding: 1.5rem 2.5rem;
        padding-top: 1rem; /* Move padding to text content on mobile */
    }

    .project-card-inner.has-background-image::before {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .project-year {
        font-size: clamp(2rem, 12vw, 3.5rem); /* Scaled down from desktop 6× for narrow screens */
        margin-bottom: 0.5rem;
    }

    .project-title {
        font-size: 3rem; /* 2× previous 1.5rem */
        color: #1a1a1a; /* Darker text for better readability on mobile */
    }

    .project-description {
        color: #333333; /* Darker text for better readability on mobile */
    }

    .project-footer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .project-button {
        width: 100%;
        text-align: center;
    }

    .projects-timeline-section {
        padding: 0 0 4rem;
    }

    .timeline-wrapper {
        margin: 0;
    }

    .timeline-wrapper iframe {
        height: 500px;
    }

    .footer-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .entry-title {
        font-size: 2rem;
    }

    .post-navigation .nav-links {
        flex-direction: column;
    }

    /* Single post: Make thumbnail full-width on mobile */
    .single .post-thumbnail-float {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 1.5rem;
    }

    .careers-content {
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-text {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .btn-hero {
        font-size: 1rem;
        padding: 0.875rem 2rem;
    }

    /* Form Input Responsive Styles */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    button[type="submit"],
    button[type="button"],
    button[type="reset"] {
        width: 100%;
        padding: 1rem 2rem;
    }

    .form-group,
    .form-row {
        margin-bottom: 1.25rem;
    }
}

/* ============================================
   LeadHerShip Initiative Page - Custom Colors
   Replace all red with #94a695
   ============================================ */
body.leadhership-initiative-page {
    /* Override CSS custom properties for this page */
    --primary-color: #94a695;
    --primary-dark: #7a8a7b;
    --primary-light: #a8b5a9;
    --accent-color: #94a695;
    --accent-dark: #7a8a7b;
    --bg-gradient-start: #94a695;
    --bg-gradient-end: #a8b5a9;
}

/* Override all red color instances for LeadHerShip page */
.leadhership-initiative-page a {
    color: #94a695;
}

.leadhership-initiative-page a:hover {
    color: #7a8a7b;
}

/* Button styles with proper text visibility and shadow fixes */
.leadhership-initiative-page .btn,
.leadhership-initiative-page .button,
.leadhership-initiative-page .wp-block-button__link,
.leadhership-initiative-page button[type="submit"],
.leadhership-initiative-page input[type="submit"] {
    background-color: #94a695;
    border-color: #94a695;
    color: #fff !important;
}

.leadhership-initiative-page .btn:hover,
.leadhership-initiative-page .button:hover,
.leadhership-initiative-page .wp-block-button__link:hover,
.leadhership-initiative-page button[type="submit"]:hover,
.leadhership-initiative-page input[type="submit"]:hover {
    background-color: #7a8a7b;
    border-color: #7a8a7b;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(148, 166, 149, 0.3) !important;
}

.leadhership-initiative-page .btn-primary {
    background-color: #94a695;
    color: #fff !important;
}

.leadhership-initiative-page .btn-primary:hover {
    background-color: #7a8a7b;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(148, 166, 149, 0.3) !important;
}

.leadhership-initiative-page .btn-secondary {
    border-color: #94a695;
    color: #94a695;
}

.leadhership-initiative-page .btn-secondary:hover {
    background-color: #94a695;
    color: #fff !important;
    border-color: #94a695;
}

.leadhership-initiative-page .btn-outline {
    border-color: #94a695;
    color: #94a695;
}

.leadhership-initiative-page .btn-outline:hover {
    background-color: #94a695;
    color: #fff !important;
}

/* Fix box shadows on all buttons - replace red shadows with green */
.leadhership-initiative-page .home-box-button,
.leadhership-initiative-page .join-us-box-button,
.leadhership-initiative-page .project-button {
    background-color: #94a695;
    border-color: #94a695;
    color: #fff !important;
}

.leadhership-initiative-page .home-box-button:hover,
.leadhership-initiative-page .join-us-box-button:hover,
.leadhership-initiative-page .project-button:hover {
    background-color: transparent;
    color: #94a695 !important;
    border-color: #94a695;
    box-shadow: 0 6px 16px rgba(148, 166, 149, 0.25) !important;
}

/* Fix icon box shadows */
.leadhership-initiative-page .home-box:hover .home-box-icon {
    box-shadow: 0 8px 20px rgba(148, 166, 149, 0.3) !important;
}

/* Fix video overlay button shadows */
.leadhership-initiative-page .video-overlay-content .btn:hover,
.leadhership-initiative-page .video-overlay-content .button:hover {
    background-color: #94a695;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(148, 166, 149, 0.3) !important;
}

.leadhership-initiative-page .section-title::after {
    background: linear-gradient(90deg, #94a695, #a8b5a9);
}

.leadhership-initiative-page .entry-title {
    color: var(--text-dark);
    text-align: center;
}

/* LeadHerShip Initiative: thumbnail left of title */
.leadhership-initiative-page .entry-header {
    gap: 1rem;
}

.leadhership-initiative-page .leadhership-header-thumb {
    flex: 0 0 auto;
    width: clamp(72px, 8vw, 120px);
    height: clamp(72px, 8vw, 120px);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
}

.leadhership-initiative-page .leadhership-header-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.leadhership-initiative-page .entry-header .entry-title {
    flex: 1 1 auto;
    text-align: left;
    margin: 0;
}

@media (max-width: 600px) {
    .leadhership-initiative-page .entry-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .leadhership-initiative-page .entry-header .entry-title {
        text-align: center;
    }
}

/* Override any gradient backgrounds */
.leadhership-initiative-page .btn-primary,
.leadhership-initiative-page .btn-hero {
    background: linear-gradient(135deg, #a8b5a9, #94a695);
    color: #fff !important;
}

.leadhership-initiative-page .btn-primary:hover,
.leadhership-initiative-page .btn-hero:hover {
    background: linear-gradient(135deg, #94a695, #7a8a7b);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(148, 166, 149, 0.3) !important;
}

/* Override border colors */
.leadhership-initiative-page input:focus,
.leadhership-initiative-page textarea:focus,
.leadhership-initiative-page select:focus {
    border-color: #94a695;
    outline-color: #94a695;
}

/* Override any box hover effects */
.leadhership-initiative-page .home-box:hover,
.leadhership-initiative-page .join-us-box:hover {
    border-color: #94a695;
}

.leadhership-initiative-page .home-box::before,
.leadhership-initiative-page .join-us-box::before {
    background: linear-gradient(90deg, #94a695, #a8b5a9);
}

/* Override any text colors that use primary color */
.leadhership-initiative-page .text-primary,
.leadhership-initiative-page h1,
.leadhership-initiative-page h2,
.leadhership-initiative-page h3,
.leadhership-initiative-page h4,
.leadhership-initiative-page h5,
.leadhership-initiative-page h6 {
    color: var(--text-dark);
}

/* Ensure links in content use the new color */
.leadhership-initiative-page .entry-content a {
    color: #94a695;
}

.leadhership-initiative-page .entry-content a:hover {
    color: #7a8a7b;
}

/* Override any navigation or breadcrumb colors */
.leadhership-initiative-page .breadcrumb a,
.leadhership-initiative-page .post-navigation a {
    color: #94a695;
}

.leadhership-initiative-page .breadcrumb a:hover,
.leadhership-initiative-page .post-navigation a:hover {
    color: #7a8a7b;
}

/* Override any form checkbox/radio accent colors */
.leadhership-initiative-page input[type="checkbox"]:checked,
.leadhership-initiative-page input[type="radio"]:checked {
    accent-color: #94a695;
}

/* Override any progress bars or similar elements */
.leadhership-initiative-page progress,
.leadhership-initiative-page .progress-bar {
    background-color: #94a695;
}

/* Override any highlight or selection colors */
.leadhership-initiative-page ::selection {
    background-color: #94a695;
    color: #fff;
}

.leadhership-initiative-page ::-moz-selection {
    background-color: #94a695;
    color: #fff;
}

/* Override footer text colors for LeadHerShip page to keep white */
.leadhership-initiative-page .site-footer,
.leadhership-initiative-page .site-footer * {
    color: #e0e0e0 !important;
}

.leadhership-initiative-page .site-footer h3,
.leadhership-initiative-page .footer-widget h3 {
    color: #fff !important;
}

.leadhership-initiative-page .site-footer a,
.leadhership-initiative-page .footer-widget a {
    color: #b0b0b0 !important;
}

.leadhership-initiative-page .site-footer a:hover,
.leadhership-initiative-page .footer-widget a:hover {
    color: #fff !important;
}

.leadhership-initiative-page .site-info,
.leadhership-initiative-page .site-info * {
    color: #888 !important;
}

.leadhership-initiative-page .site-info a {
    color: #888 !important;
}

.leadhership-initiative-page .site-info a:hover {
    color: #fff !important;
}

/* ============================================
   Page with Sidebar Layout
   ============================================ */
.page-with-sidebar-wrapper {
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
    min-height: calc(100vh - 200px);
}

.page-with-sidebar-wrapper .container {
    max-width: 1200px;
    padding-right: 3rem;
    padding-left: 20px;
    flex: 1;
    min-width: 0;
    margin-right: auto;
    padding-bottom: 3rem;
}

.content-area {
    min-width: 0; /* Prevents grid overflow */
}

/* Sidebar Styles */
.page-with-sidebar-wrapper .sidebar {
    background-color: var(--bg-light);
    padding: 2rem;
    border-radius: 8px 0 0 8px;
    position: relative;
    width: 300px;
    flex-shrink: 0;
    align-self: stretch;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
}

.page-with-sidebar-wrapper .sidebar::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(2.0625rem * 2 + 2.5rem * 1.3 + 1px);
    bottom: 0;
    width: 1px;
    background-color: #e4bc76;
}

/* Create a pseudo-element to extend the background to footer */
.page-template-page-resources .page-with-sidebar-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: -7rem; /* Extend past the main content to reach footer (accounting for footer margin) */
    width: 300px;
    background-color: var(--bg-light);
    z-index: -1;
    pointer-events: none;
}

.sidebar .widget {
    margin-bottom: -8rem;
}

.sidebar .widget:last-child {
    margin-bottom: 0;
}

.sidebar .widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    margin-top: 0;
    color: var(--text-dark);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.sidebar .widget p {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.sidebar .widget p:last-child {
    margin-bottom: 0;
}

.sidebar .widget > *:first-child {
    margin-top: 1.5rem;
}

.sidebar .widget > *:last-child {
    margin-bottom: 0;
}

.sidebar .widget ul {
    list-style-type: circle;
    padding-left: 1rem;
    margin: 0 0 0.25rem 0;
}

.sidebar .widget ul li {
    margin-bottom: 0;
    padding-bottom: 0;
    padding-left: 0;
}

.sidebar .widget ul li:last-child {
    margin-bottom: 0;
}

.sidebar .widget a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sidebar .widget a:hover {
    color: #555;
    text-decoration: underline;
}

/* Responsive: Stack sidebar below content on smaller screens */
@media (max-width: 968px) {
    .page-with-sidebar-wrapper {
        flex-direction: column;
        min-height: auto;
    }

    .page-with-sidebar-wrapper::after {
        display: none;
    }

    .page-with-sidebar-wrapper .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .page-with-sidebar-wrapper .sidebar {
        position: static;
        top: auto;
        width: 100%;
        border-radius: 8px;
        margin-top: 2rem;
        margin-left: 20px;
        margin-right: 20px;
        align-self: auto;
    }
}

/* ============================================
   Trigger Warning Overlay (Resources Page)
   ============================================ */
.trigger-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.95);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* When background image is present, reduce background-color opacity */
.trigger-warning-overlay.has-background-image {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Dark overlay for better text readability when image is present */
.trigger-warning-overlay.has-background-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.trigger-warning-content {
    background-color: var(--bg-white);
    padding: 3rem;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
}

.trigger-warning-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.trigger-warning-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-medium);
    margin-bottom: 2.5rem;
}

.trigger-warning-text p {
    margin-bottom: 1rem;
}

.trigger-warning-text p:last-child {
    margin-bottom: 0;
}

.trigger-warning-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.trigger-warning-button {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
}

.trigger-warning-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.trigger-warning-button:active {
    transform: translateY(0);
}

.trigger-warning-button-home {
    background-color: #94a695;
}

.trigger-warning-button-home:hover {
    background-color: #7a8a7b;
    color: #fff;
}

body.trigger-warning-active {
    overflow: hidden;
}

@media (max-width: 768px) {
    .trigger-warning-content {
        padding: 2rem 1.5rem;
    }

    .trigger-warning-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .trigger-warning-text {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .trigger-warning-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .trigger-warning-button {
        padding: 0.875rem 2rem;
        font-size: 1rem;
        width: 100%;
    }
}

/* Override header navigation and donate button colors */
body.leadhership-initiative-page .main-navigation a {
    color: #94a695 !important;
}

body.leadhership-initiative-page .main-navigation a:hover {
    color: #94a695 !important;
    opacity: 0.8;
}

body.leadhership-initiative-page .main-navigation a::after {
    background-color: #94a695 !important;
}

body.leadhership-initiative-page .main-navigation .current-menu-item > a,
body.leadhership-initiative-page .main-navigation .current_page_item > a {
    color: #94a695 !important;
}

body.leadhership-initiative-page .main-navigation .current-menu-item > a::after,
body.leadhership-initiative-page .main-navigation .current_page_item > a::after {
    background-color: #94a695 !important;
}

/* Override donate button colors */
body.leadhership-initiative-page .donate-button,
body.leadhership-initiative-page .main-navigation .donate-button {
    background-color: #94a695 !important;
    border-color: #94a695 !important;
    color: #ffffff !important;
}

body.leadhership-initiative-page .donate-button *,
body.leadhership-initiative-page .main-navigation .donate-button * {
    color: #ffffff !important;
}

body.leadhership-initiative-page .donate-button:hover,
body.leadhership-initiative-page .main-navigation .donate-button:hover {
    background-color: transparent !important;
    color: #94a695 !important;
    border-color: #94a695 !important;
}

body.leadhership-initiative-page .donate-button:hover *,
body.leadhership-initiative-page .main-navigation .donate-button:hover * {
    color: #94a695 !important;
}

/* ============================================
   Food for Thought Page - Green Color Palette
   ============================================ */
body.food-for-thought-page {
    /* Override CSS custom properties for this page */
    --primary-color: #94a695;
    --primary-dark: #7a8a7b;
    --primary-light: #a8b5a9;
    --accent-color: #94a695;
    --accent-dark: #7a8a7b;
    --bg-gradient-start: #94a695;
    --bg-gradient-end: #a8b5a9;
}

/* Food for Thought Grid */
.food-for-thought-grid-section {
    margin-top: 0rem;
    padding: 2rem 0;
}

.food-for-thought-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.food-for-thought-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.food-for-thought-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.food-for-thought-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.food-for-thought-thumbnail {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.food-for-thought-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.food-for-thought-card:hover .food-for-thought-thumbnail img {
    transform: scale(1.1);
}

.food-for-thought-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 0.9;
    transition: all 0.3s ease;
    pointer-events: none;
}

.food-for-thought-play-button svg {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.food-for-thought-card:hover .food-for-thought-play-button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

@media (max-width: 768px) {
    .food-for-thought-play-button svg {
        width: 60px;
        height: 60px;
    }
}

.food-for-thought-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(148, 166, 149, 0.95) 0%, rgba(148, 166, 149, 0.8) 50%, transparent 100%);
    padding: 1.5rem;
    color: #fff;
    z-index: 2;
    transition: all 0.3s ease;
    max-height: 40%;
    overflow: hidden;
}

.food-for-thought-card:hover .food-for-thought-overlay {
    background: linear-gradient(to top, rgba(148, 166, 149, 0.98) 0%, rgba(148, 166, 149, 0.95) 50%, rgba(148, 166, 149, 0.9) 100%);
    max-height: 100%;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

.food-for-thought-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: margin-bottom 0.3s ease;
}

.food-for-thought-card:hover .food-for-thought-title {
    margin-bottom: 0.75rem;
}

.food-for-thought-excerpt {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.food-for-thought-card:hover .food-for-thought-excerpt {
    opacity: 1;
    max-height: 120px; /* Reduced to ensure Read More link is visible */
    margin-top: 0.5rem;
    -webkit-line-clamp: 4; /* Limit to 4 lines */
    line-clamp: 4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.food-for-thought-read-more {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-shadow: none;
    flex-shrink: 0; /* Prevent Read More from being squeezed */
}

.food-for-thought-read-more:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    color: #000;
    transform: translateY(-1px);
}

.food-for-thought-excerpt a:hover {
    color: #000;
}

/* Apply green colors to navigation and buttons on Food for Thought page */
body.food-for-thought-page .main-navigation a {
    color: #94a695 !important;
}

body.food-for-thought-page .main-navigation a:hover {
    color: #94a695 !important;
    opacity: 0.8;
}

body.food-for-thought-page .main-navigation a::after {
    background-color: #94a695 !important;
}

body.food-for-thought-page .main-navigation .current-menu-item > a,
body.food-for-thought-page .main-navigation .current_page_item > a {
    color: #94a695 !important;
}

body.food-for-thought-page .main-navigation .current-menu-item > a::after,
body.food-for-thought-page .main-navigation .current_page_item > a::after {
    background-color: #94a695 !important;
}

body.food-for-thought-page .donate-button,
body.food-for-thought-page .main-navigation .donate-button {
    background-color: #94a695 !important;
    border-color: #94a695 !important;
    color: #fff !important;
}

body.food-for-thought-page .donate-button:hover,
body.food-for-thought-page .main-navigation .donate-button:hover {
    background-color: transparent !important;
    color: #94a695 !important;
    border-color: #94a695 !important;
}

body.food-for-thought-page .entry-title {
    color: #94a695;
}

body.food-for-thought-page a {
    color: #94a695;
}

body.food-for-thought-page a:hover {
    color: #7a8a7b;
}

@media (max-width: 768px) {
    .food-for-thought-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    .food-for-thought-overlay {
        padding: 1.25rem;
    }

    .food-for-thought-title {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .food-for-thought-grid {
        grid-template-columns: 1fr;
    }
}