/* ================================================================
   MARLIN STEM VIRTUAL ACADEMY
   Navigation Styles
   nav.css

   Covers:
   - Desktop navigation bar (transparent + solid states)
   - Logo mark and wordmark
   - Navigation links
   - CTA button
   - Mobile hamburger button
   - Mobile slide-down menu
================================================================ */


/* ----------------------------------------------------------------
   NAVBAR — fixed at top, changes on scroll
   
   Two states:
   1. .navbar--transparent  → over the hero (dark background)
   2. .navbar--solid        → once user scrolls past the hero
---------------------------------------------------------------- */

.navbar {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    z-index:         var(--z-fixed);

    display:         flex;
    align-items:     center;
    justify-content: space-between;

    height:          72px;
    padding:         0 var(--section-x);

    /* Smooth transition between transparent and solid */
    transition:
        background-color var(--duration-slow) var(--ease),
        border-color     var(--duration-slow) var(--ease),
        box-shadow       var(--duration-slow) var(--ease);
}


/* ----------------------------------------------------------------
   STATE 1 — Transparent (sitting over the hero section)
---------------------------------------------------------------- */

.navbar--transparent {
    background-color: rgba(15, 31, 49, 0.94);
    border-bottom:    1px solid rgba(200, 165, 92, 0.20);
    backdrop-filter:  blur(14px);
}


/* ----------------------------------------------------------------
   STATE 2 — Solid (user has scrolled past hero)
---------------------------------------------------------------- */

.navbar--solid {
    background-color: rgba(251, 248, 242, 0.96);
    border-bottom:    1px solid var(--grey-200);
    box-shadow:       0 2px 20px rgba(20, 14, 8, 0.06);
    backdrop-filter:  blur(14px);
}


/* ----------------------------------------------------------------
   LOGO — wordmark with icon mark
---------------------------------------------------------------- */

.navbar__logo {
    display:     flex;
    align-items: center;
    gap:         10px;

    font-family: var(--font-display);
    font-size:   19px;
    font-weight: var(--weight-bold);

    /* No underline on hover */
    text-decoration: none;
    transition:      var(--transition);
}

/* Logo color changes with nav state */
.navbar--transparent .navbar__logo { color: var(--white); }
.navbar--solid       .navbar__logo { color: var(--navy-800); }

/* The square icon mark — "MS" */
.navbar__logo-mark {
    width:           40px;
    height:          40px;
    border-radius:   var(--radius);
    background:      linear-gradient(135deg, var(--cyan-500), var(--navy-600));
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;

    font-family:     var(--font-body);
    font-size:       var(--text-sm);
    font-weight:     var(--weight-black);
    color:           var(--white);
    letter-spacing:  0.02em;

    /* Subtle inner glow */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: var(--transition);
}

.navbar__logo:hover .navbar__logo-mark {
    transform:  scale(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), var(--shadow-cyan);
}

/* "Marlin STEM" text — highlight STEM */
.navbar__logo-text strong {
    color: var(--cyan-500);
}

/* On solid navbar, STEM stays cyan */
.navbar--solid .navbar__logo-text strong {
    color: var(--cyan-600);
}


/* ----------------------------------------------------------------
   NAV LINKS — desktop navigation list
---------------------------------------------------------------- */

.navbar__links {
    display:     flex;
    align-items: center;
    gap:         var(--space-8);
}

.navbar__links a {
    position:        relative;
    font-size:       var(--text-base);
    font-weight:     var(--weight-medium);
    text-decoration: none;
    transition:      var(--transition);

    /* Underline animation on hover */
    padding-bottom: 3px;
}

/* Animated underline using pseudo-element */
.navbar__links a::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            0;
    height:           2px;
    border-radius:    var(--radius-full);
    background-color: var(--cyan-500);
    transition:       width var(--duration-base) var(--ease);
}

.navbar__links a:hover::after,
.navbar__links a.active::after {
    width: 100%;
}

/* Link colors change with nav state */
.navbar--transparent .navbar__links a         { color: rgba(255, 248, 235, 0.82); }
.navbar--transparent .navbar__links a:hover   { color: var(--white); }

.navbar--solid .navbar__links a               { color: var(--grey-500); }
.navbar--solid .navbar__links a:hover         { color: var(--grey-900); }
.navbar--solid .navbar__links a.active        { color: var(--grey-900); }


/* ----------------------------------------------------------------
   RIGHT SIDE — CTA button + hamburger
---------------------------------------------------------------- */

.navbar__right {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
}

/* CTA Button in navbar */
.navbar__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         10px 24px;
    border-radius:   var(--radius);
    font-size:       var(--text-sm);
    font-weight:     var(--weight-semi);
    text-decoration: none;
    transition:      var(--transition);
    border:          2px solid transparent;
    white-space:     nowrap;
}

