/* =====================================================
   SDCC OFF-SITES 2026
   Created by Elly Glitch
===================================================== */

/* =====================================================
   RESET
===================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:#F6F5FB;

    color:#2B2B2B;

    line-height:1.6;

}

/* =====================================================
   TYPOGRAPHY
===================================================== */

h1{

    font-size:2.5rem;

    font-weight:700;

}

h2{

    font-size:1.75rem;

    font-weight:700;

}

h3{

    font-size:1.2rem;

    font-weight:600;

}

p{

    margin-bottom:16px;

}

a{

    color:#6C4CE6;

    text-decoration:none;

    transition:.2s;

}

a:hover{

    opacity:.8;

}

/* =====================================================
   HEADER
===================================================== */

header{

    background:#6C4CE6;

    color:white;

    text-align:center;

    padding:42px 20px;

    box-shadow:0 4px 18px rgba(0,0,0,.15);

}

.logo{

    max-width:900px;

    margin:auto;

}

.logo p{

    margin-top:12px;

    opacity:.92;

    font-size:1.05rem;

}

/* =====================================================
   HERO
===================================================== */

.hero{

    max-width:900px;

    margin:40px auto;

    padding:0 20px;

    text-align:center;

}

.hero h2{

    margin-bottom:20px;

}

.hero p{

    color:#666;

}

/* =====================================================
   DONATIONS
===================================================== */

.donations{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin:25px 0;

}

.donations a{

    background:white;

    border-radius:12px;

    padding:14px 22px;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

    font-weight:600;

}

.donations a:hover{

    transform:translateY(-2px);

}

/* =====================================================
   SEARCH
===================================================== */

.controls{

    display:flex;

    justify-content:center;

    padding:0 20px;

    margin-bottom:30px;

}

#search{

    width:100%;

    max-width:750px;

    padding:16px 20px;

    font-size:16px;

    border-radius:14px;

    border:1px solid #DDD;

    outline:none;

    transition:.2s;

}

#search:focus{

    border-color:#6C4CE6;

    box-shadow:0 0 0 4px rgba(108,76,230,.15);

}

/* =====================================================
   DAY BUTTONS
===================================================== */

.calendar{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    padding:0 20px;

    margin-bottom:30px;

}

.day{

    background:white;

    border:none;

    border-radius:14px;

    padding:16px 24px;

    min-width:125px;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

}

.day:hover{

    transform:translateY(-3px);

}

.day.active{

    background:#6C4CE6;

    color:white;

}

.day span{

    display:block;

    margin-top:5px;

    font-size:13px;

    font-weight:400;

    opacity:.85;

}/* =====================================================
   FILTERS
===================================================== */

.filters{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    padding:0 20px;

    margin-bottom:35px;

}

.filter{

    border:none;

    border-radius:999px;

    padding:12px 22px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    color:white;

    transition:.2s;

}

.filter:hover{

    transform:translateY(-2px);

}

.filter.active{

    outline:3px solid #222;

}

/* Filter Colors */

.filter[data-filter="All"]{

    background:#444;

}

.activation{

    background:#2B8FFF;

}

.food{

    background:#2EAF5D;

}

.meetup{

    background:#8B5CF6;

}

.signing{

    background:#C056D8;

}

.party{

    background:#F68B2C;

}

.show{

    background:#E24848;

}

/* =====================================================
   MAIN LAYOUT
===================================================== */

main{

    width:100%;

    max-width:1600px;

    margin:0 auto;

    padding:0 20px 40px;

}

/* =====================================================
   PLANNER CONTROLS
===================================================== */

#planner-controls{

    display:flex;

    justify-content:flex-end;

    margin-bottom:20px;

}

#clear-planner{

    background:#E24848;

    color:white;

    border:none;

    border-radius:12px;

    padding:12px 18px;

    cursor:pointer;

    font-weight:600;

    transition:.2s;

}

#clear-planner:hover{

    transform:translateY(-2px);

}

/* =====================================================
   EVENTS
===================================================== */

#events{

    display:flex;

    flex-direction:column;

    gap:24px;

    width:100%;

}

/* =====================================================
   EVENT CARD
===================================================== */

.event-card{

    width:100%;

    background:white;

    border-radius:18px;

    padding:24px;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

    transition:.25s;

}

.event-card:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 28px rgba(0,0,0,.12);

}

/* =====================================================
   EVENT HEADER
===================================================== */

