--------------------------------------------------------------------------------
/* ============================================================
 * Compliance footer — realty logo
 * ============================================================
 * Shared by all FOUR public pages. index.html uses the hand-authored gw- design
 * system; terms / privacy-policy / your-privacy-choices use the purged Tailwind
 * build. One stylesheet rather than four inline copies, for the same reason
 * config.py:1566-1573 gives about the identity check itself: two hand-written
 * copies of one rule WILL drift.
 *
 * NO-OP UNLESS A LOGO IS ACTUALLY RENDERED.
 *   The LAYOUT rules are scoped to .has-logo, which /static/js/identity.js adds
 *   ONLY after the <img> has fired its load event in realtor mode. In company
 *   mode — and in realtor mode with no logo file, and on any /get-identity
 *   failure — the wrapper stays a plain block containing one block, layout-
 *   identical to the markup it replaces.
 *   Three rules below are deliberately NOT scoped to .has-logo, and each is
 *   provably inert without it: the [hidden] guard only strengthens an
 *   already-hidden element; `flex` on an element that is not a flex item has no
 *   effect; and the img rule can only match an <img> that identity.js creates,
 *   which happens exclusively in realtor mode. Do not add any OTHER unscoped
 *   rule here — company-mode rendering must stay byte-identical.
 *
 * SIZING — 40px TALL, width follows the image, capped.
 *   See realty_logo_draft.txt PART 5. In short: the identity block is 100-131px
 *   tall, and 40px is simultaneously the 40% subordination ceiling set by its
 *   shortest case (5 rows x 20px on the legal pages) and the legibility floor
 *   for a square/stacked lockup. It is also the standalone logo precedent at
 *   index.html:1223, and exactly two line boxes — so the mark optically
 *   brackets agent_name_title + brokerage_name, the two state-mandated
 *   disclosure lines. The width cap exists because the logo need not be square:
 *   at 40px tall a 5:1 wordmark is already 200px wide, and nothing validates
 *   the file that gets placed on the server.
 * ============================================================ */

/* Wrapper around #footerLogo + #footerIdentity. Deliberately carries NO
   display / margin / padding of its own: without .has-logo it must be an
   invisible block-in-block nesting. */
