/*
 * patriot-custom.css Patriot NJROTC
 * Modular file loads AFTER landing.css
 * Owns: hero fullscreen fix, parallax layers, Art Deco overlay,
 *       nav utility bar, hamburger menu overlay, scroll reveals
 *
 * Enqueue order in functions.php:
 *   1. landing.css
 *   2. patriot-custom.css  This file
 *   3. patriot-animations.js (footer, depends on GSAP)
 *
 * Root colors are pulled from landing.css :root variables.
 * Do NOT redefine :root here extend it only.
 */

/* ADDITIONAL TOKENS */
/*:root {
    --gold-dim:    rgba(200,160,67,0.35);
    --gold-faint:  rgba(200,160,67,0.12);
    --navy-glass:  rgba(40,50,74,0.82);
    --navy-solid:  rgba(40,50,74,0.97);
    --overlay-mid: rgba(8,15,35,0.55);
    --overlay-bot: rgba(8,15,35,0.92);
    --transition-smooth: 0.45s cubic-bezier(0.23,1,0.32,1);
}
*/


:root {
    --cream: #f4f0e6;
    --red:   #c85659;
    --slate: #5b677a;
    --gray:  #a5aaa9;
    --dark:  #32373c;
    --navy:  #28324a;
    --gold:  #c8a043;
}




/* 
FULLSCREEN HERO parallax layer system
*/

#hero {
    min-height:  100vh;
    height:      auto;
    align-items: flex-end; /* content sits at bottom like USS Kidd */
}

/*
 * GENERATPRESS CONTAINER OVERRIDE
 * Strips the max-width constraint GP applies to .inside-section
 * so the hero truly bleeds edge to edge.
 */
body.home #hero,
body.home #hero .inside-section,
body.home #hero .gb-container {
    max-width: 100% !important;
    padding:   0    !important;
    margin:    0    !important;
}

/* Video: fix the -25% clip, true fullscreen */
#hero-video {
    object-position: center 20% !important; /*changed from object-position: center center; */
    margin-top: 0;
}

/* Cinematic scrim replaces the flat overlay */
.hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(8,15,35,0.25)  0%,
        rgba(8,15,35,0.08) 30%,
        rgba(8,15,35,0.50) 65%,
        rgba(8,15,35,0.95) 90%,
        rgba(8,15,35,1.00) 100%
    );
}

/* Also add left vignette for content legibility */
.hero-overlay::after {
    content:  '';
    position: absolute;
    inset:    0;
    background: radial-gradient(ellipse at 30% 50%, transparent 40%, rgba(8,15,35,0.55) 100%);
    pointer-events: none;
}

/* Hero content: move to bottom-left, USS Kidd style */
.hero-content {
    padding:    0 0 4rem 0;
    max-width:  720px;
    margin:     0 auto;
    text-align: center;
}

/* Art Deco overlay: rays + rings (SVG injected by JS) */
#deco-overlay {
    position:       absolute;
    inset:          0;
    z-index:        2;
    pointer-events: none;
    opacity:        1;
}

/* Eagle layer */
#hero-eagle {
    position:       absolute;
    top:            60px;
    left:           0;
    right:          0;
    z-index:        3;
    pointer-events: none;
}

/* Cadet silhouette layer */
#hero-silhouette {
    position:       absolute;
    bottom:         -10px;
    left:           0;
    right:          0;
    z-index:        4;
    pointer-events: none;
}

