/*
Theme Name: Themify Ultra Child
Theme URI: https://example.com/
Description: Child theme för Themify Ultra
Author: Rickard Troeng
Author URI: https://example.com/
Template: themify-ultra
Version: 1.0.0
Text Domain: themify-ultra-child
*/

/* ==========================================================================
   Casa Ellwe — designsystem
   --------------------------------------------------------------------------
   Trirong (rubriker) + Raleway (brödtext) laddas i functions.php.
   Klasserna nedan sätts på rader, kolumner och moduler i Themify Builder:
     Rad     -> Styling > Additional CSS Class   (custom_css_row)
     Kolumn  -> Styling > Additional CSS Class   (custom_css_column)
     Modul   -> Styling > Additional CSS Class   (add_css_<modulnamn>)
   ========================================================================== */

:root {
	/* Ytor – varma neutraler, hämtade från kundens tidigare sajt */
	--ce-ground: #fbf9f6;
	--ce-white: #ffffff;
	--ce-cream: #f2ede6;
	--ce-sand: #e8dfd4;
	--ce-charcoal: #3d3b37;
	--ce-charcoal-soft: #4c4944;

	/* Text */
	--ce-ink: #2b2926;
	--ce-body: #56524c;
	--ce-muted: #746e64;           /* mörkad från #8c867d för att nå 4.5:1 */
	--ce-on-dark: #f4f0ea;
	--ce-on-dark-muted: #b9b2a7;

	/* Linjer */
	--ce-line: #e2dbd1;
	--ce-line-strong: #d2c8ba;

	/* Accent */
	--ce-accent: #b26a45;          /* dekor: linjer, bockar, ramar */
	--ce-accent-dark: #96552f;     /* text och knappytor – WCAG AA mot ljus botten */
	--ce-accent-darker: #7d4526;   /* hover */
	--ce-accent-soft: #f0e3d9;

	/* Nivåfärger för tjänstikonerna – brons, silver, guld, platina.
	   Dämpade metaller som håller sig inom den varma paletten. Samtliga når
	   3:1 mot både vit och krämfärgad botten (WCAG 1.4.11, grafiska objekt). */
	--ce-niva-1: #b26a45;
	--ce-niva-2: #7c7f84;
	--ce-niva-3: #a07c3c;
	--ce-niva-4: #3d3b37;

	/* Samma metaller nedmörkade tills de bär som text. Ikonfärgerna ovan når
	   3:1 (nog för grafik) men bara ~4:1 mot vitt, och paketrubriken går ned
	   till 17.6px på mobil – alltså vanlig text som kräver 4.5:1. Dessa ligger
	   på 5.5:1 mot vitt. Nivå 4 är redan mörk och behöver ingen variant. */
	--ce-niva-1-text: #975a3b;
	--ce-niva-2-text: #67696e;
	--ce-niva-3-text: #826431;
	--ce-niva-4-text: #3d3b37;

	/* Typografi */
	--ce-font-head: "Trirong", Georgia, "Times New Roman", serif;
	--ce-font-body: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--ce-display: clamp(2.5rem, 1.55rem + 4vw, 4.5rem);
	--ce-h1: clamp(2.15rem, 1.5rem + 2.9vw, 3.5rem);
	--ce-h2: clamp(1.8rem, 1.35rem + 2vw, 2.75rem);
	--ce-h3: clamp(1.3rem, 1.12rem + 0.9vw, 1.7rem);
	--ce-h4: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem);
	--ce-lead: clamp(1.06rem, 1rem + 0.4vw, 1.3rem);

	/* Rytm */
	--ce-s1: 0.5rem;
	--ce-s2: 0.875rem;
	--ce-s3: 1.25rem;
	--ce-s4: 1.75rem;
	--ce-s5: 2.5rem;
	--ce-s6: 3.5rem;
	--ce-s7: 5rem;
	--ce-s8: 7rem;

	--ce-radius: 4px;
	--ce-radius-lg: 8px;
	--ce-shadow: 0 1px 2px rgba(43, 41, 38, 0.04), 0 8px 24px -12px rgba(43, 41, 38, 0.12);
	--ce-shadow-lift: 0 2px 4px rgba(43, 41, 38, 0.05), 0 18px 40px -18px rgba(43, 41, 38, 0.22);
	--ce-ease: ease-in-out;
}

/* --------------------------------------------------------------------------
   Themify Ultras egna temavariabler
   --------------------------------------------------------------------------
   Temat styr mycket av sin egen kromning genom :root-variabler – bland annat
   aktivt menyval, formulärramar och rundningar. Standardaccenten är knallröd
   (#ed1e24), vilket krockar med paletten och underkänns på kontrast. Genom att
   peka om variablerna här träffar vi allt temat färgar, i stället för att jaga
   enskilda selektorer. Detta block laddas efter temats egna och vinner därför.
   -------------------------------------------------------------------------- */

:root {
	--theme_accent: #96552f;                  /* = --ce-accent-dark */
	--theme_accent_hover: #7d4526;            /* = --ce-accent-darker */
	--theme_accent_semi: rgba(150, 85, 47, 0.8);
	--theme_accent_alt: #4c4944;              /* = --ce-charcoal-soft */
	--theme_heading_color: #2b2926;           /* = --ce-ink */

	--theme_rounded: 8px;
	--theme_rounded_sm: 4px;
	--theme_input_rounded: 4px;
	--theme_btn_rounded: 4px;

	--theme_input_border: #d2c8ba;            /* = --ce-line-strong */
	--theme_input_bg: #ffffff;
	--theme_input_color: #2b2926;
}

/* --------------------------------------------------------------------------
   Bas
   -------------------------------------------------------------------------- */

