/*
 * OHA Haunt Listing Display - archive.css
 * OHA dark theme layer for GeoDirectory archive and search results pages.
 * All rules scoped to body.oha-gd-archive to prevent bleed into other pages.
 * Covers gd_place AND gd_event cards (both use the same GD card structure).
 *
 * Card HTML reference (GD default + simple_archive_item block):
 *   <li class="geodir-post gd_place|gd_event ...">
 *     [<div class="card ...">]           ← only in block-based cards
 *       <div class="card-img-top ...">   ← featured image section
 *       <div class="card-body ...">      ← title, meta, badges, content
 *       [<div class="card-footer ...">]  ← rating, hours, etc.
 *     [</div>]
 *   </li>
 *
 * Colors reference Kadence global palette vars with hardcoded fallbacks.
 */

/* ── Google Fonts (same set as listing.css) ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Rajdhani:wght@400;500;600&display=swap');

/* ── Design tokens (local, mirrors listing.css) ─────────────────────── */
body.oha-gd-archive {
    --oha-arc-primary:    var(--global-palette1,  #ad3119);
    --oha-arc-accent:     var(--global-palette7,  #e76653);
    --oha-arc-text:       var(--global-palette4,  #f7fafc);
    --oha-arc-text-muted: var(--global-palette6,  #cbd2d9);
    --oha-arc-bg:         var(--global-palette8,  #680400);
    --oha-arc-card-bg:    var(--global-palette9,  #000000);
    --oha-arc-border:     rgba(173, 49, 25, 0.45);
    --oha-arc-border-hov: var(--global-palette1,  #ad3119);
    --oha-arc-gold:       #C9A84C;
    --oha-arc-radius:     6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   GD BLOCK WRAPPER RESET
   GD Gutenberg blocks can carry white backgrounds and block-editor margins
   that create a visible "gap" between the search form and the card grid
   after a search is performed. Force all GD block wrappers transparent.
══════════════════════════════════════════════════════════════════════════ */
body.oha-gd-archive [class*="wp-block-geodirectory"],
body.oha-gd-archive .geodir-loop-actions,
body.oha-gd-archive .geodir-loop-header,
body.oha-gd-archive .geodir-loop-paging-container,
body.oha-gd-archive .gd-search-input-wrapper,
body.oha-gd-archive .geodir-archive-header {
    background: transparent !important;
    background-color: transparent !important;
}

/* The GD search results page uses a default Kadence page template which wraps content
   in article/.entry-content with a white background (vs /places/ which is full-width).
   Also reset the .geodir-search div wrapper GD adds around the search form on that page. */
body.oha-gd-archive article,
body.oha-gd-archive .entry-content,
body.oha-gd-archive .geodir-search,
body.oha-gd-archive .gd-search-bar {
    background: transparent !important;
    background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEARCH FORM
   Targets .geodir-loc-bar (classic widget) and the broader form[name=geodir-listing-search]
   so block-based GD search widgets are also covered.
══════════════════════════════════════════════════════════════════════════ */
body.oha-gd-archive .geodir-loc-bar,
body.oha-gd-archive form[name="geodir-listing-search"] {
    background: var(--oha-arc-card-bg);
    border: 1px solid var(--oha-arc-border);
    border-radius: var(--oha-arc-radius);
    padding: 12px 16px;
    margin-bottom: 20px;
}

body.oha-gd-archive .geodir-loc-bar input[type="text"],
body.oha-gd-archive .geodir-loc-bar input[type="search"],
body.oha-gd-archive form[name="geodir-listing-search"] input[type="text"],
body.oha-gd-archive form[name="geodir-listing-search"] input[type="search"] {
    background: var(--oha-arc-bg) !important;
    border: 1px solid var(--oha-arc-border) !important;
    border-radius: 4px !important;
    color: var(--oha-arc-text) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 15px !important;
}

body.oha-gd-archive .geodir-loc-bar input[type="text"]::placeholder,
body.oha-gd-archive .geodir-loc-bar input[type="search"]::placeholder,
body.oha-gd-archive form[name="geodir-listing-search"] input[type="text"]::placeholder,
body.oha-gd-archive form[name="geodir-listing-search"] input[type="search"]::placeholder {
    color: var(--oha-arc-text-muted) !important;
    opacity: 0.8;
}

body.oha-gd-archive .geodir-loc-bar input[type="text"]:focus,
body.oha-gd-archive .geodir-loc-bar input[type="search"]:focus,
body.oha-gd-archive form[name="geodir-listing-search"] input[type="text"]:focus,
body.oha-gd-archive form[name="geodir-listing-search"] input[type="search"]:focus {
    border-color: var(--oha-arc-primary) !important;
    outline: none !important;
}

body.oha-gd-archive .geodir-loc-bar button[type="submit"],
body.oha-gd-archive .geodir-loc-bar input[type="submit"],
body.oha-gd-archive form[name="geodir-listing-search"] button[type="submit"],
body.oha-gd-archive form[name="geodir-listing-search"] input[type="submit"],
body.oha-gd-archive .geodir-search .btn-default,
body.oha-gd-archive .geodir-search .btn-primary {
    background: var(--oha-arc-primary) !important;
    border-color: var(--oha-arc-primary) !important;
    color: #fff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

body.oha-gd-archive .geodir-loc-bar button[type="submit"]:hover,
body.oha-gd-archive .geodir-loc-bar input[type="submit"]:hover,
body.oha-gd-archive form[name="geodir-listing-search"] button[type="submit"]:hover,
body.oha-gd-archive form[name="geodir-listing-search"] input[type="submit"]:hover,
body.oha-gd-archive .geodir-search .btn-default:hover,
body.oha-gd-archive .geodir-search .btn-primary:hover {
    background: var(--global-palette2, #ff0000) !important;
    border-color: var(--global-palette2, #ff0000) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTING GRID WRAPPER
   GD outputs Bootstrap row-cols-sm-2 / row-cols-md-3 classes, but Bootstrap's
   md breakpoint (768px) can fail to fire when a sidebar narrows the content area.
   We override with CSS Grid so column count is our own and not Bootstrap-dependent.
══════════════════════════════════════════════════════════════════════════ */
body.oha-gd-archive .geodir-category-list-view {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Reset Bootstrap flex-row behaviour */
    flex-wrap: unset !important;
}

/* 2 columns on tablet */
@media (max-width: 900px) {
    body.oha-gd-archive .geodir-category-list-view {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 1 column on mobile */
@media (max-width: 576px) {
    body.oha-gd-archive .geodir-category-list-view {
        grid-template-columns: 1fr !important;
    }
}

/* Reset Bootstrap col width on each item so grid controls sizing */
body.oha-gd-archive .geodir-category-list-view > * {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: unset !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   INDIVIDUAL CARDS
   Styled to match the "Featured Haunts Nearby" card design on HLD listing pages:
   dark near-black bg, subtle border, gold hover, 160px image, Cinzel title,
   gold category label, gold discount badge, muted location text.
══════════════════════════════════════════════════════════════════════════ */

/* Card container and .card wrapper inside it */
body.oha-gd-archive .geodir-post,
body.oha-gd-archive .geodir-post .card {
    background: #111 !important;
    border: 1px solid rgba(224, 213, 197, 0.1) !important;
    border-radius: var(--oha-arc-radius) !important;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    color: var(--oha-arc-text);
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

body.oha-gd-archive .geodir-post:hover,
body.oha-gd-archive .geodir-post .card:hover {
    border-color: rgba(201, 168, 76, 0.45) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

/* ── Image section ──────────────────────────────────────────────────── */
body.oha-gd-archive .geodir-post .card-img-top {
    background: #1a0808;
    position: relative;
    overflow: hidden;
    height: 160px !important;
    flex-shrink: 0;
}

body.oha-gd-archive .geodir-post .card-img-top img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.3s ease;
}

body.oha-gd-archive .geodir-post:hover .card-img-top img {
    transform: scale(1.04);
}

/* ── Featured badge (top-right of image) ───────────────────────────── */
/* GD outputs .gd-badge-featured inside .card-img-top */
body.oha-gd-archive .geodir-post .gd-badge,
body.oha-gd-archive .geodir-post .badge {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

body.oha-gd-archive .geodir-post .gd-badge-featured,
body.oha-gd-archive .geodir-post .badge-featured {
    background: var(--oha-arc-gold) !important;
    color: #000 !important;
    border: none !important;
}

/* Category type badges shown on the image — style as gold label overlay */
body.oha-gd-archive .geodir-post .card-img-top .gd-p-tags,
body.oha-gd-archive .geodir-post .card-img-top .gd-cat-tags {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

body.oha-gd-archive .geodir-post .card-img-top .gd-p-tags .badge,
body.oha-gd-archive .geodir-post .card-img-top .gd-cat-tags .badge,
body.oha-gd-archive .geodir-post .card-img-top .gd-p-tags span,
body.oha-gd-archive .geodir-post .card-img-top .gd-cat-tags span {
    background: rgba(0, 0, 0, 0.65) !important;
    color: var(--oha-arc-gold) !important;
    border: 1px solid rgba(201, 168, 76, 0.3) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

/* Favorite/bookmark button on image */
body.oha-gd-archive .geodir-post .gd-fav-btn,
body.oha-gd-archive .geodir-post .geodir-fav {
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 50% !important;
}

body.oha-gd-archive .geodir-post .gd-fav-btn.active,
body.oha-gd-archive .geodir-post .geodir-fav.active {
    color: var(--oha-arc-gold) !important;
}

/* ── Card body ──────────────────────────────────────────────────────── */
body.oha-gd-archive .geodir-post .card-body {
    background: #111 !important;
    color: var(--oha-arc-text) !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

/* Card title / post title — matches oha-nearby__title */
body.oha-gd-archive .geodir-post .card-body .geodir-post-title,
body.oha-gd-archive .geodir-post .card-body .card-title,
body.oha-gd-archive .geodir-post .card-body h2,
body.oha-gd-archive .geodir-post .card-body h3,
body.oha-gd-archive .geodir-post .card-body h4 {
    color: #fff !important;
    font-family: 'Cinzel', serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 4px 0 !important;
}

body.oha-gd-archive .geodir-post .card-body .geodir-post-title a,
body.oha-gd-archive .geodir-post .card-body .card-title a,
body.oha-gd-archive .geodir-post .card-body h2 a,
body.oha-gd-archive .geodir-post .card-body h3 a,
body.oha-gd-archive .geodir-post .card-body h4 a {
    color: #fff !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

body.oha-gd-archive .geodir-post .card-body .geodir-post-title a:hover,
body.oha-gd-archive .geodir-post .card-body .card-title a:hover,
body.oha-gd-archive .geodir-post .card-body h2 a:hover,
body.oha-gd-archive .geodir-post .card-body h3 a:hover,
body.oha-gd-archive .geodir-post .card-body h4 a:hover {
    color: var(--oha-arc-gold) !important;
}

/* Category label in card body — matches oha-nearby__cat */
body.oha-gd-archive .geodir-post .card-body .gd-p-tags,
body.oha-gd-archive .geodir-post .card-body .gd-cat-tags,
body.oha-gd-archive .geodir-post .card-body .geodir-category {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--oha-arc-gold) !important;
    margin: 0 !important;
}

body.oha-gd-archive .geodir-post .card-body .gd-p-tags .badge,
body.oha-gd-archive .geodir-post .card-body .gd-cat-tags .badge,
body.oha-gd-archive .geodir-post .card-body .gd-p-tags span,
body.oha-gd-archive .geodir-post .card-body .gd-cat-tags span {
    background: transparent !important;
    color: var(--oha-arc-gold) !important;
    border: none !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
}

/* Address / location — matches oha-nearby__location */
body.oha-gd-archive .geodir-post .card-body .geodir-post-meta,
body.oha-gd-archive .geodir-post .card-body .gd-post-meta,
body.oha-gd-archive .geodir-post .card-body .gd-address,
body.oha-gd-archive .geodir-post .card-body address,
body.oha-gd-archive .geodir-post .card-body small,
body.oha-gd-archive .geodir-post .card-body p {
    color: #8a9ab0 !important;
    font-size: 13px !important;
    margin: 0 !important;
}

/* Excerpt / content */
body.oha-gd-archive .geodir-post .card-body .entry-content,
body.oha-gd-archive .geodir-post .card-body .gd-post-content,
body.oha-gd-archive .geodir-post .card-body .card-text {
    color: #8a9ab0 !important;
    font-size: 13px !important;
    line-height: 1.5;
    margin: 0 !important;
}

/* Links inside card body */
body.oha-gd-archive .geodir-post .card-body a {
    color: var(--oha-arc-accent) !important;
}

body.oha-gd-archive .geodir-post .card-body a:hover {
    color: var(--oha-arc-gold) !important;
}

/* ── Card footer ────────────────────────────────────────────────────── */
body.oha-gd-archive .geodir-post .card-footer {
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(224, 213, 197, 0.06) !important;
    color: #8a9ab0 !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
}

body.oha-gd-archive .geodir-post .card-footer a {
    color: #8a9ab0 !important;
}

/* ── Star rating ────────────────────────────────────────────────────── */
body.oha-gd-archive .geodir-post .geodir-post-rating .gd-rating-stars,
body.oha-gd-archive .geodir-post .gd-rating .gd-stars {
    color: var(--oha-arc-gold) !important;
}

body.oha-gd-archive .geodir-post .geodir-post-rating .gd-rating-count,
body.oha-gd-archive .geodir-post .gd-rating .gd-rating-count {
    color: #8a9ab0 !important;
}

/* ── Business hours ─────────────────────────────────────────────────── */
body.oha-gd-archive .geodir-post .gd-bh-closed {
    color: #8a9ab0 !important;
}

body.oha-gd-archive .geodir-post .gd-bh-open {
    color: var(--global-palette11, #13612e) !important;
}

/* ── OHA Discount badge — matches oha-nearby__discount ──────────────── */
/* Badge is injected by JS (wp_footer) with the actual rate + "Member Discount" text.
   JS targets .geodir-post.oha-has-discount[data-post-id] and appends .oha-arc-disc-badge
   to .card-body so the rate string is read from post meta, not hardcoded in CSS. */
body.oha-gd-archive .oha-arc-disc-badge {
    display: inline-block;
    align-self: flex-start;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oha-arc-gold);
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 3px;
    padding: 3px 8px;
    margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   GD EVENT CARDS — extra fields for gd_event post type
   Events share the same card structure but may show date/time badges.
══════════════════════════════════════════════════════════════════════════ */
body.oha-gd-archive .geodir-post.gd_event .card-body .gd-event-date,
body.oha-gd-archive .geodir-post.gd_event .card-body .geodir-post-meta .gd-event-schedule {
    color: var(--oha-arc-accent) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SORT / LAYOUT CONTROLS
══════════════════════════════════════════════════════════════════════════ */

/* Hide the GD grid/list view switcher dropdown — layout is always 3-col CSS grid */
body.oha-gd-archive .btn-group:has(#gd-list-view-select-grid) {
    display: none !important;
}

body.oha-gd-archive .geodir-loop-actions,
body.oha-gd-archive .geodir-loop-header {
    color: var(--oha-arc-text-muted);
}

body.oha-gd-archive .geodir-loop-actions select,
body.oha-gd-archive .geodir-loop-actions .gd-sort-select {
    background: var(--oha-arc-card-bg) !important;
    border: 1px solid var(--oha-arc-border) !important;
    color: var(--oha-arc-text) !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NO RESULTS MESSAGE
══════════════════════════════════════════════════════════════════════════ */
body.oha-gd-archive .geodir-no-listing,
body.oha-gd-archive .gd-no-results {
    background: var(--oha-arc-card-bg);
    border: 1px solid var(--oha-arc-border);
    border-radius: var(--oha-arc-radius);
    padding: 32px 24px;
    text-align: center;
    color: var(--oha-arc-text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════════════════ */
body.oha-gd-archive .geodir-pagination ul.page-numbers {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

body.oha-gd-archive .geodir-pagination li a.page-numbers,
body.oha-gd-archive .geodir-pagination li span.page-numbers,
body.oha-gd-archive .geodir-pagination a.page-numbers,
body.oha-gd-archive .geodir-pagination span.page-numbers {
    display: inline-block !important;
    background: #111 !important;
    border: 1px solid rgba(224, 213, 197, 0.15) !important;
    color: #f7fafc !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.4 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

body.oha-gd-archive .geodir-pagination li a.page-numbers:hover,
body.oha-gd-archive .geodir-pagination a.page-numbers:hover {
    background: var(--oha-arc-primary) !important;
    border-color: var(--oha-arc-primary) !important;
    color: #fff !important;
}

body.oha-gd-archive .geodir-pagination li span.page-numbers.current,
body.oha-gd-archive .geodir-pagination span.page-numbers.current {
    background: var(--oha-arc-primary) !important;
    border-color: var(--oha-arc-primary) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTOCOMPLETE DROPDOWN OVERRIDE
   Ensures the jQuery UI autocomplete dropdown respects the OHA dark theme
   on archive/search pages (the base styles are in admin.php inline CSS).
══════════════════════════════════════════════════════════════════════════ */
body.oha-gd-archive .ui-autocomplete {
    background: var(--oha-arc-card-bg) !important;
    border: 1px solid var(--oha-arc-border) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.oha-gd-archive .ui-autocomplete .ui-menu-item-wrapper {
    color: var(--oha-arc-text) !important;
    padding: 8px 14px !important;
}

body.oha-gd-archive .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: var(--oha-arc-primary) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    body.oha-gd-archive .geodir-loc-bar {
        padding: 12px 14px;
    }

    body.oha-gd-archive .geodir-post .card-body {
        padding: 10px 12px !important;
    }

    body.oha-gd-archive .geodir-post .card-body .geodir-post-title,
    body.oha-gd-archive .geodir-post .card-body h2,
    body.oha-gd-archive .geodir-post .card-body h3,
    body.oha-gd-archive .geodir-post .card-body h4 {
        font-size: 14px !important;
    }
}