*{box-sizing:border-box}body{margin:0;background:#f5f7f8;color:#14202b;font:15px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}header{height:72px;background:#fff;border-bottom:1px solid #dfe4e8;padding:0 7%;display:flex;align-items:center;justify-content:space-between}header a{border:1px solid #dfe4e8;border-radius:9px;padding:9px 13px;text-decoration:none;color:#14202b}.brand{display:flex;align-items:center;gap:11px}.brand b{display:block}.brand small{color:#68737d}.mark{background:#14202b;color:#fff;border-radius:9px;padding:11px;font-weight:900}main{max-width:1080px;margin:auto;padding:44px 22px 70px}.hero{display:flex;justify-content:space-between;align-items:end}.eyebrow{font-size:38px;letter-spacing:.15em;font-weight:900;color:#1261a0}.hero h1{font-size:36px;letter-spacing:-.04em;margin:7px 0}.hero p{color:#68737d;font-size:17px}.count{background:#fff;border:1px solid #dfe4e8;border-radius:14px;padding:15px 22px;text-align:center}.count strong{font-size:28px;display:block}.count small{color:#68737d}.filters{background:#fff;border:1px solid #dfe4e8;border-radius:14px;padding:14px;margin:28px 0 16px;display:flex;gap:8px;flex-wrap:wrap}.filters button,.filters select,.filters input,.form input,.form select,.form textarea,.form button,.adminrow button{border:1px solid #dfe4e8;background:#fff;border-radius:8px;padding:9px 11px;font:inherit}.types{display:flex;gap:7px;flex-wrap:wrap}.filters button.active,.form button{background:#14202b;color:#fff;border-color:#14202b}.filters input{min-width:230px}.filters select{min-width:160px}article{display:grid;grid-template-columns:100px 1fr 125px;gap:18px;align-items:center;background:#fff;border:1px solid #dfe4e8;border-radius:13px;padding:17px;margin:9px 0}.date{font-weight:800;color:#1261a0;border-right:1px solid #dfe4e8;padding-right:18px;text-align:center}article h2{font-size:18px;margin:0 0 5px}article p{margin:0;color:#68737d}.tag{font-size:10px;font-weight:900;color:#1261a0;background:#eaf3fa;padding:5px 8px;border-radius:99px;display:inline-block;margin:8px 5px 0 0;letter-spacing:.03em}.tag.sanctioned{background:#e9f5ff;color:#075a8f;border:1px solid #b9ddf4}.tag.gold{color:#875c00;background:#fff4dd}.details{color:#1261a0;text-decoration:none;font-size:15px;font-weight:700}.form{max-width:620px;background:#fff;border:1px solid #dfe4e8;border-radius:14px;padding:20px;display:grid;gap:12px}.form label{display:grid;gap:5px;font-size:12px;font-weight:700;color:#68737d}.form .check{display:flex;align-items:center;gap:7px}.adminrow{background:#fff;border:1px solid #dfe4e8;border-radius:8px;padding:9px 12px;margin:5px 0;display:flex;justify-content:space-between}.adminrow form{margin:0}@media(max-width:650px){.hero{display:block}.count{display:inline-block;margin-top:15px}.hero h1{font-size:35px}article{grid-template-columns:78px 1fr}.details{display:none}}
.event-icon{
    width:24px;
    height:24px;
    object-fit:contain;
    vertical-align:middle;
    margin-right:9px;
}

@media(max-width:650px){
    article{
        grid-template-columns:78px 1fr;
        gap:12px;
    }

    .details{
        display:block;
        grid-column:2;
        font-size:15px;
        padding-top:0;
    }
}
/* ================================
   TrackXCBC.ca Homepage
   ================================ */

.site-header{
    height:72px;
    background:#fff;
    border-bottom:1px solid #dfe4e8;
    padding:0 6%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.header-links{
    display:flex;
    align-items:center;
    gap:12px;
}

.header-title{
    font-size:20px;
    font-weight:800;
    color:#14202b;
}

.site-header nav{
    display:flex;
    gap:10px;
}

.site-header nav a{
    color:#14202b;
    text-decoration:none;
    font-weight:700;
    padding:9px 14px;
    border-radius:8px;
}

.site-header nav a:hover{
    background:#f1f5f8;
}


/* HERO */

.hero-home{
    min-height:500px;
    position:relative;
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 30%,
            rgba(255,255,255,.72) 65%,
            rgba(255,255,255,.97) 100%
        ),
        url("/static/trackxcbc-hero-bg.png");

    background-size:cover;
    background-position:left center;

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

    border-bottom:1px solid #dfe4e8;
}

.hero-content{
    width:min(1050px,92%);
    text-align:center;
    padding:50px 20px;
}

.hero-brand{
    font-size:76px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.055em;
    color:#0d1b3d;
    text-shadow:0 2px 3px rgba(255,255,255,.8);
}

.hero-brand span{
    color:#087cf0;
}

.hero-subtitle{
    margin-top:12px;
    font-size:23px;
    font-weight:950;
    letter-spacing:.015em;
    color:#0d1b3d;
}

.hero-description{
    margin-top:10px;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.02em;
    color:#14202b;
}


/* SEARCH */

.hero-search{
    max-width:700px;
    height:62px;
    margin:28px auto 20px;

    background:#fff;
    border:2px solid #d7e1ea;
    border-radius:34px;

    display:flex;
    align-items:center;
    overflow:hidden;

    box-shadow:0 5px 18px rgba(20,32,43,.12);
}

.search-icon{
    font-size:30px;
    margin-left:20px;
    color:#526170;
}

.hero-search input{
    flex:1;
    border:0;
    outline:0;
    padding:0 16px;
    font-size:17px;
    font-family:inherit;
    background:transparent;
}

.hero-search button{
    height:100%;
    min-width:140px;
    border:0;
    background:#087cf0;
    color:#fff;
    font-size:17px;
    font-weight:800;
    cursor:pointer;
}


/* HERO BUTTONS */

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-top:25px;
}

