/*
Theme Name: NSEMM
Description: Website for NSEMM, the Education Charity
Version: 1.2.0
Author: NSEMM Branding Team
Text Domain: nsemm-theme
Requires at least: 6.0
Tested up to: 6.8.1
Requires PHP: 8.0

Copyright (c) 2025 The National Society for Education, Mentoring and Media (NSEMM)
All Rights Reserved.

Unauthorised copying, modification, distribution, or use of this code or content
is strictly prohibited without prior written permission from NSEMM.

*/


/* =================================================================
   CSS VARIABLES - BRAND COLORS + SPACING SYSTEM
================================================================= */
:root {
    /* Brand Colors */
    --knowledge-gold: #FACD00;
    --inspiration-pink: #FA00CD;
    --discovery-teal: #00FACD;
    --foundational-brown: #443800;
    --university-blue: #1C3B70;
    --midnight: #2B2A2A;
    --background-grey: #E1E1E1;
    --serenity-slate: #AEBCD4;
    --soft-mint: #8BD6AC;
    --coastal-green: #D9FFEC;

    /* SPACING SYSTEM */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    --spacing-3xl: 4rem;      /* 64px */
    --spacing-4xl: 6rem;      /* 96px */

    /* CONTAINER SYSTEM */
    --container-max-width: 1400px;
    --container-padding: 2rem;
    --container-padding-mobile: 1rem;

    /* HEADER SYSTEM */
    --header-height: 140px;
    --header-height-scrolled: 120px;
    --header-height-mobile: 120px;
    --utility-bar-height: 55px;
    --utility-bar-height-scrolled: 50px;

    /* Header floating design */
    --header-bg-initial: #FACD00;
    --header-bg-scrolled: #aebcd4;
    --header-text-initial: #2B2A2A;
    --header-text-scrolled: #1C3B70;
    --header-border-initial: #FACD00;
    --header-border-scrolled: rgba(28, 59, 112, 0.1);
    --page-background: #ffffff;
    --header-floating-margin: 5px;
    --header-floating-radius: 15px;
    --header-transition-duration: 0.4s;
}

/* =================================================================
   BULLETPROOF RESET AND BASE STYLES
================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Readex Pro', sans-serif;
    line-height: 1.6;
    color: var(--midnight);
    background: var(--page-background);
    padding-top: var(--header-height);
    transition: padding-top 0.3s ease;
}

body.scrolled {
    padding-top: var(--header-height-scrolled);
}

/* Admin bar compatibility */
.admin-bar body {
    padding-top: calc(var(--header-height) + 32px);
}

.admin-bar body.scrolled {
    padding-top: calc(var(--header-height-scrolled) + 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar body {
        padding-top: calc(var(--header-height) + 46px);
    }
}

/* =================================================================
   TYPOGRAPHY
================================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

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

a:hover {
    color: var(--inspiration-pink);
}

/* =================================================================
   IMPROVED CONTAINER SYSTEM
================================================================= */
.container,
.hero-container,
.stats-container,
.services-container,
.impact-container,
.header-container,
.utility-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.site-main {
    min-height: 60vh;
    padding-top: 1rem;
}

/* Content wrapper for consistent spacing */
.nsemm-content-wrapper {
    isolation: isolate;
}

.nsemm-content-wrapper > * {
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
}

.nsemm-content-wrapper > *:first-child {
    margin-top: 0 !important;
}

.nsemm-content-wrapper > *:last-child {
    margin-bottom: 0 !important;
}

/* =================================================================
   ENHANCED UTILITY BAR - IMPROVED DESKTOP LAYOUT
================================================================= */
.utility-bar {
    background: var(--university-blue);
    padding: calc(var(--spacing-sm) * 0.8) 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    transition: all var(--header-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: var(--utility-bar-height);
    width: 100%;
    box-sizing: border-box;
}

.utility-bar.scrolled {
    background: var(--header-bg-scrolled);
    padding: calc(var(--spacing-sm) * 0.8) 0;
    border-bottom: 1px solid var(--header-border-scrolled);
    height: var(--utility-bar-height-scrolled);
}

/* IMPROVED UTILITY CONTAINER - RESPONSIVE LAYOUT */
.utility-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-xl);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    height: 100%;
    box-sizing: border-box;
}

.utility-left {
    justify-self: start;
    min-width: 0;
}

.utility-center {
    justify-self: center;
    flex: 1;
    text-align: center;
}

.utility-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-shrink: 0;
}

/* Desktop Navigation Links - Magnet to Right */
.utility-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    flex-wrap: nowrap;
}

.utility-link {
    color: white;
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    border-radius: 20px;
    transition: all var(--header-transition-duration) ease;
    white-space: nowrap;
    font-weight: 500;
    position: relative;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.utility-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateY(-1px);
}

.utility-bar.scrolled .utility-link {
    color: var(--header-text-scrolled);
}

.utility-bar.scrolled .utility-link:hover {
    background: var(--coastal-green);
    color: var(--header-text-scrolled);
}

/* IMPROVED TAGLINE - MAGNET TO LEFT */
.utility-tagline {
    color: var(--knowledge-gold);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--header-transition-duration) ease;
    overflow: hidden;
    text-overflow: ellipsis;
}

.utility-bar.scrolled .utility-tagline {
    color: var(--header-text-scrolled);
    opacity: 0.8;
}

/* Mobile CTA Buttons in Utility Bar */
.utility-mobile-ctas {
    display: none;
    gap: var(--spacing-sm);
    align-items: center;
    flex-shrink: 0;
}

.utility-cta-btn {
    padding: 8px var(--spacing-md);
    font-size: 0.8rem;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--header-transition-duration) ease;
    white-space: nowrap;
    border: 1px solid transparent;
    display: inline-block;
    line-height: 1.2;
    vertical-align: middle;
}

.utility-cta-primary {
    background: var(--knowledge-gold);
    color: var(--foundational-brown);
}

