/* Contrast audit and accessibility fixes
   Keeps light text on dark surfaces and dark text on light surfaces. */
:root{
  --contrast-ink:#24261f;
  --contrast-muted:#4b5044;
  --contrast-olive:#4f5b3d;
  --contrast-paper:#fffaf0;
  --contrast-paper-muted:#eee8da;
  --contrast-gold:#e0c98f;
}

/* Readable defaults on the site's light surfaces. */
.site-page{color:var(--contrast-ink)}
.site-page .eyebrow{color:var(--contrast-olive)}
.site-page .fakta .txt,
.site-page .material-note,
.site-page .pelarnot,
.site-page figcaption{color:var(--contrast-muted)}
.site-page .breadcrumb{color:var(--contrast-muted)}
.site-page .breadcrumb a{color:#52603f}

/* The Metoden page uses a light illustrated section, so it must not inherit
   the light-on-dark intro typography used by other subpages. */
.site-page.page-metoden #metoden{
  color:var(--contrast-ink)!important;
}
.site-page.page-metoden #metoden h1,
.site-page.page-metoden #metoden h2,
.site-page.page-metoden #metoden h3,
.site-page.page-metoden #metoden p,
.site-page.page-metoden #metoden strong,
.site-page.page-metoden #metoden li{
  color:var(--contrast-ink)!important;
}
.site-page.page-metoden #metoden .eyebrow{color:var(--contrast-olive)!important}
.site-page.page-metoden #metoden .pelarnot{color:var(--contrast-muted)!important}

/* Light cards placed inside a dark introductory section need their own dark
   text instead of inheriting the section's pale typography. */
.site-page:not(.page-home) main>section:first-child:not(.hero) .spar>div,
.site-page:not(.page-home) main>section:first-child:not(.hero) .veckor>div,
.site-page:not(.page-home) main>section:first-child:not(.hero) .pelare>div,
.site-page:not(.page-home) main>section:first-child:not(.hero) .fakta>div:not(:first-child),
.site-page:not(.page-home) main>section:first-child:not(.hero) .resource-nav,
.site-page:not(.page-home) main>section:first-child:not(.hero) .princip,
.site-page:not(.page-home) main>section:first-child:not(.hero) .ovning,
.site-page:not(.page-home) main>section:first-child:not(.hero) .fsteg,
.site-page:not(.page-home) main>section:first-child:not(.hero) .prakt{
  color:var(--contrast-ink)!important;
}
.site-page:not(.page-home) main>section:first-child:not(.hero) .spar>div p,
.site-page:not(.page-home) main>section:first-child:not(.hero) .veckor>div p,
.site-page:not(.page-home) main>section:first-child:not(.hero) .pelare>div p,
.site-page:not(.page-home) main>section:first-child:not(.hero) .resource-nav p,
.site-page:not(.page-home) main>section:first-child:not(.hero) .princip p,
.site-page:not(.page-home) main>section:first-child:not(.hero) .ovning p,
.site-page:not(.page-home) main>section:first-child:not(.hero) .fsteg p,
.site-page:not(.page-home) main>section:first-child:not(.hero) .prakt p,
.site-page:not(.page-home) main>section:first-child:not(.hero) .spar>div strong,
.site-page:not(.page-home) main>section:first-child:not(.hero) .veckor>div strong{
  color:var(--contrast-muted)!important;
}
.site-page:not(.page-home) main>section:first-child:not(.hero) .spar>div h2,
.site-page:not(.page-home) main>section:first-child:not(.hero) .spar>div h3,
.site-page:not(.page-home) main>section:first-child:not(.hero) .veckor>div h2,
.site-page:not(.page-home) main>section:first-child:not(.hero) .veckor>div h3,
.site-page:not(.page-home) main>section:first-child:not(.hero) .pelare>div h2,
.site-page:not(.page-home) main>section:first-child:not(.hero) .pelare>div h3,
.site-page:not(.page-home) main>section:first-child:not(.hero) .resource-nav h2,
.site-page:not(.page-home) main>section:first-child:not(.hero) .resource-nav h3,
.site-page:not(.page-home) main>section:first-child:not(.hero) .princip h2,
.site-page:not(.page-home) main>section:first-child:not(.hero) .ovning h2,
.site-page:not(.page-home) main>section:first-child:not(.hero) .fsteg h2{
  color:#24372b!important;
}
.site-page:not(.page-home) main>section:first-child:not(.hero) .spar>div .eyebrow,
.site-page:not(.page-home) main>section:first-child:not(.hero) .veckor>div .eyebrow,
.site-page:not(.page-home) main>section:first-child:not(.hero) .pelare>div .eyebrow,
.site-page:not(.page-home) main>section:first-child:not(.hero) .resource-nav .eyebrow{
  color:var(--contrast-olive)!important;
}

