/*
 * landing.css = Patriot NJROTC
 * CHANGED: Raleway = Barlow Semi Condensed throughout
 * All root colors and structure preserved exactly.
 * Load order: landing.css = patriot-custom.css = patriot-animations.js
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Semi+Condensed:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Oswald:wght@700&family=Anybody:wght@900&display=swap');

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

/* FULL WIDTH OVERRIDE */
body.home * {
    box-sizing: border-box;
}

body.home #page {
    padding-top: 0 !important;
    margin-top:  0 !important;
}

body.home .site-header,
body.home #masthead,
body.home .site-branding,
body.home .site-title,
body.home .site-title a,
body.home .site-description,
body.home .main-navigation,
body.home .nav-bar-wrap,
body.home .nav-bar,
body.home .inside-navigation,
body.home .main-nav,
body.home .skip-link,
body.home .menu-toggle,
body.home #colophon,
body.home .site-footer,
body.home .site-info,
body.home #secondary,
body.home .widget-area,
body.home aside {
    display:    none !important;
    height:     0    !important;
    min-height: 0    !important;
    margin:     0    !important;
    padding:    0    !important;
    border:     none !important;
    overflow:   hidden !important;
}

body.home #page,
body.home #content,
body.home #primary,
body.home .site-main,
body.home .content-area,
body.home .inside-article,
body.home .entry-content,
body.home .site-container,
body.home .grid-container {
    margin:    0    !important;
    padding:   0    !important;
    max-width: 100% !important;
    width:     100% !important;
}

/* RESET & BASE */
#landing-wrap {
    margin:      0;
    padding:     0;
    overflow-x:  hidden;
    background:  #111829;
    color:       #111829;
    font-family: 'Barlow Semi Condensed', sans-serif; /* was Raleway */
}

/* HERO */
#hero {
    position:        relative;
    z-index:         1;
    width:           100%;
    height:          100vh;
    overflow:        hidden;
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
}

#hero-video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center center; /* removed the -25% clip */
    opacity:         1;
}

.hero-overlay {
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to bottom,
        rgba(15, 25, 50, 0.2)  0%,
        rgba(10, 18, 40, 0.1) 40%,
        rgba( 8, 15, 35, 0.6) 100%
    );
}

.hero-content {
    position:  relative;
    z-index:   2;
    max-width: 800px;
    padding:   80px 0 0 4rem;
}

.hero-eyebrow {
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          #111829;
    font-weight:    500; /* Barlow Semi Condensed reads heavier; 600 not needed */
    text-shadow:    2px 2px 10px rgba(0,0,0,0.9);
    
    margin-top:     0; /* small gap from Welcome Aboard */
    margin-bottom:  0.2rem; /* larger gap to Building leaders */
    opacity:        0;
}

/* LANDING PAGE TITLE */
.hero-title {
    font-family:   'Bebas Neue', sans-serif;
    font-size:     clamp(2.5rem, 3vw, 3rem);
    line-height:   0.95;
    font-weight:   400; /* Bebas Neue is display-weight 700 has no effect */
    color:         #ffffff;
    margin-bottom: 0.2rem;
    opacity:       0;
}


.hero-title span {
    color: #5b677a;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9);
}

.hero-sub {
    font-family:   'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:     1rem;
    font-weight:   300;
    color:         #ffffff;
    max-width:     480px;
    line-height:   1.7;
    text-shadow:   2px 2px 10px rgba(0,0,0,0.9);
    margin-top:    0rem;
    margin-bottom: 0.5rem;
    opacity:       0;
}

.hero-cta {
    display:         flex;
    gap:             1rem;
    flex-wrap:       wrap;
    justify-content: center;
    opacity:         0;
}

/* INTRO SECTION */
#intro {
    position:   relative;
    z-index:    2;
    margin-top: 0;
    padding:    5rem 4rem;
    gap:        0.5rem;
    text-align: center;
    border-top: 4px solid #111829;
    background:  #28324a;
}

.intro-content {
    max-width:   850px;
    border:      3.5px solid #5b677a;
    gap:         0.5rem;
    padding:     1rem;
    margin:      0 auto;
    text-align:  center;
}

/* Navy JROTC Provides Life-Skills and Self-Confidence */
.intro-heading {
    font-family:    'Bebas Neue', sans-serif;
    font-size:      clamp(2rem, 2.5vw, 2.5rem);
    gap:            0.5rem;
    color:          #ffffff;
    margin-bottom:  0.1rem;
    letter-spacing: 0.05em;
}

