/*
 * Sustinia – gemensamt tema för hela webbplatsen.
 * Laddas SIST på varje sida (efter style.css / assets/style.css / sidans egna <style>), så att
 * alla sidor får samma färger och samma typsnitt. Ljust läge är standard; läsaren kan välja
 * mörkt läge med knappen i sidhuvudet (assets/theme.js sparar valet).
 *
 * Typsnitt: Atkinson Hyperlegible Next – framtaget av Braille Institute för läsare med nedsatt syn.
 * Färger: svart text på ljusgrön bakgrund; alla textpar klarar WCAG AA (4,5:1), de flesta AAA (7:1).
 * Ändra färger här och bara här.
 */

:root {
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --c-bg: #e6f2ea;          /* sidans bakgrund, ljusgrön */
  --c-bg-alt: #d3eadc;      /* omväxlande sektioner, sidhuvudets hero, sidfot */
  --c-surface: #f8fcf9;     /* kort, rutor, formulärfält */
  --c-text: #111814;        /* brödtext, nästan svart */
  --c-muted: #33443a;       /* sekundär text */
  --c-heading: #0b1f15;     /* rubriker */
  --c-link: #0a5638;        /* länkar och accenttext */
  --c-accent: #7fd0a0;      /* knappar (svart text på) */
  --c-accent-hover: #67c08b;
  --c-on-accent: #0a0f0c;
  --c-border: #a9c8b5;
  --c-border-strong: #4f7a62; /* formulärfält, knappkanter */
  --c-focus: #0b1f15;
  --c-warn-bg: #fff1d6;
  --c-warn-text: #5c3b00;
  --c-warn-border: #d9b36a;
  --c-shadow: rgba(10, 40, 25, 0.08);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --c-bg: #0e1712;
  --c-bg-alt: #15231b;
  --c-surface: #1b2b22;
  --c-text: #ecf5ef;
  --c-muted: #bccec3;
  --c-heading: #f4faf6;
  --c-link: #9be3b9;
  --c-accent: #8fddb0;
  --c-accent-hover: #a8e8c2;
  --c-on-accent: #07110b;
  --c-border: #3d5a49;
  --c-border-strong: #7fa08c;
  --c-focus: #f4faf6;
  --c-warn-bg: #3a2e12;
  --c-warn-text: #ffe2a8;
  --c-warn-border: #8a6a2a;
  --c-shadow: rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* De äldre stilmallarnas variabler pekas om till temat, så att befintliga regler följer med. */
:root, :root[data-theme="dark"] {
  /* assets/style.css */
  --paper: var(--c-bg); --paper-dim: var(--c-bg-alt); --ink: var(--c-heading); --ink-soft: var(--c-link);
  --charcoal: var(--c-text); --muted: var(--c-muted); --coral: var(--c-accent); --coral-strong: var(--c-link);
  --sage: var(--c-link); --sage-strong: var(--c-link); --line: var(--c-border); --card: var(--c-surface);
  /* style.css (startsidan m.fl.) */
  --pine: var(--c-heading); --forest: var(--c-link); --gold: var(--c-accent); --cream: var(--c-bg);
  --mist: var(--c-bg-alt); --accent: var(--c-accent); --teal: var(--c-link); --teal-dark: var(--c-heading);
  /* ai-guide och kursfiler */
  --bg: var(--c-bg); --accent1: var(--c-link); --accent1-dark: var(--c-link); --accent1-soft: var(--c-bg-alt);
  --accent2: var(--c-accent); --accent2-dark: var(--c-link); --accent2-soft: var(--c-bg-alt); --accent2-strong: var(--c-link);
  --warn: var(--c-warn-text); --warn-soft: var(--c-warn-bg);
}

/* Grund */
html, body { background: var(--c-bg) !important; color: var(--c-text); }
body, button, input, select, textarea, .mono, .eyebrow, .pill, .status-badge, .course-status,
.price-box, .price-box *, .step .num, .tag-free, .tag-paid, code, pre, kbd {
  font-family: var(--font) !important;
}
body { font-size: 17px; line-height: 1.65; }
h1, h2, h3, h4, h5, h6, .brand, .footer-wordmark, .brand-name, .brand-mark .brand-name {
  font-family: var(--font) !important; color: var(--c-heading); letter-spacing: -0.01em;
}
p, li, td, th, dd, dt, label, summary, figcaption { color: inherit; }
a { color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-heading); }
.eyebrow, .hero .eyebrow, header.top .eyebrow { color: var(--c-link) !important; }
.lead, .hero .lead, .section-head p, .card p, .card li, .muted-fallback, .course-format, .course-price,
.founder-role, .contact-label, header.top p.sub, section.card > p.lead { color: var(--c-muted) !important; opacity: 1 !important; }
strong, b { color: inherit; }
hr { border-color: var(--c-border); }

