/*
Theme Name: ATDT Svenskafik.se
Theme URI: https://www.svenskafik.se/
Description: GeneratePress-barntema for svenskafik.se. Identitet: svenskt folkhemsfik fran 1950-talet, vaxduk och teak, petrolgron skylt och massingsdetaljer. Rikstackande kafeguide med betyg och omdomen. Del av ATDT-natverkets temarkitektur.
Author: Atdt AB
Template: generatepress
Version: 0.1.0
*/

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

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

h1, h2, h3, h4,
.site-title,
.entry-title {
	font-family: var(--atdt-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--atdt-ink);
}

h1, .entry-title { line-height: 1.15; }

a { color: var(--atdt-accent); text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--atdt-accent-2); }

/* ---------------------------------------------------------------
   Sidhuvud: skylten.
   Petrolgron platta med en tunn massinglinje under, som en malad
   traskylt over konditoriets entre.
   --------------------------------------------------------------- */
.site-header {
	background: var(--atdt-accent);
	border-bottom: 3px solid var(--atdt-brass);
}
/* GeneratePress satter sin egen titelfarg via Customizer-CSS som laddas
   efter temats. Darfor kravs hogre specificitet an .site-title a, annars
   blir titeln mork mot den petrolgrona plattan. Uppmatt i screenshot. */
.site-header .site-title a,
.site-header .site-title a:visited,
.site-header .site-description,
.site-header h1.main-title a,
.site-header p.main-title a {
	color: var(--atdt-on-accent) !important;
}
.site-header .site-title a {
	font-family: var(--atdt-font-display);
	font-weight: 600;
	letter-spacing: 0.005em;
}
.main-navigation,
.main-navigation .main-nav ul li a {
	background: var(--atdt-accent);
	color: var(--atdt-on-accent);
	font-family: var(--atdt-font-body);
	font-weight: 500;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
	background: var(--atdt-accent-2);
	color: var(--atdt-on-accent);
}

/* ---------------------------------------------------------------
   Ytor: porslin pa vaxduk.
   --------------------------------------------------------------- */
.entry-content,
.site-main .post,
.atdt-card {
	background: var(--atdt-surface);
	border: 1px solid var(--atdt-neutral);
	border-radius: var(--atdt-radius);
}

/* ---------------------------------------------------------------
   Fikkort: listan pa en ortssida.
   Rutmonstret ar en diskret referens till kakelgolvet och ligger
   BARA i kortets overkant, aldrig som bakgrund under text. Ett helt
   rutmonstrat falt bakom lopande text ar oläsbart och 50-talspastisch.
   --------------------------------------------------------------- */
.atdt-fik-kort {
	background: var(--atdt-surface);
	border: 1px solid var(--atdt-neutral);
	border-radius: var(--atdt-radius);
	padding: 1.1rem 1.2rem;
	margin-bottom: 0.9rem;
	position: relative;
}
.atdt-fik-kort::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	border-radius: var(--atdt-radius) var(--atdt-radius) 0 0;
	background-image:
		linear-gradient(45deg, var(--atdt-neutral) 25%, transparent 25%),
		linear-gradient(-45deg, var(--atdt-neutral) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--atdt-neutral) 75%),
		linear-gradient(-45deg, transparent 75%, var(--atdt-neutral) 75%);
	background-size: 12px 12px;
	background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.atdt-fik-kort h3 {
	margin: 0.15rem 0 0.3rem;
	font-size: 1.2rem;
}
.atdt-fik-kort .atdt-adress {
	color: var(--atdt-muted);
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------
   Betyg. Massing, inte Google-gult.
   Tva separata betyg visas ALDRIG som ett: vart eget och Googles star
   bredvid varandra med var sin etikett. Se sajtens beslutsunderlag.
   --------------------------------------------------------------- */
.atdt-betyg {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--atdt-font-body);
}
.atdt-betyg__stjarnor { color: var(--atdt-brass); letter-spacing: 0.05em; }
.atdt-betyg__tom      { color: var(--atdt-brass-dim); }
.atdt-betyg__tal      { font-weight: 600; }
.atdt-betyg__antal    { color: var(--atdt-muted); font-size: 0.9rem; }

