/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fredoka-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/playfair-display-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/playfair-display-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --navy: #173A59;
  --coral: #FAAA9D;        /* input boxes */
  --coral-hover: #F26F5B;  /* button hover / tap */
  --white: #fff;
  --fallback-bg: #e1401d;  /* matches the photo's average color; shows until the photo loads */
  --glass: rgba(255, 255, 255, 0.5);         /* see-through white used by the thank-you and questions boxes */
  --glass-edge: rgba(255, 255, 255, 0.65);  /* thin light outline on those boxes */
}

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

html {
  background: var(--fallback-bg);
}

/* The photo is pinned to the whole screen (not to the page height), so it always
   fills the screen, including when the phone's toolbar slides away on scroll.
   To change the photo, add the new file under a new name and point the url below at it. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  background: var(--fallback-bg) url("images/bg-salmon.webp") center / cover no-repeat;
  pointer-events: none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}

main {
  width: 100%;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Headline ---------- */
h1 {
  margin: 0 0 40px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(56px, 16vw, 96px);
  line-height: 1;
  letter-spacing: 0.06em;
  padding-left: 0.06em; /* balances trailing letter-spacing so it centers optically */
  text-transform: uppercase;
  color: var(--white);
}

/* ---------- Tagline ---------- */
.tagline {
  margin: 0 0 46px;
  max-width: 86vw;
  font-weight: 600;
  font-size: 22.5px;
  line-height: 1.47;
  letter-spacing: 0.04em;
  color: var(--navy);
}

/* ---------- Form ---------- */
.signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 296px;
  max-width: 100%;
}

.signup input {
  width: 100%;
  height: 43px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  background: var(--coral);
  color: var(--navy);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: none; /* what people type is shown exactly as typed */
  -webkit-appearance: none;
  appearance: none;
}

/* "Name" and "Email" hints: full navy, bold, capitals (only the hints, not what people type) */
.signup input::placeholder {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 1;
}

.signup button {
  height: 43px;
  border: 0;
  border-radius: 999px; /* rounded pill */
  background: var(--navy);
  color: var(--white);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.34em;
  /* right padding is reduced by the trailing letter-spacing so the label looks centered */
  padding: 0 calc(26px - 0.34em) 0 26px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.signup button:hover:not(:disabled),
.signup button:active:not(:disabled) { background: var(--coral-hover); }

.signup input:focus-visible,
.signup button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* ---------- Desktop nudge: sits slightly below center, like the original ---------- */
@media (min-width: 601px) {
  main { padding-top: 78px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  h1 { margin-bottom: 32px; }

  .tagline {
    max-width: 300px; /* wraps as "…take on / appetizing classics," */
    margin-bottom: 40px;
  }

  .signup {
    width: 74vw;
    gap: 16px;
  }

  .signup input { font-size: 16px; } /* 16px stops iOS from zooming on focus */

  .signup button {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-indent: 0.34em;
  }
}

/* ---------- Form behavior ---------- */
[hidden] { display: none !important; }

.field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.error {
  margin: 0;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--coral);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: left;
}

.form-error { text-align: center; }

.signup input[aria-invalid="true"] { outline: 2px solid var(--navy); }

.signup button:disabled { opacity: 0.75; cursor: default; }

/* Spam trap: off-screen, not display:none, so simple bots still fill it. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Thank-you message ---------- */
/* Frosted, see-through white with a thin light edge. Same width and height as the form it replaces, so nothing jumps. */
.confirm {
  width: min(296px, 100%);
  min-height: 169px;
  padding: 24px 28px;
  border: 1px solid var(--glass-edge);
  border-radius: 4px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(23, 58, 89, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: var(--navy);
}
.confirm:focus { outline: none; }

.confirm-title {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

@media (max-width: 600px) {
  .confirm { width: 74vw; padding: 20px 20px; }
  .confirm-title { font-size: 19px; }
}

/* ---------- Questions line (under the form, always visible) ---------- */
/* No box: the text sits directly on the photo, in white (same as the LOXY headline).
   Always one line; the text shrinks a little on narrow phones so it still fits. */
.contact {
  width: fit-content;
  max-width: 100%;
  margin: 40px 0 0;
  padding: 0;
  color: var(--white);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  /* faint deep-red halo: keeps the white letters clear where bright streaks in the photo run behind them, without looking like a box */
  text-shadow: 0 0 4px rgba(150, 30, 10, 0.6), 0 0 10px rgba(150, 30, 10, 0.45);
}

.contact a {
  color: var(--white);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.contact a:hover { color: var(--navy); text-shadow: none; }
.contact a:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; border-radius: 2px; }

@media (max-width: 600px) {
  /* A little wider than the form and slightly smaller type, so the line still fits on small phones */
  .contact {
    margin: 36px -8px 0;
    max-width: calc(100% + 16px);
    font-size: min(17px, calc((100vw - 24px) / 28));
    letter-spacing: 0.01em;
  }
}

/* ---------- Link styled like the button (404 page) ---------- */
.back {
  display: inline-flex;
  align-items: center;
  height: 43px;
  padding: 0 calc(26px - 0.34em) 0 26px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.back:hover,
.back:active { background: var(--coral-hover); }
.back:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }