:root{
    --brand-blue: #3b5bff;
    --brand-navy: #13217c;
    --brand-magenta: #cc00cc;
    --ink: #333333;
    --white: #ffffff;
    --shadow: 5px 5px 15px rgba(0,0,0,0.1);
    --shadow-soft: 0 1px 10px #e9e9e9;
}

*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:"Inter",sans-serif;background:#fafbfe;color:var(--ink);}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}

/* ============ STICKY HEADER ============ */
.site-header{
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 10px;
    width: 100%;
}
.header-inner{
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* ============ LOGO ============ */
.site-logo{ display:inline-block; flex-shrink: 0; }
.site-logo img{
    width: 120px;
    height: 45px;
    object-fit: contain;
    display: block;
    transform: translateY(-1px);
}

/* ============ NAV MENU (DESKTOP) ============ */
.main-nav{ flex: 1; display: flex; justify-content: center; }
.main-nav > ul{ display: flex; align-items: center; gap: 0; }
.main-nav > ul > li{
    position: static; /* megamenu positions relative to .main-nav, not this <li> */
    margin: 0 20px;
}
.main-nav > ul > li > a,
.main-nav > ul > li > .nav-toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    padding: 19px 0 9px; /* asymmetric: drops text to sit on logo wordmark baseline (red-line ref). Total height unchanged so header + megamenu position stay put. */
    transition: color .2s ease;
    background: none;
    border: 0;
    white-space: nowrap; /* prevents items like "Test Prep" / "Success Stories" from wrapping to 2 lines */
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li > .nav-toggle:hover,
.main-nav > ul > li:hover > a,
.main-nav > ul > li:hover > .nav-toggle{ color: var(--brand-blue); }
.main-nav .caret{
    display: inline-block;
    width: 12px; height: 12px;
    transition: transform .2s ease;
}
.main-nav > ul > li:hover .caret{ transform: rotate(180deg); }

/* ============ MEGA MENU PANEL ============ */
/* Positioned relative to .site-header (which is position: sticky → creates positioning context) */
.megamenu{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0;
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: 30px 30px 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
    z-index: 100;
}
.main-nav > ul > li:hover > .megamenu,
.main-nav > ul > li.is-open > .megamenu,
.main-nav > ul > li:focus-within > .megamenu{
    opacity: 1;
    visibility: visible;
}
/* Constrain the inner content to a centered max-width */
.megamenu > *{
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* ============ MEGA MENU - CARD GRID (Test Prep / Admissions / About) ============ */
.mega-cards{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: flex-start;
    align-items: flex-start;
}
.mega-card{
    width: 280px;
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mega-card .thumb{
    display: block;
    width: 298px;
    max-width: 100%;
    aspect-ratio: 298 / 200;
    background: #f5f7ff;
    border-radius: 8px;
    overflow: hidden;
}
.mega-card .thumb img{ width:100%; height:100%; display:block; object-fit:cover; }
.mega-card .pill-btn{
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 48px;
    background: transparent;
    color: var(--brand-blue);
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    border: 2px solid var(--brand-blue);
    border-radius: 10px;
    transition: background .2s ease, color .2s ease;
}
.mega-card .pill-btn:hover{ background: var(--brand-blue); color: var(--white); }

/* ============ MEGA MENU - COMPACT (Destinations + About: smaller cards, more across) ============ */
.mega-cards.dest,
.mega-cards.about{ gap:10px; justify-content: flex-start; }
.mega-cards.dest .mega-card,
.mega-cards.about .mega-card{ width: 200px; }
.mega-cards.dest .mega-card .thumb{ width: 180px; aspect-ratio: 210 / 125; }
.mega-cards.about .mega-card .thumb{ width: 180px; }
.mega-cards.dest .mega-card .pill-btn,
.mega-cards.about .mega-card .pill-btn{ width: 160px; }

/* ============ MEGA MENU - RESOURCES (column list style) ============ */
.mega-cols{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
}
.mega-col{
    width: 240px;
    margin-bottom: 20px;
    text-align: left;
}
.mega-col .thumb{ display:block; width: 210px; max-width:100%; border-radius:8px; overflow:hidden; }
.mega-col .thumb img{ width:100%; height:auto; display:block; }
.mega-col h4{
    color: var(--ink);
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0 0;
    padding-left: 20px;
}
.mega-col ul{
    padding-left: 20px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mega-col ul a{
    font-size: 16px;
    font-weight: 400;
    color: var(--brand-blue);
    line-height: 1.3;
    display: inline-block;
    transition: border-color .2s ease;
    border-bottom: 1px solid transparent;
}
.mega-col ul a:hover{ border-bottom-color: var(--brand-blue); }

/* ============ HEADER ACTIONS (Phone + Login) ============ */
.header-actions{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.btn-phone{
    width: 64px;
    height: 40px;
    background-color: var(--brand-blue);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    transition: background-color .2s ease;
}
.btn-phone svg{ width: 20px; height: 20px; fill: var(--white); }
.btn-phone:hover{ background-color: var(--brand-navy); }
.btn-login{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 40px;
    border: 2px solid var(--brand-blue);
    border-radius: 10px;
    color: var(--brand-blue);
    font-weight: 600;
    line-height: 24px;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    background: transparent;
    margin-top: 5px;
    transition: background .2s ease, color .2s ease;
}
.btn-login:hover{ background: var(--brand-blue); color: var(--white); }

/* ============ MOBILE TOGGLE ============ */
.mobile-toggle{
    display: none;
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    cursor: pointer;
    padding: 0;
    color: var(--ink);
}
.mobile-toggle span{
    display: block;
    width: 26px;
    height: 2px;
    background: currentColor;
    margin: 6px auto;
    transition: transform .25s ease, opacity .25s ease;
}
.mobile-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.mobile-toggle.is-open span:nth-child(2){ opacity: 0; }
.mobile-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ============ MOBILE DRAWER ============ */
.mobile-drawer{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: var(--white);
    box-shadow: 2px 0 12px rgba(0,0,0,.08);
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 10000; /* above sticky header (9999) so it covers it when open */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.mobile-drawer.is-open{ transform: translateX(0); }
.mobile-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 9998;
}
.mobile-overlay.is-open{ opacity: 1; visibility: visible; }

/* Drawer top bar with close button */
.drawer-top{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px;
    border-bottom: 1px solid #e6ebff;
    flex-shrink: 0;
}
.drawer-close{
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 0;
    background: var(--brand-blue);
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.drawer-close:hover{ background: var(--brand-navy); }

.mobile-drawer ul{ width: 100%; }
.mobile-drawer li{ border-bottom: 1px solid #e6ebff; }
.mobile-drawer a,
.mobile-drawer .nav-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    color: var(--ink);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}
.mobile-drawer a:hover,
.mobile-drawer .nav-toggle:hover,
.mobile-drawer .nav-toggle.is-open{ color: var(--brand-blue); }
.mobile-drawer .nav-toggle i{ transition: transform .2s ease; color: var(--brand-blue); }
.mobile-drawer .nav-toggle.is-open i{ transform: rotate(180deg); }
.mobile-drawer .submenu{
    max-height: 0;
    overflow: hidden;
    background: #f5f7ff;
    transition: max-height .3s ease;
}
.mobile-drawer .submenu.is-open{ max-height: 1200px; }
.mobile-drawer .submenu li{ border-bottom: 1px solid #e6ebff; }
.mobile-drawer .submenu li:last-child{ border-bottom: 0; }
.mobile-drawer .submenu a{
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-blue);
}
/* Category headers inside drawer submenus (non-link, visual grouping only) */
.mobile-drawer .submenu .submenu-heading{
    padding: 14px 24px 6px 24px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6c7493;
    background: transparent;
    border-bottom: 0;
    pointer-events: none;
}

/* Lock body scroll when drawer is open (works on iOS too) */
body.drawer-open{ overflow: hidden; }

/* Hide the hamburger toggle while the drawer is open — drawer-close is the single close affordance */
body.drawer-open .mobile-toggle{ visibility: hidden; }

/* ============ RESPONSIVE ============
   Breakpoints chosen by WHERE THE LAYOUT BREAKS, not by device-class assumptions:
   - >= 1200px : everything has breathing room
   - 992-1199  : tighter spacing + smaller nav font
   - <= 991    : nav can no longer fit alongside logo + CTAs → switch to hamburger
   - <= 478    : compact CTAs for very small phones
============================================================== */
@media (max-width: 1199px){
    .main-nav > ul > li{ margin: 0 12px; }
    .main-nav > ul > li > a,
    .main-nav > ul > li > .nav-toggle{ font-size: 15px; }
}
@media (max-width: 991px){
    .main-nav{ display: none; }
    .mobile-toggle{ display: block; }
    .megamenu{ display: none; }
    .header-actions{ gap: 10px; }
}
@media (max-width: 478px){
    .site-logo img{ width: 105px; height: 40px; }
    .btn-login{ padding: 0 14px; width: auto; font-size: 14px; }
    .btn-phone{ width: 50px; }
}