/* ==========================================================================
   Arctic Trucks — Block style variations.

   Mirror of the `styles.blocks.<block>.variations.<slug>` entries that
   were previously in theme.json. Moved here because WP 6.6+ core's
   variation-render pipeline (`wp_render_block_style_variation_class_name`)
   has edge-case gaps that only the Gutenberg plugin patches reliably.
   Themes shipping on pure core wp/wc benefit from raw CSS keyed off
   the bare `.is-style-<slug>` class — no per-instance suffix needed,
   no Gutenberg dependency.

   Block style SLUG + LABEL still live in includes/block-styles.php
   (`register_block_style()`); only the CSS moved.

   Selector convention: `.<block-class>.is-style-<slug>`. Hover and
   children selectors use plain CSS descendant syntax (no `&`-nesting)
   for the widest compatibility.
   ========================================================================== */


/* --------------------------------------------------------------------------
   core/button — outline / dark / ghost
   -------------------------------------------------------------------------- */

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--black);
	border: 2px solid currentColor;
	border-radius: var(--wp--custom--border-radius--button);
	padding: calc(1rem - 2px) calc(2rem - 2px);
}

.wp-block-button.is-style-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--graphite) !important;
	color: var(--wp--preset--color--white) !important;
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--black);
	padding: 0.5rem;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: transparent !important;
	color: var(--wp--preset--color--original-blue) !important;
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   core/list — no-bullets / checks
   -------------------------------------------------------------------------- */

ul.is-style-no-bullets,
ol.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
ul.is-style-no-bullets li::before,
ol.is-style-no-bullets li::before {
	display: none;
}

ul.is-style-checks,
ol.is-style-checks {
	list-style: none;
	padding-left: 0;
}
ul.is-style-checks li,
ol.is-style-checks li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}
ul.is-style-checks li::before,
ol.is-style-checks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 1rem;
	height: 1rem;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071CE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
}


/* --------------------------------------------------------------------------
   core/heading — eyebrow / numeric / text-shadow
   -------------------------------------------------------------------------- */

.wp-block-heading.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.2;
	color: var(--wp--preset--color--dark-grey);
}

.wp-block-heading.is-style-numeric {
	font-feature-settings: 'tnum' 1;
	font-variant-numeric: tabular-nums;
}

/* text-shadow: legibility toggle for headings over photography (e.g. hero
   covers). On/off = pick the "Tekstskygge" style in the inserter. */
.wp-block-heading.is-style-text-shadow {
	text-shadow: var(--wp--custom--text-shadow--default);
}


/* --------------------------------------------------------------------------
   core/cover — hero / card

   hero: full-bleed banner with dark gradient overlay on top and bottom
         (legibility for white text over arbitrary cover photography).
         padding-x/y composed from `--wp--custom--section--pad-*` tokens.
   card: rounded card, clips its background image.
   -------------------------------------------------------------------------- */

.wp-block-cover.is-style-hero {
	min-height: clamp(540px, 75vh, 900px);
	position: relative;
	isolation: isolate;
	padding-top:    var(--wp--custom--section--pad-y);
	padding-bottom: var(--wp--custom--section--pad-y);
	padding-left:   var(--wp--style--root--padding-left, 1.5rem);
	padding-right:  var(--wp--style--root--padding-right, 1.5rem);
}
.wp-block-cover.is-style-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 51.925%, rgba(0,0,0,0.4) 100%);
	pointer-events: none;
	z-index: 1;
}
.wp-block-cover.is-style-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.wp-block-cover.is-style-card {
	border-radius: var(--wp--custom--border-radius--default);
	overflow: hidden;
}