/* Fokus syns tydligt på allt som går att klicka på */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--c-focus) !important; outline-offset: 2px;
}

/* Sidhuvud */
header, .site-header, header.top {
  background: var(--c-bg) !important; color: var(--c-text);
  border-bottom: 1px solid var(--c-border) !important; box-shadow: none !important; backdrop-filter: none !important;
}
.links a, nav.main-nav a:not(.btn), .backlink-row a { color: var(--c-text) !important; }
.links a:hover, nav.main-nav a:not(.btn):hover { color: var(--c-link) !important; text-decoration: underline; }
.brand, .brand-mark, .brand-mark .brand-name { color: var(--c-heading) !important; }
.brand span, .brand-mark .brand-tagline { color: var(--c-muted) !important; }
.nav-toggle { color: var(--c-text); border-color: var(--c-border-strong) !important; background: transparent !important; }
.nav-toggle-bar { background: var(--c-text) !important; }
@media (max-width: 720px) { nav.main-nav { background: var(--c-bg) !important; border-color: var(--c-border) !important; } }

/* Knappar: svart text på grönt, aldrig vit text */
.btn, .btn-primary, .nav-contact, .quiz-actions button, .save-row button {
  background: var(--c-accent) !important; color: var(--c-on-accent) !important;
  border: 1px solid var(--c-border-strong) !important; font-family: var(--font) !important; font-weight: 700;
}
.btn:hover, .btn-primary:hover, .nav-contact:hover { background: var(--c-accent-hover) !important; color: var(--c-on-accent) !important; }
.btn-primary:disabled, .btn:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.alt, .btn-ghost, .course-link.btn-ghost, .quiz-actions button.secondary {
  background: transparent !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong) !important;
}
.btn.alt:hover, .btn-ghost:hover { background: var(--c-bg-alt) !important; }
.nav-contact span { color: inherit !important; }

/* Hero och sektioner: inga mörka block med vit text */
.hero.wrap { background: transparent !important; }
.hero:not(.wrap) { background: var(--c-bg-alt) !important; background-image: none !important; color: var(--c-text) !important; }
.hero h1, .hero h2 { color: var(--c-heading) !important; }
.hero::before, .hero::after { display: none !important; }
nav.main-nav a.btn { white-space: nowrap; border-radius: 8px !important; }
.soft, .founder { background: var(--c-bg-alt) !important; }
section.block { border-color: var(--c-border) !important; }
.founder-photo { background: var(--c-bg-alt) !important; border-color: var(--c-border) !important; }

