/* ============================================================
   WAHLIPOP — theme system (theme.css). Loaded after variables.css.

   TWO SCOPES, deliberately:

   1. `body[data-page]` — the base for the layout-disabled Coming Soon document
      ONLY (it renders <body data-page="home">; SE's own pages never do).

   2. `.wp-*` (unscoped) — the Wahlipop chrome and page classes. Namespaced, so it
      is safe unscoped — and it MUST be, because the wahlipop.header /
      wahlipop.footer widgets render the same partials on SE pages.

   The page markup keeps the handoff's inline styles verbatim, so this file is
   deliberately small: what the prototype's own <style> block carried (keyframes,
   CTA hover, placeholder and focus), and what the handoff does not specify
   (small screens, reduced motion).
   ============================================================ */

/* ---- 1) Base ------------------------------------------------------------ */
body[data-page] *, body[data-page] *::before, body[data-page] *::after { box-sizing: border-box; }
body[data-page] {
  margin: 0;
  background: var(--wahlipop-ink);
  color: var(--wahlipop-cream);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
body[data-page] h1, body[data-page] h2, body[data-page] h3, body[data-page] h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
body[data-page] p { margin: 0 0 var(--space-3); }
/* The prototype's link colours: pink, lifting to white. */
body[data-page] a { color: var(--wahlipop-pink); text-underline-offset: 3px; }
body[data-page] a:hover { color: #ffffff; }
body[data-page] img { display: block; max-width: 100%; }
body[data-page] ::selection { background: color-mix(in srgb, var(--wahlipop-red) 45%, transparent); }

body[data-page] :focus { outline: none; }
body[data-page] :focus-visible,
.wp-chrome :focus-visible,
.wp-footer :focus-visible { outline: 2px solid var(--wahlipop-red); outline-offset: 2px; }

/* The #join anchor (signup redirect) should not land flush against the viewport top. */
#join { scroll-margin-top: 24px; }

/* ---- 2) Page pieces ------------------------------------------------------- */
/* Keyframes from the prototype, namespaced. The inline styles name them. */
@keyframes wp-spin { to { transform: rotate(360deg); } }
@keyframes wp-bob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Headline: the italic coral word. Lives here, not inline, so the whole headline is
   one editable string ("Something sweet is <em>setting</em>."). */
.wp-h1 em { color: var(--wahlipop-coral); font-style: italic; }

/* Email field. */
.wp-em::placeholder { color: rgba(255, 255, 255, .42); }
.wp-em:focus, .wp-em:focus-visible { outline: 2px solid var(--wahlipop-red); outline-offset: 2px; }

/* "Save me a pop": cream on ink, lifting 2px and brightening to white on hover —
   the prototype's .cta rules. Background/colour are here (not inline) so the hover
   can actually change them. */
.wp-cta {
  background: var(--wahlipop-cream);
  color: var(--wahlipop-ink);
  transition: transform .15s ease, background .15s ease;
}
.wp-cta:hover, .wp-cta:focus-visible { transform: translateY(-2px); background: #ffffff; }
.wp-cta:active { transform: translateY(0); }

/* Thank-you card's "Add another email". */
body[data-page] a.wp-again:hover { color: #ffffff; border-bottom-color: #ffffff !important; }

/* ---- 3) Chrome ------------------------------------------------------------ */
.wp-brand { display: inline-block; line-height: 0; text-decoration: none; }
.wp-brand img { display: block; max-width: 100%; }

.wp-footlink, .wp-footer .wp-footlink { color: inherit; text-decoration: none; transition: color .15s ease; }
.wp-footlink:hover, .wp-footlink:focus-visible,
.wp-footer .wp-footlink:hover { color: var(--wahlipop-cream); text-decoration: underline; }

.wp-footer-extra {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 10px 22px; margin-top: 10px;
}
.wp-langs { display: inline-flex; align-items: baseline; gap: 8px; }
.wp-langs a, .wp-footer .wp-langs a {
  font-size: 12px; letter-spacing: 0.08em; text-decoration: none;
  color: rgba(250, 247, 245, .55);
}
.wp-langs a:hover, .wp-footer .wp-langs a.active { color: var(--wahlipop-pink); }
.wp-langs .sep { color: rgba(250, 247, 245, .25); font-size: 11px; }

/* — labeled image placeholder (a wp_slot() with nothing set) — */
.wp-slot-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--wahlipop-ink-2);
  border: 1px dashed color-mix(in srgb, var(--wahlipop-red) 45%, transparent);
  color: var(--wahlipop-pink);
  font-family: var(--font-heading); font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  padding: 12px;
}

/* ---- 3b) Reading pages (Privacy) ------------------------------------------ */
/* The article sits on cream, so links need the deep red, not the dark-ground pink.
   `body[data-page] a` is (0,1,2); these clear it at (0,2,2). */
body[data-page] .wp-doc a { color: var(--wahlipop-red-deep); }
body[data-page] .wp-doc a:hover { color: var(--wahlipop-red); }
body[data-page] .wp-doc .wp-toc a { color: rgba(22, 22, 26, .78); transition: color .15s ease; }
body[data-page] .wp-doc .wp-toc a:hover,
body[data-page] .wp-doc .wp-toc a:focus-visible { color: var(--wahlipop-red-deep); }
body[data-page] .wp-doc :focus-visible { outline-color: var(--wahlipop-red-deep); }
body[data-page] .wp-doc ::selection { background: #ffd3d5; }
.wp-doc section[id] { scroll-margin-top: 24px; }

/* Primary button on a light ground: deep red, white text (5.9:1). */
.wp-btn-red, body[data-page] .wp-doc a.wp-btn-red {
  background: var(--wahlipop-red-deep); color: #ffffff;
  transition: background .15s ease, transform .15s ease;
}
.wp-btn-red:hover, .wp-btn-red:focus-visible,
body[data-page] .wp-doc a.wp-btn-red:hover { background: #97161e; color: #ffffff; transform: translateY(-2px); }

/* Footer's current-page link. */
.wp-footer .wp-footlink[aria-current="page"] { color: var(--wahlipop-pink); }

/* The index + article grid stacks below 880px; the index stops being sticky there. */
@media (max-width: 880px) {
  body[data-page] .wp-2col { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-page] .wp-toc { position: static !important; }
}

/* ---- 4) Responsive -------------------------------------------------------- */
/* The prototype is drawn at desktop width only. Below 640px the 72px headline would
   break mid-word, so it scales with the viewport; inline styles need !important. */
@media (max-width: 640px) {
  body[data-page] .wp-h1 { font-size: clamp(42px, 12.5vw, 72px) !important; }
  body[data-page] main p { font-size: 16px !important; }
  /* Once the pill wraps under the logo, left-align it rather than leave it hanging
     at the right edge of an otherwise empty row. */
  .wp-status { margin-left: 0 !important; }
  .wp-brand img { height: 52px !important; }
}
@media (max-width: 420px) {
  .wp-topbar { padding: var(--space-4) var(--space-4) 0 !important; }
  body[data-page] main { padding: var(--space-6) var(--space-4) !important; }
  /* The 240px minimum still fits, but a full-width button reads better than a
     lonely one under the field. */
  body[data-page] .wp-cta { flex: 1 1 100% !important; }
}

/* Respect a reduced-motion preference: no spinning discs, no bobbing lollipop,
   no button lift. The inline animation needs !important to be overridden. */
@media (prefers-reduced-motion: reduce) {
  .wp-spin, .wp-bob { animation: none !important; }
  .wp-cta { transition: none; }
  .wp-cta:hover, .wp-cta:focus-visible { transform: none; }
}

/* ---- 5) SE's own pages -----------------------------------------------------
   Scoped to body:not([data-page]) so none of this can reach the marketing page.
   Lives here rather than in custom.css because SE pages load theme.css through a
   direct <link>, so it takes effect on a plain file deploy (no bundle rebuild).
   ---------------------------------------------------------------------------- */
body:not([data-page]) #global_content button[type="submit"],
body:not([data-page]) #global_content input[type="submit"],
body:not([data-page]) #global_content button.button {
  background: var(--theme-button-background-color);
  color: var(--theme-button-font-color);
  border: 1px solid var(--theme-button-border-color);
  border-radius: var(--radius-md);
  padding: 10px 22px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
body:not([data-page]) #global_content button[type="submit"]:hover,
body:not([data-page]) #global_content input[type="submit"]:hover,
body:not([data-page]) #global_content button.button:hover {
  background: var(--theme-button-background-color-hover);
  border-color: var(--theme-button-border-color-hover);
  color: var(--theme-button-font-color-hover);
}

/* GDPR cookie banner — polish only. Its colours are admin settings (Admin → GDPR),
   written into an inline <style> per page; restating them here at higher specificity
   would make those settings look broken, so only what they cannot express is styled. */
body:not([data-page]) .gdpr_cookie_banner {
  border: 1px solid color-mix(in srgb, var(--wahlipop-red) 30%, transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 34px rgba(22, 22, 26, 0.4);
}
body:not([data-page]) .gdpr_cookie_banner ._des { font-size: 13px; line-height: 21px; }
body:not([data-page]) .gdpr_cookie_banner ._links a { font-size: 13px; text-decoration: none; }
body:not([data-page]) .gdpr_cookie_banner ._links a.privacy_agree {
  font-family: var(--font-heading); font-weight: 600;
}