.utility-cta-secondary {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

.utility-cta-btn:hover {
    transform: translateY(-1px);
}

.utility-cta-primary:hover {
    background: white;
    color: var(--university-blue);
}

.utility-cta-secondary:hover {
    background: white;
    color: var(--university-blue);
}

.utility-bar.scrolled .utility-cta-secondary {
    color: var(--header-text-scrolled);
    border-color: var(--header-text-scrolled);
}

.utility-bar.scrolled .utility-cta-primary {
    background: var(--knowledge-gold);
    color: var(--foundational-brown);
}

/* =================================================================
   MAIN HEADER - IMPROVED RESPONSIVE LAYOUT
================================================================= */
.site-header {
    background: var(--header-bg-initial);
    border: 1px solid var(--header-border-initial);
    border-radius: var(--header-floating-radius);
    box-shadow: 0 8px 30px rgba(28, 59, 112, 0.15);
    position: fixed;
    top: calc(var(--utility-bar-height) + var(--header-floating-margin));
    left: var(--header-floating-margin);
    right: var(--header-floating-margin);
    z-index: 1001;
    padding: var(--spacing-md) 0;
    transition: all var(--header-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 auto;
    max-width: calc(var(--container-max-width) + (var(--header-floating-margin) * 2));
    transform: translateY(0);
}

/* Scrolled state */
.site-header.scrolled {
    background: var(--header-bg-scrolled);
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(28, 59, 112, 0.12);
    top: calc(var(--utility-bar-height-scrolled) - 1px);
    left: 0;
    right: 0;
    padding: var(--spacing-sm) 0;
    margin: 0;
    max-width: none;
    border-top: 1px solid var(--header-border-scrolled);
}

/* HEADER CONTAINER - RESPONSIVE GRID */
.header-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-xl);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    transition: all var(--header-transition-duration) ease;
}

/* =================================================================
   LOGO SECTION
================================================================= */
.logo-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
    justify-self: start;
}

.custom-logo,
.site-logo img {
    height: 50px;
    width: auto;
    transition: all 0.3s ease;
}

.site-header.scrolled .custom-logo,
.site-header.scrolled .site-logo img {
    height: 30px;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.site-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--header-text-initial);
    margin: 0;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.site-header.scrolled .site-title {
    font-size: 1.3rem;
    color: var(--header-text-scrolled);
}

.site-title a {
    color: inherit;
    text-decoration: none;
}

/* =================================================================
   IMPROVED NAVIGATION - CONSISTENT HOVER BEHAVIOR
================================================================= */
.main-navigation {
    justify-self: center;
    display: flex;
    justify-content: center;
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.main-navigation-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.main-navigation ul,
#primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: clamp(0.5rem, 2.5vw, 2.5rem);
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
}

.site-header.scrolled .main-navigation ul,
.site-header.scrolled #primary-menu {
    gap: var(--nav-gap-scrolled, 1.5rem);
}

.main-navigation li,
#primary-menu .menu-item {
    position: relative;
    flex-shrink: 0;
}

.main-navigation a,
#primary-menu .nav-link {
    color: var(--header-text-initial);
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    padding: var(--spacing-xs) 0;
    transition: all var(--header-transition-duration) ease;
    position: relative;
    white-space: nowrap;
}

.site-header.scrolled .main-navigation a,
.site-header.scrolled #primary-menu .nav-link {
    color: var(--header-text-scrolled);
    font-size: clamp(13px, 1.4vw, 15px);
}

/* CONSOLIDATED HOVER BEHAVIOR - Desktop & Scrolled */
.main-navigation li a:hover,
#primary-menu li .nav-link:hover,
.site-header.scrolled .main-navigation li a:hover,
.site-header.scrolled #primary-menu li .nav-link:hover {
    color: var(--inspiration-pink);
}

.main-navigation li a::after,
#primary-menu li .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--knowledge-gold);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* COMPLETE CURRENT MENU HIGHLIGHTING CONTROL */

/* Remove background-color highlighting from ancestor pages - only highlight current page */
.main-navigation .current-menu-ancestor:not(.current-menu-item) a,
.main-navigation .current-page-ancestor:not(.current-page-item) a,
.main-navigation .current_page_ancestor:not(.current_page_item) a,
#primary-menu .current-menu-ancestor:not(.current-menu-item) a,
#primary-menu .current-page-ancestor:not(.current-page-item) a,
#primary-menu .current_page_ancestor:not(.current_page_item) a,
.site-header .main-navigation .current-menu-ancestor:not(.current-menu-item) a,
.site-header .main-navigation .current-page-ancestor:not(.current-page-item) a,
.site-header .main-navigation .current_page_ancestor:not(.current_page_item) a,
.site-header #primary-menu .current-menu-ancestor:not(.current-menu-item) a,
.site-header #primary-menu .current-page-ancestor:not(.current-page-item) a,
.site-header #primary-menu .current_page_ancestor:not(.current_page_item) a,
header .main-navigation .current-menu-ancestor:not(.current-menu-item) a,
header .main-navigation .current-page-ancestor:not(.current-page-item) a,
header .main-navigation .current_page_ancestor:not(.current_page_item) a,
header #primary-menu .current-menu-ancestor:not(.current-menu-item) a,
header #primary-menu .current-page-ancestor:not(.current-page-item) a,
header #primary-menu .current_page_ancestor:not(.current_page_item) a {
    background-color: transparent !important;
    background: transparent !important;
}

/* Ensure current menu items get highlighting */
.main-navigation .current-menu-item a::after,
.main-navigation .current-page-item a::after,
.main-navigation .current_page_item a::after {
    width: 100% !important;
}

/* Remove ::after highlighting from ancestor pages */
.main-navigation .current-menu-ancestor:not(.current-menu-item) a::after,
.main-navigation .current-page-ancestor:not(.current-page-item) a::after,
.main-navigation .current_page_ancestor:not(.current_page_item) a::after {
    width: 0 !important;
}