.intro-body {
    font-family:   'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:     1.5rem;
    font-weight:   300;
    color:         #5b677a;
    font-weight:   500;
    line-height:   1.3;
    max-width:     600px;
    margin:        0 auto 1.5rem auto;
    gap:           0.5rem;
    text-align:    center;
}

.intro-sub {
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.8rem;
    font-weight:    500;
    color:          var(--red);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top:     1.5rem;
    margin-bottom:  0.5rem;
    text-align:    center;
}

.intro-subheading {
    font-family:    'Bebas Neue', sans-serif;
    font-size:      clamp(2rem, 2vw, 2rem);
    color:          #ffffff;
    margin-top:     1.5rem;
    margin-bottom:  0.1rem;
    letter-spacing: 0.05em;
    text-align:    center;
}

/* BUTTONS */
.btn-primary {
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background:     var(--red);
    color:          #ffffff;
    border:         none;
    padding:        0.9rem 2.2rem;
    cursor:         pointer;
    text-decoration:none;
    font-weight:    500;
    transition:     background 0.2s;
    display:        inline-block;
}

.btn-primary:hover {
    background: #111829;
    color:          #ffffff;
    border:     solid .5px #ffffff;

}

.btn-secondary {
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background:     transparent;
    color:          #ffffff;
    border:     solid .5px #ffffff;
    padding:        0.5rem 1rem; /* reduce from 0.9rem 2.2rem */
    cursor:         pointer;
    text-decoration:none;
    font-weight:    300;
    transition:     border-color 0.2s, color 0.2s;
    display:        inline-block;
}

.btn-secondary:hover {
    border-color: var(--red);
    color:        var(--red);
}

/* SCROLL HINT */
.hero-scroll-hint {
    position:       absolute;
    bottom:         2.5rem;
    left:           50%;
    transform:      translateX(-50%);
    z-index:        2;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.5rem;
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.75rem;
    font-weight:    400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          #c8a043;
    text-shadow:    1px 1px 6px rgba(0,0,0,0.8);
    opacity:        0;
}

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

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 1;   }
}

/* STORY SECTIONS */
#story {
    position: relative;
}

.story-panel {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    padding:         6rem 4rem;
    position:        relative;
    background:      var(--navy);
}

.panel-content {
    max-width: 500px;
    position:  relative;
    z-index:   2;
}

.panel-tag {
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--red);
    margin-bottom:  1.2rem;
    display:        flex;
    align-items:    center;
    gap:            0.8rem;
    opacity:        0;
}

.panel-tag::before {
    content:    '';
    display:    block;
    width:      24px;
    height:     1px;
    background: var(--red);
}

.panel-heading {
    font-family:   'Bebas Neue', sans-serif;
    font-size:     clamp(1.5rem, 3vw, 2.5rem);
    line-height:   1.05;
    font-weight:   400;
    color:         var(--cream);
    margin-bottom: 1.5rem;
    opacity:       0;
}

.panel-body {
    font-family: 'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:   1rem;
    line-height: 1.8;
    color:       var(--gray);
    font-weight: 300;
    opacity:     0;
}

/* JOIN SECTION */
#join {
    min-height:      80vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         6rem 2rem;
    background:      #1a2035;
}

.join-content {
    max-width: 600px;
}

.join-label {
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--red);
    margin-bottom:  1rem;
    opacity:        0;
}

.join-title {
    font-family:   'Bebas Neue', sans-serif;
    font-size:     clamp(2rem, 4vw, 3.5rem);
    line-height:   1;
    font-weight:   400;
    color:         var(--cream);
    margin-bottom: 1.5rem;
    opacity:       0;
}

.join-sub {
    font-family:   'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:     1rem;
    font-weight:   300;
    color:         var(--gray);
    line-height:   1.7;
    margin-bottom: 2.5rem;
    opacity:       0;
}

/* PILLARS */
#pillars {
    position:          relative;
    z-index:           2;
    display:           flex;
    min-height:        80vh;
    height:            auto;
    overflow:          visible;
    gap:               3px;
    background-color:  #111829;
    border-top:        5px solid #111829;
    border-bottom:     5px solid #111829;
    

}