.atdt-betyg--kalla {
	display: block;
	font-size: 0.85rem;
	color: var(--atdt-muted);
	margin-top: 0.15rem;
}

/* Googles betyg ar tydligt en ANNAN kalla och far en egen ram, sa att
   ingen kan lasa de tva talen som ett gemensamt betyg. */
.atdt-betyg-extern {
	border-left: 3px solid var(--atdt-neutral);
	padding-left: 0.7rem;
	margin: 0.6rem 0;
}

/* ---------------------------------------------------------------
   Omdomen.
   --------------------------------------------------------------- */
.atdt-omdome {
	border-top: 1px solid var(--atdt-neutral);
	padding: 0.9rem 0;
}
.atdt-omdome__meta {
	color: var(--atdt-muted);
	font-size: 0.9rem;
}
.atdt-omdome-sammanfattning {
	background: var(--atdt-mint);
	border-radius: var(--atdt-radius);
	padding: 0.9rem 1.1rem;
	font-family: var(--atdt-font-display);
	font-size: 1.05rem;
}

/* Formularet. Tydligt men inte tungt. */
.atdt-omdome-form input[type="text"],
.atdt-omdome-form textarea,
.atdt-omdome-form select {
	background: var(--atdt-surface);
	border: 1px solid var(--atdt-muted);
	border-radius: var(--atdt-radius);
	font-family: var(--atdt-font-body);
}
.atdt-omdome-form button,
.wp-block-button__link,
.button {
	background: var(--atdt-accent);
	color: var(--atdt-on-accent);
	border: none;
	border-radius: var(--atdt-radius);
	font-family: var(--atdt-font-body);
	font-weight: 600;
	padding: 0.6rem 1.2rem;
}
.atdt-omdome-form button:hover,
.wp-block-button__link:hover,
.button:hover { background: var(--atdt-accent-2); }

/* Honeypot: maste vara osynlig for manniskor men natbar for robotar.
   display:none dolier den for vissa bottar OCH for skarmlasare, sa den
   flyttas ur bild i stallet och tas ur tabbordningen i markupen. */
.atdt-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------
   Faktabladet pa ett fiks sida.
   --------------------------------------------------------------- */