.main-navigation li a:hover::after,
#primary-menu li .nav-link:hover::after {
    width: 100%;
}

/* =================================================================
   MAIN NAVIGATION ISOLATION - UNBREAKABLE PADDING PROTECTION
   Ensure main navigation padding is never affected by any other CSS
================================================================= */

/* Main navigation links - ABSOLUTE PRIORITY */
.site-header .main-navigation a,
.site-header #primary-menu .nav-link,
header .main-navigation a,
header #primary-menu .nav-link,
#site-header .main-navigation a,
#site-header #primary-menu .nav-link,
nav .main-navigation a,
nav #primary-menu .nav-link {
    padding: var(--spacing-xs) 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    color: var(--header-text-initial) !important;
    font-weight: 600 !important;
    font-size: clamp(14px, 1.5vw, 16px) !important;
    transition: all var(--header-transition-duration) ease !important;
    position: relative !important;
    white-space: nowrap !important;
    display: inline-block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: normal !important;
    vertical-align: baseline !important;
    float: none !important;
    clear: none !important;
    overflow: visible !important;
    cursor: pointer !important;
}

/* Scrolled state protection */
.site-header.scrolled .main-navigation a,
.site-header.scrolled #primary-menu .nav-link,
header.scrolled .main-navigation a,
header.scrolled #primary-menu .nav-link,
#site-header.scrolled .main-navigation a,
#site-header.scrolled #primary-menu .nav-link {
    color: var(--header-text-scrolled) !important;
    font-size: clamp(13px, 1.4vw, 15px) !important;
    padding: var(--spacing-xs) 0 !important;
}

/* Hover state protection */
.site-header .main-navigation li a:hover,
.site-header #primary-menu li .nav-link:hover,
header .main-navigation li a:hover,
header #primary-menu li .nav-link:hover,
#site-header .main-navigation li a:hover,
#site-header #primary-menu li .nav-link:hover,
.site-header.scrolled .main-navigation li a:hover,
.site-header.scrolled #primary-menu li .nav-link:hover {
    color: var(--inspiration-pink) !important;
    text-decoration: none !important;
    padding: var(--spacing-xs) 0 !important;
}

/* Focus state protection */
.site-header .main-navigation a:focus,
.site-header #primary-menu .nav-link:focus,
header .main-navigation a:focus,
header #primary-menu .nav-link:focus,
#site-header .main-navigation a:focus,
#site-header #primary-menu .nav-link:focus {
    color: var(--inspiration-pink) !important;
    text-decoration: none !important;
    padding: var(--spacing-xs) 0 !important;
    outline: 2px solid var(--inspiration-pink) !important;
    outline-offset: 2px !important;
}

/* After pseudo-element protection for underline */
.site-header .main-navigation a::after,
.site-header #primary-menu .nav-link::after,
header .main-navigation a::after,
header #primary-menu .nav-link::after,
#site-header .main-navigation a::after,
#site-header #primary-menu .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 3px !important;
    background: var(--knowledge-gold) !important;
    border-radius: 3px !important;
    transition: width 0.3s ease !important;
}

.site-header .main-navigation li a:hover::after,
.site-header #primary-menu li .nav-link:hover::after,
header .main-navigation li a:hover::after,
header #primary-menu li .nav-link:hover::after,
#site-header .main-navigation li a:hover::after,
#site-header #primary-menu li .nav-link:hover::after {
    width: 100% !important;
}

/* HIGH SPECIFICITY CURRENT MENU HIGHLIGHTING CONTROL - MATCHES HOVER SPECIFICITY */

/* Ensure current menu items get highlighting with maximum specificity */
.site-header .main-navigation .current-menu-item a::after,
.site-header #primary-menu .current-menu-item .nav-link::after,
header .main-navigation .current-menu-item a::after,
header #primary-menu .current-menu-item .nav-link::after,
#site-header .main-navigation .current-menu-item a::after,
#site-header #primary-menu .current-menu-item .nav-link::after,
.site-header .main-navigation .current-page-item a::after,
.site-header #primary-menu .current-page-item .nav-link::after,
header .main-navigation .current-page-item a::after,
header #primary-menu .current-page-item .nav-link::after,
#site-header .main-navigation .current-page-item a::after,
#site-header #primary-menu .current-page-item .nav-link::after,
.site-header .main-navigation .current_page_item a::after,
.site-header #primary-menu .current_page_item .nav-link::after,
header .main-navigation .current_page_item a::after,
header #primary-menu .current_page_item .nav-link::after,
#site-header .main-navigation .current_page_item a::after,
#site-header #primary-menu .current_page_item .nav-link::after {
    width: 100% !important;
}

/* Remove highlighting from ancestor pages with maximum specificity */
.site-header .main-navigation .current-menu-ancestor:not(.current-menu-item) a::after,
.site-header #primary-menu .current-menu-ancestor:not(.current-menu-item) .nav-link::after,
header .main-navigation .current-menu-ancestor:not(.current-menu-item) a::after,
header #primary-menu .current-menu-ancestor:not(.current-menu-item) .nav-link::after,
#site-header .main-navigation .current-menu-ancestor:not(.current-menu-item) a::after,
#site-header #primary-menu .current-menu-ancestor:not(.current-menu-item) .nav-link::after,
.site-header .main-navigation .current-page-ancestor:not(.current-page-item) a::after,
.site-header #primary-menu .current-page-ancestor:not(.current-page-item) .nav-link::after,
header .main-navigation .current-page-ancestor:not(.current-page-item) a::after,
header #primary-menu .current-page-ancestor:not(.current-page-item) .nav-link::after,
#site-header .main-navigation .current-page-ancestor:not(.current-page-item) a::after,
#site-header #primary-menu .current-page-ancestor:not(.current-page-item) .nav-link::after,
.site-header .main-navigation .current_page_ancestor:not(.current_page_item) a::after,
.site-header #primary-menu .current_page_ancestor:not(.current_page_item) .nav-link::after,
header .main-navigation .current_page_ancestor:not(.current_page_item) a::after,
header #primary-menu .current_page_ancestor:not(.current_page_item) .nav-link::after,
#site-header .main-navigation .current_page_ancestor:not(.current_page_item) a::after,
#site-header #primary-menu .current_page_ancestor:not(.current_page_item) .nav-link::after {
    width: 0 !important;
}





