/** print-modern.css — "Modern" template
 *  Duplicate of print-classic.css with a scoped colour override.
 *  --hui-heading is redeclared on .hui-fs-page itself (not :root), so it
 *  reliably overrides the inherited navy value for everything under it
 *  (borders, address text, floor tables) regardless of stylesheet load
 *  order — this is a plain child-overrides-parent CSS custom property
 *  cascade, not a var() fallback trick. */

/* Safe to target html/body directly — this stylesheet only loads on the
   Feature Sheet page itself (conditionally enqueued in assets.php). */
html, body {
    background: #ffffff !important;
    margin: 0;
    padding: 0;
}

/* @page margin is the PHYSICAL FLOOR — always 0.2in, never changes.
   The visual "margin" staff sees is actually .hui-fs-page's own padding,
   which starts loose (0.75in) and shrinks toward this same 0.2in floor
   as content needs more room. This is tier 1 of the shrink system —
   tried first, before font/image/table compression. */
@page {
    size: letter;
    margin: 0.2in;
}

.hui-fs-page {
    /* Modern template override — replaces Classic's navy with deep wine
       for every descendant that references var(--hui-heading, ...) */
    --hui-heading: #6b1e3d;

    box-sizing: border-box;
    width: 8.1in;   /* 8.5in - 0.2in physical margin * 2 */
    height: 10.6in; /* 11in  - 0.2in physical margin * 2 */
    margin: 0 auto;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: var(--hui-ink, #4a4a4a);

    /* TOP/BOTTOM are FIXED — never adjusted, so the address line always sits
       in the same vertical spot regardless of content or template. Only
       LEFT/RIGHT padding is the adjustable lever (0.75in loose -> 0.2in floor). */
    --hui-fs-pad-x: 0.75in;
    padding-top: 0.2in;
    padding-bottom: 0.2in;
    padding-left: var(--hui-fs-pad-x);
    padding-right: var(--hui-fs-pad-x);

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "mls      mls"
        "address  address"
        "headline headline"
        "stats    stats"
        "image    image"
        "floors   floors"
        "remarks  remarks"
        "footer   footer";
    gap: 12px;
    align-content: start; /* top-aligned — content never centers/stretches vertically */

    border: 1px solid #ddd; /* screen-only guide */
}

.hui-fs-page * { box-sizing: border-box; }

/* ── Layout toggle: side-by-side (image left, floors right) ───────────────── */
.hui-fs-page.layout-sidebyside {
    grid-template-areas:
        "mls      mls"
        "address  address"
        "headline headline"
        "stats    stats"
        "image    floors"
        "remarks  remarks"
        "footer   footer";
}

/* ── Grid area assignments ──────────────────────────────────────────────────*/
.hui-fs-mls      { grid-area: mls; }
.hui-fs-headline { grid-area: headline; }
.hui-fs-stats    { grid-area: stats; }
.hui-fs-image-wrap { grid-area: image; }
.hui-fs-floors  { grid-area: floors; }
.hui-fs-remarks { grid-area: remarks; }
.hui-fs-footer  { grid-area: footer; }

/* ── MLS# ────────────────────────────────────────────────────────────────────*/
.hui-fs-mls {
    text-align: right;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    font-weight: 700;
    font-style: italic;
    color: var(--hui-muted, #7a7a7a);
}

/* ── Address — condensing handled by JS via inline font-size/letter-spacing;
   text-align here controls the template's default alignment ─────────────── */
/* ── Address wrapper — the decorative box (border/shadow/uppercase/padding).
   Stays static, never scaled — only its inner text element gets condensed,
   so the border/shadow are never visually distorted by scaleX(). Its
   overflow:hidden is a pure safety-clip for sub-pixel rounding only, not
   a truncation mechanism (no ellipsis here). ─────────────────────────────*/
.hui-fs-address-wrap {
    grid-area: address;
    width: 100%;
    border: 4px double var(--hui-heading, #1e2d3d);
    padding: 10px 16px;
    box-shadow: 6px 6px 0 0 var(--hui-heading, #1e2d3d);
    overflow: hidden;
}

/* ── Address text — JS condenses THIS element only (letter-spacing, then
   scaleX). No overflow/ellipsis here — nothing may pre-truncate the text
   before the computed scale is applied, or the transform arrives too late
   to matter (this was the bug: ellipsis truncates at layout time, before
   any transform is painted). ────────────────────────────────────────────*/
.hui-fs-address {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 16pt;
    color: var(--hui-heading, #1e2d3d);
    margin: 0;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    white-space: normal; /* default — respects manual <br> breaks; JS sets nowrap only when attempting auto-condense on single-line addresses */
    transform-origin: center center;
}

/* ── Headline — centered tagline below address, above stats ────────────────*/
.hui-fs-headline {
    font-family: Arial, sans-serif;
    font-size: 12pt;
    font-style: italic;
    font-weight: 700;
    text-align: center;
    color: #000;
    line-height: 1.3;
}

/* ── Stats block — one field per row, all-caps ──────────────────────────────*/
/* ── Stats/Info block — Grid-based colon alignment ──────────────────────────
   Two-column grid: label column auto-sizes to the LONGEST label across all
   rows (this is what makes every colon line up — a CSS Grid track's width
   is shared/consistent across all rows in the same container, no JS needed
   for the alignment itself). Each .hui-fs-stat-line uses display:contents
   so its two child spans become direct grid items of the parent grid. ────*/
.hui-fs-stats {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 8px;
    row-gap: 2px;
    font-size: 11pt;
    text-transform: uppercase;
}
.hui-fs-stat-line {
    display: contents;
}
.hui-fs-stat-label {
    font-weight: 700;
    font-style: italic;
    text-align: left;
    white-space: nowrap;
    color: var(--hui-heading, #1e2d3d);
}
.hui-fs-stat-value {
    font-weight: 700;
    font-style: normal;
    text-align: left;
    color: var(--hui-ink, #4a4a4a);
}
.hui-fs-price-value {
    font-style: italic;
}
.hui-fs-old-price-strike {
    text-decoration: line-through;
    margin-left: 4px;
    opacity: 0.75;
}

/* ── Image — fixed-height wrapper + flex centering guarantees the image
   always scales down to fit entirely inside, both directions, no
   truncation possible (max-height alone + inline-block was unreliable) ──*/
.hui-fs-image-wrap {
    width: 100%;
    height: 3.6in;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #000;
}
.hui-fs-image-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
/* Side-by-side: image column is narrower, cap height a bit shorter */
.layout-sidebyside .hui-fs-image-wrap {
    height: 3in;
}

/* ── Floors — Residential (room/dims table) ────────────────────────────────*/
.hui-fs-floors {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hui-fs-floor {
    border: 3px double var(--hui-heading, #1e2d3d);
    padding: 8px 12px;
    font-family: Arial, sans-serif;
}
.hui-fs-floor-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hui-muted, #7a7a7a);
    border-bottom: 3px double var(--hui-heading, #1e2d3d);
    padding-bottom: 3px;
    margin-bottom: 3px;
}
.hui-fs-room-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 3px 0;
    border-top: 3px double var(--hui-heading, #1e2d3d);
}
.hui-fs-room-row:first-of-type { border-top: none; }
.hui-fs-room-row.no-border {
    border-top: none;
    padding-top: 0;
    margin-top: -4px;
}

/* ── Floors — Commercial/Industrial (plain free text, no room parsing) ─────*/
.hui-fs-floor-text {
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-line; /* respects staff's line breaks in the textarea */
    border: 3px double var(--hui-heading, #1e2d3d);
    padding: 8px 12px;
}

/* ── Remarks ─────────────────────────────────────────────────────────────────*/
.hui-fs-remarks {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.55;
}

/* ── Footer placeholder ─────────────────────────────────────────────────────*/
.hui-fs-footer {
    margin-top: auto;
    height: 0.8in;
    border-top: 1px solid var(--hui-rule, #d4c9b0);
    font-size: 0.7rem;
    color: var(--hui-muted, #7a7a7a);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Overflow warning banner (screen only) ─────────────────────────────────*/
.hui-fs-warning {
    max-width: 8.1in;
    margin: 0 auto 10px;
    padding: 10px 14px;
    background: #fff3cd;
    border: 1px solid #e0a800;
    color: #6b5300;
    font-size: 0.85rem;
    font-family: sans-serif;
    display: none;
}
.hui-fs-warning.visible { display: block; }

/* ── Edit/Print toolbar (screen only) ──────────────────────────────────────*/
.hui-fs-toolbar {
    max-width: 8.1in;
    margin: 20px auto 10px;
    display: flex;
    gap: 10px;
}
.hui-fs-toolbar button {
    padding: 8px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--hui-rule, #d4c9b0);
    background: var(--hui-heading, #1e2d3d);
    color: #fff;
}

/* ── Print-only adjustments ─────────────────────────────────────────────────*/
@media print {
    .hui-fs-page { border: none; margin: 0; }
    .hui-fs-no-print { display: none !important; }
}

/* NOTE: assumes the WP page hosting [hui_feature_sheet] uses a blank/canvas
   page template (e.g. Elementor Canvas) with no theme header/nav/footer. */