/* =========================================================
   CELEBRITIES ASSISTANT , BASSTILAR
   Bygger på tokens.css. Laddas efter Astra så våra värden vinner.
   ========================================================= */

body {
	font-family: var(--ca-font);
	font-size: var(--ca-text-bas);
	line-height: var(--ca-radhojd);
	color: var(--ca-text);
	background: var(--ca-ground);
	-webkit-font-smoothing: antialiased;
}

/* RUBRIKER AR BLACK, INTE VARUMARKESFARGADE.

   Forlagan satte color: var(--ca-bla) pa alla rubriker, vilket var
   ratt nar den variabeln var en dampad marinbla. Efter palettbytet
   pekar samma variabel pa varumarkesrosa, och foljden blev en sida
   dar VARENDA rubrik var rosa.

   Det bryter mot regel ett i fargrapporten: lat en farg vara stark
   at gangen. Rosan ska sitta pa knappen, inte pa tjugo rubriker. */
h1, h2, h3, h4,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
	font-family: var(--ca-font-rubrik);
	line-height: var(--ca-radhojd-rubrik);
	color: var(--ca-ink);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: var(--ca-text-4xl); font-weight: 700; }
h2 { font-size: var(--ca-text-3xl); font-weight: 700; }
h3 { font-size: var(--ca-text-xl);  font-weight: 600; }

/* Läsbar radlängd på brödtext.

   Regeln var tidigare oscopad (p, li) och träffade därmed ALLT på
   sajten: sidfoten, megamenyn, korten, brödsmulorna. Följden blev
   fjorton spridda `max-width: none`-undantag i tre CSS-filer, alltså
   ett specificitetskrig mot den egna koden. Nu gäller den bara där
   löpande text faktiskt bor. */
.entry-content > p,
.entry-content > ul > li,
.entry-content > ol > li,
.ca-innehall p,
.ca-innehall li,
.ca-sektionslayout__innehall > p {
	max-width: var(--ca-radlangd);
}

a {
	color: var(--ca-bla);
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--ca-bla-mork);
}

/* Synlig fokusmarkering. Krav i WCAG 2.2.

   OBS varför INTE :where(): den funktionen ger specificitet noll, vilket
   var precis fel här. Vilken temaregel som helst vann, och Astra ritade
   i praktiken en 1 px prickad vit linje i stället för vår 3 px blå.
   Uppmätt i checkpointgranskningen 2026-08-12. Kommentaren påstod att
   :where() skyddade markeringen; den gjorde tvärtom. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--ca-bla);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- Hoppa till innehåll ---- */
.ca-skiplink {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--ca-rum-3) var(--ca-rum-4);
	background: var(--ca-bla);
	color: var(--ca-text-invers);
}

.ca-skiplink:focus {
	left: var(--ca-rum-4);
	top: var(--ca-rum-4);
}

/* ---- Layout ---- */
.ca-sektion {
	padding-block: var(--ca-sektion);
	padding-inline: var(--ca-marginal);
}

.ca-sektion--varm { background: var(--ca-varm); }
.ca-sektion--bla  { background: var(--ca-bla-ljus); }

.ca-innehall {
	max-width: var(--ca-bredd);
	margin-inline: auto;
}

/* ---- Knappar ---- */
.ca-knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ca-rum-2);
	min-height: var(--ca-traffyta);
	padding: var(--ca-rum-3) var(--ca-rum-6);
	border: 2px solid transparent;
	border-radius: var(--ca-radie);
	background: var(--ca-bla);
	color: var(--ca-text-invers);
	font-size: var(--ca-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s ease;
}

/* KNAPPAR SKA INTE VARA UNDERSTRUKNA.

   Astra skriver ut .ast-single-post .entry-content a { text-decoration:
   underline } i sin dynamiska stilmall. Tre klasser plus ett element
   slar .ca-knapp, som bar en. Foljden var att VARJE lank-knapp inne i
   innehallet lag understruken: hero-knapparna, alla "Las mer" i korten
   och nu ocksa bokningsrutan. Knappar skrivna som <button> traffades
   inte, sa "Skicka" i formularet sag ratt ut medan "Las mer" bredvid
   inte gjorde det. Uppmatt 2026-08-19 pa /, /juridik/ och /kontakt/.

   SPECIFICITETEN AR RAKNAD, inte gissad. Astras regel vager (0,2,1):
   tva klasser plus elementet a. Ett forsta forsok pa
   .entry-content .ca-knapp vage (0,2,0) och forlorade alltsa, trots
   att det ser mer specifikt ut. :any-link raknas som en klass och tar
   regeln nedan till (0,3,1), vilket vinner utan !important och utan att
   kannas vid nagon Astra-specifik kroppsklass. Pseudoklassen ar
   dessutom sann: det ar bara lankar som ar understrukna, <button
   class="ca-knapp"> traffades aldrig av Astras regel. */
