/* ============================================================
   La Palma Animal Care — coming-soon page (concept-2)
   Loads after tokens.css → nova.css → focus-ring → scrollbar → agency-badge.
   Every value is a Nova token or a calc() of one.
   ============================================================ */

/* ── Scheme lock ──────────────────────────────────────────────
   The B3 logo (brown wordmark, black cat) only reads on a light ground, so this page
   is locked light (<html class="light">). The generator's .light block hard-codes
   --h1-color to --text-dark and ignores typography.heading.h1.color, so the brand
   brown is re-pointed here. Link + focus move one shade darker than --primary:
   the sun orange measures ~3.2:1 on white, below AA for text. */
:root.light {
  --h1-color: var(--secondary);
  --h2-color: var(--secondary);
  --link-color: var(--primary-semi-dark);
  --link-color-hover: var(--primary-dark);
  --focus-color: var(--primary-semi-dark);
}

body {
  min-block-size: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* nova.css paints the skip link white on --primary: 3.31:1, below AA */
.skip-link { background: var(--secondary); }

/* ════ [ZE:top] ═══════════════════════════════════════════════ */
.cs-top {
  display: flex;
  justify-content: flex-end;
  padding-block: var(--space-xs);
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.cs-lang {
  display: flex;
  gap: calc(var(--space-xs) / 2);
}

.cs-lang__btn {
  min-block-size: 4.4rem;
  min-inline-size: 4.4rem;
  padding-inline: var(--space-xs);
  background: none;
  border: 0;
  border-radius: var(--radius-s);
  font: inherit;
  font-size: var(--text-s);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-dark-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: .2em;
  text-underline-offset: .45em;
  transition: color var(--transition-duration) var(--motion-ease-in-out),
              text-decoration-color var(--transition-duration) var(--motion-ease-in-out);
}

.cs-lang__btn:hover { color: var(--secondary); }

.cs-lang__btn[aria-pressed="true"] {
  color: var(--secondary);
  text-decoration-color: var(--primary);
}
/* ════ [/ZE:top] ══════════════════════════════════════════════ */

/* ════ [ZE:hero] ══════════════════════════════════════════════ */
.cs {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: start center;
  padding-inline: var(--gutter);
  padding-block: 0 var(--section-space-s);
  text-align: center;
  /* the sun is wider than a phone; clip it here (on body, overflow passes to the viewport and does not clip) */
  overflow-x: clip;
}

/* The logo's sun ring, grown to the size of the page and rising behind it.
   Earned from the brand: the ring is the accent (#F3B878), the glow the primary's
   lightest shade. It fades out downwards so it reads as a sunrise, not a frame. */
.cs__sun {
  position: absolute;
  z-index: -1;
  inset-block-start: calc(var(--space-xl) * -1);
  inset-inline-start: 50%;
  inline-size: min(118vmin, calc(var(--content-width) * .72));
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: var(--radius-circle);
  border: calc(var(--space-xs) * .7) solid hsl(var(--accent-h) var(--accent-s) var(--accent-l) / .55);
  background: radial-gradient(circle at 50% 42%,
              var(--primary-ultra-light) 0 34%,
              hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 0) 66%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 78%);
  pointer-events: none;
}

.cs__inner {
  inline-size: 100%;
  max-inline-size: 62ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);
}

.cs__logo {
  inline-size: min(72vw, calc(var(--content-width) * .25));
  block-size: auto;
  margin-block-end: var(--space-xs);
}

.cs__eyebrow {
  margin: 0;
  font-size: var(--text-s);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tertiary-dark);
}

.cs__title {
  margin: 0;
  max-inline-size: 20ch;
}

.cs__lead {
  margin: 0;
  max-inline-size: 48ch;
  font-size: var(--text-l);
  color: var(--text-dark);
}

.cs__services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-s);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--secondary);
}

.cs__services li { margin: 0; }

.cs__services li + li::before {
  content: "";
  display: inline-block;
  inline-size: .45em;
  aspect-ratio: 1;
  margin-inline-end: var(--space-s);
  border-radius: var(--radius-circle);
  background: var(--primary);
  vertical-align: .12em;
}

