/*
Theme Name: Unitek College
Description: A modern WordPress theme for Unitek College, featuring healthcare education programs, campus information, and student resources. Includes custom post types for programs and campuses, responsive design, and accessibility features.
Version: 1.0.0
Author: Debabrata Ghosh
Author URI: https://wordpress.org
Theme URI: 
Text Domain: unitek-college
Domain Path: /languages
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news, education, healthcare, college

===================================
TABLE OF CONTENTS
===================================
1. Global Styles & Reset
2. WordPress Core Styles  
3. Global Container Alignment
4. Typography & Buttons
5. Top Bar
6. Header & Navigation
7. Mega Menu
8. Search Overlay
9. News Section
10. Footer
11. Blog Template
12. Single Post Template
13. Related Posts
14. Media Queries (Consolidated)
    - 1729px+ (Extra Large)
    - 1025px-1280px (Desktop)
    - 1200px and below
    - 1024px and below (Tablet)
    - 768px and below (Mobile)
    - 480px and below (Small Mobile)
15. Contact 7 form acceptance checkbox highlight
16. Latest news section
===================================
*/





/* ===================================
   1. GLOBAL STYLES & RESET
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    line-height: 1.6;
    color: var(--color-text-heading);
    overflow-x: hidden;
    font-size: 16px;
}

.wp-block-list {
    padding-left: 20px;
    padding-bottom: 20px;
}

/* .wp-block-unitek-college-full-width-container p {
    padding-bottom: 1.0625rem;
} */

.wp-block-unitek-college-full-width-container .campus-address.has-text-align-left,
.wp-block-unitek-college-full-width-container .has-text-align-left .campus-address {
    padding-bottom: 1.0625rem;
}

/* .wp-block-unitek-college-full-width-container p.campus-button {
    padding-bottom: 0px !important;
} */

.wp-block-unitek-college-full-width-container a {
    color: var(--color-green-text);
    text-decoration: none;

}

.wp-block-unitek-college-full-width-container a:hover {
    color: var(--color-navy-deep);
    text-decoration: none;
}

/* ===================================
   2. WORDPRESS CORE STYLES
   =================================== */
.alignleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

.alignright {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
}

.alignwide {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Additional block support */
.wp-block {
    max-width: 100%;
}

/* ===================================
   3. GLOBAL CONTAINER ALIGNMENT
   =================================== */
.container {
    max-width: 1728px;
    margin: 0 auto;
    padding: 0 150px;
    box-sizing: border-box;
}

/* OPTIONAL: ensure header & footer follow the same alignment */
header .container,
footer .container {
    max-width: 1728px;
    margin: 0 auto;
    padding: 0 150px;
    box-sizing: border-box;
}

/* Make full-width sections stay aligned inside */
section>.container,
main>.container {
    max-width: 1728px;
    margin: 0 auto;
    padding: 0 150px;
    box-sizing: border-box;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 1em;
}

.wp-caption img {
    display: block;
    margin: 0 auto;
}

.wp-caption-text {
    text-align: center;
    font-size: 0.9em;
    color: var(--color-text-secondary);
    margin-top: 0.5em;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1em;
    margin-bottom: 1em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
}

.gallery-item img {
    width: 100%;
    height: auto;
}

/* WordPress Block Editor Styles */
.wp-block-group {
    margin-bottom: 2em;
}

.wp-block-heading {
    margin-bottom: 1.4375rem;
}

.wp-block-paragraph {
    margin-bottom: 1em;
}

.wp-block-button {
    margin-bottom: 1em;
}

.wp-block-button__link {
    display: inline-block;
    padding: 0.75em 1.5em;
    background-color: var(--color-green-success);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.wp-block-button__link:hover {
    background-color: var(--color-green-success-dark);
}

/* WordPress Widget Styles */
.widget {
    margin-bottom: 2em;
}

.widget-title {
    font-size: 1.25em;
    font-weight: 600;
    margin-bottom: 1em;
    color: var(--color-text-heading);
}

.widget ul {
    list-style: none;
    padding: 0;
}

.widget li {
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--color-border-light);
}

.widget li:last-child {
    border-bottom: none;
}

.widget a {
    color: var(--color-green-success);
    text-decoration: none;
}

.widget a:hover {
    text-decoration: underline;
}

/* WordPress Comment Styles */
.comment-list {
    list-style: none;
    padding: 0;
}

.comment {
    margin-bottom: 2em;
    padding: 1em;
    background-color: var(--color-bg-soft);
    border-radius: 4px;
}

.comment-author {
    font-weight: 600;
    margin-bottom: 0.5em;
}

.comment-meta {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    margin-bottom: 1em;
}

.comment-content {
    margin-bottom: 1em;
}

.comment-reply-link {
    color: var(--color-green-success);
    text-decoration: none;
    font-size: 0.9em;
}

.comment-reply-link:hover {
    text-decoration: underline;
}

/* (Removed) WordPress Search Form styles - using default browser styles */

/* News Section Updates */
.news-card {
    position: relative;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 25rem;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}

.news-image {
    position: relative;
    height: 12.5rem;
    width: 100%;
    background: var(--color-bg-muted);
    display: block;
    overflow: hidden;
    border-radius: 0;
    box-sizing: border-box;
    max-height: 12.5rem;
    min-height: 12.5rem;
    border-radius: 0.625rem;

}

.news-image-link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}



.category-tag {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-primary-dark);
    /* padding: 0.625rem 0.75rem; */
    padding: 0.625rem 1.125rem 0.625rem 1rem;
    border-radius: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    backdrop-filter: blur(0.625rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    z-index: 20;
    pointer-events: none;
    max-width: calc(100% - 1.875rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 480px) and (max-height: 300px) {
    .category-tag {
        padding: 0rem;
    }
}

.image-placeholder {
    color: #999;
    font-size: 0.875rem;
    font-style: italic;
}

.news-content {
    padding: 1rem 1.5rem;
    display: block;
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 1;
    flex: 1;
}

.news-date {
    color: var(--color-alt-blue);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.news-title {
    margin: 0 0 1rem 0;
    color: var(--color-primary-dark);
    font-family: 'Outfit', sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.625rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

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

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

.news-snippet {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.news .read-more-link {
    color: var(--color-green-primary);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.news .read-more-link:hover {
    color: var(--color-green-active);
}

.read-more-arrow {
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.news .read-more-link:hover .read-more-arrow {
    transform: translateX(0.25rem);
}

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

/* Focus Management */
/* *:focus {
    outline: 2px solid var(--color-green-success);
    outline-offset: 2px;
} */

/* Skip to Main Content Link */
.skip-link {
    /* display: none; */
    position: absolute;
    top: -70px;
    left: 6px;
    background: var(--color-green-forest);
    /* Darker green for sufficient contrast */
    color: var(--color-white);
    padding: 10px 12px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10000;
    transition: top 0.3s ease;
    font-weight: 600;
    /* Improves readability */
}

.skip-link:focus {
    top: 6px;
}

/* ===================================
   4. TYPOGRAPHY & BUTTONS
   =================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}

.btn-primary {
    background-color: var(--color-green-success);
    color: white;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}

.btn-primary:hover {
    background-color: var(--color-green-success-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-green-success);
    border: 2px solid var(--color-green-success);
}

.btn-secondary:hover {
    background-color: var(--color-green-success);
    color: white;
    transform: translateY(-2px);
}

/* ===================================
   5. TOP BAR
   =================================== */
.top-bar {
    background-color: var(--color-header);
    height: 40px;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: visible;
    position: relative;
    z-index: 1001;
}

.top-bar-container {
    max-width: 1728px;
    width: 100%;
    margin: 0 auto;
    padding: 0 150px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    background: var(--color-header);
    box-sizing: border-box;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-bar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--color-gray-700-ui);
    color: var(--color-white);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    padding: 0 24px;
    height: 40px;
    min-width: 128px;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
    box-sizing: border-box;
    margin: 0;
}

.top-bar-link:hover {
    opacity: 0.85;
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded' !important;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: auto;
    font-synthesis: none;
}

.top-bar-info-icon {
    font-family: 'Material Symbols Rounded' !important;
    font-size: 1.125rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-700-ui);
    background-color: var(--color-white);
    border-radius: 50%;
    line-height: 1;
    flex-shrink: 0;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    font-variation-settings:
        'FILL' 0,
        'wght' 700,
        'GRAD' 0,
        'opsz' 20;
}

.info-icon-circle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon-circle i {
    color: var(--color-white);
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.top-bar-separator {
    width: 1px;
    height: 40px;
    background-color: var(--color-gray-700-ui);
    flex-shrink: 0;
}

.top-bar-separator:first-of-type {
    margin-left: -16px;
}

.top-bar-separator:last-of-type {
    margin-right: -16px;
}

.top-bar-separator-hidden {
    display: none !important;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    /* margin-right: 16px; */
}


.top-bar-language-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-width: 9rem; */
}

.top-bar-language-switcher .gtranslate_wrapper {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    gap: 0;
    /* width: 9.875rem; */
    width: 8.125rem;
    height: 2rem;
    padding: 0 1rem;
    border: 0.0625rem solid var(--color-gray-700-ui);
    border-radius: 999px;
    background: var(--color-primary-dark);
    box-sizing: border-box;
    overflow: hidden;
}

.top-bar-language-switcher .gtranslate_wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50.7%;
    width: 2.25rem;
    height: 1.1035rem;
    border-radius: 999px;
    background: var(--color-header-panel);
    box-shadow: inset 0 0 0 0.0625rem #2E3A49;
    transform: translate(-50%, -50%);
}

.top-bar-language-switcher .gtranslate_wrapper::after {
    content: '';
    position: absolute;
    top: 50.9%;
    left: calc(50% - 15.6px);
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--color-blue-bright);
    transform: translate(0, -52%);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.top-bar-language-switcher .gtranslate_wrapper:has(a[data-gt-lang="es"].gt-current-lang)::after {
    transform: translate(1.175rem, -52%);
}

.top-bar-language-switcher .gtranslate_wrapper a[data-gt-lang] {
    position: relative;
    z-index: 2;
    /* min-width: 1.75rem; */
    height: 100%;
    padding: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem !important;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
    color: var(--color-white) !important;
    background: transparent;
    border: 0;
    pointer-events: none;
    cursor: default;
    user-select: none;
}

.top-bar-language-switcher .top-bar-language-toggle-hitarea {
    position: absolute;
    top: 50%;
    left: 50.7%;
    width: 2.5rem;
    height: 1.5rem;
    transform: translate(-50%, -50%);
    z-index: 4;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.top-bar-language-switcher .top-bar-language-toggle-hitarea:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.glink {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-white) !important;
}

.top-bar-language-switcher .gtranslate_wrapper a[data-gt-lang] img,
.top-bar-language-switcher .gtranslate_wrapper a[data-gt-lang] span {
    display: none !important;
}

.top-bar-language-switcher .gtranslate_wrapper a[data-gt-lang]:not([data-gt-lang="en"]):not([data-gt-lang="es"]) {
    display: none;
}

/* Hide plugin floating language widget; keep only header inline switcher */
#gt_float_wrapper,
[id*="gt_float_wrapper"],
.gt_float_switcher,
.gt_switcher-popup,
a.gt_switcher-popup,
body>.gtranslate_wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.top-bar-icon {
    background: none;
    text-decoration: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
}

.top-bar-icon:hover {
    opacity: 0.85;
}

.top-bar-phone {
    border-radius: 0;
}

.top-bar-icon svg {
    color: var(--color-white);
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

.top-bar-phone svg {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
    visibility: visible;
    opacity: 1;
}

.top-bar-phone svg path {
    fill: var(--color-white) !important;
}

.top-bar-phone svg g {
    opacity: 1;
}

.top-bar-icon .fa-search,
.top-bar-icon .fas.fa-search,
.top-bar-icon .fal.fa-search,
.top-bar-icon i.fa-search {
    font-size: 20px;
    color: var(--color-white);
    display: inline-block;
}

.top-bar-phone {
    position: relative;
    padding: 20px;
    margin: -16px;
    transition: background-color 0.2s ease;
}

.search-toggle {
    padding: 20px;
    margin: -16px;
    transition: background-color 0.2s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    /* border-radius: 8px; */
    background-color: transparent;
}

.top-bar-phone-dropdown {
    position: absolute;
    right: 0;
    top: 40px;
    width: 220px;
    height: 80px;
    background-color: var(--color-accent-blue) !important;
    /* background: var(--color-accent-blue) !important; */
    color: var(--color-white);
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    line-height: 26px;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    visibility: hidden;
    transition: transform 0.2s ease;
    z-index: 10000;
    pointer-events: none;
    transform: translateY(-10px);
    box-sizing: border-box;
    opacity: 1 !important;
    will-change: transform;
}


.search-toggle.active {
    background-color: var(--color-accent-blue) !important;
    opacity: 1 !important;
}

@media (min-width: 1024px) {

    .top-bar-phone:hover,
    .search-toggle:hover,
    .search-toggle:active {
        background-color: var(--color-accent-blue) !important;
        opacity: 1 !important;
    }

    .top-bar-phone:hover .top-bar-phone-dropdown,
    .top-bar-phone-dropdown:hover {
        visibility: visible;
        transform: translateY(0);
        opacity: 1 !important;
        background-color: var(--color-accent-blue) !important;
        /* background: var(--color-accent-blue) !important; */
        pointer-events: auto;
    }
}

@media (max-width: 1023px) {
    .top-bar-phone-dropdown {
        display: none;
    }
}

/* Custom focus states for top bar controls to prevent cut-off and distorted outlines */
.top-bar-link:focus-visible,
.search-toggle:focus-visible,
.top-bar-phone:focus-visible {
    outline: none !important;
    position: relative;
    z-index: 10002 !important;
}

.top-bar-link:focus-visible::after,
.search-toggle:focus-visible::after,
.top-bar-phone:focus-visible::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid var(--color-white, #ffffff);
    border-radius: 4px;
    pointer-events: none;
    z-index: 10003;
}

/* Mobile Language Switcher - Hidden on desktop by default */
.mobile-language-switcher {
    display: none !important;
}

/* ===================================
   6. HEADER & NAVIGATION
   =================================== */
.header {
    background-color: var(--color-white);
    box-shadow: 0 0.25rem 0.5rem rgba(48, 48, 48, 0.08);
    position: sticky;
    top: 40px;
    /* when scrolled, top bar position with including nav */
    z-index: 999;
    height: 5rem;
}

.header-container {
    max-width: 1728px;
    width: 100%;
    margin: 0 auto;
    padding: 0 9.375rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 5rem;
}

/* Logo Styles */
.header-logo {
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    gap: 0;
}

.logo-link img {
    width: auto;
    max-width: 12.5rem;
    height: 3.125rem;
    object-fit: contain;
}

/* Mobile logo hidden by default */
.logo-link.mobile-logo {
    display: none;
}

.logo-unitek {
    color: var(--color-link-blue);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03125rem;
}

.logo-college {
    color: var(--color-green-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09375rem;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 0.125rem;
}

/* Navigation Styles */
.header-nav {
    display: flex;
    flex: 1;
    justify-content: flex-start;
}

.header-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
    align-items: center;
}

.header-menu li {
    margin: 0;
    padding: 0;
}

.header-menu a {
    color: var(--color-black-soft);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5em;
    transition: color 0.2s ease;
    white-space: nowrap;
    position: relative;
    padding: 0;
}

.header-menu a:hover {
    color: var(--color-link-blue);
}

.header-menu a::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    left: 0;
    width: 0;
    height: 0.125rem;
    background-color: var(--color-link-blue);
    transition: width 0.3s ease;
}

.header-menu a:hover::after {
    width: 100%;
}

/* Apply Button */
.header-cta {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--color-green-primary);
    color: var(--color-white);
    padding: 0.875rem 1.5rem 0.875rem 2rem;
    border-radius: 100px;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.44em;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 12.5rem;
    height: 3.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(40, 50, 60, 0.16);
}

.btn-apply:hover {
    background-color: var(--color-gs-hover);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 0.75rem rgba(40, 50, 60, 0.24);
}

.program-overview-block .btn-apply:focus-visible {
    outline: 3px solid var(--color-black-pure);
    outline-offset: 4px;
}

.btn-apply svg {
    color: var(--color-white);
    width: 1.5rem;
    height: 1.5rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    /* width: 1.75rem;
    height: 1.375rem; */
    width: 1.5rem;
    height: 1.125rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Hide mobile-only elements on desktop */
.mobile-cta-button,
.mobile-header-right {
    display: none !important;
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 0.125rem;
    background-color: var(--color-primary-dark);
    border-radius: 0.125rem;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(0.3125rem, 0.4375rem);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(0.3125rem, -0.4375rem);
}

/* Legacy Support */
.nav-list {
    display: flex;
    list-style: none;
    /* gap: 15px; */
    gap: 2rem;

    margin: 0;
    padding: 0;
}

/* @media (min-width: 1425px) and (max-width: 1280px) { */


@media (max-width: 1376px) {
    .nav-list {
        gap: 1rem;

    }
}

@media (max-width: 1303px) {
    .nav-list {
        gap: 0.8rem;

    }


}

@media (max-width: 1277px) {
    .nav-list {
        gap: 1.5rem;

    }


}

@media (min-width: 1198px) and (max-width: 1236px) {
    .nav-list {
        gap: 1.5rem;
    }
}

@media (min-width: 1541px) and (max-width: 1586px) {
    .nav-list {
        gap: 1.5rem;
    }
}

@media (max-width: 951px) {
    .nav-list {
        gap: 1rem;

    }


}

@media (min-width: 871px) and (max-width: 904px) {
    .header-container {
        gap: 1rem !important;
    }

    .nav-list {
        gap: 0.8rem !important;
    }
}

@media (max-width: 870px) {
    .nav-list {
        gap: 1.5rem !important;
    }
}

.nav-list a {
    color: var(--color-black-soft);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    transition: all 0.2s ease;
    padding: 0.5rem 0;
    position: relative;
}

/* .nav-list > li > a {
    white-space: nowrap;
} */

/* Apply nowrap by default */
.nav-list>li>a {
    white-space: nowrap;
}

/* Allow wrapping when translated to other languages */
html:lang(es) .nav-list>li>a,
html[lang="es"] .nav-list>li>a,
html.translated-ltr .nav-list>li>a,
html.translated-rtl .nav-list>li>a {
    white-space: normal;
}


.nav-list>li>.mega-menu-modal a {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.nav-list a:hover {
    color: var(--color-link-blue);
}

.nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary-dark);
    transition: width 0.2s ease;
}

.nav-list a:hover::after {
    width: 100%;
}

/* Active/Current menu item underline on desktop */
/* Only show underline for top-level parent menu items, not submenu items or ancestors */
.nav-list>.current-menu-parent>a::after {
    width: 100%;
}

/* Hide underline for submenu items even if they are current */
.nav-list .sub-menu .current-menu-item>a::after,
.nav-list .sub-menu .current_page_item>a::after {
    width: 0;
}

/* ===================================
   SUBMENU HOVER STYLES
   =================================== */

/* Hide all submenus by default - Desktop only */
@media (min-width: 871px) {
    .nav-list .sub-menu {
        display: none;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        background: var(--color-white);
        list-style: none;
        padding: 0.625rem 0;
        box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        z-index: 1000;
        min-width: 13.75rem;
        /* Increased min-width to accommodate longer text like "Financia Aid Overview" */
        top: 100%;
        left: 0;
        transform: translateY(0.5rem);
        /* small visual offset to avoid accidental overlap */
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 0.375rem;
    }

    /* Flip submenu to left if it would overflow the viewport */
    .nav-list .menu-item-has-children.submenu-flip>.sub-menu,
    .header-menu .menu-item-has-children.submenu-flip>.sub-menu {
        left: auto;
        right: 0;
    }

    /* Flip nested (3rd-level) submenus left of their parent */
    .nav-list .sub-menu .menu-item-has-children.submenu-flip>.sub-menu,
    .header-menu .sub-menu .menu-item-has-children.submenu-flip>.sub-menu {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 0.25rem;
        transform: none;
    }

    /* Style submenu items */
    .nav-list .sub-menu li {
        padding: 0.375rem 1.25rem;
        margin: 0;
        list-style: none;
    }

    .nav-list .sub-menu a {
        font-family: 'Outfit', sans-serif;
        color: var(--color-slate-700);
        text-decoration: none;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.375rem;
        display: block;
        padding: 0.5rem 1.25rem;
        transition: color 0.2s ease;
        white-space: nowrap;
        /* Prevent text wrapping to multiple lines */
        overflow: hidden;
        /* Hide overflow text if needed */
        text-overflow: ellipsis;
        /* Show ellipsis if text is too long */
    }

    .nav-list .sub-menu a:hover {
        color: var(--color-link-blue);
    }

    .top-bar-nav {
        position: sticky;
        top: 0;
        z-index: 999;
    }

}

/* Regular Submenu Styles - Desktop only */
@media (min-width: 871px) {

    /* Only show submenu styles for items that have children */
    .header-menu .menu-item-has-children .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--color-white);
        min-width: 13.75rem;
        /* Increased min-width to accommodate longer text like "Financia Aid Overview" */
        padding: 0.5rem 0;
        margin-top: 0.5rem;
        display: none;
        /* Hidden by default */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.3125rem);
        transition: all 0.3s ease;
        z-index: 1000;
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
        border-radius: 0.375rem;
        max-height: calc(100vh - 150px);
        overflow: visible;
    }

    /* Hide submenus for items without children */
    .header-menu li:not(.menu-item-has-children) .sub-menu {
        display: none !important;
    }

    .header-menu .menu-item-has-children .sub-menu li {
        margin: 0;
        padding: 0;
        width: 100%;
        list-style: none;
    }

    .header-menu .menu-item-has-children .sub-menu a {
        display: block;
        padding: 0.5rem 1rem;
        color: var(--color-slate-700);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 400;
        transition: color 0.2s ease;
        line-height: 1.5;
        white-space: nowrap;
        /* Prevent text wrapping to multiple lines */
    }

    .header-menu .menu-item-has-children .sub-menu a:hover {
        color: var(--color-link-blue);
    }

    .header-menu .menu-item-has-children .sub-menu a::after {
        display: none;
    }

    /* 3rd Level Submenu Styles - Support both nav-list and header-menu */
    .nav-list .sub-menu .sub-menu,
    .header-menu .sub-menu .sub-menu {
        position: absolute;
        top: 0;
        left: 100%;
        margin-left: 0.25rem;
        /* Small gap to prevent accidental hover loss */
        background: var(--color-white);
        min-width: 12.5rem;
        padding: 0.5rem 0;
        display: none;
        opacity: 0;
        visibility: hidden;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-0.3125rem);
        transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
        /* Faster transition */
        z-index: 1001;
        list-style: none;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
        border-radius: 0.375rem;
    }

    /* Ensure 2nd level menu items with children are positioned relatively */
    .nav-list .sub-menu .menu-item-has-children,
    .header-menu .sub-menu .menu-item-has-children {
        position: relative;
    }

    /* Add right arrow icon to 2nd level menu items that have children (3rd level) */
    .nav-list .sub-menu>.menu-item-has-children>a,
    .header-menu .sub-menu>.menu-item-has-children>a {
        padding-right: 2rem;
        /* Extra padding on right for arrow */
        position: relative;
        /* For absolute positioning of arrow */
        white-space: nowrap;
        /* Prevent text wrapping to multiple lines */
        overflow: hidden;
        /* Hide overflow text if needed */
        text-overflow: ellipsis;
        /* Show ellipsis if text is too long */
    }

    .nav-list .sub-menu>.menu-item-has-children>a::before,
    .header-menu .sub-menu>.menu-item-has-children>a::before {
        content: '→';
        display: inline-block;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-tailwind-500);
        font-size: 0.875rem;
        font-weight: normal;
        line-height: 1;
        transition: color 0.2s ease, transform 0.2s ease;
        pointer-events: none;
        /* Prevent arrow from interfering with hover */
    }

    /* Change arrow color on hover */
    .nav-list .sub-menu>.menu-item-has-children>a:hover::before,
    .header-menu .sub-menu>.menu-item-has-children>a:hover::before {
        color: var(--color-link-blue);
    }

    /* Create invisible bridge between 2nd level item and 3rd level menu */
    /* This prevents hover loss when moving mouse to 3rd level */
    .nav-list .sub-menu>.menu-item-has-children::after,
    .header-menu .sub-menu>.menu-item-has-children::after {
        content: '';
        position: absolute;
        top: 0;
        right: -4px;
        /* Extend to cover the gap */
        width: 4px;
        height: 100%;
        background: transparent;
        z-index: 1000;
        /* Below 3rd level menu but above 2nd level */
    }

    .nav-list .sub-menu .sub-menu li,
    .header-menu .sub-menu .sub-menu li {
        margin: 0;
        padding: 0;
        width: 100%;
        list-style: none;
    }

    .nav-list .sub-menu .sub-menu a,
    .header-menu .sub-menu .sub-menu a {
        display: block;
        padding: 8px 16px;
        color: var(--color-slate-700);
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        transition: color 0.2s ease;
        line-height: 1.5;
    }

    .nav-list .sub-menu .sub-menu a:hover,
    .header-menu .sub-menu .sub-menu a:hover {
        color: var(--color-link-blue);
    }

    /* Show 3rd level submenu ONLY when hovering directly over the 2nd level parent item */
    /* This prevents 3rd level from showing when hovering over 1st level items */
    .nav-list .sub-menu>.menu-item-has-children:hover>.sub-menu,
    .nav-list .sub-menu>.menu-item-has-children:focus-within>.sub-menu,
    .header-menu .sub-menu>.menu-item-has-children:hover>.sub-menu,
    .header-menu .sub-menu>.menu-item-has-children:focus-within>.sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    /* Keep 3rd level submenu visible when hovering over it */
    .nav-list .sub-menu .sub-menu:hover,
    .header-menu .sub-menu .sub-menu:hover {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    /* Ensure 2nd level menu stays open when hovering over 3rd level items */
    /* But only when hovering over the specific 2nd level item, not the 1st level */
    .nav-list .sub-menu>.menu-item-has-children:hover .sub-menu,
    .nav-list .sub-menu>.menu-item-has-children .sub-menu:hover,
    .header-menu .sub-menu>.menu-item-has-children:hover .sub-menu,
    .header-menu .sub-menu>.menu-item-has-children .sub-menu:hover {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    /* 3rd level is hidden by default (display: none in base styles above) */
    /* It will only show when hovering directly over 2nd level item with children */
    /* No need for hide rules - the default state is hidden */
}


/* Show submenu on hover and focus for accessibility - Desktop only */
@media (min-width: 871px) {

    /* Show submenu on hover with smooth animation */
    .nav-list .menu-item-has-children:hover>.sub-menu,
    .nav-list .menu-item-has-children:focus-within>.sub-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        /* smooth animation upwards */
    }

    /* Keep 2nd level submenu visible when hovering over the submenu itself */
    /* Use direct child selector to only affect 2nd level, not 3rd level */
    .nav-list>.menu-item-has-children>.sub-menu:hover {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        /* keep in final position */
    }

    /* Ensure 2nd level submenu stays visible when hovering over 1st level parent */
    /* Use direct child selector to only affect 2nd level, not 3rd level */
    .nav-list>.menu-item-has-children:hover>.sub-menu,
    .nav-list>.menu-item-has-children>.sub-menu:hover {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        /* smooth animation upwards */
    }

    /* Show 3rd level ONLY when hovering directly over the 2nd level item with children */
    /* Use direct child selector to prevent showing when hovering over 1st level */
    .nav-list .sub-menu>.menu-item-has-children:hover>.sub-menu,
    .nav-list .sub-menu>.menu-item-has-children:focus-within>.sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    /* Keep 3rd level visible when hovering over it OR the parent 2nd level item */
    .nav-list .sub-menu .sub-menu:hover,
    .nav-list .sub-menu>.menu-item-has-children:hover .sub-menu,
    .nav-list .sub-menu>.menu-item-has-children .sub-menu:hover,
    /* Keep visible when hovering over parent 2nd level item even if mouse moves to 3rd level */
    .nav-list .sub-menu>.menu-item-has-children:hover>.sub-menu,
    .nav-list .sub-menu>.menu-item-has-children:focus-within>.sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }


    /* Explicitly hide 3rd level when hovering over 1st level item ONLY */
    /* This rule has lower specificity than the show rule above, so it won't override when hovering over 2nd level */
    /* The key is: hide rule targets 1st level hover, show rule targets 2nd level hover */
    .nav-list>.menu-item-has-children:hover>.sub-menu>li:not(:hover)>.sub-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

}

