/*
Theme Name: ATDT Energideklarationer.se
Theme URI: https://www.energideklarationer.se/
Description: GeneratePress-barntema för energideklarationer.se. Identitet: teknisk informationsportal om energideklaration och energiklass A till G för fastigheter. Petrol och energigrön palett, energiklass-etikett som motiv, Sora plus Inter plus IBM Plex Mono. Del av ATDT-nätverkets temarkitektur.
Author: Atdt AB
Template: generatepress
Version: 0.1.2
*/

/* Bas. Tokens definieras i tokens.css, delade komponenter i atdt-theme-kit. */

body {
	background: var(--atdt-bg);
	color: var(--atdt-ink);
	font-family: var(--atdt-font-body);
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--atdt-font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--atdt-ink);
}

/* Långa svenska sammansatta ord (t.ex. Kommunstatistik) ska avstavas rent
   i smala kolumner i stället för att brytas mitt i ordet. */
.wp-block-heading,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

a { color: var(--atdt-accent); }
a:hover { color: var(--atdt-ink); }

/* Sidhuvud, ordmärke och meny.
   GP:s dynamiska inline-CSS ger nav en egen bakgrund (var(--base-2)) och
   ibland en boxad, smal behållare som bryter menyn till flera rader. Vi
   tvingar full bredd, ingen box och temats palett med GP:s egna selektorer
   plus !important. */
.site-header {
	background: var(--atdt-bg);
	border-bottom: 1px solid var(--atdt-neutral);
}
.site-header .site-title a,
.main-title a {
	color: var(--atdt-ink);
	font-family: var(--atdt-font-display);
	font-weight: 700;
}
.main-navigation,
.main-navigation .inside-navigation {
	background: var(--atdt-bg) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	width: 100%;
}
.main-navigation .main-nav ul li a,
.main-navigation a {
	font-family: var(--atdt-font-display);
	font-weight: 600;
	color: var(--atdt-ink) !important;
	white-space: nowrap;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation a:hover {
	color: var(--atdt-accent) !important;
}
/* Markera aktiv sida med petrol underkant */
.main-navigation .main-nav ul li.current-menu-item > a {
	box-shadow: inset 0 -3px 0 var(--atdt-accent-2);
}

/* Läsbar radbredd i artiklar */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3 {
	max-width: var(--atdt-maxwidth);
}

/* Siffror, energital och nyckeltal i monospace */
.entry-content code,
.atdt-data {
	font-family: var(--atdt-font-mono);
	font-feature-settings: "tnum" 1;
}

/* Faktarutor och citat med petrol vänsterkant, myndighetsnära men modernt */
.entry-content blockquote {
	border-left: 4px solid var(--atdt-accent);
	background: #fff;
	border-radius: var(--atdt-radius);
	padding: 1rem 1.25rem;
	margin-left: 0;
}

/* Jämförelse- och datatabeller med petrol rubrikrad */
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content table th {
	background: var(--atdt-accent);
	color: #fff;
	font-family: var(--atdt-font-display);
	font-weight: 600;
	text-align: left;
}
.entry-content table th,
.entry-content table td {
	border: 1px solid var(--atdt-neutral);
	padding: 0.55rem 0.75rem;
}

/* Knappar i petrol */
.entry-content .wp-block-button__link,
.atdt-btn {
	background: var(--atdt-accent);
	color: #fff;
	border-radius: var(--atdt-radius);
	font-family: var(--atdt-font-display);
	font-weight: 600;
}

/* Sidfot i mörk slate, lugn och saklig kontrast mot ljus bakgrund */
.site-footer {
	background: var(--atdt-ink);
	color: var(--atdt-bg);
}
.site-footer a { color: var(--atdt-accent-2); }

/*
 * Energiklass-etiketten som motiv. En horisontell stapel A till G,
 * grön till röd, samma färglogik som Boverkets energideklaration.
 * Renderas via generate_before_footer som avdelare och kan även
 * användas inline i innehåll med klassen .atdt-energy-scale.
 */
.atdt-energy-scale {
	display: flex;
	width: 100%;
	max-width: var(--atdt-maxwidth);
	margin: 2.5rem auto;
	border-radius: var(--atdt-radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(20, 32, 29, 0.12);
}
.atdt-energy-scale__step {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	font-family: var(--atdt-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
	letter-spacing: 0.02em;
}
.atdt-energy-scale__step--a { background: var(--atdt-energy-a); }
.atdt-energy-scale__step--b { background: var(--atdt-energy-b); }
.atdt-energy-scale__step--c { background: var(--atdt-energy-c); color: var(--atdt-ink); }
.atdt-energy-scale__step--d { background: var(--atdt-energy-d); color: var(--atdt-ink); }
.atdt-energy-scale__step--e { background: var(--atdt-energy-e); color: var(--atdt-ink); }
.atdt-energy-scale__step--f { background: var(--atdt-energy-f); }
.atdt-energy-scale__step--g { background: var(--atdt-energy-g); }

/* Motivvarianten som footer-avdelare, full bredd och tunnare */
.atdt-motif-scale {
	display: flex;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}
.atdt-motif-scale span {
	flex: 1 1 0;
	height: 6px;
}
.atdt-motif-scale span:nth-child(1) { background: var(--atdt-energy-a); }
.atdt-motif-scale span:nth-child(2) { background: var(--atdt-energy-b); }
.atdt-motif-scale span:nth-child(3) { background: var(--atdt-energy-c); }
.atdt-motif-scale span:nth-child(4) { background: var(--atdt-energy-d); }
.atdt-motif-scale span:nth-child(5) { background: var(--atdt-energy-e); }
.atdt-motif-scale span:nth-child(6) { background: var(--atdt-energy-f); }
.atdt-motif-scale span:nth-child(7) { background: var(--atdt-energy-g); }