/* ===========================================================
   froland.org — community portal
   Nordic-nature design system. Self-contained (no external assets).
   =========================================================== */

:root {
  --forest-900: #0f2417;
  --forest-800: #16351f;
  --forest-700: #1e4a2b;
  --forest-600: #2b6b3e;
  --forest-500: #3f8f57;
  --moss-400:   #6faf78;
  --birch:      #f5f2e9;
  --birch-dk:   #e7e0cf;
  --paper:      #fbfaf5;
  --ink:        #16241b;
  --ink-soft:   #40514500;
  --lake-500:   #2e7d9a;
  --lake-400:   #4aa3c0;
  --gold:       #d8a441;
  --line:       #d9d3c2;
  --shadow:     0 10px 30px rgba(15, 36, 23, .12);
  --radius:     18px;
  --wrap:       1120px;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-disp:  Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---- language visibility toggle ------------------------------------ */
body.lang-no [data-lang="en"] { display: none !important; }
body.lang-en [data-lang="no"] { display: none !important; }

/* ---- layout helpers ------------------------------------------------- */
.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }
section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--forest-500);
  margin: 0 0 .6rem;
}
h1, h2, h3 { font-family: var(--font-disp); line-height: 1.12; color: var(--forest-900); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin: 0 0 1rem; }
h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--forest-600); }

