/* Cranky Gator's Antiques Directory — retro colorful theme */

:root {
    --cga-teal: #0b4f4a;
    --cga-teal-dark: #073531;
    --cga-mustard: #f2b705;
    --cga-orange: #d9622b;
    --cga-cream: #fdf6e3;
    --cga-brown: #3b2a1a;
    --cga-gator-green: #3c6e47;
    --cga-font-display: 'Bungee', cursive;
    --cga-font-body: 'Poppins', sans-serif;
}

/* Force out Astra's own theme sidebar on our pages. The astra_page_layout
   filter in the PHP file handles this in most cases, but some Astra
   setups (older versions, per-page overrides, child themes) still render
   the theme's sidebar markup regardless — this covers those directly. */
body.cga-directory-fullwidth #secondary,
body.cga-directory-fullwidth .sidebar-widget-area,
body.cga-directory-fullwidth .ast-sidebar,
body.cga-directory-fullwidth aside.widget-area {
    display: none !important;
}
body.cga-directory-fullwidth #primary,
body.cga-directory-fullwidth .ast-container,
body.cga-directory-fullwidth .content-area,
body.cga-directory-fullwidth #content,
body.cga-directory-fullwidth .site-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.cga-directory-page,
.cga-homepage {
    font-family: var(--cga-font-body);
    color: var(--cga-brown);
    background: var(--cga-cream);
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
}

.cga-directory-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    align-items: start;
}

.cga-directory-main {
    min-width: 0;
}

/* Belt-and-suspenders: if the theme's content wrapper still imposes its
   own max-width or padding around our templates, make sure our own
   sections never shrink below their container. */
.cga-mall-details,
.cga-mall-photo,
.cga-mall-map,
.cga-metro-map,
.cga-listing-grid,
.cga-state-grid,
.cga-metro-links {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cga-directory-sidebar {
    min-width: 0;
    position: sticky;
    top: 24px;
}

.cga-widget {
    background: #fff;
    border: 3px solid var(--cga-teal);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 20px;
}

.cga-widget-title {
    font-family: var(--cga-font-display);
    color: var(--cga-orange);
    font-size: 16px;
    margin: 0 0 12px;
}

.cga-page-title {
    font-family: var(--cga-font-display);
    color: var(--cga-teal);
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    margin: 0 0 12px;
}

.cga-page-intro {
    font-size: 17px;
    margin-bottom: 24px;
}

.cga-section-heading {
    font-family: var(--cga-font-display);
    color: var(--cga-orange);
    font-size: 22px;
    margin: 32px 0 14px;
}

.cga-city-heading {
    font-family: var(--cga-font-display);
    color: var(--cga-teal);
    font-size: 19px;
    margin: 30px 0 14px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--cga-mustard);
}

.cga-breadcrumb a {
    color: var(--cga-teal);
    font-weight: 600;
    text-decoration: none;
}
.cga-breadcrumb a:hover { text-decoration: underline; }

.cga-metro-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
}

.cga-metro-links-label {
    font-weight: 700;
    color: var(--cga-brown);
    margin-right: 4px;
    font-size: 14px;
}

/* State/province pill grid */
.cga-state-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.cga-state-pill {
    display: inline-block;
    background: var(--cga-mustard);
    color: var(--cga-brown);
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    border: 2px solid var(--cga-brown);
    transition: transform 0.15s ease, background 0.15s ease;
    font-size: 14px;
}
.cga-state-pill:hover {
    background: var(--cga-orange);
    color: #fff;
    transform: translateY(-2px);
}
.cga-metro-pill {
    background: var(--cga-gator-green);
    color: #fff;
    border-color: var(--cga-teal-dark);
}
.cga-metro-pill:hover { background: var(--cga-teal); }

/* Shop / mall listing cards. Container queries measure the ACTUAL
   rendered width of the content column, not the browser viewport — so
   this stays correct whether the sidebar is sitting beside the content
   (narrowing it) or stacked below it. Fallback (auto-fit) covers the
   rare very old browser without container query support. */
.cga-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
    margin-top: 12px;
}
@media (max-width: 599px) {
    .cga-listing-grid {
        grid-template-columns: 1fr;
    }
}