/* --------------------------------------------------------------------------
   core/group — section-dark / -graphite / -light / -paper / usp-row

   The four section-* variants share the same vertical padding pattern;
   they differ only in background + text colour. Headings recolor to
   white on dark/graphite backgrounds; paragraphs use paper-grey for
   softer contrast on dark.
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-section-dark,
.wp-block-group.is-style-section-graphite,
.wp-block-group.is-style-section-light,
.wp-block-group.is-style-section-paper {
	padding-top:    var(--wp--custom--section--pad-y);
	padding-bottom: var(--wp--custom--section--pad-y);
}

.wp-block-group.is-style-section-dark {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}
.wp-block-group.is-style-section-dark :where(h1,h2,h3,h4,h5,h6) {
	color: var(--wp--preset--color--white);
}
.wp-block-group.is-style-section-dark p {
	color: var(--wp--preset--color--paper-grey);
}

.wp-block-group.is-style-section-graphite {
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--white);
}
.wp-block-group.is-style-section-graphite :where(h1,h2,h3,h4,h5,h6) {
	color: var(--wp--preset--color--white);
}
.wp-block-group.is-style-section-graphite p {
	color: var(--wp--preset--color--paper-grey);
}

.wp-block-group.is-style-section-light {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.wp-block-group.is-style-section-paper {
	background-color: var(--wp--preset--color--lightest-grey);
	color: var(--wp--preset--color--black);
}

.wp-block-group.is-style-usp-row,
.wp-block-group.is-style-usp-row > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--lg);
}
.wp-block-group.is-style-usp-row > * {
	padding-top: var(--wp--preset--spacing--md);
	border-top: 2px solid var(--wp--preset--color--original-blue);
}


/* --------------------------------------------------------------------------
   core/columns — usp-row (per-column top border, same blue accent)
   -------------------------------------------------------------------------- */

.wp-block-columns.is-style-usp-row > .wp-block-column {
	padding-top: var(--wp--preset--spacing--md);
	border-top: 2px solid var(--wp--preset--color--original-blue);
}


/* --------------------------------------------------------------------------
   core/columns — vertical-divider (hairline between columns)

   Hidden below 782px (WP's columns stacking breakpoint). The line centres
   in the column gap: offset = half the gap. --at-columns-gap is injected
   by a render_block filter (filters.php) mirroring the block's own
   blockGap — layout support emits a plain per-instance `gap` that child
   CSS can't read. Without a blockGap attr the fallback chain matches
   WP's own: --wp--style--block-gap (theme root blockGap), then 2em.
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.wp-block-columns.is-style-vertical-divider > .wp-block-column + .wp-block-column {
		position: relative;
	}

	/* NB: keep explicit .wp-block-column selectors here — the editor's
	   style transform mangles `* + *::before` into `* + ::before`. */
	.wp-block-columns.is-style-vertical-divider > .wp-block-column + .wp-block-column::before {
		content: "";
		position: absolute;
		inset-block: 0;
		left: calc(var(--at-columns-gap, var(--wp--style--block-gap, 2em)) / -2);
		width: 1px;
		background: var(--wp--preset--color--light-grey);
	}
}


/* --------------------------------------------------------------------------
   core/separator — dark-on-light / light-on-dark
   -------------------------------------------------------------------------- */

.wp-block-separator.is-style-dark-on-light {
	color: var(--wp--preset--color--light-grey);
}

.wp-block-separator.is-style-light-on-dark {
	color: var(--wp--preset--color--paper-grey);
	opacity: 0.4;
}


/* --------------------------------------------------------------------------
   core/image — sharp (image variation, opt-out of the default radius)

   The base core/image rule lives in theme.json (under styles.blocks
   core/image) and stays there — it's not a variation, just a default
   style. Only the sharp opt-out is moved here for completeness.
   -------------------------------------------------------------------------- */

.wp-block-image.is-style-sharp,
.wp-block-image.is-style-sharp img {
	border-radius: 0;
}


/* --------------------------------------------------------------------------
   core/table — sticky-header (Festet topprad)

   Comparison tables on ombygging model pages: the header row pins below
   the fixed site header while the body rows scroll.

   Offset follows the .at-shop-controls precedent in custom.css — the
   header is a fixed 56px bar, so stuck cells anchor at
   56px + admin-bar offset, and drop to the admin-bar offset alone while
   the header is hidden (scrolling down). `top` only has effect while a
   sticky element is actually stuck, so unstuck tables are unaffected;
   the 0.3s top transition matches the header's own hide/reveal glide.

   Desktop-only (>= 768px, the theme breakpoint): core puts
   `overflow-x: auto` on the .wp-block-table figure, and vertical sticky
   is dead inside an overflow container — so the variation lifts the
   figure to `overflow-x: visible` at desktop widths where the 1200px
   content column fits without horizontal scroll. Below 768px nothing is
   overridden: core's horizontal scroll comes back and sticky is off
   (sticky inside a horizontal scroller is broken anyway).

   The opaque th background + bottom hairline apply at all widths so the
   editor's block-style preview shows the variant. The hairline is a
   box-shadow on the cells, not a thead border — with core's collapsed
   borders, a thead border-bottom stays behind when the cells stick.
   -------------------------------------------------------------------------- */