body {
	font-family: var(--ce-font-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ce-body);
	background-color: var(--ce-ground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* 100vw i .ce-full-bleed räknar in rullisten; clip kapar de sista pixlarna
	   utan att skapa en egen scroll-container (till skillnad från hidden). */
	overflow-x: clip;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	font-family: var(--ce-font-head);
	color: var(--ce-ink);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -0.005em;
	margin: 0 0 var(--ce-s3);
	text-wrap: balance;
}

body h1 { font-size: var(--ce-h1); }
body h2 { font-size: var(--ce-h2); }
body h3 { font-size: var(--ce-h3); }
body h4 { font-size: var(--ce-h4); font-family: var(--ce-font-body); font-weight: 600; letter-spacing: 0; }

body p {
	margin: 0 0 var(--ce-s3);
	text-wrap: pretty;
}

body p:last-child,
body ul:last-child,
body ol:last-child {
	margin-bottom: 0;
}

body a {
	color: var(--ce-accent-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.18s var(--ce-ease);
}

body a:hover {
	color: var(--ce-accent-darker);
}

/* Themify ritar egna fokusringar bort – lägg tillbaka en synlig */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible {
	outline: 2px solid var(--ce-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Sektioner (rader)
   -------------------------------------------------------------------------- */

.ce-section {
	padding-top: var(--ce-s7);
	padding-bottom: var(--ce-s7);
}

.ce-section--tight {
	padding-top: var(--ce-s5);
	padding-bottom: var(--ce-s5);
}

.ce-section--roomy {
	padding-top: var(--ce-s8);
	padding-bottom: var(--ce-s8);
}

.ce-section--cream { background-color: var(--ce-cream); }
.ce-section--sand { background-color: var(--ce-sand); }
.ce-section--white { background-color: var(--ce-white); }

.ce-section--dark {
	background-color: var(--ce-charcoal);
	color: var(--ce-on-dark-muted);
}

.ce-section--dark h1,
.ce-section--dark h2,
.ce-section--dark h3,
.ce-section--dark h4 {
	color: var(--ce-on-dark);
}

.ce-section--dark p,
.ce-section--dark li {
	color: var(--ce-on-dark-muted);
}

/* Hårfin avgränsare mellan två sektioner med samma bakgrund */
.ce-section--hairline {
	border-top: 1px solid var(--ce-line);
}

/* --------------------------------------------------------------------------
   Typografiska hjälpklasser
   -------------------------------------------------------------------------- */

/* Liten versal etikett ovanför en rubrik */
.ce-eyebrow p,
.ce-eyebrow {
	font-family: var(--ce-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ce-accent-dark);
	margin-bottom: var(--ce-s2);
}

.ce-section--dark .ce-eyebrow p,
.ce-section--dark.ce-eyebrow {
	color: var(--ce-sand);
}

/* Stor display-rubrik för hero */
.ce-display h1,
.ce-display h2 {
	font-size: var(--ce-display);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

/* Ingress */
.ce-lead p,
.ce-lead {
	font-size: var(--ce-lead);
	line-height: 1.62;
	color: var(--ce-body);
}

.ce-section--dark .ce-lead p {
	color: var(--ce-on-dark);
}

.ce-center,
.ce-center p,
.ce-center h1,
.ce-center h2,
.ce-center h3 {
	text-align: center;
}

.ce-measure {
	max-width: 62ch;
	margin-inline: auto;
}

/* Kort dekorativ linje – används under sektionsrubriker */
.ce-ruled::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background-color: var(--ce-accent);
	margin-top: var(--ce-s3);
}

.ce-ruled.ce-center::after {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Knappar
   -------------------------------------------------------------------------- */

/* Themify renderar knappmodulen som .module-buttons a.builder_button och sätter
   stilvarianten (solid/outline) som klass på modulen. Vi stylar den utdatan direkt,
   så att varje knapp som läggs in i Builder får rätt utseende automatiskt. */

body .module-buttons .builder_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--ce-font-body);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 1.05em 2.1em;
	border-radius: var(--ce-radius);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.2s var(--ce-ease), color 0.2s var(--ce-ease),
		border-color 0.2s var(--ce-ease), transform 0.2s var(--ce-ease),
		box-shadow 0.2s var(--ce-ease);
}

/* Primär – fylld accent */
body .module-buttons.solid .builder_button.tb_default_color {
	background-color: var(--ce-accent-dark);
	border-color: var(--ce-accent-dark);
	color: var(--ce-white);
}

body .module-buttons.solid .builder_button.tb_default_color:hover {
	background-color: var(--ce-accent-darker);
	border-color: var(--ce-accent-darker);
	color: var(--ce-white);
	transform: translateY(-1px);
	box-shadow: var(--ce-shadow);
}

/* Sekundär – kontur */
body .module-buttons.outline .builder_button.tb_default_color {
	background-color: transparent;
	color: var(--ce-ink);
	border-color: var(--ce-line-strong);
}

body .module-buttons.outline .builder_button.tb_default_color:hover {
	border-color: var(--ce-ink);
	color: var(--ce-ink);
	background-color: var(--ce-white);
	transform: translateY(-1px);
}

/* På mörk botten vänds konturknappen */
.ce-section--dark .module-buttons.outline .builder_button.tb_default_color,
.ce-hero .module-buttons.outline .builder_button.tb_default_color {
	color: var(--ce-on-dark);
	border-color: rgba(244, 240, 234, 0.4);
}

.ce-section--dark .module-buttons.outline .builder_button.tb_default_color:hover,
.ce-hero .module-buttons.outline .builder_button.tb_default_color:hover {
	background-color: rgba(244, 240, 234, 0.12);
	border-color: var(--ce-on-dark);
	color: var(--ce-white);
}

/* Andra knappen i hero ska läsas som sekundär även om modulen är "solid" */
.ce-hero-actions .module-buttons-item:nth-child(2) .builder_button.tb_default_color {
	background-color: transparent;
	border-color: rgba(244, 240, 234, 0.45);
	color: var(--ce-white);
}

.ce-hero-actions .module-buttons-item:nth-child(2) .builder_button.tb_default_color:hover {
	background-color: rgba(244, 240, 234, 0.14);
	border-color: var(--ce-white);
}

/* --------------------------------------------------------------------------
   Kort
   -------------------------------------------------------------------------- */

.ce-card {
	background-color: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius-lg);
	padding: var(--ce-s5);
	height: 100%;
	/* Kort som Builder renderar ärver border-box via Themifys .module, men de
	   kort våra egna shortcodes bygger (.ce-tjanst, .ce-post) gör inte det. Utan
	   detta räknas padding + ram ovanpå height:100% och kortet blir ~58px högre
	   än sin egen rutnätsrad – vilket syns som dött utrymme nedtill i kortet. */
	box-sizing: border-box;
	transition: all .4s;
}

.ce-card--hover:hover {
	box-shadow: var(--ce-shadow-lift);
	border-color: var(--ce-line-strong);
}

.ce-card h3 {
	margin-bottom: var(--ce-s2);
}

/* Kort med en liten sifferbadge, t.ex. "så går det till" */
.ce-step {
	position: relative;
	padding-top: var(--ce-s2);
}

/* Stegsiffran är dekorativ (stegets rubrik bär betydelsen och den är aria-hidden),
   men på --ce-sand mot gräddvit hamnade den på 1.13:1 och syntes knappt alls.
   Den här tonen ligger på ~2.6:1 – tydligt läsbar men underordnad rubriken. */
.ce-step .ce-step-num {
	font-family: var(--ce-font-head);
	font-size: 2.75rem;
	line-height: 1;
	color: #a3917c;
	display: block;
	margin-bottom: var(--ce-s2);
}

/* --------------------------------------------------------------------------
   Punktlistor med bock – används för tjänsternas innehåll
   -------------------------------------------------------------------------- */

.ce-check-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ce-check-list li {
	position: relative;
	padding-left: 1.85em;
	margin-bottom: 0.7em;
	line-height: 1.55;
}

.ce-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.72em;
	height: 0.4em;
	border-left: 2px solid var(--ce-accent);
	border-bottom: 2px solid var(--ce-accent);
	transform: rotate(-45deg);
}

.ce-check-list li:last-child {
	margin-bottom: 0;
}

.ce-section--dark .ce-check-list li::before {
	border-color: var(--ce-sand);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Full-bleed: Themifys "fullwidth" rad ligger ändå kvar i sidans container,
   så vi bryter ut till hela viewportbredden här. */
.ce-full-bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

/* ...men innehållet ska fortfarande följa sidans textbredd */
.ce-full-bleed > .row_inner {
	width: 100%;
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: var(--ce-s3);
	box-sizing: border-box;
}

.ce-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(72vh, 660px);
	padding: var(--ce-s7) 0;
	background-color: var(--ce-charcoal);
	background-size: cover;
	background-position: center 60%;
	background-repeat: no-repeat;
}

/* Mörk toning så att texten alltid har kontrast mot fotot */
.ce-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		100deg,
		rgba(28, 26, 24, 0.86) 0%,
		rgba(28, 26, 24, 0.66) 42%,
		rgba(28, 26, 24, 0.22) 100%
	);
}

