/*
 * Östra Aros – stilar för temats block. Laddas både på webbplatsen och i editorn.
 * Färger och typsnitt kommer från theme.json (var(--wp--preset--…)).
 */

:root {
	--oa-gron: var(--wp--preset--color--gron, #60CD18);
	--oa-gron-hover: #56B915;
	--oa-morkgron: var(--wp--preset--color--morkgron, #00555C);
	--oa-morkgron-djup: var(--wp--preset--color--morkgron-djup, #003D42);
	--oa-ljusgra: var(--wp--preset--color--ljusgra, #F6F6F6);
	--oa-gra: var(--wp--preset--color--gra, #DCDDDC);
	--oa-svart: #000;
	--oa-vit: #fff;
	--oa-text: var(--wp--preset--color--text, #111511);
	--oa-dampad: var(--wp--preset--color--text-dampad, #4A524C);
	--oa-rubrik: var(--wp--preset--font-family--metropolis, Metropolis, "Arial Black", Arial, sans-serif);
	--oa-max: 1200px;
	--oa-gutter-l: max(20px, env(safe-area-inset-left, 0px));
	--oa-gutter-r: max(20px, env(safe-area-inset-right, 0px));
	--oa-radie: 6px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--oa-morkgron); outline-offset: 3px; }

/* Sektionsblocken ligger kant i kant, utan blockmellanrum. */
body .oa-hero, body .oa-loften, body .oa-sektion, body .oa-bildband,
body .oa-region, body .oa-offert, body .oa-ring {
	margin-block: 0;
}
.oa-hero, .oa-loften, .oa-sektion, .oa-bildband, .oa-region, .oa-offert, .oa-ring { position: relative; }

.oa-wrap {
	max-width: var(--oa-max);
	margin-inline: auto;
	padding-left: var(--oa-gutter-l);
	padding-right: var(--oa-gutter-r);
	box-sizing: border-box;
	width: 100%;
}
.oa-wrap-smal { max-width: calc(760px + 40px); }
.oa-wrap > * { margin-block: 0; }
.oa-wrap > * + * { margin-top: 1.25rem; }
.oa-wrap > .oa-sektion-topp + * { margin-top: 0; }

/* Text */
.oa-etikett, p.is-style-etikett {
	font-family: var(--oa-rubrik);
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--oa-morkgron);
	margin: 0;
}
.oa-ingress, p.is-style-ingress {
	font-family: var(--oa-rubrik);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--ingress, 1.2rem);
	line-height: 1.45;
}

/* Knappar */
.oa-knapp {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--oa-rubrik);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	padding: .95em 1.5em;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.oa-knapp-gron { background: var(--oa-gron); color: var(--oa-svart); }
.oa-knapp-gron:hover, .oa-knapp-gron:focus-visible { background: var(--oa-gron-hover); color: var(--oa-svart); }
.oa-knapp-kontur { border-color: currentColor; color: var(--oa-vit); background: transparent; }
.oa-knapp-kontur:hover, .oa-knapp-kontur:focus-visible { background: var(--oa-vit); color: var(--oa-svart); border-color: var(--oa-vit); }
.oa-knappar { display: flex; flex-wrap: wrap; gap: 12px; }

.wp-block-button.is-style-kontur .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 2px solid currentColor;
}
.wp-block-button.is-style-kontur .wp-block-button__link:hover { background: var(--oa-vit); color: var(--oa-svart); border-color: var(--oa-vit); }

.oa-bock {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--oa-gron);
	display: inline-grid;
	place-items: center;
}
.oa-bock svg { width: 12px; height: 12px; }

/* ---------- Sidhuvud ---------- */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.oa-sidhuvud {
	background: var(--oa-vit);
	border-bottom: 1px solid var(--oa-gra);
}
.oa-sidhuvud > .oa-sidhuvud-rad {
	max-width: var(--oa-max);
	margin-inline: auto;
	min-height: 78px;
	gap: 28px;
}
.oa-sidhuvud .wp-block-navigation {
	font-family: var(--oa-rubrik);
	font-weight: 700;
	font-size: .95rem;
	gap: 28px;
}
.oa-sidhuvud .wp-block-navigation a:hover {
	color: var(--oa-morkgron);
	text-decoration: underline;
	text-decoration-color: var(--oa-gron);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}
.oa-sidhuvud .wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--oa-gutter-r) 24px var(--oa-gutter-l); }
.oa-sidhuvud .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.3rem; }
.oa-sidhuvud .wp-block-button__link { padding: .8em 1.25em; }
.oa-sidhuvud .oa-kontakt { white-space: nowrap; }
@media (max-width: 960px) {
	.oa-sidhuvud .oa-dold-mobil { display: none; }
}
.oa-logo a, .oa-logo img { display: block; }

