/* ---------------------------------------------------------------------------
   Unit marketing flyer — a fixed 1080x1080 square card designed to be
   screenshotted / exported as a PNG and posted to Facebook Marketplace,
   Instagram, Craigslist, etc.

   The card is always laid out at exactly 1080x1080 CSS px so the export is
   pixel-identical regardless of screen size; `--flyer-scale` (set inline by
   the page) shrinks it visually to fit the viewport via a transform, which
   does not affect the html2canvas capture.
   --------------------------------------------------------------------------- */

@import url('/vendor/fonts/fonts.css');

:root {
  --f-navy: #002d56;         /* logo navy */
  --f-navy-soft: #12456f;
  /* The contact bar along the bottom uses the site header's green (style.css --green-dark) so a
     flyer and the website read as the same brand. Kept as its own variable because the flyer
     stylesheet is self-contained — it can't rely on style.css being loaded (the admin catalog
     page doesn't load it). */
  --f-green-dark: #1f3f27;
  --f-orange: #f1592a;       /* logo orange */
  --f-cream: #f7f5ef;
  --f-panel: #efe9e0;
  --f-ink: #2b2b28;
  --f-muted: #6a665e;
  --f-line: #d9d2c6;
  /* Cream gutter between photos. One value drives both the gaps between the four strip shots and
     the gap above them, so the strip pictures read as evenly framed on all three sides. */
  --f-gap: 6px;
}

/* ---- page chrome (not part of the exported card) ------------------------ */

/* The flyer page carries the normal site header and footer, so the body keeps the site's own
   styling from style.css — only the strip between them is themed here. */
.flyer-body .flyer-stage-wrap {
  background: #e9ecef;
  padding: 0 16px 28px;
}

.flyer-toolbar {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1d2333;
  /* Not sticky: the site navbar above it already is, and two stacked sticky bars fight. */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #dfe3ea;
}
.flyer-toolbar h1 { font-size: 16px; margin: 0 8px 0 0; }
.flyer-toolbar .spacer { flex: 1; }
.flyer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cdd3e0;
  background: #fff;
  color: #1d2333;
  border-radius: 8px;
  padding: 7px 12px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.flyer-btn:hover { background: #f4f6fa; }
.flyer-btn-primary { background: var(--f-navy); border-color: var(--f-navy); color: #fff; }
.flyer-btn-primary:hover { background: #063c6e; }
.flyer-btn[disabled] { opacity: .45; pointer-events: none; }
.flyer-note { font-size: 13px; color: #6b7280; }
.flyer-note b { color: #b45309; }

.flyer-stage {
  /* Reserves the on-screen footprint of the scaled-down card. */
  width: calc(1080px * var(--flyer-scale, 1));
  height: calc(1080px * var(--flyer-scale, 1));
  margin: 0 auto;
}

/* ---- the exported card -------------------------------------------------- */

.flyer {
  width: 1080px;
  height: 1080px;
  transform: scale(var(--flyer-scale, 1));
  transform-origin: top left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--f-cream);
  color: var(--f-ink);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}

/* ============================ 1. HERO ==================================== */

/* Height is a compromise with the 1080px square: the source photos are 3:2, so the taller this
   band is, the less of each image `object-fit: cover` has to crop away. 548px puts the hero at
   ~1.97:1 (vs 2.31:1 when it was a 468px letterbox) and leaves the strip and details their
   measured minimums. 542 + 6 (the gap below) is the old 548. */
.f-hero {
  position: relative;
  height: 542px;
  display: flex;
  background: #cfcabf;
}
/* One full-bleed photo across the whole hero. */
.f-hero-main { position: relative; flex: 1 1 auto; overflow: hidden; }
.f-hero-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Cream scrim so the headline stays readable over any photo. Stops are tuned for the full
   1080px width: solid behind the text block, clear by the right third. */
.f-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(247, 245, 239, .97) 0%,
    rgba(247, 245, 239, .95) 26%,
    rgba(247, 245, 239, .74) 40%,
    rgba(247, 245, 239, .22) 54%,
    rgba(247, 245, 239, 0) 66%);
}

.f-hero-body {
  position: absolute;
  inset: 0;
  padding: 42px 44px 0;
  display: flex;
  flex-direction: column;
}

.f-logo {
  position: absolute;
  top: 34px;
  right: 34px;
  z-index: 2;
  background: rgba(255, 255, 255, .9);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.f-logo img { display: block; height: 62px; width: auto; }

.f-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--f-navy);
}
.f-eyebrow svg { width: 17px; height: 17px; fill: var(--f-orange); }

.f-address {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 42px;
  font-weight: 500;
  margin: 12px 0 0;
  letter-spacing: -.01em;
  color: var(--f-ink);
}
.f-unit {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 84px;
  font-weight: 600;
  line-height: .98;
  margin: 2px 0 0;
  color: var(--f-navy);
}
.f-unit-sub {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 14px 0 0;
  color: var(--f-muted);
}
.f-blurb {
  font-size: 19px;
  line-height: 1.45;
  max-width: 460px;
  margin: 16px 0 0;
  color: #3d3a34;
}

/* Rent / deposit / available tiles */
.f-tiles { display: flex; gap: 14px; margin-top: auto; padding-bottom: 26px; }
.f-tile {
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(0, 45, 86, .10);
  border-radius: 12px;
  padding: 14px 20px 16px;
  min-width: 146px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.f-tile svg { width: 26px; height: 26px; margin-bottom: 6px; fill: none; stroke: var(--f-navy); stroke-width: 1.6; }
.f-tile-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--f-muted);
}
.f-tile-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 4px;
  color: var(--f-navy);
}
.f-tile-value.is-date { font-size: 25px; line-height: 1.15; }
.f-tile-unit { font-size: 12px; font-weight: 600; color: var(--f-muted); margin-top: 2px; }