/* Ensure parent menu items are positioned relatively for absolute submenu positioning - Desktop only */
@media (min-width: 871px) {
    .nav-list .menu-item-has-children {
        position: relative;
    }

    /* Keep vertical scroll; reserve right space so child flyouts are visible inside the same panel. */
    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children) {
        max-height: calc(100vh - 150px);
        overflow: visible;
        padding-right: 12.75rem;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
        background: transparent;
        box-shadow: none;
        isolation: isolate;
        filter: drop-shadow(0 0.25rem 0.625rem rgba(0, 0, 0, 0.1));
    }

    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children)::before {
        display: none !important;
    }

    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children)>li {
        position: relative;
        z-index: 1;
        background: var(--color-white);
    }

    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children)>li:first-child {
        border-top-left-radius: 0.375rem;
        border-top-right-radius: 0.375rem;
        padding-top: 1rem;
    }

    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children)>li:last-child {
        border-bottom-left-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
        padding-bottom: 1rem;
    }

    /* Keep any 3rd-level flyout visible on hover/focus within nav-list structure. */
    .nav-list .sub-menu>.menu-item-has-children {
        position: relative;
    }

    .nav-list .sub-menu>.menu-item-has-children:hover>.sub-menu,
    .nav-list .sub-menu>.menu-item-has-children:focus-within>.sub-menu,
    .nav-list .sub-menu>.menu-item-has-children>.sub-menu:hover {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }
}

/* Clean menu items with submenus - no arrows */
.header-menu .menu-item-has-children>a {
    position: relative;
}

/* Ensure submenu stays visible when hovering over it */
.header-menu .sub-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Better focus styles for accessibility */
.header-menu .menu-item-has-children>a:focus {
    outline: 2px solid var(--color-link-blue);
    outline-offset: 2px;
}

/* Submenu link focus styles */
.header-menu .sub-menu a:focus {
    background-color: var(--color-tailwind-100);
    outline: 2px solid var(--color-link-blue);
    outline-offset: -2px;
}

/* ===================================
   7. MEGA MENU
   =================================== */

/* Hide scrollbar for menus and mega menu */
.mega-menu-content,
.nav-list .sub-menu {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.mega-menu-content::-webkit-scrollbar,
.nav-list .sub-menu::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Mega Menu Parent */
.mega-menu-parent {
    position: relative;
}

@media (min-width: 871px) {
    .actual-mega-menu {
        position: static !important;
    }
}

/* Mega Menu Modal - Desktop Only */
.mega-menu-modal {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 0;
    margin: 0;
}

/* Hide mega menu modal on mobile */
@media (max-width: 870px) {
    .mega-menu-modal {
        display: none !important;
    }

    /* Mobile submenu for mega menu - Matching Figma Design */
    .mega-mobile-submenu {
        display: none;
        list-style: none;
        padding: 24px;
        margin: 16px 0 0 0;
        background-color: var(--color-primary-dark);
        border-radius: 0;
    }

    .mega-mobile-submenu li {
        padding: 0;
        margin: 0;
        border-bottom: none;
    }

    .mega-mobile-submenu li:last-child {
        border-bottom: none;
    }

    .mega-mobile-submenu a {
        display: block;
        padding: 0;
        margin-bottom: 26px;
        color: var(--color-white);
        text-decoration: none;
        font-family: 'Outfit', sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.4444em;
        transition: color 0.2s ease;
    }

    .mega-mobile-submenu a:hover {
        background-color: transparent;
        color: var(--color-green-lime);
    }

    /* Mobile category headers - Matching Figma */
    .mega-mobile-submenu .mobile-category-header {
        background-color: transparent;
        border-bottom: none;
        margin: 0;
        padding: 0 0 0 2.5rem;
        margin-bottom: 1.5rem;
    }

    .mega-mobile-submenu .mobile-category-header:last-child {
        margin-bottom: 0;
    }

    /* Category headers without children (simple links like "Explore my options") */
    .mega-mobile-submenu .mobile-category-header:not(.has-children) {
        /* padding: 0 0 0 2.5rem !important; */
        padding: 0 0 0 0 !important;

    }

    .mega-mobile-submenu .mobile-category-header:not(.has-children) .category-title-link {
        color: var(--color-white);
        text-decoration: none;
        font-family: 'Outfit', sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.4444em;
        display: flex;
        align-items: center;
    }

    .mega-mobile-submenu .mobile-category-header:not(.has-children) .category-title {
        display: flex;
        align-items: center;
    }

    /* Right-pointing triangle for category headers WITHOUT children */
    .mega-mobile-submenu .mobile-category-header:not(.has-children) .category-title::before {
        content: '';
        width: 1rem;
        height: 1rem;
        background-color: var(--color-white);
        clip-path: polygon(35% 30%, 35% 70%, 70% 50%);
        border: none;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    .mega-mobile-submenu .mobile-category-header:first-child {
        margin-top: 0;
    }

    /* Background for expanded categories */
    .mega-mobile-submenu .mobile-category-header.has-children.active {
        background-color: var(--color-primary-dark);
        /* padding: 16px 16px 16px 24px;
        margin-left: -24px;
        margin-right: -24px;
        margin-bottom: 26px; */
    }

    .mega-mobile-submenu .mobile-category-header .category-title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        font-family: 'Outfit', sans-serif;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.625rem;
        color: var(--color-white);
        text-transform: none;
        letter-spacing: 0;
        position: relative;
    }

    .mega-mobile-submenu .mobile-category-header .category-title:focus-visible {
        outline: 2px solid var(--color-green-lime) !important;
        outline-offset: 4px !important;
    }

    /* Right-pointing triangle icon for expandable categories - LEFT SIDE */
    .mega-mobile-submenu .mobile-category-header.has-children .category-title::before {
        content: '';
        width: 1rem;
        height: 1rem;
        background-color: var(--color-white);
        clip-path: polygon(35% 30%, 35% 70%, 70% 50%);
        border: none;
        margin: 0 0.5rem 0 0;
        transition: transform 0.3s ease;
        flex-shrink: 0;
        order: -1;
    }

    /* Hide any ::after element on category titles */
    .mega-mobile-submenu .mobile-category-header .category-title::after {
        display: none !important;
    }

    /* Rotate triangle down when expanded */
    .mega-mobile-submenu .mobile-category-header.has-children.active .category-title::before {
        transform: none;
        clip-path: polygon(30% 35%, 70% 35%, 50% 70%);
    }

    /* Clickable category links */
    .mega-mobile-submenu .mobile-category-header .category-title-link {
        display: block;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .mega-mobile-submenu .mobile-category-header .category-title-link:hover {
        background-color: transparent;
        color: var(--color-green-lime);
    }

    .mega-mobile-submenu .mobile-category-header .category-title-link .category-title {
        padding: 0;
        font-family: 'Outfit', sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: var(--color-white);
        text-transform: none;
        letter-spacing: 0;
    }


    /* Mobile program items container - Hidden by default */
    .mega-mobile-submenu .mobile-program-list {
        display: none !important;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Show program list when category is active/expanded */
    .mega-mobile-submenu .mobile-category-header.has-children.active .mobile-program-list {
        display: block !important;
        margin-top: 16px;
        padding-left: 0;
    }

    /* Mobile program items - Indented with light blue color */
    .mega-mobile-submenu .mobile-program-item {
        padding: 0;
        margin: 0 0 16px 0;
        border-bottom: none;
    }

    .mega-mobile-submenu .mobile-program-item:last-child {
        margin-bottom: 0;
    }

    /* Individual program links - Light blue with indentation */
    .mega-mobile-submenu .mobile-category-header.has-children .mobile-program-list .mobile-program-item a {
        display: block !important;
        /* padding: 0 0 0 36px !important; */
        padding: 0 0 0 2.5rem !important;

        color: var(--color-sky-cyan) !important;
        text-decoration: none !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 1.5em !important;
        transition: color 0.2s ease !important;
        position: relative !important;
        /* margin-bottom: 16px !important; */
        margin-bottom: 1.5rem !important;

    }

    /* Fallback for mobile-program-item a */
    .mega-mobile-submenu .mobile-program-item a {
        display: block;
        padding: 0 0 0 36px;
        color: var(--color-sky-cyan);
        text-decoration: none;
        font-family: 'Outfit', sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.5em;
        transition: color 0.2s ease;
        position: relative;
        margin-bottom: 16px;
    }

    /* Remove any triangle icons from individual program links */
    .mega-mobile-submenu .mobile-program-item a::before,
    .mega-mobile-submenu .mobile-program-item a::after {
        display: none !important;
    }

    .mega-mobile-submenu .mobile-program-item a:hover {
        background-color: transparent !important;
        color: var(--color-white) !important;
    }

    /* Show mobile submenu when parent is active */
    .mega-menu-parent.active .mega-mobile-submenu {
        display: block;
    }

    /* Toggle icon styles */
    .menu-toggle-icon {
        margin-left: 0.5rem;
        font-weight: bold;
        transition: transform 0.3s ease;
        display: inline-block;
    }
}

.mega-menu-modal.active {
    display: flex;
    opacity: 1;
}

/* Mega Menu Content */
.mega-menu-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 6px auto 0;
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: slideDown 0.3s ease;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Mega Menu Header */
.mega-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 0 1.5rem;
    /* border-bottom: 1px solid var(--color-tailwind-200); */
}

.mega-menu-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
    color: var(--color-slate-700);
    margin: 0;
}

/* Clickable mega menu title link */
.mega-menu-title-link {
    text-decoration: none;
    transition: color 0.2s ease;
}

.mega-menu-title-link:hover {
    color: var(--color-link-blue);
}

.mega-menu-title-link .mega-menu-title {
    color: inherit;
}

.mega-menu-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    color: var(--color-slate-700);
    transition: background-color 0.2s ease;
}

.mega-menu-close:hover {
    background-color: var(--color-tailwind-100);
}

/* Mega Menu Main Content */
.mega-menu-main {
    display: grid;
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr) minmax(220px, 290px) minmax(0, 1fr);
    gap: 24px;
    padding: 32px 1.5rem;
    min-height: 300px;
}

/* Placeholder Boxes */
.mega-menu-placeholder {
    background-color: var(--color-tailwind-50);
    border-radius: 8px;
    /* border: 2px dashed var(--color-tailwind-300); */
    width: 100%;
    max-width: 290px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
}

@media (min-width: 1728px) {
    .mega-menu-main {
        grid-template-columns: 290px minmax(0, 1fr) 290px minmax(0, 1fr);
    }

    .mega-menu-placeholder {
        width: 290px;
        height: 290px;
    }
}

@media (max-width: 1024px) {
    .mega-menu-main {
        grid-template-columns: minmax(10rem, 11.25rem) minmax(0, 1fr) minmax(10rem, 11.25rem) minmax(0, 1fr);
    }

    .mega-menu-placeholder {
        max-width: 11.25rem;
    }
}

.mega-menu-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Program Columns */
.mega-menu-column {
    display: flex;
    flex-direction: column;
}

.mega-menu-column-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.625rem;
    color: var(--color-slate-700);
    padding-bottom: 1rem;
    border-bottom: 0.0625rem solid var(--color-gray-border);
    margin: 0 0 1rem 0;
}

/* Clickable column title links */
.mega-menu-column-title-link {
    text-decoration: none;
    transition: color 0.2s ease;
}

.mega-menu-column-title-link:hover {
    color: var(--color-link-blue);
}

.mega-menu-column-title-link .mega-menu-column-title {
    color: inherit;
}

.mega-menu-programs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-programs li {
    margin-bottom: 12px;
}

.mega-menu-programs li:last-child {
    margin-bottom: 0;
}

.mega-menu-programs a {
    font-family: 'Outfit', sans-serif;
    color: var(--color-slate-700);
    text-decoration: none;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
    transition: color 0.2s ease;
}

.mega-menu-programs a:hover {
    color: var(--color-link-blue);
}

