/* Sport Hub - Custom CSS overrides */
/* Tailwind CDN handles most styling; this file for custom utilities */

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* === Teal Refresh palette variables === */
:root {
    --color-primary: #50A5B1;   /* Teal */
    --color-accent:  #F1600D;   /* Orange-red */
    --color-navy:    #1A265A;   /* Deep navy */
}

/* Badge color helpers */
.badge-competitive { background-color: var(--color-primary); }
.badge-friendly    { background-color: #10b981; }
.badge-casual      { background-color: #f59e0b; }

/* Availability dot */
.dot-available { background-color: #10b981; }
.dot-limited   { background-color: #f59e0b; }
.dot-full      { background-color: #ef4444; }

/* =============================================
   SPORT THEME UTILITIES
   ============================================= */

/* Section heading with teal-refresh left accent */
.sport-section-heading {
    border-left: 3px solid var(--color-primary);
    padding-left: 0.75rem;
}

/* Sport category badges */
.badge-badminton { background-color: var(--color-accent); color: white; }
.badge-football  { background-color: #16a34a; color: white; }
.badge-tennis    { background-color: var(--color-primary); color: white; }
.badge-pingpong  { background-color: #7c3aed; color: white; }

/* Stats counter number style */
.stat-number {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Sport card left hover accent */
.sport-card {
    border-left: 3px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sport-card:hover {
    border-left-color: var(--color-primary);
}

/* =============================================
   MOBILE OPTIMIZATIONS (M6–M8)
   ============================================= */

/* M6: Minimum touch target size on mobile */
@media (max-width: 1023px) {
    button, a, [role="button"], select, input[type="submit"], input[type="button"] {
        min-height: 44px;
    }
    /* Inputs: add comfortable padding for thumbs */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    textarea, select {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
    /* Checkbox / radio labels: ensure 44px tap area */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* M7: Typography scale for mobile */
@media (max-width: 639px) {
    .hero-title { font-size: 1.875rem; line-height: 1.2; }
}
@media (min-width: 640px) {
    .hero-title { font-size: 3rem; }
}
@media (min-width: 1024px) {
    .hero-title { font-size: 3.75rem; }
}

/* M8: Dynamic viewport height utility */
.h-screen-dynamic { height: 100svh; }
.min-h-screen-dynamic { min-height: 100svh; }

/* Bottom nav safe area — already in _Layout.cshtml, kept here as fallback */
.safe-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}