.ce-hero > .row_inner {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Bakgrundskarusell i hero
   --------------------------------------------------------------------------
   Themify lägger slidesen i en .tb_backstretch med negativt z-index, så
   gradienten i .ce-hero::before ligger kvar ovanpå och rubriken behåller sin
   kontrast oavsett vilken bild som visas.

   Navigeringen döljs helt. Det är en bakgrund, inte ett galleri – och Themifys
   egen slider-JS mappar dessutom prickarna fel (bildlistan byggs baklänges men
   prickarna markeras framlänges), så en synlig prick skulle peka på fel bild.
   -------------------------------------------------------------------------- */

.ce-hero .tb_slider,
.ce-hero .row-slider-nav,
.ce-hero .row-slider-slides {
	display: none;
}

/* Karusellen är dekorativ – stå still för den som bett om mindre rörelse */
/* @media (prefers-reduced-motion: reduce) {
	.ce-hero .tb_backstretch img + img {
		display: none !important;
	}
} */

.ce-hero-content {
	max-width: 40rem;
}

.ce-hero-content h1 {
	color: var(--ce-white);
	margin-bottom: var(--ce-s3);
	max-width: 15ch;
}

.ce-hero-content .ce-eyebrow {
	color: var(--ce-sand);
}

.ce-hero-content .ce-lead {
	color: rgba(244, 240, 234, 0.9);
	max-width: 46ch;
}

.ce-hero-actions {
	margin-top: var(--ce-s4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-s2);
}

/* --------------------------------------------------------------------------
   Builderns rutnät – radavstånd när kolumner staplas
   --------------------------------------------------------------------------
   Themify Builder 8 lägger ut varje rad med CSS Grid på .row_inner och sätter
   `gap: var(--rowg,0) var(--colg)`. Kolumnavståndet (--colg) är 3.2%, men
   --rowg saknar värde och faller tillbaka på 0. Så länge kolumnerna ligger
   bredvid varandra syns det inte – men så fort rutnätet går ner i färre
   kolumner (Themify byter till en staplad --area vid 768px och 600px) hamnar
   korten kant i kant: ramarna möts och tre kort läses som ett enda block.

   Vi sätter därför Themifys egen --rowg i stället för att skriva över gap.
   row-gap gäller bara *mellan* rader i rutnätet, så regeln är verkningslös på
   desktop där raden är en enda rutnätsrad, och slår in först när något faktiskt
   staplas eller radbryts. Det gör den säker att lägga på alla bredder.
   -------------------------------------------------------------------------- */

.themify_builder_content .row_inner {
	--rowg: var(--ce-s4);
}

/* Sidfotens nedersta rad är tre korta textrader (copyright, org.nr, byline) –
   där blir 28px för luftigt när de staplas. */
.ce-footer-bottom > .row_inner {
	--rowg: var(--ce-s1);
}

/* --------------------------------------------------------------------------
   Sektionsmönster
   -------------------------------------------------------------------------- */

/* Kortrader: låt korten fylla hela radhöjden */
.ce-grid-cards .module_column {
	display: flex;
}

.ce-grid-cards .module-text {
	width: 100%;
}

/* "Så går det till" – rubrikraden ska sitta ihop med stegen */
.ce-steps-head {
	padding-bottom: 0;
}

.ce-steps {
	padding-top: var(--ce-s4);
}

/* Fyrstegsraden på startsidan saknar mobillayout i Builder-datan: Themify
   genererar en 2x2-uppställning vid 768px men ingen regel vid sin mobilbrytpunkt
   (600px), så de fyra stegen satt kvar som ett trångt 2x2-rutnät med ~170px
   breda kolumner på telefon – rubrikerna bröts mitt itu. Vi pekar om raden till
   Themifys egen färdiga mall för fyra staplade kolumner i stället för att
   uppfinna ett eget rutnät, så att raden fortfarande beter sig som Builderns.
   :has() begränsar regeln till rader som verkligen har fyra kolumner, så
   .ce-steps med tre kolumner (Kontakta oss) inte får en tom fjärde rad. */
@media (max-width: 600px) {
	.ce-steps > .row_inner:has(> .module_column:nth-child(4)) {
		--area: var(--aream4_auto);
	}
}

/* Delad sektion: bild bredvid text */
.ce-split .module_column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ce-rounded-img img {
	border-radius: var(--ce-radius-lg);
	display: block;
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
}

.ce-btn-inline {
	margin-top: var(--ce-s3);
}

/* Centrerad knapp under en centrerad rubrik */
.ce-center-btn {
	margin-top: var(--ce-s5);
	text-align: center;
}

.ce-tjanster-wrap {
	margin-top: var(--ce-s5);
}

.ce-cta .ce-lead {
	color: var(--ce-on-dark);
}

/* --------------------------------------------------------------------------
   Sidhuvud för undersidor
   -------------------------------------------------------------------------- */

.ce-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 340px;
	padding: var(--ce-s7) 0;
	background-size: cover;
	background-position: center 55%;
	background-repeat: no-repeat;
}

