/**
 * Multi Directory — Frontend Styles
 * Design system: GatewayFinder-inspired
 * Palette: coral accent · navy headers · warm off-white ground · clean cards
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=DM+Sans:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --dir-coral:       #D85A30;
    --dir-coral-lt:    #FAECE7;
    --dir-coral-md:    #F0997B;
    --dir-coral-dk:    #993C1D;
    --dir-navy:        #1a2744;
    --dir-navy-md:     #2d3f6b;
    --dir-teal:        #1D9E75;
    --dir-teal-lt:     #E1F5EE;
    --dir-teal-dk:     #0F6E56;
    --dir-bg:          #ffffff;
    --dir-bg2:         #f5f4f0;
    --dir-bg3:         #eeede9;
    --dir-text:        #1a1a1a;
    --dir-text2:       #555555;
    --dir-text3:       #888888;
    --dir-border:      rgba(0,0,0,0.10);
    --dir-border2:     rgba(0,0,0,0.18);
    --dir-radius:      8px;
    --dir-radius-lg:   12px;
    --dir-shadow:      0 2px 8px rgba(0,0,0,0.07);
    --dir-shadow-hover:0 6px 20px rgba(0,0,0,0.12);
    --dir-font-display:'Barlow Condensed', sans-serif;
    --dir-font-body:   'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════
   BASE WRAPPER
   ═══════════════════════════════════════════════════════════════════ */