@supports (container-type: inline-size) {
    .cga-directory-main {
        container-type: inline-size;
    }
    .cga-listing-grid {
        grid-template-columns: 1fr;
    }
    @container (min-width: 480px) {
        .cga-listing-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @container (min-width: 800px) {
        .cga-listing-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}

.cga-card {
    background: #fff;
    border: 3px solid var(--cga-teal);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 4px 4px 0 var(--cga-mustard);
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
}

.cga-card-title {
    font-family: var(--cga-font-display);
    font-size: 17px;
    color: var(--cga-teal);
    margin: 0 0 8px;
}

.cga-mall-link {
    font-size: 13px;
    margin: 0 0 8px;
    color: var(--cga-orange);
}
.cga-mall-link a { color: var(--cga-orange); font-weight: 700; }

.cga-address, .cga-phone {
    font-size: 14px;
    margin: 0 0 6px;
    line-height: 1.4;
}
.cga-phone a { color: var(--cga-brown); text-decoration: none; font-weight: 600; }

.cga-links {
    margin: 10px 0 0;
    font-size: 13px;
}
.cga-links a {
    display: inline-block;
    margin: 2px 8px 2px 0;
    color: #fff;
    background: var(--cga-gator-green);
    padding: 4px 10px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
}
.cga-links a:hover { background: var(--cga-teal); }

.cga-empty { font-size: 16px; font-style: italic; }

.cga-specialty-count {
    font-size: 14px;
    color: #7a6a55;
    margin: 0 0 16px;
}

/* Mall card inside the mixed state-page grid */
.cga-mall-card {
    border-color: var(--cga-orange);
    box-shadow: 4px 4px 0 var(--cga-teal);
    position: relative;
}
.cga-mall-card:hover { transform: translateY(-2px); }

.cga-card-link {
    display: block;
    text-decoration: none;
    color: var(--cga-brown);
}

.cga-route-picker {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: #fff;
    border: 2px solid var(--cga-teal);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cga-mall-card .cga-route-picker { border-color: var(--cga-orange); }
.cga-route-picker input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.cga-mall-badge {
    display: inline-block;
    background: var(--cga-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.cga-mall-count {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--cga-teal);
}

/* Ad slots */
.cga-ad-slot {
    grid-column: 1 / -1;
    background: #fff;
    border: 2px dashed var(--cga-orange);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.cga-pagination {
    margin-top: 28px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cga-pagination a, .cga-pagination span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 8px;
    background: #fff;
    border: 2px solid var(--cga-teal);
    color: var(--cga-teal);
    text-decoration: none;
    font-weight: 600;
}
.cga-pagination .current {
    background: var(--cga-teal);
    color: #fff;
}

/* Mall details block */
.cga-mall-details {
    background: #fff;
    border: 3px solid var(--cga-teal);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 12px;
}

.cga-mall-photo {
    margin: 0 0 20px;
    border: 4px solid var(--cga-teal);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 5px 5px 0 var(--cga-mustard);
}
.cga-mall-photo img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.cga-mall-map,
.cga-metro-map {
    margin: 20px 0 8px;
    border: 4px solid var(--cga-orange);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 5px 5px 0 var(--cga-teal);
}
.cga-mall-map iframe,
.cga-metro-map iframe {
    width: 100%;
    height: 320px;
    border: 0;
    display: block;
}
#cga-metro-map {
    height: 320px;
}

/* ---------- Homepage ---------- */

.cga-hero {
    background: linear-gradient(135deg, var(--cga-teal) 0%, var(--cga-gator-green) 100%);
    padding: 72px 20px;
    text-align: center;
    color: var(--cga-cream);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}

.cga-hero-inner { max-width: 700px; margin: 0 auto; }

.cga-hero-title {
    font-family: var(--cga-font-display);
    font-size: clamp(32px, 6vw, 56px);
    line-height: 1.15;
    color: var(--cga-mustard);
    text-shadow: 3px 3px 0 var(--cga-brown);
    margin: 0 0 16px;
}

.cga-hero-subtitle {
    font-size: clamp(15px, 2vw, 19px);
    margin: 0 0 28px;
}

.cga-hero-cta {
    display: inline-block;
    background: var(--cga-orange);
    color: #fff;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 999px;
    text-decoration: none;
    border: 3px solid var(--cga-brown);
    box-shadow: 4px 4px 0 var(--cga-brown);
    transition: transform 0.15s ease;
}
.cga-hero-cta:hover { transform: translateY(-3px); }

.cga-homepage-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

.cga-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
@media (max-width: 599px) {
    .cga-blog-grid {
        grid-template-columns: 1fr;
    }
}

@supports (container-type: inline-size) {
    .cga-homepage-section {
        container-type: inline-size;
    }
    .cga-blog-grid {
        grid-template-columns: 1fr;
    }
    @container (min-width: 480px) {
        .cga-blog-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @container (min-width: 800px) {
        .cga-blog-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}

.cga-blog-card {
    display: block;
    background: #fff;
    border: 3px solid var(--cga-orange);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--cga-brown);
    box-shadow: 4px 4px 0 var(--cga-teal);
    transition: transform 0.15s ease;
}
.cga-blog-card:hover { transform: translateY(-3px); }

.cga-blog-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; }

.cga-blog-title {
    font-family: var(--cga-font-display);
    font-size: 15px;
    color: var(--cga-teal);
    margin: 12px 14px 4px;
}

.cga-blog-date {
    font-size: 12px;
    margin: 0 14px 14px;
    color: #7a6a55;
}

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
    .cga-directory-page {
        grid-template-columns: 1fr;
    }
    .cga-directory-sidebar {
        position: static;
    }
}

@media (max-width: 480px) {
    .cga-hero { padding: 48px 16px; }
    .cga-state-pill { font-size: 13px; padding: 8px 14px; }
    .cga-homepage-section { padding: 28px 16px; }
}

/* ---------- Route planner (metro pages) ---------- */

.cga-route-planner {
    margin: 8px 0 28px;
    padding: 20px;
    background: #fff;
    border: 3px solid var(--cga-teal);
    border-radius: 16px;
    box-shadow: 4px 4px 0 var(--cga-mustard);
}

.cga-route-hint {
    margin: 0 0 16px;
    color: #7a6a55;
    font-size: 14px;
}

.cga-route-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.cga-route-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cga-route-field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--cga-teal);
}

.cga-route-origin-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cga-route-controls input[type="text"],
.cga-route-controls select {
    padding: 8px 10px;
    border: 2px solid var(--cga-teal);
    border-radius: 8px;
    font-family: var(--cga-font-body);
    font-size: 14px;
}

.cga-route-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--cga-brown);
    cursor: pointer;
}