/* Mega Menu Footer */
.mega-menu-footer {
    background-color: var(--color-primary-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 32px;
    border-radius: 8px;
    min-height: 62px;
    margin: 0 1.5rem 1.5rem 1.5rem;
}

.mega-menu-footer-text {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.444em;
    margin: 0;
    font-family: 'Outfit', sans-serif;
}

.mega-menu-cta {
    background-color: transparent;
    color: var(--color-chartreuse-bright) !important;
    border: none;
    padding: 0;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 1;
}

.mega-menu-cta svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.mega-menu-cta:hover {
    color: var(--color-green-lime);
}

.mega-menu-cta:hover svg {
    stroke: currentColor;
}

/* Mega Menu Trigger */
.mega-menu-trigger {
    position: relative;
}

/* Desktop styles - hide mobile submenu */
@media (min-width: 871px) {
    .mega-mobile-submenu {
        display: none !important;
    }

    .menu-toggle-icon {
        display: none !important;
    }
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .mega-menu-content {
        margin: 20px;
        max-width: none;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .mega-menu-main {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .mega-menu-placeholder {
        display: none;
    }

    .mega-menu-header {
        padding: 20px;
    }

    .mega-menu-title {
        font-size: 24px;
    }

    .mega-menu-footer {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 20px;
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-tailwind-500);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
}

.icon-btn:hover {
    color: var(--color-link-blue);
    background: rgba(0, 114, 206, 0.08);
    transform: translateY(-1px);
}

.icon-btn i {
    font-size: 18px;
}

/* ===================================
   9. NEWS SECTION
   =================================== */
.news {
    padding: 5rem 0;
    background: white;
}

.news .container {
    max-width: 108rem;
    margin: 0 auto;
    padding: 0 9.375rem;
    width: 100%;
    box-sizing: border-box;
}

.news-headline {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.5rem;
    text-align: left;
    color: var(--color-primary-dark);
    margin-bottom: 2.5rem;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.news-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    min-height: 25rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.news-card:hover {
    transform: translateY(-0.25rem);
}

.news-image {
    aspect-ratio: 376 / 252;
    height: auto;
    width: 100%;
    background: var(--color-gray-light);
    display: block;
    overflow: hidden;
    border-radius: 0;
    position: relative;
    box-sizing: border-box;
    max-height: none;
    min-height: auto;
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
}

.news-image-link {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}

.news-content {
    padding: 1rem 1.5rem;
    display: block;
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 1;
    flex: 1;
}

.news-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300;
    /* Changed from 400 (regular) to 300 (light) per design */
    /* /* color: #1976D2; */
    margin-bottom: 1rem;
    line-height: 1.625rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    padding-top: 0.5rem;
}

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

.saparator {
    position: relative;
    display: block;
    line-height: 0;
}

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

.saparator-base {
    position: relative;
    top: 0.1875rem;
    z-index: 1;
}

.saparator-line {
    position: absolute;
    left: 0;
    top: -1.8125rem;
    z-index: 2;
    pointer-events: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .saparator-line {
        top: -13px;
    }
}

@media (max-width: 767px) {
    .saparator-line {
        top: -5px;
    }
}

/* ===================================
   8. SEARCH OVERLAY
   =================================== */

/* Outer wrapper — fixed, full-width, stacks vertically */
.search-overlay {
    position: fixed;
    top: 40px;
    /* sits below the 40px top-bar */
    left: 0;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    z-index: 9999;
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.25s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.search-overlay.active {
    display: flex;
    opacity: 1;
}

/* Dims the rest of the page behind the search overlay on every breakpoint.
   Toggled via body.search-open (mirrors .search-overlay's .active state —
   see syncSearchOpenBodyClass in script.js), so no extra JS is needed here.
   Sits just below .header's z-index (999) so the header/mobile-header row
   stays fully visible above the dim instead of being darkened by it; still
   above normal page content. Clicks on it already close the overlay via the
   existing "click outside" handler. */
.search-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    background-color: var(--base-ui-four-28323c);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

body.search-open {
    overflow: hidden !important;
}

body.search-open .search-overlay-backdrop {
    opacity: 0.5;
    visibility: visible;
    pointer-events: auto;
}

/* Chatbot FAB/tooltip/panel normally sit above everything (z-index 99999-100000)
   so the search overlay (9999) can't stack over them; scroll-to-top (1000) is
   already below it. While search is open, drop the chatbot under the overlay,
   dim both widgets with a brightness filter matching the backdrop's tint, and
   disable pointer events so they read (and behave) as inactive, dimmed page
   content instead of floating above the backdrop. filter is used (not an
   overlay/opacity) because the tooltip has its own opaque background — an
   overlay behind it would be invisible, and opacity would make the widgets
   see-through to the page behind them. */
body.search-open #unitek-chatbot-root .uc-fab,
body.search-open #unitek-chatbot-root .uc-tooltip,
body.search-open #unitek-chatbot-root .uc-panel {
    z-index: 999;
}

body.search-open #unitek-chatbot-root .uc-fab,
body.search-open #unitek-chatbot-root .uc-tooltip,
body.search-open #unitek-chatbot-root .uc-panel,
body.search-open .scroll-to-top {
    filter: brightness(0.6);
    pointer-events: none;
}

/* Shared max-width inner wrapper */
.search-overlay-inner {
    width: 100%;
    max-width: 1728px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem 9.375rem 0;
    box-sizing: border-box;
}

/* ── Blue header band ────────────────────── */
/* height is a floor, not a cap — content (title/input) must be able to grow
   the band taller than 176px without overflowing into .search-results-band
   below it. Matches the height:auto + min-height pattern already used at the
   mobile/tablet breakpoints. */
.search-overlay-band {
    background-color: var(--color-accent-blue);
    height: auto;
    min-height: 176px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}

/* Search Overlay Header Row */
.search-overlay-header {
    display: flex;
    /* align-items: center; */
    /* justify-content: space-between; */
    gap: 4rem;
    width: 100%;
    position: relative;
}

/* Search Logo Styles */
.search-logo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
}

.search-overlay-band .search-overlay-inner {
    display: flex;
    align-items: center;
}

/* logo (left) | content-col (title + search bar) | spacer (right) */
.search-overlay-header-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: clamp(1.5rem, 9.549vw, 165px);
}

/* Title and input share the same left edge, stacked vertically */
.search-overlay-content-col {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    align-items: flex-start;
}

.search-overlay-logo-wrap {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.search-overlay-logo-spacer {
    flex: 1;
}

.search-overlay-logo-link {
    display: inline-flex;
    text-decoration: none;
}

.search-overlay-header-spacer {
    display: flex;
    width: 100%;
    gap: 1rem;
}

.search-overlay-logo-img {
    height: 48px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

@media (min-width: 1025px) {
    .search-overlay-logo-img {
        height: 3rem;
        /* 48px */
        width: 9.1875rem;
        /* 147px */
    }
}

/* "What can we help you find?" heading */
.search-overlay-title {
    color: var(--color-white);
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.333;
    margin: 0;
    padding-top: 0.875rem;
}

/* Row that holds the search form and × Close button */
.search-bar-row {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    /* dynamic scaling up to 40px (2.5rem) */
}

/* Search form — fixed 584 px, grows rightward from title's left edge */
.search-form-overlay {
    flex: 0 0 584px;
    width: 584px;
    max-width: 100%;
    position: relative;
}

.search-input-container {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid var(--color-gray-border);
    border-radius: 8px;
    height: 56px;
    width: 100%;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.search-input-container:focus-within {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.8);
}

.search-input-field {
    flex: 1;
    padding: 0 1rem;
    background: transparent;
    border: none;
    color: var(--color-white);
    color: var(--color-white);
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    outline: none;
    min-width: 0;
}

.search-input-field::placeholder {
    color: var(--color-gray-border);
    font-family: 'Outfit', sans-serif;
    font-size: 1.0625rem;
    font-weight: 300;
}

.search-submit-btn {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0.25rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5rem;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.search-submit-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.search-submit-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* × Close button */
.search-close-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.3125rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-white);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.search-close-btn:hover {
    /* background: rgba(255, 255, 255, 0.1); */
    border-radius: 4px;
}

.search-close-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.search-close-label {
    font-size: 1rem;
    line-height: 1;
}

/* ── White results band ──────────────────── */
.search-results-band {
    background: var(--color-white);
    border-top: 1px solid var(--color-tailwind-200);
    max-height: 476px;
    overflow-y: auto;
    overflow-x: hidden;
}

.search-results-band[hidden] {
    display: none;
}

.search-results-band .search-overlay-inner {
    padding-top: 0;
    padding-bottom: 0;
}

.search-results-band .search-results {
    margin-bottom: 0;
}

/* .search-results is flow (not absolute) — width: 100% is intentional.
   WARNING: origin/dev branch has .search-results { position: absolute; display: none }
   DO NOT add display:none here — AJAX results would silently stop displaying.
   Results visibility is controlled by #searchResultsBand[hidden] attribute in script.js. */
.search-results {
    width: 100%;
}

/* Search Loading Spinner */
.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: 12px;
}

.search-loading span {
    color: #000;
    leading-trim: both;
    text-edge: cap;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.loading-dot {
    display: inline-block;
    animation: loadingDotJump 1.2s infinite ease-in-out;
}

.loading-dot:nth-child(1) {
    animation-delay: 0s;
}

.loading-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.loading-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes loadingDotJump {
    0%, 30%, 100% {
        transform: translateY(0);
    }
    15% {
        transform: translateY(-10px);
    }
}

.search-loading-icon-wrapper {
    width: 36px;
    height: 36px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transform-style: preserve-3d;
}

.search-loading-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-box: fill-box;
    transform-origin: 50% 50% 0;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    shape-rendering: geometricPrecision;
    animation: searchLoadingSpin 4.8s linear infinite;
}

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

.search-loading-icon path {
    animation: unitekPulse 2.4s ease-in-out infinite;
}

.search-loading-icon path:nth-child(1) {
    animation-delay: 0s;
}

.search-loading-icon path:nth-child(2) {
    animation-delay: -1.8s;
}

.search-loading-icon path:nth-child(3) {
    animation-delay: -1.2s;
}

.search-loading-icon path:nth-child(4) {
    animation-delay: -0.6s;
}

@keyframes unitekPulse {
    0%, 100% {
        opacity: 1;
    }
    25% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.4;
    }
    75% {
        opacity: 0.7;
    }
}

/* Two-column grid inside the results band */
.search-results-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
}

.search-results-column {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pages-column {
    /* border-right: 1px solid var(--color-tailwind-200); */
}

/* Inner content area — carries the padding, grows to push footer down */
.search-column-content {
    flex: 1;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
}

.posts-column .search-column-content {
    padding: 1.5rem 1.5rem 1.5rem 2rem;
}

/* Column heading row: "Pages  32" */
.search-results-column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--color-gray-border);
}

.search-results-column-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-primary-dark);
    margin: 0;
}



/* Result lists */
.search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.search-results-list .search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 0.75rem 0;
    cursor: pointer;
}

.search-results-list .search-result-item:hover {
    background: transparent;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-primary-dark);
    text-decoration: none;
    margin: 0 0 0.2rem;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.search-result-title:hover {
    color: var(--color-link-blue);
}

.search-result-date {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8125rem;
    color: var(--color-gray-700-ui);
    font-weight: 400;
}

/* Post thumbnail — real image or grey placeholder */
.search-results-column-image,
.search-results-column-dummy-image {
    flex-shrink: 0;
    width: 156px;
    height: 104px;
    border-radius: 4px;
    display: block;
}

.search-results-column-image {
    object-fit: cover;
}

.search-results-column-dummy-image {
    background-color: var(--color-tailwind-200);
}

/* Per-column footer bar */
.search-column-footer {
    background-color: var(--color-header);
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1rem;
    flex-shrink: 0;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.pages-column .search-column-footer {
    padding-right: 2rem;
    margin-right: 2rem
}

.posts-column .search-column-footer {
    padding-left: 2rem;
    margin-left: 2rem;
}

.search-column-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-footer-col);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.search-column-footer-link:hover {
    opacity: 0.75;
}

.search-column-footer-link svg {
    flex-shrink: 0;
}

/* Loading / empty states */
.search-loading,
.search-no-results,
.search-error {
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9375rem;
    color: var(--color-gray-700-ui);
}

.search-no-results-text {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #3C434A;
    margin: 0;
}

.column-no-results {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #3C434A;
    opacity: 0.6;
    padding: 16px 0;
    margin: 0;
}

.search-column-footer-link.vap-btn-disabled,
.search-column-footer-link[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   Search overlay band — responsive layout
   Exactly 3 breakpoints govern the band (logo / title / search input / close):
     • Mobile  ≤767px
     • Tablet  768px–1023.98px
     • Desktop ≥1024px  (base rules + the min-width:1024px block; left untouched)
   ========================================================================== */

/* ── MOBILE (≤767px) ──────────────────────────────────────────────
   Title + search input centered as a compact unit, internally left-aligned.
   Visible blue background/padding on the left and right sides.
   Overlay sits below the fixed 48px page header, which stays visible. */
@media (max-width: 767px) {
    .search-overlay {
        top: 48px;
        max-height: calc(100vh - 48px);
    }

    .search-overlay-band {
        height: auto;
        min-height: 120px;
        padding-bottom: 2rem;
        flex-shrink: 0;
    }

    /* Center the title+input block within the blue band */
    .search-overlay-header-row {
        flex-direction: column;
        align-items: center;
        gap: 0.625rem;
    }

    /* No logo inside the band on mobile — the page header logo is shown instead */
    .search-overlay-logo-wrap,
    .search-overlay-logo-spacer {
        display: none;
    }

    /* Center the block as a compact unit; children align to its left edge.
       Fixed width (not fit-content/percentage) is deliberate: a definite value
       is what makes `margin: 0 auto` centre it exactly and keeps it from
       drifting as the viewport widens — only the surrounding blue grows. */
    .search-overlay-content-col {
        width: 340px;
        max-width: 90%; /* Prevent edge-to-edge on very small screens */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .search-overlay-title {
        font-size: 1.5rem;
        line-height: 1.3;
        text-align: left;
        white-space: normal;
        padding-top: 0;
        width: 100%;
        margin: 0;
    }

    /* Input row begins at the title's left edge; the × sits to its right */
    .search-bar-row {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }

    /* Form fills the row, leaving reserved space (button + gap) for the × so
       the two never touch; reserved space scales with the row's own width
       (already responsive via max-width:90% above), not a bare viewport unit */
    .search-form-overlay {
        flex: 1 1 auto;
        width: auto;
        max-width: calc(100% - 3.5rem);
        min-width: 0;
    }

    .search-input-container {
        height: 48px;
        width: 100%;
    }

    .search-input-field {
        padding: 8px 12px;
        font-size: 14px;
    }

    .search-input-field::placeholder {
        font-size: 13px;
    }

    .search-submit-btn {
        width: 32px;
        height: 32px;
        margin: 4px;
    }

    .search-submit-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Icon-only close, pinned to the right of the centered unit */
    .search-close-label {
        display: none;
    }

    .search-close-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .search-close-btn svg {
        width: 24px;
        height: 24px;
    }
}

/* ── TABLET (768px–1024px) ────────────────────────────────────────
   Matches the tablet Figma "Search Open" state:
     • black utility bar (Get info / search / phone) pinned at the very top
     • blue band below it (logo + title + search input + close)
     • the white hamburger nav header is hidden — only the band logo shows
   The utility bar is hidden on tablet by default, so it's revealed only while
   the overlay is open via the body.search-open class (toggled in JS by mirroring
   the overlay's .active state — not width-based, so it stays correct on resize). */
@media (min-width: 768px) and (max-width: 1023.98px) {
    /* Blue band sits just below the 40px utility bar */
    .search-overlay {
        top: 40px;
        max-height: calc(100vh - 40px);
    }

    /* Reveal the black utility bar and pin it to the very top while searching */
    body.search-open .top-bar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
    }

    body.search-open .top-bar-container {
        padding-left: clamp(2rem, 4.5vw, 3.125rem);
        padding-right: clamp(2rem, 4.5vw, 3.125rem);
    }

    /* Hide the white hamburger nav header so only the band logo is visible */
    body.search-open .header {
        display: none;
    }

    .search-overlay-band {
        height: auto;
        min-height: 176px;
        padding-bottom: 2rem;
        flex-shrink: 0;
    }

    /* logo | (title + search) — same row layout as desktop */
    .search-overlay-header-row {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(1.5rem, 5vw, 4rem);
    }

    .search-overlay-logo-wrap {
        display: flex;
    }

    /* Spacer not needed — the content column fills the remaining width */
    .search-overlay-logo-spacer {
        display: none;
    }

    /* Match the desktop logo size */
    .search-overlay-logo-img {
        height: 3rem;
        width: 9.1875rem;
        max-width: none;
    }

    .search-overlay-content-col {
        flex: 1 1 auto;
        min-width: 0;
        align-items: flex-start;
    }

    .search-overlay-title {
        font-size: 2rem;
        text-align: left;
        width: auto;
        padding-top: 0.25rem;
    }

    .search-bar-row {
        width: 100%;
        gap: clamp(1rem, 2.5vw, 2.5rem);
    }

    .search-form-overlay {
        flex: 0 1 584px;
        width: 100%;
        max-width: 584px;
        min-width: 0;
    }

    .search-input-container {
        height: 56px;
    }

    .search-close-label {
        display: inline;
    }
}

/* Tablet Responsive (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .search-overlay-band .search-overlay-inner {
        max-width: 100%;
    }

    .search-results-container {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    /* Pages first, Posts below — natural DOM order */
    .posts-column {
        order: 0;
        border-bottom: none;
    }

    .pages-column {
        border-right: none;
        /* border-bottom: 1px solid var(--color-tailwind-200); */
    }

    .pages-column .search-column-content,
    .posts-column .search-column-content {
        padding: 1.5rem;
    }

    .search-results-list .search-result-item {
        padding: 0.75rem 0;
    }

    .pages-column .search-column-footer,
    .posts-column .search-column-footer {
        padding: 0 1.5rem;
        margin: 0 0 4rem;
    }

    .search-column-footer {
        height: 62px;
    }

    .search-column-footer-link {
        font-size: 1rem;
    }
}

/* Search results columns — mobile layout (band layout lives in the 3 breakpoints above) */
@media (max-width: 767px) {

    .search-column-footer {
        height: 62px;
    }

    .search-results-container {
        display: flex;
        flex-direction: column;
    }

    /* Pages first, Posts below — natural DOM order */
    .posts-column {
        order: 0;
        border-bottom: none;
    }

    .pages-column {
        border-right: none;
        /* border-bottom: 1px solid var(--color-tailwind-200); */
    }

    .pages-column .search-column-content,
    .posts-column .search-column-content {
        padding: 1.25rem 1rem;
    }

    .search-results-list .search-result-item {
        padding: 0.625rem 0;
    }

    .pages-column .search-column-footer,
    .posts-column .search-column-footer {
        padding: 0 1rem;
        margin: 0 0 4rem;
    }

    .search-results-column-image,
    .search-results-column-dummy-image {
        width: 80px;
        height: 54px;
    }
}

@media (max-width: 480px) {

    .search-results-list .search-result-item {
        padding: 0.5rem 0;
    }

    .search-results-column-image,
    .search-results-column-dummy-image {
        width: 60px;
        height: 40px;
    }

    .search-column-footer {
        height: 62px;
        padding: 0 0.75rem;
        justify-content: center;
    }

    .search-column-footer-link {
        font-size: 0.875rem;
        width: 100%;
        justify-content: center;
    }
}


/* ── Search overlay scroll — final cascade override (must come after legacy blocks) ── */
@media (max-width: 1024px) {

    /* overflow: hidden enforces max-height as a hard flex container boundary,
       which allows flex:1 + overflow-y:auto on the results band to trigger scroll */
    .search-overlay {
        overflow: hidden;
        padding: 0;
    }

    .search-results-band {
        max-height: none;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
    }
}

/* ===================================
   10. FOOTER
   =================================== */
.footer {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    padding: 5rem 0 2.1875rem;
    position: relative;
}

@media (min-width: 871px) {
    .footer {
        margin-top: 7.5rem;
    }
}

/* Keep separator semantic inside footer, but render it visually above the footer like before */
.footer>.saparator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    line-height: 0;
    pointer-events: none;
}

.footer-container {
    max-width: 1728px;
    margin: 0 auto;
    padding-left: clamp(6rem, 15.046vw, 16.25rem);
    padding-right: clamp(6rem, 15.046vw, 16.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}

.footer-logo-img {
    max-width: 280px;
    height: auto;
    display: block;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* gap: 60px; */
    gap: 2.5rem;
    width: 100%;
    max-width: 1440px;
    margin-bottom: 3.75rem;
}

.footer-column-links {
    font-family: 'Outfit';
    font-weight: 500;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 26px;
    letter-spacing: 0;
    color: var(--color-white);
    margin: 0 0 1.5rem 0;
    text-transform: none;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(184, 196, 208, 0.3);
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Outfit';
    font-weight: 500;
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1.375rem;
    letter-spacing: 0;
}

.footer-column li {
    margin-bottom: 1.5rem;
    font-family: 'Outfit';
    font-weight: 500;
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1.375rem;
    letter-spacing: 0;
}

.footer-column li:last-child {
    margin-bottom: 0;
}

.footer-column a {
    font-family: 'Outfit';
    font-weight: 500;
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1.375rem;
    letter-spacing: 0;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: var(--color-white);
}

.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding-top: 0;
    border-top: none;
}

.social-icon {
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--color-slate-custom);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 20px;
}

.social-icon:hover {
    color: var(--color-white);
    transform: translateY(-2px);
}

.social-icon i {
    font-size: 32px;
}

