/* THE OFFER SURFACES INSIDE FREE PAGES — the email's clothes, worn quietly.
 *
 * Three things are dressed here and nothing else: the watch page's offer panel (CTA set,
 * surface 3), the picker's one line (surface 4), and the front door's free-season banner
 * (waterlogged/season.py — the owner's 27 August 2026 order). All sit inside pages that belong
 * to the free site, so every rule below is scoped to `.wl-offer` or `.wl-banner` — nothing here
 * can reach a free page's own markup, and this file is linked ONLY on a render that is already
 * showing one of them.
 *
 * It is a separate file for a harder reason than tidiness. watch.css is served at a URL built
 * from its own bytes (routes.asset_url), so a single character added to it changes the <link> on
 * every page this site publishes. The whole preview is built on those pages rendering
 * byte-for-byte what they rendered yesterday, and the way to keep that true is to not touch the
 * stylesheet they share.
 *
 * The palette is the Daily River Log's, name for name (static/log.css), which is itself the
 * approved morning email's: cream plate, navy rules, Georgia, a slate for anything secondary.
 * The panel has to look like the thing it is selling, and the thing it is selling is that email.
 */

.wl-offer {
  --wl-paper: #f7f3e9;
  --wl-plate: #efe9da;
  --wl-ink: #222222;
  --wl-navy: #1f3a5f;
  --wl-slate: #405c82;
  --wl-rule: #d8cfbb;

  max-width: 680px;
  margin: 28px 0 0;
  padding: 18px 20px 20px;
  background: var(--wl-paper);
  border: 1px solid var(--wl-rule);
  border-left: 4px solid var(--wl-navy);
  color: var(--wl-ink);
  font-family: Georgia, "Times New Roman", "Nimbus Roman", serif;
  font-size: 16.5px;
  line-height: 1.6;
}

/* AT BODY WEIGHT, NOT AS A PROMOTION BAND — the set's own words for this panel. No colour field,
 * no shout, nothing that competes with the readings above it. */
.wl-offer p {
  margin: 0 0 11px;
}

.wl-offer .wl-offer-free {
  color: var(--wl-navy);
  font-weight: bold;
}

/* The governing rule sits in a plate inside the panel, the way it sits in a plate on the sales
 * page: it is the sentence that says what the money is for, and it is quoted rather than said. */
.wl-offer blockquote.wl-offer-rule {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--wl-plate);
  border-left: 4px solid var(--wl-navy);
  color: var(--wl-navy);
  font-size: 16px;
  line-height: 1.55;
}

.wl-offer .wl-offer-promise {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--wl-rule);
  font-size: 15px;
  line-height: 1.6;
}

.wl-offer .wl-offer-promise b {
  color: var(--wl-navy);
}

/* One control, in normal document flow. Not sticky, not floating, not an interstitial: on a
 * phone this is one column of the page like everything above it. */
.wl-offer .wl-offer-go {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--wl-navy);
  border: 2px solid var(--wl-navy);
  border-radius: 2px;
  color: var(--wl-paper);
  font-size: 17px;
  font-weight: bold;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

.wl-offer .wl-offer-go:hover,
.wl-offer .wl-offer-go:focus {
  color: var(--wl-paper);
  text-decoration: underline;
}

@media (min-width: 620px) {
  .wl-offer .wl-offer-go {
    display: inline-block;
    width: auto;
    min-width: 280px;
  }
}

/* ------------------------------------------------------------------ surface 4, the picker line
 *
 * The coldest surface on the site: one sentence and a control that goes to the free page. It is
 * a line, not a panel — a plate under the picker would be a promotion where the set asked for a
 * line — so it takes the palette and none of the plate. */
.wl-offer-line {
  max-width: 680px;
  margin: 14px 0 0;
  color: #405c82;
  font-family: Georgia, "Times New Roman", "Nimbus Roman", serif;
  font-size: 15px;
  line-height: 1.6;
}

.wl-offer-line .wl-offer-see {
  display: inline-block;
  min-height: 44px;
  margin-top: 4px;
  padding: 10px 18px;
  background: transparent;
  border: 2px solid #1f3a5f;
  border-radius: 2px;
  color: #1f3a5f;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.35;
  cursor: pointer;
}

/* ------------------------------------------------------------- the top registration button
 *
 * The owner's third order of 27 August 2026: the email form at the foot of the page is
 * unnoticeable, so the head of the page gets a noticeable door down to it. It wears the site's
 * own primary-action chrome — the amber of the picker's "Show my sailing" — rather than the
 * email cream, because it is this page's action, standing on the dark sailing band where amber
 * carries. Full width on a phone, its own width on a laptop; ordinary document flow, nothing
 * sticky and nothing floating. */
.wl-register-top {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 14px 0 2px;
  padding: 14px 18px;
  background: #C8641B;
  border: 0;
  border-radius: 7px;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

.wl-register-top:hover,
.wl-register-top:focus {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 620px) {
  .wl-register-top {
    display: inline-block;
    width: auto;
    min-width: 320px;
  }
}

/* ------------------------------------------------------------------ the front door's banner
 *
 * The owner's one sentence under a NEW badge, above the sailing picker. Modest on purpose: the
 * email's cream plate at body weight, centred like everything else in the front door's header,
 * and nothing sticky, floating or animated — it is one more paragraph of the page. The badge is
 * the only raised voice, and it is one word. */
.wl-banner {
  max-width: 680px;
  margin: 22px auto 0;
  padding: 14px 18px 15px;
  background: #f7f3e9;
  border: 1px solid #d8cfbb;
  border-left: 4px solid #1f3a5f;
  color: #222222;
  font-family: Georgia, "Times New Roman", "Nimbus Roman", serif;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}

.wl-banner p {
  margin: 0;
}

.wl-banner .wl-banner-new {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px 3px;
  background: #1f3a5f;
  border-radius: 2px;
  color: #f7f3e9;
  font-size: 12.5px;
  font-weight: bold;
  letter-spacing: .12em;
}

.wl-banner .wl-banner-free {
  margin-top: 7px;
  color: #405c82;
  font-size: 15px;
}

.wl-banner a {
  color: #1f3a5f;
  font-weight: bold;
}