/* =================================================================
   CTA BUTTONS - HIDE AT 1180PX BREAKPOINT
================================================================= */
.header-cta {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-shrink: 0;
    justify-self: end;
}

.header-cta-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 25px;
    text-decoration: none;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.site-header.scrolled .header-cta-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 14px;
}

.header-cta-primary {
    background: var(--foundational-brown);
    color: white;
    border-color: var(--foundational-brown);
}

.header-cta-primary:hover {
    background: var(--university-blue);
    color: white;
    border-color: var(--university-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(28, 59, 112, 0.3);
}

.header-cta-secondary {
    background: transparent;
    color: var(--university-blue);
    border-color: var(--university-blue);
}

.header-cta-secondary:hover {
    background: var(--university-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(28, 59, 112, 0.3);
}

/* =================================================================
   WORDPRESS CORE OVERRIDES
================================================================= */
.entry-content > *:first-child {
    margin-top: 0 !important;
}

.entry-content > *:last-child {
    margin-bottom: 0 !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
.entry-content h6:first-child {
    margin-top: 0;
}

.entry-content p {
    margin-bottom: var(--spacing-md);
}

.entry-content ul,
.entry-content ol {
    margin: var(--spacing-lg) 0;
    padding-left: var(--spacing-xl);
}

.entry-content li {
    margin-bottom: var(--spacing-sm);
}

.entry-content blockquote {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-xl);
    background: var(--coastal-green);
    border-left: 4px solid var(--knowledge-gold);
    border-radius: 0 15px 15px 0;
}

.entry-content img {
    margin: var(--spacing-lg) 0;
    border-radius: 15px;
}

.entry-content .wp-block-image {
    margin: var(--spacing-xl) 0;
}

/* =================================================================
   WORDPRESS TEXT ALIGNMENT FIX
================================================================= */
.has-text-align-center,
.wp-block-heading.has-text-align-center,
.entry-content .has-text-align-center,
.nsemm-content-wrapper .has-text-align-center {
    text-align: center !important;
}

.has-text-align-left,
.wp-block-heading.has-text-align-left,
.entry-content .has-text-align-left,
.nsemm-content-wrapper .has-text-align-left {
    text-align: left !important;
}

.has-text-align-right,
.wp-block-heading.has-text-align-right,
.entry-content .has-text-align-right,
.nsemm-content-wrapper .has-text-align-right {
    text-align: right !important;
}

/* =================================================================
   WORDPRESS COLUMNS LAYOUT FIX
================================================================= */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.wp-block-columns.alignwide {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.wp-block-columns.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-xl);
}

.wp-block-columns.are-vertically-aligned-center {
    align-items: center;
    justify-content: center;
}

.wp-block-column {
    flex: 1;
    min-width: 250px;
    max-width: 350px;
    margin-bottom: 0;
}

/* =================================================================
   RESPONSIVE DESIGN - CONSOLIDATED BREAKPOINTS (ALL 768PX)
================================================================= */

/* Desktop Large - 1400px+ */
@media (min-width: 1400px) {
    :root {
        --nav-gap-scrolled: 1.5rem;
    }

    .header-container {
        gap: 2rem;
    }

    .main-navigation ul,
    #primary-menu {
        gap: 1.5rem !important;
    }

    .main-navigation li,
    #primary-menu > li {
        margin: 0 !important;
    }

    .main-navigation a,
    #primary-menu .nav-link {
        font-size: 15px;
    }
}

/* Desktop - 1350px to 1399px */
@media (max-width: 1399px) and (min-width: 1350px) {
    :root {
        --nav-gap-scrolled: 1.2rem;
    }

    .header-container {
        gap: 1.5rem;
    }

    .main-navigation ul,
    #primary-menu {
        gap: 1.2rem !important;
    }

    .main-navigation li,
    #primary-menu > li {
        margin: 0 !important;
    }

    .main-navigation a,
    #primary-menu .nav-link {
        font-size: 14px;
    }
}

/* Desktop - 1251px to 1349px */
@media (max-width: 1349px) and (min-width: 1251px) {
    :root {
        --nav-gap-scrolled: 0.8rem;
    }

    .header-container {
        gap: 1rem;
    }

    .main-navigation ul,
    #primary-menu {
        gap: 0.8rem !important;
    }

    .main-navigation li,
    #primary-menu > li {
        margin: 0 !important;
    }

    .main-navigation a,
    #primary-menu .nav-link {
        font-size: 13px;
    }

    .custom-logo,
    .site-logo img {
        height: 38px;
    }
}

/* REMOVED - Duplicate/conflicting breakpoint - consolidated into 1250px rule */