.wp-block-table.is-style-sticky-header thead th {
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 0 var(--wp--preset--color--light-grey);
}

@media (min-width: 768px) {
	.wp-block-table.is-style-sticky-header {
		overflow-x: visible;
	}
	.wp-block-table.is-style-sticky-header thead th {
		position: sticky;
		top: calc(56px + var(--at-admin-bar-offset, 0px));
		z-index: 2;
		transition: top 0.3s ease;
	}
	body:has(.at-header--hidden) .wp-block-table.is-style-sticky-header thead th {
		top: var(--at-admin-bar-offset, 0px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-table.is-style-sticky-header thead th {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
   core/table — lines (Linjer)

   Label/value spec tables (model pages' "Vekt og dimensjoner"): hairline
   rows only — no outer frame, no vertical rules — label in dark-grey,
   value right-aligned in heavy black, body size, sm vertical padding and
   no horizontal padding (the original hand-written table's look).
   Overrides core's 1px cell grid; radius follows the single default knob.
   -------------------------------------------------------------------------- */

.wp-block-table.is-style-lines table {
	border-collapse: collapse;
	border-radius: var(--wp--custom--border-radius--default);
}
.wp-block-table.is-style-lines :is(td, th) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
	padding: var(--wp--preset--spacing--sm) 0;
	font-size: var(--wp--preset--font-size--body);
	vertical-align: top;
}
.wp-block-table.is-style-lines :is(td, th):first-child {
	color: var(--wp--preset--color--dark-grey);
	padding-inline-end: var(--wp--preset--spacing--sm);
}
.wp-block-table.is-style-lines :is(td, th):last-child:not(:first-child) {
	color: var(--wp--preset--color--black);
	font-weight: 800;
	text-align: right;
}
.wp-block-table.is-style-lines thead {
	border-bottom: 0;
}


/* --------------------------------------------------------------------------
   core/group — card (Kort)

   Content card for grids/columns: lightest-grey plate, md inset, square
   corners (border-radius--default). Background comes from the class, not `has-background`, so core
   does NOT inject its default group padding (codehouse-wp-gotchas §7.3) —
   the inset lives here. Flex column so a trailing Buttons row pins to the
   bottom edge across cards of different text length (grid/columns stretch
   items by default); the row keeps a small top pad so it never hugs the
   text when the card is exactly content-height.
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-card {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--lightest-grey);
	border-radius: var(--wp--custom--border-radius--default);
}
.wp-block-group.is-style-card > .wp-block-buttons:last-child {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--sm);
}


/* --------------------------------------------------------------------------
   core/paragraph — badge (Badge)

   Inline label chip (press clippings, meta rows): uppercase body-xs on a
   lightest-grey plate. The paragraph block emits a bare <p> (no
   .wp-block-paragraph on the frontend), so the selector is `p.is-style-*`.
   No xxs spacing preset exists — vertical inset derives from xs.
   -------------------------------------------------------------------------- */

p.is-style-badge {
	display: inline-block;
	padding: calc(var(--wp--preset--spacing--xs) / 2) var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--border-radius--default);
	background-color: var(--wp--preset--color--lightest-grey);
	color: var(--wp--preset--color--original-blue);
	font-size: var(--wp--preset--font-size--body-xs);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   core/quote — plain (Enkel)

   Zeroes the theme's pull-quote treatment from theme.json
   (styles.blocks.core/quote: 3px original-blue left rule, md left padding,
   intro size / 500 weight) for stacked testimonials and review snippets.
   Body-sm graphite; the cite rule from theme.json still applies.
   -------------------------------------------------------------------------- */

.wp-block-quote.is-style-plain {
	border-left: 0;
	padding-left: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--graphite);
}
.wp-block-quote.is-style-plain p {
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--graphite);
}


/* --------------------------------------------------------------------------
   core/details — button-summary (Knapp som oppsummering)

   <summary> styled as the theme's primary button — mirrors
   styles.elements.button in theme.json (colours, radius knob, padding,
   type, hover/active/focus) — with a chevron after the label that flips
   when the drawer is open. Native marker removed; keyboard, ESC and a11y
   stay native. Content below the summary gets md breathing room (the
   details block is a flow layout, so this replaces the injected blockGap
   margin rather than stacking on it). Open/close glide where the browser
   can interpolate to `auto` (Chromium 131+); elsewhere it toggles.
   -------------------------------------------------------------------------- */

.wp-block-details.is-style-button-summary > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding: 1rem 2rem;
	border-radius: var(--wp--custom--border-radius--button);
	background-color: var(--wp--preset--color--original-blue);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--wp--preset--font-size--body);
	font-weight: var(--wp--custom--font-weight--button);
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--wp--custom--transition--default),
		box-shadow var(--wp--custom--transition--default),
		transform var(--wp--custom--transition--fast);
}
.wp-block-details.is-style-button-summary > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details.is-style-button-summary > summary:hover {
	background-color: var(--wp--preset--color--medium-blue);
	box-shadow: var(--wp--custom--shadow--subtle);
}
.wp-block-details.is-style-button-summary > summary:active {
	transform: translateY(1px);
}
.wp-block-details.is-style-button-summary > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--original-blue);
	outline-offset: 2px;
}
.wp-block-details.is-style-button-summary > summary::after {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	transition: transform 0.25s ease;
}
.wp-block-details.is-style-button-summary[open] > summary::after {
	transform: rotate(180deg);
}
.wp-block-details.is-style-button-summary > summary + * {
	margin-block-start: var(--wp--preset--spacing--md);
}

