/* Food Strike wireframe — palette + layout per webplan.md */

@font-face {
  font-family: 'Amerigo';
  src: url('amerigo.ttf') format('truetype');
  font-display: auto;
}

@font-face {
  font-family: 'Luciole';
  src: url('Luciole_webfonts/Luciole-Regular.woff2') format('woff2'),
       url('Luciole_webfonts/Luciole-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}

@font-face {
  font-family: 'Luciole';
  src: url('Luciole_webfonts/Luciole-Bold.woff2') format('woff2'),
       url('Luciole_webfonts/Luciole-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: auto;
}

@font-face {
  font-family: 'Luciole';
  src: url('Luciole_webfonts/Luciole-Italic.woff2') format('woff2'),
       url('Luciole_webfonts/Luciole-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: auto;
}

@font-face {
  font-family: 'Luciole';
  src: url('Luciole_webfonts/Luciole-BoldItalic.woff2') format('woff2'),
       url('Luciole_webfonts/Luciole-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: auto;
}

:root {
  /* Space Indigo */
  --color-space-indigo-50: oklch(95.17% 0.012 286.17);
  --color-space-indigo-100: oklch(90.26% 0.023 285.93);
  --color-space-indigo-200: oklch(80.27% 0.049 283.94);
  --color-space-indigo-300: oklch(70.32% 0.074 282.56);
  --color-space-indigo-400: oklch(59.94% 0.104 280.85);
  --color-space-indigo-500: oklch(49.50% 0.134 278.77);
  --color-space-indigo-600: oklch(42.44% 0.112 278.59);
  --color-space-indigo-700: oklch(35.09% 0.087 279.19);
  --color-space-indigo-800: oklch(27.08% 0.064 279.98);
  --color-space-indigo-900: oklch(18.74% 0.034 282.58);
  --color-space-indigo-950: oklch(16.12% 0.025 283.21);

  /* Raspberry Red */
  --color-raspberry-red-50: oklch(95.09% 0.022 356.33);
  --color-raspberry-red-100: oklch(90.04% 0.047 356.04);
  --color-raspberry-red-200: oklch(80.48% 0.097 357.89);
  --color-raspberry-red-300: oklch(71.69% 0.149 0.42);
  --color-raspberry-red-400: oklch(64.29% 0.195 4.12);
  --color-raspberry-red-500: oklch(58.96% 0.222 9.79);
  --color-raspberry-red-600: oklch(50.16% 0.188 9.41);
  --color-raspberry-red-700: oklch(40.83% 0.150 8.71);
  --color-raspberry-red-800: oklch(30.96% 0.110 7.48);
  --color-raspberry-red-900: oklch(20.29% 0.065 4.38);
  --color-raspberry-red-950: oklch(16.63% 0.051 1.64);

  /* Vintage Grape */
  --color-vintage-grape-50: oklch(95.49% 0.009 292.79);
  --color-vintage-grape-100: oklch(90.82% 0.021 298.17);
  --color-vintage-grape-200: oklch(81.36% 0.042 296.13);
  --color-vintage-grape-300: oklch(71.78% 0.066 295.91);
  --color-vintage-grape-400: oklch(61.90% 0.090 294.32);
  --color-vintage-grape-500: oklch(52.07% 0.113 292.75);
  --color-vintage-grape-600: oklch(44.41% 0.097 292.76);
  --color-vintage-grape-700: oklch(36.64% 0.076 293.52);
  --color-vintage-grape-800: oklch(28.34% 0.054 293.34);
  --color-vintage-grape-900: oklch(19.50% 0.030 295.73);
  --color-vintage-grape-950: oklch(16.68% 0.021 293.17);

  /* Golden Pollen */
  --color-golden-pollen-50: oklch(97.76% 0.025 86.87);
  --color-golden-pollen-100: oklch(95.40% 0.048 84.56);
  --color-golden-pollen-200: oklch(91.08% 0.093 84.12);
  --color-golden-pollen-300: oklch(87.07% 0.133 82.74);
  --color-golden-pollen-400: oklch(83.42% 0.159 79.51);
  --color-golden-pollen-500: oklch(80.16% 0.171 73.27);
  --color-golden-pollen-600: oklch(67.92% 0.144 73.84);
  --color-golden-pollen-700: oklch(55.09% 0.116 74.75);
  --color-golden-pollen-800: oklch(41.47% 0.087 76.48);
  --color-golden-pollen-900: oklch(26.60% 0.055 80.87);
  --color-golden-pollen-950: oklch(21.85% 0.045 83.81);

  /* Turf Green */
  --color-turf-green-50: oklch(97.03% 0.016 172.65);
  --color-turf-green-100: oklch(94.20% 0.031 173.60);
  --color-turf-green-200: oklch(88.54% 0.061 171.26);
  --color-turf-green-300: oklch(83.13% 0.089 170.13);
  --color-turf-green-400: oklch(78.01% 0.115 167.79);
  --color-turf-green-500: oklch(73.30% 0.135 165.43);
  --color-turf-green-600: oklch(62.19% 0.113 165.38);
  --color-turf-green-700: oklch(50.59% 0.090 166.08);
  --color-turf-green-800: oklch(38.24% 0.066 166.22);
  --color-turf-green-900: oklch(24.85% 0.037 168.66);
  --color-turf-green-950: oklch(20.37% 0.028 170.59);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0px;
  font-family: 'Luciole', system-ui, sans-serif;
  background: var(--color-turf-green-100);
  color: var(--color-turf-green-950);
}

.site-header,
.page-grid {
  grid-column: 1;
  min-width: 0;
}

.back-to-top-wrap {
  grid-column: 2;
  grid-row: 1 / span 2;
}

html {
  scroll-behavior: smooth;
}

a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-space-indigo-800);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: -9999px;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--color-turf-green-50);
  color: var(--color-turf-green-950);
}

.skip-link:focus {
  left: 0.5rem;
}


/* ---------- A: Logo ---------- */

.logo {
  display: flex;
  align-items: center;
  padding: 1rem;
  text-decoration: none;
}

.logo-mark {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-turf-green-700);
  color: var(--color-turf-green-50);
  font-weight: 700;
}

a {
  color: var(--color-golden-pollen-950);
}

a:hover,
a:active {
  color: var(--color-golden-pollen-700);
}

/* ---------- Site header ---------- */

.site-header {
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

/* ---------- B: Nav ---------- */

.nav {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 1.5rem;
}

.nav-links a {
  white-space: nowrap;
  color: var(--color-golden-pollen-950);
  text-decoration: none;
  font-weight: 600;
}

.nav-links a:hover,
.nav-links a:active {
  color: var(--color-golden-pollen-700);
}

.menu-toggle {
  position: absolute;
  display: none;
  opacity: 0;
  pointer-events: none;
}

.burger {
  display: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-turf-green-800);
}

@container (max-width: 600px) {
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 100;
    min-width: 12rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border: 2px solid var(--color-turf-green-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  }

  .burger {
    display: block;
  }

  .menu-toggle {
    display: block;
  }

  .menu-toggle:checked ~ .nav-links {
    display: flex;
  }

  .menu-toggle:focus-visible + .burger {
    outline: 3px solid var(--color-space-indigo-800);
    outline-offset: 3px;
  }
}

/* ---------- C: Hero ---------- */

.hero {
  position: relative;
  padding: 4rem 5rem 0 2rem;
  padding-bottom: clamp(6rem, 18vw, 14rem);
  background: transparent url('food.svg') no-repeat center bottom -25vw / 100% auto;
}

.hero h1 {
  margin: 0 0 1rem;
  font-family: 'Amerigo', system-ui, sans-serif;
  font-size: clamp(4rem, 12vw, 25rem);
  line-height: 1;
  color: var(--color-vintage-grape-950);
}

.hero h2 {
  max-width: 30ch;
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  color: var(--color-vintage-grape-800);
}

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

.signup-links {
  margin-top: 2rem;
  max-width: 30rem;
}

.signup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.signup-actions a {
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: var(--color-turf-green-700);
  color: var(--color-turf-green-50);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.signup-actions a:hover,
.signup-actions a:active {
  color: var(--color-turf-green-50);
}

/* ---------- D: Hero2, vertical dates ---------- */

.hero-dates {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 1rem 0.75rem;
  background: var(--color-turf-green-800);
  color: var(--color-golden-pollen-300);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(0.5rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.hero-dates .date-dash {
  color: var(--color-golden-pollen-400);
}

/* ---------- E: Banner ---------- */

.banner {
  padding: 1.5rem 2rem;
  background: var(--color-golden-pollen-400);
  color: var(--color-golden-pollen-950);
  font-weight: 600;
  text-align: center;
}

.banner p {
  margin: 0;
}

/* ---------- F / G / H / I blocks ---------- */

.block-f,
.block-g,
.block-h,
.block-i,
.block-j,
.block-k {
  min-height: 12rem;
  display: grid;
  place-items: center;
}

.block-f {
  background: var(--color-turf-green-500);
  color: var(--color-turf-green-50);
  padding: 2rem;
}

.block-f .signup-links {
  margin-top: 0;
  width: 100%;
}

.block-g {
  position: relative;
  background: var(--color-turf-green-300);
  color: var(--color-turf-green-950);
  padding-inline: clamp(2rem, 8vw, 8rem);
}

.block-h,
.block-i,
.block-j,
.block-k {
  position: relative;
}

.block-g,
.block-h,
.block-i,
.block-j,
.block-k {
  isolation: isolate;
  overflow: clip;
}

/* Halftone sphere texture knobs (edge decoration behind the text blocks):
   --sphere-size:    mask width as % of the text column; the disc's center
                     sits on the edge, so 200% shows a half-sphere spanning
                     the full column width
   --sphere-x:       shift the sphere inward from the text-side edge
                     (negative values bleed outward and are clipped)
   --sphere-opacity: texture strength
   Override any of these per block, e.g. .block-g { --sphere-x: 10%; } */
:root {
  --sphere-size: 150%;
  --sphere-x: 0%;
  --sphere-opacity: 0.26;
}

/* Sphere hugs the edge the text starts from: left for text-left blocks,
   right for text-right blocks. */
.block-g .block-text::before,
.block-i .block-text::before,
.block-k .block-text::before {
  --sphere-pos: right calc(var(--sphere-x) - var(--sphere-size) / 2) center;
}

.block-h .block-text::before,
.block-j .block-text::before {
  --sphere-pos: left calc(var(--sphere-x) - var(--sphere-size) / 2) center;
}

.block-text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-golden-pollen-500);
  opacity: var(--sphere-opacity);
  /* Square aspect: width follows --sphere-size, height follows proportionally. */
  -webkit-mask: url('halftone-sphere.svg') var(--sphere-pos) / var(--sphere-size) auto no-repeat;
  mask: url('halftone-sphere.svg') var(--sphere-pos) / var(--sphere-size) auto no-repeat;
  pointer-events: none;
}

.block-g-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
}

.block-g .block-text {
  flex: 2 1 min(28rem, 100%);
  padding-inline: clamp(0.5rem, 2vw, 2rem);
}

.block-g-image-wrapper {
  flex: 1 1 min(14rem, 100%);
  display: flex;
  align-items: center;
  padding-block-end: clamp(1rem, 4vw, 2rem);
}

.block-g-image {
  display: block;
  width: 100%;
  height: auto;
}

.block-h {
  background: var(--color-turf-green-700);
  color: var(--color-turf-green-50);
}

.block-k {
  background: var(--color-turf-green-700);
  color: var(--color-turf-green-50);
}

/* split sections share block-g's wide edge margins */
.block-h,
.block-i,
.block-j,
.block-k {
  padding-inline: clamp(2rem, 8vw, 8rem);
}

/* ---------- Split sections (text + image) ---------- */

.split-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
}

