/*
 * BookNoFees kit for the Sardinia sites.
 * Values copied from web/app/globals.css (live 97f38e91): colours, Figtree,
 * radii, shadows, and the "Push" button model (docs/technik/buttons.md).
 * Coral = the one action a surface exists for. Grey = everything else.
 */
@font-face {
  font-family: Figtree; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/figtree-latin.woff2) format("woff2");
}

:root {
  --coral: #E4114E;
  --coral-dark: #CE0E46;
  --coral-wash: #FFF5F7;
  --teal: #008489;
  --sun: #FFB400;
  --ink: #222222;
  --ink-2: #484848;
  --ink-3: #6C6C6C;
  --line: #DDDDDD;
  --line-soft: #EBEBEB;
  --surface: #F7F7F7;
  --white: #FFFFFF;
  --success: #0E7C5A;
  --success-wash: #EFF9F4;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-card: 20px; --r-pill: 9999px;
  --sh-1: 0 1px 2px rgba(0,0,0,.08);
  --sh-2: 0 0 0 1px rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.1);
  --sh-3: 0 6px 20px rgba(0,0,0,.12);
  --sh-box: 0 0 0 1px rgba(0,0,0,.05), 0 0 16px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.12), 0 14px 32px rgba(0,0,0,.26);

  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --page-max: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--coral); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Push buttons (same model and values as the app) ---------- */
.push {
  --push: 24px;
  --push-face: linear-gradient(135deg,#F7F7F7,#D6D6D6);
  --push-face-hover: linear-gradient(135deg,#FAFAFA,#DBDBDB);
  --push-face-down: var(--push-face);
  --push-ring: rgba(0,0,0,.38);
  --push-dark: 5,5,5;
  --push-shade: 1; --push-sink: .82; --push-lit: 1; --push-edge: 1;
  --push-ink-down: var(--ink);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.4rem;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: color .16s ease;
}
.push--coral {
  --push-face: linear-gradient(135deg,#FF5C7C,#DB0A40);
  --push-face-hover: linear-gradient(135deg,#FF6A88,#E30D45);
  --push-face-down: linear-gradient(135deg,#F2436A,#CC0A3C);
  --push-ring: #7A0A2C;
  --push-dark: 70,0,22;
  --push-shade: 1.25; --push-sink: 1; --push-lit: .45; --push-edge: .85;
  --push-ink-down: #fff;
  color: #fff;
}
.push::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--push-face);
  box-shadow:
    inset calc(var(--push) * -.05) calc(var(--push) * -.05) calc(var(--push) * .05) 0 rgba(var(--push-dark),calc(.18 * var(--push-shade))),
    inset 0 0 calc(var(--push) * .05) calc(var(--push) * .2) rgba(255,255,255,calc(.3 * var(--push-lit))),
    inset calc(var(--push) * .025) calc(var(--push) * .05) calc(var(--push) * .1) 0 rgba(255,255,255,var(--push-edge)),
    inset calc(var(--push) * .122) calc(var(--push) * .122) calc(var(--push) * .122) rgba(255,255,255,calc(.3 * var(--push-lit))),
    inset calc(var(--push) * -.075) calc(var(--push) * -.25) calc(var(--push) * .25) calc(var(--push) * .1) rgba(var(--push-dark),calc(.17 * var(--push-shade)));
  transition: box-shadow .3s, background .25s, inset .25s;
}
.push::before {
  content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit;
  background: var(--push-ring);
  box-shadow:
    0 calc(var(--push) * .05) calc(var(--push) * .05) calc(var(--push) * -.011) rgba(var(--push-dark),.55),
    0 calc(var(--push) * .011) calc(var(--push) * .011) calc(var(--push) * -.011) rgba(var(--push-dark),.35),
    calc(var(--push) * .15) calc(var(--push) * .3) calc(var(--push) * .122) calc(var(--push) * -.011) rgba(var(--push-dark),.16),
    calc(var(--push) * -.15) calc(var(--push) * -.15) calc(var(--push) * .15) calc(var(--push) * -.075) rgba(5,5,5,.14),
    calc(var(--push) * .039) calc(var(--push) * .039) calc(var(--push) * .067) 0 rgba(var(--push-dark),.08);
  transition: box-shadow .3s;
}
@media (hover: hover) and (pointer: fine) {
  .push:hover::after { background: var(--push-face-hover); }
  .push:hover { color: var(--ink); }
  .push--coral:hover { color: #fff; }
}
.push:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.push--coral:focus-visible { outline-color: var(--coral); }
.push:active { color: var(--push-ink-down); -webkit-text-stroke: .35px currentColor; }
.push:active::before { box-shadow: none; }
.push:active::after {
  inset: calc(var(--push) * .083);
  background: var(--push-face-down);
  box-shadow:
    inset calc(var(--push) * .1) calc(var(--push) * .15) calc(var(--push) * .05) 0 rgba(var(--push-dark),calc(.5 * var(--push-sink))),
    inset calc(var(--push) * -.025) calc(var(--push) * -.031) calc(var(--push) * .05) calc(var(--push) * .025) rgba(var(--push-dark),calc(.3 * var(--push-sink))),
    inset calc(var(--push) * .25) calc(var(--push) * .25) calc(var(--push) * .2) 0 rgba(var(--push-dark),calc(.32 * var(--push-sink))),
    inset 0 0 calc(var(--push) * .05) calc(var(--push) * .5) rgba(255,255,255,calc(.15 * var(--push-lit))),
    inset calc(var(--push) * .122) calc(var(--push) * .122) calc(var(--push) * .122) rgba(255,255,255,calc(.25 * var(--push-lit))),
    inset calc(var(--push) * -.075) calc(var(--push) * -.122) calc(var(--push) * .2) calc(var(--push) * .1) rgba(var(--push-dark),calc(.18 * var(--push-sink)));
}
@media (prefers-reduced-motion: reduce) {
  .push, .push::before, .push::after { transition: none; }
}

/* Chosen = pressed (register rule 2): a selected tab sits held down. */
.push[aria-pressed="true"] { color: var(--push-ink-down); -webkit-text-stroke: .35px currentColor; }
.push[aria-pressed="true"]::before { box-shadow: none; }
.push[aria-pressed="true"]::after {
  inset: calc(var(--push) * .083);
  background: var(--push-face-down);
  box-shadow:
    inset calc(var(--push) * .1) calc(var(--push) * .15) calc(var(--push) * .05) 0 rgba(var(--push-dark),calc(.5 * var(--push-sink))),
    inset calc(var(--push) * -.025) calc(var(--push) * -.031) calc(var(--push) * .05) calc(var(--push) * .025) rgba(var(--push-dark),calc(.3 * var(--push-sink))),
    inset calc(var(--push) * .25) calc(var(--push) * .25) calc(var(--push) * .2) 0 rgba(var(--push-dark),calc(.32 * var(--push-sink))),
    inset 0 0 calc(var(--push) * .05) calc(var(--push) * .5) rgba(255,255,255,calc(.15 * var(--push-lit))),
    inset calc(var(--push) * .122) calc(var(--push) * .122) calc(var(--push) * .122) rgba(255,255,255,calc(.25 * var(--push-lit))),
    inset calc(var(--push) * -.075) calc(var(--push) * -.122) calc(var(--push) * .2) calc(var(--push) * .1) rgba(var(--push-dark),calc(.18 * var(--push-sink)));
}
.push--small { --push: 19px; min-height: 38px; padding: 0 1rem; font-size: .92rem; }
.push img { width: 22px; height: 22px; }
.push[hidden] { display: none; }