.event-choice{
    width:330px;
    height:66px;

    border:0;
    border-radius:35px;

    background:#fff;
    color:#0d1b3d;

    display:flex;
    align-items:center;
    gap:14px;

    padding:0 24px;

    font:inherit;
    font-size:18px;
    font-weight:800;

    cursor:pointer;

    box-shadow:0 5px 18px rgba(20,32,43,.15);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.event-choice:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(20,32,43,.2);
}

.choice-icon{
    font-size:25px;
}

.event-choice .arrow{
    margin-left:auto;
    font-size:27px;
    color:#087cf0;
}


/* CALENDAR HEADING */

.calendar-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:20px;
}

.calendar-heading h1{
    margin:6px 0 0;
    font-size:34px;
    letter-spacing:-.04em;
}

.calendar-heading .eyebrow{
    font-size:14px;
    letter-spacing:.12em;
    font-weight:900;
    color:#087cf0;
}


/* MOBILE */

@media(max-width:700px){

    .site-header{
        padding:0 20px;
    }

    .header-title{
        font-size:16px;
    }

    .hero-home{
        min-height:600px;
        background-position:left center;
    }

    .hero-brand{
        font-size:48px;
    }

    .hero-subtitle{
        font-size:17px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-search{
        height:56px;
    }

    .hero-search button{
        min-width:95px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:12px;
    }

    .event-choice{
        width:min(330px,100%);
    }

    .calendar-heading{
        align-items:start;
    }

}
/* TrackXCBC hero typography refinements */

.hero-brand{
    font-family:Helvetica,Arial,sans-serif;
    font-size:82px;
    line-height:1;
    font-weight:900;
    font-style:italic;
    letter-spacing:-.045em;
    color:#0b1b3d;
    text-shadow:
        0 2px 3px rgba(255,255,255,1),
        0 0 10px rgba(255,255,255,.95),
        0 0 20px rgba(255,255,255,.8);
}

.hero-brand span{
    color:#087cf0;
}

.hero-subtitle{
    margin-top:14px;
    font-family:Helvetica,Arial,sans-serif;
    font-size:24px;
    font-weight:900;
    letter-spacing:-.025em;
    color:#071a3c;
    text-shadow:
        0 1px 2px rgba(255,255,255,1),
        0 0 8px rgba(255,255,255,1),
        0 0 16px rgba(255,255,255,.85);
}

.hero-description{
    margin-top:12px;
    font-family:Helvetica,Arial,sans-serif;
    font-size:19px;
    font-weight:700;
    letter-spacing:-.02em;
    color:#071a3c;
    text-shadow:
        0 1px 3px rgba(255,255,255,1),
        0 0 9px rgba(255,255,255,1),
        0 0 18px rgba(255,255,255,.85);
}


/* Slightly stronger background fade behind the text */

.hero-home{
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 25%,
            rgba(255,255,255,.35) 48%,
            rgba(255,255,255,.88) 78%,
            rgba(255,255,255,.97) 100%
        ),
        url("/static/trackxcbc-hero-bg.png");
}


