/* =========================================
   Hometown Success Engine - Core Styles
   ========================================= */

/* 1. Reset & Base Layout (Flexbox) */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    height: 100vh;
    width: 100vw;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #f8f9fa;
    overflow: hidden; 
    display: flex;
    flex-direction: row; /* Places Map left, Sidebar right */
}

/* 2. Main Containers */
#map-container {
    flex: 2; /* Takes up 2/3 of screen */
    height: 100%;
    position: relative;
    z-index: 1;
}

#sidebar {
    flex: 1; /* Takes up 1/3 of screen */
    height: 100%;
    background: #ffffff;
    border-left: 2px solid #ddd;
    padding: 30px;
    overflow-y: scroll;
    z-index: 2;
}

/* 3. Typography & UI Elements */
h1 { font-size: 20px; margin-bottom: 10px; color: #1a1a1a; }
h2 { font-size: 18px; margin-bottom: 10px; color: #1a1a1a; }
h3 { font-size: 16px; margin-bottom: 8px; color: #1a1a1a; }
p { font-size: 16px; line-height: 1.5; margin-bottom: 15px; color: #555; }

.stat-box {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 8px;
    margin-right: 15px;
    margin-bottom: 20px;
}
.bg-blue { background-color: #e8f0fe; }
.bg-red { background-color: #fce8e6; }
.insight-text p { line-height: 1.5; color: #3c4043; }

/* 4. Sports Filter (Task 1) */
.filter-container {
    margin-top: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.filter-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 5px;
}

.sport-dropdown {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    color: #333;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 6px;
    appearance: none; 
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); 
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.sport-dropdown:focus {
    outline: none;
    border-color: #4285F4;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

/* AI Insight Panel */
.insight-box {
    background-color: #e8f0fe;
    border-left: 4px solid #4285F4;
    padding: 15px;
    margin-top: 15px;
    border-radius: 4px;
}

.hidden { display: none !important; }

/* 5. Responsive Design (Mobile Support) */
@media (max-width: 768px) {
    body { flex-direction: column; }
    #map-container { flex: none; height: 50vh; width: 100%; }
    #sidebar { flex: none; height: 50vh; width: 100%; border-left: none; border-top: 2px solid #ddd; padding: 20px; }
}


/* 6. Dark Mode Support */
/*@media (prefers-color-scheme: dark) {
    body { background-color: #121212; color: #e8eaed; }
    #sidebar { background: #202124; border-left: 2px solid #3c4043; }
    h2, h3 { color: #ffffff; }
    p { color: #bdc1c6; }
    .bg-blue { background-color: #1a233a; }
    .bg-red { background-color: #3a1a1a; }
    .insight-text p { color: #e8eaed; }
    .filter-label { color: #e8eaed; }
    .sport-dropdown {
        background-color: #303134;
        color: #e8eaed;
        border-color: #5f6368;
        background-image: url('data:image/svg+xml;utf8,<svg fill="%23e8eaed" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    }
    .filter-container { border-bottom: 1px solid #5f6368; }
    .insight-box { background-color: #1e2532; border-left-color: #8ab4f8; }
    
    @media (max-width: 768px) {
        #sidebar { border-top: 2px solid #3c4043; }
    }
}*/


/* "Gold Medal Rim" custom map markers Gemini v2 */
/* Base styles shared by all markers */
.hub-badge {
    width: 32px; /* Fixed size ensures text is always readable */
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px; /* Standardized text size */
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

/* Hover State for all markers */
.hub-badge:hover {
    transform: scale(1.25);
    background-color: rgba(179, 25, 66, 0.95); /* Old Glory Red on hover with 95% opacity */
    color: white;
    z-index: 1000 !important; /* Forces hovered pin to the front */
}

/* Standard cities - Old Glory Blue with Opacity */
.standard-hub {
    /* #0A3161 converted to RGB with 75% opacity */
    background-color: rgba(10, 49, 97, 0.75);  /* Old Glory Blue with 75% opacity */
    border: 2px solid rgba(255, 255, 255, 0.6); /* Semi-transparent white border */
    color: white;
}

/* Gold Medal cities */
.medal-hub {
    /* Slightly less transparent so medal hubs stand out more */
    background-color: rgba(10, 49, 97, 0.85); 
    border: 2px solid #FFD700; /* Pure Gold Rim */
    color: #FFD700; /* Gold text */
    /* Subtle gold glow */
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); 
    z-index: 10; /* Ensures gold hubs render on top of standard hubs */
}


/* Typography and Brand Colors */
h1, h2 {
  color: #0a3161; /* Old Glory Blue */
}

a:hover {
  text-decoration: underline; 
}

.feature-list {
    list-style: none; /* Removes default messy bullets */
    padding-left: 0;
    margin: 15px 0 25px 0;
    font-size: 0.95rem; /* Slightly smaller to save space */
    line-height: 1.5;
  }
  .feature-list li {
    margin-bottom: 8px; /* Tight margins to save vertical space */
    padding-left: 20px;
    position: relative;
  }
  .feature-list li::before {
    content: '▪'; /* Clean, modern square bullet */
    color: #0a3161; /* Old Glory Blue */
    position: absolute;
    left: 0;
    font-size: 1.2rem;
    line-height: 1;
  }
  .feature-list strong {
    color: #0a3161;
  }


  .insight-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    text-align: center;
    background-color: #f8f9fa; /* Very light grey */
    border: 2px dashed #cbd5e1; /* Soft blue-grey dashed line */
    border-radius: 12px;
    margin-top: 20px;
  }

  .insight-empty-state .waiting-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    animation: gentle-pulse 2.5s infinite ease-in-out;
  }

  .insight-empty-state h3 {
    color: #0a3161; /* Old Glory Blue */
    margin: 0 0 10px 0;
    font-size: 1.25rem;
  }

  .insight-empty-state p {
    color: #64748b; /* Slate grey for secondary text */
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
    max-width: 85%;
  }

  /* The subtle animation that draws the eye and implies it is 'alive' */
  @keyframes gentle-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
  }