/* Scroll hint */
.hero-scroll-hint {
    left:      50%;
    bottom:    2rem;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.scroll-line-left {
    width:      40px;
    height:     1px;
    background: linear-gradient(to right, var(--gold), transparent);
    animation:  scrollPulse 2s ease-in-out infinite;
}

.scroll-line-right {
    width:      40px;
    height:     1px;
    background: linear-gradient(to left, var(--gold), transparent);
    animation:  scrollPulse 2s ease-in-out infinite;
}

/* Art Deco hero ornaments */
.deco-ornament {
    display:         block;
    margin-bottom:   0.8rem;
    opacity:         0; /* GSAP fades in */
}

/* Hero eyebrow NAVY JUNIOR RESERVE TEXT*/
.hero-eyebrow {
    font-family:    'Barlow Semi Condensed', sans-serif;
    font-size:      1rem;
    font-weight:    500;
    letter-spacing: 0.12em;
    color:          #ffffff;
    text-shadow:    0 2px 24px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
    margin-top:     .3rem; /* space above | from Welcome Aboard */
    margin-bottom:  .5rem; /* space below | from Building leaders */
    /*-webkit-text-stroke: 1px rgba(0, 0, 0, 0.8); /* Text Stroke thickness */
   /* text-stroke: .2px rgba(0, 0, 0, 0.8); /* Text Stroke Color */
    


}

/* HERO TITLE: LARGER, MORE CINEMATIC */
.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: 0.04em;
    font-weight:    50;
    text-shadow: 0 40px 30px rgba(8,15,35,0.6);
    /* -webkit-text-stroke: 1px rgba(0, 0, 0, 0.8); /* Text Stroke thickness */
    /*text-stroke: .1px rgba(0, 0, 0, 0.8); /* Text Stroke Color */

}

.hero-title .ghost {
    color:   rgba(244,240,230,0.38);
    display: block;
}

/* Deco divider between title and sub */
.hero-deco-rule {
    display:         flex;
    align-items:     center;
    gap:             0.8rem;
    margin-bottom:   1.5rem;
    opacity:         0; /* GSAP */
}

.hero-deco-rule .rule-line {
    width:      48px;
    height:     1px;
    background: var(--gold);
    opacity:    0.5;
}

.hero-deco-rule .rule-pip {
    width:      20px;
    height:     6px;
    background: var(--red);
}

/*
2. NAV utility bar + main bar
*/


/* ===========================================
   HEADER BAR (solid background like USS KIDD)
   Override Landing.css #main-nav completely
   =========================================== */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    /*background: var(--navy);*/
    /* Deep navy background */
    /*background: rgba(11, 26, 52, 0.95);*/


    background-color: rgba(40, 50, 74, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-bottom: 4px solid #111829;
    box-sizing: border-box;
}

#wpadminbar {
    position: fixed !important;
}



/* ============================================
   SCROLLBAR | Single styled bar on html only
   ============================================ */
html {
    scrollbar-gutter: stable; /* reserves space so content doesn't jump */
    overflow-y: scroll; /* always show, prevents layout shift */
    scroll-padding-top: 96px;
    scrollbar-width: thin;
    scrollbar-color: #435378 #28324a; /* thumb | track Firefox */
    margin-top: 0 !important;
}

html::-webkit-scrollbar {
    width:  3px;
    height: 3px;
}


/* TRACK COLOR SCROLL BAR TRAVELS ON */
html::-webkit-scrollbar-track {
    background: #28324a;
}


/* COLOR OF SCROLL BAR */
html::-webkit-scrollbar-thumb {
    background: #435378;
    border-radius: 10px;
}


/* HOVER COLOR OF SCROLL BAR */
html::-webkit-scrollbar-thumb:hover {
    background: rgba(84, 89, 113, 0.7);
}

/* Push scrollbar below the fixed header */
/* Replace 96px with your actual nav height */
html::-webkit-scrollbar {
    margin-top: 96px;   /* NOTE: this doesn't work in all browsers */
}


/* ==========================================
   MAIN NAV BAR LAYOUT
   ========================================== */

/* Main nav bar */
.nav-main-bar {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.5rem;
    transition:      padding var(--transition-smooth),
                     background var(--transition-smooth);
}


/* ===============================================
   CENTER: LOGO IS ABSOLUTELY CENTERED IN VIEWPORT
   =============================================== */
.nav-brand {
    position: static;
    flex: 0 0 auto;
    left: 50%;
    top: 50%;
    transform: translate3d(0,0,0); /*  Pre-renders layer */
    will-change: transform, opacity; /* Preps browser */
/* transform: none; */
    z-index: 1;
    text-align: center;
    margin-bottom:  0;
    opacity:        0; /* GSAP fades in */
}


.nav-logo {
    max-height: 72px;
    width: auto;
    display: block;

    /* FIX: Prevents any default browser color backgrounds from rendering inside the image boundary */
    background: transparent !important;
    background-color: transparent !important;

}



/* Utility bar (social icons + Home/Contact) */
.nav-utility {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             1.2rem;
    padding:         0.5rem 3rem;
    background:      rgba(8,15,35,0.65);
    border-bottom:   1px solid var(--gold-faint);
    transition:      opacity 0.4s ease;
}

