/* =============================================================
   JustVybe — Directory print stylesheet
   Produces a professional local-guide PDF / hard copy.
   All rules scoped to @media print  (+ .print-only screen hide).
   ============================================================= */

/* ── Hide print-only elements on screen ──────────────────────── */
.print-only {
    display: none !important;
}

/* ═════════════════════════════════════════════════════════════
   PRINT STYLES
   ═════════════════════════════════════════════════════════════ */
@media print {

    /* ── Re-enable print-only elements ───────────────────────── */
    .print-only {
        display: block !important;
    }

    /* ── Global print reset ───────────────────────────────────── */
    *,
    *::before,
    *::after {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* ── Hide all screen-only chrome ─────────────────────────── */
    .sidebar,
    .topbar,
    .bottomnav,
    .nav-overlay,
    .site-footer,
    .filter-bar,
    .dir-jump,
    .feed-header,
    .dir-row__arrow,
    .biz-badge,
    .flash,
    .cookie-banner,
    .empty-state .btn {
        display: none !important;
    }

    /* ── Flatten app layout ───────────────────────────────────── */
    .app-layout   { display: block !important; }
    .app-main     { padding: 0 !important; margin: 0 !important; }
    .main-content { padding: 0 !important; margin: 0 !important; }
    .container    { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

    /* ── Page setup ───────────────────────────────────────────── */
    @page {
        size: A4 portrait;
        margin: 20mm 16mm 20mm 16mm;
    }

    html,
    body {
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 9.5pt;
        line-height: 1.45;
        color: #000;
        background: #fff;
    }

    /* ══════════════════════════════════════════════════════════
       PAGE 1 — COVER
       ══════════════════════════════════════════════════════════ */

    .print-cover {
        /* Fill the full A4 printable area */
        height: calc(297mm - 40mm); /* page height minus top+bottom margins */
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        break-after: page;          /* listings start on page 2 */
        page-break-after: always;   /* legacy fallback */
    }

    .print-cover__inner {
        width: 100%;
        max-width: 140mm;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* "JustVybe" wordmark */
    .print-cover__brand {
        font-family: Georgia, serif;
        font-size: 13pt;
        font-weight: 700;
        letter-spacing: .25em;
        text-transform: uppercase;
        color: #000 !important;
        margin-bottom: 10pt;
    }

    /* Decorative rule under brand */
    .print-cover__rule {
        width: 40mm;
        border-top: 2pt solid #000 !important;
        border-color: #000 !important;
        margin-bottom: 18pt;
    }

    /* Main directory title */
    .print-cover__title {
        font-family: Georgia, serif;
        font-size: 28pt;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: .01em;
        margin: 0 0 10pt;
        color: #000 !important;
    }

    /* Subtitle */
    .print-cover__subtitle {
        font-family: Georgia, serif;
        font-size: 11pt;
        font-style: italic;
        font-weight: 400;
        color: #444 !important;
        margin: 0 0 20pt;
    }

    /* Divider between subtitle and meta */
    .print-cover__divider {
        width: 24mm;
        border-top: 1pt solid #aaa !important;
        border-color: #aaa !important;
        margin-bottom: 16pt;
    }

    /* Meta table */
    .print-cover__meta {
        display: block;
        margin: 0 0 28pt;
        font-size: 8.5pt;
        color: #333 !important;
    }

    .print-cover__meta-row {
        display: flex;
        gap: 6pt;
        justify-content: center;
        margin-bottom: 4pt;
    }

    .print-cover__meta-row dt {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: 7.5pt;
        color: #555 !important;
    }

    .print-cover__meta-row dd {
        margin: 0;
        color: #333 !important;
    }

    /* Domain at the very bottom of the cover */
    .print-cover__footer-brand {
        font-size: 8pt;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #888 !important;
        border-top: 0.5pt solid #ccc !important;
        border-color: #ccc !important;
        padding-top: 8pt;
        width: 100%;
        text-align: center;
    }

    /* ══════════════════════════════════════════════════════════
       PAGE 2+ — LISTINGS
       ══════════════════════════════════════════════════════════ */

    /* Listings page header (print-only, right after page break) */
    .dir-print-listings-header {
        text-align: center;
        border-bottom: 3pt double #000 !important;
        border-color: #000 !important;
        padding-bottom: 7pt;
        margin-bottom: 16pt;
    }

    .dir-print-listings-title {
        font-family: Georgia, serif;
        font-size: 18pt;
        font-weight: 700;
        letter-spacing: .02em;
        margin: 0 0 3pt;
        color: #000 !important;
    }

    .dir-print-listings-sub {
        font-size: 8pt;
        color: #555 !important;
        margin: 0;
    }

    /* ── Category sections ────────────────────────────────────── */
    .dir-section {
        margin-bottom: 12pt;
        break-inside: auto;
    }

    .dir-section__title {
        font-family: Georgia, serif;
        font-size: 10.5pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        display: flex !important;
        justify-content: space-between;
        align-items: baseline;
        border-top: 1.5pt solid #000 !important;
        border-bottom: 0.5pt solid #555 !important;
        border-color: #000 !important;
        padding: 3pt 0 2pt;
        margin: 0 0 3pt;
        break-after: avoid;          /* never orphan a heading */
        page-break-after: avoid;
        color: #000 !important;
    }

    .dir-section__count {
        font-size: 7.5pt;
        font-weight: 400;
        font-style: italic;
        color: #666 !important;
        letter-spacing: 0;
        text-transform: none;
    }

    /* ── Listing grid ─────────────────────────────────────────── */
    .dir-list {
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

    /* ── Individual row ───────────────────────────────────────── */
    .dir-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;   /* vertically centre 2-line name vs 1-line phone */
        gap: 0 !important;
        padding: 3pt 0 !important;
        border-bottom: 0.4pt solid #ddd !important;
        border-color: #ddd !important;
        background: transparent !important;
        break-inside: avoid;
        page-break-inside: avoid;
        width: 100%;
        /* Cancel screen grid */
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }

    /* Business name — left side, 2-line cell (name + area) */
    .dir-row__name {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        flex-shrink: 0;
        max-width: 55%;
        overflow: hidden;
        grid-column: unset !important;
        grid-row: unset !important;
        flex-wrap: unset !important;
        align-items: flex-start !important;
    }

    .dir-row__name-link {
        display: block;
        font-size: 8.5pt;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        color: #000 !important;
        text-decoration: none !important;
    }

    /* Area / city — shown as sub-line under the name in print */
    .dir-row__name-area {
        display: block !important;   /* override default inline */
        font-size: 7pt;
        font-weight: 400;
        font-style: italic;
        color: #555 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        margin-top: 0.5pt;
    }

    /* Hide all screen badges and status indicators */
    .dir-row__name .biz-badge,
    .dir-row__name [class*="avail"],
    .dir-row__name [class*="badge"] {
        display: none !important;
    }

    /* Hide the separate area column — it's now inside the name cell */
    .dir-row__area {
        display: none !important;
    }

    /* Dot leader */
    .dir-row__dots {
        display: block !important;      /* override main.css display:none */
        flex: 1 1 auto;
        align-self: center;
        height: 1px;
        border-bottom: 1pt dotted #aaa !important;
        border-color: #aaa !important;
        margin: 0 5pt;
        min-width: 12pt;
        grid-column: unset !important;
        grid-row: unset !important;
    }

    /* Phone number — right side */
    .dir-row__phone {
        display: block !important;
        font-size: 8.5pt;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 1.3;
        color: #000 !important;
        grid-column: unset !important;
        grid-row: unset !important;
    }

    .dir-row__call {
        color: #000 !important;
        text-decoration: none !important;
    }

    /* Swap phone variants: hide raw, show formatted */
    .dir-row__phone-screen { display: none !important; }
    .dir-row__phone-print  { display: inline !important; }

    .dir-row__no-phone {
        color: #aaa !important;
    }

    /* ══════════════════════════════════════════════════════════
       PREMIUM LISTINGS — claimed businesses with a logo
       Show logo thumbnail + full address instead of city-only.
       Gate: is_claimed = 1 AND logo_path is set → dir-row--premium
       ══════════════════════════════════════════════════════════ */

    /* Logo thumbnail — hidden on screen via .print-only, shown here */
    .dir-row__logo {
        display: block !important;
        width:  11mm;
        height: 11mm;
        flex-shrink: 0;
        object-fit: contain;
        margin-right: 5pt;
        border: 0.4pt solid #ddd !important;
        border-radius: 1pt;
        align-self: flex-start;
        margin-top: 1pt;
    }

    /* Premium row: slightly taller, top-aligned so logo and multi-line name sit flush */
    .dir-row--premium {
        align-items: flex-start !important;
        padding: 4pt 0 4pt !important;
        border-bottom: 0.4pt solid #ccc !important;
    }

    /* Narrow the name cell by logo width so dots + phone keep their position */
    .dir-row--premium .dir-row__name {
        max-width: calc(55% - 16mm);
    }

    /* Full address line under the name — only rendered in premium rows */
    .dir-row__address-print {
        display: none !important; /* hidden on screen (print-only handles it) */
    }

    .dir-row--premium .dir-row__address-print {
        display: block !important;
        font-size: 7pt;
        font-style: normal;
        color: #444 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 1pt;
        line-height: 1.3;
    }

    /* Keep name font slightly larger for premium rows to differentiate */
    .dir-row--premium .dir-row__name-link {
        font-size: 9pt;
    }

    /* Area sub-line not needed on premium — address line replaces it */
    .dir-row--premium .dir-row__name-area {
        display: none !important;
    }

    /* ── Page-break helpers ───────────────────────────────────── */

    /*
     * Strategy:
     *  1. Never break immediately after a category heading — use break-before
     *     on the list (more reliable than break-after on the heading).
     *  2. Keep each business row together.
     *  3. Let sections themselves break freely so large categories don't create
     *     huge blank gaps by being forced onto a fresh page.
     *  4. widows/orphans at the text level as a fallback.
     */

    /* Never start a fresh page right between a heading and its first row */
    .dir-list {
        break-before: avoid;
        page-break-before: avoid;
    }

    /* Still tell the engine: don't break after the heading either (belt+braces) */
    .dir-section__title {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Don't orphan the first page's first section heading */
    .dir-section:first-of-type {
        break-before: avoid;
        page-break-before: avoid;
    }

    /* Keep every business row on one line */
    .dir-row {
        break-inside: avoid;
        page-break-inside: avoid;
        orphans: 1;
        widows: 1;
    }

    /* ── Running footer ───────────────────────────────────────── */
    /*
     * position:fixed in print repeats on every page (Chrome/Edge).
     * We add padding-bottom to the body so content never slides under it.
     */
    body {
        padding-bottom: 18pt !important;
    }

    .dir-print-footer {
        display: block !important;   /* override main.css display:none */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 14pt;
        padding-top: 3pt;
        border-top: 0.5pt solid #bbb !important;
        border-color: #bbb !important;
        font-size: 7.5pt;
        color: #666 !important;
        text-align: center;
        background: #fff !important;
    }

    /* ── Suppress href expansion after links ──────────────────── */
    a[href]::after           { content: none !important; }
    a[href^="/biz/"]::after  { content: none !important; }

}