.ce-page-hero--plain {
	background-color: var(--ce-cream);
}

.ce-page-hero--photo {
	background-color: var(--ce-charcoal);
}

.ce-page-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		100deg,
		rgba(28, 26, 24, 0.84) 0%,
		rgba(28, 26, 24, 0.6) 55%,
		rgba(28, 26, 24, 0.3) 100%
	);
}

.ce-page-hero > .row_inner {
	position: relative;
	z-index: 1;
}

.ce-page-hero-content {
	max-width: 44rem;
}

.ce-page-hero--photo .ce-page-hero-content h1 {
	color: var(--ce-white);
}

.ce-page-hero--photo .ce-page-hero-content .ce-eyebrow {
	color: var(--ce-sand);
}

.ce-page-hero--photo .ce-page-hero-content .ce-lead {
	color: rgba(244, 240, 234, 0.92);
	max-width: 48ch;
}

/* --------------------------------------------------------------------------
   Innehållsblock
   -------------------------------------------------------------------------- */

/* Inramad notis */
.ce-note {
	background-color: var(--ce-accent-soft);
	border-left: 3px solid var(--ce-accent);
	border-radius: 0 var(--ce-radius-lg) var(--ce-radius-lg) 0;
	padding: var(--ce-s4) var(--ce-s5);
}

.ce-note h3 {
	margin-bottom: var(--ce-s2);
}

.ce-note p:last-child {
	margin-bottom: 0;
}

/* Kompetens-etiketter */
.ce-pills-wrap {
	margin-top: var(--ce-s4);
}

.ce-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ce-s2);
	justify-content: center;
}

.ce-pills span {
	background-color: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: 999px;
	padding: 0.6em 1.4em;
	font-size: 0.94rem;
	font-weight: 500;
	color: var(--ce-ink);
}

/* Affärsidé / vision på mörk botten */
.ce-statement blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.ce-statement blockquote p {
	font-family: var(--ce-font-head);
	font-size: var(--ce-h3);
	line-height: 1.4;
	font-style: italic;
	color: var(--ce-on-dark);
}

/* Delägarkort */
/* Porträtten är olika hårt beskurna närbilder. En kvadratisk ram med centrerad
   beskärning håller båda ansiktena hela – 4:3 kapade det ena. */
.ce-person-photo {
	aspect-ratio: 1 / 1;
	max-width: 260px;
	border-radius: var(--ce-radius-lg);
	background-color: var(--ce-sand);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--ce-s3);
	overflow: hidden;
}

/* På telefon är kortets innehållsyta bara ~280px, så 260px-taket lämnar ett
   tomrum på ~20px i högerkant medan namn och e-post går ut i full bredd – det
   läser som feljusterat snarare än som en medveten tumnagel. Under Themifys
   mobilbrytpunkt släpper vi därför taket så att bilden linjerar med texten.
   På surfplatta och uppåt är kortet så mycket bredare att 260px åter läser
   som ett avsiktligt porträttformat, och taket får stå kvar. */