@keyframes loading {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ===================================
   14. MEDIA QUERIES (CONSOLIDATED)
   =================================== */

/* Desktop news image ratio (376:252) */
@media (min-width: 1025px) {
    .news-image {
        width: 100%;
        aspect-ratio: 376 / 252;
        height: auto;
        min-height: auto;
        max-height: none;
    }
}

/* Desktop - 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
    .top-bar-container {
        padding: 0 5rem;
    }

    .search-overlay-inner {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .header-container {
        padding: 0 5rem;
    }

    .news .container {
        padding: 0 5rem;
    }

    .category-nav__list {
        gap: 30px;
    }

    .footer-container {
        padding: 0 5rem;
    }

    .hero__content {
        padding: 48px 32px;
    }
}

/* Desktop - 1281px to 1540px */
@media (min-width: 1281px) and (max-width: 1540px) {
    .top-bar-container {
        padding: 0 9.375rem;
    }

    .search-overlay-inner {
        padding-left: 9.375rem;
        padding-right: 9.375rem;
    }

    .header-container {
        padding: 0 9.375rem;
    }

    .footer-container {
        padding: 0 9.375rem;
    }
}

/* Desktop - Above 1540px */
@media (min-width: 1541px) {
    .top-bar-container {
        padding-left: clamp(6rem, 15.046vw, 16.25rem);
        padding-right: clamp(6rem, 15.046vw, 16.25rem);
    }

    .search-overlay-inner {
        padding-left: clamp(6rem, 15.046vw, 16.25rem);
        padding-right: clamp(6rem, 15.046vw, 16.25rem);
    }

    .header-container {
        padding-left: clamp(6rem, 15.046vw, 16.25rem);
        padding-right: clamp(6rem, 15.046vw, 16.25rem);
    }

    .news .container {
        padding-left: clamp(6rem, 15.046vw, 16.25rem);
        padding-right: clamp(6rem, 15.046vw, 16.25rem);
    }

    .footer-container {
        padding-left: clamp(6rem, 15.046vw, 16.25rem);
        padding-right: clamp(6rem, 15.046vw, 16.25rem);
    }
}

/* Desktop - News padding top and bottom */
@media (min-width: 1025px) {
    .news {
        padding-top: 7.5rem;
        padding-bottom: 7.5rem;
    }
}

/* Desktop - 1200px and below */
@media (max-width: 1200px) {

    .container,
    header .container,
    footer .container,
    section>.container,
    main>.container {
        padding: 0 80px;
    }
}

@media (min-width: 871px) and (max-width: 1199px) {

    .header-cta {
        display: none;
    }
}

@media (min-width: 1199px) and (max-width: 1408px) {
    .header-container {
        gap: 1rem !important;
    }
}

/* ===================================
   TABLET - 1024px and below
   =================================== */
@media (max-width: 1024px) {

    /* Container Padding */
    .container {
        padding: 0 80px;
    }

    .top-bar-container {
        padding: 0 5rem;
    }

    .search-overlay-inner {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .header-container {
        padding: 0 5rem;
        gap: 2.5rem;
    }

    .footer-container {
        padding: 0 5rem;
    }

    .news .container {
        padding: 0 5rem;
    }

    /* Header & Navigation */
    .header-menu {
        gap: 1.5rem;
    }

    .header-menu a {
        font-size: 0.875rem;
    }

    /* Hero Section */
    .hero .container {
        grid-template-columns: 1fr;
        gap: 3.75rem;
        text-align: center;
    }

    .hero-headline {
        font-size: 3rem;
    }

    .hero-right {
        padding: 2.5rem;
        max-width: 31.25rem;
        margin: 0 auto;
    }

    /* Content Sections */
    .intro .container,
    .advantage .container,
    .support-career .container,
    .accreditations-content,
    .faq .container {
        grid-template-columns: 1fr;
        gap: 3.75rem;
    }

    .program-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* News Section */
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .news-card {
        height: auto;
    }

    .news-image {
        aspect-ratio: 376 / 252;
        height: auto;
        min-height: auto;
        max-height: none;
    }

    /* Footer */
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
    TABLET - 768px to 871px
    =================================== */
@media (min-width: 768px) and (max-width: 870px) {
    .top-bar-container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .search-overlay-inner {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .header-container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .footer-container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .news .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* ===================================
   MOBILE - 0px to 767.98px (top bar/header only)
   =================================== */
@media (max-width: 767.98px) {
    .top-bar-container {
        padding: 0 1rem;
    }

    .search-overlay-inner {
        padding-left: 2.5rem;
        padding-right: 1rem;
    }

    /* 
    .header-container {
        padding: 0 1rem !important;
    } */
}

/* ===================================
   TABLET - 871px to 1024px
   =================================== */
@media (min-width: 871px) and (max-width: 1024px) {

    /* Tablet styles here */
    .container,
    header .container,
    footer .container,
    section>.container,
    section .container,
    main>.container,
    .news .container {
        padding: 0 3.125rem;
    }

    .top-bar-container {
        padding: 0 3.125rem;
    }

    .search-overlay-inner {
        padding-left: 3.125rem;
        padding-right: 3.125rem;
    }

    .header-container {
        padding: 0 3.125rem;
    }

    .footer-container {
        padding: 0 3.125rem;
    }


    /* 3rd Level Submenu Styles for Tablet - Hide by default */
    .nav-list .sub-menu .sub-menu,
    .header-menu .sub-menu .sub-menu {
        position: static !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        list-style: none !important;
        display: block !important;
        transition: all 0.3s ease !important;
    }

    /* 3rd level menu items - indented and light blue */
    .nav-list .sub-menu .sub-menu li,
    .header-menu .sub-menu .sub-menu li {
        border-bottom: none;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* 3rd level menu links - light blue color, extra indentation, smaller font */
    .nav-list .sub-menu .sub-menu a,
    .header-menu .sub-menu .sub-menu a {
        display: block !important;
        padding: 2px 0 2px 40px !important;
        /* Minimal top/bottom padding, increased left padding */
        margin: 0 !important;
        /* No margin for compact spacing */
        width: 100%;
        font-size: 14px !important;
        /* Reduced font size for better hierarchy */
        font-weight: 300 !important;
        line-height: 1.4em !important;
        /* Tighter line height */
        color: var(--color-sky-cyan) !important;
        /* Light blue color matching the image */
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        position: relative !important;
        white-space: normal;
        /* Allow text to wrap if needed */
    }

    /* 3rd level menu links hover state */
    .nav-list .sub-menu .sub-menu a:hover,
    .header-menu .sub-menu .sub-menu a:hover {
        background-color: transparent !important;
        color: var(--color-white) !important;
        /* White on hover */
    }

    /* Remove any icons from 3rd level links */
    .nav-list .sub-menu .sub-menu a::before,
    .nav-list .sub-menu .sub-menu a::after,
    .header-menu .sub-menu .sub-menu a::before,
    .header-menu .sub-menu .sub-menu a::after {
        display: none !important;
    }

    /* Show 3rd level submenu when parent 2nd level item is active (toggled via arrow) */
    .nav-list .sub-menu>.menu-item-has-children.active>.sub-menu,
    .header-menu .sub-menu>.menu-item-has-children.active>.sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 500px !important;
        padding: 0 !important;
        margin-top: 8px !important;
        /* Reduced top margin for tighter spacing */
        overflow: visible !important;
    }
}

/* ===================================
   MOBILE - 870px and below
   =================================== */
@media (max-width: 870px) {

    /* Container Padding */
    .container,
    header .container,
    footer .container,
    section>.container,
    main>.container {
        padding: 0 20px;
    }

    /* Footer Mobile Layout */
    .footer {
        padding: 3.75rem 0 3.75rem;
        margin-top: 3.75rem;
    }

    .footer-container {
        align-items: center;
    }

    .footer-logo {
        margin-bottom: 40px;
        display: flex;
        justify-content: center;
    }

    .footer-logo-img {
        max-width: 200px;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 3.75rem 1.5625rem;
        margin-bottom: 3.75rem;
        width: 100%;
    }



    .footer-column h4 {
        font-family: 'Avenir Next', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 0;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(184, 196, 208, 0.3);
    }

    .footer-column ul {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-family: 'Outfit';
        font-weight: 600;
        font-style: normal;
        font-size: 0.75rem;
        line-height: 1.125rem;
        letter-spacing: 0;
    }

    .footer-column li {
        margin-bottom: 0;
        font-family: 'Outfit';
        font-weight: 600;
        font-style: normal;
        font-size: 0.75rem;
        line-height: 1.125rem;
        letter-spacing: 0;
    }

    .footer-column a {
        font-family: 'Outfit';
        font-weight: 600;
        font-style: normal;
        font-size: 0.75rem;
        line-height: 1.125rem;
        letter-spacing: 0;
        display: block;
        padding: 4px 0;
    }

    .footer-social {
        /* margin-top: 20px; */
        gap: 16px;
    }

    .social-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .top-bar {
        display: none;
    }

    /* Hide top-bar language switcher in mobile, show mobile version instead */
    .top-bar-language-switcher {
        display: none !important;
    }

    /* Mobile Language Switcher Wrapper & Dropdown */
    .mobile-language-switcher-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        position: relative;
        z-index: 1101;
        overflow: visible !important;
    }

    .mobile-language-switcher-wrapper .mobile-language-dropdown-icon {
        position: absolute;
        right: -0.4375rem;
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1.5rem;
        color: var(--color-primary-dark);
        pointer-events: none;
        z-index: 3;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
    }

    /* Native select is visually hidden; the custom dropdown replaces it visually */
    .mobile-language-switcher-wrapper .mobile-language-select {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        border: 0;
        clip: rect(0, 0, 0, 0);
        overflow: hidden;
        white-space: nowrap;
    }

    .mobile-language-switcher-wrapper .mobile-language-custom {
        position: relative;
        z-index: 4;
    }

    .mobile-language-switcher-wrapper .mobile-language-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        min-width: 2.5rem;
        height: 2rem;
        padding: 0 0.875rem 0 0;
        border: none;
        background: transparent;
        color: var(--color-primary-dark);
        font-family: 'Outfit', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .mobile-language-switcher-wrapper .mobile-language-menu {
        display: none;
        position: absolute;
        /* top: 100%; */
        top: 2.375rem;
        left: -1rem;
        min-width: 4.5rem;
        margin: 0.125rem 0 0;
        padding: 0;
        list-style: none;
        border: 1px solid #8a8a8a;
        background: var(--color-white);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        overflow: hidden;
        z-index: 6;
    }

    .mobile-language-switcher-wrapper .mobile-language-option {
        display: flex;
        align-items: center;
        width: 100%;
        height: 2.5rem;
        padding: 0 0.75rem;
        padding-left: 15.5px;
        border: none;
        background: var(--color-white);
        color: var(--color-primary-dark);
        font-family: 'Outfit', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: left;
        cursor: pointer;
    }

    .mobile-language-switcher-wrapper .mobile-language-option.is-active {
        background: #1a73e8;
        color: var(--color-white);
    }

    .mobile-language-switcher-wrapper .mobile-language-custom.is-open .mobile-language-menu {
        display: block;
    }

    .header,
    .header-container,
    .mobile-header-right,
    .mobile-language-switcher-wrapper,
    .mobile-language-switcher-wrapper .mobile-language-custom {
        overflow: visible !important;
    }

    .mobile-language-switcher-wrapper {
        position: relative;
        z-index: 1101;
    }

    .mobile-language-switcher-wrapper .mobile-language-custom {
        position: relative;
        z-index: 1102;
    }

    .mobile-language-switcher-wrapper .mobile-language-menu {
        z-index: 1103;
    }

    .mobile-language-switcher-wrapper .mobile-language-custom.is-open+.mobile-language-dropdown-icon {
        transform: rotate(180deg);
    }

    .mobile-language-switcher-wrapper .mobile-language-option.is-active {
        background: var(--color-focus-ring);
        color: var(--color-white);
    }

    .mobile-language-switcher-wrapper .mobile-language-option:focus-visible {
        outline: 2px solid var(--color-focus-ring);
        outline-offset: -3px;
        background-color: rgba(26, 115, 232, 0.08);
    }

    .mobile-language-switcher-wrapper .mobile-language-option.is-active:focus-visible {
        outline: 2px solid var(--color-white);
        outline-offset: -3px;
        background-color: var(--color-focus-ring);
    }

    .mobile-language-switcher-wrapper .mobile-language-trigger:focus-visible {
        outline: 2px solid var(--color-focus-ring);
        outline-offset: 2px;
        /* border-radius: 4px; */
    }

    .mobile-language-switcher-wrapper .mobile-language-custom.is-open .mobile-language-menu {
        display: block;
    }

    .mobile-language-switcher-wrapper .mobile-language-custom.is-open+.mobile-language-dropdown-icon {
        transform: rotate(180deg);
    }

    .header,
    .header-container,
    .mobile-header-right,
    .mobile-language-switcher-wrapper .mobile-language-custom {
        overflow: visible !important;
    }

    /* Mobile language switcher - White text and icon when menu is open */
    .header.menu-open .mobile-language-switcher-wrapper .mobile-language-select {
        color: var(--color-white);
    }

    .header.menu-open .mobile-language-switcher-wrapper .mobile-language-trigger {
        color: var(--color-white);
    }

    .header.menu-open .mobile-language-switcher-wrapper .mobile-language-dropdown-icon {
        color: var(--color-white);
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        height: 48px;
        background-color: var(--color-white);
        box-shadow: 0px 4px 8px 0px rgba(48, 48, 48, 0.08);
        transition: background-color 0.3s ease;
    }

    /* Prevent body scroll when mobile menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100vh;
        left: 0;
        right: 0;
    }

    /* Change header background when mobile menu is open */
    .header.menu-open {
        background-color: var(--color-primary-dark);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        height: 48px;
    }

    /* Style header container when menu is open */
    .header.menu-open .header-container {
        background-color: var(--color-code-bg);
        /* border-radius: 8px; */
        /* margin: 12px 16px; */
        padding: 8px 16px;
        height: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* Change icon colors when menu is open */
    .header.menu-open .mobile-header-icon {
        color: var(--color-white);
    }

    .header.menu-open .mobile-header-icon i {
        color: var(--color-white);
    }

    .header.menu-open .mobile-header-icon svg {
        color: var(--color-white);
    }

    .header.menu-open .mobile-header-separator {
        background-color: var(--color-white);
        opacity: 0.3;
        height: 32px;
    }

    /* Adjust spacing when menu is open */
    .header.menu-open .header-container {
        gap: 16px;
    }

    .header-container {
        padding: 0 1rem;
        display: flex;
        gap: 20px;
        height: 48px;
        align-items: center;
        justify-content: space-between;
    }

    .header-logo {
        flex-shrink: 0;
    }

    .logo-link img {
        width: 97.78px;
        height: 32px;
        object-fit: contain;
    }

    .footer-container {
        padding: 0 1rem;
    }

    /* Add body padding to account for fixed header */
    body {
        padding-top: 48px;
    }

    .header-nav {
        display: none;
        position: fixed;
        top: 2.8125rem;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-black-soft);
        box-shadow: 0px 4px 8px 0px rgba(48, 48, 48, 0.08);
        padding: 2rem 0;
        z-index: 998;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: calc(100vh - 48px);
        max-height: calc(100vh - 48px);
    }

    .header-nav.mobile-open {
        display: flex;
        flex-direction: column;
    }

    .header-menu {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }

    .header-menu li {
        width: 100%;
        border-bottom: none;
    }

    .header-menu li:last-child {
        border-bottom: none;
    }

    .header-menu a {
        display: block;
        padding: 0;
        width: 100%;
        font-family: 'Outfit', sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.4em;
        color: var(--color-white);
    }

    /* Mobile submenu toggle indicator */
    .header-menu .menu-item-has-children>a {
        position: relative;
        padding-right: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* Right-pointing triangle icon for expandable menu items */
    .header-menu .menu-item-has-children>a::before {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 7px solid var(--color-white);
        margin-right: 12px;
        transition: transform 0.3s ease;
        flex-shrink: 0;
        order: -1;
    }

    /* Hide any ::after element */
    .header-menu .menu-item-has-children>a::after {
        display: none !important;
    }

    /* Rotate triangle down when menu item is expanded */
    .header-menu .menu-item-has-children.active>a::before {
        transform: rotate(90deg);
    }

    /* Mobile submenu styles - override desktop hover behavior */
    .header-menu .sub-menu {
        position: static !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        background: transparent;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: none;
        border-radius: 0;
    }

    /* Show submenu when parent is active on mobile */
    .header-menu .menu-item-has-children.active>.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 500px;
        padding: 16px 0 0 0;
        margin-top: 16px;
    }

    /* Disable hover effects on mobile */
    .header-menu li:hover .sub-menu,
    .header-menu li:focus-within .sub-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
    }

    .header-menu .sub-menu li {
        border-bottom: none;
        margin-bottom: 16px;
    }

    .header-menu .sub-menu a {
        padding: 0;
        margin: 0;
        width: 100%;
        font-family: 'Outfit', sans-serif;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4em;
        color: var(--color-gray-ui);
    }

    /* Remove any triangle icons from submenu child items */
    .header-menu .sub-menu a::before,
    .header-menu .sub-menu a::after {
        display: none !important;
    }

    .header-menu .sub-menu li::before,
    .header-menu .sub-menu li::after {
        display: none !important;
    }

    .header-menu .sub-menu a:hover {
        background-color: transparent;
        color: var(--color-link-blue);
    }

    /* 3rd Level Submenu Styles for Mobile/Tablet - Match 2nd image design */
    /* Show 3rd level submenu when parent 2nd level item is active */
    .header-menu .sub-menu>.menu-item-has-children.active>.sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
        padding: 0 !important;
        margin-top: 16px !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* 3rd level menu items - indented and light blue */
    .header-menu .sub-menu .sub-menu li {
        border-bottom: none;
        margin: 0 0 16px 0;
        padding: 0;
        list-style: none;
    }

    /* 3rd level menu links - light blue color, more indented */
    .header-menu .sub-menu .sub-menu a {
        display: block !important;
        padding: 0 0 0 36px !important;
        /* More indentation than 2nd level */
        margin: 0 !important;
        width: 100%;
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 1.5em !important;
        color: var(--color-sky-cyan) !important;
        /* Light blue color matching the image */
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        position: relative !important;
        white-space: normal;
        /* Allow text to wrap if needed */
    }

    /* 3rd level menu links hover state */
    .header-menu .sub-menu .sub-menu a:hover {
        background-color: transparent !important;
        color: var(--color-white) !important;
        /* White on hover */
    }

    /* Remove any icons from 3rd level links */
    .header-menu .sub-menu .sub-menu a::before,
    .header-menu .sub-menu .sub-menu a::after {
        display: none !important;
    }


    .header-cta {
        display: none !important;
    }

    /* Mobile CTA button styling (created by JavaScript) - Mobile only */
    .mobile-cta-button {
        width: 100%;
        display: flex !important;
        justify-content: center;
        /* margin-top: 48px; */
        margin-top: 4.5625rem;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .mobile-cta-button .btn-apply {
        width: 100%;
        max-width: 328px;
        height: 56px;
        background-color: var(--color-green-primary);
        color: var(--color-white);
        font-family: 'Outfit', sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.4444em;
        padding: 14px 24px 14px 32px;
        border-radius: 100px;
        box-shadow: 0px 4px 8px rgba(40, 50, 60, 0.16);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .mobile-cta-button .btn-apply:hover {
        background-color: var(--color-green-alt-8f28);
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(40, 50, 60, 0.24);
    }

    /* Mobile Header Right Section - Only show on mobile */
    .mobile-header-right {
        display: flex !important;
        align-items: center;
        margin-left: auto;
    }

    /* Reset top-bar .search-toggle styles that would bleed into mobile header */
    .mobile-header-right .search-toggle {
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        flex: 0 0 48px;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        overflow: hidden;
        outline: 0;
        box-shadow: none;
        line-height: 0;
        /* border-radius: 8px; */
        background-color: transparent;
        background-clip: padding-box;
        transition: background-color 0.2s ease, opacity 0.2s ease;
    }

    .mobile-header-right .search-toggle.active {
        background-color: var(--color-accent-blue) !important;
        opacity: 1 !important;
    }

    .mobile-header-right .search-toggle.active svg,
    .mobile-header-right .search-toggle.active i {
        color: var(--color-white) !important;
        fill: var(--color-white) !important;
    }

    .mobile-header-right .search-toggle.active svg path {
        fill: var(--color-white) !important;
    }

    .mobile-header-right .search-toggle:hover,
    .mobile-header-right .mobile-phone-icon:hover {
        background-color: var(--color-accent-blue);
    }

    .mobile-header-right .search-toggle:hover svg {
        color: var(--color-white);
    }

    .mobile-header-right .mobile-phone-icon:hover svg {
        color: var(--color-white);
    }

    .mobile-header-icon {
        background: none;
        border: none;
        color: var(--color-primary-dark);
        cursor: pointer;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        transition: opacity 0.2s ease, color 0.3s ease;
        flex-shrink: 0;
        text-decoration: none;
    }

    /* Match phone icon's clickable height to the 48px search button so both sit flush, edge-to-edge, in the row */
    .mobile-header-right .mobile-phone-icon {
        width: 48px;
        height: 48px;
        transition: background-color 0.2s ease, opacity 0.2s ease;
    }

    .mobile-header-icon:hover {
        opacity: 0.7;
    }

    .mobile-header-icon i {
        color: var(--color-primary-dark);
        width: 24px;
        height: 24px;
        transition: color 0.3s ease;
        margin-left: 0;
        margin-top: 0;
    }

    .mobile-header-icon svg {
        color: var(--color-primary-dark);
        width: 18px;
        height: 18px;
        transition: color 0.3s ease;
        display: block;
    }

    .mobile-header-separator {
        width: 1px;
        height: 48px;
        background-color: #ACB4BC;
        flex-shrink: 0;
        transition: background-color 0.3s ease, opacity 0.3s ease;
    }

    /* Show mobile menu toggle on mobile.
       .mobile-header-right no longer has a flex `gap` (search/separator/phone
       sit flush), so this margin-left is the only thing keeping the hamburger
       from touching the phone icon. */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 32px;
        height: 32px;
        padding: 8px 4px;
        margin-left: 8px;
    }

    /* Hide close button by default */
    .mobile-menu-close-btn {
        display: none;
    }

    /* When menu is open, hide hamburger and show close button */
    .header.menu-open .mobile-menu-toggle {
        display: none;
    }

    .header.menu-open .mobile-menu-close-btn {
        display: flex;
    }

    /* Ensure mobile header right section stays within header container when menu is open */
    .header.menu-open .mobile-header-right {
        position: relative;
        background-color: transparent;
        pointer-events: all;
    }

    /* Ensure phone icon and close button are always clickable */
    .header.menu-open .mobile-phone-icon,
    .header.menu-open .mobile-menu-close-btn {
        pointer-events: all;
    }

    /* Keep logo within header container when menu is open */
    .header.menu-open .header-logo {
        position: relative;
    }

    /* Show mobile logo and hide desktop logo when menu is open */
    .header.menu-open .logo-link.desktop-logo {
        display: none;
    }

    .header.menu-open .logo-link.mobile-logo {
        display: flex;
    }

    .header.menu-open .logo-link.mobile-logo img {
        width: auto;
        height: 32px;
        object-fit: contain;
    }

    .nav-list {
        display: flex;
        position: relative;
        flex-direction: column;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        z-index: 1;
        list-style: none;
    }

    .nav-list.mobile-open {
        display: flex;
    }

    .nav-list li {
        margin: 0;
        width: 100%;
        border-bottom: none;
    }

    .nav-list li:last-child {
        border-bottom: none;
    }

    .nav-list a {
        display: block;
        padding: 0;
        /* margin-bottom: 1.0625rem; */
        width: 100%;
        color: var(--color-white);
        text-decoration: none;
        font-family: 'Outfit', sans-serif;
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.75rem;
        position: relative;
    }

    .nav-list a:hover {
        color: var(--color-green-lime);
    }

    /* Remove outline for mouse users, show focus outline for keyboard users */
    .nav-list a:focus {
        outline: none;
        border: none;
        box-shadow: none;
    }

    .nav-list a:focus-visible {
        outline: 2px solid var(--color-green-lime) !important;
        outline-offset: -4px !important;
    }

    /* Remove any ::after pseudo-elements that create underlines for regular links */
    .nav-list li:not(.menu-item-has-children)>a::after {
        display: none !important;
    }

    /* Mobile submenu toggle indicator for nav-list */
    .nav-list .menu-item-has-children>a {
        position: relative;
        padding-right: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* Right-pointing triangle icon for expandable menu items */
    .nav-list li.menu-item-has-children>a::before {
        content: '' !important;
        display: inline-block !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        background-color: var(--color-white) !important;
        clip-path: polygon(35% 30%, 35% 70%, 70% 50%) !important;
        border: none !important;
        margin: 0 0.5rem 0 0 !important;
        transition: transform 0.3s ease !important;
        flex-shrink: 0 !important;
        order: -1 !important;
    }

    /* Hide any ::after element */
    .nav-list li.menu-item-has-children>a::after {
        display: none !important;
    }

    /* Rotate triangle down when menu item is expanded */
    .nav-list li.menu-item-has-children.active>a::before {
        transform: none !important;
        clip-path: polygon(30% 35%, 70% 35%, 50% 70%) !important;
    }

    /* Mobile submenu styles for nav-list */
    .nav-list .sub-menu {
        position: static !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        background: var(--color-primary-dark);
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: none;
        border-radius: 0;
        list-style: none;
    }

    /* Show submenu when parent is active on mobile for nav-list */
    .nav-list .menu-item-has-children.active>.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 800px;
        padding: 1.5625rem 1.0625rem 0 0;
        overflow-y: auto;
        width: 100%;
        margin-top: 1.0625rem !important;
        /* margin-left: -5vw; */
    }

    /* Mega menu parent styling - Matching Figma Design */
    .mega-menu-parent {
        background-color: transparent;
        transition: all 0.3s ease;
    }

    /* Gray background box when Programs is expanded - Matching Figma */
    .mega-menu-parent.active {
        background-color: transparent;
        padding: 0;
        margin: 0;
    }

    /* Programs link styling when expanded */
    .mega-menu-parent.active>a {
        padding: 0;
    }

    /* Mega menu mobile submenu integration */
    .mega-menu-parent.active .mega-mobile-submenu {
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 2000px;
        transition: all 0.3s ease;
        margin: 1.0625rem 0 0 0;
    }

    /* Programs menu (mega-menu-parent) shows triangle icon */
    .mega-menu-parent.menu-item-has-children>a {
        position: relative;
        padding-right: 0;
        padding-left: 0.5rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* Right-pointing triangle for Programs menu */
    .mega-menu-parent.menu-item-has-children>a::before {
        content: '' !important;
        display: inline-block !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        background-color: var(--color-white) !important;
        clip-path: polygon(35% 30%, 35% 70%, 70% 50%) !important;
        border: none !important;
        margin-right: 0.5rem !important;
        transition: transform 0.3s ease !important;
        flex-shrink: 0 !important;
        order: -1 !important;
    }

    /* Hide ::after element */
    .mega-menu-parent.menu-item-has-children>a::after {
        display: none !important;
    }

    /* Rotate triangle down when Programs menu is expanded (always on mobile) */
    .mega-menu-parent.menu-item-has-children.active>a::before {
        transform: none !important;
        clip-path: polygon(30% 35%, 70% 35%, 50% 70%) !important;
    }

    /* Disable hover effects on mobile for nav-list */
    .nav-list li:hover .sub-menu,
    .nav-list li:focus-within .sub-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
    }

    .nav-list .sub-menu li {
        border-bottom: none;
    }

    .nav-list .sub-menu a {
        padding: 0 0 1.5rem 2.5rem;
        margin: 0;
        width: 100%;
        font-size: 14px;
        color: var(--color-white);
        position: relative;
    }

    .nav-list .sub-menu a:hover {
        background-color: transparent;
        /* color: var(--color-link-blue); */
    }

    /* Remove outline for mouse users, show focus outline for keyboard users */
    .nav-list .sub-menu a:focus {
        outline: none;
        border: none;
        box-shadow: none;
    }

    /* Disable default outline for sub-menu links to use clean custom indicators */
    .nav-list .sub-menu a:focus-visible {
        outline: none !important;
    }

    /* Draw a custom focus outline using ::after for 2nd-level submenu links to avoid bottom padding space */
    .header .nav-list .sub-menu>li>a:not(.category-title-link):focus-visible::after {
        content: '' !important;
        display: block !important;
        position: absolute;
        top: -2px;
        bottom: calc(1.5rem - 2px);
        left: calc(2.5rem - 6px);
        right: 12px;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border: 2px solid var(--color-green-lime);
        border-radius: 4px;
        pointer-events: none;
    }

    /* Keep standard inset focus outline for 3rd-level submenu links and dynamic mobile program links */
    .nav-list .sub-menu .sub-menu a:focus-visible,
    .mega-mobile-submenu .mobile-program-item a:focus-visible {
        outline: 2px solid var(--color-green-lime) !important;
        outline-offset: -2px !important;
    }

    /* Support standard focus outline for dynamic category CTA links */
    .mega-mobile-submenu .mobile-category-header .category-title-link:focus-visible {
        outline: 2px solid var(--color-green-lime) !important;
        outline-offset: -2px !important;
    }

    /* Remove triangle icons from submenu leaf links only */
    .nav-list .sub-menu li:not(.menu-item-has-children)>a::before,
    .nav-list .sub-menu li:not(.menu-item-has-children)>a::after {
        display: none !important;
    }

    .nav-list .sub-menu li::before,
    .nav-list .sub-menu li::after {
        display: none !important;
    }

    /* Nested submenu parent items (e.g., Financial Aid) use the same icon behavior */
    .nav-list .sub-menu>.menu-item-has-children>a {
        display: flex;
        align-items: center;
    }

    .nav-list .sub-menu>.menu-item-has-children>a::before {
        content: '' !important;
        display: inline-block !important;
        width: 1rem !important;
        height: 1rem !important;
        background-color: var(--color-white) !important;
        clip-path: polygon(35% 30%, 35% 70%, 70% 50%) !important;
        border: none !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
        order: -1 !important;
        transform: none !important;
    }

    .nav-list .sub-menu>.menu-item-has-children.active>a::before {
        clip-path: polygon(30% 35%, 70% 35%, 50% 70%) !important;
    }


    /* 3rd Level Submenu Styles for Mobile/Tablet - Hide by default */
    .nav-list .sub-menu .sub-menu,
    .header-menu .sub-menu .sub-menu {
        position: static !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        list-style: none !important;
        display: block !important;
        transition: all 0.3s ease !important;
    }

    /* 3rd level menu items - indented and light blue */
    .nav-list .sub-menu .sub-menu li,
    .header-menu .sub-menu .sub-menu li {
        border-bottom: none;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* 3rd level menu links - light blue color, extra indentation, smaller font */
    .nav-list .sub-menu .sub-menu a,
    .header-menu .sub-menu .sub-menu a {
        display: block !important;
        padding: 2px 0 2px 55px !important;
        /* Minimal top/bottom padding, increased left padding */
        margin: 0 !important;
        /* No margin for compact spacing */
        width: 100%;
        font-size: 14px !important;
        /* Reduced font size for better hierarchy */
        font-weight: 300 !important;
        line-height: 1.4em !important;
        /* Tighter line height */
        color: var(--color-sky-cyan) !important;
        /* Light blue color matching the image */
        text-decoration: none !important;
        transition: color 0.2s ease !important;
        position: relative !important;
        white-space: normal;
        /* Allow text to wrap if needed */
    }

    /* 3rd level menu links hover state */
    .nav-list .sub-menu .sub-menu a:hover,
    .header-menu .sub-menu .sub-menu a:hover {
        background-color: transparent !important;
        color: var(--color-link-blue) !important;
        /* Keep hover readable on light submenu backgrounds */
    }

    /* Remove any icons from 3rd level links */
    .nav-list .sub-menu .sub-menu a::before,
    .nav-list .sub-menu .sub-menu a::after,
    .header-menu .sub-menu .sub-menu a::before,
    .header-menu .sub-menu .sub-menu a::after {
        display: none !important;
    }

    /* Show 3rd level submenu when parent 2nd level item is active (toggled via arrow) */
    .nav-list .sub-menu>.menu-item-has-children.active>.sub-menu,
    .header-menu .sub-menu>.menu-item-has-children.active>.sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 500px !important;
        padding: 0 !important;
        margin-top: 8px !important;
        /* Reduced top margin for tighter spacing */
        overflow: visible !important;
    }

    .header-actions {
        gap: 12px;
    }

    .hero {
        padding: 80px 0;
    }

    .hero-headline {
        font-size: 36px;
    }

    .hero-subheadline {
        font-size: 18px;
    }

    .hero-right {
        padding: 32px;
    }

    .hero-cta {
        font-size: 28px;
    }

    .intro,
    .programs {
        padding: 5rem 0;
    }

    .intro-headline,
    .programs-headline {
        font-size: 2.25rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

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

    .news .container {
        padding: 0 1rem;
    }

    .news {
        padding: 4rem 0;
    }

    .news-headline {
        font-family: 'Outfit', sans-serif;
        font-size: 2rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2.5rem;
        margin-bottom: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .news-card {
        max-width: 100%;
        width: 100%;
        margin: 0;
        min-height: auto;
    }

    .news-image {
        aspect-ratio: 376 / 252;
        height: auto;
        min-height: auto;
        max-height: none;
    }

    .news-content {
        padding: 1rem 1.5rem;
    }

    .news-title {
        font-family: 'Outfit', sans-serif;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1.625rem;
    }

    /* Footer mobile styles moved to earlier @media (max-width: 767px) block */

    .footer-logo-img {
        max-width: 12.5rem;
    }
}

/* ===================================
   NEWS - TABLET 768px to 1024px
   =================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .news {
        padding: 5rem 0;
    }

    .news .container {
        padding: 0 3.125rem;
    }

    .news-headline {
        padding-left: 0;
        padding-right: 0;
    }

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





/* ===================================
   SMALL MOBILE - 480px and below
   =================================== */
@media (max-width: 480px) {

    /* Container Padding */
    .container,
    header .container,
    footer .container,
    section>.container,
    main>.container {
        padding: 0 1rem;
    }

    .hero {
        padding: 3.75rem 0;
    }

    .hero-headline {
        font-size: 1.75rem;
    }

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

    .hero-right {
        padding: 1.5rem;
    }

    .hero-cta {
        font-size: 1.5rem;
    }

    .intro-headline,
    .advantage-headline,
    .support-headline,
    .accreditations-headline,
    .contact-headline {
        font-size: 1.75rem;
    }

    .program-nav {
        flex-direction: column;
        gap: 2px;
    }

    .news {
        padding-top: 4.1875rem;
        padding-bottom: 3.75rem;
    }

    .news-headline {
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 2rem;
        margin-bottom: 1.5rem;
        /* padding-left: 15px; */
    }

    .news-grid {
        gap: 20px;
    }

    .news-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    /* .news-image {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
    } */

    .news-content {
        padding: 16px;
    }

    .news-title {
        font-size: 1.125rem;
    }

    .news-date {
        font-size: 13px;
    }

    .news-snippet {
        font-size: 13px;
    }

    .read-more-link {
        font-size: 13px;
    }

    .program-nav {
        flex-direction: column;
        gap: 2px;
    }
}

/* ===================================
    TABLET PORTRAIT / LARGE MOBILE - 481px to 767px
    =================================== */
@media(max-width: 767.98px) {
    .news {
        padding-top: 4.1875rem;
        padding-bottom: 3.75rem;
    }

    .news .container {
        padding: 0 1rem;
    }

    .news-headline {
        font-family: 'Outfit', sans-serif;
        font-size: 2rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2.5rem;
        margin-bottom: 2.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

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

    .news-card {
        max-width: 100%;
        width: 100%;
        margin: 0;
        min-height: auto;
    }

    .news-image {
        aspect-ratio: 376 / 252;
        height: auto;
        min-height: auto;
        max-height: none;
    }

    .news-content {
        padding: 1rem 1.5rem;
    }

    .news-title {
        font-family: 'Outfit', sans-serif;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1.625rem;
    }

    .news-date {
        font-size: 0.875rem;
    }

    .news-snippet {
        font-size: 0.875rem;
    }

    .news .read-more-link {
        font-family: 'Outfit', sans-serif;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.25rem;
    }

    .program-nav {
        flex-direction: column;
        gap: 2px;
    }

    .program-tab {
        border-radius: 0.5rem;
        margin-bottom: 0.125rem;
    }

    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
    }

    .stat {
        padding: 1.5rem 1rem;
    }

    .stat-number {
        font-size: 3rem;
    }
}

/* Enhanced Mobile Menu Styles */
.mobile-menu-btn {
    display: none;
}

@media (max-width: 767px) {
    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
    }

    .mobile-menu-btn span {
        width: 100%;
        height: 3px;
        background: var(--color-slate-700);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

/* Enhanced Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 32.16px;
    height: 32.16px;
    background: var(--color-green-success);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
}

.scroll-to-top:hover {
    background: var(--color-green-success-dark);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(34, 197, 94, 0.4);
}

/* Enhanced Form Focus States */
.hero-input:focus,
.hero-dropdown:focus,
.contact-form input:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-green-success);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
    transform: translateY(-1px);
}

/* Enhanced Button Hover Effects */
.btn:hover,
.support-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Enhanced Card Hover Effects */
.news-card:hover,
.stat:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Smooth Transitions for All Interactive Elements */
* {
    transition: all 0.2s ease;
}

/* Enhanced Loading States */
.image-placeholder {
    position: relative;
    overflow: hidden;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading 1.5s infinite;
}

/* Enhanced Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn-primary {
        background: var(--color-black-pure);
        color: var(--color-white);
        border: 2px solid var(--color-black-pure);
    }

    .btn-secondary {
        background: var(--color-white);
        color: var(--color-black-pure);
        border: 2px solid var(--color-black-pure);
    }

    .category-tag {
        top: 8px;
        left: 8px;
        /* padding: 4px 8px; */
        padding: 10px 18px 10px 16px;
        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        max-width: calc(100% - 20px);
    }
}

/* ===================================
   11. BLOG TEMPLATE - Matching Figma Design
   =================================== */

/* Main Container */
.page-template-blog {
    background-color: #F5F5F5;
    min-height: 100vh;
}

/* ===== HERO SECTION ===== */
.hero {
    margin: 4rem auto 5rem;
    max-width: 108rem;
    /* padding: 0 9.375rem; */
}

.hero__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--color-white);
    border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
    overflow: hidden;
    box-shadow: 0rem 0.25rem 0.5rem 0rem rgba(48, 48, 48, 0.08);
    min-height: 32.5rem;
    max-width: 85.5rem;
    margin: 0 auto;
}

.hero__content {
    background: var(--color-white);
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-right: 4rem;
    padding-left: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: flex-start;
    border-radius: 0.75rem 0rem 0rem 0.75rem;
    min-width: 0;
}

.hero__title {
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    font-style: normal;
    line-height: 3.5rem;
    letter-spacing: 0;
    color: var(--color-primary-dark);
    margin: 0;
    width: 100%;
    width: 33.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero__subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    font-style: normal;
    line-height: 2rem;
    letter-spacing: 0;
    color: var(--color-accent-blue);
    margin: 0;
    width: 100%;
    max-width: 30rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero__image {
    /* background: var(--color-gray-border); */
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-700-ui);
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    min-width: 0;
}

/* Button Link Styles */
.btn-link {
    display: inline-flex;
    align-items: center;
    width: 10.375rem;
    height: 2.5rem;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    opacity: 1;
    color: var(--color-green-alt-428);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25em;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-link:hover {
    gap: 0.5rem;
    color: var(--color-green-alt-8f28);
}

.btn-link img,
.btn-link svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.btn-link:hover img,
.btn-link:hover svg {
    transform: translateX(0.25rem);
}

.btn-link svg,
.btn-link svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ===== CATEGORY NAVIGATION ===== */
.category-nav {
    margin: 5rem auto;
    max-width: 108rem;
    padding: 0 16.25rem;
}

.category-nav__container {
    /* background: var(--color-white); */
    border-radius: 0.5rem;
    /* padding: 0.75rem 2rem; */
    /* box-shadow: 0rem 0.25rem 0.5rem 0rem rgba(48, 48, 48, 0.08); */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 85.5rem;
    margin: 0 auto;
    height: 3.4375rem;
}

/* Scroll Wrapper for Horizontal Scrolling */
.category-nav__scroll-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    overflow: hidden;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
    min-width: 0;
    /* Allow flex item to shrink */
}

/* Fade effect on left side when scrolled (Disabled to match Page Sub Navigation Bar) */
.category-nav__scroll-wrapper::before {
    display: none;
}

.category-nav__scroll-wrapper.has-left-arrow::before {
    display: none;
}

/* Hide mobile dropdown on desktop */
.category-nav__mobile {
    display: none;
}

.category-nav__list {
    display: flex;
    gap: 0rem;
    align-items: center;
    list-style: none;
    margin: -0.5rem 0;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    /* Right padding only to prevent items from being cut off, left starts at edge */
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    white-space: nowrap;
    min-width: 0;
    /* Allow flex item to shrink */
    transition: padding-left 0.3s ease;
}

/* Add left padding when left arrow is visible */
.category-nav__list.has-left-padding {
    padding-left: 2.1875rem;
    /* Space for left arrow + margin */
}

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

.category-nav__list li {
    flex-shrink: 0;
    /* Prevent items from shrinking */
    position: relative;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.category-nav__list li:focus-within {
    z-index: 2;
}

/* Scroll Arrow Buttons */
.category-nav__scroll-arrow {
    position: relative;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: none;
    z-index: 10;
    transition: background-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    color: var(--color-primary-dark);
    outline: none;
}

.category-nav__scroll-arrow--left {
    order: -1;
    margin-right: 0.5rem;
}

.category-nav__scroll-arrow.category-nav__scroll-arrow--left svg,
.category-nav__scroll-arrow.category-nav__scroll-arrow--left svg * {
    transform: scaleX(-1) !important;
    transform-origin: center !important;
}

.category-nav__scroll-arrow--right {
    order: 1;
    margin-left: 0.5rem;
}

/* Desktop/Tablet hover & active visual treatment (matches Page Sub Navigation Bar) */
@media (min-width: 768px) {
    .category-nav__scroll-arrow:hover {
        background-color: rgba(40, 50, 60, 0.1);
        transform: scale(1.1);
    }

    .category-nav__scroll-arrow:active {
        transform: scale(0.95);
        background-color: rgba(40, 50, 60, 0.15);
    }
}

.category-nav__scroll-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    pointer-events: none;
    color: inherit;
}

.category-nav__scroll-arrow:disabled,
.category-nav__scroll-arrow[aria-hidden="true"] {
    display: none;
}

/* Search Item (Fixed on Right, Outside Scroll Area) */
.category-nav__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.category-nav__link {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5rem;
    letter-spacing: 0;
    text-align: center;
    color: var(--color-primary-dark);
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 0.375rem;
    background: transparent;
    transition: color 0.2s ease;
    display: inline-flex;
    white-space: nowrap;
    position: relative;
}

.category-nav__link.active {
    color: var(--color-primary-dark);
    background-color: white;
}

.category-nav__link:hover {
    color: var(--color-link-blue);
}

.category-nav__link:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    /* outline-offset: 4px; */
    border-radius: 6px;
    position: relative;
    z-index: 2;
}