/* Keep the mobile version proportional */

@media(max-width:700px){

    .hero-brand{
        font-size:52px;
    }

    .hero-subtitle{
        font-size:18px;
    }

    .hero-description{
        font-size:16px;
    }

}
/* Hero readability and event icons */

.hero-content{
    position:relative;
    z-index:2;
}

/* Soft white area behind the text as the screen gets narrower */
@media(max-width:900px){

    .hero-home{
        background-position:center center;

        background-image:
            linear-gradient(
                90deg,
                rgba(255,255,255,.82) 0%,
                rgba(255,255,255,.70) 25%,
                rgba(255,255,255,.48) 50%,
                rgba(255,255,255,.20) 75%,
                rgba(255,255,255,.05) 100%
            ),
            url("/static/trackxcbc-hero-bg.png");
    }

    .hero-content{
        background:rgba(255,255,255,.20);
        border-radius:24px;
        padding:45px 25px;
    }
}


/* Actual TrackXCBC event icons */

.event-choice .choice-icon{
    width:30px;
    height:30px;
    object-fit:contain;
    flex-shrink:0;
}


/* Slightly larger icons on desktop */

@media(min-width:701px){
    .event-choice .choice-icon{
        width:32px;
        height:32px;
    }
}
/* Compact meet status badges */

.tag{
    font-size:9px;
    font-weight:900;
    padding:4px 7px;
    border-radius:99px;
    display:inline-block;
    margin:6px 3px 0 0;
    letter-spacing:.02em;
    line-height:1;
    white-space:nowrap;
}

.tag.sanctioned{
    background:#e9f5ff;
    color:#075a8f;
    border:1px solid #b9ddf4;
}

.tag.gold{
    color:#875c00;
    background:#fff4dd;
    border:1px solid #f0d79d;
}

/* Give the status area a little more room */
article{
    grid-template-columns:100px minmax(0,1fr) 145px;
}

/* Keep badges together neatly */
article > div:nth-child(2) > div{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:3px;
}
/* Final five-column meet layout */

#list article{
    grid-template-columns:
        145px
        minmax(240px,2fr)
        minmax(150px,1.25fr)
        minmax(150px,1fr)
        minmax(160px,1.15fr)
        25px;
}

#list .meet-name{
    min-width:0;
}

#list .meet-name h2{
    margin:0;
    color:#087cf0;
    font-size:16px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#list .location{
    color:#14202b;
    font-size:15px;
}

#list .event-type{
    display:flex;
    align-items:center;
    gap:8px;
    color:#14202b;
    font-size:15px;
    white-space:nowrap;
}

#list .event-icon{
    width:24px;
    height:24px;
    object-fit:contain;
    margin:0;
}

#list .status{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:3px;
}

#list .details{
    display:block;
    font-size:0;
    text-align:right;
}

#list .details::after{
    content:"→";
    font-size:23px;
    font-weight:700;
    color:#087cf0;
}

@media(max-width:900px){

    #list article{
        grid-template-columns:90px minmax(0,1fr) 25px;
        gap:10px;
    }

    #list .meet-name{
        grid-column:2;
    }

    #list .location,
    #list .event-type,
    #list .status{
        grid-column:2;
    }

    #list .details{
        grid-column:3;
        grid-row:1 / span 4;
        align-self:center;
    }

    #list .meet-name h2{
        white-space:normal;
    }

    #list .location,
    #list .event-type{
        font-size:14px;
    }
}
/* Final meet table proportions */

