/* ===================================================================
   FOUNDING 100 — first-order 10% OFF announcement modal + pricing badge

   Standalone component. Nothing here touches the shared style.css, and
   every colour comes from the CSS custom properties the LPs already
   define (--color-accent, --color-gold, ...). Dropping this into
   /lp/uk or /lp/au will pick up that page's palette automatically.
   =================================================================== */

/* ---------- 1. Modal ---------- */

/* <dialog> gives us the focus trap, Escape-to-close and top-layer
   painting for free, so there is no custom overlay element. */
.f100-modal {
  border: 0;
  padding: 0;
  /* The shared style.css resets `* { margin: 0 }`, which wipes out the
     `margin: auto` a <dialog> normally gets from the UA stylesheet — so
     without this the modal sticks to the top of the screen instead of
     centring. Must stay. */
  margin: auto;
  width: min(880px, calc(100vw - 32px));
  /* An absolute length, NOT a percentage. A <dialog> is `height:
     fit-content`, so a percentage height on it (or on a child) is a
     cyclic reference: Chrome resolves it leniently, iOS Safari collapses
     the box to zero and `overflow: hidden` then hides everything —
     backdrop visible, modal invisible. Do not reintroduce `%` here.
     The UA stylesheet already clamps a modal dialog to the viewport, so
     nothing can overshoot even if dvh reads high. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-bg, #F4EFE8);
  color: var(--color-dark, #2A211D);
  box-shadow: 0 24px 70px rgba(42, 33, 29, .3);
}
.f100-modal::backdrop {
  background: rgba(42, 33, 29, .55);
  backdrop-filter: blur(3px);
}

/* Opening animation. Both the dialog and its backdrop animate; the
   reduced-motion block at the bottom turns this off. */
/* Scoped to [open] because a <dialog> is `display: none` until then —
   an unscoped `display: flex` would leave the modal on screen at load.
   Flex (rather than a percentage height on .f100-inner) is what lets the
   inner grid shrink to the clamped dialog height without any cyclic
   percentage. min-height is insurance: if some engine still fails to
   give .f100-inner a height, the box stays visible instead of vanishing. */
.f100-modal[open] {
  display: flex;
  min-height: min(420px, calc(100dvh - 32px));
  animation: f100-pop .32s cubic-bezier(.2, .8, .3, 1);
}
.f100-modal[open]::backdrop {
  animation: f100-fade .32s ease;
}
@keyframes f100-pop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes f100-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.f100-inner {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;   /* lets it shrink inside the clamped dialog */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* --- left: photo --- */
.f100-figure {
  position: relative;
  background: var(--color-bg-alt, #EDE5DB);
}
.f100-figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Same framing as the 100 Boxes section so the gold "100BOX"
     lettering stays inside the crop. */
  object-position: center 20%;
}

/* --- right: copy --- */
.f100-body {
  padding: 40px 38px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* "safe" keeps the top of the copy reachable when it is taller than
     the modal; browsers without it fall back to the line above. */
  justify-content: safe center;
  text-align: center;
}
/* Without this, a short viewport squeezes these to zero height instead
   of letting .f100-body scroll. */
.f100-body > * { flex-shrink: 0; }

.f100-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent, #A82E32);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 20px;
}
.f100-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* The discount is the headline. The code below it is deliberately
   smaller so "FOUNDING100" can never read as the discount amount. */
.f100-headline {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 2.15rem;
  line-height: 1.22;
  margin: 0 0 6px;
  color: var(--color-dark, #2A211D);
}
.f100-headline em {
  font-style: normal;
  color: var(--color-accent, #A82E32);
}
.f100-sub {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted, #9A8A7F);
  margin: 0 0 20px;
}

.f100-text {
  font-size: .93rem;
  line-height: 1.85;
  color: var(--color-mid, #5C4A40);
  margin: 0 0 24px;
}

/* --- code chip --- */
.f100-code-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px dashed var(--color-gold, #C8A96A);
  border-radius: 10px;
  background: rgba(200, 169, 106, .1);
  overflow: hidden;
  margin-bottom: 22px;
}
.f100-code {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  min-width: 0;
}
.f100-code-label {
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-muted, #9A8A7F);
  margin-bottom: 2px;
}
.f100-code-value {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-dark, #2A211D);
}
.f100-copy {
  flex: 0 0 auto;
  border: 0;
  border-left: 1px dashed var(--color-gold, #C8A96A);
  background: transparent;
  padding: 0 18px;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent, #A82E32);
  cursor: pointer;
  transition: background .2s ease;
}
.f100-copy:hover { background: rgba(168, 46, 50, .08); }
.f100-copy[data-copied="true"] { color: #2F7D4F; }

/* --- CTA --- */
.f100-cta {
  display: block;
  background: var(--color-accent, #A82E32);
  color: #fff;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 16px 24px;
  border-radius: 8px;
  transition: background .2s ease, transform .2s ease;
}
.f100-cta:hover {
  background: var(--color-accent-light, #C2373A);
  transform: translateY(-1px);
}

.f100-dismiss {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: 0;
  font: inherit;
  font-size: .78rem;
  color: var(--color-muted, #9A8A7F);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.f100-fineprint {
  font-size: .68rem;
  line-height: 1.7;
  color: var(--color-muted, #9A8A7F);
  margin: 18px 0 0;
}

/* --- close button --- */
.f100-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 239, 232, .9);
  color: var(--color-dark, #2A211D);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease;
}
.f100-close:hover { background: #fff; }

/* Visible keyboard focus everywhere inside the modal. */
.f100-modal :focus-visible {
  outline: 2px solid var(--color-accent, #A82E32);
  outline-offset: 3px;
}

/* ...except the two elements we focus programmatically. Neither is
   interactive — the heading is where focus lands on open so the offer is
   announced before the close button, and .f100-scroll-target is the
   section the CTA jumps to. A focus ring on them just reads as a stray
   box around the text. Everything the user can actually operate keeps
   its ring from the rule above. */
.f100-headline:focus,
.f100-headline:focus-visible,
.f100-scroll-target:focus,
.f100-scroll-target:focus-visible {
  outline: none;
}

/* --- mobile --- */
@media (max-width: 700px) {
  .f100-modal {
    width: calc(100vw - 24px);
    border-radius: 16px;
  }
  .f100-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* Taller crop than a banner so the two people, the box on the grass
     and the gold "100BOX" lettering all stay in frame. The copy below
     is tightened to pay for the extra height. */
  .f100-figure img {
    aspect-ratio: 5 / 4;
    height: auto;
    object-position: center 28%;
  }
  .f100-body { padding: 22px 20px 24px; }
  .f100-eyebrow { margin-bottom: 14px; }
  .f100-headline { font-size: 1.65rem; }
  .f100-sub { font-size: .74rem; margin-bottom: 14px; }
  .f100-text { font-size: .88rem; line-height: 1.75; margin-bottom: 18px; }
  .f100-code-row { margin-bottom: 16px; }
  .f100-cta { padding: 15px 20px; }
  .f100-dismiss { margin-top: 12px; }
  .f100-fineprint { margin-top: 14px; }
}

/* Shorter phones (iPhone SE / 8 and similar). The 5:4 crop above no
   longer leaves room for the CTA, so give the photo back some height. */
@media (max-width: 700px) and (max-height: 720px) {
  .f100-figure img { aspect-ratio: 5 / 3; object-position: center 26%; }
  .f100-body { padding: 18px 20px 18px; }
  .f100-dismiss { margin-top: 10px; }
  .f100-fineprint { margin-top: 10px; font-size: .64rem; }
  .f100-headline { font-size: 1.5rem; }
  .f100-sub { font-size: .7rem; margin-bottom: 12px; }
  .f100-text { font-size: .84rem; line-height: 1.7; margin-bottom: 16px; }
  .f100-code { padding: 10px 12px; }
  .f100-code-row { margin-bottom: 14px; }
}

/* Very short viewports (landscape phones): drop the photo so the
   offer and the CTA still fit without inner scrolling. */
@media (max-height: 520px) {
  .f100-figure { display: none; }
  .f100-inner { grid-template-columns: 1fr; }
  .f100-body { padding: 22px 20px; }
  .f100-headline { font-size: 1.5rem; }
}

/* ---------- 2. Pricing badge ---------- */

.f100-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 13px 20px;
  border: 1px solid var(--color-gold, #C8A96A);
  border-radius: 10px;
  background: rgba(200, 169, 106, .12);
  text-align: center;
}
.f100-badge-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent, #A82E32);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.f100-badge-main {
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-dark, #2A211D);
}
.f100-badge-code {
  font-size: .78rem;
  color: var(--color-mid, #5C4A40);
}
.f100-badge-code b {
  letter-spacing: .08em;
  color: var(--color-accent, #A82E32);
}

@media (max-width: 600px) {
  .f100-badge { gap: 8px; padding: 12px 16px; }
  .f100-badge-main { font-size: .84rem; }
  .f100-badge-code { font-size: .72rem; }
}

/* ---------- 3. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .f100-modal[open],
  .f100-modal[open]::backdrop { animation: none; }
  .f100-cta:hover { transform: none; }
}