/* ---------- Hero ---------- */
.oa-hero {
	color: var(--oa-vit);
	background-color: var(--oa-morkgron-djup);
	background-size: cover;
	background-repeat: no-repeat;
}
.oa-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0,28,30,.78) 0%, rgba(0,28,30,.45) 45%, rgba(0,28,30,0) 75%),
		linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,0) 40%);
	pointer-events: none;
}
.oa-hero .oa-wrap { position: relative; padding-block: clamp(80px, 14vw, 170px) clamp(64px, 9vw, 110px); }
.oa-hero-innehall { max-width: 640px; display: grid; gap: 22px; }
.oa-hero-innehall > * { margin: 0; }
.oa-hero .oa-etikett { color: var(--oa-gron); }
.oa-hero h1 {
	font-size: var(--wp--preset--font-size--jatte, clamp(2.8rem, 7.5vw, 5.4rem));
	color: inherit;
	display: flex;
	align-items: flex-end;
	gap: .25em;
	flex-wrap: wrap;
	margin: 0;
}
.oa-bubbla { width: clamp(64px, 8vw, 92px); height: auto; margin-bottom: .1em; }
.oa-hero .oa-ingress { max-width: 520px; }
.oa-hero .oa-knappar { margin-top: 6px; }

/* ---------- Löften ---------- */
.oa-loften { background: var(--oa-morkgron); color: var(--oa-vit); }
.oa-loften-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 28px; }
.oa-lofte { display: flex; gap: 12px; align-items: flex-start; }
.oa-lofte .oa-bock { margin-top: 2px; }
.oa-lofte strong { font-family: var(--oa-rubrik); font-weight: 800; display: block; font-size: 1.05rem; }
.oa-lofte span:not(.oa-bock) { display: block; font-size: .92rem; opacity: .85; }
@media (max-width: 860px) { .oa-loften-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .oa-loften-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Sektion ---------- */
.oa-luft-stor { padding-block: clamp(72px, 10vw, 120px); }
.oa-luft-liten { padding-block: clamp(40px, 6vw, 64px); }
.oa-luft-ingen { padding-block: 0; }
.oa-bg-vit { background: var(--oa-vit); }
.oa-bg-ljusgra { background: var(--oa-ljusgra); }
.oa-bg-gron { background: var(--oa-gron); color: var(--oa-svart); }
.oa-bg-gron .oa-etikett { color: var(--oa-svart); }
.oa-bg-gron .oa-knapp-gron, .oa-bg-gron .wp-block-button__link { background: var(--oa-svart); color: var(--oa-vit); }
.oa-bg-morkgron { background: var(--oa-morkgron); color: var(--oa-vit); }
.oa-bg-morkgron .oa-etikett { color: var(--oa-gron); }
.oa-bg-morkgron .oa-sektion-topp p:not(.oa-etikett) { color: inherit; opacity: .85; }
.oa-bg-morkgron a:not(.oa-knapp):not(.wp-block-button__link) { color: var(--oa-gron); }

.oa-sektion-topp { display: grid; gap: 14px; max-width: 720px; margin-bottom: 48px; }
.oa-sektion-topp > * { margin: 0; }
.oa-sektion-topp h2, .oa-sektion-topp h3.oa-rubrik { font-size: var(--wp--preset--font-size--rubrik, clamp(2rem, 4.2vw, 3rem)); }
.oa-sektion-topp p:not(.oa-etikett) { color: var(--oa-dampad); }
.oa-bg-gron .oa-sektion-topp p:not(.oa-etikett) { color: inherit; }

/* ---------- Tjänster ---------- */
.oa-tjanster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.oa-tjanster.oa-kol-3 { grid-template-columns: repeat(3, 1fr); }
.oa-tjanster.oa-kol-2 { grid-template-columns: repeat(2, 1fr); }
.oa-tjanst {
	background: var(--oa-ljusgra);
	color: var(--oa-text);
	border-radius: var(--oa-radie);
	padding: 28px 24px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}
.oa-bg-ljusgra .oa-tjanst { background: var(--oa-vit); }
.oa-tjanst > * { margin: 0; }
.oa-tjanst-ikon { width: 68px; height: 68px; }
.oa-tjanst h3 { font-size: 1.3rem; }
.oa-tjanst p { color: var(--oa-dampad); font-size: .97rem; }
.oa-tjanst-lista { margin-top: auto; padding-top: 6px; }
.oa-tjanst ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .93rem; }
.oa-tjanst li { padding-left: 18px; position: relative; margin: 0; }
.oa-tjanst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--oa-gron);
}
@media (max-width: 1020px) { .oa-tjanster, .oa-tjanster.oa-kol-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .oa-tjanster, .oa-tjanster.oa-kol-3, .oa-tjanster.oa-kol-2 { grid-template-columns: 1fr; } }