.atdt-fakta {
	background: var(--atdt-surface);
	border: 1px solid var(--atdt-neutral);
	border-radius: var(--atdt-radius);
	padding: 1rem 1.2rem;
}
.atdt-fakta dt {
	font-weight: 600;
	color: var(--atdt-muted);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.atdt-fakta dd { margin: 0 0 0.7rem; }

/* Attributmarken. Visar BARA det som ar positivt belagt: franvaro av ett
   GMB-attribut betyder okant, inte nej. Darfor finns ingen "saknar"-variant. */
.atdt-attribut {
	display: inline-block;
	background: var(--atdt-neutral);
	color: var(--atdt-ink);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	margin: 0 0.3rem 0.35rem 0;
	font-size: 0.88rem;
}

/* ---------------------------------------------------------------
   Sidfot: teakpanel.
   --------------------------------------------------------------- */
.site-footer,
.site-info {
	background: var(--atdt-ink);
	color: var(--atdt-bg);
}
.site-footer a, .site-info a { color: var(--atdt-mint); }

/* Motivavdelare: en massinglinje med en liten rundel i mitten, som
   beslaget pa en konditoridisk. Rent CSS, ingen bild att ladda. */
.atdt-motif-rule {
	height: 14px;
	margin: 2.2rem auto 0;
	max-width: var(--atdt-maxwidth);
	/* En massinglinje med en rundel i mitten. Linjen ritas som en 1px hog
	   bakgrund centrerad i hojdled, inte som en gradient over hela ytan,
	   annars blir det tva streck. Uppmatt i screenshot. */
	background-image:
		radial-gradient(circle at 50% 50%, var(--atdt-brass) 0 4px, transparent 5px),
		linear-gradient(var(--atdt-brass), var(--atdt-brass));
	background-size: 100% 100%, 100% 1px;
	background-position: center, center;
	background-repeat: no-repeat;
}

@media (max-width: 768px) {
	body { font-size: 1rem; }
	.atdt-fik-kort { padding: 0.9rem 1rem; }
}

/* ---------------------------------------------------------------
   Karta och grannar.
   Minikartan ritas som SVG ur egna koordinater och visas direkt.
   Gatukartan (Leaflet plus OSM) laddas forst vid klick, se
   assets/karta.js i katalogpluginet.
   --------------------------------------------------------------- */
.atdt-kartblock {
	margin: 1.4rem 0;
	background: var(--atdt-surface);
	border: 1px solid var(--atdt-neutral);
	border-radius: var(--atdt-radius);
	padding: 0.8rem;
}
.atdt-minikarta { display: block; width: 100%; height: auto; border-radius: var(--atdt-radius); }
.atdt-kartblock figcaption {
	margin-top: 0.6rem;
	font-size: 0.9rem;
	color: var(--atdt-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}
.atdt-karta-knapp {
	background: var(--atdt-accent);
	color: var(--atdt-on-accent);
	border: none;
	border-radius: var(--atdt-radius);
	font-family: var(--atdt-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
}
.atdt-karta-knapp:hover { background: var(--atdt-accent-2); }
.atdt-karta-knapp[disabled] { background: var(--atdt-muted); cursor: progress; }

/* Leaflet-ytan. Hojden maste sattas explicit, annars kollapsar kartan. */
.atdt-leaflet {
	height: 340px;
	border-radius: var(--atdt-radius);
	margin-bottom: 0.6rem;
}

.atdt-grannar { margin: 1.4rem 0; }
.atdt-grannar h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.atdt-grannar ul { list-style: none; margin: 0; padding: 0; }
.atdt-grannar li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--atdt-neutral);
}
.atdt-avstand { color: var(--atdt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------
   Bladdring: startsida, lanslistor, ortsregister, brodsmulor.
   --------------------------------------------------------------- */
.atdt-brodsmulor {
	font-size: 0.9rem;
	color: var(--atdt-muted);
	margin-bottom: 0.8rem;
}
.atdt-brodsmulor a { color: var(--atdt-accent); }

.atdt-start-ingress {
	font-family: var(--atdt-font-display);
	font-size: 1.2rem;
	line-height: 1.45;
}

.atdt-bladdra { margin: 1.6rem 0; }
.atdt-bladdra h2 { font-size: 1.3rem; margin-bottom: 0.6rem; }

/* Ortslistor i kolumner. Med 1 159 orter ar en enda spalt oanvandbar. */
.atdt-termlista {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	column-gap: 1.6rem;
}
.atdt-termlista li {
	break-inside: avoid;
	display: flex;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.28rem 0;
	border-bottom: 1px solid var(--atdt-neutral);
}
.atdt-antal {
	color: var(--atdt-muted);
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
}

/* Bokstavsnavigeringen i ortsregistret. */
.atdt-bokstavsnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 1rem 0 1.6rem;
}
.atdt-bokstavsnav a {
	display: inline-block;
	min-width: 2rem;
	text-align: center;
	padding: 0.3rem 0.5rem;
	background: var(--atdt-surface);
	border: 1px solid var(--atdt-neutral);
	border-radius: var(--atdt-radius);
	font-weight: 600;
	text-decoration: none;
}
.atdt-bokstavsnav a:hover { background: var(--atdt-accent); color: var(--atdt-on-accent); }
.atdt-bokstavsgrupp { margin: 1.6rem 0; scroll-margin-top: 1rem; }
.atdt-bokstavsgrupp h2 {
	font-size: 1.6rem;
	border-bottom: 2px solid var(--atdt-brass);
	padding-bottom: 0.2rem;
}
.atdt-alla-orter { margin: 1.4rem 0; font-weight: 600; }

@media (max-width: 900px) { .atdt-termlista { columns: 2; } }
@media (max-width: 560px) { .atdt-termlista { columns: 1; } }