.category-nav__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-left: 0;
    border-left: none;
    flex-shrink: 0;
}

.category-nav__search button {
    /* width: 11.875rem; */
    /* height: 3.5rem; */
    border-radius: 0.5rem;
    /* border-width: 0.0625rem; */
    opacity: 1;
    background: var(--color-surface-muted);
    border: 0.0625rem solid var(--color-tailwind-300);
    cursor: pointer;
    padding: 0.625rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    gap: 0.5rem;
}

.category-nav__search button:hover {
    background: var(--color-tailwind-200);
    border-color: var(--color-tailwind-400);
}

.category-nav__search-icon {
    width: 2rem;
    height: 2rem;
    display: block;
    color: var(--color-primary-dark);
}

/* Search text */
.category-nav__search-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4em;
    color: var(--color-primary-dark);
}

/* Inline Search Field Styles */
.category-nav__search-btn {
    background: var(--color-surface-muted);
    border: 0.0625rem solid var(--color-tailwind-300);
    border-radius: 0.5rem;
    cursor: pointer;
    padding: 0.625rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    gap: 0.5rem;
}

.category-nav__search-btn:hover {
    background: var(--color-tailwind-200);
    border-color: var(--color-tailwind-400);
}

.category-nav__search-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-white);
    border: 0.0625rem solid var(--color-tailwind-200);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
    min-width: 18.75rem;
}

.category-nav__search-field:focus-within {
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 0.1875rem rgba(0, 122, 204, 0.1);
}

.category-nav__search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-primary-dark);
    padding: 0.25rem 0.5rem;
}

.category-nav__search-input::placeholder {
    color: var(--color-gray-700-ui);
    font-weight: 300;
}

.category-nav__search-submit,
.category-nav__search-clear {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-dark);
    transition: all 0.2s ease;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.category-nav__search-submit:hover,
.category-nav__search-clear:hover {
    background: rgba(0, 122, 204, 0.1);
    color: var(--color-accent-blue);
}

.category-nav__search-submit svg,
.category-nav__search-clear svg {
    width: 1.25rem;
    height: 1.25rem;
}

.category-nav__search-clear {
    color: var(--color-gray-700-ui);
}

.category-nav__search-clear:hover {
    color: var(--color-danger-soft);
    background: rgba(255, 107, 107, 0.1);
}

/* ==== ARTICLES SECTION ==== */
.articles-section {
    margin: 3.75rem auto 5rem;
    max-width: 108rem;
    padding: 0 16.25rem;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 23.5rem);
    gap: 3.75rem 2.5rem;
    margin: 0 auto 5rem;
    justify-content: center;
    max-width: 85.5rem;
}

/* ===== ARTICLE CARD ===== */
.article-card {
    background: transparent;
    border-radius: 1rem;
    overflow: visible;
    box-shadow: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 23.5rem;
    height: 25.5rem;
}

.article-card:hover {
    transform: translateY(-0.5rem);
}

.article-card__image {
    background: var(--color-gray-border);
    width: 23.5rem;
    height: 25.5rem;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0rem 0.125rem 1rem 0rem rgba(40, 50, 60, 0.16);
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.article-card__tag {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: var(--color-white);
    padding: 0.625rem 1.125rem 0.625rem 1rem;
    border-radius: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4286em;
    color: var(--color-primary-dark);
    z-index: 10;
    width: 5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: auto;
}

.article-card__tag .label {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
    display: block;
}

.article-card__overlay {
    background: var(--color-white);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 23.5rem;
    height: 9.75rem;
    position: absolute;
    top: 15.75rem;
    left: 0;
    border-radius: 0rem 0rem 1rem 1rem;
}

.article-card__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5714em;
}

.article-card__date {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: 0;
    color: var(--color-date);
}

.article-card__divider {
    width: 0.0625rem;
    height: 1.25rem;
    background: var(--color-gray-700-ui);
    stroke-width: 0.0625rem;
}

.article-card__author {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: 0;
    color: var(--color-gray-700-ui);
}

.article-card__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.625rem;
    letter-spacing: 0;
    color: var(--color-primary-dark);
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3.5rem;
}

.article-card__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-green-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4286em;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.875rem 0rem;
    border-radius: 0.5rem;
    width: 7.1875rem;
    height: 1.5rem;
}

.article-card__footer:hover {
    gap: 0.75rem;
    color: var(--color-green-alt-8f28);
}

.article-card__footer span {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
    text-align: center;
    display: inline-block;
}

.article-card__footer img,
.article-card__footer svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.article-card__footer:hover img,
.article-card__footer:hover svg {
    transform: translateX(0.25rem);
}

/* ===== LOAD MORE BUTTON ===== */
.load-more {
    margin: 5rem auto 5rem;
    text-align: center;
}

.load-more .btn-link {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--color-green-dark);
    width: 10.375rem;
    height: 2.5rem;
    padding: 0.875rem 0rem;
    gap: 0.5rem;
}

.load-more .btn-link svg {
    width: 1.5rem;
    height: 1.5rem;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
    margin-top: 0.1875rem;
}

.load-more .btn-link:hover svg {
    transform: rotate(90deg) translateX(0.25rem);
}

/* Blog Disclaimer Section */
.blog-disclaimer {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: 0;
    text-align: center;
    background-color: #F5F5F5;
    padding: 2rem 7.625rem;
    margin: 3.75rem auto 5rem;
    max-width: 108rem;
    border-radius: 0.5rem;
}

.blog-disclaimer__text,
.blog-disclaimer__note {
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.6em;
    color: var(--color-primary-dark);
    margin: 0;
}