/* =================================================================
   NUCLEAR OVERRIDE - 1180px to 1250px
   ABSOLUTE MAXIMUM PRIORITY - NOTHING CAN OVERRIDE THIS
================================================================= */
@media screen and (max-width: 1250px) and (min-width: 1180px) {
    /* Smart scrolled state gap */
    :root {
        --nav-gap-scrolled: clamp(0.15rem, 0.8vw, 0.6rem) !important;
    }

    /* Maximum specificity header container */
    body .site-header .header-container,
    body .site-header.scrolled .header-container,
    body.admin-bar .site-header .header-container,
    body.admin-bar .site-header.scrolled .header-container {
        gap: 0.3rem !important;
    }

    /* Smart gap reduction - gets smaller as space decreases */
    body .main-navigation ul,
    body #primary-menu,
    body .site-header .main-navigation ul,
    body .site-header #primary-menu,
    body .site-header.scrolled .main-navigation ul,
    body .site-header.scrolled #primary-menu,
    body.admin-bar .site-header .main-navigation ul,
    body.admin-bar .site-header #primary-menu,
    body.admin-bar .site-header.scrolled .main-navigation ul,
    body.admin-bar .site-header.scrolled #primary-menu,
    html body .site-header .main-navigation ul,
    html body .site-header #primary-menu {
        gap: clamp(0.15rem, 0.8vw, 0.6rem) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Smart menu item compression */
    body .main-navigation li,
    body #primary-menu > li,
    body .main-navigation li.menu-item,
    body #primary-menu li.menu-item,
    body.admin-bar .main-navigation li,
    body.admin-bar #primary-menu > li {
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    /* Smart responsive text - never smaller than 13px */
    body .main-navigation a,
    body #primary-menu a,
    body #primary-menu .nav-link,
    body #primary-menu > li > a,
    body .site-header .main-navigation a,
    body .site-header #primary-menu a,
    body .site-header.scrolled .main-navigation a,
    body .site-header.scrolled #primary-menu a,
    body.admin-bar .site-header .main-navigation a,
    body.admin-bar .site-header #primary-menu a,
    html body .main-navigation a,
    html body #primary-menu a {
        font-size: clamp(13px, 1.1vw, 15px) !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* Shrink branding */
    body .site-branding {
        flex-shrink: 0;
        margin-right: 0.3rem !important;
    }

    body .custom-logo,
    body .site-logo img,
    body .site-header .custom-logo,
    body .site-header .site-logo img {
        height: 30px !important;
        width: auto !important;
    }

    body .site-title {
        font-size: 1.1rem !important;
    }

    /* Shrink CTA button */
    body .header-cta-btn,
    body .site-header .header-cta-btn {
        padding: 0.2rem 0.5rem !important;
        font-size: clamp(12px, 1vw, 14px) !important;
    }

}

/* Utility bar adjustments at 1250px - moved after main fix */
@media (max-width: 1250px) {
    .utility-tagline {
        display: none;
    }

    .utility-container {
        grid-template-columns: auto 1fr;
    }

    .utility-left {
        display: none;
    }
}

/* CRITICAL: CTA BUTTONS SWITCH FROM MAIN HEADER TO UTILITY BAR AT 1180PX */
@media (max-width: 1180px) {
    .header-cta.desktop-cta {
        display: none !important;
    }

    .header-container {
        grid-template-columns: auto 1fr;
        gap: var(--spacing-lg);
    }

    .utility-mobile-ctas {
        display: flex;
    }
}

/* Hide utility navigation links at smaller screens */
@media (max-width: 1005px) {
    .utility-links {
        display: none;
    }

    .utility-container {
        grid-template-columns: 1fr auto;
    }

    .utility-right {
        gap: var(--spacing-md);
    }
}

/* Tablet styles - 768px to 1180px */
@media (max-width: 1180px) and (min-width: 768px) {
    :root {
        --container-padding: var(--container-padding-mobile);
        --header-height: var(--header-height-mobile);
        --header-height-scrolled: calc(var(--header-height-mobile) - 10px);
        --header-floating-margin: 5px;
        --header-floating-radius: 10px;
    }

    .main-navigation ul,
    #primary-menu {
        gap: 1.5rem;
    }

    .main-navigation a,
    #primary-menu .nav-link {
        font-size: 14px;
    }
}

/* MOBILE STYLES - SINGLE CONSOLIDATED 768PX BREAKPOINT */
@media (max-width: 768px) {
    :root {
        --container-padding: var(--container-padding-mobile);
        --header-height: 80px;
        --header-height-scrolled: 70px;
        --header-floating-margin: 0px;
        --header-floating-radius: 0px;
    }

    body {
        padding-top: calc(80px + var(--utility-bar-height));
    }

    body.scrolled {
        padding-top: calc(70px + var(--utility-bar-height-scrolled));
    }

    /* Header is always full width on mobile */
    .site-header {
        left: 0;
        right: 0;
        border-radius: 0;
        top: calc(var(--utility-bar-height) - 5px);
        box-shadow: 0 2px 10px rgba(28, 59, 112, 0.1);
        padding: var(--spacing-sm) 0;
    }

    .site-header.scrolled {
        top: calc(var(--utility-bar-height-scrolled) - 5px);
        padding: var(--spacing-xs) 0;
    }

    /* MOBILE HEADER LAYOUT - STACKED AND CENTERED */
    .header-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 0 var(--spacing-md);
        text-align: center;
    }

    .logo-section {
        order: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
    }

    .main-navigation {
        order: 2;
        width: 100%;
        justify-content: center;
    }

    .main-navigation-wrapper {
        width: 100%;
        justify-content: center;
    }

    /* SINGLE LINE MOBILE MENU - CENTERED WITH MOBILE-SPECIFIC HOVER */
    .main-navigation ul,
    #primary-menu {
        flex-direction: row !important;
        gap: var(--spacing-sm) !important;
        text-align: center;
        width: auto !important;
        padding: 0 !important;
        background: transparent;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        justify-content: center;
        flex-wrap: wrap;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        margin: 0 auto;
    }

    .main-navigation a,
    #primary-menu .nav-link {
        font-size: 0.85rem !important;
        padding: 4px 6px !important;
        display: block;
        border-radius: 15px;
        transition: all 0.3s ease;
        white-space: nowrap;
        color: var(--header-text-initial);
        background: transparent;
        line-height: 1 !important;
        height: auto;
        min-height: auto;
    }

    .site-header.scrolled .main-navigation a,
    .site-header.scrolled #primary-menu .nav-link {
        color: var(--header-text-scrolled);
    }

    /* MOBILE-SPECIFIC HOVER: coastal-green background + university-blue text */
    .main-navigation li a:hover,
    #primary-menu li .nav-link:hover {
        background: var(--coastal-green);
        color: var(--university-blue);
    }

    .main-navigation li a::after,
    #primary-menu li .nav-link::after {
        display: none;
    }

    /* Hide desktop CTA buttons completely on mobile */
    .header-cta.desktop-cta {
        display: none !important;
    }


    /* Mobile utility bar adjustments */
    .utility-bar {
        height: calc(var(--utility-bar-height) * 0.9);
    }

    .utility-bar.scrolled {
        height: calc(var(--utility-bar-height-scrolled) * 0.9);
    }

    .utility-container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        gap: var(--spacing-md);
        grid-template-columns: 1fr auto;
    }

    .utility-mobile-ctas {
        gap: var(--spacing-xs);
    }

    .utility-cta-btn {
        padding: 6px var(--spacing-sm);
        font-size: 0.75rem;
        line-height: 1.2;
    }

    /* Mobile section spacing */
    .section {
        padding: var(--spacing-2xl) 0;
    }

    .section-small {
        padding: var(--spacing-xl) 0;
    }

    .section-large {
        padding: var(--spacing-3xl) 0;
    }
}