.f-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background: var(--f-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 20px 7px 44px;
  border-bottom-right-radius: 12px;
}

/* ============================ 2. PHOTO STRIP ============================= */

/* 174px makes each of the four cells ~1.53:1 against the source photos' native 1.50 — so the
   strip shots are essentially uncropped. */
/* margin-top matches the inter-photo gap so each strip shot has an even cream gutter on its left,
   right and top — the hero no longer sits flush against them. The 6px comes out of the hero's
   height (548 -> 542) rather than the strip's, because the strip height was chosen to match the
   photos' native 3:2 aspect and shortening it would start cropping them. */
.f-strip { display: flex; gap: var(--f-gap); margin-top: var(--f-gap); height: 174px; background: var(--f-cream); }
.f-strip figure { flex: 1 1 0; margin: 0; overflow: hidden; background: #ded8cd; }
.f-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================ 3. DETAILS ================================= */

.f-details {
  flex: 1 1 auto;
  display: flex;
  gap: 22px;
  padding: 18px 40px 6px;
  min-height: 0;
}
.f-col-about { flex: 0 0 258px; min-width: 0; }
.f-col-specs { flex: 1 1 auto; min-width: 0; border-left: 1px solid var(--f-line); padding-left: 22px; }
.f-col-check { flex: 0 0 236px; min-width: 0; display: flex; flex-direction: column; }

.f-h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--f-navy);
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--f-orange);
  display: inline-block;
}
.f-about-text { font-size: 14px; line-height: 1.5; margin: 4px 0 0; color: #45423b; }

.f-specs { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0 18px; }
.f-spec { display: flex; align-items: center; gap: 8px; min-width: 0; }
.f-spec svg { width: 28px; height: 28px; fill: none; stroke: var(--f-navy); stroke-width: 1.5; flex: none; }
.f-spec-value { font-family: 'Playfair Display', Georgia, serif; font-size: 23px; font-weight: 700; line-height: 1; color: var(--f-ink); white-space: nowrap; }
.f-spec-label { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--f-muted); margin-top: 3px; line-height: 1.25; }