/* DOM order is text-then-image; row-reverse puts the image on the left
   on wide screens while it still wraps under the text on mobile */
.split-inner.image-left {
  flex-direction: row-reverse;
}

.split-inner .block-text {
  flex: 2 1 min(28rem, 100%);
  padding-inline: clamp(0.5rem, 2vw, 2rem);
}

.split-image-wrapper {
  flex: 1 1 min(14rem, 100%);
  display: flex;
  align-items: center;
  padding-block-end: clamp(1rem, 4vw, 2rem);
}

.split-image {
  display: block;
  width: 100%;
  height: auto;
}

.block-text {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  padding: 4rem 2rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.block-text p {
  margin: 0 0 1.25rem;
}

.block-text p:last-child {
  margin-bottom: 0;
}

.block-i {
  background: var(--color-turf-green-400);
}

/* ---------- Auto grid section (plan items 6 & 9) ---------- */

.auto-grid-section {
  padding: 4rem 2rem;
  background: var(--color-turf-green-600);
}

.wrapper {
  max-width: 80rem;
  margin-inline: auto;
}

.auto-grid {
  --min-col-size: 200px;

  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-col-size), 100%), 1fr)
  );
}

.card {
  padding: 2rem 1rem;
  border-radius: 8px;
  background: white;
  color: var(--color-turf-green-800);
  text-align: center;
  font-weight: 600;
}

