/* ==========================================================================
   Homestead Oil
   Colors and sizes worth touching are the custom properties in :root below.
   ========================================================================== */

:root {
  --ink: #0a0d0c;          /* page background */
  --paper: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --faint: rgba(255, 255, 255, 0.5);   /* lowest that stays readable on ink */
  --accent: #e11d18;       /* the red from the show's title card */
  --accent-hot: #ff2a24;
  --line: rgba(255, 255, 255, 0.18);

  --container: 78rem;      /* outer width the content aligns to */
  --column: min(34rem, 37vw);   /* button column width on wide screens */
  /* Rendered width of the wordmark. The footer stack borrows it so the Jolt
     Life mark and copyright centre under the logo rather than sitting flush
     left. */
  --logo-w: clamp(13rem, 30vw, 24rem);
  --pad: clamp(1.25rem, 4vw, 3rem);
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Hero — stacking order, bottom to top:
   media (0) → vignette (1) → content (3)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;   /* fallback for browsers without svh */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(3rem, 9vh, 6rem) var(--pad) 0;
  overflow: hidden;
}

/* The photo always renders at its natural width-fit — never `cover` — so the
   scene keeps its real proportions at every window shape (`cover` zoomed it
   hugely in squarish/tall windows, blowing the rig up). The photo is mirrored
   so the pumpjack stands centre-right, clear of the form. It is 16:9, so
   its rendered height is 56.25vw; on windows taller than that, the second
   background layer — a gradient over the photo's last stretch — dissolves the
   gravel into the flat page ink below. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(10, 13, 12, 0) 0%, var(--ink) 96%),
    image-set(
      url("assets/background.webp?v=7") type("image/webp"),
      url("assets/background.jpg?v=7") type("image/jpeg")
    );
  background-size: 100% 9rem, 100% auto;
  background-position: 0 calc(56.25vw - 9rem), 50% 0;
  background-repeat: no-repeat;
}

/* Safari < 17 and older Chrome ignore image-set(); give them the JPEG. */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero__media {
    background-image:
      linear-gradient(180deg, rgba(10, 13, 12, 0) 0%, var(--ink) 96%),
      url("assets/background.jpg?v=7");
  }
}

/* Darkens the left side behind the logo, buttons and contact form, and the
   bottom of the photo. The form sits straight on the photo (no panel, so its
   topics fit on one row as on Cypress Creek TV), so the left side has to be
   dark enough for its grey labels: these stops were measured to keep every
   label, chip and placeholder at 4.5:1 or better from 1024px to 3440px wide.
   The dark zone follows the form column — on wide screens the column centres,
   and 50% - 5rem is its right edge — then fades out along an eased S-curve
   (smoothstep, sampled at nine stops) by the time it reaches the pumpjack. A
   straight-line fade bends sharply where it starts, and the eye reads that
   bend as a dark line; the S-curve has no bend to see. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Spans the photo, not the whole page: the form made the page taller, and
     stretched over all of it these gradients drifted down off the photo.
     Whichever is taller — the first screen or the photo — so it never stops
     part-way down the picture on very wide windows. */
  bottom: auto;
  height: max(100vh, 56.25vw);
  height: max(100svh, 56.25vw);
  z-index: 1;
  /* Plain-percentage fallback for browsers that can't do math in gradient
     stops; the declaration after it replaces it everywhere else. */
  background:
    linear-gradient(90deg,
      rgba(6, 9, 8, 0.92) 0%,
      rgba(6, 9, 8, 0.9) 30%,
      rgba(6, 9, 8, 0.82) 44%,
      rgba(6, 9, 8, 0.787) 46.75%,
      rgba(6, 9, 8, 0.701) 49.5%,
      rgba(6, 9, 8, 0.58) 52.25%,
      rgba(6, 9, 8, 0.44) 55%,
      rgba(6, 9, 8, 0.3) 57.75%,
      rgba(6, 9, 8, 0.179) 60.5%,
      rgba(6, 9, 8, 0.093) 63.25%,
      rgba(6, 9, 8, 0.06) 66%,
      rgba(6, 9, 8, 0.06) 78%,
      rgba(6, 9, 8, 0.2) 100%),
    linear-gradient(180deg, rgba(6, 9, 8, 0.2) 0%, transparent 26%, rgba(6, 9, 8, 0.35) 78%, rgba(6, 9, 8, 0.7) 100%);
  background:
    linear-gradient(90deg,
      rgba(6, 9, 8, 0.92) 0%,
      rgba(6, 9, 8, 0.9) 30%,
      rgba(6, 9, 8, 0.82) max(36%, 50% - 5rem),
      rgba(6, 9, 8, 0.787) calc(max(36%, 50% - 5rem) + (max(66%, 50% + 15rem) - max(36%, 50% - 5rem)) * 0.125),
      rgba(6, 9, 8, 0.701) calc(max(36%, 50% - 5rem) + (max(66%, 50% + 15rem) - max(36%, 50% - 5rem)) * 0.25),
      rgba(6, 9, 8, 0.58) calc(max(36%, 50% - 5rem) + (max(66%, 50% + 15rem) - max(36%, 50% - 5rem)) * 0.375),
      rgba(6, 9, 8, 0.44) calc(max(36%, 50% - 5rem) + (max(66%, 50% + 15rem) - max(36%, 50% - 5rem)) * 0.5),
      rgba(6, 9, 8, 0.3) calc(max(36%, 50% - 5rem) + (max(66%, 50% + 15rem) - max(36%, 50% - 5rem)) * 0.625),
      rgba(6, 9, 8, 0.179) calc(max(36%, 50% - 5rem) + (max(66%, 50% + 15rem) - max(36%, 50% - 5rem)) * 0.75),
      rgba(6, 9, 8, 0.093) calc(max(36%, 50% - 5rem) + (max(66%, 50% + 15rem) - max(36%, 50% - 5rem)) * 0.875),
      rgba(6, 9, 8, 0.06) max(66%, 50% + 15rem),
      rgba(6, 9, 8, 0.06) 78%,
      rgba(6, 9, 8, 0.2) 100%),
    linear-gradient(180deg, rgba(6, 9, 8, 0.2) 0%, transparent 26%, rgba(6, 9, 8, 0.35) 78%, rgba(6, 9, 8, 0.7) 100%);
}