.cga-route-btn-primary,
.cga-route-btn-secondary {
    font-family: var(--cga-font-body);
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.cga-route-btn-primary {
    background: var(--cga-orange);
    color: #fff;
    padding: 12px 24px;
    font-size: 15px;
    box-shadow: 3px 3px 0 var(--cga-teal);
}
.cga-route-btn-primary:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
}

.cga-route-btn-secondary {
    background: var(--cga-cream);
    color: var(--cga-teal);
    border: 2px solid var(--cga-teal);
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
}

.cga-route-selected {
    margin: 4px 0 16px;
    font-size: 14px;
    color: #7a6a55;
}
.cga-route-stop-list {
    margin: 0;
    padding-left: 20px;
}
.cga-route-stop-list li {
    color: var(--cga-brown);
    margin-bottom: 4px;
}

.cga-route-message {
    min-height: 20px;
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--cga-gator-green);
}
.cga-route-message-error {
    color: #b3261e;
}

.cga-route-summary {
    margin-top: 8px;
    font-size: 15px;
    color: var(--cga-teal);
}

.cga-route-directions {
    margin-top: 12px;
    max-height: 320px;
    overflow-y: auto;
}

.cga-route-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

@media print {
    .site-header,
    .site-footer,
    #secondary,
    .cga-directory-sidebar,
    .cga-breadcrumb,
    .cga-route-hint,
    .cga-route-controls,
    .cga-route-selected,
    #cga-route-go,
    .cga-route-actions,
    .cga-metro-map,
    .cga-listing-grid,
    .cga-city-heading,
    .cga-ad-slot {
        display: none !important;
    }
    .cga-route-planner {
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .cga-route-directions {
        max-height: none;
        overflow: visible;
    }
}