/* site.css — everything specific to the Nicer Site marketing pages.
 *
 * Loaded after style.css, which is the airy template's base and stays
 * byte-identical to the template. Only what this site alone needs lives here,
 * so the template's own file never drifts.
 *
 * Contents: two colour palettes, fixes to the template's layout in this
 * context, the example-sites carousel, the guarantees list, the price panel,
 * and the language switch. */

/* ── Palette A: Sitruuna (light, the default) ────────────────────────────
 * Warm paper, near-black ink and one high-chroma citrus accent used only
 * where the eye should land: the primary button and the marks. The accent is
 * never text on the ground — it is a fill with dark text on it, which is why
 * it can be this bright and still measure 14.2:1.
 *
 * Verified by computation, then re-checked against the rendered page:
 * text/ground 17.1, muted/ground 6.5, primary/ground 10.9, accent fill 14.2,
 * inverted band 17.1. */

:root {
  --color-primary: #2e3d14;          /* deep olive — links and quiet marks */
  --color-primary-shade: #1f2a0d;
  --color-primary-tint: #e6f0c8;
  --color-on-primary: #13150e;
  --color-accent: #c6f24e;           /* citrus — the one loud note */
  --color-surface: #ffffff;
  --color-surface-alt: #ecece4;
  --color-text: #13150e;
  --color-muted: #585b4e;
  --color-border: #ddddd2;
  --color-chrome: #ffffff;
  --color-quiet-fill: #ecece4;
  --color-ground-deep: #13150e;
  --color-on-ground-deep: #f7f7f3;

  /* The page itself, a shade off the cards so panels read as raised. The
     template has no token for this because there the two matched. */
  --color-ground: #f7f7f3;
  --color-on-accent: #13150e;
  --color-accent-shade: #b8e83c;   /* hover; 12.8:1 under the dark label */
  /* The bezel around the example phones. */
  --color-bezel: #13150e;
}

/* ── Palette B: Yö (dark) ───────────────────────────────────────────────
 * The same citrus accent on a near-black ground, so the two variants read as
 * one brand rather than two. Measured: text/ground 16.1, muted/ground 7.2,
 * accent/ground 14.5, accent fill 14.2. */

:root[data-palette="dark"] {
  --color-primary: #c6f24e;
  --color-primary-shade: #d8f77e;
  --color-primary-tint: #243019;
  --color-on-primary: #13150e;
  --color-accent: #c6f24e;
  --color-surface: #191e18;
  --color-surface-alt: #141813;
  --color-text: #ecefe6;
  --color-muted: #9ba394;
  --color-border: #2b332a;
  --color-chrome: #191e18;
  --color-quiet-fill: #232a22;
  --color-ground-deep: #080a08;
  --color-on-ground-deep: #ecefe6;

  --color-ground: #0f1310;
  --color-on-accent: #13150e;
  --color-accent-shade: #d8f77e;   /* hover; brighter reads as "lit" on a dark ground */
  --color-bezel: #000000;
}

body {
  background: var(--color-ground);
}

/* The primary pill carries the accent fill in both palettes — it is the one
   place the citrus is allowed to shout. */
.button--pill,
.button--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

/* Hover deepens the citrus rather than swapping to the dark primary. The
   earlier version set a dark background and left the dark label on it, which
   measured 1.14:1 — the button turned into a solid block with its text gone. */
.button--pill:hover,
.button--primary:hover,
.button--pill:focus-visible,
.button--primary:focus-visible {
  background: var(--color-accent-shade);
  border-color: var(--color-accent-shade);
  color: var(--color-on-accent);
}

/* ── Opening backdrop ───────────────────────────────────────────────────
 * A photograph behind the opening headline, faded almost to the ground.
 *
 * The image is masked so it is fully transparent where the text sits and only
 * appears towards the edges. That is deliberate: it means the headline is
 * always on the flat ground colour, so its contrast is a property of the
 * layout rather than something that happens to work out against whichever
 * pixels are behind it. A dark photograph under dark text would otherwise be
 * unreadable in the light palette, and the same image has to serve both.
 *
 * Decorative only: empty alt, hidden from assistive technology. */

.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.stage__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.stage__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: saturate(0.7);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, transparent 0%, transparent 45%, #000 90%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, transparent 0%, transparent 45%, #000 90%);
}

/* Without this the photograph stops dead on the seam with the next section,
   drawing a hard horizontal line across the page. */
.stage__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--color-ground) 96%);
}

/* On the dark ground a daylight photograph reads much brighter, so it is held
   further back and cooled to sit with the near-black. */
:root[data-palette="dark"] .stage__backdrop img {
  opacity: 0.13;
  filter: saturate(0.35) brightness(0.85);
}

/* ── Fixes to the template's layout in this site's context ───────────────*/

/* The template leaves the opening section without bottom padding so its
   render can bleed off the edge. This site has no render there, which left the
   buttons resting exactly on the seam with the next section — measured 0px of
   clearance, which reads as the buttons being sliced. */
.stage {
  padding-bottom: var(--section-pad, 5rem);
}

.stage--closing {
  padding-bottom: var(--section-pad, 5rem);
}

/* Anchor targets sat under the floating header when jumped to. */
[id] {
  scroll-margin-top: 7rem;
}

/* Inside the inverted band the cards keep a light background, but their
   titles inherited the band's light-on-dark colour — near-white text on a
   near-white card, about 1:1. Only the body text was legible. */
.band--deep .card__title {
  color: var(--color-text);
}

