/* RSI flyers — public one-page flyer styling.

   Standalone (does not load the portal stylesheet). --accent is set per flyer
   by an inline :root rule in the page head. Reads well on a phone, on a tablet
   in front of a customer, and on paper.

   The visual language is direction A2 ("Impact Block"), chosen by RSI in Aug
   2026 from the 26 design directions: a solid blue masthead, Archivo set tight
   and heavy, a green rule under the headline, and a tinted call-to-action panel
   above a solid blue footer. Because this stylesheet serves EVERY flyer, A2 is
   now the house style rather than the styling of one page.

   Type floor: body copy is 1rem/16px, which is the 12pt print minimum RSI
   asked for. Nothing that carries a sentence is set below it. */

/* Archivo, self-hosted as STATIC weights.
   Google serves Archivo as a VARIABLE font, and Chrome's print-to-PDF does
   not embed variable fonts. Every customer who used Print / Save as PDF on a
   flyer therefore got substituted type with synthesised bold. Pre-instanced
   static faces print correctly, and drop the only third-party request the
   page had. 56 KB for four weights, cached after first view. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/archivo-800.woff2') format('woff2');
}

:root {
  --rsi-blue:      #00529B;
  --rsi-blue-dark: #003E7E;
  --rsi-blue-pale: #a8c8e6;
  --accent:        #6CB33F;
  --ink:           #14202c;
  --ink-soft:      #3d4d5c;
  --muted:         #5a6b7b;
  --line:          #e2e8ef;
  --bg:            #eef2f6;
  --panel:         #eef4fa;
  --font: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 24px 16px;
  font-family: var(--font); font-size: 1rem; line-height: 1.55; color: var(--ink);
  background: var(--bg);
}

/* Sheet ------------------------------------------------------------------
   No padding on .flyer itself: the masthead and footer bleed to the edges the
   way they do on the printed sheet, so the inner blocks carry their own. */
.flyer {
  max-width: 820px; margin: 0 auto; background: #fff;
  border-radius: 12px; box-shadow: 0 3px 18px rgba(0,40,90,.10);
  overflow: hidden;
}

/* Masthead ---------------------------------------------------------------- */
.flyer-head { background: var(--rsi-blue); padding: 22px 44px 26px; }
.flyer-logo { max-height: 56px; width: auto; margin-bottom: 14px; display: block; }
.flyer-logo-text {
  display: flex; align-items: center; gap: 12px;
  color: #fff; font-size: 1.06rem; font-weight: 700; margin-bottom: 20px;
}
.flyer-logo-text span {
  display: inline-grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%; background: #fff; color: var(--rsi-blue);
  font-weight: 800; font-size: 1.05rem; letter-spacing: .5px;
  border: 4px solid var(--accent);
}
.flyer-headline {
  margin: 0; font-size: 2.6rem; font-weight: 700; line-height: 1.02;
  color: #fff; letter-spacing: -1.2px; text-wrap: balance;
}
/* The green rule that sits under the headline on the A2 sheet. */
.flyer-head::after {
  content: ""; display: block; height: 8px; width: 168px;
  background: var(--accent); margin: 18px 0 0;
}
.flyer-sub {
  margin: 16px 0 0; font-size: 1.18rem; font-weight: 600; line-height: 1.32;
  color: var(--rsi-blue-pale); max-width: 46ch;
}

/* Body -------------------------------------------------------------------- */
/* Hero. Most RSI imagery is a product shot on a transparent background rather
   than a full-bleed photograph, and stretching one of those to the full sheet
   width gives an 800px-tall block. Cap the height and center it on the tinted
   panel instead; a genuine landscape photo still fills the width. */
.flyer-hero { margin: 0; padding: 26px 44px; background: var(--panel); }
.flyer-hero img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 330px; width: auto; height: auto;
  object-fit: contain;
}

.flyer-intro {
  font-size: 1.18rem; font-weight: 600; line-height: 1.36; color: var(--ink-soft);
  margin: 0; padding: 30px 44px 0;
}

.flyer-points {
  list-style: none; margin: 0; padding: 26px 44px 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px;
}
.flyer-points li { position: relative; padding-left: 30px; line-height: 1.34; }
/* Tick drawn in CSS rather than an image, so it takes --accent per flyer and
   survives a grayscale print as a shape rather than a color. */
.flyer-points li::before {
  content: ""; position: absolute; left: 2px; top: .34em;
  width: 13px; height: 7px; border-left: 3.5px solid var(--accent);
  border-bottom: 3.5px solid var(--accent); transform: rotate(-45deg);
}

