/* silvernerds.com landing page styles.
   Theme lives in :root below - retint the whole page from there. */

/* ---------------------------------------------------------------
   THEME - retint the whole page from here.
   --------------------------------------------------------------- */
:root {
  /* Background image. Swap this one line for the game screenshot. */
  --bg-image: url("/assets/background.jpg");
  --bg-position: center center;
  --bg-color: #10161b;          /* shows before the image loads */

  /* Scrim over the screenshot. `none` keeps the art true to colour, like the
     in-game UI. Set a gradient here if a busy screenshot hurts readability. */
  --scrim: none;

  /* Panel - opaque cream card, matching the in-game UI */
  --panel-bg: #fdf6e8;
  --panel-border: rgba(255, 255, 255, .9);
  --panel-radius: 34px;
  --panel-max-width: 34rem;
  --panel-blur: 0px;

  /* Inner well - the recessed strip the game uses behind its icons */
  --well-bg: #fbf0dd;
  --well-border: rgba(190, 168, 130, .35);

  /* Type */
  --font-heading: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text: #7a5c48;              /* warm brown, as in the game UI */
  --text-muted: #a08670;
  /* Footer sits on the art, not the panel, so it carries its own backing
     pill. Flip both to light-on-dark if the art becomes a dark scene. */
  --footer-text: #6b5342;
  --footer-pill-bg: rgba(253, 246, 232, .82);

  /* Form validation - warm red-brown, not a clashing pure red */
  --error: #b4553f;
  --error-bg: #fdeeea;

  /* Accent - buttons, focus rings, links */
  --accent: #f5d6a0;            /* the tan icon discs */
  --accent-hover: #f0c988;
  --accent-contrast: #6b4f3d;   /* brown text on tan */

  /* Buttons */
  --btn-bg: #f5d6a0;
  --btn-bg-hover: #f0c988;
  --btn-border: rgba(190, 155, 110, .45);
  --btn-radius: 999px;          /* fully rounded, like the game's pills */

  --focus-ring: 3px solid #b98d5f;
}

/* --------------------------------------------------------------- */

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

/* `hidden` must win over display rules like `.socials { display: flex }`. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  gap: 1.5rem;

  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;

  background-color: var(--bg-color);
  background-image: var(--scrim), var(--bg-image);
  background-size: cover, cover;
  background-position: center, var(--bg-position);
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* Fixed attachment is janky on mobile; let it scroll there. */
@media (max-width: 48rem) {
  body { background-attachment: scroll, scroll; }
}

/* Skip link - keyboard users land here first */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .6rem 1rem;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 0 0 var(--btn-radius) 0;
  z-index: 10;
}
.skip-link:focus { left: 0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------- Panel ---------------- */

.panel {
  width: 100%;
  max-width: var(--panel-max-width);
  padding: clamp(1.5rem, 5vw, 2.75rem);
  text-align: center;

  background: var(--panel-bg);
  border-radius: var(--panel-radius);

  /* Pale outer rim then a soft drop shadow, as in the game UI. */
  box-shadow:
    0 0 0 6px var(--panel-border),
    0 14px 34px rgba(90, 70, 45, .28);

  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));

  animation: rise .6s ease-out both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.logo {
  display: block;
  width: min(100%, 18rem);
  height: auto;
  margin: 0 auto .5rem;
}

/* Greeting line. Sits above the logo image once there is one. */
.wordmark {
  margin: 0 0 .25rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: .01em;
}

.tagline {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  text-wrap: balance;
}

/* Visible to screen readers, hidden on screen. !important so element-scoped
   rules like `.signup h2` can't win on specificity and reveal it. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.signoff {
  margin: 0 0 1.75rem;
  color: var(--text-muted);
  font-size: .95rem;
  font-style: italic;
  text-align: right;
}

.body-copy {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 1rem;
  text-wrap: pretty;
}

/* ---------------- Buttons ---------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.25rem;

  font: inherit;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);

  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  box-shadow: 0 3px 0 rgba(170, 130, 85, .45);   /* soft lip, reads as depth */
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(170, 130, 85, .45);
}
/* Press down onto the lip. */
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(170, 130, 85, .45); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------------- Signup ---------------- */

.signup {
  padding-top: .5rem;
}

/* The ESP embed drops into .embed-slot in the markup below - search for
   "ESP EMBED START". */
.embed-slot { min-height: 3rem; }

/* ---------------- MailerLite embed overrides ----------------
   The embed ships its own stylesheet scoped to #mlb2-<id>, which beats plain
   class selectors - hence the !important flags here. Written against the real
   form markup (horizontal layout: floated input + button, plus a separate
   mobile-only button and a reCAPTCHA row).

   If the form is rebuilt in MailerLite the numeric id changes, but these
   selectors avoid the id on purpose so they keep working. */

/* Strip the embed's own card so it sits flat on the panel. */
#signup .ml-form-embedContainer,
#signup .ml-form-embedContainer .ml-form-embedWrapper,
#signup .ml-form-embedContainer .ml-form-embedWrapper.embedForm {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  display: block !important;
}