#main-nav.scrolled .nav-utility {
    opacity: 0;
    pointer-events: none;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.nav-utility-social {
    display:    flex;
    align-items:center;
    gap:        1rem;
    list-style: none;
    margin:     0;
    padding:    0;
}

.nav-utility-social a {
    font-family:    'Barlow Semi Condensed', sans-serif;
    font-size:      0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(200,160,67,0.55);
    text-decoration:none;
    transition:     color 0.2s;
}

.nav-utility-social a:hover {
    color: var(--gold);
}

.nav-utility-divider {
    width:      1px;
    height:     12px;
    background: var(--gold-faint);
}

.nav-utility-links {
    display:    flex;
    gap:        1.2rem;
    list-style: none;
    margin:     0;
    padding:    0;
}

.nav-utility-links a {
    font-family:    'Barlow Semi Condensed', sans-serif;
    font-size:      0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          rgba(244,240,230,0.35);
    text-decoration:none;
    transition:     color 0.2s;
}

.nav-utility-links a:hover {
    color: var(--cream);
}


#main-nav.scrolled .nav-main-bar {
    padding:    0.75rem 3rem;
    background: var(--navy-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gold-faint);
}


.nav-hamburger {
    justify-self: start;

    width: 72px;
    height: 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;

    background:   #c85659;   /* Red box */
    border:         1px solid #ffffff;
    border-radius:  0;      /* Square corners */
    padding: 0;
    cursor: pointer;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}


.nav-hamburger:hover {
    background: #111829 !important;
    border: solid 0.5px #ffffff !important;
}

.nav-hamburger:hover .bar {
    background: #ffffff !important;
}


.nav-hamburger .bar {
    width:            24px;
    height:           2px;
    display:          block !important;
    border-radius:    0;
    background:       #fff !important;

    /*background:       var(--cream); */
    transition:       transform var(--transition-smooth),
                      opacity   0.25s ease,
                      width     var(--transition-smooth),
                      background 0.2s;
    transform-origin: center;
}


/* Force all three lines to be identical */
.nav-hamburger .bar-1,
.nav-hamburger .bar-2,
.nav-hamburger .bar-3 {
width: 18px;
}