.hero__inner,
.footer {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* Hugs its content and centres itself with auto margins, rather than
   stretching and centring the content inside. */
/* Top-anchored, not centred: the photo renders width-fit, so on tall windows
   it only fills the upper part of the hero — centring would sink the logo and
   buttons into the dark ground below it. The hero's own top padding sets the
   offset; the footer's auto margin takes all the slack. */
.hero__inner {
  flex: 0 0 auto;
  margin-block: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer { margin-top: auto; }

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

/* The gap below the wordmark is the one the red rule used to sit in, a little
   tighter now that the rule is gone. */
.logo { margin: 0 0 clamp(2rem, 5vw, 3.25rem); }

.logo img {
  width: var(--logo-w);
  filter: drop-shadow(0 0.15em 1.75rem rgba(0, 0, 0, 0.7));
}

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

.actions {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--column);
}

.btn {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.0625rem 1.375rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: rgba(10, 13, 12, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn__label {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn__sub {
  font-size: 0.8125rem;
  color: var(--muted);
}

.btn:hover,
.btn:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}

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

.btn--primary .btn__sub { color: rgba(255, 255, 255, 0.82); }

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
}

/* A button that goes nowhere yet (the shop). Rendered as a <span>, so it can't
   be focused or clicked — this just stops it pretending otherwise on hover. */
.btn--soon,
.btn--soon:hover {
  cursor: default;
  background: var(--accent);
  border-color: var(--accent);
  transform: none;
}

.btn:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Social row
   -------------------------------------------------------------------------- */

.social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* Spans are the not-linked-yet placeholders; the hover rules below only
   target real <a>s, so placeholders sit still until an account goes live. */
.social a,
.social span {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;          /* full tap target around a small glyph */
  border-radius: 0.25rem;
  color: var(--paper);
  opacity: 0.72;
  transition: opacity 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.social svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
  filter: drop-shadow(0 0.1em 0.5rem rgba(0, 0, 0, 0.6));
}

/* Instagram is drawn as outlines, not a filled silhouette. This has to be a
   CSS rule rather than a fill="none" attribute — the rule above would win. */
.social svg.is-stroke {
  fill: none;
  stroke: currentColor;
}

.social a:hover,
.social a:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.social a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Contact form — the Cypress Creek TV / joltlife.com form, fitted to this
   page's column
   -------------------------------------------------------------------------- */

.contact {
  width: 100%;
  max-width: var(--column);
  margin-top: clamp(2.5rem, 5vw, 3.25rem);
}

.contact__title {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form {
  display: grid;
  gap: 1.25rem;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Honeypot: invisible to people, filled in by bots. Web3Forms rejects any
   submission that arrives with it ticked. Hidden from the stylesheet rather
   than an inline style, since bots that read inline styles skip it. */
.form__trap { display: none !important; }

.field {
  display: grid;
  gap: 0.5rem;
}

.field__label {
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.field__opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--faint);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--paper);
  font: inherit;
  font-size: 1rem;     /* under 16px, iOS zooms the page in on focus */
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }

.field input:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, 0.32); }

