/* ========================================================================
   site-plan.css  ·  Vendor map page (/VendorMap) — ENH-7.1 Phase 1
   ------------------------------------------------------------------------
   Static printable site plan. No interactive booth behavior. Phase 3 will
   add a separate stylesheet (or extend this one) for the popover module.
   ======================================================================== */

/* ----- Site-plan container ------------------------------------------- */
.site-plan-container {
    max-width: 1100px;
    margin: 0 auto 2rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.25rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.site-plan-container .site-plan {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

/* ----- Action row (print + download) --------------------------------- */
.site-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.site-plan-actions .btn-secondary {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: 2px solid #fd5a28;
    border-radius: 6px;
    background: #fff;
    color: #fd5a28;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    transition: background .15s, color .15s;
}

.site-plan-actions .btn-secondary:hover,
.site-plan-actions .btn-secondary:focus {
    background: #fd5a28;
    color: #fff;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* ----- Orientation note ---------------------------------------------- */
.site-plan-orientation {
    max-width: 1000px;
    margin: 0 auto 1rem;
    color: #4a4a4a;
    font-size: .95rem;
    text-align: center;
    line-height: 1.5;
}

.site-plan-orientation strong { color: #1a1a1a; }

/* ----- Zoom controls bar --------------------------------------------- */
.site-plan-zoom-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.sp-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1.5px solid #ccc;
    border-radius: 5px;
    background: #fff;
    color: #333;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background .12s, border-color .12s;
}

.sp-zoom-btn:hover,
.sp-zoom-btn:focus {
    background: #f5f5f5;
    border-color: #fd5a28;
    outline: 2px solid #fd5a28;
    outline-offset: 1px;
}

.sp-zoom-reset {
    width: auto;
    padding: 0 .65rem;
    font-size: .85rem;
}

.sp-zoom-level {
    min-width: 3.5rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    color: #555;
    font-variant-numeric: tabular-nums;
}

.sp-zoom-hint {
    font-size: .8rem;
    color: #999;
    margin-left: .25rem;
}

/* ----- Print stylesheet ---------------------------------------------- */
@media print {
    /* Force Letter portrait with narrow margins. */
    @page {
        size: letter portrait;
        margin: 0.5in;
    }

    /* Aggressive display:none to collapse layout space.
       The SVG is self-contained — its title band declares "Mountain
       Mandarin Festival 2026 — Site Plan" with the venue address, and
       the legend lives inside the SVG too. So a printed handout needs
       only the SVG container; everything else (header, page hero,
       directions button, satellite iframe, heading, orientation note,
       action buttons, footer) is removed for print.
       The :not(.site-plan-container) selector on .section's children
       removes all sibling content while preserving the container itself. */
    body > *:not(main) {
        display: none !important;
    }
    main > *:not(.section),
    main > .section > *:not(.site-plan-container) {
        display: none !important;
    }

    /* Hide interactive chrome — not useful on paper */
    .site-plan-zoom-bar {
        display: none !important;
    }

    /* Reset padding on the parent containers so the SVG starts at the
       page's content edge with no vertical chrome above it. The default
       site.css gives .section { padding: 3rem 1.5rem; } which adds ~0.5"
       above and below — enough on its own to push the SVG to a second page. */
    main,
    main > .section {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    /* Strip layout chrome around the now-only-visible container. */
    .site-plan-container {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Size the SVG explicitly to fit within the usable page area.
       The viewBox aspect is ~0.729:1 (W:H). Setting height to 10in
       (full usable vertical inside 0.5" top/bottom margins) and letting
       width compute from the SVG's intrinsic aspect via width:auto
       produces ~7.30" wide, which fits within the 7.5" usable width.
       The SVG's own preserveAspectRatio="xMidYMid meet" centers the
       content horizontally. */
    .site-plan-container .site-plan {
        display: block !important;
        /* 9.7in (just under the 10in usable height) gives the printer
           room to fit the SVG plus container chrome on one page without
           tripping page-break-inside avoidance edge cases. */
        height: 9.7in !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        page-break-inside: avoid;
        page-break-before: avoid;
        page-break-after: avoid;
    }

    /* Ensure colors print (Chrome/Edge respect this; Firefox always does). */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}