/* ---------- Back to top (CSS-only, per freeCodeCamp guide) ---------- */

.back-to-top-wrap {
  --offset: 30vh; /* appears once we've scrolled 30% of the viewport */
  --fade: 120px;

  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  justify-self: end;
  width: 3.5rem;
  /* The mask only hides the element visually — without this, the invisible
     wrap still swallows every tap on the right edge of the page
     (e.g. the mobile burger menu). */
  pointer-events: none;
  -webkit-mask: linear-gradient(
    #0000 calc(100vh + var(--offset)),
    #000 calc(100vh + var(--offset) + var(--fade))
  );
  mask: linear-gradient(
    #0000 calc(100vh + var(--offset)),
    #000 calc(100vh + var(--offset) + var(--fade))
  );
}

.back-to-top {
  position: sticky;
  bottom: 1.25rem;
  margin-right: 1.25rem;
  width: 100%;
  aspect-ratio: 1;
  pointer-events: auto;
  border-radius: 50%;
  background: var(--color-turf-green-800);
}

.back-to-top::before {
  content: "";
  position: absolute;
  inset: 30%;
  transform: translateY(20%) rotate(-45deg);
  border-top: 0.3rem solid var(--color-turf-green-50);
  border-right: 0.3rem solid var(--color-turf-green-50);
}