.flyer-body { padding: 26px 44px 0; color: var(--ink-soft); }
.flyer-body h2, .flyer-body h3, .flyer-body h4 {
  color: var(--rsi-blue); margin: 24px 0 8px; line-height: 1.22; letter-spacing: -.3px;
}
.flyer-body h2 { font-size: 1.42rem; } .flyer-body h3 { font-size: 1.18rem; } .flyer-body h4 { font-size: 1.04rem; }
.flyer-body p { margin: 0 0 13px; }
.flyer-body ul, .flyer-body ol { margin: 0 0 14px; padding-left: 22px; }
.flyer-body li { margin-bottom: 5px; }
.flyer-body img { max-width: 100%; height: auto; border-radius: 6px; }
.flyer-body a { color: var(--rsi-blue); }
.flyer-body blockquote {
  margin: 0 0 14px; padding: 4px 0 4px 16px;
  border-left: 5px solid var(--rsi-blue); font-weight: 600; color: var(--ink);
}
.flyer-body table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: .96rem; }
.flyer-body th, .flyer-body td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.flyer-body th { background: #f5f8fb; }

/* Call to action ---------------------------------------------------------- */
.flyer-cta {
  margin: 32px 0 0; padding: 24px 44px;
  background: var(--panel); border-top: 4px solid var(--accent);
}
.btn-cta {
  display: inline-block; padding: 15px 28px; background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 1.06rem; letter-spacing: .3px;
}
.btn-cta:hover { filter: brightness(.92); }

/* Enquiry form ------------------------------------------------------------ */
.flyer-form { margin: 0; padding: 28px 44px; background: #f7fafd; border-top: 1px solid var(--line); }
.flyer-form h2 { margin: 0 0 16px; color: var(--rsi-blue); font-size: 1.32rem; letter-spacing: -.3px; }
.flyer-form label { display: block; margin-bottom: 14px; font-weight: 600; font-size: .95rem; color: var(--muted); }
.flyer-form input, .flyer-form textarea {
  display: block; width: 100%; margin-top: 5px; padding: 11px 12px;
  border: 1px solid #c9d4de; border-radius: 7px; font: inherit; font-size: 1rem;
  color: var(--ink); background: #fff;
}
.flyer-form input:focus, .flyer-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.flyer-form textarea { resize: vertical; }
.flyer-form .f-row { display: flex; gap: 16px; }
.flyer-form .f-row label { flex: 1 1 0; }
.flyer-form button {
  padding: 14px 30px; border: 0; background: var(--rsi-blue); color: #fff;
  font: inherit; font-size: 1.04rem; font-weight: 700; cursor: pointer; letter-spacing: .3px;
}
.flyer-form button:hover { background: var(--rsi-blue-dark); }
.form-ok  { margin: 0; padding: 14px 16px; border-radius: 8px; background: #eaf6e2; color: #33691e; font-weight: 600; }
.form-err { margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: #fdecea; color: #b0271a; font-weight: 600; }
/* Honeypot — off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Index of flyers --------------------------------------------------------- */
.flyer-index { list-style: none; padding: 0 44px; margin: 0 0 26px; }
.flyer-index li { border-bottom: 1px solid var(--line); }
.flyer-index li:last-child { border-bottom: 0; }
.flyer-index a { display: block; padding: 16px 4px; text-decoration: none; color: var(--ink); }
.flyer-index a:hover { background: #f6f9fc; }
.fi-title { display: block; font-weight: 700; font-size: 1.12rem; color: var(--rsi-blue); }
.fi-sub   { display: block; color: var(--muted); font-size: .96rem; margin-top: 2px; }

/* Footer ------------------------------------------------------------------ */
.flyer-foot { background: var(--rsi-blue); color: #fff; padding: 20px 44px 22px; }
.foot-contact {
  display: flex; flex-wrap: wrap; gap: 10px 30px; margin-bottom: 10px;
  font-weight: 600; font-size: 1rem;
}
.foot-contact a { color: #fff; text-decoration: none; }
.foot-contact a:hover { text-decoration: underline; }
.foot-legal { margin: 0; color: var(--rsi-blue-pale); font-size: .88rem; }
.foot-print { margin: 16px 0 0; }
.btn-print {
  padding: 9px 18px; border: 1px solid rgba(255,255,255,.45); border-radius: 7px;
  background: transparent; color: #fff; cursor: pointer; font: inherit; font-size: .92rem;
}
.btn-print:hover { border-color: var(--accent); background: rgba(255,255,255,.08); }

.draft-bar {
  max-width: 820px; margin: 0 auto 14px; padding: 10px 16px; border-radius: 8px;
  background: #fff4d6; color: #7a5600; font-weight: 700; text-align: center; font-size: .95rem;
}

/* Small screens ----------------------------------------------------------- */
@media (max-width: 620px) {
  body { padding: 12px 10px; }
  .flyer { border-radius: 10px; }
  .flyer-head { padding: 20px 22px 22px; }
  .flyer-headline { font-size: 1.85rem; letter-spacing: -.8px; }
  .flyer-sub { font-size: 1.06rem; }
  .flyer-intro, .flyer-points, .flyer-body { padding-left: 22px; padding-right: 22px; }
  .flyer-points { grid-template-columns: 1fr; }
  .flyer-cta, .flyer-form, .flyer-foot { padding-left: 22px; padding-right: 22px; }
  .flyer-form .f-row { display: block; }
  .btn-cta { display: block; text-align: center; }
}

/* Paper -------------------------------------------------------------------
   A flyer is a ONE PAGE document. Staff and customers save it as PDF from the
   browser's print dialog, so the printed sheet is the deliverable — and a
   flyer that spills onto a second page is not a flyer.

   The budget, measured rather than guessed: US Letter at 96dpi is 816 x 1056px,
   less the 12mm @page margins, leaving a 725 x 965px content box. The first
   version of this stylesheet rendered 1063px and printed on two pages. The
   hero alone was 347px of that — a third of the sheet — because it was capped
   at 78mm plus 26px of figure padding.

   Everything below is sized against that 965px budget. If you change any of
   it, re-measure; do not assume.

   The masthead and footer are solid color and carry the identity, so they are
   forced to print. Without print-color-adjust a browser drops them and the
   sheet arrives with a white band where the branding should be. */
@media print {
  @page { size: letter; margin: 12mm; }
  html, body { height: auto; }
  body { background: #fff; padding: 0; font-size: 12pt; }
  /* zoom, not transform: zoom reflows the text at the new size, whereas a
     transform scales a laid-out box and leaves the page thinking it is
     still full height. Set by assets/js/flyer-print.js; defaults to 1 so
     the sheet is unchanged when the script does not run. */
  .flyer {
    max-width: none; box-shadow: none; border-radius: 0; overflow: visible;
    zoom: var(--print-fit, 1);
    /* Fill the sheet and push the footer to the foot of it. Without this the
       blue footer bar sits immediately under the body copy with a band of
       white beneath, and the page reads as unfinished. 100vh is the page box
       in print, and zoom is applied to this same element, so the height is
       measured before the shrink and the two do not fight. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .flyer-foot { margin-top: auto; }
  .flyer-form, .flyer-cta, .btn-print, .foot-print, .draft-bar { display: none !important; }

  .flyer-head, .flyer-foot {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    padding-left: 0; padding-right: 0;
  }
  .flyer-head { padding: 10pt 12pt; }
  .flyer-foot { padding: 8pt 12pt; }
  .flyer-intro, .flyer-points, .flyer-body { padding-left: 0; padding-right: 0; }

  .flyer-headline { font-size: 22pt; letter-spacing: -.8px; }
  .flyer-head::after { height: 6px; width: 130px; margin-top: 12px; }
  .flyer-sub { font-size: 11pt; margin-top: 10px; }
  .flyer-intro { font-size: 11pt; padding-top: 16px; }
  .flyer-points { padding-top: 14px; gap: 7px 24px; }
  .flyer-body { padding-top: 14px; }
  .flyer-body h2 { font-size: 13pt; margin: 12px 0 5px; }
  .flyer-body h3 { font-size: 11.5pt; margin: 10px 0 4px; }
  .flyer-body p, .flyer-body blockquote { margin-bottom: 7px; }
  .flyer-points li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* The single biggest lever on the page. `contain` rather than `cover`:
     most RSI imagery is a product shot on a transparent background, and
     `cover` crops it to fill the box instead of fitting it. */
  .flyer-hero { padding: 10px 0; }
  .flyer-hero img { max-height: 52mm; object-fit: contain; }

  .flyer-head { break-after: avoid; }
  .flyer-points li, .flyer-body h2, .flyer-body h3, .flyer-body img, .flyer-body table { break-inside: avoid; }
  .flyer-body h2, .flyer-body h3 { break-after: avoid; }
  .flyer-foot { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .flyer-foot a { color: #fff; }
  /* Spell out link targets a reader cannot click on paper. */
  .flyer-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; word-break: break-all; }
}