/* Sportmasseur Gijs — shared design tokens & components */

:root {
  --forest: #1f4a2e;
  --forest-ink: #16241b;
  --green-mid: #356b45;
  --green-soft: #5c8a68;
  --paper: #f3f5ef;
  --paper-raised: #eaeee2;
  --card: #fffef9;
  --clay: #c97a3c;
  --clay-dark: #a85f2a;
  --line: rgba(22, 36, 27, 0.12);
  --shadow-1: 0 1px 2px rgba(22, 52, 34, 0.06), 0 2px 6px rgba(22, 52, 34, 0.05);
  --shadow-2: 0 4px 14px rgba(22, 52, 34, 0.10), 0 12px 28px rgba(22, 52, 34, 0.08);
  --shadow-3: 0 10px 30px rgba(22, 52, 34, 0.14), 0 24px 56px rgba(22, 52, 34, 0.12);
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--forest-ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.7;
}

.font-display {
  font-family: "Fraunces", Georgia, serif;
  letter-spacing: -0.02em;
}

.text-balance { text-wrap: balance; }

/* Layered surfaces: base (paper) -> raised (card) -> floating (elevated card / sticky nav) */
.surface-raised {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.surface-floating {
  background: var(--card);
  box-shadow: var(--shadow-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn-primary {
  background: var(--forest);
  color: var(--paper);
  box-shadow: var(--shadow-2);
}
.btn-primary:hover { background: var(--green-mid); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: transparent;
  color: var(--forest);
  border: 1.5px solid var(--forest);
}
.btn-secondary:hover { background: var(--forest); color: var(--paper); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0); }

.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2.5px solid var(--clay);
  outline-offset: 3px;
}

.nav-link {
  position: relative;
  color: var(--forest-ink);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--forest); font-weight: 600; }

.step-number {
  font-family: "Fraunces", serif;
  color: var(--green-soft);
  font-size: 3rem;
  line-height: 1;
  font-weight: 500;
}

.card {
  background: var(--card);
  border-radius: 1.25rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--green-mid);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
}

.photo-treated {
  position: relative;
  overflow: hidden;
}
.photo-treated img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-treated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 36, 27, 0.55), rgba(22, 36, 27, 0) 55%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

table.price-table {
  width: 100%;
  border-collapse: collapse;
}
table.price-table th, table.price-table td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
table.price-table th {
  font-family: "Fraunces", serif;
  font-weight: 500;
  color: var(--forest);
}
table.price-table td.price {
  font-weight: 700;
  color: var(--forest);
  text-align: right;
}
table.price-table th.price-col { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Make the hidden attribute win over Tailwind display utilities (blog filter, menus) */
[hidden] { display: none !important; }

/* Google review badge */
.review-badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.45rem 0.95rem; border-radius:999px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-1); font-size:0.9rem; color:var(--forest-ink); transition:transform .2s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s ease; }
.review-badge:hover { transform:translateY(-1px); box-shadow:var(--shadow-2); }
.review-badge strong { color:var(--forest); }
.review-stars { color:#E3A008; letter-spacing:0.05em; }