.pillar {
    position:   relative;
    flex:       1;
    overflow:   hidden;
    transition: flex 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor:     pointer;
    background-color: transparent;
}

.pillar:hover {
    flex: 2.5;
}

.pillar-bg {
    position:          absolute;
    inset:             0;
    background-size:   cover;
    background-position: center;
    transition:        transform 0.6s ease;
    background-color:  var(--slate);
}

.pillar:hover .pillar-bg {
    transform: scale(1.05);
}

.pillar-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to top,
        rgba(10,15,30,0.95)  0%,
        rgba(10,15,30,0.40) 50%,
        rgba(10,15,30,0.10) 100%
    );
    z-index:    1;
    transition: background 0.6s ease;
}

.pillar:hover .pillar-overlay {
    background: linear-gradient(
        to top,
        rgba(10,15,30,0.85)  0%,
        rgba(10,15,30,0.20) 50%,
        rgba(10,15,30,0.05) 100%
    );
}

.pillar-content {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    2rem;
    z-index:    2;
    transform:  translateY(60px);
    transition: transform 0.6s ease;
}

.pillar:hover .pillar-content {
    transform: translateY(0);
}

.pillar-title {
    font-family:    'Bebas Neue', sans-serif;
    font-size:      clamp(1.5rem, 3vw, 2.5rem);
    color:          var(--cream);
    letter-spacing: 0.05em;
    margin-bottom:  0.5rem;
}

.pillar-sub {
    font-family: 'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:   1rem;
    color:       #ffffff;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 1rem;
    opacity:     0;
    transition:  opacity 0.4s ease 0.2s;
}

.pillar:hover .pillar-sub {
    opacity: 1;
}

.pillar-link {
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--red);
    text-decoration:none;
    opacity:        0;
    transition:     opacity 0.4s ease 0.3s;
    display:        inline-block;
    border-bottom:  3px solid var(--red);
    padding-bottom: 2px;
}

.pillar:hover .pillar-link {
    opacity: 1;
    color:  #8aa2c9;
    font-weight: 600;
}

@media (max-width: 768px) {
    #pillars {
        flex-direction: column;
        height:         auto;
    }
    .pillar {
        height: 50vh;
        flex:   none;
    }
    .pillar-content {
        transform: translateY(0);
    }
    .pillar-sub,
    .pillar-link {
        opacity: 1;
    }
}

/* NAV */
/*
 * The full nav is now managed by patriot-custom.css.
 * These base styles are kept here as fallback only.
 * patriot-custom.css overrides #main-nav completely.
 */
#main-nav {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          100;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    padding:          1rem 3rem;
    background:       rgba(40,50,74,0.75);
    backdrop-filter:  blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:       background 0.4s ease;
    border-bottom:    1px solid rgba(200,160,67,0.2);
}

#main-nav.scrolled {
    background: rgba(40,50,74,0.95);
}

.nav-brand {
    margin-bottom:  0.75rem;
    font-family:    'Bebas Neue', sans-serif;
    font-size:      1.4rem;
    letter-spacing: 0.15em;
    color:          var(--cream);
}

.nav-logo {
    height:  120px;
    width:   auto;
    display: block;
}




.nav-links {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             2.5rem;
    list-style:      none;
    margin:          0;
    padding:         0;
    max-width:       900px;
    margin-left:     auto;
    margin-right:    auto;
}

.nav-links a {
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--cream);
    text-decoration:none;
    opacity:        0.8;
    transition:     opacity 0.2s, color 0.2s;
}

.nav-links a:hover {
    opacity: 1;
    color:   var(--red);
}

.nav-cta {
    font-family:    'Barlow Semi Condensed', sans-serif; /* was Raleway */
    font-size:      0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--cream);
    background:     var(--red);
    border:         none;
    padding:        0.55rem 1.4rem;
    cursor:         pointer;
    text-decoration:none;
    transition:     background 0.2s;
}

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

/* MOBILE */
@media (max-width: 768px) {
    .hero-content {
        padding: 0 1.5rem;
    }
    .story-panel {
        min-height: 100vh;
        height:     auto;
        justify-content: flex-start;
        padding:         4rem 1.5rem;
    }
    .panel-content {
        max-width: 100%;
    }
    #main-nav {
        padding: 1rem 1.5rem;
    }
    .nav-links {
        display: none;
    }
}