/* Small mobile styles - 480px and below */
@media (max-width: 480px) {
    .header-container {
        padding: 0 var(--spacing-sm);
        gap: 2px;
    }

    .main-navigation ul,
    #primary-menu {
        gap: var(--spacing-xs) !important;
        padding: 0 !important;
    }

    .main-navigation a,
    #primary-menu .nav-link {
        font-size: 0.8rem !important;
        padding: 3px 5px !important;
        line-height: 1 !important;
    }

    .custom-logo,
    .site-logo img {
        height: 35px;
    }

    .site-title {
        font-size: 1rem;
    }

    /* Hide utility bar on very small screens to save space */
    .utility-bar {
        display: none;
    }

    body {
        padding-top: 80px;
    }

    body.scrolled {
        padding-top: 70px;
    }

    .site-header {
        top: 0;
    }

    .site-header.scrolled {
        top: 0;
    }
}

/* =================================================================
   ENHANCED FOOTER
================================================================= */
#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
}

.site-footer {
    background: var(--university-blue);
    color: white;
    padding: var(--spacing-3xl) 0 var(--spacing-md);
    margin-top: auto;
    width: 100%;
    position: relative;
    min-height: fit-content;
}

.site-footer * {
    margin-bottom: 0;
}

.site-footer .container {
    margin-bottom: 0;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    margin-bottom: 0;
}

.footer-widgets {
    margin-bottom: var(--spacing-xl);
}

/* =================================================================
   BACK TO TOP BUTTON
================================================================= */
.back-to-top {
    position: fixed !important;
    bottom: 32px !important;
    right: 32px !important;
    left: auto !important;
    z-index: 999;
    /* Apple-style frosted glass background */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: var(--foundational-brown);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Apple-style glass shadow */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    /* Smooth transitions for all properties */
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                bottom 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease,
                backdrop-filter 0.3s ease,
                box-shadow 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    /* Prevent any layout shifts */
    will-change: opacity, visibility, transform, bottom;
}

/* Add yellow tint overlay for theme colors */
.back-to-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg, rgba(250, 205, 0, 0.4) 0%, rgba(250, 205, 0, 0.2) 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Ensure the icon stays above the overlay */
.back-to-top-icon {
    position: relative;
    z-index: 2;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top.footer-visible {
    /* JavaScript handles dynamic positioning */
    /* Smooth transition handled by main .back-to-top rule */
}

.back-to-top:hover {
    /* Keep frosted glass background */
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    color: var(--university-blue);
    transform: translateY(-3px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Enhanced hover tint */
.back-to-top:hover::before {
    background: linear-gradient(135deg, rgba(250, 205, 0, 0.6) 0%, rgba(250, 205, 0, 0.3) 100%);
}

.back-to-top.footer-visible:hover {
    transform: translateY(-3px);
}

.back-to-top-icon {
    font-size: 1.2rem;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

/* Bounce animation for back-to-top button */
@keyframes backToTopBounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-15px);
    }
    70% {
        transform: translateY(-7px);
    }
    90% {
        transform: translateY(-3px);
    }
}

/* =================================================================
   SECTION SPACING SYSTEM
================================================================= */
.section {
    padding: var(--spacing-4xl) 0;
}

.section-small {
    padding: var(--spacing-2xl) 0;
}

.section-large {
    padding: var(--spacing-4xl) 0;
}

/* =================================================================
   SPACING UTILITIES
================================================================= */
.nsemm-margin-top-xs { margin-top: var(--spacing-xs) !important; }
.nsemm-margin-top-sm { margin-top: var(--spacing-sm) !important; }
.nsemm-margin-top-md { margin-top: var(--spacing-md) !important; }
.nsemm-margin-top-lg { margin-top: var(--spacing-lg) !important; }
.nsemm-margin-top-xl { margin-top: var(--spacing-xl) !important; }
.nsemm-margin-top-2xl { margin-top: var(--spacing-2xl) !important; }
.nsemm-margin-top-3xl { margin-top: var(--spacing-3xl) !important; }
.nsemm-margin-top-4xl { margin-top: var(--spacing-4xl) !important; }

.nsemm-margin-bottom-xs { margin-bottom: var(--spacing-xs) !important; }
.nsemm-margin-bottom-sm { margin-bottom: var(--spacing-sm) !important; }
.nsemm-margin-bottom-md { margin-bottom: var(--spacing-md) !important; }
.nsemm-margin-bottom-lg { margin-bottom: var(--spacing-lg) !important; }
.nsemm-margin-bottom-xl { margin-bottom: var(--spacing-xl) !important; }
.nsemm-margin-bottom-2xl { margin-bottom: var(--spacing-2xl) !important; }
.nsemm-margin-bottom-3xl { margin-bottom: var(--spacing-3xl) !important; }
.nsemm-margin-bottom-4xl { margin-bottom: var(--spacing-4xl) !important; }

/* =================================================================
   ACCESSIBILITY
================================================================= */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    left: -9999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    clip: auto;
    height: auto;
    left: 6px;
    top: 7px;
    width: auto;
    z-index: 999999;
    color: var(--university-blue);
    background: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
}

