/* Shop Directory — minimal styling
   Adjust colors/fonts to match your theme. Uses CSS Grid for the
   main content + sidebar layout. */

.ndq-wrap {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    align-items: start;
}

.ndq-main h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.ndq-intro {
    color: #666;
    margin-bottom: 32px;
}

.ndq-breadcrumb {
    margin-bottom: 16px;
}

.ndq-breadcrumb a {
    text-decoration: none;
    color: #555;
    font-size: 0.9rem;
}

.ndq-breadcrumb a:hover {
    text-decoration: underline;
}

/* State grid on landing pages */
.ndq-state-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ndq-state-grid li a {
    display: block;
    padding: 12px 16px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    text-decoration: none;
    color: #222;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ndq-state-grid li a:hover {
    border-color: #999;
    background: #fafafa;
}

/* City headings on state pages */
.ndq-city-heading {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 36px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #eee;
}

.ndq-shop-list {
    list-style: none;
    margin: 0 0 8px 0;
    padding: 0;
}

.ndq-shop {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ndq-shop-name {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.ndq-shop-address,
.ndq-shop-phone {
    font-size: 0.9rem;
    color: #555;
}

.ndq-shop-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.9rem;
    color: #2563eb;
    text-decoration: none;
}

.ndq-shop-link:hover {
    text-decoration: underline;
}

.ndq-shop-social {
    margin-top: 6px;
    display: flex;
    gap: 14px;
}

.ndq-shop-social a {
    font-size: 0.85rem;
    color: #555;
    text-decoration: none;
}

.ndq-shop-social a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.ndq-shop-desc {
    margin-top: 8px;
    font-size: 0.92rem;
    color: #444;
}

/* Sidebar (Google AdSense widget area) */
.ndq-sidebar {
    position: sticky;
    top: 24px;
}

.ndq-widget {
    margin-bottom: 24px;
}

.ndq-widget-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin-bottom: 8px;
}

/* Responsive: stack sidebar below content on smaller screens */
@media (max-width: 860px) {
    .ndq-wrap {
        grid-template-columns: 1fr;
    }
    .ndq-sidebar {
        position: static;
    }
}

/* Dedicated mobile ad grid (see includes/mobile-ad-grid.php).
   Hidden everywhere except phone screens, where it's shown ABOVE the
   states/listings as a 2-column grid of rectangular ad thumbnails. */
.ndq-mobile-ad-grid {
    display: none;
}

@media (max-width: 600px) {
    /* Hide the normal widget-based sidebar on phone — the dedicated
       mobile ad grid above replaces it there. Desktop/tablet are
       unaffected since this rule only applies under 600px. */
    .ndq-sidebar {
        display: none;
    }

    .ndq-mobile-ad-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 28px;
    }

    .ndq-mobile-ad-grid a {
        display: block;
    }

    .ndq-mobile-ad-grid img {
        width: 100%;
        height: 100px; /* rectangular — adjust to taste, keep both ads the same height */
        object-fit: cover;
        border-radius: 6px;
        display: block;
    }
}