@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');


:root{
    --naba-green:#336633;
    --naba-purple:#5B2A91;
    --naba-gold:#f6b400;
    --accent-1: rgba(91,42,145,.18);
    --accent-2: #ffd36b;
    --uiuccolor: #FF5F05;
    --surface:#0f1116;
    --surface-2:#161922;
    --text:#e9edf1;
    --muted:#b8c1cc;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:18px;
}

*{
    box-sizing:border-box
}
html,body{
    margin:0;
    padding:0;background:var(--surface);
    color:var(--text);
    font-family:Inter,Aboreto,Roboto Flex,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    scroll-behavior:smooth;
}



a{color:#c9b7ff;text-decoration:none}

/* Header */
.header{position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:saturate(140%) blur(8px);
    background:rgba(15,17,22,.65);
    border-bottom:1px solid rgba(255,255,255,.08)
}
.nav{
    max-width:1300px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:18px;
    padding:8px 24px 8px 8px
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
}
.brand img{
    height:48px;
    width:auto;
    border-radius:8px;
}
.menu{display:flex;
    align-items:center;
    gap:14px;
    margin-left:auto;
    flex-wrap:nowrap;
}
.nav-link{
    padding:8px 12px;
    border-radius:10px;
    white-space:nowrap;
}
.nav-link:hover,.nav-link.active {
    background:linear-gradient(135deg, rgba(91,42,145,.25), rgba(51,102,51,.25));
    box-shadow:var(--shadow);
    text-decoration:none
}
.icon-link{
    display:flex;
    font-size:1.2em;
    align-items:center;
    justify-content:center;
    padding:6px;border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
}
.icon-link svg{fill:#fff}

.nav-uiuc {
    color:var(--uiuccolor);
}


/* mobile */
.hamburger{
    display:none;
    position:relative;
    width:40px;
    height:38px;
    margin-left:auto;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    background:transparent;
    cursor:pointer;
}
.hamburger span{
    position:absolute;
    left:9px;
    right:9px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:.2s;
}
.hamburger span:nth-child(1){top:11px}
.hamburger span:nth-child(2){top:18px}
.hamburger span:nth-child(3){top:25px}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile{ display:none;
    flex-direction:column;
    gap:8px;
    padding:10px 18px 16px
}
.mobile.open{
    display:flex
}
.mobile a{
    padding:10px 12px;
    background:rgba(255,255,255,.04);
    border-radius:10px
}



/* Hero */
.hero{
    position:relative;
    display:grid;
    place-items:center;
    text-align:center;
    min-height:72vh;
    padding:64px 18px;
    overflow:hidden
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(91,42,145,.55), transparent 60%),
        radial-gradient(900px 600px at 110% -10%, rgb(200, 65, 19), transparent 58%),
        radial-gradient(900px 600px at 110% 10%, rgba(51,102,51,.4), transparent 58%),
        linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6));z-index:1
}
.hero img.bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
    filter:saturate(1.05) contrast(1.05) brightness(.78);
    z-index:0
}
.hero .content {
    position:relative;
    z-index:2;
    max-width:980px
}
h1{
/*clamp(minimum, preferred, maximum);*/
    font-size:clamp(52px,8vw,96px);
    margin:0 0 6px;line-height:1.02;
    font-weight:800
}
h2{
    font-size:clamp(26px,3.5vw,40px);
    margin:0;
    font-weight:700;
    color:#eae6ff
}

.section{
    max-width:1100px;
    margin:0 auto;
    padding:64px 18px}
.section h3{
    margin:0 0 14px;
    font-size:clamp(22px,3vw,28px)
}
.card{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    padding:28px;
    box-shadow:var(--shadow)
}
.section p{
    color:var(--muted);line-height:1.7
}

.video{aspect-ratio:16/9;width:100%;border:0;border-radius:var(--radius);box-shadow:var(--shadow)}

/* grid utils */
.row{display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:20px
}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}

/* president */
.president{
    display:flex;
    gap:20px;
    align-items:center
}
.president img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(246, 180, 0, .7)
}

