/* ==== Base Reset / Typography ======================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    background: #0f172a;            /* deep slate */
    color: #e5e7eb;                 /* light gray text */
    line-height: 1.6;
}

/* ==== Layout ======================================================== */

#container,
main#container {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Optional old #content wrapper support */
#content {
    width: 100%;
}

/* ==== Heading ======================================================= */

h1 {
    margin: 0 0 1.5rem;
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f9fafb;
}

/* ==== Link List ===================================================== */

/* New structure: <ul class="link-list"><li><a>… */
.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Fallback for old structure: plain <a> tags inside #content or #container */
#content > a,
#container > a {
    display: block;
    margin-bottom: 0.75rem;
}

/* Shared link styling */
.link-list a,
#content > a,
#container > a {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    background: rgba(15, 23, 42, 0.85); /* slightly darker panel */
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #e5e7eb;
    font-size: 0.95rem;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.12s ease,
        box-shadow 0.18s ease;
}

/* First letters capitalized look nicer */
.link-list a,
#content > a,
#container > a {
    text-transform: none;
}

/* Hover / focus states */
.link-list a:hover,
.link-list a:focus-visible,
#content > a:hover,
#content > a:focus-visible,
#container > a:hover,
#container > a:focus-visible {
    background: #1f2937;
    border-color: #38bdf8;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.45);
   transform: scale(1.20);
    outline: none;
}

/* Active (mouse down) */
.link-list a:active,
#content > a:active,
#container > a:active {
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.6);
}


/* Small “chip” style for internal pages if you want them different
   (example: FFRoster.html) */
a[href$="FFRoster.html"] {
    border-style: dashed;
}

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

@media (min-width: 768px) {
    #container,
    main#container {
        padding-top: 4rem;
    }

    .link-list {
        max-width: 600px;
    }
}
/* ==== Header Bar ==================================================== */

.site-header {
    background: #1e293b;  /* dark slate */
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #f8fafc; /* near white */
    text-transform: uppercase;
    user-select: none;
}