/**
 * Jobbmat — light re-skin of the Deepwater blueprint.
 *
 * Deepwater ships a dark marine canvas ("allt annat är marinblått") and its `depth`
 * knob offers only three shades of dark sea. Jobbmat's brand calls for warm, light,
 * food-forward Scandinavian — so the canvas is redefined here, at the token layer.
 *
 * This is safe to do because Deepwater is almost perfectly token-routed: 311 of its
 * rules read a `--dw-*` / `--wp--preset--*` variable, and the only colour literals
 * outside its `:root` are (a) two `mask-image` gradients where `#000` means "opaque"
 * and is theme-agnostic, and (b) two `box-shadow` rules on `.dw-tier--featured` —
 * the pricing card, which brand/strategy.md forbids this site from ever using.
 * Redefining the tokens therefore re-skins the entire template with no orphans.
 *
 * Literal hex values appear ONLY in this :root block. That is the point of a token
 * layer — every other rule in this site's CSS must read these, never a literal.
 *
 * Palette rationale (see brand/identity.md → Visual identity):
 *   paper   warm off-white, not clinical white — Scandinavian, food-adjacent
 *   ink     warm near-black, never pure #000
 *   primary deep green — the trust colour, carries links and secondary action
 *   accent  warm terracotta — the ONE appetite cue, reserved for real actions
 * Contrast checked against the paper: ink 16:1, primary 6.1:1, accent 5.5:1,
 * muted 5.2:1; white on primary 6.4:1 and white on accent 4.98:1. All pass AA
 * (measured on the live page, not estimated).
 */

:root:root {
  /* Doubled :root is deliberate and load-bearing. WordPress prints the knob-generated
     palette in an inline <style> AFTER this stylesheet, so at equal `:root` specificity
     the dark canvas won and this file had no visible effect. (0,2,0) beats (0,1,0)
     regardless of source order. Do not simplify this back to a single :root. */

  /* ── canvas ─────────────────────────────────────────────────────── */
  --wp--preset--color--base: #fbf8f3;
  --wp--preset--color--surface: #ffffff;
  --wp--preset--color--contrast: #1c1a17;
  --wp--preset--color--muted: #6b6257;
  --wp--preset--color--line: #e7e0d5;

  /* `glow` and `signal` are set as knobs in site.config.json (rung 1) and bind to
     primary / accent. `primary-soft` has no knob, so it is corrected here — the
     stock #A9D8FB is a pale sky blue that all but vanishes on warm paper. */
  --wp--preset--color--primary-soft: #0f5347;

  /* ── depth ──────────────────────────────────────────────────────────
     Deepwater's shadows are tuned for near-black panels floating on navy: up to
     0.65 alpha and 80px blur. On paper that reads as soot. Retuned to warm,
     shallow lifts that suggest a card resting on a page rather than glowing
     above an abyss. */
  --dw-shadow-soft: 0 1px 2px rgba(28, 26, 23, 0.05),
    0 16px 40px -28px rgba(28, 26, 23, 0.16);
  --dw-shadow-lift: 0 2px 6px rgba(28, 26, 23, 0.07),
    0 26px 60px -32px rgba(28, 26, 23, 0.2);
}

/**
 * Glass is switched off via the `glass` knob, but the header additionally relies
 * on a translucent panel plus saturate() to sit over the dark canvas. On paper the
 * saturation boost tints the whole header, so the surface is made solid and the
 * hairline does the separating instead.
 */
.dw-header,
.dw-header__inner {
  background-color: var(--wp--preset--color--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/**
 * Deepwater's hero and CTA bands paint a radial "glow" behind the content — a
 * lighthouse beam through water. On a light canvas a glow has nothing to glow
 * against and reads as a smudge, so it is replaced by a flat warm wash that still
 * distinguishes the band from the page.
 */
.dw-cta__glow,
.dw-hero__glow {
  display: none;
}

.dw-band--hero,
.dw-cta {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 6%,
    var(--wp--preset--color--base)
  );
}

/**
 * The template's decorative wordmark is sized in viewport units and overshoots a
 * 390px viewport by ~19px, pushing the whole page sideways. It is aria-hidden
 * decoration, so it is clipped rather than resized. `clip` not `hidden`: hidden
 * would make the band a scroll container and let focus scroll it.
 */
.dw-band--hero {
  overflow-x: clip;
}

/**
 * Mobile sticky call-to-action.
 *
 * Lifted from the one thing convini.se does better on mobile than on desktop: a
 * full-width bar pinned to the bottom, so the form is always one tap away instead
 * of seventeen screens down. Theirs is 52px with 20px tap targets elsewhere on the
 * page; this one keeps the 52px and the 44px minimum everywhere.
 *
 * Phone only — on wider screens the header CTA is already persistent.
 */
.jm-sticky {
  display: none;
}

@media (max-width: 46rem) {
  .jm-sticky {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.5rem 1rem;
    margin: 0;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--surface);
    font-family: var(--dw-display);
    font-weight: 700;
    text-align: center;
  }

  .jm-sticky a {
    color: var(--wp--preset--color--surface);
    text-decoration: none;
    display: block;
    width: 100%;
  }

  /* Keep the last section clear of the bar so nothing is unreachable. */
  .dw-footer {
    padding-bottom: 4.5rem;
  }
}