/* ==========================================================================
   Hens Paradise — styles.css
   Ported from the Hens Paradise design system (Claude Design project
   38b281f0-a4af-49b0-a638-9d4bc45ea83f). Mobile-first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   Plus Jakarta Sans is a variable font: one file covers weights 200–800,
   so every weight the design uses comes from a single 27 KB request.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand ramp — one accent only (Vitality Red). Never introduce a second hue. */
  --red-60: #e31e24;
  --red-40: #ba0013;

  /* Warm neutral scale */
  --neutral-99: #fbf9f8;
  --neutral-95: #f5f3f3;
  --neutral-92: #efeded;
  --neutral-40: #5f5e5e;
  --neutral-10: #1b1c1c;
  --rose-70: #e7bdb8;

  /* Semantic roles */
  --primary: var(--red-40);
  --accent: var(--red-60);
  --on-primary: #ffffff;
  --background: var(--neutral-99);
  --on-surface: var(--neutral-10);
  --secondary: var(--neutral-40);
  --surface-lowest: #ffffff;
  --surface-low: var(--neutral-95);
  --surface: var(--neutral-92);
  --outline-variant: var(--rose-70);
  --hairline: rgba(231, 189, 184, 0.35);
  --glass-fill: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.6);
  --field-border: #b9b6b6;
  --prose-text: #3d3c3c;

  --success: #15803d;
  --error: #ba1a1a;

  /* Type */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI",
    sans-serif;

  /* Spacing */
  --container-max: 1280px;
  --gutter: 1rem;
  --section-gap: 3.5rem;
  /* Must clear the fixed header: logo height + vertical padding */
  --header-height: 4.5rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Elevation — card / glass / glow (glow is the one shadow carrying brand colour) */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 8px 16px rgba(227, 30, 36, 0.3);
  --blur-glass: 20px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --section-gap: 5rem;
    --header-height: 5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 4rem;
  }
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps in-page anchor targets clear of the fixed header */
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--primary);
}

a:hover {
  color: var(--accent);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

button {
  font: inherit;
}

/* Visible focus ring — restyled, never removed */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-default) 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

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

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.section--tinted {
  background: var(--surface-low);
}