.blog-disclaimer__text {
    margin-bottom: 1rem;
}

.blog-disclaimer__note {
    margin-bottom: 0;
}

/* Blog Template Responsive Styles - See Main Media Queries Section Below */

/* Blog only - Tablet (1024px and below) */
@media (max-width: 1024px) {
    .hero {
        padding: 0 3.125rem;
        margin: 3rem auto 4rem;
    }

    .hero__container {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero__content {
        padding-top: 3rem;
        padding-bottom: 3rem;
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .hero__title {
        font-size: 2rem;
    }

    .hero__subtitle {
        font-size: 1.25rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero__image {
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .category-nav {
        margin: 4rem auto;
        padding: 0 5rem;
    }

    .category-nav__container {
        padding: 0.5rem 0rem;
    }

    .category-nav__list {
        gap: 2rem;
    }

    .category-nav__link {
        font-size: 0.9375rem;
        padding: 0.625rem 0.5rem;
    }

    .category-nav__search {
        margin-left: auto;
    }

    .category-nav__search-icon {
        width: 1.375rem;
        height: 1.375rem;
    }

    /* Inline search responsive */
    .category-nav__search-field {
        min-width: 15.625rem;
    }

    .category-nav__search-input {
        font-size: 0.875rem;
    }

    .articles-section {
        padding: 0 3.125rem;
        margin: 4rem auto;
    }

    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        justify-items: center;
        margin-bottom: 3rem;
    }

    .article-card {
        width: 94%;
        max-width: 23.5rem;
        height: 25.5rem;
    }

    .article-card__image {
        width: 100%;
        height: 15rem;
    }

    .article-card__overlay {
        width: 100%;
        height: 10.5rem;
        top: 15rem;
    }

    .article-card__title {
        font-size: 1.125rem;
        margin: 0 0 0.75rem 0;
    }

    .article-card__footer {
        font-size: 0.9375rem;
    }

    .load-more {
        margin: 3rem auto 4rem;
    }

    .blog-disclaimer {
        padding: 1.5rem 2rem;
        margin: 3rem auto 3.75rem;
    }

    .blog-disclaimer__text,
    .blog-disclaimer__note {
        font-size: 0.8125rem;
    }
}

@media (min-wdith: 768px) and (max-width:870px) {
    .hero {
        padding: 0 1.75rem !important;
    }

    .articles_section {
        padding: 0 2.5rem !important;
    }
}

/* Blog Specific - Mobile (48rem and below) */
@media (max-width: 767.98px) {
    .hero {
        padding: 0;
        margin: 0 auto 2.5rem;
        max-width: 25.5rem;
    }

    .hero__container {
        border-radius: 0.75rem 0.75rem 0rem 0rem;
        max-width: 25.5rem;
        /* min-height: 39.375rem; */
        grid-template-columns: 1fr;
        /* background: var(--color-gray-border); */
        background: var(--color-white);

    }

    .hero__content {
        padding: 1.5rem 1.25rem;
        gap: 1rem;
        border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
        width: auto;
        height: auto;
    }

    .hero__title {
        font-size: 1.5rem;
        line-height: 1.3;
        color: var(--color-primary-dark);
        width: auto;
        height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero__subtitle {
        font-size: 1rem;
        line-height: 1.4;
        color: var(--color-accent-blue);
        width: auto;
        height: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn-link {
        font-size: 0.875rem;
        padding: 0.75rem 0;
    }

    .btn-link svg {
        width: 1rem;
        height: 1rem;
    }

    .hero__image {
        min-height: 12.5rem;
        order: -1;
        /* background: var(--color-gray-border); */
    }

    .hero__container {
        display: flex;
        flex-direction: column;
    }

    /* Mobile category navigation - Dropdown style as per Figma */
    .category-nav {
        margin: 2rem auto 3rem;
        padding: 0 1rem;
    }

    .category-nav__container {
        width: 100%;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Hide desktop navigation list on mobile */
    .category-nav__scroll-wrapper {
        display: none;
    }

    .category-nav__list--desktop {
        display: none !important;
    }

    /* Hide search on mobile (dropdown is used instead) */
    .category-nav__search {
        display: none;
    }

    /* Show mobile dropdown */
    .category-nav__mobile {
        display: block;
        position: relative;
        width: 100%;
    }

    .category-nav__select {
        width: 100%;
        height: 3rem;
        background: #FAFAFA;
        border: 0.0625rem solid var(--color-tailwind-200);
        border-radius: 0.5rem;
        padding: 0.75rem 3rem 0.75rem 1rem;
        font-family: 'Outfit', sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--color-text-primary);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        box-shadow: 0rem 0.125rem 0.25rem 0rem rgba(48, 48, 48, 0.04);
        transition: all 0.2s ease;
    }

    .category-nav__select:focus {
        outline: none;
        border-color: var(--color-link-blue);
        box-shadow: 0 0 0 0.1875rem rgba(0, 114, 206, 0.1);
    }

    .category-nav__select-icon {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1.25rem;
        color: var(--color-text-primary);
        pointer-events: none;
        transition: transform 0.2s ease;
    }

    .category-nav__select:focus~.category-nav__select-icon {
        transform: translateY(-50%) rotate(180deg);
    }

    .articles-section {
        padding: 0 1rem;
        margin: 2rem auto 3rem;
    }

    .articles-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .article-card {
        border-radius: 1rem;
        box-shadow: 0px 2px 16px 0px var(--color-primary-dark)29;
        width: 100%;
        height: 25.5rem;
    }

    .article-card:hover {
        transform: translateY(-0.25rem);
        box-shadow: 0rem 0.25rem 1.5rem 0rem rgba(40, 50, 60, 0.2);
    }

    .article-card__image {
        height: 15.75rem;
        background: var(--color-gray-border);
    }

    .article-card__tag {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.4286em;
        top: 0.5rem;
        left: 0.5rem;
        border-radius: 0.5rem;
    }

    .article-card__overlay {
        padding: 1rem 1.5rem;
        gap: 0.5rem;
        height: 9.75rem;
    }

    .article-card__meta {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5714em;
        gap: 1rem;
    }

    .article-card__divider {
        height: 1.25rem;
        stroke-width: 0.0625rem;
    }

    .article-card__author {
        font-weight: 300;
        line-height: 1.5714em;
    }

    .article-card__title {
        font-size: 1.125rem;
        font-weight: 300;
        line-height: 1.4444em;
        margin: 0 0 0.5rem 0;
        color: var(--color-primary-dark);
        height: 3.5rem;
    }

    .article-card__footer {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.4286em;
        color: var(--color-green-primary);
        padding: 0.875rem 0;
        width: 7.1875rem;
        height: 1.5rem;
    }

    .article-card__footer img,
    .article-card__footer svg {
        width: 1rem;
        height: 1rem;
    }

    .load-more {
        margin: 2.5rem auto 3rem;
    }

    .blog-disclaimer {
        padding: 1.25rem 1.5rem;
        margin: 2.5rem auto 3rem;
        border-radius: 0.375rem;
    }

    .blog-disclaimer__text,
    .blog-disclaimer__note {
        font-size: 0.875rem;
        line-height: 1.375rem;
    }

    .blog-disclaimer__text {
        font-family: 'Outfit', sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 0.875rem;
        line-height: 1.375rem;
        letter-spacing: 0;
        text-align: center;
        margin-bottom: 0.75rem;
    }

    /* Responsive image styles for mobile */
    .wp-image-84333 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto 1em;
        display: block;
    }

    .alignright {
        float: none !important;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Blog only - Tablet (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-template-blog .hero__container {
        display: flex;
        flex-direction: column;
    }

    .page-template-blog .hero__image {
        order: -1;
    }

    .page-template-blog .category-nav {
        /* Match the articles grid/container width on tablet */
        max-width: 85.5rem;
        padding: 0 3.125rem;
        margin: 4rem auto;
    }

    .page-template-blog .articles-grid {
        grid-template-columns: repeat(2, 50%);
    }

    .article-card__image {
        border-radius: 1rem 1rem 0 0;
    }
}

@media (min-width: 1024px) and (max-width: 1727.98px) {
    .page-template-blog .articles-section {
        padding: 0 clamp(3rem, 4.65vw, 5rem);
    }

    .page-template-blog .articles-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 2.5rem;
        max-width: calc(75.5rem - ((1728px - 100vw) * 0.35));
        width: 100%;
    }

    .page-template-blog .article-card,
    .page-template-blog .article-card__image,
    .page-template-blog .article-card__overlay {
        width: 100%;
    }
}

/* Blog - Medium Desktop (1025px to 1450px) - align hero with articles grid */
@media (min-width: 1025px) and (max-width: 1540px) {
    .page-template-blog .hero {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}



.wp-image-84333 {
    float: none;
}

/* Blog Specific - Small Mobile (3rem and below) */
@media (max-width: 3rem) {
    .hero {
        padding: 1.25rem 1rem;
        margin: 0 auto;
    }

    .hero__container {
        border-radius: 0.5rem;
        padding: 1.25rem;
        margin: 0 auto;
    }

    .hero__content {
        padding: 1.25rem 1rem;
        gap: 0.75rem;
        text-align: left;
    }

    .hero__title {
        font-size: 2rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero__subtitle {
        font-size: 1.125rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero__image {
        /* min-height: 2rem; */
    }

    .btn-link {
        font-size: 1rem;
    }

    .btn-link svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Mobile category dropdown - Small screens */
    .category-nav {
        margin: 1.5rem auto 2.5rem;
        padding: 0rem;
        height: 5rem;
        text-align: center;
    }

    .category-nav__select {
        font-family: 'Outfit', sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 1rem;
        line-height: 1.5rem;
        letter-spacing: 0;
        height: 5rem;
        padding: 1.75rem 2.75rem 1.75rem 1.75rem;
        border-radius: 0.375rem;
        background: var(--color-surface-muted);
    }

    .category-nav__select-icon {
        right: 2rem;
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Inline search mobile */
    .category-nav__search-field {
        min-width: 12.5rem;
        padding: 0.375rem 0.625rem;
    }

    .category-nav__search-input {
        font-size: 0.8125rem;
        padding: 0.125rem 0.375rem;
    }

    .category-nav__search-submit svg,
    .category-nav__search-clear svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .articles-section {
        padding: 0 1rem;
        margin: 1.5rem auto 2.5rem;
        text-align: center;
    }

    .articles-grid {
        gap: 2rem;
        margin-bottom: 2rem;
        justify-content: center;
    }



    .article-card__image {
        height: 16.5625rem;
        width: 100%;
    }

    .article-card__tag {
        padding: 0.25rem 0.625rem;
        font-size: 0.6875rem;
        font-weight: 500;
        line-height: 1.2727;
        top: 0.625rem;
        left: 0.625rem;
    }

    .article-card__overlay {
        padding: 1.25rem;
        gap: 1rem;
        width: 100%;
    }

    .article-card__divider {
        height: 0.625rem;
    }

    .article-card__title {
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.5rem;
        margin: 0 0 0.375rem 0;
        text-align: left;
    }

    .article-card__footer {
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.3333;
        gap: 0.375rem;
    }

    .article-card__footer img,
    .article-card__footer svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    .load-more {
        margin: 2rem auto 2.5rem;
        text-align: center;
    }

    .load-more .btn-link {
        font-size: 1rem;
    }

    .blog-disclaimer {
        padding: 1rem;
        margin: 2rem auto 2.5rem;
        text-align: center;
    }

    .blog-disclaimer__text,
    .blog-disclaimer__note {
        font-size: 0.875rem;
        line-height: 1.375rem;
    }

    .blog-disclaimer__text {
        font-family: 'Outfit', sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 0.875rem;
        line-height: 1.375rem;
        letter-spacing: 0;
        text-align: center;
        margin-bottom: 0.625rem;
    }
}

/* Blog hero desktop padding */
@media (min-width: 1025px) and (max-width: 1280px) {
    .hero__content {
        padding-left: 3rem;
    }
}

@media (min-width: 1281px) and (max-width: 1368px) {
    .hero__content {
        padding-left: 7.375rem;
    }

}

@media (min-width: 1369px) and (max-width: 1410px) {
    .hero__content {
        padding-left: calc(9.375rem - ((100vw - 85.5rem) / 2) - 2rem);
    }
}

@media (min-width: 1411px) and (max-width: 1540px) {
    .hero__content {
        padding-left: calc(9.375rem - ((100vw - 85.5rem) / 2));
    }
}


@media (min-width: 1541px) and (max-width: 1728px) {
    .hero__content {
        padding-left: calc(clamp(6rem, 15.046vw, 16.25rem) - ((100vw - 85.5rem) / 2));
    }
}

@media (min-width: 1729px) {
    .hero__content {
        padding-left: 5rem;
    }
}

/* ===================================
   12. SINGLE POST TEMPLATE - Matching Figma Design
   =================================== */

.single-post-template {
    background-color: var(--color-surface-muted);
    min-height: 100vh;
}

.single-post {
    background-color: var(--color-surface-muted);
}

/* Post Navigation */
.single-navigation {
    max-width: 105rem;
    margin: 0 auto;
    padding: 2.5rem 9.375rem 0;
}

.single-navigation__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.single-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-primary-dark);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5em;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: transparent;
}

.single-nav-link:hover {
    color: var(--color-accent-blue);
    background: rgba(0, 122, 204, 0.05);
}

.single-nav-link svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Previous Post Link */
.single-nav-link--prev:hover svg {
    transform: translateX(-0.25rem);
}

/* Next Post Link */
.single-nav-link--next:hover svg {
    transform: translateX(0.25rem);
}

/* Back to Blog Link */
.single-nav-link--back {

    /* margin: 0 auto; */
    font-weight: 500;
    color: var(--color-accent-blue);
}

.single-nav-link--back:hover {
    background: rgba(0, 122, 204, 0.1);
}

/* Navigation Text */
.single-nav-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.single-nav-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-700-ui);
    text-transform: uppercase;
    letter-spacing: 0.0313rem;
}

.single-nav-title {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-primary-dark);
    max-width: 12.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.single-nav-link:hover .single-nav-label {
    color: var(--color-accent-blue);
}

.single-nav-link:hover .single-nav-title {
    color: var(--color-accent-blue);
}

/* Header Section */
.single-header {
    margin: 2rem auto 5rem;
    max-width: 108rem;
    /* padding: 0 9.375rem; */
}

.single-header__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--color-gray-border);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(48, 48, 48, 0.08);
    min-height: 32.5rem;
    max-width: 85.5rem;
    margin: 0 auto;
}

.single-header__content {
    background: var(--color-white);
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-right: 4rem;
    padding-left: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 0.75rem 0 0 0.75rem;
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .single-header__content {
        padding-left: 5rem;
    }
}

@media (min-width: 1281px) and (max-width: 1368px) {
    .single-header__content {
        padding-left: 9.375rem;
    }
}

@media (min-width: 1369px) and (max-width: 1540px) {
    .single-header__content {
        padding-left: calc(9.375rem - ((100vw - 85.5rem) / 2));
    }
}

@media (min-width: 1541px) and (max-width: 1728px) {
    .single-header__content {
        padding-left: calc(clamp(6rem, 15.046vw, 16.25rem) - ((100vw - 85.5rem) / 2));
    }
}

@media (min-width: 1729px) {
    .single-header__content {
        padding-left: 5rem;
    }
}

.single-header__text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 33.75rem;
}

.single-header__date {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-accent-blue);
}

.single-header__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    line-height: 3.5rem;
    letter-spacing: 0;
    color: var(--color-primary-dark);
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.single-header__subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0;
    color: var(--color-accent-blue);
    margin: 0;
}

.single-header__image {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-700-ui);
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    overflow: hidden;
}

.single-header__image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.image-placeholder-text {
    font-family: 'Avenir Next', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-700-ui);
}

/* Content Section */
.single-content {
    max-width: 70.5rem;
    margin: 0 auto 5rem;
    padding: 0 1.25rem;
}

.single-content__body {
    font-family: 'Outfit', sans-serif;
}

.single-content__body p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5em;
    color: var(--color-black-soft);
    margin: 0 0 1.5rem 0;
}

.single-content__body h2,
.single-content__body h3,
.single-content__body h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.25em;
    color: var(--color-black-pure);
    margin: 3rem 0 1.5rem 0;
}

.single-content__body h2:first-child,
.single-content__body h3:first-child {
    margin-top: 0;
}

.single-content__body ul,
.single-content__body ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.single-content__body li {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5em;
    color: var(--color-black-soft);
    margin-bottom: 0.75rem;
}

.single-content__body img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 2.5rem 0;
}

.single-content__body table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.single-content__body th,
.single-content__body td {
    width: auto !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.single-content__body blockquote {
    background: #F5F5F5;
    border-left: 0.25rem solid var(--color-accent-blue);
    padding: 1.5rem 2rem;
    margin: 2.5rem 0;
    font-size: 1.125rem;
    font-style: italic;
    color: var(--color-primary-dark);
}

.single-content__body hr {
    border: none;
    border-top: 0.0625rem solid var(--color-gray-border);
    margin: 3rem 0;
}

.single-content__body pre,
.single-content__body code {
    background: #F5F5F5;
    border-radius: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

.single-content__body pre {
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.single-content__body pre code {
    padding: 0;
    background: transparent;
}

/* Share Section */
.single-share {
    margin: 5rem 0 3rem;
    padding: 3rem 0;
    border-top: 0.0625rem solid var(--color-gray-border);
}

.single-share__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3333em;
    color: var(--color-black-soft);
    text-align: center;
    margin: 0 0 2rem 0;
}

.single-share__icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.share-icon:hover {
    transform: translateY(-0.25rem);
}

.share-icon svg {
    width: 3.5rem;
    height: 3.5rem;
}

/* Disclaimer */
.single-disclaimer {
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.5em;
    color: var(--color-primary-dark);
    margin: 3rem 0 0 0;
    border-radius: 0.5rem;
    text-align: center;
}

/* ===================================
   13. RELATED POSTS SECTION
   =================================== */

/* Related Posts Section */
.Related-Posts {
    padding: 5rem 0;
    /* background: white; */
}

.Related-Posts .container {
    max-width: 85.56rem;
    margin: 0 auto;
    padding: 0 5rem;
    width: 100%;
    box-sizing: border-box;
}

.Related-Posts-headline {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-primary-dark);
    margin-bottom: 3rem;
}

.Related-Posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 23.5rem);
    gap: 2.5rem;
}

.Related-Posts-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: 25.5rem;
    max-width: 23.5rem;
}

.Related-Posts-card:hover {
    transform: translateY(-0.25rem);
}

.Related-Posts-card .news-image {
    height: 15.75rem;
    width: 100%;
    background: var(--color-gray-border);
    display: block;
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
    position: relative;
    box-sizing: border-box;
    max-height: 15.75rem;
    min-height: 15.75rem;
    flex-shrink: 0;
}

.Related-Posts-card .news-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.Related-Posts-card .article-card__overlay {
    background: var(--color-white);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    height: 9.75rem;
    border-radius: 0 0 0.75rem 0.75rem;
    margin-top: 0;
}

.Related-Posts-card .article-card__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5714em;
}

.Related-Posts-card .article-card__date {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: 0;
    color: var(--color-date);
}

.Related-Posts-card .article-card__divider {
    width: 0.0625rem;
    height: 1.25rem;
    background: var(--color-gray-700-ui);
    stroke-width: 0.0625rem;
}

.Related-Posts-card .article-card__author {
    color: var(--color-gray-700-ui);
    font-weight: 300;
    line-height: 1.5714em;
}

.Related-Posts-card .article-card__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.325rem;
    letter-spacing: 0;
    color: var(--color-primary-dark);
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3.5rem;
}

.Related-Posts-card .article-card__title a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.Related-Posts-card .article-card__title a:hover {
    color: var(--color-accent-blue);
}

.Related-Posts-card .article-card__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-green-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4286em;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0;
    margin-top: auto;
}

.Related-Posts-card .article-card__footer:hover {
    gap: 0.75rem;
    color: var(--color-green-alt-8f28);
}

.Related-Posts-card .article-card__footer span {
    display: inline-block;
}

.Related-Posts-card .article-card__footer svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.Related-Posts-card .article-card__footer:hover svg {
    transform: translateX(0.25rem);
}

/* Single Post Responsive Styles - See Main Media Queries Section */

