/* dricklekar.nu — shared design system
   Fonts: Familjen Grotesk (headings/UI), Newsreader (body copy).
   Every page loads Google Fonts with the exact same family string:
   family=Familjen+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,400
*/

:root {
  --bg: #0E1013;
  --bg-raised: #0B0D0F;
  --text: #F2EDE3;
  --lime: #C8FF3D;
  --lime-light: #E6FF9C;
  --coral: #FF8A6B;
  --coral-deep: #160C08;
  --intro: #D9D3C6;
  --body-copy: #C6C0B4;
  --muted: #A8A49A;
  --label: #8B8A83;
  --faint: #6F6E68;
  --border-soft: rgba(242,237,227,0.09);
  --border-mid: rgba(242,237,227,0.14);
  --border-strong: rgba(242,237,227,0.22);
  --card-fill: rgba(242,237,227,0.028);
  --card-fill-strong: rgba(242,237,227,0.055);
  --card-red: #C0392B;
  --card-black: #16181B;
  --card-face: #F4F1E8;
  --font-ui: 'Familjen Grotesk', sans-serif;
  --font-body: 'Newsreader', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--lime-light); }

::selection { background: var(--lime); color: var(--bg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2A2E33; border-radius: 20px; }

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}

p { margin: 0; }

img { max-width: 100%; display: block; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}
.eyebrow.coral { color: var(--coral); }

/* ---------- Layout skeleton ---------- */

.layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  background: var(--bg);
}

.sidebar {
  position: sticky;
  top: 0;
  flex: 0 0 272px;
  width: 272px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 24px;
  border-right: 1px solid var(--border-soft);
  background: var(--bg-raised);
  overflow-y: auto;
}

.sidebar-logo {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.sidebar-logo span { color: var(--lime); }

.sidebar-tagline {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--label);
}

.sidebar-eyebrow {
  margin-top: 28px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.sidebar-nav {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: 9px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.sidebar-nav a:hover { background: rgba(242,237,227,0.06); color: var(--text); }
.sidebar-nav a span.count { font-size: 11px; color: var(--faint); }

.sidebar-foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.badge-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border: 1px solid rgba(242,237,227,0.28);
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}
.sidebar-adult { display: flex; align-items: center; gap: 8px; }
.sidebar-adult span.caption { font-size: 12px; color: var(--faint); }

.main { flex: 1; min-width: 0; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--faint);
}
.breadcrumb a { color: var(--faint); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { color: var(--faint); opacity: 0.5; }
.breadcrumb .current { color: var(--label); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 64px 56px 48px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
}
.hero.glow-lime {
  background: radial-gradient(900px 460px at 6% -20%, rgba(200,255,61,0.10), transparent 62%), var(--bg);
}
.hero.glow-coral {
  background: radial-gradient(900px 460px at 6% -20%, rgba(255,107,74,0.11), transparent 62%), var(--bg);
}
.hero.glow-dual {
  background: radial-gradient(760px 420px at 4% -18%, rgba(200,255,61,0.10), transparent 60%), radial-gradient(760px 420px at 98% -10%, rgba(255,107,74,0.11), transparent 62%), var(--bg);
}
.hero-inner { max-width: 1240px; }
.hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}
.hero-copy { flex: 1 1 480px; min-width: 0; max-width: 760px; }
.hero-side { flex: 0 1 340px; min-width: 260px; }

.hero-intro {
  margin: 22px 0 0;
  max-width: 68ch;
  font-size: 19px;
  line-height: 1.6;
  color: var(--intro);
}

.hero-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.snabbversion {
  margin: 30px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: var(--card-fill);
  max-width: 1240px;
}
.snabbversion h2 {
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--label);
  text-transform: uppercase;
  font-size: 12px;
}
.snabbversion ul {
  margin: 14px 0 0;
  padding: 0 0 0 20px;
  display: grid;
  gap: 8px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-copy);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--lime); color: var(--bg); }
.btn-primary:hover { background: var(--lime-light); color: var(--bg); }
.btn-outline { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn-outline:hover { border-color: var(--text); color: var(--text); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* ---------- Quick facts ---------- */

.quick-facts {
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: var(--card-fill);
  padding: 22px 24px;
}
.quick-facts h2 {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  font-weight: 600;
  font-family: var(--font-ui);
}
.quick-facts-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-ui);
  font-size: 14.5px;
}
.quick-facts-row:first-of-type { border-top: none; margin-top: 14px; }
.quick-facts-row .k { color: var(--label); }
.quick-facts-row .v { color: var(--text); font-weight: 600; text-align: right; }