/* on a phone the three items wrap, and a wrapped line would START with a dot — stack them instead */
@media (max-width: 480px) {
  .cs__services { flex-direction: column; gap: calc(var(--space-xs) / 2); }
  .cs__services li + li::before { display: none; }
}

/* ════ [ZE:hero:contact] ══════════════════════════════════════ */
.cs__contact {
  inline-size: 100%;
  margin-block-start: var(--space-m);
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background: var(--tertiary-ultra-light);
  border: var(--border-size) solid hsl(var(--tertiary-h) var(--tertiary-s) var(--tertiary-l) / .35);
}

.cs__contact-h {
  margin: 0 0 var(--space-xs);
  font-size: var(--h3);
}

.cs__contact-text {
  margin: 0 auto var(--space-m);
  max-inline-size: 44ch;
}

.cs__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
}

.cs-btn {
  flex: 1 1 15em;
  max-inline-size: 22em;
  min-block-size: 4.8rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
  padding: var(--space-xs) var(--space-m);
  border: var(--border-size) solid var(--secondary);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color var(--transition-duration) var(--motion-ease-in-out),
              color var(--transition-duration) var(--motion-ease-in-out);
}

.cs-btn__label { font-weight: 600; font-size: var(--text-m); }
.cs-btn__value { font-size: var(--text-s); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.cs-btn--solid,
.cs-btn--solid:hover { color: var(--white); }
.cs-btn--solid { background: var(--secondary); }
.cs-btn--solid:hover { background: var(--secondary-semi-dark); }

.cs-btn--line,
.cs-btn--line:hover { color: var(--secondary); }
.cs-btn--line { background: var(--white); }
.cs-btn--line:hover { background: var(--secondary-ultra-light); }
/* ════ [/ZE:hero:contact] ═════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .cs__sun {
    animation: cs-rise calc(var(--motion-duration-l) * 3) var(--motion-ease-out) both;
  }
  .cs__inner {
    animation: cs-in calc(var(--motion-duration-l) * 1.6) var(--motion-ease-out) both;
    animation-delay: var(--motion-duration-s);
  }
}

@keyframes cs-rise {
  from { opacity: 0; translate: -50% 6%; }
  to   { opacity: 1; translate: -50% 0; }
}

@keyframes cs-in {
  from { opacity: 0; transform: translateY(var(--space-xs)); }
  to   { opacity: 1; transform: none; }
}
/* ════ [/ZE:hero] ═════════════════════════════════════════════ */

/* ════ [ZE:footer] ════════════════════════════════════════════ */
.cs-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-m) var(--gutter) var(--space-l);
  border-block-start: var(--border-size) solid var(--secondary-ultra-light);
  text-align: center;
  font-size: var(--text-s);
}

.cs-foot p { margin: 0; color: var(--text-dark-muted); }
.cs-foot__line { max-inline-size: 70ch; }

.cs-foot a:not(.lpwd-badge) {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.cs-foot a:not(.lpwd-badge):hover { color: var(--primary-dark); }
/* ════ [/ZE:footer] ═══════════════════════════════════════════ */

/* ════ [ZE:legal] ═════════════════════════════════════════════ */
.legal {
  inline-size: 100%;
  max-inline-size: 70ch;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-s) var(--section-space-s);
}

.legal__back { display: inline-block; margin-block-end: var(--space-m); font-weight: 600; }
.legal__logo { inline-size: calc(var(--content-width) * .13); block-size: auto; margin-block-end: var(--space-m); }
.legal h1 { font-size: var(--h2); }
.legal h2 { font-size: var(--h4); margin-block: var(--space-l) var(--space-xs); }
.legal p, .legal li { color: var(--text-dark); }
.legal address { font-style: normal; margin-block-end: var(--paragraph-spacing, 1em); }
.legal__note {
  padding: var(--space-s) var(--space-m);
  border-inline-start: calc(var(--border-size) * 3) solid var(--accent);
  background: var(--tertiary-ultra-light);
  border-radius: var(--radius-s);
}
/* ════ [/ZE:legal] ════════════════════════════════════════════ */