/* ---------- Bildband ---------- */
.oa-bildband { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.oa-bildkort {
	position: relative;
	min-height: 440px;
	display: flex;
	align-items: flex-end;
	color: var(--oa-vit);
	background-color: var(--oa-morkgron-djup);
	background-size: cover;
	overflow: hidden;
	margin: 0;
}
.oa-bildkort::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,20,22,.82) 0%, rgba(0,20,22,.3) 55%, rgba(0,20,22,.05) 100%);
	pointer-events: none;
}
.oa-bildkort-text { position: relative; padding: 40px max(32px, var(--oa-gutter-l)); display: grid; gap: 12px; max-width: 560px; }
.oa-bildkort-text > * { margin: 0; }
.oa-bildkort-text h2 { font-size: var(--wp--preset--font-size--stor, clamp(1.9rem, 3.4vw, 2.6rem)); color: inherit; }
.oa-bildkort .oa-etikett { color: var(--oa-gron); }
.oa-bildkort .oa-knapp { justify-self: start; margin-top: 8px; }
.oa-bildkort-bubbla { position: absolute; top: 32px; right: 32px; width: 72px; height: auto; z-index: 1; }
@media (max-width: 860px) { .oa-bildkort { min-height: 380px; } }

/* ---------- Steg ---------- */
.oa-steg-lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: oa-steg;
}
.oa-steg { display: grid; gap: 12px; align-content: start; counter-increment: oa-steg; margin: 0; }
.oa-steg > * { margin: 0; }
.oa-steg-nr {
	font-family: var(--oa-rubrik);
	font-weight: 800;
	font-size: 1rem;
	color: var(--oa-morkgron);
	border-bottom: 3px solid var(--oa-gron);
	justify-self: start;
	padding-bottom: 2px;
}
.oa-steg-nr::before { content: counter(oa-steg, decimal-leading-zero); }
.oa-steg-ikon { width: 60px; height: 60px; }
.oa-steg h3 { font-size: 1.3rem; }
.oa-steg p { color: var(--oa-dampad); font-size: .97rem; }
@media (max-width: 960px) { .oa-steg-lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .oa-steg-lista { grid-template-columns: 1fr; } }

/* ---------- Region ---------- */
.oa-region {
	color: var(--oa-vit);
	background-color: #1d3a1a;
	background-size: cover;
}
.oa-region::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,40,30,.85) 0%, rgba(0,40,30,.55) 50%, rgba(0,40,30,.1) 100%);
	pointer-events: none;
}
.oa-region .oa-wrap { position: relative; padding-block: clamp(80px, 11vw, 140px); display: grid; gap: 20px; }
.oa-region .oa-wrap > * { margin: 0; }
.oa-region .oa-etikett { color: var(--oa-gron); }
.oa-region h2 { font-size: clamp(2.4rem, 5.5vw, 4rem); max-width: 620px; color: inherit; }
.oa-region p { max-width: 520px; }
.oa-orter { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; list-style: none; padding: 0; margin: 6px 0 0; }
.oa-orter li {
	font-family: var(--oa-rubrik);
	font-weight: 700;
	font-size: .88rem;
	padding: .5em .95em;
	border: 1.5px solid rgba(255,255,255,.55);
	border-radius: 999px;
}

/* ---------- Tips ---------- */
.oa-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--oa-gra); }
.oa-tips {
	padding: 28px 28px 30px 0;
	border-bottom: 1px solid var(--oa-gra);
	display: grid;
	gap: 8px;
	align-content: start;
	margin: 0;
}
.oa-tips > * { margin: 0; }
.oa-tips:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--oa-gra); }
.oa-tips h3 { font-size: 1.3rem; }
.oa-tips-etikett {
	font-family: var(--oa-rubrik);
	font-weight: 800;
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--oa-morkgron);
	background: rgba(96,205,24,.16);
	justify-self: start;
	padding: .4em .7em;
	border-radius: 3px;
}
.oa-tips p { color: var(--oa-dampad); font-size: .96rem; }
@media (max-width: 900px) {
	.oa-tips-grid { grid-template-columns: 1fr 1fr; }
	.oa-tips, .oa-tips:not(:nth-child(3n+1)) { padding: 24px 20px 26px 0; border-left: 0; }
	.oa-tips:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--oa-gra); }
}
@media (max-width: 560px) {
	.oa-tips-grid { grid-template-columns: 1fr; }
	.oa-tips, .oa-tips:nth-child(2n), .oa-tips:not(:nth-child(3n+1)) { padding: 22px 0; border-left: 0; }
}