@media (max-width: 600px) {
	.ce-person-photo {
		max-width: none;
	}
}

.ce-person-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.ce-todo-photo span {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ce-muted);
}

.ce-person-role {
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ce-accent-dark);
	margin-bottom: var(--ce-s2);
}

.ce-checks-block {
	margin-top: var(--ce-s4);
}

.ce-draft-notice {
	background-color: #fdf6e6;
	border: 1px dashed #d9c48a;
	border-radius: var(--ce-radius);
	padding: var(--ce-s2) var(--ce-s3);
	font-size: 0.92rem;
	margin-top: var(--ce-s4);
}

/* I ett knappar ska den andra läsas som sekundär, även när modulen är "solid" */
.ce-btn-pair .module-buttons-item {
	display: inline-flex;
}

.ce-btn-pair .module-buttons-item:nth-child(2) .builder_button.tb_default_color {
	background-color: transparent;
	color: var(--ce-ink);
	border-color: var(--ce-line-strong);
}

.ce-btn-pair .module-buttons-item:nth-child(2) .builder_button.tb_default_color:hover {
	background-color: var(--ce-white);
	border-color: var(--ce-ink);
	color: var(--ce-ink);
}

.ce-section--dark .ce-btn-pair .module-buttons-item:nth-child(2) .builder_button.tb_default_color {
	color: var(--ce-on-dark);
	border-color: rgba(244, 240, 234, 0.4);
}

.ce-section--dark .ce-btn-pair .module-buttons-item:nth-child(2) .builder_button.tb_default_color:hover {
	background-color: rgba(244, 240, 234, 0.12);
	border-color: var(--ce-on-dark);
	color: var(--ce-white);
}

.ce-center-btn .module-buttons-item {
	justify-content: center;
}

.ce-center-btn.buttons-horizontal,
.ce-center-btn .module-buttons {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Tjänstkort — utdata från [casa_tjanster]
   -------------------------------------------------------------------------- */

.ce-tjanster {
	display: grid;
	gap: var(--ce-s4);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ce-tjanster--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-tjanster--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ce-tjanster--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ce-tjanst {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.ce-tjanst-media {
	margin: 0;
/* 	aspect-ratio: 16 / 10; */
	overflow: hidden;
	background-color: var(--ce-sand);
}

.ce-tjanst-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: all 0.5s var(--ce-ease);
}

.ce-tjanst:hover .ce-tjanst-media img {
	transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Tjänstkortet
   --------------------------------------------------------------------------
   Varje paket bär ett emblem: en tunn ring i nivåns färg med husmärket i, och
   under det ett nivåtecken mellan två korta streck — planta, nyckel, stjärna,
   diamant. Ordmärket är medvetet uteslutet ur ringen; det står redan i sidhuvudet
   och skulle bli fyra upprepningar i samma rad. Nivåfärgen går sedan vidare
   genom rubriken och bockarna, och ingenting annat på kortet är färgat.

   Allt nedan är scopat till .ce-tjanst — blogglistan (.ce-post) återanvänder
   klasserna .ce-tjanst-title/-body/-desc och ska inte följa med hit.

   Varje kort sätter sina två nivåvariabler en gång; resten av reglerna läser
   bara variablerna, så en femte nivå bara behöver ett block till här. */
.ce-tjanst {
	--ce-tier: var(--ce-niva-1);
	--ce-tier-text: var(--ce-niva-1-text);

	--ce-emblem: 128px;
}

.ce-tjanst--niva-2 {
	--ce-tier: var(--ce-niva-2);
	--ce-tier-text: var(--ce-niva-2-text);
}

.ce-tjanst--niva-3 {
	--ce-tier: var(--ce-niva-3);
	--ce-tier-text: var(--ce-niva-3-text);
}

.ce-tjanst--niva-4 {
	--ce-tier: var(--ce-niva-4);
	--ce-tier-text: var(--ce-niva-4-text);
}

/* Fyra kort i bredd är smala nog att "PLATINUMPAKET" med full spärrning skulle
   brytas till två rader och knuffa just det kortets brödtext ur linje med de
   andra tre. Rubrik och sidluft går därför ned ett snäpp. */
.ce-tjanster--cols-4 .ce-tjanst .ce-tjanst-body {
	padding-inline: var(--ce-s3);
}

.ce-tjanster--cols-4 .ce-tjanst .ce-tjanst-title {
	font-size: 1.02rem;
	letter-spacing: 0.12em;
	padding-left: 0.12em;
}

.ce-tjanst .ce-tjanst-ikon {
	display: flex;
	justify-content: center;
	padding: var(--ce-s5) var(--ce-s4) var(--ce-s1);
	color: var(--ce-tier);
}

/* Både den uppladdade ikonen (img) och reservikonen (inline svg) sätts i samma
   ruta, så korten linjerar oavsett vilken bild kunden väljer. */
.ce-tjanst .ce-tjanst-ikon svg,
.ce-tjanst .ce-tjanst-ikon-img {
	display: block;
	width: var(--ce-emblem);
	height: var(--ce-emblem);
	max-width: 100%;
	object-fit: contain;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kortets enda rörelse. Emblemet är en cirkel, så det finns ingen kant att
   förhålla sig till — det växer från sin egen mitt. */
.ce-tjanst:hover .ce-tjanst-ikon svg,
.ce-tjanst:hover .ce-tjanst-ikon-img {
	transform: scale(1.05);
}

.ce-tjanst-body {
	padding: 15px;
}

.ce-tjanst .ce-tjanst-body {
	padding: var(--ce-s4) var(--ce-s4) var(--ce-s5);
	display: flex;
	flex-direction: column;
	gap: var(--ce-s3);
	flex: 1;
	text-align: center;
}

.single-post #content {
	padding-top: 30px;
  	padding-bottom: 30px;
}

/* Versal rubrik med luft mellan bokstäverna — samma grepp som ordmärket
   CASA ELLWE, och därför nivåfärgen får bära rubriken utan att kortet blir
   ett eget varumärke. Storleken går ned ett steg eftersom versaler väger mer. */
.ce-tjanst .ce-tjanst-title {
	margin: 0;
	font-size: var(--ce-h4);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	/* Spärrningen hänger kvar efter sista bokstaven, så en centrerad rad hamnar
	   en halv spärrning för långt till vänster. Paddingen väger upp det. */
	padding-left: 0.16em;
	line-height: 1.3;
	color: var(--ce-tier-text);
}

.ce-tjanst .ce-tjanst-desc p {
	margin: 0;
	font-size: 1rem;
	color: var(--ce-muted);
	max-width: 38ch;
	margin-inline: auto;
	text-wrap: pretty;
}

/* Punkterna står kvar vänsterställda – centrerade bocklistor får ojämna kanter
   och bockarna slutar bilda en kolumn. Blocket i sig centreras i stället, så
   den vänsterställda listan ser avsiktlig ut i ett centrerat kort. */
.ce-tjanst .ce-check-list {
	/* Listan följer direkt på beskrivningen i stället för att pressas ned mot
	   kortets underkant. Med fyra kort i bredd blir en bottenjusterad lista ett
	   olika stort hål under varje beskrivning – det tomrummet syns bättre än
	   ojämna underkanter, som kortets egen ram ändå ramar in. */
	padding-top: var(--ce-s4);
	font-size: 0.97rem;
	text-align: left;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.ce-tjanst .ce-check-list li::before {
	border-color: var(--ce-tier);
}

.ce-empty {
	color: var(--ce-muted);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Blogglista — utdata från [casa_aktuellt]
   -------------------------------------------------------------------------- */

.ce-poster {
	display: grid;
	gap: var(--ce-s4);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ce-post {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.ce-post .ce-tjanst-media {
	display: block;
}

.ce-post .ce-tjanst-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ce-ease);
}

.ce-post:hover .ce-tjanst-media img {
	transform: scale(1.03);
}

.ce-post-date {
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ce-muted);
	margin: 0;
}

.ce-post .ce-tjanst-title a {
	color: var(--ce-ink);
	text-decoration: none;
}

.ce-post .ce-tjanst-title a:hover {
	color: var(--ce-accent);
}

.ce-post-more {
	margin: auto 0 0;
	padding-top: var(--ce-s2);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.ce-post-more a {
	text-decoration: none;
}

.ce-post-more a::after {
	content: " →";
	transition: transform 0.2s var(--ce-ease);
	display: inline-block;
}

.ce-post-more a:hover::after {
	transform: translateX(3px);
}

/* Sidnavigering */
.ce-pagination {
	margin-top: var(--ce-s6);
}

.ce-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ce-s1);
	margin: 0;
	padding: 0;
}

.ce-pagination a,
.ce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding: 0.55em 0.85em;
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius);
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--ce-body);
	background-color: var(--ce-white);
}