.event-header{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.event-time{

    color:#6C4CE6;

    font-weight:700;

    font-size:1rem;

}

.event-header h2{

    margin:0;

    line-height:1.3;

}

.event-day{

    font-size:.95rem;

    color:#777;

    font-weight:500;

}

.event-category{

    color:#666;

    font-size:.95rem;

}

.event-location{

    color:#555;

}

.event-price{

    font-weight:600;

    color:#2EAF5D;

}

/* =====================================================
   BADGES
===================================================== */

.event-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.badge-required,

.family-friendly{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

.featured-badge{

    background:#FFF2C6;

}

.badge-required{

    background:#E6E2FF;

}

.family-friendly{

    background:#DFF6E5;

}

/* =====================================================
   BUTTONS
===================================================== */

.event-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:22px;

}

.event-buttons button{

    border:none;

    border-radius:10px;

    padding:12px 18px;

    cursor:pointer;

    font-weight:600;

    transition:.2s;

}

.details-btn{

    background:#EEE;

}

.schedule-btn{

    background:#6C4CE6;

    color:white;

}

.favorite-btn{

    background:#F6F5FB;

}

.event-buttons button:hover{

    transform:translateY(-2px);

}

/* =====================================================
   DETAILS PANEL
===================================================== */

.event-details{

    margin-top:24px;

    padding-top:20px;

    border-top:1px solid #EEE;

}

.event-details p{

    margin-bottom:16px;

}

.event-details strong{

    color:#333;

}

/* =====================================================
   LINKS
===================================================== */

.event-links{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:16px;

    margin-bottom:20px;

}

.event-links a{

    background:#6C4CE6;

    color:white;

    padding:10px 16px;

    border-radius:10px;

    font-weight:600;

}

.event-links a:hover{

    opacity:.9;

}

/* =====================================================
   TAGS
===================================================== */

.event-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.tag{

    background:#F1F1F1;

    padding:6px 12px;

    border-radius:999px;

    font-size:.85rem;

}/* =====================================================
   FOOTER
===================================================== */

footer{

    background:#222;

    color:white;

    text-align:center;

    padding:40px 20px;

    margin-top:50px;

}

footer p{

    margin:8px 0;

    opacity:.9;

}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:1024px){

    header{

        padding:36px 20px;

    }

    h1{

        font-size:2.1rem;

    }

    .hero{

        padding:0 20px;

    }

    .hero h2{

        font-size:1.7rem;

    }

    main{

        padding:0 16px 35px;

    }

    .event-card{

        padding:22px;

    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px){

    header{

        padding:30px 16px;

    }

    h1{

        font-size:1.8rem;

    }

    .hero{

        margin:28px auto;

    }

    .hero h2{

        font-size:1.45rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .controls{

        padding:0 12px;

    }

    #search{

        font-size:16px;

    }

    /* Horizontal scrolling day buttons */

    .calendar{

        justify-content:flex-start;

        flex-wrap:nowrap;

        overflow-x:auto;

        overflow-y:hidden;

        padding:0 12px 10px;

        scrollbar-width:thin;

        -webkit-overflow-scrolling:touch;

    }

    .calendar::-webkit-scrollbar{

        height:8px;

    }

    .calendar::-webkit-scrollbar-thumb{

        background:#BBB;

        border-radius:20px;

    }

    .day{

        flex:0 0 auto;

        min-width:135px;

    }

    .filters{

        padding:0 12px;

        gap:10px;

    }

    .filter{

        font-size:14px;

        padding:10px 18px;

    }

    main{

        padding:0 12px 30px;

    }

    .event-card{

        padding:18px;

        border-radius:16px;

    }

    .event-header{

        gap:10px;

    }

    .event-header h2{

        font-size:1.2rem;

    }

    .event-meta{

        gap:8px;

    }

    .featured-badge,

    .badge-required,

    .family-friendly{

        font-size:.75rem;

        padding:5px 10px;

    }

    .event-buttons{

        flex-direction:column;

    }

    .event-buttons button{

        width:100%;

    }

    .event-links{

        flex-direction:column;

    }

    .event-links a{

        text-align:center;

    }

}

/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width:480px){

    h1{

        font-size:1.55rem;

    }

    .hero h2{

        font-size:1.25rem;

    }

    .hero p{

        font-size:.92rem;

    }

    .day{

        min-width:120px;

        padding:14px 18px;

    }

    .filter{

        width:100%;

    }

    .event-card{

        padding:16px;

    }

    .event-header h2{

        font-size:1.1rem;

    }

}

/* =====================================================
   ANIMATIONS
===================================================== */

button{

    transition:
        background .2s,
        color .2s,
        transform .2s,
        box-shadow .2s;

}

button:hover{

    box-shadow:0 6px 18px rgba(0,0,0,.12);

}

button:active{

    transform:scale(.98);

}

.event-card{

    animation:fadeIn .25s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   Back To Top Button
=========================== */

#backToTop {

    display: none;

    position: fixed;

    bottom: 25px;

    right: 25px;

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background: #6C4CE6;

    color: white;

    font-size: 24px;

    font-weight: bold;

    cursor: pointer;

    box-shadow: 0 5px 15px rgba(0,0,0,.25);

    transition: all .25s ease;

    z-index: 9999;

}

#backToTop:hover {

    background: #5638d8;

    transform: translateY(-3px);

}

@media (max-width: 768px) {

    #backToTop {

        width: 50px;

        height: 50px;

        font-size: 22px;

        bottom: 20px;

        right: 20px;

    }

}