/* ---- top nav -------------------------------------------------------- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 245, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem 0;
}
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-disp);
  font-weight: 700; font-size: 1.25rem; color: var(--forest-900); text-decoration: none; }
.brand svg { width: 34px; height: 34px; flex: none; }
.nav-links { display: flex; gap: 1.1rem; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--forest-800); font-weight: 600; font-size: .93rem; }
.nav-links a:hover { color: var(--forest-500); }
.lang-btn {
  border: 1px solid var(--forest-600); background: transparent; color: var(--forest-700);
  font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  padding: .4rem .7rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.lang-btn:hover { background: var(--forest-600); color: #fff; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ---- hero ----------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(74,163,192,.18), transparent 55%),
    linear-gradient(160deg, var(--forest-800), var(--forest-600) 60%, var(--forest-500));
  color: var(--birch);
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
}
.hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.4rem); margin: 0 0 1rem; }
.hero .lead { font-size: clamp(1.05rem, 2.2vw, 1.35rem); max-width: 42ch; color: #eaf3ea; }
.hero .eyebrow { color: var(--moss-400); }
.hills { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; display: block; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-top: 2.6rem; max-width: 760px;
}
.stat { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 1rem 1.1rem; }
.stat b { display: block; font-family: var(--font-disp); font-size: 1.9rem; color: #fff; line-height: 1; }
.stat span { font-size: .82rem; color: #d7e6d9; }
@media (max-width: 620px){ .stats { grid-template-columns: repeat(2,1fr);} }

/* ---- generic cards -------------------------------------------------- */
.grid { display: grid; gap: 1.4rem; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 600px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr;} }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
}
.card .ico { width: 42px; height: 42px; color: var(--forest-500); margin-bottom: .8rem; }
.card p { margin: 0; color: #46564b; font-size: .96rem; }

.alt { background: var(--birch); }
.lead-row { max-width: 62ch; }

/* village chips */
.villages { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.village {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1rem; font-weight: 600; font-size: .92rem; color: var(--forest-800);
  display: inline-flex; gap: .5rem; align-items: center;
}
.village small { color: #7d8a7f; font-weight: 500; }

/* timeline */
.timeline { border-left: 3px solid var(--moss-400); margin-left: .5rem; padding-left: 1.6rem; }
.tl-item { position: relative; margin-bottom: 1.8rem; }
.tl-item::before { content:""; position:absolute; left: -1.98rem; top: .35rem;
  width: 13px; height: 13px; border-radius: 50%; background: var(--forest-600); box-shadow: 0 0 0 4px var(--birch); }
.tl-item .yr { font-family: var(--font-disp); font-weight: 700; color: var(--forest-700); font-size: 1.05rem; }

/* people */
.person { display: flex; gap: 1rem; align-items: flex-start; }
.person .avatar {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: linear-gradient(150deg, var(--forest-500), var(--lake-500));
  color:#fff; display:grid; place-items:center; font-family: var(--font-disp); font-weight:700; font-size:1.15rem;
}
.person small { color: #7d8a7f; }

/* getting here */
.travel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 800px){ .travel { grid-template-columns: 1fr; } }
.travel ul { padding-left: 1.1rem; margin: 0; }
.travel li { margin-bottom: .5rem; }

/* ---- footer --------------------------------------------------------- */
footer {
  background: var(--forest-900); color: #cdddce; padding: 3rem 0 2rem; margin-top: 1rem;
}
footer a { color: var(--moss-400); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
@media (max-width: 720px){ .foot-grid { grid-template-columns: 1fr; } }
footer h4 { color:#fff; margin: 0 0 .6rem; font-family: var(--font-disp); }
.foot-brand { display:flex; gap:.6rem; align-items:center; font-family: var(--font-disp); font-size:1.2rem; color:#fff; }
.foot-brand svg { width: 30px; height: 30px; }
.disclaimer { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.3rem;
  font-size: .82rem; color: #9db09f; }
.badge { display:inline-block; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:.3rem .7rem; border-radius:8px; font-size:.8rem; color:#e7efe7; text-decoration:none; }
.badge:hover { background: rgba(255,255,255,.16); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } html{scroll-behavior:auto;} }

/* ===========================================================
   Casino money-page components (same forest palette)
   =========================================================== */
.page-hero {
  background:
    radial-gradient(120% 90% at 85% -20%, rgba(216,164,65,.20), transparent 55%),
    linear-gradient(160deg, var(--forest-800), var(--forest-600));
  color: var(--birch); padding: clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem);
}
.page-hero h1 { color:#fff; font-size: clamp(2rem,4.6vw,3.3rem); margin:0 0 1rem; max-width: 20ch; }
.page-hero .lead { color:#eaf3ea; font-size: clamp(1.02rem,2vw,1.25rem); max-width: 60ch; }
.breadcrumb { font-size:.82rem; color:#bcd4bf; margin:0 0 1rem; }
.breadcrumb a { color:#dfeee0; text-decoration:none; }
.trust-row { display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:1.6rem; font-size:.9rem; color:#dcece0; }
.trust-row span { display:inline-flex; align-items:center; gap:.45rem; }
.trust-row svg { width:18px; height:18px; color: var(--gold); }
.updated { font-size:.82rem; color:#cde0d0; margin-top:1rem; }

/* content prose */
.prose { max-width: 74ch; }
.prose h2 { margin-top:2.4rem; }
.prose h3 { margin-top:1.6rem; font-size:1.12rem; }
.prose ul, .prose ol { padding-left:1.2rem; }
.prose li { margin-bottom:.5rem; }
.prose table.data { width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.92rem; }
.prose table.data th, .prose table.data td { border:1px solid var(--line); padding:.6rem .7rem; text-align:left; }
.prose table.data th { background: var(--birch); }
.notice { background: #fff7e6; border:1px solid #f0d79a; border-left:4px solid var(--gold);
  border-radius:10px; padding:1rem 1.2rem; margin:1.4rem 0; font-size:.92rem; }
.toc { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem; margin:1.6rem 0; }
.toc strong { display:block; margin-bottom:.4rem; }
.toc ol { margin:0; padding-left:1.2rem; columns:2; }
@media (max-width:600px){ .toc ol { columns:1; } }

/* ---- comparison table (operator cards) ---- */
.lineup { display:flex; flex-direction:column; gap:1.1rem; margin:1.6rem 0; }
.op {
  display:grid; align-items:center; gap:1.3rem;
  grid-template-columns: 46px 148px minmax(150px,1fr) minmax(250px,1.6fr) 92px 156px;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.2rem 1.4rem;
  box-shadow: var(--shadow); position:relative;
}
.op.top { border:2px solid var(--gold); padding-top:1.5rem; }
.op-flag { position:absolute; top:-13px; left:20px; background:var(--forest-900); color:var(--gold);
  font-size:.7rem; font-weight:800; letter-spacing:.09em; padding:.28rem .7rem; border-radius:999px;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:.3rem; }
.op-rank { font-family:var(--font-disp); font-weight:700; font-size:1.7rem; color:var(--forest-600); text-align:center; }
.op.top .op-rank { color:var(--gold); }
.op-logo { display:grid; place-items:center; border:1px solid var(--line); border-radius:12px;
  padding:.6rem; min-height:74px; background:#fff; }
.op-logo img { max-width:120px; max-height:52px; width:auto; height:auto; object-fit:contain; }
.op-brand { display:block; font-family:var(--font-disp); font-weight:700; font-size:1.15rem; color:var(--forest-900); }
.op-tag { display:inline-block; margin-top:.45rem; background:var(--birch); color:#5c6a5f;
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.32rem .6rem; border-radius:7px; line-height:1.25; }
.op-pick { display:none; }
.op-bonus { background:#fbf6e6; border-left:4px solid var(--gold); border-radius:12px; padding:.85rem 1.1rem; }
.op-bonus-label { font-size:.68rem; font-weight:800; letter-spacing:.09em; color:#b98a1e; text-transform:uppercase; }
.op-bonus-main { font-family:var(--font-disp); font-weight:700; font-size:1.4rem; color:var(--forest-700); line-height:1.1; margin:.15rem 0 .35rem; }
.op-fs { display:inline-block; background:var(--gold); color:#3a2a00; font-weight:700; font-size:.8rem;
  padding:.25rem .6rem; border-radius:999px; }
.op-terms { color:#7d8a7f; font-size:.8rem; margin-top:.45rem; }
.op-bonus-full, .op-pills { display:none; }
.op-rate { text-align:center; }
.op-rate .stars { color:var(--gold); font-size:.9rem; letter-spacing:1px; }
.op-rate .score { font-weight:700; font-size:1.05rem; color:var(--forest-900); margin-top:.15rem; }
.op-rate .score b { font-family:var(--font-disp); font-size:1.35rem; }
.op-rate .score span { color:#7d8a7f; font-weight:500; }
.op-act { text-align:center; }
.op-act .cta { display:block; background:var(--gold); color:#3a2a00; text-decoration:none;
  font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:.8rem 1rem; border-radius:10px;
  font-size:.9rem; box-shadow:0 4px 12px rgba(216,164,65,.35); }
.op-act .cta:hover { filter:brightness(1.06); }
.op-act small { display:block; margin-top:.5rem; color:#8a968c; font-size:.72rem; }

@media (max-width: 820px){
  .op { grid-template-columns:1fr; justify-items:center; text-align:center; gap:.7rem; padding:1.6rem 1.3rem; }
  .op.top { padding-top:1.9rem; }
  .op-flag { display:none; }
  .op-rank { display:none; }
  .op-logo { width:180px; }
  .op-tag { display:none; }
  .op.top .op-pick { display:inline-block; background:var(--gold); color:#3a2a00; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; padding:.35rem .9rem; border-radius:999px; margin-top:.5rem; }
  .op-bonus { background:none; border:0; padding:0; }
  .op-bonus-label, .op-bonus-main, .op-fs, .op-terms { display:none; }
  .op-bonus-full { display:block; font-family:var(--font-disp); font-weight:700; font-size:1.5rem;
    color:var(--forest-700); line-height:1.15; margin:.2rem 0 .8rem; max-width:16ch; }
  .op-pills { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
  .op-pills .pill { border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem; font-size:.85rem; color:#46564b; }
  .op-act { width:100%; }
  .op-act .cta { width:100%; padding:.95rem; font-size:1rem; }
}

/* FAQ */
.faq { margin:1.4rem 0; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:12px; padding:.4rem 1.1rem; margin-bottom:.7rem; }
.faq summary { cursor:pointer; font-weight:600; color:var(--forest-800); padding:.7rem 0; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"+"; color:var(--forest-500); font-weight:800; margin-right:.6rem; }
.faq details[open] summary::before { content:"–"; }
.faq p { margin:.3rem 0 .9rem; color:#46564b; font-size:.95rem; }

.author-box { display:flex; gap:1rem; align-items:center; background:var(--birch); border:1px solid var(--line);
  border-radius:14px; padding:1rem 1.2rem; margin:1.8rem 0; }
.author-box .avatar { width:56px; height:56px; }
.author-box small { color:#6a7870; }
.rg-strip { background:var(--forest-900); color:#cdddce; font-size:.82rem; text-align:center; padding:.6rem 1rem; }
/* no dead space between the 18+ strip and the table (all viewports) */
.rg-strip + section { padding-top: 1.6rem; }
.rg-strip a { color:var(--moss-400); }

/* author photo avatars */
img.avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--birch-dk); }
.person img.avatar { width:52px; height:52px; }

/* Money page: on mobile prioritise H1 + author/date + table above the fold */
@media (max-width: 820px){
  .page-hero { padding: 1.5rem 0 1.1rem; }
  .page-hero h1 { font-size: 2rem; margin-bottom:.4rem; }
  .page-hero .lead, .page-hero .trust-row { display:none; }
  .page-hero .updated { margin-top:.3rem; }
  .rg-strip { padding:.5rem 1rem; }
  /* kill the empty band between the 18+ strip and the table */
  .rg-strip + section { padding-top:.8rem; }
  #topp { margin-top:0; }
}