/*
|--------------------------------------------------------------------------
| Chapel Baseball LMS - Team Theme + Accessibility
|--------------------------------------------------------------------------
| Team-inspired blue / black / white palette.
| Load AFTER style.css and wide-layout.css.
|--------------------------------------------------------------------------
*/

:root {
    --chapel-navy: #003B71;
    --chapel-blue: #0067B1;
    --chapel-light-blue: #7BAFD4;

    --chapel-black: #0B0B0C;
    --chapel-dark: #17212B;

    --chapel-white: #FFFFFF;
    --chapel-off-white: #F7F9FB;
    --chapel-background: #F3F6F9;

    --chapel-border: #DCE6EE;
    --chapel-muted: #667788;

    --chapel-success: #198754;
    --chapel-danger: #B42318;

    --chapel-focus: #7BAFD4;
    --chapel-focus-dark: #003B71;

    --chapel-shadow:
        0 4px 14px rgba(0, 35, 70, 0.10);

    --chapel-radius:
        18px;
}


/*
|--------------------------------------------------------------------------
| Page
|--------------------------------------------------------------------------
*/

body {
    background: var(--chapel-background);
    color: var(--chapel-dark);
}

.site-wrapper {
    background: var(--chapel-white);

    border-radius:
        var(--chapel-radius);

    box-shadow:
        var(--chapel-shadow);
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header {
    position: relative;

    width: 100%;
    box-sizing: border-box;

    padding:
        20px 28px;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #080A0D 0%,
            #071B2C 48%,
            var(--chapel-navy) 100%
        );

    color:
        var(--chapel-white);

    border-bottom:
        5px solid var(--chapel-blue);

    border-radius:
        var(--chapel-radius)
        var(--chapel-radius)
        0
        0;
}

.site-header::before {
    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 300px;
    height: 300px;

    border:
        45px solid rgba(123, 175, 212, 0.07);

    border-radius:
        50%;

    pointer-events:
        none;
}

.site-header::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.15);

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| Header Brand
|--------------------------------------------------------------------------
*/

.site-brand {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap:
        12px;

    width:
        100%;
}

.site-brand-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/*
|--------------------------------------------------------------------------
| Chapel C Logo
|--------------------------------------------------------------------------
| Fixed at exactly 100px x 100px at all breakpoints.
|--------------------------------------------------------------------------
*/

.site-logo-link {
    display: flex;

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

    flex:
        0 0 100px;

    width:
        100px;

    height:
        100px;

    line-height:
        0;

    border-radius:
        4px;

    text-decoration:
        none;
}

.site-logo {
    display: block;

    width:
        100px !important;

    height:
        100px !important;

    min-width:
        100px !important;

    min-height:
        100px !important;

    max-width:
        100px !important;

    max-height:
        100px !important;

    object-fit:
        contain;

    flex-shrink:
        0;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.site-logo-link:hover .site-logo {
    transform:
        none;

    filter:
        drop-shadow(
            0 0 5px rgba(123, 175, 212, 0.4)
        );
}


/*
|--------------------------------------------------------------------------
| Team Title
|--------------------------------------------------------------------------
*/

.site-title {
    display: flex;

    align-items: baseline;
    flex-wrap: wrap;

    gap:
        0 10px;

    margin:
        0;

    color:
        var(--chapel-white);

    font-family:
        Impact,
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size:
        clamp(2rem, 4vw, 3.25rem);

    font-weight:
        900;

    line-height:
        0.95;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.35);
}

.site-title-chapel {
    color:
        var(--chapel-white);
}

.site-title-baseball {
    color:
        var(--chapel-light-blue);
}