/* ---------- Offert ---------- */
.oa-offert { background: var(--oa-gron); color: var(--oa-svart); padding-block: clamp(72px, 10vw, 120px); }
.oa-offert > .oa-wrap {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: start;
}
.oa-offert > .oa-wrap > * { margin: 0; }
.oa-offert-intro { display: grid; gap: 18px; position: sticky; top: 110px; }
.oa-offert-intro > * { margin: 0; }
.oa-offert-intro h2 { font-size: var(--wp--preset--font-size--rubrik, clamp(2rem, 4.2vw, 3rem)); }
.oa-offert .oa-etikett { color: var(--oa-svart); }
.oa-offert-intro ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-family: var(--oa-rubrik); font-weight: 700; }
.oa-offert-intro li { display: flex; gap: 10px; align-items: center; }
.oa-offert-intro .oa-bock { background: var(--oa-svart); }
.oa-offert-form {
	background: var(--oa-vit);
	border-radius: var(--oa-radie);
	padding: clamp(24px, 4vw, 40px);
	box-shadow: 0 20px 50px -24px rgba(0,50,0,.45);
	min-width: 0;
}
.oa-offert-reserv h3 { margin: 0 0 8px; }
.oa-offert-reserv p { margin: 0; }
@media (max-width: 900px) {
	.oa-offert > .oa-wrap { grid-template-columns: 1fr; }
	.oa-offert-intro { position: static; }
}

/* ---------- Ring oss ---------- */
.oa-ring {
	color: var(--oa-vit);
	background-color: var(--oa-morkgron);
	background-size: cover;
}
.oa-ring::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,30,32,.85) 0%, rgba(0,30,32,.55) 45%, rgba(0,30,32,0) 72%);
	pointer-events: none;
}
.oa-ring .oa-wrap { position: relative; padding-block: clamp(80px, 11vw, 140px); display: grid; gap: 22px; }
.oa-ring .oa-wrap > * { margin: 0; }
.oa-ring h2 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); max-width: 600px; color: inherit; }
.oa-kontaktrad { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.oa-kontaktrad > * {
	font-family: var(--oa-rubrik);
	font-weight: 800;
	font-size: clamp(1.4rem, 3vw, 2rem);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	overflow-wrap: anywhere;
}
.oa-kontaktrad a:hover { color: var(--oa-gron); }
.oa-kontaktrad img { width: 46px; height: 46px; flex: none; }
.oa-kontaktrad .oa-kontaktrad-epost { font-size: clamp(1rem, 2.2vw, 1.35rem); }

/* ---------- FAQ ---------- */
.oa-faq { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 6vw, 80px); }
.oa-faq > * { margin: 0; }
.oa-faq .oa-sektion-topp { margin-bottom: 0; align-content: start; }
.oa-faq-fraga { border-bottom: 1px solid var(--oa-gra); margin: 0; }
.oa-faq-lista > .oa-faq-fraga:first-child,
.oa-faq-lista > :first-child .oa-faq-fraga { border-top: 1px solid var(--oa-gra); }
.oa-faq-summary {
	font-family: var(--oa-rubrik);
	font-weight: 800;
	font-size: 1.12rem;
	padding: 22px 44px 22px 0;
	cursor: pointer;
	list-style: none;
	position: relative;
}
.oa-faq-summary::-webkit-details-marker { display: none; }
.oa-faq-summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	background: var(--oa-gron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / 11px no-repeat;
	transition: transform .2s;
}
.oa-faq-fraga[open] .oa-faq-summary::after, .oa-faq-fraga.is-open .oa-faq-summary::after { transform: rotate(45deg); }
.oa-faq-fraga p { margin: 0; padding: 0 0 24px; color: var(--oa-dampad); max-width: 62ch; }
@media (max-width: 860px) { .oa-faq { grid-template-columns: 1fr; } }

/* ---------- Sidfot ---------- */
.oa-sidfot { background: var(--oa-morkgron-djup); color: rgba(255,255,255,.86); font-size: .95rem; }
.oa-sidfot a { color: inherit; text-decoration: none; }
.oa-sidfot a:hover { color: var(--oa-gron); }
.oa-sidfot h2, .oa-sidfot h3 { font-size: .95rem; color: var(--oa-vit); margin: 0 0 14px; }
.oa-sidfot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.oa-sidfot .oa-kontakt { display: grid; gap: 8px; }
.oa-sidfot-botten { border-top: 1px solid rgba(255,255,255,.15); font-size: .85rem; opacity: .75; }
.oa-sidfot-botten p { margin: 0; }

/* Kontaktblocket */
.oa-kontakt { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.oa-kontakt a { color: inherit; text-decoration: none; }
.oa-kontakt a:hover { color: var(--oa-morkgron); }
.oa-sidfot .oa-kontakt a:hover { color: var(--oa-gron); }
.oa-kontakt-rubrik { font-family: var(--oa-rubrik); font-weight: 800; }

/* Vanligt sidinnehåll */
.oa-sidrubrik { padding-block: clamp(48px, 8vw, 96px) 0; }