.gw-identity-row.has-logo {
    display: flex;
    flex-direction: column;   /* phones: logo stacked ABOVE the text */
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* THREE DECLARATIONS, THREE DIFFERENT REASONS. None is cosmetic.
   Selector is (1,2,0), so it beats the `.mt-1` utility (0,1,0) that the three
   legal pages put on this element, and it is scoped to .has-logo so company mode
   never sees any of it.

   margin-top:0 — the legal pages' `.mt-1` is 4px. Once .has-logo lands,
     #footerIdentity is a FLEX ITEM, and flex items' margins do not collapse, so
     that 4px stacks on top of the 12px `gap` and those pages would sit 16px
     below the logo while index.html — which has no .mt-1 — sits at 12px. Zeroing
     it here rather than inside the >=640px block keeps all four pages identical
     in BOTH the stacked and the side-by-side layout.

   min-width:0 — releases the AUTOMATIC MINIMUM SIZE. A flex item's min-width
     computes to `auto`, i.e. its min-content width, and flex-shrink cannot
     compress it below that. For prose the min-content width is the longest word
     and nothing goes wrong; for `<a>...</a>` around an email address it is the
     WHOLE ADDRESS, because that is one unbreakable token — and agent_email is
     capped at 200 characters (main.py:10707). Without this line a long address
     overflows the footer horizontally at >=640px instead of wrapping.

   overflow-wrap:anywhere — min-width:0 lets the BOX shrink; this lets the
     over-long token itself break. Both are needed: with only min-width:0 the
     text still spills out of a now-narrow box.
   See PART 5.7 for the full derivation and for why this is scoped rather than
   fixed globally. */
.gw-identity-row.has-logo #footerIdentity {
    margin-top: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* SPECIFICITY GUARD, NOT TIDYING — DO NOT REMOVE.
   tailwind.min.css ships `[hidden]{display:none}` at specificity (0,1,0) and is
   loaded FIRST on all four pages. Any same-specificity display rule declared
   later would beat it and render the logo despite the attribute. This selector
   is (0,2,0), so it wins regardless of source order. Same bug class index.html
   documents at lines 795-800 and 1218-1220. */
.gw-footer-logo[hidden] { display: none; }

/* The host is the flex ITEM (the <img> inside it is not). flex-shrink defaults
   to 1, so without this the mark would be squeezed in a tight row while the
   image inside kept its own width and overflowed. #footerIdentity deliberately
   KEEPS the default flex-shrink:1, so any width pressure lands on the text —
   which wraps — instead of on the logo or the footer's bounds. */
.gw-footer-logo { flex: 0 0 auto; }

/* ⚠ THE `.gw-identity-row` PREFIX IS LOAD-BEARING — DO NOT SIMPLIFY THIS
   SELECTOR TO `.gw-footer-logo img`, AND DO NOT MOVE #footerLogo OUT OF THE
   WRAPPER IN THE MARKUP.
   index.html:803 is <body class="gw-body"> and index.html:103 declares
       .gw-body img{max-width:100%;height:auto}
   which is specificity (0,1,1) — identical to `.gw-footer-logo img`. That rule
   lives in index.html's INLINE <style> (lines 61-801), which is parsed after
   this linked file, so on a tie it WINS: the logo would render at its intrinsic
   height (120px for a 3x asset) on the home page while looking correct on the
   three legal pages, which have no .gw-body. The prefix makes this (0,2,1),
   which wins on specificity and is therefore immune to link order.

   THE COUPLING THIS CREATES, STATED PLAINLY: the geometry below only applies
   while the host is INSIDE an element carrying .gw-identity-row. Renaming that
   wrapper class, or hoisting #footerLogo up a level in any of the four HTML
   files, drops this rule and hands index.html's home-page logo straight back to
   `.gw-body img` at its intrinsic 120px. It is the same defect as D1, arriving
   through a MARKUP edit instead of a CSS one, and — exactly as with D1 — the
   three legal pages would still look right, so a legal-pages-only check would
   pass. If the wrapper class ever changes, change it here in the same commit.

   HEIGHT is fixed; WIDTH follows the image's aspect ratio and is capped. When
   max-width binds — anything wider than 5:1 — the box stays 40px tall and
   object-fit:contain fits the image by width and centres it vertically, so the
   aspect ratio is never distorted and the box never overflows.
   `display:block` is redundant against Tailwind's preflight
   (`img,object,svg,video{display:block}`) but index.html does not apply that
   reset to its own elements; stating it keeps the four pages identical. */
.gw-identity-row .gw-footer-logo img {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
}

@media (min-width: 640px) {
    /* Side by side, centred as a unit — correct for the three legal pages
       (their footer is text-center) and for index.html below 1024px, where
       .gw-footer-bottom is still a centred column. */
    .gw-identity-row.has-logo {
        flex-direction: row;
        gap: 16px;
    }

    /* Centred text beside a left-hand logo reads badly, so left-align it — but
       ONLY when a logo is present, or this would silently restyle company-mode
       legal pages that are text-center today. The selector is (1,2,0).
       NOTE on index.html between 640px and 1023px: `.gw-footer-bottom` is still
       text-align:center there, so the identity text goes left while the
       "Contact" title above it and the copyright beside it stay centred. That is
       intended — the text has to align to the logo, not to the column — but it
       is the one place the footer looks asymmetric. Covered by T15a. */
    .gw-identity-row.has-logo #footerIdentity {
        text-align: left;
    }

    /* Budget at this exact breakpoint (PART 5.7): index.html has 592px of
       content here — its footer padding is still 24px until 1024px — leaving
       376px for the text once a 200px logo and the 16px gap are taken out. */
    .gw-identity-row .gw-footer-logo img { max-width: 200px; }
}

@media (min-width: 1024px) {
    /* index.html ONLY. At >=1024px .gw-footer-bottom flips to
       `flex-direction:row; justify-content:space-between; text-align:left`
       (index.html:758), putting the contact block on the right, left-aligned.
       The logo/text pair must follow. `.gw-footer` exists only on index.html —
       the three legal pages use a classless <footer> — so this cannot leak. */
    .gw-footer .gw-identity-row.has-logo {
        justify-content: flex-start;
    }
}