/* ---------- Sections ---------- */

section.block { padding: 52px 56px 0; }
section.block:last-of-type { padding-bottom: 52px; }
.prose { max-width: 900px; }
.wide { max-width: 1240px; }

.prose p, .prose li { font-size: 17px; line-height: 1.65; color: var(--body-copy); }
.prose p + p, .prose ol + p, .prose h3 { margin-top: 16px; }
.prose h2 { font-size: 30px; line-height: 1.1; margin-bottom: 18px; }
.prose h3 { font-size: 20px; margin-bottom: 8px; }
.prose ol, .prose ul { padding-left: 22px; }
.prose ol li, .prose ul li { margin-bottom: 8px; }

h2.section-title {
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ---------- Cards / callouts ---------- */

.card {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--card-fill);
  padding: 20px 22px;
}
.card-hover:hover { border-color: rgba(200,255,61,0.5); background: var(--card-fill-strong); }

.callout {
  border-left: 2px solid var(--lime);
  background: rgba(200,255,61,0.05);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
}
.callout.coral { border-left-color: var(--coral); background: rgba(255,107,74,0.07); }
.callout h3 { font-size: 18px; margin-bottom: 8px; }
.callout p { font-size: 16px; line-height: 1.55; color: var(--body-copy); }

.gradient-card {
  padding: 28px 30px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(255,107,74,0.09), rgba(200,255,61,0.05) 70%, transparent);
}
.gradient-card.alt { background: linear-gradient(120deg, rgba(200,255,61,0.09), rgba(255,107,74,0.05) 70%, transparent); }

/* ---------- Badges ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tag-18 { border: 1px solid rgba(255,138,107,0.55); color: var(--coral); }
.tag-alcohol-free { border: 1px solid rgba(200,255,61,0.5); color: var(--lime); }
.tag-preferred { background: var(--lime); color: var(--bg); }

/* ---------- Spice-level dots ---------- */

.spice-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.spice-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(242,237,227,0.18); }
.spice-dot.on { background: var(--lime); }

/* ---------- Category / anchor nav (sticky) ---------- */

.category-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 56px;
  box-sizing: border-box;
  max-width: 100%;
  background: rgba(14,16,19,0.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.category-nav > * { min-width: 0; max-width: 100%; }
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  color: var(--body-copy);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
}
.category-pill:hover { border-color: var(--border-strong); color: var(--text); }
.category-pill .n { opacity: 0.6; font-weight: 500; }

/* ---------- Rules block ---------- */

details.rules-block {
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: var(--card-fill);
  padding: 4px 24px 22px;
}
details.rules-block summary {
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  list-style: none;
}
details.rules-block summary::-webkit-details-marker { display: none; }
details.rules-block summary::before { content: '−  '; color: var(--lime); }
details.rules-block:not([open]) summary::before { content: '+  '; }
details.rules-block ol { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.6; color: var(--body-copy); }
details.rules-block ol li { margin-bottom: 10px; }

/* ---------- Question / item lists ---------- */

.question-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-soft); border-radius: 14px; overflow: hidden; }
.question-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 18px;
  line-height: 1.5;
}
.question-list li:last-child .question-row { border-bottom: none; }
.question-row:nth-child(even) { background: rgba(242,237,227,0.032); }
.question-list li:nth-child(even) .question-row { background: rgba(242,237,227,0.032); }
.question-num { flex: 0 0 40px; font-family: var(--font-ui); font-size: 13px; color: var(--faint); }
.question-text { flex: 1; color: var(--text); }
.type-pill { flex: 0 0 auto; width: 82px; text-align: center; padding: 2px 0; border-radius: 999px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.type-pill.fraga { background: rgba(200,255,61,0.13); color: var(--lime); }
.type-pill.utmaning { background: rgba(255,107,74,0.14); color: var(--coral); }

/* ---------- Variant cards ---------- */

.variant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%),1fr)); gap: 14px; }
.variant-card { border: 1px solid var(--border-soft); border-radius: 14px; background: var(--card-fill); padding: 20px 22px; }
.variant-card h3 { font-size: 18px; margin-bottom: 10px; }
.variant-alt { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: 15.5px; color: var(--body-copy); }
.variant-alt:first-of-type { border-top: none; }

/* ---------- Link cards grid ---------- */