.nav-hamburger .bar-1 { width: 18px; }
.nav-hamburger .bar-2 { width: 18px; }
.nav-hamburger .bar-3 { width: 18px; background: var(--gold); } /* gold short bar */
.nav-hamburger:hover .bar { background: #c85659; }
.nav-hamburger.open .bar-1 { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.open .bar-2 { opacity: 0; width: 0; }
.nav-hamburger.open .bar-3 { transform: translateY(-7.5px) rotate(-45deg); width: 24px; background: var(--cream); }


.nav-logo {
    height:     120px;
    width:      auto;
    transform: scaleX(1.2);  /* stretch slightly wider */
     /* transition: height var(--transition-smooth); */
}

/* Makes Logo shrink while scrolling */
/*
#main-nav.scrolled .nav-logo {
    height: 32px;
}*/


/* Text fallback if no logo image */
.nav-logo-text {
    font-family:    'Bebas Neue', sans-serif;
    font-size:      1.2rem;
    letter-spacing: 0.2em;
    color:          #ffffff;
    display:        block;
    line-height:    1;
}

.nav-logo-sub {
    font-family:    'Barlow Semi Condensed', sans-serif;
    font-size:      0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color:          var(--gold);
    opacity:        0.7;
    display:        block;
    margin-top:     3px;
}

.nav-logo-rule {
    width:      60px;
    height:     1px;
    background: var(--gold-dim);
    margin:     4px auto;
}


/* Right actions (Calendar + Join) */

.nav-actions {
    display:    flex;
    align-items:center;
    gap:        0.75rem;
    opacity:    0; /* GSAP fades in */
    flex-shrink:0;
}

.nav-eyebrow-left,
.nav-eyebrow-right {
    flex: 0;
    font-family:    'Barlow Semi Condensed', sans-serif;  /* thicker display font */
    font-size:      3rem;
    font-weight:    400;
    letter-spacing: 0.9em;
    color:          #495972;
    line-height:    1;
}

.nav-eyebrow-left {
    margin-right: 0.3rem;
    text-align: right;
}

.nav-eyebrow-right {
    margin-left: 0.3rem;
    text-align: left;
}


.nav-btn-calendar {
    font-family:    'Barlow Semi Condensed', sans-serif;
    font-size:      0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--cream);
    background:     transparent;
    border:         1px solid var(--gold-dim);
    padding:        0.5rem 1.2rem;
    cursor:         pointer;
    text-decoration:none;
    transition:     border-color 0.2s, color 0.2s;
    display:        inline-block;
}

.nav-btn-calendar:hover {
    border-color: var(--gold);
    color:        var(--gold);
}

/* CALENDAR ICON */
.nav-icon-calendar {
    height: 28px;
    width:  auto;
    display: block;
}


.nav-btn-join {
    font-family:    'Barlow Semi Condensed', sans-serif;
    font-size:      0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          #ffffff;
    background:     var(--red);
    border:         solid 1px #ffffff;
    padding:        0.5rem 1.4rem;
    cursor:         pointer;
    text-decoration:none;
    transition:     background 0.2s;
    display:        inline-block;
    font-weight:    500;
}

.nav-btn-join:hover {
    font-family:    'Barlow Semi Condensed', sans-serif;
    font-size:      0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          #ffffff;
    background: #111829 !important;
    border: solid 0.5px #ffffff !important;
}


/*
FULL-SCREEN HAMBURGER MENU OVERLAY
*/
#menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999999;
    scrollbar-width: none;

    /* THESE TWO LINES LOCK THE MENU TO THE VIEWPORT EDGES */
    width:  100vw !important;
    height: 100vh !important;
    
    /* 2 Row Grid Rules */
    display: grid;
    grid-template-rows: auto 1fr; /* changed from auto 1fr auto */
    grid-template-columns: 1fr 3fr;  /* change from 1fr 2fr */

    /*display: flex;
    flex-direction: column; */

    overflow-y: hidden; /* CHANGED FROM AUTO */

    visibility: hidden;
    pointer-events: none;

    background: #28324A !important;
    border: #c8a043;

    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.65s cubic-bezier(0.23,1,0.32,1);
}


#menu-overlay::-webkit-scrollbar {
    display: none;
}


/*Body must NOT create a second scroll context */
body {
    overflow-y: visible !important;
    height: auto !important;     /* overrides the height:100% you have */
    padding-top: 96px;  /* reduce from 96px */
    /*padding-top: 96px;*/
}


/* landing-wrap must NOT scroll independently */
#landing-wrap {
    overflow-x: hidden;
    overflow-y: visible !important; /* was probably auto or scroll */
}


#menu-overlay.open {
    visibility: visible;
    pointer-events: auto;
    overflow-y: scroll;
    clip-path: inset(0 0 0% 0);
    scrollbar-width: thin;
    scrollbar-color: #435378 #28324a;
}

#menu-overlay.open::-webkit-scrollbar {
    width: 3px;
}

#menu-overlay.open::-webkit-scrollbar-track {
    background: #28324a;
    margin-top: 100px;     /* gap at the top */
    margin-bottom: 100px;  /* gap at the bottom */
}

#menu-overlay.open::-webkit-scrollbar-thumb {
    background: #435378;
    border-radius: 10px;
}



/* Menu header */
.menu-overlay-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.2rem 3rem;
    border-bottom:   1px solid rgba(244,240,230,0.07);
    background-color: #111829;
    flex-shrink:     0;
}


/* PATRIOT NJROTC HEADING ON FULL SCREEN PAGE */

/* BLOCK 1: Normal and visited settings (Base Styles) */
.menu-overlay-brand, 
.menu-overlay-brand:visited {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.9rem;
    text-align: center;
    line-height: 0.9;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: #495972; /*Default Slate Blue */
    transition: color 0.25s ease;
}    
  
/* BLOCK 2: Normal hover and visited hover settings (Hover Styles) */ 
.menu-overlay-brand:hover,
.menu-overlay-brand:visited:hover { 
  color: #ffffff !important;    /* Keeps it White */
}




/* Changes the color when a user hovers over it */
/*.menu-overlay-brand a:hover {
  color: #ffffff;
}
*/


/* Close button reuses .nav-hamburger.open styles */

