/* Pereraha — base.css
   Muutujad, reset, fondid, header/nav/footer, hero, section.block.
   Kodulehe-spetsiifilised erisused on skoobitud body.page-index alla,
   kuna .hero/.topbar struktuur erineb kodulehel kalkulaatorilehtedest. */

:root{
  --sky-50:#EFF8FF;
  --sky-100:#DFF0FE;
  --sky-200:#C7E7FD;
  --sky-300:#9DD5FB;
  --sky-400:#6FC0F7;
  --sky-500:#41A8ED;
  --sky-600:#2A8DD1;
  --sky-700:#1F6FA6;
  --ink:#1C2B3A;
  --muted:#5E7488;
  --white:#FFFFFF;
  --coral:#FF9670;
  --coral-dark:#E97A50;
  --yellow:#FFD873;
  --good:#2E9E6C;
  --good-dark:#25835A;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--sky-50);
  color:var(--ink);
  font-family:'Nunito',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:'Baloo 2',sans-serif; }
a{ color:inherit; text-decoration:none; }

.blob{ position:absolute; border-radius:50%; z-index:0; }

/* ---------- Header / nav ---------- */
header{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, var(--sky-200) 0%, var(--sky-50) 60%);
  padding:20px 6vw 32px;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
  flex-wrap:wrap;
  gap:10px;
}
.logo{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:1.5rem;
  color:var(--sky-700);
  display:flex;
  align-items:center;
  gap:10px;
}
.logo .logo-icon{ height:40px; width:auto; display:block; }
.logo-print{ display:none; }
.back-link{
  font-weight:700;
  font-size:0.85rem;
  color:var(--sky-700);
  display:flex;
  align-items:center;
  gap:6px;
}
.privacy-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--white);
  border:1px solid var(--sky-200);
  padding:8px 14px;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:700;
  color:var(--sky-700);
}
.privacy-chip::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--coral-dark);
  display:inline-block;
}
.print-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--sky-600);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:0.85rem;
  cursor:pointer;
  font-family:'Nunito',sans-serif;
}
.print-btn svg{ width:16px; height:16px; }
.print-btn:hover{ background:var(--sky-700); }
.excel-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--good);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:0.85rem;
  cursor:pointer;
  font-family:'Nunito',sans-serif;
}
.excel-btn svg{ width:16px; height:16px; }
.excel-btn:hover{ background:var(--good-dark); }
.excel-btn:disabled{ opacity:0.6; cursor:not-allowed; }

/* ---------- Hero (kalkulaatorilehed, vaikimisi) ---------- */
.hero{ position:relative; z-index:2; padding-top:22px; max-width:700px; }
.hero h1{ font-size:2.1rem; font-weight:700; line-height:1.2; margin:0 0 10px; }
.hero h1 .accent{ color:var(--sky-600); }
.hero p.lead{ font-size:1rem; color:var(--muted); line-height:1.6; margin:0; font-weight:600; }

/* ---------- Main / sektsioonid ---------- */
main{ position:relative; z-index:1; padding:28px 6vw 90px; max-width:960px; margin:0 auto; }

section.block{ margin-bottom:30px; }
section.block h2{ font-size:1.3rem; margin:0 0 4px; color:var(--ink); }
section.block p.hint{ margin:0 0 14px; color:var(--muted); font-weight:600; font-size:0.88rem; }