.ce-pagination a:hover {
	border-color: var(--ce-ink);
	color: var(--ce-ink);
}

.ce-pagination .current {
	background-color: var(--ce-accent-dark);
	border-color: var(--ce-accent-dark);
	color: var(--ce-white);
}

@media (max-width: 900px) {
	.ce-poster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.ce-poster { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.ce-tjanster--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Fyra tjänstkort i bredd behöver mer luft än tre: under ~1080px blir kortet
   smalare än sin egen rubrik. Bryt till 2×2 redan där. */
@media (max-width: 1080px) {
	.ce-tjanster--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ce-tjanster,
	.ce-tjanster--cols-2,
	.ce-tjanster--cols-3,
	.ce-tjanster--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Ett kort i bredd tål ett större emblem, och rubriken får tillbaka sin
	   fulla spärrning eftersom bredden inte längre är knapp. */
	.ce-tjanster .ce-tjanst {
		--ce-emblem: 140px;
	}

	.ce-tjanster--cols-4 .ce-tjanst .ce-tjanst-body {
		padding-inline: var(--ce-s4);
	}

	.ce-tjanster--cols-4 .ce-tjanst .ce-tjanst-title {
		font-size: var(--ce-h4);
		letter-spacing: 0.16em;
		padding-left: 0.16em;
	}
}

/* --------------------------------------------------------------------------
   Formulär (builder-contact + Frontend Admin)
   -------------------------------------------------------------------------- */

body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="password"],
body input[type="search"],
body select,
body textarea {
	width: 100%;
	font-family: var(--ce-font-body);
	font-size: 1rem;
	color: var(--ce-ink);
	background-color: var(--ce-white);
	border: 1px solid var(--ce-line-strong);
	border-radius: var(--ce-radius);
	padding: 0.8em 1em;
	transition: border-color 0.18s var(--ce-ease), box-shadow 0.18s var(--ce-ease);
	box-shadow: none;
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body textarea:focus,
body select:focus {
	border-color: var(--ce-accent);
	box-shadow: 0 0 0 3px var(--ce-accent-soft);
	outline: none;
}

body textarea {
	min-height: 9rem;
	line-height: 1.6;
	resize: vertical;
}

body label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ce-ink);
	margin-bottom: 0.4em;
	letter-spacing: 0.01em;
}