@supports (interpolate-size: allow-keywords) {
	.wp-block-details.is-style-button-summary {
		interpolate-size: allow-keywords;
	}
	.wp-block-details.is-style-button-summary::details-content {
		height: 0;
		overflow: clip;
		transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
	}
	.wp-block-details.is-style-button-summary[open]::details-content {
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details.is-style-button-summary > summary,
	.wp-block-details.is-style-button-summary > summary::after,
	.wp-block-details.is-style-button-summary::details-content {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
   ch/tabs — chips (Chips)

   Tablist as chips for content pages (FAQ categories etc.): lightest-grey
   pills, active = original-blue/white — the theme's selected-state colour.
   Clickable → the button radius knob. The block's base .ch-tabs__list
   already wraps (flex-wrap: wrap), so two rows of chips on narrow screens
   come for free; the blockGap control writes an inline gap that wins over
   the xs default here. The mega-menu tab skin in custom.css is
   .ch-mega-menu__plate-scoped and never meets this style.
   -------------------------------------------------------------------------- */

.wp-block-ch-tabs.is-style-chips > .ch-tabs__list {
	gap: var(--wp--preset--spacing--xs);
	margin-block-end: var(--wp--preset--spacing--md);
}
.wp-block-ch-tabs.is-style-chips .ch-tabs__tab {
	padding: 0.625rem 1.125rem;
	border-radius: var(--wp--custom--border-radius--button);
	background-color: var(--wp--preset--color--lightest-grey);
	color: var(--wp--preset--color--graphite);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--wp--custom--font-weight--button);
	line-height: 1.2;
	transition: background-color var(--wp--custom--transition--default),
		color var(--wp--custom--transition--default);
}
.wp-block-ch-tabs.is-style-chips .ch-tabs__tab:not(.is-active):hover,
.wp-block-ch-tabs.is-style-chips .ch-tabs__tab:not(.is-active):focus-visible {
	background-color: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--black);
}
.wp-block-ch-tabs.is-style-chips .ch-tabs__tab.is-active {
	background-color: var(--wp--preset--color--original-blue);
	color: var(--wp--preset--color--white);
}
.wp-block-ch-tabs.is-style-chips .ch-tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--original-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-ch-tabs.is-style-chips .ch-tabs__tab {
		transition: none;
	}
}