/* Kort, rutor och tabeller */
.card, .contact-panel > div, details, .note, .status-note, .price-box, .avtal-box, .result-box, .check-row,
.rhythm-day, .guide-faq details, .final-check, section.card, .day, .example-box, .callout, .box, .panel {
  background: var(--c-surface) !important; color: var(--c-text); border-color: var(--c-border) !important;
  box-shadow: 0 6px 20px var(--c-shadow) !important;
}
.card h3, section.card h2, .guide-faq summary { color: var(--c-heading) !important; }
.card::before { background: var(--c-accent) !important; }
.pill, .tag-free, .status-badge, .status-badge.confirmed, .academy-badge, .lesson .tag, .day .num {
  background: var(--c-bg-alt) !important; color: var(--c-heading) !important; border: 1px solid var(--c-border) !important;
}
.tag-paid { background: var(--c-accent) !important; color: var(--c-on-accent) !important; }
.status-badge.unresolved, .status-pending, .notice, .badge.warn {
  background: var(--c-warn-bg) !important; color: var(--c-warn-text) !important; border-color: var(--c-warn-border) !important;
}
.status-pending strong, .notice strong { color: var(--c-warn-text) !important; }
table, th, td, .fact-table th, .fact-table td { border-color: var(--c-border) !important; color: var(--c-text); }
th, .fact-table th { background: var(--c-bg-alt) !important; color: var(--c-heading) !important; }
blockquote { background: var(--c-surface) !important; border-left-color: var(--c-link) !important; color: var(--c-text); }
.price-box .price-consumer, .price-box .price-consumer span, .step .num { color: var(--c-heading) !important; }
.field-error { color: #a1271b; }
:root[data-theme="dark"] .field-error { color: #ffb4a8; }

/* Formulär */
input, textarea, select {
  background: var(--c-surface) !important; color: var(--c-text) !important; border: 1px solid var(--c-border-strong) !important;
}
input::placeholder, textarea::placeholder { color: var(--c-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--c-link); }
label { color: var(--c-text); }

/* Sidfot */
footer, .site-footer {
  background: var(--c-bg-alt) !important; color: var(--c-text) !important; border-top: 1px solid var(--c-border);
}
footer a, .site-footer a { color: var(--c-link) !important; }
footer p, .footer-grid p, .footer-bottom, .footer-grid strong, .footer-wordmark span, .site-footer p { color: var(--c-muted) !important; }
.footer-wordmark, footer .footer-wordmark, .site-footer .brand-name { color: var(--c-heading) !important; }
.footer-bottom { border-top-color: var(--c-border) !important; }

/* Hoppa-till-innehåll */
.skip-link { background: var(--c-heading) !important; color: var(--c-bg) !important; }

/* Logotypen syns även i mörkt läge */
:root[data-theme="dark"] .brand-mark img, :root[data-theme="dark"] img.logo,
:root[data-theme="dark"] .site-footer .brand-mark img { background: #f8fcf9; border-radius: 6px; padding: 2px; }

/* Cookie-rutan */
.sustinia-cookie-panel, .sustinia-cookie-settings {
  background: var(--c-surface) !important; color: var(--c-text) !important; border-color: var(--c-border-strong) !important;
  font-family: var(--font) !important;
}
.sustinia-cookie-panel a { color: var(--c-link) !important; }
.sustinia-cookie-actions button {
  font-family: var(--font) !important; background: transparent !important; color: var(--c-text) !important;
  border: 1px solid var(--c-border-strong) !important;
}
.sustinia-cookie-actions .sustinia-cookie-accept { background: var(--c-accent) !important; color: var(--c-on-accent) !important; }

/* Kursinnehåll på /academy */
#csrd-lessons details, #grundkurs-ai-lessons details, #sociala-medier-lessons details {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 16px; margin: 8px 0;
}
.academy-panel { background: var(--c-surface) !important; border: 1px solid var(--c-border) !important; color: var(--c-text); }

/* Temaknappen */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; margin: 0 8px;
  background: transparent; color: var(--c-text); border: 1px solid var(--c-border-strong); border-radius: 999px;
  font: 600 15px/1 var(--font); cursor: pointer; white-space: nowrap;
}
.theme-toggle:hover { background: var(--c-bg-alt); }
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.theme-toggle.is-floating { position: fixed; top: 12px; right: 12px; z-index: 60; background: var(--c-surface); }
/* Sidor med lång meny: bara ikon (knappen har ändå en läsbar etikett för skärmläsare) */
@media (max-width: 1400px) { .site-header .theme-toggle .theme-toggle-text { display: none; } .site-header .theme-toggle { padding: 8px 11px; } }
@media (max-width: 520px) { .theme-toggle .theme-toggle-text { display: none; } .theme-toggle { padding: 8px 11px; margin: 0 4px; } }

/* Egna rutor på enskilda sidor */
.cta-box { background: var(--c-bg-alt) !important; color: var(--c-text) !important; border: 1px solid var(--c-border); }
.cta-box h3 { color: var(--c-heading) !important; }
.cta-box p { color: var(--c-muted) !important; }

/* Ett enda typsnitt överallt, även i etiketter som tidigare var maskinskrift */
body *:not(svg):not(svg *) { font-family: var(--font) !important; }

/* Långa menyer bryter på flera rader i stället för att hamna utanför skärmen */
@media (min-width: 721px) {
  .site-header .wrap { gap: 12px; }
  nav.main-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; column-gap: 18px; }
  nav.main-nav a { white-space: nowrap; }
}

/* Långa svenska ord i rubriker får plats på mobil */
h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; overflow-wrap: break-word; }
@media (max-width: 480px) { h1 { font-size: clamp(30px, 8.5vw, 40px) !important; line-height: 1.15 !important; } }