body input[type="submit"],
body button[type="submit"] {
	font-family: var(--ce-font-body);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	background-color: var(--ce-accent-dark);
	color: var(--ce-white);
	border: 1px solid var(--ce-accent-dark);
	border-radius: var(--ce-radius);
	padding: 1.05em 2.1em;
	cursor: pointer;
	transition: background-color 0.2s var(--ce-ease), transform 0.2s var(--ce-ease);
}

body input[type="submit"]:hover,
body button[type="submit"]:hover {
	background-color: var(--ce-accent-darker);
	border-color: var(--ce-accent-darker);
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Administrationssidan (endast inloggade)
   -------------------------------------------------------------------------- */

.ce-admin-card {
	background-color: var(--ce-white);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius-lg);
	padding: var(--ce-s5);
	height: 100%;
}

.ce-admin-card h3 {
	margin-bottom: var(--ce-s4);
	padding-bottom: var(--ce-s2);
	border-bottom: 1px solid var(--ce-line);
}

.ce-admin-table-wrap {
	overflow-x: auto;
	margin-top: var(--ce-s3);
	border: 1px solid var(--ce-line);
	border-radius: var(--ce-radius-lg);
	background-color: var(--ce-white);
}

.ce-admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.ce-admin-table th,
.ce-admin-table td {
	text-align: left;
	padding: 0.85em 1.1em;
	border-bottom: 1px solid var(--ce-line);
}

.ce-admin-table th {
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ce-muted);
	background-color: var(--ce-ground);
}

.ce-admin-table tr:last-child td {
	border-bottom: 0;
}

.ce-status {
	display: inline-block;
	font-size: 0.8rem;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	background-color: var(--ce-sand);
	color: var(--ce-ink);
}

.ce-status--publish {
	background-color: #dfeadd;
	color: #33562f;
}

.ce-status--draft {
	background-color: #f3e6d2;
	color: #7a5a25;
}

/* Frontend Admin renderar egna fältrader – ge dem samma luft som övriga formulär */
.ce-admin-form .acf-field {
	margin-bottom: var(--ce-s3);
}

.ce-admin-form .acf-label label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ce-ink);
}

.ce-admin-form .description,
.ce-admin-form .acf-field p.description {
	font-size: 0.85rem;
	color: var(--ce-muted);
}

/* --------------------------------------------------------------------------
   Kontaktsida
   -------------------------------------------------------------------------- */

.ce-contact-block {
	margin-bottom: var(--ce-s4);
}

.ce-contact-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ce-muted);
	margin-bottom: var(--ce-s1);
}

.ce-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ce-contact-list li {
	margin-bottom: var(--ce-s2);
}

.ce-contact-list a {
	text-decoration: none;
	font-weight: 500;
	word-break: break-word;
}

.ce-contact-note {
	display: block;
	font-size: 0.85rem;
	color: var(--ce-muted);
}

.ce-form-intro {
	margin-bottom: var(--ce-s4);
}

/* builder-contact renderar en enkel <ul>-baserad form; ge den luft och rutnät */
.ce-contact-form .module-contact ul,
.ce-contact-form .module-contact ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ce-contact-form .module-contact li {
	margin-bottom: var(--ce-s3);
}

.ce-contact-form label {
	font-size: 0.9rem;
}

.ce-contact-form .gdpr label,
.ce-contact-form .contact-gdpr label {
	display: inline;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--ce-body);
}

.ce-contact-form input[type="checkbox"] {
	width: auto;
	margin-right: 0.5em;
	accent-color: var(--ce-accent);
}

/* Samtyckesraden är en <label> med kryssruta och text som syskon i inline-flödet.
   Som block betyder det att andra raden bryter tillbaka in under kryssrutan, och
   på smal skärm hamnar den obligatoriska asterisken ensam på en tredje rad.
   Hängande indrag löser båda: första raden dras ut till kryssrutan och följande
   rader linjerar med texten. Flexbox vore fel verktyg här – asterisken är ett
   eget element och skulle då bli en egen flexcell längst ut i högerkant i
   stället för att följa sista ordet.

   OBS: selektorn hakar på pluginets egen .builder-contact, inte på
   .ce-contact-form. Den klassen finns inte i markupen (se anteckningen vid
   kontaktformulärets övriga regler ovan). */
.builder-contact .field-gdpr {
	display: block;
	/* 2.05em ≈ kryssrutans bredd + dess 0.5em högermarginal, så att de indragna
	   raderna hamnar i linje med textens början på första raden. */
	padding-left: 2.05em;
	text-indent: -2.05em;
}

/* --------------------------------------------------------------------------
   Sidhuvud
   -------------------------------------------------------------------------- */

#headerwrap {
	border-bottom: 1px solid var(--ce-line);
}

/* Frostat glas – men OBS: backdrop-filter (liksom filter, transform och
   contain) på #headerwrap självt gör elementet till "containing block" för
   position:fixed-barn. Themifys mobilmeny (#mobile-menu.sidemenu) ligger inuti
   headern och är position:fixed, så den skulle då förankras i headern i stället
   för i webbläsarfönstret: panelen fick headerns höjd (~97px) och följde med
   när sidan skjuts 300px åt vänster vid öppning – dvs. hamnade utanför skärmen.
   Effekten läggs därför på ett pseudoelement, som inte är förälder till något.
   Flytta den aldrig tillbaka till #headerwrap. */
#headerwrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(251, 249, 246, 0.92);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
}

/* Mobilt sidhuvud.
   Gränsen sätts av .mobile_menu_active, som Themify lägger på <body> under sin
   egen brytpunkt (themify_vars.menu_point, just nu 1100px). Genom att haka på
   klassen i stället för en egen media query följer reglerna automatiskt med om
   brytpunkten ändras i temainställningarna. */