/* Single Post Specific - Tablet */
@media (max-width: 1024px) {
    .single-navigation {
        padding: 2rem 5rem 0;
    }

    .single-navigation__container {
        gap: 1rem;
    }

    .single-nav-link {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    .single-nav-link svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .single-nav-title {
        max-width: 9.375rem;
        font-size: 0.8125rem;
    }

    .single-nav-label {
        font-size: 0.6875rem;
    }

    .single-header {
        padding: 0 5rem;
        margin: 1.5rem auto 4rem;
    }

    .single-header__container {
        grid-template-columns: 1fr;
        min-height: auto;
        width: 100%;
    }

    .single-header__content {
        padding: 3rem 2rem;
        border-radius: 0 0 0.75rem 0.75rem;
        order: 2;
    }

    .single-header__text {
        max-width: 100%;
    }

    .single-header__title {
        font-size: 2.25rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .single-header__subtitle {
        font-size: 1.25rem;
    }

    .single-header__image {
        min-height: 0;
        aspect-ratio: 16 / 9;
        order: -1;
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .single-header__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .single-content {
        padding: 0 5rem;
    }

    .single-content__body h2,
    .single-content__body h3,
    .single-content__body h4 {
        font-size: 1.75rem;
    }

    /* Related Posts Tablet */
    .Related-Posts .container {
        padding: 0 5rem;
    }

    .Related-Posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .Related-Posts-card {
        height: auto;
        min-height: 25rem;
    }

    .Related-Posts-card .news-image {
        height: 15rem;
        min-height: 15rem;
        max-height: 15rem;
        width: 100%;
        flex-shrink: 0;
    }

    .Related-Posts-card .news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .Related-Posts-card .news-image-link {
        display: block;
        width: 100%;
        height: 100%;
    }

    .Related-Posts-card .article-card__overlay {
        height: auto;
        min-height: 8.75rem;
    }
}

/* Single Post Specific - Mobile */
@media (max-width: 767px) {
    .single-navigation {
        padding: 1.5rem 1rem 0;
    }

    .single-navigation__container {
        display: grid;
        grid-template-columns: minmax(5.625rem, max-content) 1fr minmax(5.625rem, max-content);
        gap: 0.375rem;
        width: 100%;
    }

    .single-nav-link {
        padding: 0.625rem 0.375rem;
        font-size: 0.6875rem;
        justify-content: center;
        gap: 0.5rem;
    }

    .single-nav-link svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .single-nav-link--prev {
        justify-content: flex-start;
        background: transparent;
        border: 0.0625rem solid var(--color-tailwind-200);
        grid-column: 1;
    }

    .single-nav-link--back {
        background: rgba(0, 122, 204, 0.1);
        color: var(--color-accent-blue);
        font-weight: 500;
        justify-content: center;
        grid-column: 2;
    }

    .single-nav-link--next {
        justify-content: flex-end;
        background: transparent;
        border: 0.0625rem solid var(--color-tailwind-200);
        grid-column: 3;
    }

    .single-nav-text {
        flex: 1;
    }

    .single-nav-title {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
    }

    .single-header {
        padding: 0 1rem;
        margin: 1rem auto 2.5rem;
    }

    .single-header__container {
        border-radius: 0.75rem;
        min-height: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 25.5rem;
    }

    .single-header__content {
        padding: 1.5rem 1.25rem;
        gap: 1rem;
        border-radius: 0 0 0.75rem 0.75rem;
        order: 2;
        width: 100%;
    }

    .single-header__text {
        gap: 1rem;
    }

    .single-header__title {
        font-size: 1.5rem;
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .single-header__subtitle {
        font-size: 1rem;
        line-height: 1.4;
    }

    .single-header__date {
        font-size: 0.875rem;
    }

    .single-header__image {
        min-height: 0;
        aspect-ratio: 16 / 9;
        order: -1;
        border-radius: 0.75rem 0.75rem 0 0;
        width: 100%;
    }

    .single-header__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .single-content {
        padding: 0 1rem;
        margin: 0 auto 4rem;
    }

    .single-content__body p {
        font-size: 0.875rem;
    }

    .single-content__body table {
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    .single-content__body th,
    .single-content__body td {
        padding: 0.5rem;
    }

    .single-content__body h2,
    .single-content__body h3,
    .single-content__body h4 {
        font-size: 1.25rem;
        margin: 2rem 0 1rem 0;
    }

    .single-share {
        margin: 3rem 0 2rem;
        padding: 2rem 0;
    }

    .single-share__title {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .single-share__icons {
        flex-wrap: wrap;
        gap: 1.8vw;
    }

    .share-icon svg {
        width: 2.75rem;
        height: 2.75rem;
    }

    .single-disclaimer {
        margin: 2rem 0 0 0;
    }

    /* Related Posts Mobile */
    .Related-Posts {
        padding: 4rem 0;
    }

    .Related-Posts .container {
        padding: 0 1rem;
    }

    .Related-Posts-headline {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .Related-Posts-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 23.5rem;
        margin: 0 auto;
    }

    .Related-Posts-card {
        height: auto;
        width: 100%;
        margin: 0 auto;
    }

    .Related-Posts-card .news-image {
        height: 15.75rem;
        min-height: 15.75rem;
        max-height: 15.75rem;
        width: 100%;
    }

    .Related-Posts-card .news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .Related-Posts-card .news-image-link {
        display: block;
        width: 100%;
        height: 100%;
    }

    .Related-Posts-card .article-card__overlay {
        height: auto;
        min-height: 9.75rem;
        padding: 1rem 1.5rem;
    }
}

/* Single Post Specific - Small Mobile */
@media (max-width: 480px) {
    .single-navigation {
        padding: 1.25rem 1rem 0;
    }

    .single-nav-link {
        font-size: 0.875rem;
        padding: 0.625rem 0.5rem;
        gap: 0;
    }

    .single-nav-link--next {
        text-align: right;
    }

    .single-nav-link--prev {
        text-align: left;
    }

    .single-nav-link svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .single-nav-title {
        font-size: 0.75rem;
    }

    .single-nav-label {
        font-size: 0.625rem;
    }

    .single-header {
        margin: 0.75rem auto 2rem;
    }

    .single-header__container {
        border-radius: 0.5rem;
    }

    .single-header__content {
        padding: 1.25rem 1rem;
    }

    .single-header__title {
        font-size: 1.25rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .single-header__subtitle {
        font-size: 0.875rem;
    }

    .single-header__image {
        min-height: 11.25rem;
    }

    .single-content__body h2,
    .single-content__body h3,
    .single-content__body h4 {
        font-size: 1.125rem;
    }

    .share-icon svg {
        width: 2rem;
        height: 2rem;
    }

    /* Related Posts Small Mobile */
    .Related-Posts {
        padding: 3rem 0;
    }

    .Related-Posts .container {
        padding: 0 1rem;
    }

    .Related-Posts-headline {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .Related-Posts-grid {
        gap: 1.25rem;
        max-width: 100%;
    }

    .Related-Posts-card {
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    .Related-Posts-card .news-image {
        /* height: 12.5rem;
        min-height: 12.5rem;
        max-height: 12.5rem; */
        width: 100%;
        flex-shrink: 0;
    }

    .Related-Posts-card .news-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .Related-Posts-card .news-image-link {
        display: block;
        width: 100%;
        height: 100%;
    }

    .Related-Posts-card .article-card__overlay {
        padding: 0.75rem 1rem;
        height: auto;
        min-height: 8.75rem;
        gap: 0.75rem;
    }

    .Related-Posts-card .article-card__meta {
        font-size: 0.75rem;
        gap: 0.75rem;
    }

    .Related-Posts-card .article-card__title {
        font-size: 1rem;
        line-height: 1.4;
        min-height: auto;
    }

    .Related-Posts-card .article-card__footer {
        font-size: 0.8125rem;
    }

    .single-share__icons {
        flex-wrap: wrap;
        gap: 0.5vw;
    }
}

/* Container for the whole block */
.disability-services-contact-info {

    font-size: 16px;
    line-height: 1.5;
    color: var(--color-black-pure);
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Each column */
.disability-services-contact-col {
    display: flex;
    align-items: center;
    gap: 8px;
    /* space between "Phone:" / "Email:" and the value */
}

/* Bold labels */
.disability-services-contact-col strong {
    font-weight: bold;
    white-space: nowrap;
}

/* Links styling - blue, underlined on hover only */
.disability-services-contact-col a {
    color: var(--color-green-text);
    text-decoration: none;
}

.disability-services-contact-col a:hover,
.disability-services-contact-col a:focus {
    text-decoration: underline;
}

/* Desktop layout - side by side and centered */
@media (min-width: 1025px) {
    .disability-services-contact-info {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 80px;
        /* space between Phone and Email */
    }

    .disability-services-contact-col {
        display: flex;
        align-items: center;
        gap: 8px;
    }
}

/* Mobile & Tablet layout - stacked and left-aligned */
@media (max-width: 767px) {
    .disability-services-contact-info {
        display: block;
        /* forces vertical stacking */
        text-align: left;
        /* left-aligned */
        padding-left: 20px;
        padding-right: 20px;
    }

    .disability-services-contact-col {
        margin-bottom: 12px;
        /* space between Phone and Email lines */
    }

    .disability-services-contact-col:last-child {
        margin-bottom: 0;
    }
}

/* new changes for career page end */
.career-service-boxes {
    background: var(--color-bg-panel-gray);
    padding: 20px
}

.career-service-boxes-title {
    border-bottom: 1px solid var(--color-border-charcoal);
    padding-bottom: 5px;
}

.career-service-icons i,
.career-service-icons a {
    color: var(--color-navy-deep);
}

.career-service-icons i {
    padding-right: 10px;
}

.career-service-right-box {
    border-left: 3px solid var(--color-navy-strip);
    padding-left: 50px;
}

.career-service-list-color li a {
    color: var(--color-navy-deep);
}

.student-transcripts {
    display: block;
    border: 1px solid var(--color-border-hairline);
}

.student-transcripts-inner {
    clear: both;
    line-height: 1.65em;
}

.transcript-steps-inner {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    border: 3px solid;
    border-color: var(--color-navy-muted);
}

.transcripts-bold {
    display: flex;
    flex: none;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 5em;
    line-height: 100%;
    font-weight: bold;
    color: var(--color-navy-muted);
    padding: 10px;
    border-right: 3px solid var(--color-navy-muted);
}

.transcripts-bold-inner {
    display: flex;
    flex: 1;
    align-items: center;
    background: var(--color-orange-accent);
    padding: 20px;
    color: var(--color-charcoal-mid);
    font-weight: 600;
}

.request-transcripts-btn {
    padding-top: 40px;
    padding-bottom: 40px;
}

.provo-transcripts-inner {
    border: 1px solid;
    padding: 20px;
}

.field-italic-marked {
    font-style: italic;
}

.student-application-main {
    display: none;
}

@media screen and (min-width: 768px) {
    .custom-container-full-size {
        max-width: 1728px;
        padding: 40px 150px;
        margin: 0px auto;
    }
}

@media (max-width: 767px) {
    .custom-container-full-size {
        padding: 20px;
    }
}

.av_textblock_section a {
    color: var(--color-black-pure)
}

.program-navigation-bar-nav li:hover {
    background: var(--color-white);
}

.program-navigation-bar-nav li {
    padding: 10px;
}

.program-navigation-bar-nav li:target {
    background-color: var(--color-surface-gray-100);
    border-left: 4px solid var(--color-bootstrap-blue-alt);
    transition: all 0.3s ease;
}

.main-color-table tr:nth-child(odd) {
    background: var(--color-bg-panel-light)
}

.main-color-table tr:nth-child(even) {
    background: var(--color-white)
}

/* new changes for career page end */

/* sitemap root list */
.html-sitemap ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* first level items */
.html-sitemap>ul>li {
    margin: 4px 0;
}

/* child pages (one level deeper) */
.html-sitemap ul ul li {
    margin: 2px 0;
    padding-left: 20px;
    /* indentation for inner pages */
    font-size: 0.95em;
}

/* even deeper levels if needed */
.html-sitemap ul ul ul li {
    padding-left: 40px;
}

.html-sitemap ul {
    list-style-type: disc;
    /* Shows bullet points */
    list-style-position: outside;
    /* Keeps bullets outside the content */
    padding-left: 20px;
    /* Adds space for bullets */
}

.html-sitemap ul ul,
.html-sitemap ul ul ul {
    list-style: disc outside;
}

.html-sitemap ul {
    list-style: disc outside;
    padding-left: 20px;
    /* Ensures bullets are visible */
}

/* sitemap root list */
.html-sitemap ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* first level items */
.html-sitemap>ul>li {
    margin: 4px 0;
}

/* child pages (one level deeper) */
.html-sitemap ul ul li {
    margin: 2px 0;
    padding-left: 20px;
    /* indentation for inner pages */
    font-size: 0.95em;
}

/* even deeper levels if needed */
.html-sitemap ul ul ul li {
    padding-left: 40px;
}

.html-sitemap ul {
    list-style-type: disc;
    /* Shows bullet points */
    list-style-position: outside;
    /* Keeps bullets outside the content */
    padding-left: 20px;
    /* Adds space for bullets */
}

.html-sitemap ul ul,
.html-sitemap ul ul ul {
    list-style: disc outside;
}

.html-sitemap ul {
    list-style: disc outside;
    padding-left: 20px;
    /* Ensures bullets are visible */
}

@media only screen and (min-width: 1024px) {
    .va-benifits-custom {
        padding-left: 93px;
    }
}

.custom_va-benifits-custom-new {
    margin-left: 0px;
}

.custom_va-custom-custom-new {
    margin-right: 0px;
}

@media (max-width: 600px) {
    .available-programs-mobile .wp-block-group {
        justify-content: center;
    }

    hr.wp-block-separator {
        color: var(--color-gray-border);
        max-width: 1728px;
        margin: 0 auto;
        /* margin-top: 48px; */
        /* margin-top: 60px; */

    }

    .campus-name {
        font-family: Outfit;
        font-weight: 400;
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    .campus-address {
        font-family: Outfit;
        font-weight: 500;
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .campus-contact {
        font-family: Outfit;
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.5rem;
        color: var(--color-accent-blue) !important;
    }

    .campus-button {
        width: 200px;
        height: 56px;
        top: 383px;
        left: 380px;
        border-radius: 100px;
        padding-top: 14px;
        padding-right: 0px;
        padding-bottom: 14px;
        padding-left: 0px !important;
        gap: 8px;
        opacity: 1;
        background-color: var(--color-white) !important;
        /* Primary Green from Figma */
        color: var(--color-green-dark) !important;
        /* Text Dark from Figma */
        font-size: 16px;
        line-height: 24px;
        font-family: 'Outfit';
        font-weight: 500;
        justify-content: start !important;
        margin-top: 0rem !important;
    }

    .campus-button svg {
        fill: var(--color-green-dark) !important;
        /* Text Dark from Figma */
        margin-left: 10px;
        vertical-align: middle;
    }

    .close-button-wrapper {
        flex: 0.2;
    }
}

/* Separator Style */
hr.wp-block-separator {
    color: var(--color-gray-border);
    max-width: 1728px;
    margin: 0 auto;
    /* margin-top: 80px; */
    /* margin-top: 60px; */

}

.wp-block-unitek-college-full-width-container .page-title-button--get-started {
    width: 200px;
    height: 56px;
    top: 383px;
    left: 380px;
    border-radius: 100px;
    padding-top: 14px;
    padding-right: 24px;
    padding-bottom: 14px;
    padding-left: 24px;
    gap: 8px;
    opacity: 1;
    background-color: var(--color-page-title-btn);
    /* Primary Green from Figma */
    color: var(--color-page-title-btn-text);
    /* Text Dark from Figma */
    font-size: 18px;
}

.campus-name {
    font-family: Outfit;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3rem;
}

.campus-address {
    font-family: Outfit;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.campus-contact {
    font-family: Outfit;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--color-accent-blue) !important;
}

.campus-button {
    display: flex;
    width: 200px !important;
    height: 56px !important;
    top: 383px;
    left: 380px;
    border-radius: 100px;
    padding-top: 14px;
    padding-right: 24px;
    padding-bottom: 14px;
    padding-left: 24px;
    gap: 8px;
    opacity: 1;
    background-color: var(--color-green-primary);
    color: var(--color-white);
    font-size: 18px;
    line-height: 26px;
    font-family: 'Outfit';
    font-weight: 500;
    align-content: stretch;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-top: 2rem;
}

.campus-button svg {
    fill: var(--color-white);
    /* Text Dark from Figma */
}

@media (min-width: 768px) {
    .campus-button {

        color: var(--color-white) !important;
        /* Text Dark from Figma */
    }
}

.mtb-20-imp {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

@media (min-width: 1025px) {

    /* collapse siblings when hovering another parent */
    .menu-item-has-children:hover~.menu-item-has-children>.sub-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

@media (min-width: 1025px) {
    .header-menu:not(:hover) .sub-menu {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

@media (min-width: 1025px) {

    /* Disable focus-within for normal dropdown */
    .nav-list>.menu-item-has-children:not(.mega-menu-parent):focus-within>.sub-menu {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .mega-menu-parent:hover>.mega-menu-modal {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

/* Desktop nav fix (871px+): keep nested 3rd-level flyouts visible */
@media (min-width: 871px) {
    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children) {
        max-height: calc(100vh - 150px) !important;
        overflow: visible !important;
        padding-right: 12.75rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        box-shadow: none !important;
        isolation: isolate !important;
        filter: drop-shadow(0 0.25rem 0.625rem rgba(0, 0, 0, 0.1)) !important;
    }

    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children)::before {
        display: none !important;
    }

    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children)>li {
        position: relative !important;
        z-index: 1 !important;
        background: var(--color-white) !important;
    }

    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children)>li:first-child {
        border-top-left-radius: 0.375rem !important;
        border-top-right-radius: 0.375rem !important;
        padding-top: 1rem !important;
    }

    .nav-list>.menu-item-has-children>.sub-menu:has(> .menu-item-has-children)>li:last-child {
        border-bottom-left-radius: 0.375rem !important;
        border-bottom-right-radius: 0.375rem !important;
        padding-bottom: 1rem !important;
    }

    .nav-list .sub-menu>.menu-item-has-children {
        position: relative;
    }

    /* Override 871-1024 tablet collapse rules for nested flyouts. */
    .nav-list .sub-menu>.menu-item-has-children>.sub-menu {
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        margin-left: 0.25rem !important;
        background: var(--color-white) !important;
        min-width: 12.5rem !important;
        padding: 0.5rem 0 !important;
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
        z-index: 1002 !important;
        transform: translateX(-0.3125rem) !important;
        border-radius: 0.375rem !important;
    }

    .nav-list .sub-menu>.menu-item-has-children:hover>.sub-menu,
    .nav-list .sub-menu>.menu-item-has-children:focus-within>.sub-menu,
    .nav-list .sub-menu>.menu-item-has-children>.sub-menu:hover {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    /* Keep nested flyout text colors stable across tablet/desktop overrides. */
    .nav-list .sub-menu>.menu-item-has-children>.sub-menu a {
        color: var(--color-slate-700) !important;
    }

    .nav-list .sub-menu>.menu-item-has-children>.sub-menu a:hover,
    .nav-list .sub-menu>.menu-item-has-children>.sub-menu a:focus {
        color: var(--color-link-blue) !important;
        background-color: transparent !important;
    }
}

/* ===================================
   Contact 7 form acceptance checkbox highlight
   =================================== */

/* Style the checkbox on focus for better visibility */
.acceptance-label input[type="checkbox"]:focus {
    outline: 3px solid var(--color-bootstrap-blue-alt);
    /* Your preferred focus color */
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
    /* optional for more emphasis */
}

/* Optional: Style the label text for better accessibility (no focus highlight) */
.acceptance-label {
    margin-left: 0.5rem;
}

/* ===================================
   Latest news section
   =================================== */
/* ------------------------------------
   READ MORE (always green)
------------------------------------ */
.news-readmore,
.news-readmore svg path {
    color: var(--color-green-alt-428);
    fill: var(--color-green-alt-428);
    stroke: var(--color-green-alt-428);
}

/* ------------------------------------
   CARD LINK WRAPPER
------------------------------------ */
.news-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.news-card-link:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 4px;
    border-radius: 10px;
}

/* ------------------------------------
   TITLE COLORS (FINAL & CORRECT)
------------------------------------ */

/* Default title state (NO hover) */
.news-card-link .news-title {
    color: var(--color-deep-ink);
    /* Dark default as shown in screenshot */
    transition: color 0.2s ease;
}

/* Hover state (mouse over card OR keyboard focus) */
.news-card-link:hover .news-title,
.news-card-link:focus-visible .news-title {
    color: var(--color-accent-blue);
    /* Blue on hover (matches screenshot) */
}

/* ------------------------------------
   Header serach section 
------------------------------------ */

.search-overlay input:focus-visible,
.search-overlay button:focus-visible,
.search-overlay a:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
}

.top-bar-search-icon {
    font-family: 'Material Symbols Rounded';
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--color-white);
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* Programs intro image radius (24px = 1.5rem) via stable runtime class */
.programs-intro-image-radius {
    border-radius: 1.5rem;
    overflow: hidden;
}

.programs-intro-image-radius img {
    border-radius: inherit;
    display: block;
}

/* === FIX DOUBLE FOCUS ISSUE === */
.search-overlay .search-input-container:focus-within {
    box-shadow: none;
}

/* === INPUT FOCUS === */
.search-overlay .search-input-field:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 3px;
}

/* === SEARCH BUTTON FOCUS === */
.search-overlay .search-submit-btn:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 3px;
    border-radius: 50%;
}

.search-overlay .search-submit-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.search-overlay .search-submit-btn:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

/* === CLOSE BUTTON FOCUS === */
.search-overlay .search-close-btn:focus,
.search-overlay .search-close-btn:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
}

/* === TEXTBOX FOCUS FIX === */

/* Remove weak input outline */
.search-overlay .search-input-field:focus-visible {
    outline: none;
}

/* Strong visible focus for textbox */
.search-overlay .search-input-container:has(.search-input-field:focus-visible) {
    box-shadow: 0 0 0 1px var(--color-gray-border);
    border-color: var(--color-gray-border);
}

/* Improve caret visibility */
.search-overlay .search-input-field {
    caret-color: var(--color-white);
    color: var(--Base-UI-Light-ffffff, #FFF);
    font-feature-settings: 'liga' off, 'clig' off;
    /* Body Light 20 */
    font-family: Outfit;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    /* 140% */
}

.search-overlay .search-input-field::placeholder {
    color: var(--color-gray-border);
    font-feature-settings: 'liga' off, 'clig' off;
    /* Body Light 20 */
    font-family: Outfit;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    /* 140% */
    opacity: 1;
}

.search-overlay .search-input-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* === FIX DOUBLE FOCUS ISSUE === */
.search-overlay .search-input-container:focus-within {
    box-shadow: none;
}

/* === INPUT FOCUS === */
.search-overlay .search-input-field:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 3px;
}

/* === SEARCH BUTTON FOCUS === */
.search-overlay .search-submit-btn:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 3px;
    border-radius: 50%;
}

.search-overlay .search-submit-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.search-overlay .search-submit-btn:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

/* === CLOSE BUTTON FOCUS === */
.search-overlay .search-close-btn:focus,
.search-overlay .search-close-btn:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
}

/* === TEXTBOX FOCUS FIX === */

/* Remove weak input outline */
.search-overlay .search-input-field:focus-visible {
    outline: none;
}

/* Strong visible focus for textbox */
.search-overlay .search-input-container:has(.search-input-field:focus-visible) {
    box-shadow: 0 0 0 1px var(--color-gray-border);
    border-color: var(--color-gray-border);
}

/* Improve caret visibility */
.search-overlay .search-input-field {
    caret-color: var(--color-white);
    color: var(--Base-UI-Light-ffffff, #FFF);
    font-feature-settings: 'liga' off, 'clig' off;
    /* Body Light 20 */
    font-family: Outfit;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    /* 140% */
}

.search-overlay .search-input-field::placeholder {
    color: var(--color-gray-border);
    font-feature-settings: 'liga' off, 'clig' off;
    /* Body Light 20 */
    font-family: Outfit;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    /* 140% */
    opacity: 1;
}

.header-cta .btn-apply:focus-visible,
article.news-card:focus-visible {
    outline: 3px solid var(--color-black-pure);
    outline-offset: 4px;
    border-radius: 10px;
}

/* ===================================
   SEARCH RESULTS PAGE
   =================================== */
.search-results-page-wrapper {
    min-height: 60vh;
}

.search-results-page-header {
    background-color: var(--color-primary-dark);
    padding: 3rem 150px;
}

.search-results-page-title {
    color: var(--color-white);
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

.search-results-page-main {
    padding: 2rem 0;
    /* horizontal alignment via #vap-results-region */
}

/* Results region: alignment container matching header-container at every breakpoint */
#vap-results-region {
    max-width: 1728px;
    width: 100%;
    margin: 0 auto;
    padding-left: 9.375rem;
    padding-right: 9.375rem;
}

.search-results-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

/* Shared column heading */
.search-results-pages-column-title,
.search-results-posts-column-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-tailwind-200);
}

.search-results-count {
    color: #FF6B35;
    font-weight: 700;
}

/* Pages list */
.search-results-pages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.search-results-pages-list-item a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    background-color: #F9FAFB;
    transition: background-color 0.2s ease;
}

.search-results-pages-list-item a:hover {
    background-color: #EFF6FF;
}

.search-results-pages-item-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #141A1E;
    line-height: 1.4;
}

.search-results-pages-item-date {
    font-size: 0.8125rem;
    color: var(--color-gray-700-ui);
}

/* Posts list */
.search-results-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-results-posts-list-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.search-results-posts-item-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: var(--color-tailwind-200);
}

.search-results-posts-item-thumbnail--empty {
    background-color: var(--color-tailwind-200);
}

.search-results-posts-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-results-posts-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.search-results-posts-item-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.search-results-posts-item-title a {
    color: #141A1E;
    text-decoration: none;
    transition: color 0.2s ease;
}

.search-results-posts-item-title a:hover {
    color: var(--color-link-blue);
}

.search-results-posts-item-date {
    font-size: 0.8125rem;
    color: var(--color-gray-700-ui);
}

/* View all / empty state */
.search-results-view-all-link {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-tailwind-200);
}

.search-results-view-all-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-link-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.search-results-view-all-link a:hover {
    color: #005aa3;
}

.search-results-view-all-icon {
    font-size: 1.2rem;
}

.search-results-no-results {
    color: var(--color-gray-700-ui);
    font-size: 0.9rem;
}

.search-results-empty {
    text-align: center;
    padding: 2rem 0;
}

.search-results-empty h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
}

.search-results-empty p {
    color: var(--color-gray-700-ui);
    margin-bottom: 1.5rem;
}

.vap-no-results {
    padding: 60px 20px;
    text-align: center;
}

.vap-no-results-text {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #3C434A;
    margin: 0 0 8px 0;
}

.vap-no-results-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: #3C434A;
    opacity: 0.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .search-results-page-header {
        padding: 2rem 0;
    }

    .search-results-page-main {
        padding: 2rem 0;
    }
}

@media (max-width: 768px) {
    .search-results-content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .search-results-page-title {
        font-size: 1.5rem;
    }
}

/* ===================================
   VIEW-ALL RESULTS PAGE  (vap-*)
   Dedicated /search-results/?type=posts|pages page.
   Background: #F0F1F2 (Base UI-One) for the header section.
   =================================== */

/* ── Light (#F0F1F2) header section: title + search bar ── */
.vap-light-section {
    background-color: #F0F1F2;
    padding: 3rem 0;
    /* full-width bg; horizontal alignment via .vap-header-inner */
}

.vap-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin: 0;
}

/* Inner wrapper: alignment container matching header-container at every breakpoint */
.vap-header-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1728px;
    width: 100%;
    margin: 0 auto;
    padding-left: 9.375rem;
    padding-right: 9.375rem;
}

