/* ==========================================================================
   Iridescent Gardens
   Order: tokens → base → layout → components → animation → feature queries

   Property order inside each rule, outside-in (alphabetical within each step):
   positioning → display/layout → margin → border → padding → sizing →
   typography → visual → misc (animation, content, list-style, etc.)
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Rainbow palette (sRGB fallbacks; upgraded to oklch in @supports below) */
  --c0: #F53227;
  --c1: #FB7C00;
  --c2: #FAD100;
  --c3: #43C251;
  --c4: #00C6CE;
  --c5: #1862F4;
  --c6: #822CC4;
  --c7: #E22F99;

  --period: 10s; /* time for the colors to travel once around the flower */

  --font-body: "Montserrat", sans-serif;
  --font-display: "Lora", serif;

  /* Fluid type and spacing: min, preferred (scales with viewport), max */
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 50rem;     /* max content width (800px) */
  --logo-size: 120px;
  --radius: 1rem;

  --line: #d5dbe1;      /* table borders */
}

/* Custom properties accept any value, so the cascade can't fall back from an
   unsupported oklch() on its own. @supports does the upgrade explicitly. */
@supports (color: oklch(0.5 0.1 100)) {
  :root {
    --c0: oklch(0.63 0.23 29);   /* red     */
    --c1: oklch(0.72 0.19 55);   /* orange  */
    --c2: oklch(0.87 0.18 95);   /* yellow  */
    --c3: oklch(0.72 0.19 145);  /* green   */
    --c4: oklch(0.75 0.13 200);  /* cyan    */
    --c5: oklch(0.55 0.23 262);  /* blue    */
    --c6: oklch(0.50 0.22 305);  /* violet  */
    --c7: oklch(0.62 0.23 350);  /* magenta */
  }
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-display);
}

h2 {
  border-bottom: 2px solid;
  font-size: 1.5rem;
}

p {
  margin: 1rem 0 0;
}

/* --- Layout --------------------------------------------------------------- */
.site-header {
  display: flex;
  justify-content: center;
  padding: 2rem var(--gutter);
}

main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-inline: auto;
  padding-block: 1rem 6rem;
  width: min(100% - 2 * var(--gutter), var(--measure));
}

/* --- Brand (logo + name) --------------------------------------------------- */
.brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  line-height: normal;
}

.brand h1,
.brand p {
  margin: 0;
}

.brand h1 {
  border-bottom: 2px solid;
  font-size: 2rem;
}

.brand p {
  font-size: 1.25rem;
}

.brand a {
  font-size: 1rem;
}

.logo {
  align-self: center;
  flex: none;
  height: var(--logo-size);
  width: var(--logo-size);
}

/* Wide screens: the text stays centered and the logo hangs off its left edge */
@media (min-width: 40rem) {
  .brand {
    position: relative;
    padding-top: 1.15rem;
  }

  .logo {
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 0;
  }
}

/* --- Logo internals --------------------------------------------------------
   Black outline layer sits under the colored petals. */
.logo-outline {
  fill: #000;
  stroke: #000;
  stroke-width: 8;
}

.petal {
  --i: 0; /* petal index (0–7), set inline in the HTML */
  fill: var(--c0);
  animation: flow var(--period) linear infinite;
  /* Same color loop on every petal, offset in time, so each color moves to
     the next petal clockwise. */
  animation-delay: calc(var(--period) * (var(--i) / 8 - 1));
}

/* Static shading layer on top of the animated petals. The filter only reads each
   petal's alpha, so the fill color is irrelevant. */
.logo-shade use {
  fill: #000;
  filter: url(#petal-shade);
  pointer-events: none;
}

@keyframes flow {
  0%, 100% { fill: var(--c0); }
  12.5%    { fill: var(--c7); }
  25%      { fill: var(--c6); }
  37.5%    { fill: var(--c5); }
  50%      { fill: var(--c4); }
  62.5%    { fill: var(--c3); }
  75%      { fill: var(--c2); }
  87.5%    { fill: var(--c1); }
}

/* Reduced motion: freeze each petal at its own offset, so the rainbow stays */
@media (prefers-reduced-motion: reduce) {
  .petal {
    animation-play-state: paused;
  }
}

/* --- Service lists ---------------------------------------------------------- */
.service-list {
  margin-inline: 0;
  padding: 0;
  list-style: none;
}

.service-list li {
  display: grid;
  grid-template-columns: 2rem 1fr; /* icon column keeps wrapped lines aligned */
}

/* Both declarations stay in this order: the second is ignored by browsers that
   don't support the alt-text syntax, which then use the first. */
.service-list li::before {
  content: attr(data-icon);
  content: attr(data-icon) / ""; /* empty alt text: screen readers skip the emoji */
}

/* --- Project gallery -------------------------------------------------------- */
.projects {
  --gap: 1rem;
  --max-cols: 2;
  --min: 18rem;      /* collapses to 1 column below roughly 2 * --min + gap */

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      max(var(--min), (100% - (var(--max-cols) - 1) * var(--gap)) / var(--max-cols)),
      1fr
    )
  );
  margin: 1rem 0;
}

.project {
  display: block;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3; /* gives object-fit something to crop to; remove to keep native ratios */
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* --- Rates table -------------------------------------------------------------- */
.rates {
  margin: 2rem 0;
  border-collapse: collapse;
  max-width: 900px;
}

.rates caption {
  caption-side: top;
  padding-bottom: .5rem;
  font-weight: 700;
}

.rates th,
.rates td {
  border: 1px solid var(--line);
  padding: .75rem 1rem;
  text-align: center;
}

.rates th {
  background: #0e7d47;
  color: white;
}

/* Communities column: a long list reads better left-aligned */
.rates td:last-child {
  text-align: left;
}

/* Mobile: one card per zone, label on the left, value on the right */
@media (max-width: 640px) {
  /* Visually hidden, but still available to screen readers */
  .rates thead {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    clip-path: inset(50%);
  }

  .rates,
  .rates tbody,
  .rates tr,
  .rates caption {
    display: block;
    width: 100%;
  }

  .rates tr {
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
  }

  .rates td {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    border: 0;
    border-top: 1px solid var(--line);
    width: 100%;
  }

  .rates td::before {
    font-weight: 700;
    content: attr(data-label);
  }

  /* Communities row: label stacked above the (long) list instead of beside it */
  .rates td:last-child {
    flex-direction: column;
    gap: .25rem;
  }

  /* The Zone row doubles as the card header */
  .rates td:first-child {
    border-top: 0;
    background: #0e7d47;
    color: white;
  }
}