#list article{
    grid-template-columns:
        105px
        minmax(320px,3fr)
        minmax(140px,1.1fr)
        minmax(145px,1fr)
        minmax(150px,1.1fr);
}

/* Meet name is now the website link */

#list .meet-link{
    color:#087cf0;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
}

#list .meet-link:hover{
    text-decoration:underline;
}

/* Remove the old arrow column */

#list .details{
    display:none;
}

/* Slightly tighter date */

#list .date{
    font-size:14px;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
}

/* Give the meet name plenty of room */

#list .meet-name{
    min-width:0;
}

#list .meet-name .meet-link{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Mobile meet layout */

@media(max-width:650px){

    #list article{
        display:grid;
        grid-template-columns:65px minmax(0,1fr);
        gap:6px 8px;
        align-items:start;
        padding:15px;
    }

    /* Date */

    #list .date{
        grid-column:1;
        grid-row:1 / span 4;
        text-align:center;
        font-size:13px;
        line-height:1.25;
        white-space:normal;
    }

    /* Meet name */

    #list .meet-name{
        grid-column:2;
        grid-row:1;
        min-width:0;
    }

    #list .meet-name .meet-link{
        display:block;
        font-size:15px;
        line-height:1.25;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
    }

    /* Location */

    #list .location{
        grid-column:2;
        grid-row:2;
        font-size:13px;
        color:#526170;
    }

    /* Event type */

    #list .event-type{
        grid-column:2;
        grid-row:3;
        font-size:13px;
        gap:6px;
    }

    #list .event-icon{
        width:20px;
        height:20px;
    }

    /* Status */

    #list .status{
        grid-column:2;
        grid-row:4;
        width:115px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:3px;
    }

    #list .status .tag{
        margin:0;
    }

    /* Hide desktop arrow */

    #list .details{
        display:none;
    }
}
/* Final meet table layout */

#list article{
    grid-template-columns:
        105px
        minmax(0,1fr)
        120px
        140px
        110px;
}

/* Status badges */

#list .status{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    width:115px;
}

#list .status .tag{
    margin:0;
    flex:0 0 auto;
}
/* Mobile search bar fix */
@media (max-width:650px){
    .hero-search{
        width:100%;
        box-sizing:border-box;
    }

    .hero-search input{
        min-width:0;
        flex:1;
    }

    .hero-search button{
        flex:0 0 105px;
        width:105px;
        min-width:105px;
        white-space:nowrap;
    }
}
/* Final responsive meet card layout */
@media (max-width:900px){

    #list article{
        display:grid;
        grid-template-columns:90px minmax(0,1fr);
        gap:8px 12px;
        align-items:start;
        padding:18px;
    }

    /* Date */
    #list .date{
        grid-column:1;
        grid-row:1 / span 4;
        text-align:center;
        font-size:14px;
        line-height:1.25;
        white-space:nowrap;
    }

    /* Meet name */
    #list .meet-name{
        grid-column:2;
        grid-row:1;
        min-width:0;
    }

    #list .meet-name .meet-link{
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
        white-space:normal;
        line-height:1.25;
    }

    /* Location */
    #list .location{
        grid-column:2;
        grid-row:2;
        min-width:0;
        line-height:1.3;
    }

    /* Event type */
    #list .event-type{
        grid-column:2;
        grid-row:3;
        min-width:0;
        line-height:1.3;
    }

    /* Status */
    #list .status{
        grid-column:2;
        grid-row:4;
        width:115px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
    }

    #list .status .tag{
        margin:0;
    }

    /* No desktop arrow */
    #list .details{
        display:none;
    }
}

/* Extra-tight phone layout */
@media (max-width:650px){

    #list article{
        grid-template-columns:78px minmax(0,1fr);
        gap:7px 10px;
        padding:18px 14px;
    }

    #list .date{
        font-size:13px;
    }

    #list .meet-name .meet-link{
        -webkit-line-clamp:2;
    }

    #list .location,
    #list .event-type{
        font-size:15px;
    }
}