.field input:focus,
.field textarea:focus {
  /* Transparent rather than none, so Windows High Contrast mode — which
     ignores border colors — still draws a visible focus ring. */
  outline: 2px solid transparent;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

/* Browser autofill paints its own pale fill, which glares on the dark page. */
.field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100rem #121615 inset;
  -webkit-text-fill-color: var(--paper);
  caret-color: var(--paper);
}

/* Topic picker — radios drawn as chips */
.topics {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.topic { position: relative; }

/* The real radio stays in the layout, transparent, over its chip — not
   display:none, which would leave the browser's "pick one" prompt with
   nothing to point at and silently block the submit. */
.topic input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.topic span {
  display: block;
  padding: 0.625rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.topic:hover span {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--paper);
}

.topic input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.topic input:focus-visible + span {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* Windows High Contrast mode replaces the chip colors with system ones, which
   would make the picked topic look like the rest — mark it with the system
   highlight instead. */
@media (forced-colors: active) {
  .topic input:checked + span {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

/* Full column width, matching the Shop button above it. */
.btn--submit {
  width: 100%;
  align-items: center;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.btn--submit:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.form__status {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.form__status.is-ok { color: var(--paper); }
.form__status.is-error { color: #ff6b63; }   /* lighter than the button red: readable on the dark ground */

/* The column narrows with the window; below 72rem it
   is too narrow for name and email side by side. */
@media (max-width: 72rem) {
  .form__row { grid-template-columns: 1fr; }
}

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

.footer {
  display: flex;            /* keeps the stack hugging its own content width */
  padding: clamp(2.5rem, 7vh, 4rem) 0 clamp(1.5rem, 4vh, 2.25rem);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Jolt Life mark over the copyright line, the pair centred under the logo */
.footer__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: var(--logo-w);
}

.footer p {
  margin: 0;
  white-space: nowrap;   /* stays one centred line even if it outruns the box */
}

.footer__jolt {
  display: block;
  opacity: 0.72;
  transition: opacity 0.18s ease;
}

.footer__jolt img { width: 6.5rem; }

.footer__jolt:hover,
.footer__jolt:focus-visible { opacity: 1; }

.footer__jolt:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Narrow screens — full-width buttons and a heavier scrim
   -------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  body { --column: 100%; }

  /* Phones go back to a `cover` crop — width-fit would render the photo as a
     short strip. This crop centres the pumpjack so it reads clearly as the
     subject, with the sunset sky behind it. */
  .hero__media {
    background-image: image-set(
      url("assets/background.webp?v=7") type("image/webp"),
      url("assets/background.jpg?v=7") type("image/jpeg")
    );
    /* A plain cover crop (the photo's full height); 72% centres the
       pumpjack in the slice, with room for the whole rig across the screen. */
    background-size: cover;
    background-position: 72% 100%;
    /* Pinned to the first screen. The form makes the page taller than the
       window, and sized against the whole page this crop would balloon and
       slide the rig down behind the form. Below it is plain ink. */
    bottom: auto;
    height: 100vh;
    height: 100svh;
  }

  @supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
    .hero__media { background-image: url("assets/background.jpg?v=7"); }
  }

  /* Content sits at the top on phones; the footer needs pushing down */
  .footer {
    margin-top: auto;
    justify-content: center;   /* Jolt Life mark + copyright centred on phones */
  }


  /* The backdrop is busy at phone widths, so the buttons go near solid.
     No blur either — it smears the backdrop into a frosted smudge behind
     the text. */
  .btn {
    background: rgba(10, 13, 12, 0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .btn--primary { background: var(--accent); }

  /* Pinned to the first screen with the photo, ending on solid page ink so
     there is no seam where the photo stops and the form's ink begins. */
  .hero::before {
    bottom: auto;
    height: 100vh;
    height: 100svh;
    /* Stops in rem, not %: the form starts the same distance down every
       phone, so the darkening has to arrive there on tall phones too. Clear
       behind the logo and Shop for the pumpjack, then dark enough under the
       form for its labels (measured 4.5:1+ from 320x568 to 430x932). */
    background:
      linear-gradient(180deg, rgba(6, 9, 8, 0.55) 0, rgba(6, 9, 8, 0.32) 10rem, rgba(6, 9, 8, 0.68) 20rem, rgba(6, 9, 8, 0.84) 28rem, rgba(10, 13, 12, 1) 100%);
  }

  .actions { max-width: none; }

}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}