/* The Program page contains pale track cards inside its dark introduction. */
.site-page.page-programmet #programmet .spar>div p{color:#42473c!important}
.site-page.page-programmet #programmet .spar>div strong{color:#24372b!important}
.site-page.page-programmet #programmet .spar>div .eyebrow{color:#4f5b3d!important}
.site-page.page-programmet #programmet .fakta>div:not(:first-child) .tal{color:#24372b!important}
.site-page.page-programmet #programmet .fakta>div:not(:first-child) .txt{color:#505448!important}

/* Breadcrumbs live on the dark image intros on the free-material pages. */
.site-page:not(.page-home) main>section:first-child:not(.hero) .breadcrumb{
  color:var(--contrast-paper-muted)!important;
}
.site-page:not(.page-home) main>section:first-child:not(.hero) .breadcrumb a{
  color:var(--contrast-gold)!important;
}
.site-page:not(.page-home) main>section:first-child:not(.hero) .breadcrumb > * + *::before{
  color:rgba(255,250,240,.58)!important;
}
/* Metoden is the exception: its first section is light. */
.site-page.page-metoden #metoden .breadcrumb{color:var(--contrast-muted)!important}
.site-page.page-metoden #metoden .breadcrumb a{color:#52603f!important}

/* Stronger small-text contrast on light cards and forms. */
.site-page .material-card p,
.site-page .resource-nav p,
.site-page .pillar-mobile-copy p,
.site-page .princip .djup,
.site-page .ovning .djup,
.site-page .fsteg,
.site-page .fstopp,
.site-page .prakt,
.site-page .gfraga label{
  color:var(--contrast-muted)!important;
}
.site-page .material-card .eyebrow,
.site-page .pillar-mobile-copy .eyebrow,
.site-page .resource-nav .eyebrow,
.site-page .princip .pnr,
.site-page .ovning .pnr{
  color:var(--contrast-olive)!important;
}
.site-page input::placeholder,
.site-page textarea::placeholder{color:#666b60;opacity:1}

/* Preserve intentional light typography on genuinely dark surfaces. */
.site-page.page-home .hero,
.site-page.page-home #vem,
.site-page.page-home #kontakt .inre,
.site-page .arbetet,
.site-page footer,
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden){
  color:var(--contrast-paper)!important;
}
.site-page.page-home .hero p,
.site-page.page-home #vem p,
.site-page.page-home #vem li,
.site-page.page-home #kontakt .inre p,
.site-page .arbetet p,
.site-page .arbetet li,
.site-page footer small{
  color:var(--contrast-paper-muted)!important;
}
.site-page.page-home .hero h1,
.site-page.page-home .hero h2,
.site-page.page-home #vem h2,
.site-page.page-home #vem h3,
.site-page.page-home #kontakt .inre h2,
.site-page .arbetet h2{
  color:var(--contrast-paper)!important;
}
.site-page.page-home .hero .eyebrow,
.site-page.page-home #vem .eyebrow,
.site-page.page-home #kontakt .inre .eyebrow,
.site-page .arbetet .eyebrow{
  color:var(--contrast-gold)!important;
}