/* Search form fills the column */
.vap-search-form {
    width: 100%;
}

/* ── Standalone search bar for the light header ── */
.vap-light-search {
    width: 100%;
    max-width: 600px;
}

.vap-search-bar {
    display: flex;
    align-items: center;
    background: var(--color-white);
    border: 1.5px solid #D1D5DB;
    border-radius: 0.5rem;
    height: 3.5rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.vap-search-bar:focus-within {
    border-color: var(--color-link-blue);
}

.vap-search-input {
    flex: 1;
    padding: 0 1rem;
    background: transparent;
    border: none;
    color: var(--color-primary-dark);
    font-family: 'Outfit', sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    outline: none;
    min-width: 0;
}

.vap-search-input::placeholder {
    color: #9CA3AF;
    font-family: 'Outfit', sans-serif;
    font-size: 1.0625rem;
    font-weight: 300;
}

.vap-search-btn {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.25rem;
    padding: 0;
    background: var(--color-link-blue);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6.25rem;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.vap-search-btn:hover {
    background: #005aa3;
}

.vap-search-btn svg {
    width: 20px;
    height: 20px;
}

/* ── Meta row: count text + type switcher ── */
.vap-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vap-count {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
}

.vap-count strong {
    font-weight: 700;
    color: var(--color-link-blue);
}

.vap-count em {
    font-style: normal;
    font-weight: 600;
}

/* ── Posts / Pages tab switcher ── */
.vap-type-switcher {
    display: flex;
    gap: 0.5rem;
}

.vap-type-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    border: 1.5px solid #D1D5DB;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700-ui);
    text-decoration: none;
    background: var(--color-white);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.vap-type-btn:hover {
    border-color: var(--color-link-blue);
    color: var(--color-link-blue);
}

.vap-type-btn--active {
    border-color: var(--color-link-blue);
    background: var(--color-link-blue);
    color: var(--color-white);
}

.vap-type-btn--active:hover {
    background: #005aa3;
    border-color: #005aa3;
    color: var(--color-white);
}

/* ── Divider ── */
.vap-divider {
    border: none;
    border-top: 2px solid #68747C;
    margin: 0;
}

/* ── Results list ── */
.vap-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.vap-result-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    /* 24px — title to excerpt, per Figma */
    padding: 2rem 0 1.5rem;
    /* 32px top / 24px bottom — halved from Figma's 64px/48px since the date text (which those gaps were measured around) isn't rendered */
    border-bottom: 1px solid var(--color-tailwind-200);
}

.vap-result-item:last-child {
    border-bottom: none;
}

.vap-result-date {
    font-size: 0.8125rem;
    color: var(--color-gray-700-ui);
    font-family: 'Outfit', sans-serif;
}

.vap-result-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    /* 24px — Figma */
    font-weight: 400;
    /* Figma weight 400 */
    margin: 0;
    line-height: 2rem;
    /* 32px — Figma */
    letter-spacing: 0;
    /* Figma 0% */
}

.vap-result-title a {
    color: var(--color-link-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.vap-result-title a:hover {
    color: #005aa3;
    text-decoration: underline;
}

.vap-result-excerpt {
    font-size: 0.9375rem;
    color: var(--color-gray-700-ui);
    line-height: 1.6;
    margin: 0;
}

/* ── Pagination ── */
.vap-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border: none;
}

.vap-pagination-list {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vap-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid #D1D5DB;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary-dark);
    text-decoration: none;
    background: var(--color-white);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.vap-page-btn:hover {
    border-color: var(--color-primary-dark);
    background: #F0F1F2;
}

/* Active page: dark filled circle (var(--color-primary-dark)) — matches Figma Ellipse 7 */
.vap-page-btn--active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    pointer-events: none;
}

/* Arrow buttons don't need the border by default */
.vap-page-arrow {
    border-color: transparent;
    background: transparent;
    color: var(--color-gray-700-ui);
}

.vap-page-arrow:hover {
    border-color: #D1D5DB;
    background: #F0F1F2;
    color: var(--color-primary-dark);
}

.vap-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    font-size: 0.875rem;
    color: var(--color-gray-700-ui);
    letter-spacing: 0.05em;
}

.vap-pagination-info {
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    color: var(--color-gray-700-ui);
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .vap-light-section {
        padding: 2rem 0;
        /* keep bg full-width; .vap-header-inner handles horizontal */
    }

    .vap-light-search {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .vap-section-title {
        font-size: 1.5rem;
    }

    .vap-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .vap-result-title {
        font-size: 1.25rem;
        /* reduced from 24px desktop but still readable on mobile */
    }

    .vap-pagination {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Alignment: mirror header-container padding at every breakpoint ── */
@media (min-width: 1541px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: clamp(6rem, 15.046vw, 16.25rem);
        padding-right: clamp(6rem, 15.046vw, 16.25rem);
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (min-width: 871px) and (max-width: 1024px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: 3.125rem;
        padding-right: 3.125rem;
    }
}

@media (min-width: 769px) and (max-width: 870px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: 3.125rem;
        padding-right: 3.125rem;
    }
}

@media (max-width: 768px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ===================================
   SEARCH RESULTS PAGE
   =================================== */
.search-results-page-wrapper {
    min-height: 60vh;
}

.search-results-page-header {
    background-color: var(--color-primary-dark);
    padding: 3rem 150px;
}

.search-results-page-title {
    color: var(--color-white);
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

.search-results-page-main {
    padding: 3rem 0;
    /* horizontal alignment via #vap-results-region */
}

/* Results region: alignment container matching header-container at every breakpoint */
#vap-results-region {
    max-width: 1728px;
    width: 100%;
    margin: 0 auto;
    padding-left: 9.375rem;
    padding-right: 9.375rem;
}

.search-results-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

/* Shared column heading */
.search-results-pages-column-title,
.search-results-posts-column-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-tailwind-200);
}

.search-results-count {
    color: #FF6B35;
    font-weight: 700;
}

/* Pages list */
.search-results-pages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.search-results-pages-list-item a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    background-color: #F9FAFB;
    transition: background-color 0.2s ease;
}

.search-results-pages-list-item a:hover {
    background-color: #EFF6FF;
}

.search-results-pages-item-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #141A1E;
    line-height: 1.4;
}

.search-results-pages-item-date {
    font-size: 0.8125rem;
    color: var(--color-gray-700-ui);
}

/* Posts list */
.search-results-posts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-results-posts-list-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.search-results-posts-item-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: 0.375rem;
    overflow: hidden;
    background-color: var(--color-tailwind-200);
}

.search-results-posts-item-thumbnail--empty {
    background-color: var(--color-tailwind-200);
}

.search-results-posts-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-results-posts-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.search-results-posts-item-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.search-results-posts-item-title a {
    color: #141A1E;
    text-decoration: none;
    transition: color 0.2s ease;
}

.search-results-posts-item-title a:hover {
    color: var(--color-link-blue);
}

.search-results-posts-item-date {
    font-size: 0.8125rem;
    color: var(--color-gray-700-ui);
}

/* View all / empty state */
.search-results-view-all-link {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-tailwind-200);
}

.search-results-view-all-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-link-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.search-results-view-all-link a:hover {
    color: #005aa3;
}

.search-results-view-all-icon {
    font-size: 1.2rem;
}

.search-results-no-results {
    color: var(--color-gray-700-ui);
    font-size: 0.9rem;
}

.search-results-empty {
    text-align: center;
    padding: 2rem 0;
}

.search-results-empty h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
}

.search-results-empty p {
    color: var(--color-gray-700-ui);
    margin-bottom: 1.5rem;
}

.vap-no-results {
    padding: 60px 20px;
    text-align: center;
}

.vap-no-results-text {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #3C434A;
    margin: 0 0 8px 0;
}

.vap-no-results-sub {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: #3C434A;
    opacity: 0.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .search-results-page-header {
        padding: 2rem 0;
    }

    .search-results-page-main {
        padding: 2rem 0;
    }
}

@media (max-width: 768px) {
    .search-results-content-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .search-results-page-title {
        font-size: 1.5rem;
    }
}

/* ===================================
   VIEW-ALL RESULTS PAGE  (vap-*)
   Dedicated /search-results/?type=posts|pages page.
   Background: #F0F1F2 (Base UI-One) for the header section.
   =================================== */

/* ── Light (#F0F1F2) header section: title + search bar ── */
.vap-light-section {
    background-color: #F0F1F2;
    padding: 3rem 0;
    /* full-width bg; horizontal alignment via .vap-header-inner */
}

.vap-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin: 0;
}

/* Inner wrapper: alignment container matching header-container at every breakpoint */
.vap-header-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1728px;
    width: 100%;
    margin: 0 auto;
    padding-left: 9.375rem;
    padding-right: 9.375rem;
}

/* Search form fills the column */
.vap-search-form {
    width: 100%;
}

/* ── Standalone search bar for the light header ── */
.vap-light-search {
    width: 100%;
    max-width: 600px;
}

.vap-search-bar {
    display: flex;
    align-items: center;
    background: var(--color-white);
    border: 1.5px solid #D1D5DB;
    border-radius: 0.5rem;
    height: 3.5rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.vap-search-bar:focus-within {
    border-color: var(--color-link-blue);
}

.vap-search-input {
    flex: 1;
    padding: 0 1rem;
    background: transparent;
    border: none;
    color: var(--color-primary-dark);
    font-family: 'Outfit', sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    outline: none;
    min-width: 0;
}

.vap-search-input::placeholder {
    color: #9CA3AF;
    font-family: 'Outfit', sans-serif;
    font-size: 1.0625rem;
    font-weight: 300;
}

.vap-search-btn {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.25rem;
    padding: 0;
    background: var(--color-link-blue);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6.25rem;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.vap-search-btn:hover {
    background: #005aa3;
}

.vap-search-btn svg {
    width: 20px;
    height: 20px;
}

/* ── Meta row: count text + type switcher ── */
.vap-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vap-count {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
}

.vap-count strong {
    font-weight: 700;
    color: var(--color-link-blue);
}

.vap-count em {
    font-style: normal;
    font-weight: 600;
}

/* ── Posts / Pages tab switcher ── */
.vap-type-switcher {
    display: flex;
    gap: 0.5rem;
}

.vap-type-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    border: 1.5px solid #D1D5DB;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700-ui);
    text-decoration: none;
    background: var(--color-white);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.vap-type-btn:hover {
    border-color: var(--color-link-blue);
    color: var(--color-link-blue);
}

.vap-type-btn--active {
    border-color: var(--color-link-blue);
    background: var(--color-link-blue);
    color: var(--color-white);
}

.vap-type-btn--active:hover {
    background: #005aa3;
    border-color: #005aa3;
    color: var(--color-white);
}

/* ── Divider ── */
.vap-divider {
    border: none;
    border-top: 2px solid var(--base-ui-three-68747c);
    margin: 0;
}

/* ── Results list ── */
.vap-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.vap-result-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 0 1.5rem;
   
    border-bottom: 1px solid var(--color-tailwind-200);
}

.vap-result-item:last-child {
    border-bottom: none;
}

.vap-result-date {
    font-size: 0.8125rem;
    color: var(--color-gray-700-ui);
    font-family: 'Outfit', sans-serif;
}

.vap-result-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    /* 24px — Figma */
    font-weight: 400;
    /* Figma weight 400 */
    margin: 0;
    line-height: 2rem;
    /* 32px — Figma */
    letter-spacing: 0;
    /* Figma 0% */
}

.vap-result-title a {
    color: var(--color-link-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.vap-result-title a:hover {
    color: #005aa3;
    text-decoration: underline;
}

.vap-result-excerpt {
    font-size: 0.9375rem;
    color: var(--color-gray-700-ui);
    line-height: 1.6;
    margin: 0;
}

/* ── Pagination ── */
.vap-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border: none;
}

.vap-pagination-list {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vap-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid #D1D5DB;
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary-dark);
    text-decoration: none;
    background: var(--color-white);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.vap-page-btn:hover {
    border-color: var(--color-primary-dark);
    background: #F0F1F2;
}

/* Active page: dark filled circle (var(--color-primary-dark)) — matches Figma Ellipse 7 */
.vap-page-btn--active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    pointer-events: none;
}

/* Arrow buttons don't need the border by default */
.vap-page-arrow {
    border-color: transparent;
    background: transparent;
    color: var(--color-gray-700-ui);
}

.vap-page-arrow:hover {
    border-color: #D1D5DB;
    background: #F0F1F2;
    color: var(--color-primary-dark);
}

.vap-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    font-size: 0.875rem;
    color: var(--color-gray-700-ui);
    letter-spacing: 0.05em;
}

.vap-pagination-info {
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    color: var(--color-gray-700-ui);
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .vap-light-section {
        padding: 2rem 0;
        /* keep bg full-width; .vap-header-inner handles horizontal */
    }

    .vap-light-search {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .vap-section-title {
        font-size: 1.5rem;
    }

    .vap-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .vap-result-title {
        font-size: 1.25rem;
        /* reduced from 24px desktop but still readable on mobile */
    }

    .vap-pagination {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Alignment: mirror header-container padding at every breakpoint ── */
@media (min-width: 1541px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: clamp(6rem, 15.046vw, 16.25rem);
        padding-right: clamp(6rem, 15.046vw, 16.25rem);
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (min-width: 871px) and (max-width: 1024px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: 3.125rem;
        padding-right: 3.125rem;
    }
}

@media (min-width: 769px) and (max-width: 870px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: 3.125rem;
        padding-right: 3.125rem;
    }
}

@media (max-width: 768px) {

    .vap-header-inner,
    #vap-results-region {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

article a {
    height: 100%;
    text-decoration: none;
}

article a:focus-visible,
article.news-list-card a:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 4px;
    border-radius: 6px;
}

.get-started-today-block .wpcf7-list-item input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

a.campus-button:focus-visible,
a.campus-contact:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 4px;
    border-radius: 6px;
}

.page-sub-nav-bar-link:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 4px;
    border-radius: 6px;
}

.articles-section .load-more-btn:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 4px;
    border-radius: 6px;
}

.news-list-card a {
    height: 100%;
    text-decoration: none;
}

/* Match article-card content limitation behavior */
.news-list-card .news-list-card-title,
.news-list-card h2,
.news-list-card h3,
.news-list-card h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-list-card .news-list-card-excerpt,
.news-list-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Apply the same truncate behavior used in article cards to .news cards */
.news .news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3.5rem;
}

.news .news-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-list-card a:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

@media (max-width: 300px) {
    .header-container {
        gap: 0.5rem !important;
        min-width: 0 !important;
    }

    .header-logo {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .logo-link img {
        width: 90px !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .mobile-header-right {
        gap: 0 !important;
        flex-shrink: 0 !important;
    }

    .top-bar-language-switcher {
        transform: scale(0.9) !important;
        transform-origin: center !important;
    }

    .footer-links {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .home-overview-content {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .healthcare-hero h2,
    .hero-headline,
    .home-overview-headline,
    .unitek-advantage-feature-title {
        font-size: 1.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .home-overview-stat-value {
        font-size: 1rem !important;
    }

    .unitek-advantage-feature-description {
        width: 100% !important;
    }

    .unitek-advantage-cta-button {
        width: 100% !important;
        white-space: normal;
    }

    .home-overview-stat-description {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .home-overview-stat-text {
        width: 100% !important;
    }

    .footer-social {
        flex-wrap: wrap !important;
    }

    .article-card__meta {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .faq-category-tab {
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }
}

@media (max-width: 767.98px) {

    /* Keep mobile language dropdown visible above header neighbors on small screens */
    .header,
    .header-container,
    .mobile-header-right,
    .mobile-language-switcher-wrapper,
    .mobile-language-switcher-wrapper .mobile-language-custom {
        overflow: visible !important;
    }

    .mobile-language-switcher-wrapper {
        position: relative;
        z-index: 1101;
    }

    .mobile-language-switcher-wrapper .mobile-language-custom {
        position: relative;
        z-index: 1102;
    }

    .mobile-language-switcher-wrapper .mobile-language-menu {
        z-index: 1103;
    }
}

.footer .saparator-img.saparator-line {
    color: var(--color-footer-divider) !important;
}

.footer .saparator-img.saparator-line path {
    stroke: currentColor;
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .search-overlay-container {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

@media (min-width: 1541px) {
    .search-overlay-container {
        padding-left: clamp(6rem, 15.046vw, 16.25rem);
        padding-right: clamp(6rem, 15.046vw, 16.25rem);
    }
}

@media (min-width: 768px) and (max-width: 870px) {
    .search-overlay-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

article a {
    height: 100%;
    text-decoration: none;
}

article a:focus-visible,
article.news-list-card a:focus-visible,
a.news-list-card-link:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 4px;
    border-radius: 6px;
}

.get-started-today-block .wpcf7-list-item input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

a.campus-button:focus-visible,
a.campus-contact:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 4px;
    border-radius: 6px;
}

.page-sub-nav-bar-link:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 4px;
    border-radius: 6px;
}

.articles-section .load-more-btn:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 4px;
    border-radius: 6px;
}

.news-list-card a {
    height: 100%;
    text-decoration: none;
}

/* Match article-card content limitation behavior */
.news-list-card .news-list-card-title,
.news-list-card h2,
.news-list-card h3,
.news-list-card h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-list-card .news-list-card-excerpt,
.news-list-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Apply the same truncate behavior used in article cards to .news cards */
.news .news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3.5rem;
}

.news .news-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .search-overlay .search-submit-btn {
        width: 2rem;
        height: 2rem;
        background-color: transparent !important;
        border-radius: 50%;
        margin: 4px;
    }

    .search-overlay .search-submit-btn:hover {
        background-color: rgba(255, 255, 255, 0.15) !important;
    }

    .search-submit-btn svg,
    .search-overlay .search-submit-btn svg {
        width: 1.125rem;
        height: 1.125rem;
    }

    .search-result-title {
        font-size: 1rem;
    }

    .pages-column .search-column-footer,
    .posts-column .search-column-footer {
        height: 3rem;
    }
}

/* Position Google reCAPTCHA badge on the left and support hover slide-out */
.grecaptcha-badge {
    left: 0 !important;
    right: auto !important;
    width: 70px !important;
    overflow: hidden !important;
    transition: width 0.3s ease !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15) !important;
}

.grecaptcha-badge:hover {
    width: 256px !important;
}

/* Hide Contact Form 7 thank you response message globally when sent */
.wpcf7 form.sent .wpcf7-response-output {
    display: none !important;
}