/* The kicker uses the muted token, which is tuned for the pale grounds and
   reached only 2.5:1 against the deep one. */
.band--deep .section__kicker {
  color: #9aa48c;
}

:root[data-palette="dark"] .band--deep .section__kicker {
  color: #9ba394;
}

/* The heading sat directly on the card grid with no gap at all. */
.band__inner .card-grid {
  margin-top: 2.5rem;
}

/* Four cards in a three-column grid left the fourth stranded on its own row.
   Sizing by content lets four sit in one row and three in another. */
.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* ── Carousel: the example sites, shown as phones ────────────────────────
 * Each slide is one example: the phone on the left, what it is on the right.
 * A desktop screenshot was tried first and had to be abandoned — scaled down
 * it was unreadable, and cropped it looked like a broken page.
 *
 * The track scroll-snaps natively, so the block still works with JS
 * disabled; carousel.js adds the buttons, the dots and the rotation. */

.carousel {
  position: relative;
}

.carousel__track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin: 0;
}

/* The bezel wraps the screenshot rather than imposing a shape on it. An
   earlier version put `aspect-ratio: 390/844` on this box and let the image
   cover it — but the padding makes the inner area a different shape from the
   outer one, so the image was cropped and the corner controls (the menu
   button, the header action) were sliced off. The frame now takes its height
   from the image, so nothing is ever cut. */
.carousel__phone {
  width: 100%;
  margin: 0;
  padding: 0.5rem;
  background: var(--color-bezel);
  border-radius: 2.25rem;
  box-shadow: var(--shadow-lift);
  line-height: 0;
}

.carousel__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.85rem;
}

.carousel__body {
  max-width: 32rem;
}

.carousel__kicker {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.carousel__title {
  margin: 0.5rem 0 0.75rem;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  color: var(--color-text);
}

.carousel__text {
  margin: 0;
  color: var(--color-muted);
  line-height: var(--leading-body);
}

.carousel__meta {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.carousel__meta strong {
  color: var(--color-text);
  font-weight: 600;
}

.carousel__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.carousel--interactive .carousel__controls {
  display: flex;
}

.carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-airy),
              border-color var(--dur-hover) var(--ease-airy);
}

.carousel__button:hover {
  background: var(--color-quiet-fill);
  border-color: var(--color-text);
}

.carousel__dots {
  display: flex;
  gap: 0.5rem;
}

.carousel__dot {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  /* A hairline border in the border token is invisible against the ground,
     which left only the current dot legible. Fill them instead. */
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity var(--dur-hover) var(--ease-airy);
}

.carousel__dot:hover {
  opacity: 0.6;
}

.carousel__dot--current {
  background: var(--color-accent);
  opacity: 1;
}

:root[data-palette="dark"] .carousel__dot--current {
  background: var(--color-accent);
}

@media (max-width: 52rem) {
  .carousel__slide {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 2rem;
  }

  .carousel__phone {
    max-width: 15rem;
  }
}

/* ── Proof: the technical guarantees, as a plain definition list ───────── */

.proof {
  display: grid;
  /* Six items: 18rem forces three columns at desktop, so they fall as two
     even rows instead of four plus two stranded. */
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2rem 2.5rem;
  margin: 0;
}

.proof__item {
  margin: 0;
}

.proof__term {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-text);
}

.proof__detail {
  margin: 0.3rem 0 0;
  color: var(--color-muted);
  line-height: var(--leading-body);
}

/* ── Price: the single-plan panel ──────────────────────────────────────── */

.price {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem;
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-l);
  text-align: center;
  box-shadow: var(--shadow-lift);
}

.price__amount {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--color-text);
}

.price__unit {
  display: block;
  margin-top: 0.4rem;
  color: var(--color-muted);
}

.price__list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.price__item {
  padding: 0.6rem 0;
  border-top: var(--border-hair) solid var(--color-border);
  color: var(--color-text);
}

.price__note {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.price__action {
  margin-top: 1.5rem;
}

/* The panel is centred, so its section heading is centred with it rather
   than sitting far left against an empty right half. */
.section--centred .section__head {
  margin-inline: auto;
  text-align: center;
}

/* ── Contact form ───────────────────────────────────────────────────────
 * The closing section centres its heading and lead, but the form kept the
 * template's full-width left alignment and sat off-centre beneath them. */

.contact-form {
  max-width: 34rem;
  margin-block-start: 2.5rem;
  margin-inline: auto;
  text-align: left;
}

/* ── Language chip ──────────────────────────────────────────────────────
 * A chip of its own in the page's top-right corner rather than the last item
 * inside the navigation pill, where it was pressed against the right edge and
 * read as an afterthought.
 *
 * It is fixed like the pill and centred against it: the pill sits at top 16px
 * and is 62px tall, so a 40px chip centres at 16 + (62 - 40) / 2 = 27px. */

.lang-chip {
  position: fixed;
  top: 27px;
  right: 20px;
  z-index: 101;              /* the header pill is 100 */
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 0.95rem;
  background: var(--color-chrome);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill-lift);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-airy),
              border-color var(--dur-hover) var(--ease-airy);
}

.lang-chip:hover,
.lang-chip:focus-visible {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* The pill is capped at 960px and centred, so above ~1104px the chip has its
   own room. Below that the two would overlap, so the header gives up enough
   padding on the right for the chip to sit beside it instead. */
@media (max-width: 69rem) {
  .site-header {
    padding-right: 5.25rem;
  }
}