/* ==========================================================================
   Partner Network Map — partner-network.css
   Modern, minimal, responsive. Override variables in your theme CSS.
   ========================================================================== */

/* ── Custom properties ──────────────────────────────────────────────────── */
:root {
    --pn-color-primary:    #1a56db;
    --pn-color-primary-h:  #1648c0;
    --pn-color-call:       #16a34a;
    --pn-color-call-h:     #15803d;
    --pn-color-secondary:  #6b7280;
    --pn-color-border:     #e5e7eb;
    --pn-color-bg:         #f9fafb;
    --pn-color-bg-card:    #ffffff;
    --pn-color-text:       #111827;
    --pn-color-text-muted: #6b7280;
    --pn-color-badge-bg:   #eff6ff;
    --pn-color-badge-text: #1d4ed8;
    --pn-radius:           8px;
    --pn-radius-sm:        5px;
    --pn-shadow:           0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --pn-shadow-hover:     0 4px 12px rgba(0,0,0,.12);
    --pn-map-height:       480px;
    --pn-font:             inherit;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.pn-wrapper {
    font-family: var(--pn-font);
    color:       var(--pn-color-text);
    max-width:   1280px;
    margin:      0 auto;
    padding:     0 1rem 3rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.pn-header {
    margin-bottom: 2rem;
}

.pn-title {
    font-size:     2rem;
    font-weight:   700;
    margin:        0 0 .5rem;
    color:         var(--pn-color-text);
}

.pn-intro {
    color:      var(--pn-color-text-muted);
    margin:     0;
    font-size:  1rem;
}

/* ── Filters ─────────────────────────────────────────────────────────────── */
.pn-filters {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap:                   .75rem;
    align-items:           end;
    background:            var(--pn-color-bg);
    border:                1px solid var(--pn-color-border);
    border-radius:         var(--pn-radius);
    padding:               1.25rem;
    margin-bottom:         1.5rem;
}

.pn-filter-group {
    display:        flex;
    flex-direction: column;
    gap:            .35rem;
}

.pn-filter-reset {
    justify-content: flex-end;
}

.pn-label {
    font-size:   .8125rem;
    font-weight: 600;
    color:       var(--pn-color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pn-input,
.pn-select {
    width:         100%;
    padding:       .6rem .85rem;
    border:        1px solid var(--pn-color-border);
    border-radius: var(--pn-radius-sm);
    background:    #fff;
    font-size:     .9375rem;
    color:         var(--pn-color-text);
    appearance:    none;
    transition:    border-color .15s, box-shadow .15s;
}

.pn-input:focus,
.pn-select:focus {
    outline:      none;
    border-color: var(--pn-color-primary);
    box-shadow:   0 0 0 3px rgba(26,86,219,.15);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.pn-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .4rem;
    padding:         .55rem 1rem;
    border:          none;
    border-radius:   var(--pn-radius-sm);
    font-size:       .875rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    transition:      background .15s, transform .1s;
    white-space:     nowrap;
}

.pn-btn:active { transform: scale(.97); }

.pn-btn--primary {
    background: var(--pn-color-primary);
    color:      #fff;
}
.pn-btn--primary:hover { background: var(--pn-color-primary-h); }

.pn-btn--call {
    background: var(--pn-color-call);
    color:      #fff;
}
.pn-btn--call:hover { background: var(--pn-color-call-h); }

.pn-btn--secondary {
    background: #fff;
    color:      var(--pn-color-secondary);
    border:     1px solid var(--pn-color-border);
}
.pn-btn--secondary:hover {
    background: #f3f4f6;
    color:      var(--pn-color-text);
}

.pn-btn--sm {
    padding:   .4rem .75rem;
    font-size: .8125rem;
}

/* ── Count / no-results ──────────────────────────────────────────────────── */
.pn-count {
    font-size:     .875rem;
    color:         var(--pn-color-text-muted);
    margin:        0 0 1rem;
}

.pn-no-results {
    padding:       2rem;
    text-align:    center;
    color:         var(--pn-color-text-muted);
    background:    var(--pn-color-bg);
    border-radius: var(--pn-radius);
    border:        1px dashed var(--pn-color-border);
    font-size:     .9375rem;
}

/* ── Content layout (map + list) ─────────────────────────────────────────── */
.pn-content {
    display:               grid;
    grid-template-columns: 1fr 1.5fr;
    gap:                   1.5rem;
    align-items:           start;
}

/* ── Map ─────────────────────────────────────────────────────────────────── */
.pn-map-wrap {
    position:      sticky;
    top:           1.5rem;
    border-radius: var(--pn-radius);
    overflow:      hidden;
    box-shadow:    var(--pn-shadow);
    border:        1px solid var(--pn-color-border);
}

.pn-map {
    width:  100%;
    height: var(--pn-map-height);
    display: block;
}

.pn-map-missing {
    background:  var(--pn-color-bg);
    padding:     2rem;
    text-align:  center;
    color:       var(--pn-color-text-muted);
    min-height:  200px;
    display:     flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

/* ── Partner list ────────────────────────────────────────────────────────── */
.pn-list {
    display:        grid;
    grid-template-columns: 1fr;
    gap:            1rem;
}

/* ── Partner card ────────────────────────────────────────────────────────── */
.pn-card {
    background:    var(--pn-color-bg-card);
    border:        1px solid var(--pn-color-border);
    border-radius: var(--pn-radius);
    box-shadow:    var(--pn-shadow);
    display:       flex;
    flex-direction: column;
    transition:    box-shadow .2s, transform .2s;
}

.pn-card:hover {
    box-shadow: var(--pn-shadow-hover);
    transform:  translateY(-2px);
}

.pn-card__body {
    padding: 1.1rem 1.25rem .75rem;
    flex:    1;
}

.pn-card__name {
    font-size:   1rem;
    font-weight: 700;
    margin:      0 0 .4rem;
    color:       var(--pn-color-text);
    line-height: 1.3;
}

.pn-card__location {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         .4rem;
    margin:      0 0 .5rem;
}

.pn-badge {
    display:       inline-block;
    background:    var(--pn-color-badge-bg);
    color:         var(--pn-color-badge-text);
    border-radius: 4px;
    padding:       .15rem .5rem;
    font-size:     .75rem;
    font-weight:   600;
}

.pn-city {
    font-size:  .875rem;
    color:      var(--pn-color-text-muted);
}

.pn-card__address,
.pn-card__phone {
    display:     flex;
    align-items: flex-start;
    gap:         .4rem;
    font-size:   .875rem;
    color:       var(--pn-color-text-muted);
    margin:      .25rem 0 0;
    line-height: 1.4;
}

.pn-card__address svg,
.pn-card__phone svg {
    flex-shrink: 0;
    margin-top:  .15rem;
    color:       var(--pn-color-text-muted);
}

.pn-card__actions {
    padding:          .75rem 1.25rem 1rem;
    display:          flex;
    gap:              .5rem;
    flex-wrap:        wrap;
    border-top:       1px solid var(--pn-color-border);
    background:       var(--pn-color-bg);
    border-radius:    0 0 var(--pn-radius) var(--pn-radius);
}

/* ── Info window ─────────────────────────────────────────────────────────── */
.pn-infowindow {
    min-width:  220px;
    max-width:  280px;
    font-size:  .875rem;
    color:      #111827;
    line-height: 1.5;
}

.pn-infowindow__name {
    display:     block;
    font-size:   .9375rem;
    font-weight: 700;
    margin:      0 0 .3rem;
}

.pn-infowindow__meta,
.pn-infowindow__address,
.pn-infowindow__phone {
    margin:    .15rem 0;
    color:     #4b5563;
    font-size: .8125rem;
}

.pn-infowindow__actions {
    display:    flex;
    gap:        .4rem;
    margin-top: .6rem;
}

.pn-infowindow__approx {
    margin:        .4rem 0 0;
    padding:       .25rem .4rem;
    font-size:     .75rem;
    color:         #92400e;
    background:    #fef3c7;
    border-radius: 4px;
}

/* Approximate-location badge on cards */
.pn-approx-badge {
    display:       inline-block;
    background:    #fef3c7;
    color:         #92400e;
    border-radius: 4px;
    padding:       .1rem .45rem;
    font-size:     .7rem;
    font-weight:   600;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
    .pn-content {
        grid-template-columns: 1fr;
    }

    .pn-map-wrap {
        position: static; /* don't stick on narrow screens */
    }
}

@media ( max-width: 768px ) {
    .pn-filters {
        grid-template-columns: 1fr 1fr;
    }

    .pn-filter-group:first-child {
        grid-column: 1 / -1; /* search full width */
    }

    .pn-filter-reset {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .pn-title {
        font-size: 1.5rem;
    }

    .pn-map {
        height: 300px;
    }
}

@media ( max-width: 480px ) {
    .pn-filters {
        grid-template-columns: 1fr;
    }

    .pn-card__actions {
        flex-direction: column;
    }

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

    .pn-btn--call {
        /* Slightly larger on mobile for tap target */
        padding: .75rem 1rem;
        font-size: 1rem;
    }
}

/* ── Hidden utility (used by JS) ─────────────────────────────────────────── */
[hidden] { display: none !important; }