/* Current Events grid */
#events{
    padding:64px 18px
}
.wrap{
    max-width:1100px;
    margin:0 auto
}
.section-title{
    margin:0 0 18px;
    font-size:clamp(22px,3vw,28px)
}
.events-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:18px
}
.event{
    padding:22px;
    background:linear-gradient(180deg,var(--accent-1),
    rgba(51,102,51,.1));
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius)
}
.pill{
    display:inline-block;
    background:rgba(246,180,0,.14);
    border:1px solid rgba(246,180,0,.4);
    color:#ffe9b3;padding:6px 10px;
    border-radius:999px;
    font-weight:600;
    font-size:14px;
    margin-bottom:8px
}
.muted{color:var(--muted)}

/* Board */
.board-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px
}
.member{
    text-align:center;
    padding:18px;border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(91,42,145,.18), rgba(51,102,51,.12));
    border:1px solid rgba(255,255,255,.08);
}
.member img{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid rgba(246,180,0,.7);
    box-shadow:var(--shadow)
}
.member h4{
    margin:12px 0 4px;
    font-size:18px
}
.member small{
    color:var(--muted);
    display:block;
    margin-bottom:10px
}
.member .linkedin{
    display:inline-flex;
    gap:8px;
    align-items:center;
    font-weight:600;
    padding:8px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1)
}
.member .linkedin svg{fill:#ffffff}

/*  Footer */
.cta{
    padding:64px 18px;
    text-align:center
}
.btn.btn-primary{
    display:inline-block;
    margin-top:10px;
    padding:12px 18px;
    border-radius:12px;
    font-weight:700;
    color:#0f1116;
    background:linear-gradient(135deg,var(--naba-gold),#ffd36b);
    border:0;
    box-shadow:var(--shadow)
}
.btn.btn-primary:hover{
    filter:brightness(1.05);
    text-decoration:none
}
footer{
    padding:18px 18px 32px;
    border-top:1px solid rgba(255,255,255,.08)
}
.foot{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}
.foot small{
    color:var(--muted)
}
.social{
    display:flex;
    gap:14px
}
.social a{
    color:#fff
}

/* responsive */
@media (max-width: 1000px){
    .president-letter {
       font-size: 0.8rem;
    }
    .menu{
        display:none
    }
    .hamburger{
        display:block
    }
    .row{
        grid-template-columns:1fr
    }
    .col-6,.col-12{
        grid-column:1 / -1}

    .foot{
        flex-direction:column;gap:8px
    }
    .hero::before{
        content:"";
        position:absolute;
        inset:0;
        background:
                radial-gradient(1200px 600px at 10% -10%, rgba(91,42,145,.55), transparent 60%),
                radial-gradient(900px 600px at 110% -10%, rgb(200, 65, 19), transparent 28%),
                linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6));z-index:1
    }
}

/*buttons under uiuc chapter*/
.hero-buttons {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-buttons a {
    flex: 0 0 auto;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.btn-gold {
    background: linear-gradient(180deg, var(--naba-gold), #ffb400);
    color: #0f1116;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}



/* Slide up + fade in on page load */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    opacity: 0; /* start invisible */
    animation: slideUpFadeIn 0.7s ease-out 0.2s forwards;
}



/* LinkedIn hover effect on desktop only */
.linkedin{
    color:#0077B5;
}
@media (hover: hover) and (pointer: fine) {
    .member .linkedin:hover {
        background: #0077B5;
        color: #fff;
        border-color: #005582;
        transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }
    .member .linkedin:hover i {
        color: #fff;
    }
}

/* Remove underline for nav + dropdown links */
.menu .nav-link:hover,
.menu .dropdown-toggle:hover,
.menu .dropdown-item,
.menu .dropdown-item:hover,
#mobileMenu a,
#mobileMenu a:hover,
#mobileMenu .dropdown-item,
#mobileMenu .dropdown-item:hover,
.brand:hover,
.brand span:hover,
.icon-link:hover {
    text-decoration: none;
}




/*Events Tweak*/
.card.event .muted,
.event .muted{
    white-space: normal;      /* allow wrapping */
    overflow-wrap: anywhere;  /* break super-long tokens */
}


.event .muted a {
    color: var(--naba-gold, #ffd36b);
    text-decoration: underline;
}
.event .muted a:hover {
    filter: brightness(1.15);
}


/*!* stop cards from stretching to row height *!*/
/*.events-grid { align-items: start; }     !* applies to all children *!*/
/*.event { align-self: start; height:auto; min-height:0; }*/