/* Nav item list */
.menu-overlay-nav {
    /*flex: 1;*/

    /*New Code*/
    grid-column: 1;
    grid-row: 2;


    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    background: rgba(244,240,230,0.025);
}

/* GSAP sets initial state: opacity:0, translateX(48px) */



/* ==========================================
   USS KIDD STYLE MENU ITEM ALIGNMENT
   Replace your existing rules for:
   .menu-overlay-item
   .menu-overlay-link
   .menu-item-num
   .menu-item-text
   .menu-item-heading
   .menu-item-label
   .menu-item-sublabel
   .menu-item-toggle
   ========================================== */



/* =========== ENTIRE MENU ROW ============== */
.menu-overlay-item {
    position: relative;
    padding: 0.75rem 3rem;
    border-bottom: none;
}


/* ==========MAIN CLICKABLE AREA ============ */
.menu-overlay-link {
    display: flex;
    align-items: flex-start;
    text-decoration: none !important;
    color: inherit;
   /* gap: 0.75rem; */
}


.menu-overlay-link,
.menu-overlay-link a {
    text-decoration: none !important;
    color: inherit;
}


.menu-overlay-link:hover {
    background: rgba(244,240,230,0.025);
}


.menu-overlay-inner {
    display:     flex;
    align-items: center;
    width:       100%;

/* GSAP drives the horizontal slide on click */
    transition:  transform 0.35s cubic-bezier(0.23,1,0.32,1);
}


.menu-overlay-link:hover .menu-overlay-inner {
    transform: translateX(8px);
}



/* ================ NUMBER ================== */
.menu-item-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.9rem;
    color:  #c85659;
    line-height: 0.9;

/* SPACE BETWEEN NUMBER AND TEXT */  
    margin-right: 1.2rem; 

/* KEEPS THE NUMBER FROM COLLAPSING */
    flex-shrink: 0;
    
}


/* TEXT WRAPPER */
.menu-item-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 0.15rem; */
}


/* ABOUT AND +SYMBOL ROW */
.menu-item-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1;
}

/* Hover over the main menu link: Label turns white */
.menu-item-heading:hover .menu-item-label {
    color: #ffffff;
}

/* MAIN LABEL */
.menu-item-label {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.9rem;
    line-height: 0.9;
    letter-spacing: 0.02em;
    text-transform: uppercase;

    color: #495972; /*Default Slate Blue */
    transition: color 0.25s ease;
}



/* SUBLABEL = UNDER THE MAIN LABEL (FORCES NEW LINE UNDER LABEL) */
.menu-item-sublabel {
    display: block;
    margin-top:  0.45rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size:   1.15rem;
    font-weight: 500;
    line-height: 1.2;
    color: #8897AA;
}


/* PLUS +SYMBOL BUTTON = BESIDE ABOUT */
.menu-item-toggle {
    /* Remove all button styling */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;

    /* Remove any inherited button dimensions */
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;

    /* Remove Spacing */
    padding: 0;
    margin: 0;

    /* Align with the Label text */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;

    /* Match the menu numbers */
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.9rem;
    line-height: 0.9;
    font-weight: 400;

    /* Default color matches menu numbers */
    color: #9F4851;

    cursor: pointer;
    flex-shrink: 0;

    /* Smooth color transition only */
    transition: color 0.25s ease;
}

/* ===================================================== */


/* Hover state: plus turns white, no background box */
.menu-item-toggle:hover,
.menu-item-toggle[aria-expanded="true"] {
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff;
}


/* The + symbol itself */
.toggle-icon {
    display: block;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;

    transform: translateY(-1px); /* tiny optical adjustment */
}


.menu-item-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;

    /* Remove fixed box dimensions */
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;

    padding: 0;
    margin: 0;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;

    /* Match menu numbers and labels */
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 3.2rem;
    line-height: 0.9;
    font-weight: 400;
    letter-spacing: 0;

    color: #c85659;
    cursor: pointer;
    flex-shrink: 0;

    transition: color 0.25s ease;
}

/* MENU RULES */
.menu-item-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(45deg);
    display: inline-block;
    transition: transform 0.3s ease;
}


.menu-submenu {
    display: none;
    grid-column: 1 / -1;
    padding-left: 4rem;
    margin-top: 1rem;
}

.menu-submenu a {
    display: block;
    padding: 0.4rem 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 1.1rem;
    color: #5b677a !important;
    text-decoration: none;
    font-weight: 500;
}