/* CTA changes with nav state */
.navbar--transparent .navbar__cta {
    background:   var(--cyan-500);
    color:        var(--navy-800);
    border-color: var(--cyan-500);
}

.navbar--solid .navbar__cta {
    background:   var(--navy-800);
    color:        var(--white);
    border-color: var(--navy-800);
}

/* Hover — always becomes cyan */
.navbar__cta:hover {
    background:   #e0c88f !important;
    color:        var(--navy-800) !important;
    border-color: #e0c88f !important;
    transform:    translateY(-1px);
    box-shadow:   var(--shadow-cyan);
}


/* ----------------------------------------------------------------
   HAMBURGER BUTTON — mobile only
---------------------------------------------------------------- */

.navbar__hamburger {
    display:         none;      /* Hidden on desktop */
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             5px;

    width:           40px;
    height:          40px;
    border-radius:   var(--radius);
    padding:         8px;

    background:      transparent;
    border:          none;
    cursor:          pointer;
    transition:      var(--transition);
}

.navbar--solid .navbar__hamburger:hover {
    background: var(--grey-100);
}

/* The three lines */
.navbar__hamburger span {
    display:       block;
    width:         22px;
    height:        2px;
    border-radius: var(--radius-full);
    transition:    var(--transition);
}

/* Line color changes with nav state */
.navbar--transparent .navbar__hamburger span { background: var(--white); }
.navbar--solid       .navbar__hamburger span { background: var(--navy-800); }

/* Animate into X when menu is open */
.navbar__hamburger.is-open span:nth-child(1) {
    transform:       translateY(7px) rotate(45deg);
}
.navbar__hamburger.is-open span:nth-child(2) {
    opacity:         0;
    transform:       scaleX(0);
}
.navbar__hamburger.is-open span:nth-child(3) {
    transform:       translateY(-7px) rotate(-45deg);
}


/* ----------------------------------------------------------------
   MOBILE MENU — slides down when hamburger is clicked
---------------------------------------------------------------- */

.mobile-menu {
    position:         fixed;
    top:              72px;   /* Exactly below navbar */
    left:             0;
    right:            0;
    z-index:          var(--z-fixed);

    background:       var(--white);
    border-bottom:    1px solid var(--grey-200);
    box-shadow:       var(--shadow-lg);

    padding:          var(--space-5) var(--section-x) var(--space-6);

    /* Slide in from top */
    transform:        translateY(-8px);
    opacity:          0;
    pointer-events:   none;
    transition:
        transform var(--duration-base) var(--ease),
        opacity   var(--duration-base) var(--ease);
}

/* Visible state — toggled by JavaScript */
.mobile-menu.is-open {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: all;
}

/* Mobile nav links */
.mobile-menu__links {
    display:       flex;
    flex-direction:column;
    gap:           0;
    margin-bottom: var(--space-5);
}

.mobile-menu__links a {
    display:         block;
    font-size:       var(--text-lg);
    font-weight:     var(--weight-medium);
    color:           var(--grey-700);
    padding:         var(--space-4) 0;
    border-bottom:   1px solid var(--grey-200);
    transition:      color var(--duration-fast) var(--ease);
}

.mobile-menu__links a:hover {
    color: var(--navy-800);
}

.mobile-menu__links a:last-child {
    border-bottom: none;
}

/* Mobile CTA button */
.mobile-menu__cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    width:           100%;
    padding:         14px;
    border-radius:   var(--radius);
    background:      var(--navy-800);
    color:           var(--white);
    font-size:       var(--text-base);
    font-weight:     var(--weight-semi);
    text-decoration: none;
    transition:      var(--transition);
    margin-top:      var(--space-4);
    border:          2px solid var(--navy-800);
}

.mobile-menu__cta:hover {
    background:   var(--cyan-500);
    color:        var(--navy-800);
    border-color: var(--cyan-500);
}

/* Divider between links and CTA */
.mobile-menu__divider {
    height:     1px;
    background: var(--grey-200);
    margin:     var(--space-4) 0;
}


/* ----------------------------------------------------------------
   RESPONSIVE — when hamburger replaces desktop nav
---------------------------------------------------------------- */

@media (max-width: 900px) {

    /* Hide desktop elements */
    .navbar__links { display: none; }
    .navbar__cta   { display: none; }

    /* Show hamburger */
    .navbar__hamburger { display: flex; }
}

@media (max-width: 480px) {

    .navbar {
        height:  60px;
        padding: 0 5%;
    }

    /* Mobile menu starts below smaller navbar */
    .mobile-menu {
        top: 60px;
    }

    .navbar__logo {
        font-size: 17px;
    }

    .navbar__logo-mark {
        width:  34px;
        height: 34px;
    }
}