/* ==========================================================================
   sponsor.css — sponsored offer pages ONLY. Brief §11.6.

   This file is a MINIMAL RESET and nothing more. It is deliberately not
   the editorial design system: it does not load app.css, it does not use
   the brand's custom properties, and it does not try to make these
   pages look like the rest of the site.

   That is the point. Advertiser embeds break in heavy CSS environments —
   a site-wide reset restyles what the script injects, a flex parent
   resizes it, an aspect-ratio crops it. Containment is the strategy.

   RULES FOR THIS FILE
   · Never load alongside app.css. They are mutually exclusive.
   · Never style .sponsor-embed or anything inside it. Style AROUND it.
   · No transforms on any ancestor of .sponsor-embed — a transformed
     ancestor breaks position:fixed inside an embed, which is how most
     interstitials and lightboxes position themselves.
   · Handle one advertiser's quirk with a per-page adjustment, not a
     change here. This shell stays clean for the next site in the factory.

   Hex values are hardcoded on purpose: this file must not depend on the
   design tokens, which live in app.css and do not load on these pages.
   (They were their own tokens.css until Phase 4 folded that file in; the
   containment argument is unchanged either way — what matters is that no
   editorial stylesheet loads here.)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: #2A241C;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }

/* Underlined, for the same reason prose links are underlined in app.css:
   #3E7A4C link text inside a sentence of #2A241C body text measures
   2.99:1, and axe's link-in-text-block wants 3:1 — it fails by 0.01 with
   colour alone. Every link on the ONE template that loads this file —
   custom-sponsored-offer.hbs — sits inside a sentence, so this can go on
   the bare element selector here where it could not in app.css.
   offers-index.hbs has the same defect and is NOT fixed by this rule: it
   loads no stylesheet at all and carries its own copy inline.           */
a { color: #3E7A4C; text-decoration: underline; text-underline-offset: 0.15em; }


/* --- Header --------------------------------------------------------------
   Logo and a link home. No category nav — this page has one job.        */

.sponsor-header {
  padding: 16px 20px;
  border-bottom: 1px solid #EDE5D8;
}
.sponsor-header img { display: block; height: 32px; width: auto; }


/* --- Disclosure ----------------------------------------------------------
   Above the embed, visible before interaction, never advertiser-supplied.
   Styled to be noticed rather than tucked away: a reader should not have
   to work out that this is paid placement.                              */

.sponsor-disclosure {
  padding: 12px 20px;
  background: #FBF1DE;
  border-bottom: 1px solid #E8D9BC;
}
.sponsor-disclosure p {
  margin: 0 auto;
  max-width: 720px;
  font-size: 14px;
}


/* --- Main ---------------------------------------------------------------- */

.sponsor-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.sponsor-title {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.2;
}

.sponsor-support {
  margin: 0 0 24px;
  color: #6F6459;
}


/* --- Embed container -----------------------------------------------------
   DO NOT ADD RULES HERE beyond margin. No height, no overflow, no
   aspect-ratio, no display:flex, no display:grid, no transform.

   Every one of those has broken a real embed somewhere. Generous mobile
   margins and nothing else; test at 375px before publishing.           */

.sponsor-embed {
  margin: 24px 0;
}


/* --- Fallback CTA --------------------------------------------------------
   Outside the script's control. Renders whether the embed works or not. */

.sponsor-fallback {
  margin-top: 32px;
  padding: 20px;
  border: 1px solid #EDE5D8;
  border-radius: 8px;
}
.sponsor-fallback h2 { margin: 0 0 8px; font-size: 20px; }
.sponsor-fallback p  { margin: 0 0 16px; color: #6F6459; }

.sponsor-fallback__link {
  display: inline-block;
  min-height: 44px;
  padding: 13px 24px;
  background: #C2422F;       /* the AA-safe red, same reasoning as the theme */
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
}


/* --- Footer -------------------------------------------------------------- */

.sponsor-footer {
  padding: 24px 20px 40px;
  border-top: 1px solid #EDE5D8;
  font-size: 13px;
  color: #6F6459;
  text-align: center;
}
.sponsor-footer p { margin: 0 0 8px; }


/* Focus stays visible here too. The performance and CSS rules are
   suspended on these pages; accessibility is not. */
:focus-visible {
  outline: 2px solid #3E7A4C;
  outline-offset: 2px;
}