.entry-content a.ca-knapp:any-link,
.entry-content a.ca-knapp:any-link:hover,
.entry-content a.ca-knapp:any-link:focus {
	text-decoration: none;
}

.ca-knapp:hover,
.ca-knapp:focus {
	background: var(--ca-bla-mork);
	color: var(--ca-text-invers);
}

.ca-knapp--sekundar {
	background: transparent;
	border-color: var(--ca-bla);
	color: var(--ca-bla);
}

.ca-knapp--sekundar:hover,
.ca-knapp--sekundar:focus {
	background: var(--ca-bla);
	color: var(--ca-text-invers);
}

/* Jourtelefonen. Ska alltid vara klickbar text, aldrig bara en ikon. */
.ca-jour {
	display: inline-flex;
	align-items: center;
	gap: var(--ca-rum-2);
	min-height: var(--ca-traffyta);
	font-weight: 700;
	font-size: var(--ca-text-lg);
	color: var(--ca-bla);
	text-decoration: none;
}

.ca-jour:hover,
.ca-jour:focus {
	text-decoration: none;
}

/* ---- Kort ---- */
.ca-kortrad {
	display: grid;
	gap: var(--ca-rum-6);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	max-width: var(--ca-bredd);
	margin-inline: auto;
}

.ca-kort {
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-3);
	padding: var(--ca-rum-8) var(--ca-rum-6);
	background: var(--ca-vit);
	border: 1px solid var(--ca-kant);
	border-radius: var(--ca-radie-stor);
}

.ca-kort__ikon {
	width: 40px;
	height: 40px;
	color: var(--ca-bla);
}

.ca-kort h3 {
	margin: 0;
	font-size: var(--ca-text-lg);
}

.ca-kort p {
	margin: 0;
	color: var(--ca-text-dampad);
	font-size: var(--ca-text-sm);
}

.ca-kort .ca-knapp {
	margin-top: auto;
	align-self: flex-start;
}

/* ---- Hero: text vänster, bild höger ---- */
.ca-hero {
	background: var(--ca-varm);
	padding-block: var(--ca-sektion);
	padding-inline: var(--ca-marginal);
}

.ca-hero__inner {
	display: grid;
	gap: var(--ca-rum-12);
	align-items: center;
	max-width: var(--ca-bredd);
	margin-inline: auto;
}

@media (min-width: 860px) {
	.ca-hero__inner {
		grid-template-columns: 1fr 1fr;
	}
}

.ca-hero__titel {
	margin: 0 0 var(--ca-rum-2);
}

/* Underrubriken bär sökintentionen som devisen saknar. */
.ca-hero__underrubrik {
	margin: 0 0 var(--ca-rum-6);
	font-size: var(--ca-text-xl);
	font-weight: 600;
	color: var(--ca-text-dampad);
}

.ca-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ca-rum-4);
	margin-top: var(--ca-rum-8);
}

.ca-hero__bild img {
	width: 100%;
	height: auto;
	border-radius: var(--ca-radie-stor);
	display: block;
}

/* ---------------------------------------------------------
   BILDER I INNEHÅLLET SKA ALDRIG SPRÄNGA SIDAN

   Astra sätter i sin inline-CSS max-width: none på allt som
   ligger två nivåer under .entry-content i page-builder-layouten.
   Det träffar även <img>, som då ritas i sin egen pixelbredd.
   En 1024 px bred bild i en 390 px vy gav horisontell scroll på
   hela sidan. Uppmätt på /transportorer/ och /om-oss/.

   Astras selektor har specificitet 0,4,0. Attributselektorn är
   därför medvetet upprepad: det höjer specificiteten till 0,4,1
   utan !important, och utan att låsa fast något som senare måste
   överskrivas med ännu ett !important.
   --------------------------------------------------------- */
.ast-page-builder-template .entry-content[data-ast-blocks-layout][data-ast-blocks-layout] img {
	max-width: 100%;
	height: auto;
}