.f-features { display: flex; gap: 8px; margin-top: 10px; }
.f-feature { flex: 1 1 0; text-align: center; min-width: 0; }
.f-feature-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--f-panel);
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-feature-icon svg { width: 27px; height: 27px; fill: none; stroke: var(--f-navy); stroke-width: 1.5; }
.f-feature-label { font-size: 10.5px; font-weight: 600; line-height: 1.28; color: #45423b; }

.f-checks {
  background: var(--f-panel);
  border-radius: 12px;
  padding: 16px 18px;
  list-style: none;
  margin: 0;
}
.f-checks li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.3; margin-bottom: 8px; color: #3d3a34; }
.f-checks li:last-child { margin-bottom: 0; }
.f-checks svg { width: 14px; height: 14px; flex: none; margin-top: 2px; fill: none; stroke: var(--f-orange); stroke-width: 2.4; }

.f-script {
  font-family: 'Parisienne', 'Snell Roundhand', cursive;
  font-size: 27px;
  /* The script face has deep descenders that ride ~1px past their line box; harmless, the
     column has room below it. */
  line-height: 1.1;
  text-align: right;
  color: var(--f-navy);
  margin: auto 4px 0 0;
}

/* ============================ 4. FOOTER ================================== */

.f-footer {
  flex: 0 0 auto;
  height: 96px;
  background: var(--f-green-dark);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 40px;
}
.f-footer-phone { display: flex; align-items: center; gap: 15px; }
.f-phone-badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* Badge icon follows the bar's colour, not the logo navy, or it reads as a leftover. */
.f-phone-badge svg { width: 27px; height: 27px; fill: var(--f-green-dark); }
.f-phone-number { font-size: 30px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.f-phone-cta { font-size: 13.5px; color: #cfdfd3; line-height: 1.3; margin-top: 2px; max-width: 330px; }
.f-footer-rule { width: 1px; align-self: stretch; margin: 22px 0; background: rgba(255, 255, 255, .22); }
.f-footer-links { margin-left: auto; text-align: right; font-size: 15px; line-height: 1.7; }
/* Scan-to-apply block at the right end of the contact bar. The code is sized to the bar's height
   (76px in a 96px bar) so it stays large enough to scan from a printed flyer. */
.f-footer-qr { display: flex; align-items: center; gap: 12px; flex: none; }
.f-footer-qr-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
  color: #fff;
}
.f-footer-qr img {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
}
.f-footer-links div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.f-footer-links svg { width: 15px; height: 15px; fill: #f1592a; }
.f-footer-mark { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; letter-spacing: .04em; }
/* Muted green-grey rather than the old blue-grey, so it sits on the green bar. */
.f-footer-mark span { display: block; font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: .3em; color: #a9c2b0; margin-top: 2px; }

/* ---- index page --------------------------------------------------------- */

.fx-wrap { max-width: 1120px; margin: 0 auto; padding: 20px 16px 60px; }
.fx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-head h1 { margin: 0; font-size: 24px; }
.fx-back { color: #2f5d3a; font-weight: 600; text-decoration: none; }
.fx-muted { color: #6b7280; font-size: 13.5px; line-height: 1.5; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; margin-top: 18px; }
.fx-card {
  display: block;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.fx-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.fx-thumb { aspect-ratio: 4 / 3; background: #ded8cd; }
.fx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-body { padding: 10px 12px 12px; }
.fx-title { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.fx-meta { font-size: 12.5px; color: #6b7280; margin-top: 3px; }
.fx-src { font-size: 11.5px; color: #92400e; margin-top: 5px; }
.fx-pill { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; }
.fx-pill-live { background: #e6f4ea; color: #1e6b34; }
.fx-pill-off { background: #f1f2f4; color: #6b7280; }

@media print {
  /* Print the card and nothing else. The page carries the site header, footer, mobile action bar
     and the floating chat / book-a-tour widgets; every one of them has to go, or a printed or
     saved-as-PDF flyer picks up navigation furniture. */
  .flyer-toolbar,
  .navbar,
  .sitewide-promo-banner,
  .footer,
  .mobile-action-bar,
  .r4chat-launch, .r4chat-panel,
  .r4tour-launch, .r4tour-modal { display: none !important; }

  .flyer-body .flyer-stage-wrap { background: none; padding: 0; }
  .flyer-stage { width: auto; height: auto; margin: 0; }
  .flyer {
    transform: none;
    box-shadow: none;
    /* Without this most browsers drop the cream background and the navy footer bar when printing,
       which would leave the footer's white text on white paper. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.flyer-body { background: #fff; }
  @page { size: 1080px 1080px; margin: 0; }
}