/*
|--------------------------------------------------------------------------
| Strikeshot Web Services - Modern Dark Theme
|--------------------------------------------------------------------------
|
| Visual styling for the Modern Dark theme. Shared layout and spacing
| live in /assets/css/base.css.
|
*/

:root {
    --bg: #0b0d11;

    --surface: #12161d;
    --surface-2: #181d26;
    --surface-3: #202632;

    --text: #f5f7fb;
    --muted: #b7c0ce;

    --border: rgba(255, 255, 255, 0.08);
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.30);

    --radius: 20px;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.site-header {
    background: rgba(11, 13, 17, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.brand-mark {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #ff6868);
    color: #fff;
    font-family: "Oswald", Arial, sans-serif;
    box-shadow: var(--shadow);
}

.brand span {
    color: var(--muted);
}

.site-nav a {
    color: #e7edf8;
}

.site-nav a:hover,
.text-link:hover {
    color: var(--primary);
}

.nav-cta,
.btn {
    border-radius: 999px;
    font-weight: 700;
}

.nav-cta,
.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
}

.hero {
    border-bottom: 1px solid var(--border);
}

.eyebrow {
    font-weight: 800;
    color: var(--primary);
}

.hero h1,
.section-heading h2,
.content-card h3,
.list-card h3,
.feature-card h3,
.contact-section h2 {
    font-family: "Oswald", Arial, sans-serif;
}

.hero-text {
    color: #dce4ef;
}

.hero-meta span,
.pill {
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    color: #eaf0f9;
}

.hero-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow);
}

.hero-card-label {
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: var(--muted);
}

.hero-card p {
    color: #d5deea;
}

.bullet-list,
.mini-list {
    color: var(--muted);
}

.feature-card,
.content-card,
.hours-card,
.list-card,
.contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.feature-kicker {
    color: var(--primary);
    font-weight: 800;
}

.feature-card p {
    color: var(--muted);
}

.alt-section {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.section-heading p:last-child {
    color: var(--muted);
}

.hours-card span {
    color: var(--muted);
}

.content-card p {
    color: var(--muted);
}

.price {
    font-weight: 800;
    color: #fff;
}

.price small {
    color: var(--muted);
    font-weight: 600;
}

.list-card p {
    color: var(--muted);
}

.list-meta span {
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.event-date {
    color: var(--primary);
    font-weight: 800;
}

.event-time {
    color: #e8eef8;
    font-weight: 700;
}

.text-link {
    color: #fff;
    font-weight: 700;
}

.contact-copy {
    color: var(--muted);
}

.contact-item + .contact-item {
    border-top: 1px solid var(--border);
}

.contact-item a,
.contact-item span {
    color: var(--muted);
}

.site-footer {
    border-top: 1px solid var(--border);
}

.footer-wrap p,
.footer-note {
    color: var(--muted);
}

.directions-button {
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.directions-button:hover {
    opacity: 0.9;
}

.pricing-note {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-weight: 600;
}

.shoe-price {
    color: var(--muted);
}

.shoe-price strong {
    color: var(--text);
}

.section-note {
    color: var(--muted);
}

.league-contact {
    color: var(--muted);
}

.league-contact a {
    color: #fff;
}

.league-register-button {
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.party-inclusions {
    color: var(--muted);
}

.party-extra {
    border-top: 1px solid var(--border);
    color: var(--muted);
}

.party-book-button {
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
}

.event-location {
    color: var(--muted);
}

.event-time {
    color: #fff;
    font-weight: 700;
}

.event-button {
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.announcement-banner {
    background: linear-gradient(
            135deg,
            var(--primary),
            color-mix(
                in srgb,
                var(--primary) 78%,
                #000
            )
        );
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.announcement-label {
    font-weight: 800;
    opacity: 0.8;
}

.announcement-banner h2 {
    font-family: "Oswald", sans-serif;
}

.announcement-button {
    background: #fff;
    color: #111;
    border-radius: 999px;
    font-weight: 800;
}

.gallery-section {
    background: linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0)
        );
}

.gallery-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.gallery-item figcaption {
    color: var(--muted);
}

.brand .brand-mark {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #ff6868);
    color: #fff;
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 700;
    box-shadow: var(--shadow);
}