.menu-submenu a::before {
    content: '\203A';
    color: var(--red);
    margin-right: 0.5rem;
}


/* SUBMENU HOVER */
.menu-submenu a:hover {
    color: #ffffff !important;
}


.menu-overlay-item.open .menu-submenu {
    display: block;
}

.menu-overlay-link:hover > .menu-item-label,
.menu-overlay-item:hover > .menu-item-label {
    color: #ffffff !important;
}


.menu-item-arrow {
    font-size: 1rem;
    color:     rgba(165,170,169,0.35);
    font-style:normal;
    transition: transform 0.35s cubic-bezier(0.23,1,0.32,1), color 0.2s;
}

.menu-overlay-link:hover .menu-item-arrow {
    transform: translateX(8px);
    color:     var(--red);
}


/* MENU FOOTER */
.menu-overlay-footer {
    grid-column: 1 / -1;  /* spans full width */
    grid-row: 3;   /* pins it to the bottom */  
    padding:         1.2rem 3rem;
    border-top:      2px solid  #9F4851;
    background-color: #111829;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
    /* GSAP: opacity:0, translateY(12px) initially */             
}

/* ======================================================================= */


/* ========================================== 
   RIGHT PANEL | PHOTO DISPLAY 
========================================== */ 

/* RIGHT PANEL CONTAINER | PHOTO DISPLAY */
/* KEEP GRID COORDINATES SO CONTENT SITS PERFECTLY IN THE MIDDLE */ 
/* RIGHT PANEL CONTAINER */ 
.menu-overlay-panel {
    grid-column: 2; 
    grid-row: 1 / span 2;
    /*grid-row: 1 / span 3; /* Spans full height of the right side */
    /*grid-row: 2; /* <-- Changed back to row 2 so it aligns with your text content */
    display: flex; 
    height: 100%; 
    align-items: center; 
    justify-content: center; 
    padding: 2rem; 

    /* BACKGROUND IMAGE PROPERTIES (Tucked inside the container) */
    background-image: url('/wp-content/uploads/2026/05/Ship-and-Eagle.jpg');
    background-size: 140%; 
    background-position: center; 
    background-repeat: no-repeat;
    
    /* FUTURE DIMMING OPTION: Swap the background-image line above with this one when ready to dim */
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('your-image-url.jpg'); */
} 

/* CONTENT BLOCK */ 
.panel-content-block { 
    width: 100%; 
    text-align: center; 
    margin-bottom: auto; 
    padding-top: 1rem; 
}



/* ENSURE THIS STAYS TRANSPARENT SO THE WRAPPER BACKGROUND SHOWS THROUGH */ 
/* CONTENT BLOCK */
.panel-content-block { 
    width: 100%; 
    text-align: center; 
    margin-bottom: auto;   /* <-- ADDED: Pushes whitespace down to raise photos higher */
    padding-top: 1rem;     /* <-- ADJUST THIS: Controls how far from the top it sits */
} 

/* TITLE */ 
.panel-title { 
    font-family: 'Bebas Neue', sans-serif; 
    font-size: 3rem; 
    font-weight: 600;
    letter-spacing: 0.05em; 
    margin-bottom: 1.5rem; 
    text-align: center; 

}


.panel-title.drop-shadow {
  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5); 
  /* 2px right, 2px down, 4px blur, semi-transparent black */
}



/* === NAVAL SCIENCE INSTRUCTORS TEXT HEADING === */
.panel-title-white {
    color: var(--navy); 
     
 } 
.panel-title-red {
    color: var(--red);
    
} 


/* THREE PHOTOS ROW */ 
.panel-photos { 
    display: flex; 
    gap: 1rem; 
    justify-content: center; 
    align-items: center; 
} 



/* INDIVIDUAL PHOTO */ 
.panel-photo { 
    flex: 1; 
    max-width: 220px; 
    border: 4px solid #ffffff; 
} 

.panel-photo img { 
    width: 100%; 
    height: 260px; 
    object-fit: cover; 
    display: block; 

    /* OPTIONAL ADDITION: Adds depth over your new background */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
    transition: transform 0.3s ease;
} 

/* HOVER EFFECT FOR PHOTOS */
.panel-photo:hover {
    /* OPTIONAL ADDITION: Slight zoom when mouse hovers over a photo */
    transform: scale(1.03); 
}