#signup .ml-form-embedContainer .ml-form-embedBody,
#signup .ml-form-embedContainer .ml-form-successBody {
  padding: 0 !important;
  background: none !important;
}

#signup .ml-form-embedContainer .ml-form-embedContent { margin: 0 !important; }

/* The embed floats its rows; contain them so the panel doesn't collapse. */
#signup .ml-form-embedContainer .ml-form-formContent.horozintalForm,
#signup .ml-form-embedContainer .ml-form-horizontalRow {
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Input + button on one row, matching the old placeholder layout. */
#signup .ml-form-embedContainer .ml-form-horizontalRow {
  display: flex !important;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: stretch;
}

#signup .ml-form-embedContainer .ml-input-horizontal {
  float: none !important;
  width: auto !important;
  flex: 1 1 12rem;
}

#signup .ml-form-embedContainer .ml-button-horizontal {
  float: none !important;
  width: auto !important;
  flex: 0 0 auto;
}

#signup .ml-form-embedContainer .horizontal-fields {
  float: none !important;
  padding-right: 0 !important;
  width: 100% !important;
}

#signup .ml-form-embedContainer .ml-field-group { margin: 0 !important; }

/* Recessed well, matching the game's icon strip. */
#signup .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input,
#signup .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
  padding: .75rem 1.1rem !important;
  font: inherit !important;
  color: var(--text) !important;
  background: var(--well-bg) !important;
  border: 1px solid var(--well-border) !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: inset 0 2px 4px rgba(150, 120, 80, .16) !important;
  line-height: 1.4 !important;
  height: 100% !important;
}

#signup .ml-form-embedContainer input[type="email"]::placeholder {
  color: var(--text-muted) !important;
  opacity: .8;
}

/* Tan pill button with the same lip as .btn. */
#signup .embed-slot .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button,
#signup .embed-slot .ml-form-embedContainer .ml-form-embedWrapper .ml-mobileButton-horizontal button,
#signup .embed-slot .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  width: auto !important;
  padding: .7rem 1.25rem !important;
  font: inherit !important;
  font-weight: 600 !important;
  color: var(--accent-contrast) !important;
  background-color: var(--accent) !important;
  border: 1px solid var(--btn-border) !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: 0 3px 0 rgba(170, 130, 85, .45) !important;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#signup .embed-slot .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover,
#signup .embed-slot .ml-form-embedContainer .ml-form-embedWrapper .ml-mobileButton-horizontal button:hover,
#signup .embed-slot .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
  background-color: var(--accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(170, 130, 85, .45) !important;
}
#signup .ml-form-embedContainer button.primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(170, 130, 85, .45) !important;
}

/* Loading spinner button inherits the same shape. */
#signup .ml-form-embedContainer button.loading {
  background-color: var(--accent) !important;
  border-radius: var(--btn-radius) !important;
  padding: .7rem 1.25rem !important;
  width: auto !important;
}
#signup .ml-form-embedContainer .ml-form-embedSubmitLoad:after {
  border-color: var(--accent-contrast) var(--accent-contrast) var(--accent-contrast) transparent !important;
}

/* reCAPTCHA is a Google iframe - its interior can't be restyled, so just
   centre it and round the outer edge so it sits less awkwardly on the panel.
   Turn the widget off in MailerLite (form settings) if you'd rather drop it.

   `order` moves it ABOVE the input+button row: the form is a flex column, the
   field row is order 1, so anything lower comes first. */
#signup .embed-slot .ml-form-embedContainer .ml-block-form {
  display: flex !important;
  flex-direction: column;
}
#signup .embed-slot .ml-form-embedContainer .ml-form-formContent { order: 2; }
#signup .embed-slot .ml-form-embedContainer .ml-form-recaptcha {
  order: 1;
  float: none !important;
  margin: 0 auto 1rem !important;
  display: flex;
  justify-content: center;
  width: 100% !important;
}
#signup .ml-form-embedContainer .g-recaptcha > div {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(90, 70, 45, .18);
}

/* --- Validation messages ---
   MailerLite flags a bad field by adding .ml-error to its wrapper; it renders
   no message text of its own, so the ::after rules below supply one. Every
   error surface MailerLite ships is covered here, including field types this
   form doesn't use yet (textarea, select, checkbox lists) so the styling still
   holds if fields are added in the MailerLite editor. */

/* Shared message style for every ::after warning below. */
#signup .embed-slot .ml-form-embedContainer .ml-error::after {
  display: block;
  width: 100%;
  margin: .45rem 0 0;
  font-family: var(--font-body);
  font-size: .8rem;
  line-height: 1.3;
  color: var(--error);
  text-align: left;
}

