/* ======================================================
   Floriano Family Sports (FFS)
   Main Stylesheet
====================================================== */

/* ======================================================
   Global
====================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0F1115;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
}

/* ======================================================
   Hero
====================================================== */

.hero {
    padding: 60px 20px 20px;
}

.shield {
    width: 190px;
    display: block;
    margin: auto;
    filter: drop-shadow(0 15px 40px rgba(242,175,2,.25));
}

h1 {
    margin-top: 25px;
    font-size: 3rem;
    font-weight: 800;
    color: #F2AF02;
}

.hero p {
    margin-top: 10px;
    font-size: 1.1rem;
    color: #bdbdbd;
}

/* ======================================================
   Mascots
====================================================== */

.mascots {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 80px;
    margin-top: 45px;
}

.ryley,
.addison {
    height: 430px;
    transition: .35s;
}

.ryley:hover {
    transform: translateX(8px) scale(1.02);
}

.addison:hover {
    transform: translateX(-8px) scale(1.02);
}

/* ======================================================
   Main Buttons
====================================================== */

.buttons {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: min(420px, 90%);
    margin: 50px auto 80px;
}

.buttons a {
    padding: 20px;
    border-radius: 18px;
    background: #6B162E;
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: .25s;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.buttons a:hover {
    background: #F2AF02;
    color: #111;
    transform: translateY(-3px);
}

/* ======================================================
   Page Header
====================================================== */

.page-header {
    padding: 25px 20px 10px;
    text-align: center;
}

.page-header h1 {
    margin-top: 12px;
    font-size: 2.3rem;
}

.small {
    width: 140px;
}

.back {
    display: inline-block;
    margin-bottom: 20px;
    color: #F2AF02;
    text-decoration: none;
    font-weight: 700;
}

/* ======================================================
   Family Calendar Schedule V1.2
====================================================== */

.schedule{
    width:min(900px,94%);
    margin:0 auto 80px;
}

.schedule h2{
    text-align:left;
    color:#F2AF02;
    letter-spacing:3px;
    margin:40px 0 16px;
    font-size:.95rem;
}

.event-card{
    position:relative;
    display:flex;
    background:#181C23;
    border-radius:18px;
    overflow:hidden;
    margin:16px 0;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    transition:.2s ease;
}

.event-card:hover{
    transform:translateY(-2px);
}

.accent{
    width:8px;
    flex:none;
}

.accent.addison{background:#8B5CF6;}
.accent.ryley{background:#3B82F6;}

.event-content{
    padding:20px;
    text-align:left;
    width:100%;
}

.event-content h3{
    margin:0 0 10px;
    font-size:1.5rem;
}

.meta-row{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:12px;
}

.badge{
    padding:5px 12px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:700;
}

.league{background:#15803D;}
.practice{background:#2563EB;}
.tournament{background:#D97706;}
.school{background:#52525B;}

.homeaway{
    color:#cfcfcf;
    font-size:.8rem;
    font-weight:700;
}

.opponent{
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:12px;
}

.info{
    color:#c9c9c9;
    margin:6px 0;
}

.directions{
    display:inline-block;
    margin-top:20px;
    padding:10px 18px;
    background:#7A1436;
    color:#fff;
    text-decoration:none;
    border-radius:12px;
    font-weight:700;
}

.directions:hover{
    background:#A3194C;
}


/* ======================================================
   Get Directions Button
====================================================== */

#next-directions {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 24px;
    background: #7A1436;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    border: 3px solid #D4AF37;
    border-radius: 18px;
    box-shadow: 0 6px 15px rgba(0,0,0,.35);
    transition: .25s;
}

#next-directions:hover {
    background: #A3194C;
    transform: scale(1.03);
}

#next-directions:link,
#next-directions:visited,
#next-directions:active {
    color: #fff !important;
    text-decoration: none !important;
}

/* ======================================================
   Athlete Filter Pills
====================================================== */

.filters{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    margin:26px auto 36px;

    flex-wrap:wrap;

}

.filter{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border:none;

    border-radius:999px;

    background:#232831;

    color:#D2D7DF;

    font-size:.95rem;

    font-weight:700;

    cursor:pointer;

    transition:all .20s ease;

    box-shadow:
        0 8px 18px rgba(0,0,0,.30);

}

.filter:hover{

    transform:translateY(-2px);

    background:#2B313C;

}

.filter.active{

    color:white;

    transform:translateY(-2px);

}

/* ===== Colored Dots ===== */

.dot{

    width:8px;

    height:8px;

    border-radius:50%;

    flex:none;

}

/* Dashboard */

.filter[data-athlete="ALL"] .dot{

    background:#F2AF02;

}

/* Addison */

.filter[data-athlete="ADDISON"] .dot{

    background:#8B5CF6;

}

/* Ryley */

.filter[data-athlete="RYLEY"] .dot{

    background:#3B82F6;

}

/* ===== Active States ===== */

.filter.active[data-athlete="ALL"]{

    background:#2F343D;

    box-shadow:
        0 0 16px rgba(242,175,2,.35);

}

.filter.active[data-athlete="ADDISON"]{

    background:#2F343D;

    box-shadow:
        0 0 16px rgba(139,92,246,.40);

}

.filter.active[data-athlete="RYLEY"]{

    background:#2F343D;

    box-shadow:
        0 0 16px rgba(59,130,246,.40);

}

.filter.active .dot{

    transform:scale(1.35);

}
/* ======================================================
   Subscribe
====================================================== */

#subscribe {
    margin: 20px auto;
    text-align: center;
}

.subscribe-button {
    display: block;
    max-width: 340px;
    margin: 20px auto;
    padding: 18px 24px;
    background: #7A1436;
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    border: 3px solid #D4AF37;
    border-radius: 18px;
    box-shadow: 0 6px 15px rgba(0,0,0,.35);
    transition: .25s;
}

.subscribe-button:hover {
    background: #A3194C;
    transform: scale(1.03);
}

.subscribe-button small {
    display: block;
    margin-top: 8px;
    font-size: .9rem;
    font-weight: 400;
    color: #f2f2f2;
}

/* ======================================================
   Responsive
====================================================== */

@media (max-width: 900px) {

    h1 {
        font-size: 2.3rem;
    }

    /* Home page shield */
    .shield {
        width: 160px;
    }

    /* Family Calendar shield */
    .small {
        width: 95px;
    }

    .mascots {
        gap: 20px;
    }

    .ryley,
    .addison {
        height: 250px;
    }

}
/* ==========================================
   Hero Next Up Card
========================================== */

.hero-card{

    background:#181C23;

    border:2px solid rgba(242,175,2,.25);

    border-radius:22px;

    padding:34px;

    width:min(900px,94%);

    margin:20px auto;

    box-shadow:0 18px 40px rgba(0,0,0,.35);

}

.hero-card h3{

    font-size:2rem;

    margin-bottom:14px;

}

.hero-opponent{

    margin:26px 0;

    font-size:2.25rem;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#ffffff;

}

.hero-opponent::before{

    content:"VS";

    display:block;

    font-size:.60rem;

    letter-spacing:4px;

    color:#7F8A99;

    margin-bottom:8px;

}

.hero-info{

    margin:12px 0;

    color:#C8CED8;

    font-size:1.05rem;

}

/* ==========================================
   Countdown Timer
========================================== */
.countdown{

    margin:36px 0;

    text-align:center;

}

.countdown-label{

    color:#98A4B5;

    letter-spacing:4px;

    font-size:.8rem;

    margin-bottom:18px;

}

.countdown-grid{

    display:flex;

    justify-content:center;

    gap:18px;

}

.count-box{

    width:135px;

    padding:24px 0;

    border-radius:20px;

    background:#10151C;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02),
        0 12px 28px rgba(0,0,0,.45);

}

.count-value{

    font-size:3.8rem;

    font-weight:900;

    line-height:1;

    color:#F2AF02;

}

.count-unit{

    margin-top:12px;

    font-size:.72rem;

    letter-spacing:3px;

    color:#8D98A6;

}

/* ==========================================
   WEATHER FORECAST
========================================== */

.weather-card{

    margin:28px auto 40px;
   
    padding-top:24px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

}

.weather-icon{

    font-size:2rem;

}

.weather-temp{

    margin-top:8px;

    font-size:2.5rem;

    font-weight:900;

    color:#F2AF02;

}

.weather-desc{

    margin-top:6px;

    color:#C9CED7;

    font-size:.95rem;

}

.weather-title{

    margin-bottom:10px;

    color:#7F8A99;

    font-size:.72rem;

    letter-spacing:4px;

    font-weight:700;

}

/* ==========================================
   Hero Badge
========================================== */

.hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin:18px auto 20px;

    border-radius:999px;

    font-size:.80rem;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}

/* League */

.hero-badge.league{

    background:#1D7A39;

    color:white;

}

/* Practice */

.hero-badge.practice{

    background:#1D4ED8;

    color:white;

}

/* Tournament */

.hero-badge.tournament{

    background:#C26A00;

    color:white;

}

/* School */

.hero-badge.school{

    background:#4B5563;

    color:white;

}

/* ==========================================
   Venue Card
========================================== */

.venue-card{

    display:block;

    margin:40px auto 0;

    padding:24px;

    max-width:420px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    background:#11161E;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    text-align:center;

    text-decoration:none;

    color:inherit;

    cursor:pointer;

    transition:.25s ease;

}

.venue-card,
.venue-card:visited,
.venue-card:hover,
.venue-card:active{

    text-decoration:none;

    color:inherit;

}

.venue-card:hover{

    transform:translateY(-3px);

    border-color:#F2AF02;

    box-shadow:0 12px 32px rgba(242,175,2,.20);

}

.venue-title{
   
    color:#F2AF02;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:4px;
   margin-bottom:20px;
   text-transform:uppercase;


}

.venue-name{

    color:#FFFFFF;

    font-size:1.35rem;

    font-weight:800;

}

.venue-address{

    margin-top:14px;

    color:#D3D9E3;

}

.venue-city{

    margin-top:6px;

    color:#9FA8B6;

    font-size:.95rem;

}

.venue-action{

    margin-top:22px;

    color:#F2AF02;

    font-weight:700;

    letter-spacing:1px;

}