/* Location Page Mockup Styles */

:root {
    /* Brand Colors */
    --loc-primary: #0066cc;
    --loc-primary-dark: #0052a3;
    --loc-accent-purple: #9b59b6;
    --loc-accent-orange: #e67e22;
    --loc-accent-green: #27ae60;
    
    /* Dark Mode Colors */
    --loc-bg-dark: #1a1a2e; /* Deep dark blue/gray */
    --loc-bg-darker: #121220;
    --loc-text-white: #ffffff;
    --loc-text-muted: rgba(255, 255, 255, 0.7);
    --loc-border-glass: rgba(255, 255, 255, 0.1);
    --loc-bg-glass: rgba(255, 255, 255, 0.05);
    --loc-bg-glass-hover: rgba(255, 255, 255, 0.1);
    
    /* Spacing */
    --loc-spacing-sm: 0.5rem;
    --loc-spacing-md: 1rem;
    --loc-spacing-lg: 2rem;
    --loc-spacing-xl: 4rem;
}

/* Page Reset for Dark Mode - High Specificity */
body.page-template-page-locations-mockup {
    background-color: var(--loc-bg-dark) !important;
    color: var(--loc-text-white) !important;
    font-family: 'Inter', sans-serif;
}

.loc-page-wrapper {
    background-color: var(--loc-bg-dark);
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

/* Force text colors to white/light in our wrapper */
.loc-page-wrapper h1,
.loc-page-wrapper h2,
.loc-page-wrapper h3,
.loc-page-wrapper h4,
.loc-page-wrapper h5,
.loc-page-wrapper h6,
.loc-page-wrapper p,
.loc-page-wrapper li,
.loc-page-wrapper span:not(.loc-badge) {
    color: var(--loc-text-white) !important;
}

.loc-page-wrapper p {
    color: var(--loc-text-muted) !important;
}

/* Hide Legacy Map Elements */
.page-template-page-locations-mockup .ccc-locations-list,
.page-template-page-locations-mockup .ccc-locations-filter,
.page-template-page-locations-mockup .ccc-locations-pagination {
    display: none !important;
}

.page-template-page-locations-mockup #ccc-locations-map {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    height: 100% !important;
}

/* Header Override */
.page-template-page-locations-mockup .site-header {
    background: rgba(26, 26, 46, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* Hero Section */
.loc-hero {
    background: linear-gradient(135deg, var(--loc-primary) 0%, var(--loc-primary-dark) 100%);
    padding: 120px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.loc-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=');
    opacity: 0.3;
}

.loc-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.loc-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.loc-hero p {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Map Section */
.loc-map-section {
    margin-top: -40px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.loc-map-container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--loc-bg-darker);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--loc-border-glass);
    height: 500px;
    position: relative;
}

/* Filter Section */
.loc-filter-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.loc-filter-bar {
    display: flex;
    gap: 1rem;
    background: var(--loc-bg-glass);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--loc-border-glass);
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    align-items: center;
}

.loc-filter-label {
    font-weight: 600;
    color: var(--loc-text-muted) !important;
    margin-right: auto;
}

.loc-select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--loc-border-glass);
    color: var(--loc-text-white);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    min-width: 200px;
}

.loc-select:focus {
    outline: none;
    border-color: var(--loc-primary);
}

/* Locations Grid */
.loc-grid-section {
    padding: 0 20px 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.loc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

/* Glassmorphism Card */
.loc-card {
    background: var(--loc-bg-glass);
    border: 1px solid var(--loc-border-glass);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.loc-card:hover {
    background: var(--loc-bg-glass-hover);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.loc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--loc-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loc-card:hover::before {
    opacity: 1;
}

.loc-card-header {
    margin-bottom: 1.5rem;
}

.loc-agency-name {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--loc-text-muted) !important;
    margin-bottom: 0.5rem;
    display: block;
}

.loc-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.loc-badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.loc-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit !important; /* Allow badge specific colors */
}

.loc-badge-headquarters { background: rgba(0, 102, 204, 0.2); color: #4dabf7 !important; border: 1px solid rgba(0, 102, 204, 0.4); }
.loc-badge-immigration { background: rgba(155, 89, 182, 0.2); color: #d5a6bd !important; border: 1px solid rgba(155, 89, 182, 0.4); }
.loc-badge-food { background: rgba(230, 126, 34, 0.2); color: #f39c12 !important; border: 1px solid rgba(230, 126, 34, 0.4); }
.loc-badge-community { background: rgba(39, 174, 96, 0.2); color: #2ecc71 !important; border: 1px solid rgba(39, 174, 96, 0.4); }
.loc-badge-default { background: rgba(255, 255, 255, 0.1); color: var(--loc-text-muted) !important; border: 1px solid rgba(255, 255, 255, 0.2); }

.loc-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.loc-info-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    color: var(--loc-text-muted) !important;
    font-size: 0.95rem;
}

.loc-info-row i {
    color: var(--loc-primary) !important;
    margin-top: 3px;
    width: 16px;
}

.loc-info-row a {
    color: var(--loc-text-white) !important;
    text-decoration: none;
    transition: color 0.2s;
}

.loc-info-row a:hover {
    color: var(--loc-primary) !important;
}

.loc-card-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--loc-border-glass);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loc-btn-link {
    color: var(--loc-text-white) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.loc-btn-link:hover {
    color: var(--loc-primary) !important;
}

.loc-btn-link i {
    transition: transform 0.2s;
}

.loc-btn-link:hover i {
    transform: translateX(3px);
}

/* Footer Override */
.page-template-page-locations-mockup .site-footer {
    background-color: #5a7fb5 !important;
    border-top: none;
}

/* Responsive */
@media (max-width: 768px) {
    .loc-hero h1 { font-size: 2.5rem; }
    .loc-filter-bar { flex-direction: column; align-items: stretch; }
    .loc-select { width: 100%; }
    .loc-grid { grid-template-columns: 1fr; }
}