.site-header *:focus,
.utility-bar *:focus {
    outline: 2px solid var(--university-blue);
    outline-offset: 2px;
}

.nsemm-focused {
    outline: 2px solid var(--university-blue) !important;
    outline-offset: 2px !important;
}

/* =================================================================
   ANIMATIONS
================================================================= */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 0.2; }
    100% { transform: scale(1); opacity: 0.5; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* =================================================================
   HIGH CONTRAST AND ACCESSIBILITY FIXES
================================================================= */
@media (prefers-contrast: high) {
    .site-header {
        border-bottom: 2px solid var(--university-blue);
    }

    .utility-bar {
        border-bottom: 2px solid white;
    }


    .header-cta-btn {
        border-width: 3px;
    }

    .nsemm-focused {
        outline-width: 3px !important;
    }

    .back-to-top {
        border: 2px solid currentColor;
    }
}

/* =================================================================
   REDUCED MOTION SUPPORT
================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transform: none !important;
    }

    .animate-on-scroll,
    .fade-in,
    .back-to-top {
        transition: none !important;
        animation: none !important;
    }
}

/* =================================================================
   PRINT STYLES
================================================================= */
@media print {
    .utility-bar,
    .site-header,
    .header-cta,
    .site-footer,
    .back-to-top {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
        padding-top: 0;
    }

    .container {
        padding: 0;
        max-width: none;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}

/* =================================================================
   RESPONSIVE UTILITIES - CONSOLIDATED
================================================================= */
/* Show/hide elements at different breakpoints */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
    .show-desktop { display: block !important; }
    .show-mobile { display: none !important; }
}

/* Improved container responsiveness */
@media (min-width: 1200px) {
    .container-wide {
        max-width: 1600px;
    }
}

@media (max-width: 1199px) {
    .container {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}

/* WordPress Editor Styles */
.block-editor-page .editor-styles-wrapper {
    font-family: 'Readex Pro', sans-serif;
    padding: var(--spacing-lg);
}

.editor-styles-wrapper .container {
    padding-left: 0;
    padding-right: 0;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    font-family: 'Sora', sans-serif;
}

/* =================================================================
   HOMEPAGE SECTIONS - HERO, SERVICES, FUTURE
================================================================= */

/* Hero Section */
.hero-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl);
    max-width: var(--container-max-width);
    margin: 0 auto;
    gap: var(--spacing-xl);
}

.hero-image {
    width: 100%;
    max-width: 600px;
    height: 350px;
    border-radius: var(--spacing-md);
    overflow: hidden;                    /* Hide overflow when image scales */
    box-shadow: 0 4px 15px rgba(28, 59, 112, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;                  /* Ensure proper positioning */
}

.hero-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(28, 59, 112, 0.15);
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;                   /* Maintain aspect ratio within frame */
    display: block;
    transition: transform 0.3s ease;     /* Only transform transition */
    margin: 0;                          /* Remove any default margins */
    padding: 0;                         /* Remove any default padding */
    vertical-align: top;                /* Prevent baseline spacing issues */
    line-height: 0;                     /* Remove line-height spacing */
}

.hero-image:hover img {
    transform: scale(1.02);              /* Subtle scale increase on hover */
}


.hero-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--university-blue);
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    line-height: 1.6;
    color: var(--midnight);
    margin-bottom: var(--spacing-xl);
}

/* Services Section - Enhanced from existing scoped-services */
.scoped-services .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.scoped-services .services-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-xl);
}

.scoped-services .services-header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.scoped-services .services-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--university-blue);
    margin-bottom: var(--spacing-md);
}

.scoped-services .services-subtitle {
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: var(--midnight);
    max-width: 600px;
    margin: 0 auto;
}

.scoped-services a.service-card {
    display: block;
    background: #fff;
    border-radius: var(--spacing-md);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(28, 59, 112, 0.08);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
}

.scoped-services a.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(28, 59, 112, 0.15);
    border-color: var(--coastal-green);
}

.scoped-services .service-image {
    width: 100%;
    height: 250px;
    border-radius: var(--spacing-md) var(--spacing-md) 0 0;
    overflow: hidden;
    position: relative;
}

.scoped-services .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.3s ease;
}

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

.scoped-services .service-content {
    padding: var(--spacing-xl);
    position: relative;
}

.scoped-services .service-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--university-blue);
    margin-bottom: var(--spacing-sm);
}

.scoped-services .service-description {
    color: var(--midnight);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

.scoped-services .learn-more {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--university-blue);
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    transform: translateX(-10px);
}

.scoped-services a.service-card:hover .learn-more {
    opacity: 1;
    transform: translateX(0);
}

.scoped-services .learn-more::after {
    content: '→';
    transition: transform 0.3s ease;
}

.scoped-services a.service-card:hover .learn-more::after {
    transform: translateX(4px);
}

/* Future Section */
.future-section {
    padding: var(--spacing-4xl) 0;
    background: linear-gradient(135deg, #fafafa, #f0f8ff);
}

.future-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-xl);
    gap: var(--spacing-2xl);
}

.future-text {
    flex: 1 1 400px;
    min-width: 280px;
}

.future-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--university-blue);
    line-height: 1.2;
}

.future-text p {
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
    color: var(--midnight);
}

.future-image-wrapper {
    flex: 1 1 400px;
    min-width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.future-image {
    width: 100%;
    max-width: 600px;
    height: 400px;
    border-radius: var(--spacing-md);
    box-shadow: 0 8px 25px rgba(28, 59, 112, 0.12);
    overflow: hidden;                    /* Hide overflow when image scales */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    line-height: 0;                     /* Prevent spacing issues */
}

.future-image:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(28, 59, 112, 0.18);
}

