/* Överby – komponenter. Färger och typsnitt kommer från theme.json och kan ändras under Utseende → Redigerare → Stilar. */

:root {
	--overby-skylt: var(--wp--preset--color--skylt, #13365C);
	--overby-skylt-djup: var(--wp--preset--color--skylt-djup, #0D2742);
	--overby-gul: var(--wp--preset--color--gul, #FFC83D);
	--overby-papper: var(--wp--preset--color--papper, #F3F5F8);
	--overby-yta: var(--wp--preset--color--yta, #FFFFFF);
	--overby-text: var(--wp--preset--color--text, #1E2B3A);
	--overby-dampad: var(--wp--preset--color--dampad, #566476);
	--overby-linje: var(--wp--preset--color--linje, #DCE2EA);
	--overby-radie: 14px;
	--overby-max: 1180px;
	--overby-sidhuvud: 68px;
	--overby-kant: var(--wp--style--root--padding-left, clamp(16px, 4vw, 32px));
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--overby-sidhuvud) + 16px + var(--wp-admin--admin-bar--height, 0px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--overby-gul); outline-offset: 3px; border-radius: 4px; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.skarmlasare { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Sidhuvud ---------- */
.wp-site-blocks > .sidhuvud { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 20; }
@media (max-width: 600px) { .wp-site-blocks > .sidhuvud { top: 0; } }
.topp { background: var(--overby-yta); border-bottom: 1px solid var(--overby-linje); }
.topp-rad { min-height: var(--overby-sidhuvud); }
.varumarke { gap: 12px; }
.varumarke .wp-block-site-logo img { height: 38px; width: auto; }
.varumarke:has(.wp-block-site-logo img) .wp-block-site-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.topp .wp-block-navigation .wp-block-navigation-item__content { padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.topp .wp-block-navigation .wp-block-navigation-item__content:hover { background: var(--overby-papper); }

/* ---------- Överdelen på startsidan ---------- */
.hero { background: var(--overby-skylt); color: #fff; overflow: hidden; }
.wp-block-columns.hero-kolumner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; margin: 0; min-height: 520px; align-items: stretch; }
.hero-kolumner > .wp-block-column { margin: 0; }
.hero .skylt {
	display: flex; flex-direction: column; justify-content: center; gap: 0;
	padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 40px) clamp(40px, 6vw, 72px) max(var(--overby-kant), calc((100vw - var(--overby-max)) / 2));
}
.hero .skylt > * { margin-block: 0; }
.hero .plats { font-size: 1.125rem; font-weight: 500; letter-spacing: 0; color: #C9D6E6; margin-bottom: 28px; }
.hero .plats strong { color: #fff; font-weight: 700; }

.overby-idag .idag { font-size: 1.25rem; font-weight: 600; margin: 0; }
.overby-idag .tider { font-size: clamp(4.5rem, 12vw, 9.5rem); font-weight: 700; line-height: .92; color: var(--overby-gul); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 4px 0 14px; }
.overby-idag .status { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; margin: 0 0 28px; }
.overby-idag .status::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #7DDB95; box-shadow: 0 0 0 4px rgba(125, 219, 149, .22); flex: none; }
.overby-idag .status.stangt::before { background: #C9D6E6; box-shadow: 0 0 0 4px rgba(201, 214, 230, .18); }
.overby-idag .vecka { display: grid; grid-template-columns: auto auto; gap: 4px 28px; margin: 0 0 32px; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); max-width: 360px; font-variant-numeric: tabular-nums; }
.overby-idag .vecka dt, .overby-idag .vecka dd { margin: 0; color: #C9D6E6; }
.overby-idag .vecka .nu { color: #fff; font-weight: 700; }

.knappar { gap: 12px; }
.wp-block-button.is-style-ram .wp-block-button__link { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .55); }
.wp-block-button.is-style-ram .wp-block-button__link:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

.hero .herobild { position: relative; min-height: 260px; }
.hero .herobild .wp-block-image { position: absolute; inset: 0; margin: 0; }
.hero .herobild .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.hero .herobild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--overby-skylt) 0, rgba(19, 54, 92, 0) 22%); pointer-events: none; }
.hero .fakta { position: absolute; left: 28px; bottom: 28px; z-index: 1; margin: 0; background: #fff; color: #13365C; border-radius: var(--overby-radie); padding: 16px 20px; max-width: 300px; font-weight: 600; line-height: 1.35; box-shadow: 0 10px 30px rgba(13, 39, 66, .25); }

@media (max-width: 860px) {
	.wp-block-columns.hero-kolumner { grid-template-columns: 1fr; min-height: 0; }
	.hero .skylt { padding-left: var(--overby-kant); padding-right: var(--overby-kant); }
	.hero .herobild { height: 260px; }
	.hero .herobild::after { background: linear-gradient(180deg, var(--overby-skylt) 0, rgba(19, 54, 92, 0) 30%); }
	.hero .fakta { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ---------- Sektioner ---------- */
.sektion { padding-block: clamp(56px, 8vw, 96px); }
.sektion + .sektion { padding-top: 0; }
.sektion > .wp-block-heading { margin-bottom: 28px; }
.sektionshuvud { margin-bottom: 28px; gap: 16px; }
.sektionshuvud > * { margin: 0; }
.sektionshuvud > * + * { margin-top: 8px; }
.sektionshuvud.is-layout-flex > * + * { margin-top: 0; }
.ingress { color: var(--overby-dampad); max-width: 60ch; }
.textlank a { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--overby-gul); padding-bottom: 2px; }
.textlank a:hover { border-color: currentColor; }

/* ---------- Nyheter ---------- */
.nyheter-lista .wp-block-post-template { gap: 24px; }
.nyhet { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; height: 100%; background: var(--overby-yta); border-radius: var(--overby-radie); padding: 14px; border: 1px solid var(--overby-linje); }
.nyhet:hover { border-color: var(--overby-skylt); }
.nyhet:not(:has(.wp-block-post-featured-image)) { grid-template-columns: minmax(0, 1fr); }
.nyhet > * { margin: 0; }
.nyhet .wp-block-post-featured-image { margin: 0; }
.nyhet .wp-block-post-featured-image img { width: 120px; aspect-ratio: 250 / 345; object-fit: cover; border-radius: 8px; background: var(--overby-papper); }
.nyhet-text > * { margin: 0; }
.nyhet-text .wp-block-post-date { font-size: .875rem; color: var(--overby-dampad); }
.nyhet-text .wp-block-post-title { font-size: 1.25rem; margin: 6px 0 8px; }
.nyhet-text .wp-block-post-title a { text-decoration: none; }
.nyhet-text .wp-block-post-title a:hover { text-decoration: underline; }
.nyhet-text .wp-block-post-excerpt__excerpt { margin: 0; color: var(--overby-dampad); font-size: .975rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 980px) {
	.nyheter-lista .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.nyhet { grid-template-columns: 96px minmax(0, 1fr); }
	.nyhet .wp-block-post-featured-image img { width: 96px; }
}
.nyheter-lista .wp-block-query-pagination { margin-top: 32px; }

/* ---------- Öppettider ---------- */
.wp-block-columns.hus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; }
.husruta { --farg: var(--overby-skylt); background: var(--overby-yta); border-radius: var(--overby-radie); padding: 24px; border-top: 6px solid var(--farg); }
.husruta.hus-etage { --farg: var(--wp--preset--color--etage, #0E7A72); }
.husruta.hus-siba { --farg: var(--wp--preset--color--siba, #C8102E); }
.husruta.hus-ovriga { --farg: var(--wp--preset--color--ovriga, #6B5BA8); }
.husruta > * { margin-block: 0 12px; }
.husruta > *:last-child { margin-bottom: 0; }
.husruta > p { color: var(--overby-dampad); font-size: .95rem; }
.overby-tabell .tidtabell { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; margin: 0; font-variant-numeric: tabular-nums; }
.overby-tabell dt { color: var(--overby-dampad); }
.overby-tabell dd { margin: 0; font-weight: 600; }
.overby-tabell .avvikande-rubrik { margin: 14px 0 4px; font-weight: 700; font-size: .95rem; }
@media (max-width: 860px) { .wp-block-columns.hus { grid-template-columns: 1fr; } }

/* ---------- Butikskatalog ---------- */
.overby-katalog [hidden] { display: none !important; }
.overby-katalog .verktyg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 14px; }
.overby-katalog .sok { position: relative; display: block; }
.overby-katalog .sok input { width: 100%; min-height: 52px; font: inherit; font-size: 1.0625rem; color: var(--overby-text); background: var(--overby-yta); border: 2px solid var(--overby-linje); border-radius: 999px; padding: 0 20px 0 48px; }
.overby-katalog .sok input:focus { outline: none; border-color: var(--overby-skylt); }
.overby-katalog .sok svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--overby-dampad); }
.overby-katalog .filter { display: flex; gap: 6px; flex-wrap: wrap; }
.overby-katalog .filter button { font: inherit; font-weight: 600; font-size: .975rem; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--overby-linje); background: var(--overby-yta); color: var(--overby-text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.overby-katalog .filter button[aria-pressed="true"] { background: var(--overby-skylt); border-color: var(--overby-skylt); color: #fff; }
.overby-katalog .prick { width: 10px; height: 10px; border-radius: 50%; background: var(--farg); flex: none; }
@media (max-width: 860px) { .overby-katalog .verktyg { grid-template-columns: 1fr; } }
.overby-katalog .bokstaver { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 10px 0; position: sticky; top: calc(var(--overby-sidhuvud) + var(--wp-admin--admin-bar--height, 0px)); z-index: 5; background: var(--overby-papper); }
.overby-katalog .bokstaver a { min-width: 34px; height: 34px; display: inline-grid; place-items: center; text-decoration: none; font-weight: 700; border-radius: 8px; color: var(--overby-dampad); }
.overby-katalog .bokstaver a:hover { background: var(--overby-yta); color: var(--overby-text); }
.overby-katalog .antal { color: var(--overby-dampad); margin: 0 0 20px; font-size: .975rem; }
.overby-katalog .grupp { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--overby-linje); }
.overby-katalog .grupp h3 { font-size: 2.25rem; font-weight: 700; color: var(--overby-skylt); line-height: 1; margin: 0; }
.overby-katalog .butiker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.overby-katalog .butik { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--overby-yta); border: 1px solid var(--overby-linje); border-radius: 10px; overflow: hidden; }
.overby-katalog a.butik:hover { border-color: var(--overby-skylt); box-shadow: 0 6px 18px rgba(19, 54, 92, .12); }
.overby-katalog .logga { aspect-ratio: 500 / 195; background: #fff; display: grid; place-items: center; padding: 8px; border-bottom: 1px solid var(--overby-linje); }
.overby-katalog .logga img { width: 100%; height: 100%; object-fit: contain; }
.overby-katalog .logga span { color: #13365C; font-weight: 700; font-size: 1.25rem; text-align: center; line-height: 1.15; }
.overby-katalog .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.overby-katalog .namn { font-weight: 700; line-height: 1.25; }
.overby-katalog .var { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--overby-dampad); }
.overby-katalog .tomt { background: var(--overby-yta); border-radius: var(--overby-radie); padding: 28px; text-align: center; color: var(--overby-dampad); }
.overby-katalog .tomt strong { display: block; color: var(--overby-text); font-size: 1.125rem; margin-bottom: 4px; }
@media (max-width: 560px) {
	.overby-katalog .grupp { grid-template-columns: 1fr; gap: 10px; }
	.overby-katalog .butiker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Karta ---------- */
.wp-block-columns.karta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; align-items: start; margin: 0; }
.wp-block-columns.karta > .wp-block-column > * + * { margin-top: 12px; }
.kartram { margin: 0; background: #fff; border: 1px solid var(--overby-linje); border-radius: var(--overby-radie); overflow: hidden; }
.kartram img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .wp-block-columns.karta { grid-template-columns: 1fr; } }

/* ---------- Vanliga sidor och nyheter ---------- */
.innehall { padding-block: clamp(40px, 6vw, 72px); }
.innehall > .wp-block-post-date { color: var(--overby-dampad); font-size: .95rem; margin-bottom: 4px; }
.innehall .artikelbild img { border-radius: var(--overby-radie); max-height: 480px; width: auto; }
.innehall > .wp-block-query-title, .innehall > h1 { margin-bottom: 28px; }

/* ---------- Sidfot ---------- */
.fot { background: var(--overby-skylt-djup); color: #C9D6E6; padding-block: 48px 32px; margin-top: 0; }
.fot-rad { gap: 24px; align-items: center; }
.fot .wp-block-site-title a, .fot .wp-block-navigation a { color: #fff; text-decoration: none; }
.fot .wp-block-navigation a:hover { text-decoration: underline; }
.fot .wp-block-navigation { gap: 20px; }
.fot-liten { font-size: .875rem; margin-top: 24px; }