.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%),1fr)); gap: 12px; }
.link-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  color: var(--text);
}
.link-card:hover { border-color: rgba(200,255,61,0.5); background: var(--card-fill); color: var(--text); }
.link-card .name { font-family: var(--font-ui); font-weight: 600; font-size: 16.5px; }
.link-card .meta { font-size: 13.5px; color: var(--faint); }

/* ---------- FAQ ---------- */

.faq-list { display: flex; flex-direction: column; gap: 22px; }
.faq-item h3 { font-size: 19px; margin-bottom: 8px; }
.faq-item p { font-size: 16.5px; line-height: 1.6; color: var(--body-copy); }

/* ---------- Conversion / affiliate block ---------- */

.disclosure { font-size: 14px; color: var(--faint); margin-bottom: 16px; }
.conversion-block {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  padding: 26px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--card-fill);
}
.conversion-visual {
  flex: 0 1 220px;
  min-width: 160px;
  aspect-ratio: 1/1;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  overflow: hidden;
}
.conversion-copy { flex: 1 1 380px; min-width: 0; }
.conversion-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.conversion-price { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: rgba(255,107,74,0.16); color: var(--coral); font-family: var(--font-ui); font-size: 12px; font-weight: 700; }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 60px;
  padding: 40px 56px 44px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-raised);
}
.site-footer-inner {
  max-width: 1240px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}
.site-footer-logo { font-family: var(--font-ui); font-weight: 700; font-size: 19px; letter-spacing: -0.03em; }
.site-footer-logo span { color: var(--lime); }
.site-footer-note { margin: 8px 0 0; max-width: 44ch; font-size: 14px; line-height: 1.55; color: var(--faint); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--font-ui); font-size: 14px; }
.site-footer-links a { color: var(--muted); }
.site-footer-links a:hover { color: var(--text); }

/* ---------- Hoppa till frågorna ----------
   Frågebankerna ligger under reglerna, vilket på telefon betyder att det tar
   flera skärmar att nå dem. Den här kontrollen ligger direkt under hero och
   ger kategorival och slumpknapp på en gång. Den är en riktig <details> med
   riktiga ankarlänkar, så kategorierna fungerar utan JavaScript. */
.jump {
  display: none;              /* på desktop räcker sidomenyn */
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 21;
  border: 0;
  border-bottom: 1px solid rgba(200,255,61,0.32);
  border-radius: 0;
  background: #14180F;
  overflow: hidden;
}
.jump > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  min-height: 48px;
  box-sizing: border-box;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--lime);
}
.jump > summary::-webkit-details-marker { display: none; }
.jump > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
.jump[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.jump-count { font-weight: 500; font-size: 14px; color: var(--label); }
.jump-body { padding: 0 20px 18px; }
.jump-go {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 11px;
  background: var(--lime);
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.jump-go:hover { background: #D6FF6B; color: var(--bg); }
.jump-cats { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.jump-cats a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
}
.jump-cats a:hover { border-color: rgba(200,255,61,0.55); color: var(--text); }
.jump-cats .n { font-size: 12.5px; color: var(--faint); }

@media (max-width: 900px) {
  .jump { display: block; }
  .jump[open] { max-height: 78vh; overflow-y: auto; }
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  /* align-items: flex-start är rätt i radriktning men får barnen att krympa
     till innehållets bredd när riktningen blir kolumn, vilket gjorde att
     .main blev bredare än skärmen på varje sida med ett brett element i sig. */
  .layout { flex-direction: column; align-items: stretch; }
  .main { width: 100%; min-width: 0; }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 20px 20px 18px;
  }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar-nav a { margin: 0; padding: 7px 12px; }
  .sidebar-foot { margin-top: 16px; padding-top: 16px; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .hero, section.block { padding-left: 24px; padding-right: 24px; }
  /* Svenska sammansättningar som Midsommarlekar och Ansvarsfullt är längre
     än skärmen vid stora rubrikgrader. Tillåt avstavning i stället för spill. */
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
  .category-nav { padding: 14px 24px; }
  h1 { font-size: 42px !important; line-height: 1.04 !important; }
  .wide, .prose { min-width: 0; }
  .hero-row { gap: 28px; }
}

@media print {
  .sidebar, .category-nav, .jump, .conversion-block, .hero-actions, .btn { display: none !important; }
}

@media (max-width: 400px) {
  h1 { font-size: 34px !important; }
  .hero, section.block { padding-left: 18px; padding-right: 18px; }
  .category-nav { padding-left: 18px; padding-right: 18px; }
}