/* ==========================================================================
   TYPOGRAFI – FfdN grafisk profil (nov 2026)
   Rubriker: Playfair Display  ·  Brödtext/övrigt: Poppins
   --------------------------------------------------------------------------
   OBS: Denna fil ligger i en undermapp och byggs därför INTE in i
   /_project/_cache/css/instance.css. Den laddas separat från
   /_project/_source/misc-header.asp, EFTER Bootstrap, så att den vinner
   över både Bootstrap och de genererade reglerna (mainFont/headerFont = Nunito
   i databasen). Cache-busta genom att höja ?v= i misc-header.asp.
   Rollback: ta bort typsnittsraderna i misc-header.asp.
   Ikontypsnitt (FontAwesome, Linearicons, lg) och loggan rörs inte.
   ========================================================================== */

:root {
	--font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body: 'Poppins', Arial, Helvetica, sans-serif;
	--bs-body-font-family: var(--font-body); /* Bootstrap 5 läser denna */
}

/* --- Brödtext ------------------------------------------------------------ */
body,
table,
.inledning,
#bootstrap-menu ul li a,
#swl-sub-footer-wrapper .copy,
#swl-sub-footer-wrapper .smode,
.site-forms .btn-success,
.button-back .btn-inverse,
.button,
.swl-button .label-main,
.swl-button .label-sub,
#crumbRow a,
.swl-article .post-teaser,
.swl-article .post-modified,
.swl-article .post-link,
.swl-article .post-image-text,
.swl-article .post-date,
.swl-article.widget .post .post-teaser,
.swl-article.single-post .post-teaser,
.faqOverviewView .question,
.fileExplorer span.folderName,
.fileExplorer .folder .noFiles,
.list-terms dt,
.lg-sub-html,
.code {
	font-family: var(--font-body);
}

/* Meny och knappar: Medium (Poppins 300 laddas inte) */
#bootstrap-menu ul li a {
	font-weight: 500;
}
.site-forms .btn-success,
.button-back .btn-inverse,
.button,
.btn {
	font-weight: 500;
}

/* Fet text i brödtext */
b,
strong {
	font-weight: 600;
}

/* --- Rubriker ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.pageHeader,
.blurb__title,
.swl-article .post-header,
.swl-article.single-post .post-header,
.post-infobar-content.article h3,
#faqAccordion h1 {
	font-family: var(--font-heading);
	font-weight: 700;
}

/* Sidtitlar som i profilen ("Typsnitt"): Black */
h1,
.pageHeader {
	font-weight: 900;
}

/* Accentord i rubrik, t.ex. <h2>Färg <em>palett</em></h2> */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
	font-style: italic;
	font-weight: 700;
}

/* ==========================================================================
   STORLEKSSKALA – en nivå per typ av text, samma överallt på sajten
   --------------------------------------------------------------------------
   Sidtitel  38->52px  Playfair 900   h1.pageHeader, h1 i innehåll
   Sektion   32->42px  Playfair 700   h2, "Aktiviteter", "Kort om FfdN"
   h3        28->32px  Playfair 700
   h4        24->28px  Playfair 700
   h5        22px      Playfair 700
   Kort      20->24px  Playfair 700   rubriker i kort/listor (aktiviteter m.m.)
   Etikett   14px      Poppins 600 versaler (h6)
   Brödtext  18px      Poppins 400    sidinnehåll
   Text      16px      Poppins 400    kort, knappar
   Liten     15px      Poppins 400    datum, footer
   Finstilt  13px      Poppins 400    copyright
   clamp() = mindre på mobil, större på desktop.
   Selektorerna matchar/överträffar reglerna i generic.css (instance.css).
   ========================================================================== */
:root {
	--fs-display: clamp(2.375rem, 1.75rem + 2.2vw, 3.25rem);
	--fs-h2:      clamp(2rem, 1.6rem + 1.4vw, 2.625rem);
	--fs-h3:      clamp(1.75rem, 1.5rem + 0.8vw, 2rem);
	--fs-h4:      clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
	--fs-h5:      1.375rem;
	--fs-card:    clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--fs-label:   0.875rem;
	--fs-body:    1.125rem;
	--fs-text:    1rem;
	--fs-small:   0.9375rem;
	--fs-xs:      0.8125rem;
	--lh-heading: 1.2;
	--lh-body:    1.8;
}

/* --- Grundnivåer (gäller överallt) -------------------------------------- */
h1, .h1 { font-size: var(--fs-display); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
	line-height: var(--lh-heading);
}

/* h6 = etikett/överrubrik i Poppins, som "Rubrik, underrubrik" i profilen */
html h6,
html .h6 {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* --- Sidtitel ------------------------------------------------------------ */
html .pageHeader.text-header {
	font-size: var(--fs-display);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-bottom: 2rem;
}
/* Startsidans "Kort om FfdN" är en sektionsrubrik, inte en sidtitel */
html .page-id-801 .pageHeader.text-header {
	font-size: var(--fs-h2);
	font-weight: 700;
}

/* --- Sidinnehåll (WYSIWYG) ---------------------------------------------- */
html .text-content {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}
html .text-content h1 { font-size: var(--fs-display); }
html .text-content h2 { font-size: var(--fs-h2); }
html .text-content h3 { font-size: var(--fs-h3); }
html .text-content h4 { font-size: var(--fs-h4); }
html .text-content h5 { font-size: var(--fs-h5); }
html .text-content h1,
html .text-content h2,
html .text-content h3,
html .text-content h4,
html .text-content h5 {
	line-height: var(--lh-heading);
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}
html .text-content h6 {
	margin-top: 2em;
	margin-bottom: 0.5em;
}
html .text-content > :first-child,
html .text-content > div > :first-child,
html .text-content > div > div > :first-child {
	margin-top: 0;
}

/* --- Startsidan ---------------------------------------------------------- */
/* Hero-text i karusellen */
html .carousel-caption h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
html .carousel-caption h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
html .carousel-caption h4 { font-size: var(--fs-card); line-height: var(--lh-heading); }

/* Sektionsrubriker ("Aktiviteter") */
html .th-calendar-widget h2 { font-size: var(--fs-h2); }

/* Kortrubriker: aktiviteter, infokort ("Vägledning i vården", "Tipbase", "Dysmeli" …) */
html .th-calendar-widget-item h4,
html #generic-three-boxes-card h4 {
	font-size: var(--fs-card);
	line-height: 1.25;
}
html #generic-three-boxes-card .blurb__title {
	font-size: var(--fs-card) !important; /* generic.css har 1.75rem !important */
}

/* Text i kort */
html #generic-three-boxes-card p,
html #generic-three-boxes-card a,
html .th-calendar-widget-item {
	font-size: var(--fs-text);
}
html #generic-three-boxes-card h4 a {
	font-size: inherit;
}
/* Datum i aktivitetskort */
html .th-calendar-widget-item .mb-3 {
	font-size: var(--fs-small);
}

/* Knapplänkar "Bli medlem" / "Min sida" = knappar -> Poppins */
html .info-button-link .blurb__title {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 600;
}
html #th-calendar-button {
	font-weight: 500;
}

/* --- Footer -------------------------------------------------------------- */
html #swl-footer-wrapper h3,
html [id*="footer"] .span4 h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	margin-bottom: 0.5rem;
}
html [id*="footer"] .span4,
html [id*="footer"] .span4 div,
html [id*="footer"] .span4 span,
html [id*="footer"] .span4 a {
	font-size: var(--fs-small);
}
html #swl-sub-footer-wrapper .copy,
html #swl-sub-footer-wrapper .smode {
	font-size: var(--fs-xs);
}