.section--panel {
  background: var(--surface-lowest);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.section__title {
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.section__lead {
  font-size: 1rem;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 2rem;
}

.section--center {
  text-align: center;
}

.section--center .section__lead {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

/* Grid items default to min-width:auto, so a wide child (the temperature
   table) would size the track past the viewport instead of scrolling inside
   its own wrapper */
.split > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .section__title {
    font-size: 2.25rem;
  }

  .section__lead {
    font-size: 1.0625rem;
  }
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* Flips column order on desktop only, so source order stays logical */
  .split--flip > *:first-child {
    order: 2;
  }
}

/* Rounded frame used for hero and feature imagery */
.media-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-lowest);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Portrait variant — the phone photography is mostly 3:4, which letterboxes
   badly in the default 3:2 frame */
.media-frame--tall {
  aspect-ratio: 4 / 5;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Mobile default: full-width, edge to edge. Reset to auto at tablet+
     below, so buttons only shrink to their content on larger screens. */
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.875rem 2rem;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

@media (min-width: 768px) {
  .btn {
    width: auto;
  }
}

.btn:hover {
  opacity: 0.9;
}

.btn:active {
  transform: scale(0.96);
}

.btn--primary {
  background: linear-gradient(to right, var(--accent), var(--primary));
  color: var(--on-primary);
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover {
  color: var(--on-primary);
}

.btn--secondary {
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--on-surface);
}

.btn--secondary:hover {
  color: var(--on-surface);
}

.btn--lg {
  padding: 1rem 2.5rem;
  font-size: 0.8125rem;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   7. ICONS
   -------------------------------------------------------------------------- */

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  fill: currentColor;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--lg {
  width: 2rem;
  height: 2rem;
}

.icon--accent {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   8. HEADER / NAV
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: rgba(251, 249, 248, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 2.75rem;
  width: auto;
}

@media (min-width: 768px) {
  .site-header__logo img {
    height: 3.25rem;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-default);
  color: var(--on-surface);
  cursor: pointer;
}

.nav-toggle__close,
.site-header.nav-open .nav-toggle__open {
  display: none;
}

.site-header.nav-open .nav-toggle__close {
  display: block;
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--background);
  border-bottom: 1px solid var(--hairline);
  padding: 0.5rem var(--gutter) 1.25rem;
}

.site-header.nav-open .site-nav {
  display: block;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-link {
  display: block;
  padding: 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #474746;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    position: static;
    width: auto;
    background: transparent;
    border-bottom: none;
    padding: 0;
    margin-left: auto;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .nav-link {
    padding: 0 0 0.25rem;
    font-size: 0.875rem;
  }

  .nav-link[aria-current="page"] {
    border-bottom-color: var(--primary);
  }
}

/* Clears the fixed header */
#main-content {
  padding-top: var(--header-height);
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */

.hero {
  padding-top: 3rem;
  padding-bottom: var(--section-gap);
}

.hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero__title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero__lead {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 1.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: 2.75rem;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-top: 4.5rem;
  }

  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .hero__title {
    font-size: 3rem;
  }

  .hero__grid--form {
    grid-template-columns: 1fr 1.05fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   10. STATS BAR
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stat__value {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat__label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--secondary);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .stat__value {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   11. ABOUT — credential grid
   -------------------------------------------------------------------------- */

.credentials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
}

.credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.credential img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.credential span {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .credentials {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .credentials {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* --------------------------------------------------------------------------
   12. SAPA CERTIFICATE
   -------------------------------------------------------------------------- */

.certificate {
  background: var(--surface-lowest);
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-card);
  max-width: 24rem;
  margin: 0 auto;
}

.certificate__caption {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary);
}

.badge-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   13. FEATURE LIST
   -------------------------------------------------------------------------- */

.feature-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.feature-list .icon {
  color: var(--accent);
  margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   14. PRODUCT CARDS
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card__media {
  height: 12.5rem;
  background: var(--surface-lowest);
  border-bottom: 1px solid var(--hairline);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem;
}

.product-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.product-card .feature-list {
  margin-bottom: 1.25rem;
}

.product-card .feature-list li {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--secondary);
}

.product-card__footer {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Single-product variant: the card is the only item in its grid row, so the
   media sits beside the copy from tablet up rather than leaving a half-empty
   row. Stays stacked on mobile via the base .product-card rules. */
@media (min-width: 768px) {
  .product-card--wide {
    flex-direction: row;
  }

  .product-card--wide .product-card__media {
    flex: 0 0 40%;
    height: auto;
    border-bottom: 0;
    border-right: 1px solid var(--hairline);
  }

  .product-card--wide .product-card__body {
    padding: 2.25rem;
  }
}

/* --------------------------------------------------------------------------
   15. INFO CARDS (delivery options, breeds)
   -------------------------------------------------------------------------- */

.info-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}

.info-card__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.info-card p {
  font-size: 0.9375rem;
  color: var(--secondary);
}

/* Age range / feed rate line that sits between the card title and its copy.
   Left in sentence case because it runs to two lines when it wraps, and
   uppercase breaks badly mid-phrase at that length. */
.info-card__meta {
  margin: -0.25rem 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   15b. DATA TABLES
   -------------------------------------------------------------------------- */

/* The wrapper carries the border and radius so the corners actually clip, and
   lets a wide table scroll on its own rather than widening the page */
.table-wrap {
  overflow-x: auto;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th,
.data-table td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  /* Temperature ranges must not break across lines */
  white-space: nowrap;
}

@media (min-width: 768px) {
  .data-table {
    font-size: 0.9375rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.75rem 1rem;
  }
}

.data-table thead th {
  /* Column headings may wrap; only the data must stay on one line. Without
     this the table needs sideways scrolling on a phone. */
  white-space: normal;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table tbody th {
  font-weight: 700;
}

.data-table tbody td {
  font-weight: 500;
  color: var(--secondary);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.table-note {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--secondary);
}

/* Heading one level below .section__title, used inside a split column */
.subsection__title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   15c. FINAL CTA BANNER
   -------------------------------------------------------------------------- */

.cta-banner {
  padding: var(--section-gap) 0;
  background: linear-gradient(to right, var(--accent), var(--primary));
  text-align: center;
}

.cta-banner__title {
  color: var(--on-primary);
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.cta-banner__lead {
  max-width: 36rem;
  margin: 0 auto 2rem;
  color: var(--on-primary);
  opacity: 0.92;
  font-weight: 500;
}

/* Inverted so the button reads against the banner's own red gradient
   background rather than disappearing into it */
.cta-banner__btn {
  background: var(--on-primary);
  color: var(--primary);
  box-shadow: none;
}

.cta-banner__btn:hover {
  color: var(--primary);
}

@media (min-width: 768px) {
  .cta-banner__title {
    font-size: 2.25rem;
  }
}

/* --------------------------------------------------------------------------
   16. RESOURCE TILES & GUIDES
   -------------------------------------------------------------------------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .tile-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.625rem;
  padding: 1.25rem 1rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tile:hover {
  border-color: var(--accent);
  color: var(--on-surface);
  transform: translateY(-2px);
}

.tile .icon {
  color: var(--accent);
  width: 1.875rem;
  height: 1.875rem;
  transition: transform 0.2s ease;
}

.tile:hover .icon {
  transform: scale(1.1);
}

.tile__label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* File-type hint, so it is clear what a tile opens before you click it */
.tile__meta {
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* --------------------------------------------------------------------------
   16b. GALLERY
   One horizontally scrolling row on every screen size, so 14 photos cost the
   visitor one section of vertical scroll instead of four rows of it. Square
   tiles keep the mixed portrait/landscape phone photography lined up.
   -------------------------------------------------------------------------- */

.gallery {
  position: relative;
}

.gallery-track {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Room for the scrollbar so it never sits on top of the last row of image */
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--outline-variant) transparent;
}

.gallery-track::-webkit-scrollbar {
  height: 6px;
}

.gallery-track::-webkit-scrollbar-track {
  background: transparent;
}

.gallery-track::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: var(--radius-full);
}

.gallery-item {
  position: relative; /* contains the absolutely-positioned .visually-hidden
                         label, which would otherwise escape the track's
                         clipping and stretch the page horizontally */
  flex: 0 0 auto;
  width: 13rem;
  margin: 0;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  scroll-snap-align: start;
  cursor: pointer;
  appearance: none;
}

@media (min-width: 768px) {
  .gallery-track {
    gap: 1rem;
  }

  .gallery-item {
    width: 15rem;
  }
}

@media (min-width: 1024px) {
  .gallery-item {
    width: 17rem;
  }
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.06);
}

/* Arrow buttons: a mouse cannot scroll a horizontal track without holding
   Shift, so they only appear where a pointer is the likely input. */
.gallery-nav {
  display: none;
}

@media (min-width: 768px) {
  .gallery-nav {
    position: absolute;
    top: calc(50% - 0.375rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-full);
    background: var(--surface-lowest);
    color: var(--primary);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
  }

  .gallery-nav:hover {
    background: var(--surface);
  }

  .gallery-nav--prev {
    left: -0.75rem;
  }

  .gallery-nav--next {
    right: -0.75rem;
  }

  /* Set by script.js once the track hits either end */
  .gallery-nav[disabled] {
    opacity: 0;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   16c. LIGHTBOX
   -------------------------------------------------------------------------- */

.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

.lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Fixed to the viewport, not the image, so it stays put whatever the photo's
   aspect ratio. The dark disc keeps the X legible over pale images too. */
.lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}

.lightbox__close:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Stops the page behind the lightbox scrolling on touch devices */
.is-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */

.form-panel {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
  padding: 1.5rem;
}

.form-panel--solid {
  background: var(--surface-lowest);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--outline-variant);
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
  .form-panel {
    padding: 2rem;
  }
}

.form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.form-legend {
  width: 100%;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 0 0 0.5rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--outline-variant);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--field-border);
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-surface);
  transition: border-color 0.2s ease;
}

.form-group textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-bottom-color: var(--accent);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #8a8888;
}

/* Block of fields revealed by a checkbox — indented so the dependency reads */
.form-conditional {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--outline-variant);
}

/* Needed because the display above would otherwise beat the [hidden] default */
.form-conditional[hidden] {
  display: none;
}

/* Inline notice under a field, e.g. the Hy-Line lead-time message */
.field-note {
  margin-top: 0.375rem;
  padding: 0.625rem 0.75rem;
  background: var(--surface-low);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--prose-text);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.form-check input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.form-check label {
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--secondary);
  line-height: 1.5;
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.form-status {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.form-status.success {
  color: var(--success);
}

.form-status.error {
  color: var(--error);
}

/* --------------------------------------------------------------------------
   18. CONTACT
   -------------------------------------------------------------------------- */

.contact-panel {
  display: grid;
  gap: 2rem;
  max-width: 60rem;
  margin: 0 auto;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .contact-panel {
    padding: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .contact-panel {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
  }

  .contact-panel__aside {
    border-left: 1px solid var(--outline-variant);
    padding-left: 2.5rem;
  }
}

.contact-panel__aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-block h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.contact-block p,
.contact-block a {
  font-size: 0.9375rem;
  color: var(--secondary);
  margin: 0 0 0.25rem;
  text-decoration: none;
  display: block;
}

.contact-block a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.social-row {
  display: flex;
  gap: 0.75rem;
}

/* Scoped to .contact-block so it outranks the `.contact-block a` rule above,
   which would otherwise paint the icon the same grey as the button itself. */
.contact-block .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease;
}

.contact-block .social-link:hover {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}

.social-link .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-lowest);
  border-top: 1px solid var(--hairline);
  padding: 2rem 0;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.site-footer__logo img {
  height: 3rem;
  width: auto;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}

.site-footer__links a {
  font-size: 0.8125rem;
  color: var(--secondary);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.site-footer__legal {
  font-size: 0.8125rem;
  color: var(--secondary);
}

.site-footer__legal p {
  margin: 0 0 0.25rem;
}

@media (min-width: 1024px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .site-footer__legal {
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   19b. WHATSAPP FAB
   Fixed to the viewport rather than the footer's own DOM position, so it
   stays put — and reachable — no matter how far down the page you've
   scrolled. Uses the brand ramp rather than WhatsApp's own green, matching
   the existing .social-link WhatsApp icon in the Contact section.
   -------------------------------------------------------------------------- */

.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, #4cc759, #29af3e);
  color: var(--on-primary);
  box-shadow: var(--shadow-glow);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.whatsapp-fab:hover {
  color: var(--on-primary);
  opacity: 0.92;
  transform: translateY(-2px);
}

.whatsapp-fab .icon {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 768px) {
  .whatsapp-fab {
    right: 2rem;
    bottom: 2rem;
  }
}

/* --------------------------------------------------------------------------
   20. PROSE (legal pages)
   -------------------------------------------------------------------------- */

.prose {
  max-width: 48rem;
  margin: 0 auto;
}

.prose h2 {
  font-size: 1.375rem;
  margin: 2.5rem 0 0.75rem;
}

.prose h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 2rem 0 0.5rem;
}

.prose p,
.prose li {
  font-size: 1rem;
  color: var(--prose-text);
  line-height: 1.7;
}

.prose ul {
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose strong {
  color: var(--on-surface);
  font-weight: 700;
}

.prose__meta {
  font-size: 0.875rem;
  color: var(--secondary);
  margin-bottom: 2rem;
}

.page-header {
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}

.page-header h1 {
  font-size: 2rem;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .page-header h1 {
    font-size: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   21. 404
   -------------------------------------------------------------------------- */

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem var(--gutter);
  gap: 1rem;
}

.error-page__logo {
  height: 3.25rem;
  width: auto;
  margin-bottom: 1rem;
}

/* Scoped so it outranks the `.error-page p` colour rule below */
.error-page .error-page__code {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 0;
}

.error-page h1 {
  font-size: 1.75rem;
}

.error-page p {
  color: var(--secondary);
  max-width: 34rem;
}