/* =============================================================
   SUNDAY SUPPER - Shared brand tokens & helpers
   Ported from the design export. Scoped helpers use the ss- prefix
   so they never collide with the base Bottle theme.
   ============================================================= */

:root {
  /* ---- Brand color primitives ---- */
  --ss-coral: rgb(241, 93, 69);
  --ss-orange: rgb(240, 78, 40);
  --ss-red: rgb(176, 47, 52);
  --ss-berry: rgb(181, 57, 60);
  --ss-yellow: rgb(250, 214, 57);
  --ss-yellow-bright: rgb(255, 228, 69);
  --ss-green: rgb(41, 151, 75);
  --ss-cream: rgb(255, 255, 246);
  --ss-surface: rgb(249, 249, 249);
  --ss-white: rgb(255, 255, 255);
  --ss-black: rgb(0, 0, 0);

  /* ---- Semantic color roles ---- */
  --ss-color-primary: var(--ss-coral);
  --ss-color-accent: var(--ss-orange);
  --ss-color-bg: var(--ss-surface);
  --ss-color-surface-card: var(--ss-cream);
  --ss-color-text: var(--ss-black);
  --ss-color-text-invert: var(--ss-white);
  --ss-color-text-muted: rgba(0, 0, 0, 0.62);
  --ss-color-border-light: rgba(255, 255, 255, 0.55);

  /* ---- Typography ---- */
  --ss-font-display: "Rockids", "Rockids Display", "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ss-font-body: var(--sort-body-font);

  /* ---- Override base theme title typography only ---- */
  /* Body typography remains controlled by the theme's global body setting. */
  --sort-title-font: var(--ss-font-display);
  --sort-title-font-style: normal;
  --sort-title-font-weight: var(--ss-font-weight-black);

  --ss-font-weight-regular: 400;
  --ss-font-weight-medium: 500;
  --ss-font-weight-bold: 700;
  --ss-font-weight-black: 900;

  --ss-line-height-tight: 1;
  --ss-line-height-snug: 1.1;
  --ss-line-height-normal: 1.4;

  /* Type scale (rem - 16px base) */
  --ss-font-size-xs: 0.75rem; /* 12 */
  --ss-font-size-sm: 0.9375rem; /* 15 */
  --ss-font-size-base: 1.125rem; /* 18 */
  --ss-font-size-md: 1.25rem; /* 20 */
  --ss-font-size-lg: 2rem; /* 32 */
  --ss-font-size-xl: 2.5rem; /* 40 */
  --ss-font-size-2xl: 3.375rem; /* 54 */
  --ss-font-size-3xl: 4rem; /* 64 */
  --ss-font-size-4xl: 6.625rem; /* 106 */

  /* Fluid display sizes for poster headlines */
  --ss-display-sm: clamp(3rem, 7vw, 5.5rem);
  --ss-display-md: clamp(3.75rem, 10.5vw, 9rem);
  --ss-display-lg: clamp(4.75rem, 15vw, 13rem);
  --ss-display-xl: clamp(6rem, 22vw, 21rem);

  /* ---- Spacing scale (4px base) ---- */
  --ss-space-1: 0.25rem;
  --ss-space-2: 0.5rem;
  --ss-space-3: 0.75rem;
  --ss-space-4: 1rem;
  --ss-space-5: 1.5rem;
  --ss-space-6: 2rem;
  --ss-space-7: 3rem;
  --ss-space-8: 4rem;
  --ss-space-9: 5rem;
  --ss-space-10: 6rem;
  --ss-space-11: 8rem;
  --ss-space-12: 10rem;

  /* ---- Radii ---- */
  --ss-radius-sm: 0.5rem;
  --ss-radius-md: 1.25rem;
  --ss-radius-pill: 999px;

  /* ---- Shadows ---- */
  --ss-shadow-card: 0 2px 14px rgba(4, 4, 4, 0.06);
  --ss-shadow-pop: 0 8px 30px rgba(0, 0, 0, 0.18);

  /* ---- Layout ---- */
  --ss-container-max: 1280px;
  --ss-container-pad: var(--ss-space-7);
}

/* =============================================================
   Shared helpers (scoped with ss- prefix)
   ============================================================= */
.ss-display {
  font-family: var(--ss-font-display);
  font-weight: var(--ss-font-weight-black);
  line-height: var(--ss-line-height-snug);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  /* Base theme forces `word-break: break-word` on all headings, which
     collapses these poster titles to one letter per line inside grids.
     Restore normal word wrapping. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.ss-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ss-container {
  width: 100%;
  max-width: var(--ss-container-max);
  margin-inline: auto;
  padding-inline: var(--ss-container-pad);
}

/* Arrow glyph used on CTAs (the Sunday Supper "fat arrow") */
.ss-arrow {
  flex: none;
  width: 2.1em;
  height: 1.45em;
  fill: currentColor;
}

/* Pill CTAs + global .field/.button styles live in sunday-supper/forms.css */

@media (max-width: 1100px) {
  :root {
    --ss-container-pad: var(--ss-space-6);
  }
}
@media (max-width: 820px) {
  :root {
    --ss-container-pad: var(--ss-space-5);
  }
}
@media (max-width: 560px) {
  :root {
    --ss-container-pad: var(--ss-space-4);
  }
}