.panel-photo img { 
    width: 100%; 
    height: 260px; 
    object-fit: cover; 
    display: block; 
}



/* ======================================================================= */

.menu-footer-cta {
    font-family:    'Barlow Semi Condensed', sans-serif;
    font-weight:    500;
    font-size:      0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--cream);
    background:     var(--red);
    border:         none;
    padding:        0.75rem 1.8rem;
    cursor:         pointer;
    text-decoration:none;
    display:        inline-block;
    transition:     background 0.2s;
}


.menu-footer-cta:hover {
    background: var(--slate);
}



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

.menu-footer-social a {
    font-family:    'Barlow Semi Condensed', sans-serif;
    font-weight:    300;
    font-size:      0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          #ffffff;
    text-decoration:none;
    transition:     color 0.2s;
}

.menu-footer-social a:hover {
    color: var(--gold);
}



/* SCROLL REVEAL = initial states 
GSAP animates these to their final values. */
.reveal-up {
    opacity:   0;
    transform: translateY(28px);
}

.reveal-left {
    opacity:   0;
    transform: translateX(-24px);
}

.reveal-line {
    transform:        scaleX(0);
    transform-origin: left center;
    opacity:          0;
}



/* SECTION EYEBROWW GET THE GOLD TREATMENT */
.panel-tag,
.join-label,
.section-eyebrow {
    color: #ffffff;
}

.panel-tag::before {
    background: var(--gold);
}



/* DECO DIVIDER IN CONTENT SECTIONS */
.section-deco-rule {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    margin:      1.5rem 0;
}

.section-deco-rule .rule-line {
    width:      40px;
    height:     1px;
    background: #ffffff;
    opacity:    0.5;
}

.section-deco-rule .rule-pip {
    width:      16px;
    height:     5px;
    background: var(--red);
}



/* MOBILE OVERRIDES */
@media (max-width: 768px) {
    .hero-content {
        padding: 0 1.5rem 3rem;
    }

.hero-title {
    font-size: clamp(3rem, 10vw, 9rem) !important;
    line-height: 1.05;
    letter-spacing: 0.2;
}

    .hero-scroll-hint {
        left: 50%;
        transform: translateX(-50%);
        bottom: 1.5rem;
    }

    .nav-utility {
        padding:   0.4rem 1.5rem;
        gap:       0.8rem;
    }

    .nav-main-bar {
        padding: 1.2rem 3rem 0.5rem 3rem;  /* top right bottom left */
        /*padding: 1rem 1.5rem;*/


   



    }

    #main-nav.scrolled .nav-main-bar {
        padding: 0.6rem 1.5rem;
    }



    /* HIDE ON SMALL SCREENS; IN MENU INSTEAD */
    .nav-btn-calendar {
        display: none; 
    }


    .menu-overlay-link {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        flex: 1;
    }
}


html, body {
    height:     100%;
    min-height: 100% !important;
    overflow-x: hidden !important;
}

/* LOCK PAGE SCROLL WHEN MENU IS OPEN */
body.menu-open {
    overflow: hidden;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    scrollbar-width: none;
}

html.menu-open-html {
    scrollbar-width: none !important;
}

html.menu-open-html::-webkit-scrollbar {
    display: none !important;
}






/* FORCE CORE CONTAINER BLOCKS TO ADOPT DARK THEME COLOR PATH */
.site-main,
.inside-article,
.entry-content,
article {
    background-color: #111829 !important; /* Forces your main dark background */
    border: none !important; /* Destroys any default white theme borders */
    box-shadow: none !important;
}

/* FIX FOR THE INTRO CONTAINER SLIVER EFFECT */
#intro {
    display: block !important;
    width: 100% !important;
    background: #28324a !important; 
    background-color: #28324a !important;
    
    /* Subtle 2px dark sliver divider lines */
    border-top: 2px solid #111829 !important;
    border-bottom: 2px solid #111829 !important;
    border-left: none !important;
    border-right: none !important;
}




/* FORCE TRUE VIEWPORT CENTERING REGARDLESS OF CALENDAR */
#main-nav {
    /* Ensures the main navigation container uses full layout relative sizing */
    position: fixed !important;
    display: flex !important;
    justify-content: space-between; /* Pushes outer elements to edges if needed */
    align-items: center !important;
}