.site-tagline {
    display:
        inline-block;

    width:
        fit-content;

    margin:
        8px 0 0 1px;

    padding:
        3px 9px;

    background:
        rgba(0, 103, 177, 0.20);

    border-left:
        3px solid var(--chapel-light-blue);

    color:
        #E8F2F8;

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        1.8px;

    line-height:
        1.4;

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.nav-wrapper {
    position:
        relative;

    background:
        linear-gradient(
            90deg,
            var(--chapel-black) 0%,
            #111820 50%,
            var(--chapel-black) 100%
        );

    border-bottom:
        1px solid rgba(123, 175, 212, 0.3);
}

.main-nav {
    background:
        transparent;
}

.main-nav a {
    position:
        relative;

    color:
        var(--chapel-white);

    font-size:
        0.9rem;

    font-weight:
        700;

    letter-spacing:
        0.3px;

    text-transform:
        uppercase;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.main-nav a:hover {
    background:
        var(--chapel-navy);

    color:
        var(--chapel-white);
}

.main-nav a.active,
.main-nav a[aria-current="page"] {
    background:
        var(--chapel-blue);

    color:
        var(--chapel-white);

    box-shadow:
        inset 0 -4px 0 var(--chapel-light-blue);
}

.nav-toggle {
    background:
        var(--chapel-black);

    color:
        var(--chapel-white);
}

.nav-toggle:hover {
    background:
        var(--chapel-navy);
}

.nav-toggle-icon {
    color:
        var(--chapel-light-blue);
}


/*
|--------------------------------------------------------------------------
| Main Content + Links
|--------------------------------------------------------------------------
*/

main {
    background:
        var(--chapel-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--chapel-navy);
}

a {
    color:
        var(--chapel-blue);
}

a:hover {
    color:
        var(--chapel-navy);
}

.page-heading p {
    color:
        var(--chapel-muted);
}


/*
|--------------------------------------------------------------------------
| Cards / Panels
|--------------------------------------------------------------------------
*/

.card,
.panel,
.dashboard-card,
.admin-card,
.profile-card,
.content-card {
    background:
        var(--chapel-white);

    border-color:
        var(--chapel-border);

    box-shadow:
        0 2px 8px rgba(0, 35, 70, 0.08);
}

.card-header,
.panel-header {
    background:
        var(--chapel-navy);

    color:
        var(--chapel-white);

    border-bottom:
        4px solid var(--chapel-light-blue);
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

button,
.button,
.btn,
input[type="submit"],
input[type="button"] {
    background:
        var(--chapel-blue);

    color:
        var(--chapel-white);

    border-color:
        var(--chapel-blue);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.1s ease,
        box-shadow 0.2s ease;
}

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background:
        var(--chapel-navy);

    border-color:
        var(--chapel-navy);

    color:
        var(--chapel-white);
}

button:active,
.button:active,
.btn:active {
    transform:
        translateY(1px);
}

.btn-secondary,
.button-secondary {
    background:
        var(--chapel-black);

    border-color:
        var(--chapel-black);

    color:
        var(--chapel-white);
}

.btn-secondary:hover,
.button-secondary:hover {
    background:
        var(--chapel-dark);

    border-color:
        var(--chapel-dark);

    color:
        var(--chapel-white);
}

.btn-light,
.button-light {
    background:
        var(--chapel-light-blue);

    border-color:
        var(--chapel-light-blue);

    color:
        var(--chapel-black);
}

.btn-light:hover,
.button-light:hover {
    background:
        var(--chapel-blue);

    border-color:
        var(--chapel-blue);

    color:
        var(--chapel-white);
}

.btn-danger,
.button-danger,
.delete-button {
    background:
        var(--chapel-danger);

    border-color:
        var(--chapel-danger);

    color:
        var(--chapel-white);
}

.btn-danger:hover,
.button-danger:hover,
.delete-button:hover {
    background:
        #8C1C13;

    border-color:
        #8C1C13;

    color:
        var(--chapel-white);
}


/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

input,
select,
textarea {
    background:
        var(--chapel-white);

    color:
        var(--chapel-dark);

    border-color:
        #B8C7D3;
}

label {
    color:
        var(--chapel-dark);
}


/*
|--------------------------------------------------------------------------
| Tables
|--------------------------------------------------------------------------
*/

table {
    background:
        var(--chapel-white);
}

thead {
    background:
        var(--chapel-navy);

    color:
        var(--chapel-white);
}

thead th {
    color:
        var(--chapel-white);

    border-color:
        rgba(255, 255, 255, 0.15);
}

tbody tr:nth-child(even) {
    background:
        var(--chapel-off-white);
}

tbody tr:hover {
    background:
        #EAF4FA;
}

td,
th {
    border-color:
        var(--chapel-border);
}


/*
|--------------------------------------------------------------------------
| Messages / Alerts
|--------------------------------------------------------------------------
*/

.message,
.notice,
.info-box,
.alert-info {
    background:
        #EAF4FA;

    border-left:
        5px solid var(--chapel-blue);

    color:
        var(--chapel-dark);
}

.success,
.alert-success {
    background:
        #EAF7EF;

    border-left:
        5px solid var(--chapel-success);

    color:
        #17492D;
}

.error,
.alert-error,
.alert-danger {
    background:
        #FFF0EF;

    border-left:
        5px solid var(--chapel-danger);

    color:
        #6F1B16;
}


/*
|--------------------------------------------------------------------------
| Profile Images / Avatars
|--------------------------------------------------------------------------
*/

.profile-photo,
.profile-thumbnail,
.user-avatar {
    background:
        var(--chapel-off-white);

    border:
        3px solid var(--chapel-light-blue);
}


/*
|--------------------------------------------------------------------------
| Generic Pagination
|--------------------------------------------------------------------------
*/

.pagination a,
.pagination span {
    background:
        var(--chapel-white);

    color:
        var(--chapel-navy);

    border:
        1px solid var(--chapel-border);
}

.pagination a:hover {
    background:
        var(--chapel-light-blue);

    border-color:
        var(--chapel-light-blue);

    color:
        var(--chapel-black);
}

.pagination .active,
.pagination .current {
    background:
        var(--chapel-blue);

    border-color:
        var(--chapel-blue);

    color:
        var(--chapel-white);
}


/*
|--------------------------------------------------------------------------
| Existing Admin User Page Color Alignment
|--------------------------------------------------------------------------
| admin_users.php currently contains page-level CSS loaded after these files.
| !important is used only here so its older blue values still match the team
| palette without requiring that PHP file to be edited right now.
|--------------------------------------------------------------------------
*/

.admin-users-button {
    background:
        var(--chapel-blue) !important;

    border-color:
        var(--chapel-blue) !important;

    color:
        var(--chapel-white) !important;
}

.admin-users-button:hover {
    background:
        var(--chapel-navy) !important;

    border-color:
        var(--chapel-navy) !important;

    color:
        var(--chapel-white) !important;
}

.admin-users-button-secondary {
    background:
        var(--chapel-white) !important;

    border-color:
        var(--chapel-border) !important;

    color:
        var(--chapel-navy) !important;
}

.admin-users-button-secondary:hover {
    background:
        #EAF4FA !important;

    border-color:
        var(--chapel-light-blue) !important;

    color:
        var(--chapel-navy) !important;
}

.admin-page-link-current {
    background:
        var(--chapel-blue) !important;

    border-color:
        var(--chapel-blue) !important;

    color:
        var(--chapel-white) !important;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
    background:
        var(--chapel-black);

    color:
        #CDD8E0;

    border-top:
        5px solid var(--chapel-blue);

    border-radius:
        0
        0
        var(--chapel-radius)
        var(--chapel-radius);
}

.site-footer a {
    color:
        var(--chapel-light-blue);
}

.site-footer a:hover {
    color:
        var(--chapel-white);
}


/*
|--------------------------------------------------------------------------
| Accessible Keyboard Focus
|--------------------------------------------------------------------------
| The focus ring intentionally remains visible for keyboard navigation.
|--------------------------------------------------------------------------
*/

a:focus-visible,
button:focus-visible,
.button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline:
        3px solid var(--chapel-focus);

    outline-offset:
        3px;
}


/*
|--------------------------------------------------------------------------
| Header Logo Focus
|--------------------------------------------------------------------------
*/

.site-logo-link:focus-visible {
    outline:
        3px solid var(--chapel-light-blue);

    outline-offset:
        4px;

    background:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 2px var(--chapel-black);
}


/*
|--------------------------------------------------------------------------
| Navigation Focus
|--------------------------------------------------------------------------
*/

.main-nav a:focus-visible {
    outline:
        3px solid var(--chapel-light-blue);

    outline-offset:
        -3px;

    background:
        var(--chapel-navy);

    color:
        var(--chapel-white);

    box-shadow:
        inset 0 0 0 2px var(--chapel-white);
}


/*
|--------------------------------------------------------------------------
| Mobile Navigation Toggle Focus
|--------------------------------------------------------------------------
| The hidden checkbox receives keyboard focus; the visible label reflects it.
|--------------------------------------------------------------------------
*/

.nav-toggle-control:focus-visible + .nav-toggle {
    outline:
        3px solid var(--chapel-light-blue);

    outline-offset:
        -3px;

    background:
        var(--chapel-navy);

    color:
        var(--chapel-white);

    box-shadow:
        inset 0 0 0 2px var(--chapel-white);
}


/*
|--------------------------------------------------------------------------
| Button Focus
|--------------------------------------------------------------------------
*/

button:focus-visible,
.button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.admin-users-button:focus-visible,
.admin-page-link:focus-visible {
    outline:
        3px solid var(--chapel-light-blue) !important;

    outline-offset:
        3px;

    box-shadow:
        0 0 0 2px var(--chapel-white),
        0 0 0 5px var(--chapel-navy);
}


/*
|--------------------------------------------------------------------------
| Form Focus
|--------------------------------------------------------------------------
*/

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid var(--chapel-blue);

    outline-offset:
        2px;

    border-color:
        var(--chapel-navy);

    box-shadow:
        0 0 0 2px var(--chapel-white);
}