/* Mindre logotyp – 78px är 112px minus 30%. height:auto behåller 8:5-formatet
   (→ ca 49px), display:block tar bort radavståndet under den inline-bilden. */
.mobile_menu_active #site-logo img {
	width: 78px;
	height: auto;
	display: block;
}

/* Themify hårdkodar .header-icons till top:27px, vilket bara centrerar ikonen i
   en header av temats egen standardhöjd. Vår header är högre, så hamburgaren
   hamnade för högt upp. top:50% centrerar mot den faktiska höjden – translateY
   (-50%) finns redan i temats regel. */
.mobile_menu_active .header-icons {
	top: 50%;
}

#header .site-logo a,
#header .site-title a {
	font-family: var(--ce-font-head);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ce-ink);
}

#main-nav a {
	font-family: var(--ce-font-body);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ce-body);
}

/* Themify färgar aktivt menyval med temats standardröda (#ed1e24), vilket både
   krockar med paletten och underkänns på kontrast. Skrivs över med tillräcklig
   specificitet – markeringen sköts av understrykningen nedan i stället. */
body #main-nav a:hover,
body #main-nav li.current_page_item > a,
body #main-nav li.current-menu-item > a,
body #main-nav li.current-menu-ancestor > a,
body #main-nav li.current_page_ancestor > a {
	color: var(--ce-ink);
}

/* Understruken aktiv sida – lugnare än Themifys standardfärgskifte */
#main-nav > li > a {
	position: relative;
	padding-bottom: 0.35em;
}

#main-nav > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--ce-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ce-ease);
}

#main-nav > li > a:hover::after,
#main-nav > li.current_page_item > a::after,
#main-nav > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* I mobilpanelen är menylänkarna block på hela panelbredden, så understrykningen
   ovan sträcker sig över hela raden och läses som en avdelare i stället för som
   en markering. Aktiv sida markeras där med färg (Themifys egen regel) i stället. */
.mobile_menu_active #main-nav > li > a::after {
	content: none;
}

/* --------------------------------------------------------------------------
   Sidfot
   -------------------------------------------------------------------------- */

/* Themify-inställningen footer_design = "none" gör att temat inte renderar något
   #footerwrap alls – sidfoten är enbart layout-delen (post 43). Färgen läggs
   därför på raderna själva, som spänner över hela bredden. */

.ce-footer-main,
.ce-footer-bottom {
	background-color: var(--ce-charcoal);
	color: var(--ce-on-dark-muted);
}

.ce-footer-main a,
.ce-footer-bottom a {
	color: var(--ce-on-dark);
	text-decoration: none;
}

.ce-footer-main a:hover,
.ce-footer-bottom a:hover {
	color: var(--ce-white);
	text-decoration: underline;
}

.ce-footer-main p,
.ce-footer-bottom p,
.ce-footer-main li {
	color: var(--ce-on-dark-muted);
}

.ce-footer-main {
	padding-top: var(--ce-s6);
	padding-bottom: var(--ce-s5);
}

.ce-footer-logo {
	width: 150px;
	height: auto;
	margin-bottom: var(--ce-s3);
}

.ce-footer-brand p {
	max-width: 30ch;
	font-size: 0.95rem;
	color: var(--ce-on-dark-muted);
}

.ce-footer-h {
	font-family: var(--ce-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ce-sand);
	margin-bottom: var(--ce-s3);
}

.ce-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
}

.ce-footer-list li {
	margin-bottom: 0.55em;
}

.ce-footer-bottom {
	padding-top: var(--ce-s3);
	padding-bottom: var(--ce-s3);
	border-top: 1px solid rgba(244, 240, 234, 0.14);
}

.ce-footer-base {
	font-size: 0.85rem;
	color: var(--ce-on-dark-muted);
}

/* --------------------------------------------------------------------------
   Platshållare – innehåll som kunden ska komplettera.
   Avsiktligt synlig men diskret, så att den är lätt att hitta och ta bort.
   -------------------------------------------------------------------------- */

.ce-todo {
	font-style: italic;
	opacity: 0.75;
}

.ce-todo::before {
	content: "⌛ ";
	font-style: normal;
}

@media (max-width: 768px) {
	.ce-footer-base span:last-child {
		margin-left: 0;
	}

	/* (Luften mellan staplade sidfotskolumner sköts numera av --rowg på
	   .row_inner, se "Builderns rutnät" ovan – en marginal här skulle läggas
	   ovanpå den och ge dubbelt avstånd.) */

	.ce-footer-base {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ce-s1);
	}
}

/* --------------------------------------------------------------------------
   Respekt för minskad rörelse
   -------------------------------------------------------------------------- */

/* @media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
} */

/* --------------------------------------------------------------------------
   Responsivt
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	:root {
		--ce-s7: 3.5rem;
		--ce-s8: 4.5rem;
	}

	body {
		font-size: 1rem;
	}

	/* .ce-tjanst och .ce-post är kant-i-kant-kort: de sätter själva padding:0 och
	   lägger luften i .ce-tjanst-body i stället, så att bild- och ikonbandet går
	   ända ut i kortkanten. Den här regeln har samma specificitet som deras egen
	   padding:0 men står senare i filen, så utan undantaget vann den och gav dem
	   tillbaka 28px ytterpadding under 768px – bilden slutade nå kanten och
	   texten fick dubbel indragning (28 + 28). */
	.ce-card:not(.ce-tjanst):not(.ce-post) {
		padding: var(--ce-s4);
	}

	.ce-btn a,
	a.ce-btn {
		width: 100%;
	}
}