.future-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;                   /* Maintain aspect ratio within frame */
    display: block;
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s ease;     /* Only transform transition */
    vertical-align: top;                /* Prevent baseline spacing issues */
    margin: 0;                          /* Remove any default margins */
    padding: 0;                         /* Remove any default padding */
}

.future-image:hover img {
    transform: scale(1.02);              /* Consistent scale with hero */
}

/* Button Styling for Future Section */
.future-text .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--knowledge-gold);
    color: var(--foundational-brown);
    text-decoration: none;
    border-radius: 25px;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid var(--knowledge-gold);
    box-shadow: 0 4px 15px rgba(250, 205, 0, 0.3);
}

.future-text .btn:hover {
    background: var(--university-blue);
    color: white;
    border-color: var(--university-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(28, 59, 112, 0.3);
}

.future-text .btn::after {
    content: '→';
    transition: transform 0.3s ease;
}

.future-text .btn:hover::after {
    transform: translateX(3px);
}

/* =================================================================
   RESPONSIVE DESIGN FOR HOMEPAGE SECTIONS
================================================================= */

/* Tablet styles */
@media (max-width: 1024px) {
    .hero-container,
    .future-wrapper {
        gap: var(--spacing-xl);
    }

    .scoped-services .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-lg);
    }
}

/* Mobile styles - CONSOLIDATED 768PX */
@media (max-width: 768px) {
    .hero-container,
    .future-wrapper {
        flex-direction: column;
        padding: var(--spacing-lg);
        gap: var(--spacing-lg);
    }

    .hero-content,
    .hero-visual,
    .future-text,
    .future-image-wrapper {
        flex: 1 1 100%;
        padding: 0;
    }

    .hero-image {
        height: 280px;
        max-width: 100%;
    }

    .scoped-services .services-container {
        padding: var(--spacing-lg);
    }

    .scoped-services .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .scoped-services .service-image {
        height: 200px;
    }

    .future-image-wrapper {
        max-width: 100%;
    }

    .future-image {
        max-width: 100%;
    }
}

/* Small mobile styles */
@media (max-width: 480px) {
    .hero-container,
    .future-wrapper,
    .scoped-services .services-container {
        padding: var(--spacing-md);
    }

    .hero-image {
        height: 250px;
    }

    .scoped-services .service-content {
        padding: var(--spacing-lg);
    }

    /* Mobile Footer Styles */
    .site-footer {
        font-size: 1.1rem;
        padding: var(--spacing-3xl) 0 var(--spacing-lg);
    }

    .footer-bottom {
        font-size: 1rem;
    }

    /* Fundraising regulator positioning on mobile */
    .fundraising-regulator-inline {
        display: block !important;
        order: -1;
        margin-bottom: var(--spacing-md);
        text-align: center;
    }

    .footer-bottom .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .hero-image:hover,
    .future-image:hover,
    .scoped-services a.service-card:hover {
        transform: none !important;
    }

    .hero-image img,
    .future-image img,
    .scoped-services .service-image img {
        transition: none !important;
    }
}

/* =================================================================
   NUCLEAR OVERRIDE: Force transparent backgrounds on navigation ancestor links
   This targets any inline style="background-color: rgb(250, 205, 0)"
================================================================= */
html body header .main-navigation .current-menu-ancestor:not(.current-menu-item) > a[style*="background"],
html body .site-header .main-navigation .current-menu-ancestor:not(.current-menu-item) > a[style*="background"],
html body .main-navigation .current-page-ancestor:not(.current-page-item) > a[style*="background"],
html body .site-header .main-navigation .current-page-ancestor:not(.current-page-item) > a[style*="background"],
html body #primary-menu .current-menu-ancestor:not(.current-menu-item) > a[style*="background"],
html body #primary-menu .current-page-ancestor:not(.current-page-item) > a[style*="background"],

/* NUCLEAR OVERRIDE: Disable ALL active page highlighting */
a[aria-current="page"],
.main-navigation a[aria-current="page"],
.utility-bar a[aria-current="page"],
nav a[aria-current="page"],
header a[aria-current="page"],
*[aria-current="page"],
*.current-menu-item a,
*.current-page-item a,
*.current-menu-ancestor a,
*.current-page-ancestor a,
*.current_page_item a,
*.current_page_ancestor a,
*.current_menu_item a,
*.current_menu_ancestor a {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Remove underlines from button links */
button a,
.btn a,
[class*="btn"] a,
[class*="button"] a,
a[class*="btn"],
a[class*="button"] {
    text-decoration: none !important;
}

/* =================================================================
   FINAL INSURANCE - ABSOLUTE MAXIMUM PRIORITY 1250px FIX
   NOTHING IN THE UNIVERSE CAN OVERRIDE THIS
================================================================= */
@media screen and (max-width: 1250px) and (min-width: 1180px) {
    /* Final gap enforcement with viewport awareness */
    html body.wp-admin .site-header .main-navigation ul,
    html body.wp-admin .site-header #primary-menu,
    html body.customize-support .site-header .main-navigation ul,
    html body.customize-support .site-header #primary-menu,
    html body .site-header .main-navigation ul[id*="primary"],
    html body .site-header ul[id*="primary-menu"],
    html body .site-header nav .main-navigation ul,
    html body .site-header nav #primary-menu {
        gap: clamp(0.15rem, 0.8vw, 0.6rem) !important;
    }

    /* Smart responsive fonts with nuclear specificity */
    html body .site-header .main-navigation ul li a,
    html body .site-header #primary-menu li a,
    html body .site-header nav a[href] {
        font-size: clamp(13px, 1.1vw, 15px) !important;
        padding: 0 !important;
    }
}

/* Old submenu styles removed - replaced by navigation-dropdown.css */