.nav-brand {
    /* This overrides the standard flexbox flow and forces an absolute midpoint calculation */
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate3d(-50%, -50%, 0) !important; /* Perfectly offsets its own width/height */
    z-index: 10;
    text-align: center !important;
    margin: 0 !important;
    width: auto !important;
}

/* Ensure the calendar element stays in its own structural lane without pushing things */
.header-calendar, 
#main-nav .calendar-container,
#main-nav [class*="calendar"] {
    position: relative;
    z-index: 5;
    margin-left: auto; /* Pushes the calendar cleanly to the far right side */
}



/* THE INITIAL INSTRUCTOR HIDDEN STATE */
.panel-photo {
  opacity: 0;
  transform: translateY(30px); /* Starts 30px lower */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* The active state triggered by JavaScript */
.panel-photo.fade-in-up {
  opacity: 1;
  transform: translateY(0); /* Slides up to its original spot */
}





/* THE CONTAINER FOR THE THREE PHOTOS AND THE BACKGROUND PHOTO */
.panel-photos {
  position: relative;
  --bg-image: url('/wp-content/uploads/2026/05/ship-sunlight.jpg.jpg'); 

  
  
 /*background-image: 
    linear-gradient(rgba(40, 50, 74, 0.93), rgba(40, 50, 74, 0.93)), 
    var(--bg-image);*/
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 2rem;
  border-radius: 8px;
  /*box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
  overflow: hidden; */
}











/* ==========================================================================
   PATRIOT LAYOUT | VISUAL BACKDROP SYNC RULE (THE OFF-SWITCH)
   ========================================================================== */
/* When your theme hides or collapses the sub-menu container, 
   instantly force the right panel to show the default Ship & Eagle background */
.menu-submenu[style*="display: none"] ~ .menu-overlay-panel,
.menu-submenu:not(.open) ~ .menu-overlay-panel,
.menu-submenu[style*="height: 0px"] ~ .menu-overlay-panel {
    background-image: url('/wp-content/uploads/2026/05/Ship-and-Eagle.jpg') !important;
    background-size: 140% !important;
}

/* Also ensure the foreground text cards hide automatically when closed */
.menu-submenu[style*="display: none"] ~ .menu-overlay-panel .panel-content-block,
.menu-submenu:not(.open) ~ .menu-overlay-panel .panel-content-block,
.menu-submenu[style*="height: 0px"] ~ .menu-overlay-panel .panel-content-block {
    display: none !important;
    visibility: hidden !important;
}




/* ==========================================================================
   INSTRUCTOR DEDICATED PANEL RED X CLOSE BUTTON
   ========================================================================== */
.instructor-nav-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.instructor-panel-close-btn {
    background: transparent;
    border: none;
    color: #a0a0a0;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    margin-left: 15px;
    display: none; /* <-- HIDDEN ON LOAD: Stays invisible until the section opens */
    transition: color 0.2s ease, transform 0.2s ease;
}

.instructor-panel-close-btn:hover {
    color: #ff3333 !important; 
    transform: scale(1.15);
}




/* ==========================================================================
   PATRIOT LAYOUT | WORKING CLASS BACKDROP SWAP
   ========================================================================== */
/* 1. DEFAULT STATE: Hide the instructor text/photos when the menu first loads */
.menu-overlay-panel .panel-content-block {
    display: none !important;
    visibility: hidden !important;
}

/* 2. ACTIVE STATE: Swap the background image when clicked ON */
.menu-overlay-panel.instructors-active {
    background-image: url('/wp-content/uploads/2026/05/ship-sunlight.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 3. ACTIVE STATE: Force the text/photos to appear when clicked ON */
.menu-overlay-panel.instructors-active .panel-content-block {
    display: block !important;
    visibility: visible !important;
}





/* ==========================================================================
   PATRIOT LAYOUT | WORKING CLASS BACKDROP SWAP
   ========================================================================== */
/*.menu-overlay-panel.instructors-active {
    background-image: url('/wp-content/uploads/2026/05/ship-sunlight.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Ensure the text content cards display cleanly when active */
/*.menu-overlay-panel.instructors-active .panel-content-block {
    display: block !important;
    visibility: visible !important;
}
*/