.directory-listing,
.directory-single-entry {
    font-family: var(--dir-font-body);
    color: var(--dir-text);
    background: transparent;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   LISTING PAGE — GRID / LIST
   ═══════════════════════════════════════════════════════════════════ */
.directory-items {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.directory-layout-grid .directory-items {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.directory-layout-list .directory-items {
    grid-template-columns: 1fr;
}

/* ── Card ── */
.directory-item {
    background: var(--dir-bg);
    border: 0.5px solid var(--dir-border2);
    border-radius: var(--dir-radius-lg);
    overflow: hidden;
    box-shadow: var(--dir-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.directory-item:hover {
    box-shadow: var(--dir-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--dir-coral-md);
}

.directory-item-clickable { cursor: pointer; }

/* ── Card image ── */
.directory-item-image {
    width: 100%;
    overflow: hidden;
    max-height: 200px;
}

.directory-item-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.directory-item:hover .directory-item-image img {
    transform: scale(1.03);
}

/* ── Card body ── */
.directory-item-content {
    padding: 16px;
}

.directory-item-title {
    font-family: var(--dir-font-display);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin: 0 0 4px;
    line-height: 1.15;
}

.directory-title-link {
    color: var(--dir-navy);
    text-decoration: none;
    pointer-events: none; /* card itself is clickable */
}

.directory-item-category {
    font-size: 11px;
    color: var(--dir-coral-dk);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.directory-item-excerpt {
    font-size: 13px;
    color: var(--dir-text2);
    line-height: 1.6;
    margin-bottom: 12px;
}

.directory-item-excerpt p { margin: 0; }

/* ── View indicator badge ── */
.directory-view-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    background: var(--dir-coral);
    color: #fff;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    pointer-events: none;
}

.directory-item:hover .directory-view-indicator,
.directory-item:focus .directory-view-indicator {
    opacity: 1;
}

.directory-view-indicator .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

@media (max-width: 768px) {
    .directory-view-indicator { opacity: 1; }
    .directory-view-indicator .view-text { display: none; }
}

/* ── Address on card ── */
.contact-address {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 11px;
    color: var(--dir-text3);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px solid var(--dir-border);
    line-height: 1.5;
}

.contact-address .dashicons {
    font-size: 13px;
    width: 13px;
    height: 13px;
    color: var(--dir-coral);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Inline rating ── */
.directory-item-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    margin: 6px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.directory-contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.directory-contact-buttons.layout-stacked {
    flex-direction: column;
    gap: 8px;
}

/* Base button */
.directory-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--dir-radius);
    font-family: var(--dir-font-body);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, transform 0.1s;
    line-height: 1.3;
    white-space: nowrap;
}

.directory-contact-btn:hover { opacity: 0.88; }
.directory-contact-btn:active,
.btn-touch-active { transform: scale(0.97); }

.directory-contact-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Stacked layout */
.directory-contact-btn.directory-btn-stacked {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    min-height: 68px;
    width: 100%;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    gap: 4px;
}

.directory-btn-stacked .btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.directory-btn-stacked .btn-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.directory-btn-stacked .btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.directory-btn-stacked .btn-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    margin-bottom: 2px;
    line-height: 1;
}

.directory-btn-stacked .btn-value {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
    text-align: center;
}

/* Default colors — overridden by dynamic CSS from settings */
.directory-contact-btn.phone-btn     { background: #28a745; color: #fff; }
.directory-contact-btn.email-btn     { background: #17a2b8; color: #fff; }
.directory-contact-btn.website-btn   { background: #6f42c1; color: #fff; }
.directory-contact-btn.directions-btn{ background: #fd7e14; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   FILTERS
   ═══════════════════════════════════════════════════════════════════ */
.directory-filters {
    background: var(--dir-bg2);
    border: 0.5px solid var(--dir-border2);
    border-radius: var(--dir-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.directory-filters label {
    font-size: 12px;
    font-weight: 500;
    color: var(--dir-text2);
}

.directory-filters select {
    border: 0.5px solid var(--dir-border2);
    border-radius: var(--dir-radius);
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--dir-font-body);
    background: var(--dir-bg);
    color: var(--dir-text);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   SINGLE / DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════ */
.directory-single-entry {
    max-width: 840px;
    margin: 24px auto;
}

/* Hero band at top of detail */
.directory-single-entry .directory-single-hero {
    background: var(--dir-navy);
    border-radius: var(--dir-radius-lg) var(--dir-radius-lg) 0 0;
    padding: 24px 28px 20px;
    margin-bottom: 0;
}

/* Fallback if no hero wrapper — style the title directly */
.directory-single-title {
    font-family: var(--dir-font-display);
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    color: var(--dir-navy);
    line-height: 1.1;
    margin: 0 0 6px;
    border-bottom: 2px solid var(--dir-coral);
    padding-bottom: 10px;
}

.directory-single-category {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dir-coral-dk);
    background: var(--dir-coral-lt);
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.directory-single-image {
    border-radius: var(--dir-radius);
    overflow: hidden;
    margin-bottom: 20px;
}

.directory-single-image img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 360px;
    object-fit: cover;
}

.directory-single-content {
    font-size: 15px;
    line-height: 1.75;
    color: var(--dir-text2);
    margin-bottom: 24px;
}

.directory-single-content p { margin-bottom: 14px; }
.directory-single-content p:last-child { margin-bottom: 0; }

/* Detail info card */
.directory-single-address {
    background: var(--dir-bg2);
    border: 0.5px solid var(--dir-border2);
    border-radius: var(--dir-radius);
    padding: 14px 16px;
    margin: 20px 0;
}

.directory-single-address h4 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--dir-text3);
    margin: 0 0 8px;
}

.address-display {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 14px;
    color: var(--dir-text2);
    line-height: 1.6;
}

.address-display .dashicons {
    color: var(--dir-coral);
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Contact title/position */
.directory-contact-title-display {
    font-size: 13px;
    font-weight: 500;
    color: var(--dir-text2);
    background: var(--dir-teal-lt);
    border-left: 3px solid var(--dir-teal);
    padding: 7px 12px;
    border-radius: 0 var(--dir-radius) var(--dir-radius) 0;
    margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   NO RESULTS / ERRORS
   ═══════════════════════════════════════════════════════════════════ */
.directory-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--dir-text3);
    font-size: 14px;
    background: var(--dir-bg2);
    border-radius: var(--dir-radius-lg);
    border: 0.5px dashed var(--dir-border2);
}

.directory-error {
    background: #FAECE7;
    color: var(--dir-coral-dk);
    border: 0.5px solid var(--dir-coral-md);
    border-radius: var(--dir-radius);
    padding: 12px 16px;
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   LOADING STATE
   ═══════════════════════════════════════════════════════════════════ */
.directory-container.loading {
    position: relative;
    min-height: 160px;
    opacity: 0.6;
    pointer-events: none;
}

.directory-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid var(--dir-bg3);
    border-top-color: var(--dir-coral);
    border-radius: 50%;
    animation: dir-spin 0.8s linear infinite;
}

@keyframes dir-spin {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   APPPRESSER / IFRAME OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */
body.in-apppresser .directory-listing,
body.in-apppresser .directory-items,
iframe .directory-listing,
iframe .directory-items {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 10px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

body.in-apppresser .directory-layout-grid .directory-items,
iframe .directory-layout-grid .directory-items {
    grid-template-columns: 1fr !important;
}

body.in-apppresser .directory-item,
iframe .directory-item {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.in-apppresser .directory-item:hover {
    transform: none; /* no hover lift on touch */
}

body.in-apppresser .directory-contact-btn {
    min-height: 44px; /* Apple HIG touch target */
    padding: 10px 14px !important;
    font-size: 14px !important;
}

body.in-apppresser .directory-btn-stacked {
    min-height: 64px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
}

/* iOS safe area insets */
body.in-apppresser .directory-listing {
    padding-left:  max(10px, env(safe-area-inset-left))  !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .directory-layout-grid .directory-items {
        grid-template-columns: 1fr;
    }

    .directory-item-title { font-size: 18px; }

    .directory-single-title { font-size: 26px; }

    .directory-contact-btn {
        font-size: 13px;
        padding: 8px 12px;
    }

    .directory-single-entry {
        margin: 12px;
    }
}

@media (max-width: 480px) {
    .directory-item-image img { height: 160px; }

    .directory-contact-buttons {
        flex-direction: column;
    }

    .directory-contact-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CATEGORY FILTER CHIP STYLE (optional enhancement)
   ═══════════════════════════════════════════════════════════════════ */
.directory-filters select:focus {
    outline: 2px solid var(--dir-coral);
    outline-offset: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   EMAIL WRAP HELPER
   ═══════════════════════════════════════════════════════════════════ */
.btn-email-value .email-part-1,
.btn-email-value .email-part-2 {
    display: block;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   RATINGS (if ratings-feedback plugin is active)
   ═══════════════════════════════════════════════════════════════════ */
.directory-reviews-container {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 0.5px solid var(--dir-border2);
}

.directory-item-rating .stars { color: #ffb900; }

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        --dir-bg:      #1e1e1e;
        --dir-bg2:     #252525;
        --dir-bg3:     #2d2d2d;
        --dir-text:    #f0f0f0;
        --dir-text2:   #bbb;
        --dir-text3:   #888;
        --dir-border:  rgba(255,255,255,0.10);
        --dir-border2: rgba(255,255,255,0.18);
    }

    .directory-title-link { color: #f0f0f0; }

    .directory-item {
        background: var(--dir-bg);
        border-color: var(--dir-border2);
    }
}