/**
 * Module: Unified Club Directory & Instant Search
 *
 * Notes:
 * - Search bar inherits theme styles but uses CSS SVG backgrounds for the icon.
 * - Use [chc_club_search theme="light"] for dark backgrounds (e.g. Navy).
 * - Use [chc_club_search theme="dark"] for light backgrounds (e.g. White).
 * - Grid maintains a 5:6 image aspect ratio and scales 4 -> 3 -> 2 columns.
 */

/* --- 1. HERO SEARCH BAR (Standalone) --- */
.chc-hero-search-wrapper {
    width: 100%;
    margin: 0 auto;
}

.chc-hero-search-wrapper input#chc-club-search-input {
    width: 100% !important;
    box-sizing: border-box !important; /* Fixes Gutenberg container overflow */
    font-size: 18px !important;
    padding-left: 50px !important; 
    background-repeat: no-repeat !important;
    background-position: 15px center !important;
    background-size: 22px 22px !important;
}

/* Light Theme (For dark/navy backgrounds) */
.chc-search-light input#chc-club-search-input {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') !important;
}

.chc-search-light input#chc-club-search-input::placeholder {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* Dark Theme (For light/white backgrounds) */
.chc-search-dark input#chc-club-search-input {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.4) !important;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') !important;
}

.chc-search-dark input#chc-club-search-input::placeholder {
    color: #000000 !important;
    opacity: 0.8 !important;
}

/* --- 2. DIRECTORY GRID --- */
.chc-directory-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 4-Column Responsive Grid */
.chc-clubs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 991px) { .chc-clubs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .chc-clubs-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } }

/* --- 3. CLUB CARDS --- */
.chc-club-card {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease;
}

.chc-club-card:hover {
    transform: translateY(-5px);
}

.chc-club-image-wrapper {
    width: 100%;
    aspect-ratio: 5 / 6; 
    overflow: hidden;
    margin-bottom: 15px;
    background: transparent;
}

.chc-club-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chc-club-title-text {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: #111;
}

/* --- 4. SECTION TITLES --- */
.chc-sport-section { 
    margin-bottom: 70px; 
}

h2.chc-nested-shop-title {
    display: flex; 
    align-items: center; 
    text-align: center;
    font-size: 32px; 
    font-weight: 800; 
    text-transform: uppercase;
    margin-top: 20px; 
    margin-bottom: 30px; 
    color: #111; 
}

h2.chc-nested-shop-title::before, 
h2.chc-nested-shop-title::after {
    content: ""; 
    flex: 1; 
    border-bottom: 1px solid #e0e0e0; 
}

h2.chc-nested-shop-title::before { margin-right: 25px; }
h2.chc-nested-shop-title::after { margin-left: 25px; }

/* --- 5. BUTTONS & LINKS --- */
.chc-view-all-btn {
    background-color: #041B30;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.chc-view-all-btn:hover {
    background-color: #C99E3E;
    color: #fff;
}

.chc-back-link {
    background: none;
    border: none;
    color: #111;
    font-weight: bold;
    cursor: pointer;
    padding: 3px;
    font-size: 17px;
    transition: 0.2s;
}

.chc-back-link:hover {
    color: #C99E3E;
	background: none;
}