/* Any errored control: warm border + soft tint, never a harsh red. */
#signup .embed-slot .ml-form-embedContainer .ml-error input,
#signup .embed-slot .ml-form-embedContainer .ml-error input[type="email"],
#signup .embed-slot .ml-form-embedContainer .ml-error input[type="text"],
#signup .embed-slot .ml-form-embedContainer .ml-error textarea,
#signup .embed-slot .ml-form-embedContainer .ml-error select,
#signup .embed-slot .ml-form-embedContainer .ml-error .custom-select {
  border-color: var(--error) !important;
  background-color: var(--error-bg) !important;
}

/* Checkbox / radio group boxes get a border instead of a fill. */
#signup .embed-slot .ml-form-embedContainer .ml-error .custom-checkbox-radio-list {
  border-color: var(--error) !important;
  border-radius: 10px !important;
}

#signup .embed-slot .ml-form-embedContainer .ml-field-group,
#signup .embed-slot .ml-form-embedContainer .ml-form-fieldRow { position: relative; }

/* Email field. form-validation.js sets data-error for the browser's own
   validation cases ("missing an @", empty, ...); the static string is the
   fallback for errors MailerLite raises itself. */
#signup .embed-slot .ml-form-embedContainer .ml-field-group.ml-error::after {
  content: "Please enter a valid email address.";
  margin-left: 1.1rem;
}
#signup .embed-slot .ml-form-embedContainer .ml-field-group.ml-error[data-error]::after {
  content: attr(data-error);
}

/* Any other required text field added later. */
#signup .embed-slot .ml-form-embedContainer .ml-form-fieldRow.ml-error::after {
  content: "This field is required.";
  margin-left: 1.1rem;
}
#signup .embed-slot .ml-form-embedContainer .ml-form-fieldRow.ml-error[data-error]::after {
  content: attr(data-error);
}

/* Consent / interest checkboxes. */
#signup .embed-slot .ml-form-embedContainer .ml-form-checkboxRow.ml-error::after,
#signup .embed-slot .ml-form-embedContainer .ml-form-embedPermissions.ml-error::after,
#signup .embed-slot .ml-form-embedContainer .ml-form-interestGroupsRow.ml-error::after {
  content: "Please make a selection to continue.";
}

/* reCAPTCHA "please tick the box" state. */
#signup .embed-slot .ml-form-embedContainer .ml-form-recaptcha.ml-error {
  flex-wrap: wrap;
}
#signup .embed-slot .ml-form-embedContainer .ml-form-recaptcha.ml-error::after {
  content: "Please confirm you are not a robot.";
  text-align: center;
}
/* Soften MailerLite's hard red iframe outline. */
#signup .embed-slot .ml-form-embedContainer .ml-form-recaptcha.ml-error iframe {
  border: 1px solid var(--error) !important;
  border-radius: 6px;
}

/* Recolour any text MailerLite itself turns red. */
#signup .embed-slot .ml-form-embedContainer .ml-error .label-description,
#signup .embed-slot .ml-form-embedContainer .ml-error .label-description p,
#signup .embed-slot .ml-form-embedContainer .ml-error .label-description p a,
#signup .embed-slot .ml-form-embedContainer .ml-error label:first-child,
#signup .embed-slot .ml-form-embedContainer .ml-form-checkboxRow.ml-error .label-description p,
#signup .embed-slot .ml-form-embedContainer .ml-form-checkboxRow.ml-error .label-description p:first-letter {
  color: var(--error) !important;
}

/* Success message, styled like the panel's own copy. */
#signup .ml-form-embedContainer .ml-form-successContent { text-align: center !important; margin: 0 !important; }
#signup .ml-form-embedContainer .ml-form-successContent h4 {
  margin: 0 0 .25rem !important;
  font-family: var(--font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  text-align: center !important;
}
#signup .ml-form-embedContainer .ml-form-successContent p {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: .925rem !important;
  color: var(--text-muted) !important;
  text-align: center !important;
}

/* Quiet footnote - smaller and dimmer than body copy, nothing louder. */
.fine-print {
  margin: 1.5rem 0 .25rem;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--text-muted);
  opacity: .65;
}

/* Quiet footnote - smaller and dimmer than body copy, nothing louder. */
.fine-print {
  margin: 1.5rem 0 .25rem;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--text-muted);
  opacity: .65;
}

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

/* Sits on the background art, not the panel. */
.site-footer {
  text-align: center;
  font-size: .85rem;
  color: var(--footer-text);
}

/* Text on a photo can't be made reliably legible with shadows alone, so the
   copyright gets its own soft pill - same cream language as the panel. */
.site-footer p {
  display: inline-block;
  margin: 0;
  padding: .4rem 1rem;
  background: var(--footer-pill-bg);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.socials {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: .6rem;
}
.socials a {
  display: inline-flex;
  padding: .4rem;
  color: var(--footer-text);
  opacity: .85;
  transition: opacity .18s ease, transform .18s ease;
}
.socials a:hover { opacity: 1; transform: translateY(-2px); }
.socials svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }

.site-footer a { color: var(--footer-text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .socials a:hover { transform: none; }
}