/* ---------- Iron Legends brand palette ---------- */
:root {
    /* Primary */
    --il-black:       #0A0A0A;   /* Legends Black */
    --il-green:       #1D3B2A;   /* Tournament Green */
    --il-white:       #F7F7F7;   /* Pure White */

    /* Secondary */
    --il-steel:       #2E3338;
    --il-smoke:       #7A8087;
    --il-stone:       #C9C8C2;
    --il-navy:        #0F1E3A;
    --il-gold:        #B79B5A;   /* Heritage Gold */

    /* Accent */
    --il-fairway:     #2E7D32;   /* under par / good */
    --il-orange:      #D35400;
    --il-blue:        #4C94C3;
    --il-red:         #8B1E1E;   /* over par / bad */

    /* Derived */
    --il-green-soft:  #E6EDE8;
    --il-gold-hover:  #C9AD6B;
    --il-text:        #1A1F1C;
    --il-muted:       #6B7270;
    --il-radius:      16px;
    --il-shadow:      0 6px 18px rgba(10, 10, 10, 0.10);
}

/* ---------- Base ---------- */
html, body {
    background: var(--il-white);
    color: var(--il-text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.has-bottomnav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

a { color: var(--il-green); }

.il-main {
    max-width: 560px;
    padding-top: 20px;
    padding-bottom: 32px;
}

/* ---------- Top bar ---------- */
.il-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: var(--il-green);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.il-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 26px;
    letter-spacing: 1.5px;
    color: #fff;
    text-decoration: none;
    line-height: 1;
}

.il-brand-mark {
    height: 32px;
    width: auto;
}

.il-brand:hover { color: var(--il-gold); }

.il-topbar-link {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.il-topbar-link:hover { color: var(--il-gold); }

/* ---------- Headings ---------- */
.il-page-title {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 34px;
    letter-spacing: 1px;
    color: var(--il-green);
    margin: 4px 0 16px;
}

/* ---------- Cards ---------- */
.il-card {
    background: #fff;
    border-radius: var(--il-radius);
    padding: 20px;
    box-shadow: var(--il-shadow);
}

.il-card-title {
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 24px;
    letter-spacing: 1px;
    color: var(--il-green);
    margin-bottom: 12px;
}

/* ---------- Hero (home) ---------- */
.il-hero {
    background: linear-gradient(170deg, var(--il-black) 0%, var(--il-green) 100%);
    color: #fff;
    border-radius: var(--il-radius);
    padding: 28px 22px 24px;
    box-shadow: var(--il-shadow);
    text-align: center;
}

.il-hero-logo {
    width: 72%;
    max-width: 300px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

.il-hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,0.88);
    margin-bottom: 22px;
}

.il-hero a { color: var(--il-gold); }

.il-steps {
    padding-left: 20px;
    margin-bottom: 0;
}

.il-steps li { margin-bottom: 8px; }

/* ---------- Buttons ---------- */
.il-btn-primary {
    background: var(--il-gold);
    color: var(--il-black);
    font-weight: 700;
    border: none;
    border-radius: 12px;
}

.il-btn-primary:hover,
.il-btn-primary:focus {
    background: var(--il-gold-hover);
    color: var(--il-black);
}

.il-btn-outline {
    background: transparent;
    color: #fff;
    font-weight: 600;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 12px;
}

.il-btn-outline:hover,
.il-btn-outline:focus {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: #fff;
}

/* ---------- Forms ---------- */
.form-control {
    border-radius: 12px;
    border-color: var(--il-stone);
}

.form-control:focus {
    border-color: var(--il-green);
    box-shadow: 0 0 0 0.25rem rgba(29, 59, 42, 0.18);
}

.form-label {
    font-weight: 600;
    font-size: 14px;
}

/* ---------- Alerts ---------- */
.il-alert {
    border-radius: 12px;
    border: none;
}

/* ---------- Score colors (for later) ---------- */
.il-under { color: var(--il-fairway); font-weight: 700; }
.il-even  { color: var(--il-steel);   font-weight: 700; }
.il-over  { color: var(--il-red);     font-weight: 700; }

/* ---------- Bottom nav ---------- */
.il-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid var(--il-stone);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}

.il-bottomnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--il-smoke);
    text-decoration: none;
}

.il-bottomnav a.active { color: var(--il-green); }

.il-bottomnav a.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.il-ico {
    font-size: 20px;
    line-height: 1;
}