/* ---------- Footer ---------- */
footer{ background:var(--sky-700); color:#EAF5FF; padding:32px 6vw; font-size:0.85rem; line-height:1.6; }
footer strong{ color:#fff; font-family:'Baloo 2',sans-serif; font-size:1.05rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; }
.footer-links a{ color:#EAF5FF; text-decoration:underline; font-weight:600; }
.footer-links a:hover{ color:#fff; }

@media (max-width:700px){
  .hero h1{ font-size:1.6rem; }
}

/* ============================================================
   Kodulehe erisused (body.page-index)
   ============================================================ */
body.page-index header{ padding:20px 6vw 0; }
body.page-index .topbar{ padding-bottom:10px; flex-wrap:nowrap; gap:0; }

body.page-index .hero{
  padding:36px 0 56px;
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:32px;
  align-items:center;
  max-width:none;
}
body.page-index .hero h1{ font-size:2.7rem; margin:0 0 14px; }
body.page-index .hero p.lead{ font-size:1.08rem; max-width:480px; margin:0 0 22px; }
body.page-index .hero-illustration{
  justify-self:center;
  width:100%;
  max-width:340px;
  aspect-ratio:1/1;
  position:relative;
}

@media (max-width:860px){
  body.page-index .hero{ grid-template-columns:1fr; }
  body.page-index .hero-illustration{ display:none; }
  body.page-index .hero h1{ font-size:2.1rem; }
}

body.page-index main{ padding:20px 6vw 90px; max-width:none; }
body.page-index .grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:18px;
}
body.page-index .card{
  background:var(--white);
  border-radius:20px;
  padding:22px 22px 20px;
  border:1px solid var(--sky-100);
  box-shadow:0 6px 16px rgba(31,111,166,0.06);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
}
body.page-index .card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(31,111,166,0.14);
  border-color:var(--sky-300);
}
body.page-index .card:focus-visible{ outline:3px solid var(--sky-500); outline-offset:2px; }
body.page-index .card-top{ display:flex; align-items:flex-start; justify-content:space-between; }
body.page-index .card .icon-bubble{
  width:46px; height:46px;
  border-radius:14px;
  background:linear-gradient(145deg, var(--sky-200), var(--sky-100));
  display:flex; align-items:center; justify-content:center;
  color:var(--sky-700);
  flex-shrink:0;
}
body.page-index .card .icon-bubble svg{ width:24px; height:24px; }
body.page-index .group-tag{
  font-size:0.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  background:var(--sky-50);
  color:var(--sky-600);
  padding:5px 10px;
  border-radius:999px;
  white-space:nowrap;
}
body.page-index .card h3{ margin:0; font-size:1.08rem; font-weight:600; line-height:1.3; }
body.page-index .card p{ margin:0; font-size:0.9rem; color:var(--muted); line-height:1.5; font-weight:600; flex:1; }
body.page-index .card .go{ display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:800; color:var(--sky-600); }
body.page-index .card .go svg{ width:16px; height:16px; transition:transform .18s ease; }
body.page-index .card:hover .go svg{ transform:translateX(4px); }

body.page-index .card.card-disabled{ cursor:default; opacity:0.55; filter:grayscale(0.3); }
body.page-index .card.card-disabled:hover{
  transform:none;
  box-shadow:0 6px 16px rgba(31,111,166,0.06);
  border-color:var(--sky-100);
}
body.page-index .card.card-disabled .go{ color:var(--muted); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body.page-index .card{ transition:none; }
}

/* ============================================================
   Kodulehe otsing/filter
   ============================================================ */
.grid-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.search-bar{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--white);
  border:1px solid var(--sky-200);
  border-radius:999px;
  padding:10px 16px;
  min-width:240px;
  flex:1 1 260px;
  max-width:360px;
}
.search-bar svg{ width:18px; height:18px; color:var(--sky-600); flex-shrink:0; }
.search-bar input[type="search"]{
  border:none;
  outline:none;
  background:transparent;
  flex:1;
  font-family:'Nunito',sans-serif;
  font-size:0.92rem;
  font-weight:600;
  color:var(--ink);
}
.search-bar input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex;
  align-items:center;
  background:var(--white);
  border:1px solid var(--sky-200);
  color:var(--sky-700);
  padding:8px 16px;
  border-radius:999px;
  font-family:'Nunito',sans-serif;
  font-weight:700;
  font-size:0.82rem;
  cursor:pointer;
}
.chip:hover{ border-color:var(--sky-400); }
.chip.active{ background:var(--sky-500); border-color:var(--sky-500); color:#fff; }

.grid-counter{
  margin:0;
  color:var(--muted);
  font-weight:700;
  font-size:0.85rem;
  white-space:nowrap;
}

/* ============================================================
   Küpsisenõusoleku bänner
   ============================================================ */
.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:100;
  background:var(--sky-700);
  color:#EAF5FF;
  padding:18px 6vw;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow:0 -8px 24px rgba(28,43,58,0.18);
}
.cookie-banner p{ margin:0; font-size:0.88rem; line-height:1.5; max-width:640px; flex:1 1 320px; }
.cookie-banner a{ color:#fff; text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-banner-actions button{
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:0.85rem;
  padding:10px 18px;
  border-radius:999px;
  cursor:pointer;
  border:2px solid transparent;
}
.cookie-banner .cookie-accept{ background:var(--good); color:#fff; }
.cookie-banner .cookie-accept:hover{ background:var(--good-dark); }
.cookie-banner .cookie-decline{ background:transparent; color:#fff; border-color:#EAF5FF; }
.cookie-banner .cookie-decline:hover{ background:rgba(255,255,255,0.12); }

@media (max-width:600px){
  .cookie-banner{ flex-direction:column; align-items:stretch; text-align:center; }
  .cookie-banner-actions{ justify-content:center; }
  .cookie-banner-actions button{ flex:1; }
}

/* ============================================================
   Tugilehed (privaatsus/küpsised/kasutustingimused/404)
   ============================================================ */
.legal-page{ max-width:760px; }
.legal-page h3{ font-size:1.05rem; margin:18px 0 6px; }
.legal-page p, .legal-page li{ line-height:1.7; }
.legal-page ul{ margin:0 0 14px; padding-left:22px; }

.cookie-table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0;
  font-size:0.88rem;
}
.cookie-table th, .cookie-table td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--sky-100);
  vertical-align:top;
}
.cookie-table th{ color:var(--sky-700); font-weight:800; }

.error-page{ text-align:center; padding:20px 0; }
.error-page ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.error-page a:not(.btn-primary){ color:var(--sky-600); font-weight:700; }

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--sky-600);
  color:#fff;
  border:none;
  padding:12px 22px;
  border-radius:999px;
  font-family:'Nunito',sans-serif;
  font-weight:800;
  font-size:0.9rem;
  cursor:pointer;
}
.btn-primary:hover{ background:var(--sky-700); }

/* ---------- Fondid (isemajutatud, vt jaotis 5) ---------- */
@font-face{
  font-family:'Baloo 2'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/assets/fonts/baloo-2-500.woff2') format('woff2');
}
@font-face{
  font-family:'Baloo 2'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/assets/fonts/baloo-2-600.woff2') format('woff2');
}
@font-face{
  font-family:'Baloo 2'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/baloo-2-700.woff2') format('woff2');
}
@font-face{
  font-family:'Baloo 2'; font-weight:800; font-style:normal; font-display:swap;
  src:url('/assets/fonts/baloo-2-800.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/assets/fonts/nunito-400.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/assets/fonts/nunito-600.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/nunito-700.woff2') format('woff2');
}
@font-face{
  font-family:'Nunito'; font-weight:800; font-style:normal; font-display:swap;
  src:url('/assets/fonts/nunito-800.woff2') format('woff2');
}

/* ---------- Print (kõik lehed) ---------- */
@media print{
  .logo-text{ display:none; }
  .logo-print{ display:inline; text-decoration:none; }
  .topbar{ justify-content:flex-start; }
}