/* Ensure mobile navigation remains dark text on its pale panel. */
@media(max-width:900px){
  .site-page .navlinks,
  .site-page .navlinks a{color:#24372b!important}
  .site-page .navlinks a:hover,
  .site-page .navlinks a[aria-current="page"],
  .site-page .navlinks a[aria-current="location"]{color:#24372b!important}
}

/* Träningsfysiologi: its hero is dark, while the article, side navigation and
   callouts are light. The late rules previously made the hero lede and
   breadcrumbs too dark. */
.academy-article{color:#23211b}
.academy-article .hero,
.academy-article .hero h1,
.academy-article .hero h2,
.academy-article .hero h3,
.academy-article .hero p,
.academy-article .hero .lede{
  color:#fff9ed!important;
}
.academy-article .hero .eyebrow{color:#e0c98f!important}
.academy-article .hero .article-breadcrumb{color:#eee8da!important}
.academy-article .hero .article-breadcrumb a{color:#e0c98f!important}
.academy-article .hero .article-breadcrumb a+*::before{color:rgba(255,249,237,.58)!important}
.academy-article nav .nav-title,
.academy-article .kicker,
.academy-article .open-q .oq-label{color:#5b6057!important}
.academy-article footer{color:#d9ddcf!important}
.academy-article .article-next p,
.academy-article .open-q,
.academy-article .part-lede{color:#474c43!important}

@media(prefers-contrast:more){
  .site-page .eyebrow,
  .site-page .breadcrumb a,
  .site-page .material-card .eyebrow,
  .site-page .resource-nav .eyebrow{color:#35412d!important}
  .site-page p,
  .site-page li,
  .site-page .material-note,
  .site-page .pelarnot{color:#2e312a}
}

/* Ljusa kort inne i undersidornas mörka introduktion görs nästan helt täckande,
   så att texten inte ligger på bildens mörka partier. */
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .spar>div,
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .veckor>div,
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .pelare>div,
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .fakta>div:not(:first-child),
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .resource-nav,
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .fsteg,
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .fstopp{
  background:rgba(255,249,237,.94)!important;
}
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .fakta>div:not(:first-child) .tal{color:#24372b!important}
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .fakta>div:not(:first-child) .txt{color:#505448!important}
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .fstopp,
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .fstopp p{color:#4b5044!important}
.site-page:not(.page-home) main>section:first-child:not(.hero):not(#metoden) .fstopp h2{color:#24372b!important;font-size:1.7rem;max-width:none;line-height:1.15}

/* ─────────────────────────────────────────────────────────────
   Träningsfysiologin bär två stillager samtidigt: .article-page ger
   sidan en ljus hero och ett ljust sidfält, medan .academy-article och
   reglerna ovan målar texten som om båda vore mörka. Resultatet blev
   ljus text på ljus botten. Här sätts en enda linje för sidan:
   ljus hero med mörk text, mörkt sidfält med ljus text.
   ───────────────────────────────────────────────────────────── */

/* Heron är ljus, alltså mörk text. */
.article-page.academy-article .hero{color:#23211b!important}
.article-page.academy-article .hero h1{color:#18382c!important}
.article-page.academy-article .hero h1 em{color:#a97831!important}
.article-page.academy-article .hero .lede{color:#4b5044!important}
.article-page.academy-article .hero .eyebrow{color:#5c6749!important}
.article-page.academy-article .hero .article-breadcrumb{color:#6b6f61!important}
.article-page.academy-article .hero .article-breadcrumb a{color:#4f5b3d!important}
.article-page.academy-article .hero .article-breadcrumb a:hover{color:#18382c!important}
.article-page.academy-article .hero .article-breadcrumb a+*::before{color:rgba(35,33,27,.32)!important}

/* Sidfältet återställs till mörkgrönt, som sidfoten, så att den ljusa
   innehållsförteckningen fungerar som den var tänkt. */
.article-page.academy-article .shell>nav{
  background:
    linear-gradient(rgba(24,56,44,.96),rgba(24,56,44,.96)),
    url('bilder/topografi.svg') center/650px auto repeat!important;
  border-right:0!important;
  color:#eef0e7!important;
  box-shadow:12px 0 35px rgba(24,56,44,.12)!important;
}
.article-page.academy-article .shell>nav .nav-title{color:#d7bd86!important}
.article-page.academy-article .shell>nav a{color:#cbd2c7!important}
.article-page.academy-article .shell>nav a.part{color:#fff9ed!important}
.article-page.academy-article .shell>nav a:hover{color:#fff9ed!important;background:rgba(255,255,255,.07)!important}
.article-page.academy-article .shell>nav a.active{color:#fff9ed!important;border-left-color:#d4af68!important;background:rgba(255,255,255,.08)!important}