/* tessakine.eu — Fresh green & teal palette */

:root {
  --clr-primary: #2E7D5B;        /* deep green */
  --clr-primary-light: #3A9670;
  --clr-primary-dark: #1F5A40;
  --clr-teal: #14B8A6;           /* teal accent */
  --clr-teal-dark: #0E9384;
  --clr-amber: #F59E0B;          /* warm CTA */
  --clr-amber-dark: #D97F06;
  --clr-coral: #FB7185;          /* coral highlight */
  --clr-neutral: #F4FBF7;        /* page background */
  --clr-text: #1F3A2E;           /* dark green text */
  --clr-text-muted: #4B6358;
  --paper: #FFFFFF;
}

html {
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: hidden;
}

body {
  font-family: "Cabin", system-ui, sans-serif;
  color: var(--clr-text);
  background-color: var(--clr-neutral);
  /* airy mint dot texture */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(20, 184, 166, 0.06) 1px, transparent 0);
  background-size: 20px 20px;
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--clr-text);
  letter-spacing: 0.2px;
}

/* ---------- Surfaces ---------- */
.skeu-card {
  background: linear-gradient(180deg, #ffffff 0%, #f1faf5 100%);
  border: 1px solid #d6ece1;
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 30px rgba(31, 90, 64, 0.12),
    0 2px 6px rgba(20, 184, 166, 0.10);
}

.skeu-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0)),
    linear-gradient(150deg, #e6f7f0 0%, #d6f1ea 100%);
  border: 1px solid #bfe6d8;
  border-radius: 22px;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.85) inset,
    0 -2px 8px rgba(20,184,166,0.08) inset,
    0 20px 38px rgba(31,90,64,0.16);
}

.skeu-inset {
  background: #effaf5;
  border-radius: 14px;
  box-shadow:
    inset 0 3px 7px rgba(31, 90, 64, 0.14),
    inset 0 -1px 0 rgba(255,255,255,0.7);
  border: 1px solid #cfeade;
}

/* ---------- 3D buttons (primary CTA = amber) ---------- */
.btn-3d {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-weight: 700;
  color: #4a2e00;
  background: linear-gradient(180deg, #ffc24d 0%, var(--clr-amber) 55%, var(--clr-amber-dark) 100%);
  border: 1px solid #b9690a;
  border-radius: 14px;
  padding: 0.95rem 2.1rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -3px 0 rgba(150, 86, 6, 0.45) inset,
    0 10px 18px rgba(217, 127, 6, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn-3d:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -3px 0 rgba(150, 86, 6, 0.45) inset,
    0 16px 26px rgba(217, 127, 6, 0.34);
}
.btn-3d:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -1px 0 rgba(150, 86, 6, 0.45) inset,
    0 5px 10px rgba(217, 127, 6, 0.26);
}

/* ---------- Secondary button (teal/green) ---------- */
.btn-wood {
  display: inline-block;
  font-family: "Fraunces", serif;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #1fcab4 0%, var(--clr-teal) 55%, var(--clr-teal-dark) 100%);
  border: 1px solid #0b7d72;
  border-radius: 14px;
  padding: 0.85rem 1.8rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -3px 0 rgba(11, 110, 100, 0.5) inset,
    0 9px 16px rgba(14, 147, 132, 0.3);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn-wood:hover { filter: brightness(1.07); transform: translateY(-2px); }
.btn-wood:active { transform: translateY(2px); }

/* ---------- Forms ---------- */
.field {
  width: 100%;
  background: #fbfffd;
  border: 1px solid #c8e6da;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  color: var(--clr-text);
  box-shadow: inset 0 3px 6px rgba(31, 90, 64, 0.10);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.field:focus {
  outline: none;
  border-color: var(--clr-teal);
  box-shadow: inset 0 3px 6px rgba(31,90,64,0.10), 0 0 0 3px rgba(20,184,166,0.28);
}

/* ---------- Header ---------- */
.site-header {
  background: linear-gradient(180deg, var(--clr-primary-light), var(--clr-primary));
  box-shadow: 0 6px 18px rgba(31, 90, 64, 0.26);
}
.promo-bar {
  background: linear-gradient(180deg, #2fd0bb, var(--clr-teal-dark));
  color: #04332e;
}
.nav-link {
  color: var(--clr-neutral);
  text-decoration: none;
  font-weight: 600;
  padding: 0.35rem 0.2rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover { border-color: var(--clr-amber); color: #fff; }

/* ---------- Icon badges ---------- */
.icon-badge {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff, #d7f3ea);
  border: 1px solid #b7e6d6;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 8px 16px rgba(20,184,166,0.22);
  font-size: 1.9rem;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Map ---------- */
.map-frame {
  width: 100%;
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px #bfe6d8, 0 14px 28px rgba(31,90,64,0.18);
}

/* ---------- Cookie banner (fixed, floats above content) ---------- */
#cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
}
.cookie-shell {
  background: linear-gradient(180deg, #ffffff, #eafaf3);
  border-top: 3px solid var(--clr-teal);
  box-shadow: 0 -10px 24px rgba(31,90,64,0.18);
}
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 42, 30, 0.55);
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-backdrop.open { display: flex; }

/* toggle */
.switch { position: relative; width: 52px; height: 28px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #c2ddd2;
  border-radius: 999px;
  box-shadow: inset 0 2px 5px rgba(31,90,64,0.3);
  transition: background 0.2s ease;
}
.slider::before {
  content: ""; position: absolute; height: 22px; width: 22px;
  left: 3px; top: 3px; border-radius: 50%;
  background: linear-gradient(180deg, #fff, #e2f3eb);
  box-shadow: 0 2px 4px rgba(31,90,64,0.4);
  transition: transform 0.2s ease;
}
.switch input:checked + .slider { background: var(--clr-teal); }
.switch input:checked + .slider::before { transform: translateX(24px); }
.switch input:disabled + .slider { opacity: 0.7; cursor: not-allowed; }

.disclaimer-box {
  background: #fff4e6;
  border-left: 5px solid var(--clr-amber);
  border-radius: 10px;
  box-shadow: inset 0 2px 5px rgba(217,127,6,0.10);
  font-size: 0.92rem;
}