/*
|--------------------------------------------------------------------------
| Text Selection
|--------------------------------------------------------------------------
*/

::selection {
    background:
        var(--chapel-light-blue);

    color:
        var(--chapel-black);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .site-header {
        padding:
            18px 22px;
    }

    .site-brand {
        gap:
            11px;
    }

    .site-logo-link,
    .site-logo {
        width:
            100px;

        height:
            100px;

        min-width:
            100px;

        min-height:
            100px;

        max-width:
            100px;

        max-height:
            100px;
    }

    .site-title {
        font-size:
            clamp(1.8rem, 6vw, 2.7rem);

        letter-spacing:
            1px;

        gap:
            0 8px;
    }

    .site-tagline {
        margin-top:
            7px;

        font-size:
            0.72rem;

        letter-spacing:
            1.4px;
    }
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .site-header {
        padding:
            14px 16px;

        border-bottom-width:
            4px;
    }

    .site-brand {
        gap:
            10px;
    }

    .site-logo-link,
    .site-logo {
        width:
            100px;

        height:
            100px;

        min-width:
            100px;

        min-height:
            100px;

        max-width:
            100px;

        max-height:
            100px;
    }

    .site-title {
        display:
            block;

        font-size:
            clamp(1.5rem, 8vw, 2rem);

        line-height:
            0.95;

        letter-spacing:
            0.5px;
    }

    .site-title-chapel,
    .site-title-baseball {
        display:
            inline;
    }

    .site-title-baseball {
        margin-left:
            4px;
    }

    .site-tagline {
        margin-top:
            6px;

        padding:
            2px 6px;

        border-left-width:
            3px;

        font-size:
            0.62rem;

        letter-spacing:
            0.9px;
    }

    .site-header::before {
        display:
            none;
    }
}


/*
|--------------------------------------------------------------------------
| Very Small Phones
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {

    .site-header {
        padding:
            12px 14px;
    }

    .site-brand {
        gap:
            9px;
    }

    .site-logo-link,
    .site-logo {
        width:
            100px;

        height:
            100px;

        min-width:
            100px;

        min-height:
            100px;

        max-width:
            100px;

        max-height:
            100px;
    }

    .site-title {
        font-size:
            1.35rem;
    }

    .site-tagline {
        margin-top:
            5px;

        font-size:
            0.56rem;

        letter-spacing:
            0.6px;
    }
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

    .site-logo-link:hover .site-logo {
        transform:
            none;
    }

    button:active,
    .button:active,
    .btn:active {
        transform:
            none;
    }
}


/*
|--------------------------------------------------------------------------
| High Contrast / Forced Colors
|--------------------------------------------------------------------------
| Allows the browser/OS to supply system colors where appropriate.
|--------------------------------------------------------------------------
*/

@media (forced-colors: active) {

    .site-logo-link,
    .main-nav a,
    .nav-toggle,
    button,
    .button,
    .btn,
    input,
    select,
    textarea {
        forced-color-adjust:
            auto;
    }
}