/*
Theme Name: Jordskred
Theme URI: https://www.jordskred.org/
Author: Jordskred, Tech & Data
Description: Jordskreds eget bloktema: Barlow Semi Condensed i versaler, gul, lysegrøn og mørkegrøn på hvid, den ottetakkede stjerne som punkttegn. Indholdet skrives i blokeditoren; temaets mønstre giver forsiden, kandidatsider, nyhedsbrev og tilmeldinger deres form.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jordskred
*/

/* The site's rules that theme.json cannot express. Colours, type and
   spacing are tokens in theme.json; use its presets (var(--wp--preset--…))
   rather than literal values here. */

/* Lists: the eight-pointed star as bullet, as on the Squarespace site
   (custom CSS there: li::before { content: "✴︎" }). */
.wp-block-list:not(.is-style-plain) { list-style: none; padding-left: 0; }
.wp-block-list:not(.is-style-plain) > li { position: relative; padding-left: 1.6em; }
.wp-block-list:not(.is-style-plain) > li::before { content: "✴︎"; position: absolute; left: 0; top: 0; }
ol.wp-block-list:not(.is-style-plain) { list-style: decimal; padding-left: 1.6em; }
ol.wp-block-list:not(.is-style-plain) > li { padding-left: 0; }
ol.wp-block-list:not(.is-style-plain) > li::before { content: none; }

/* Headings: capitals and tight lines, the poster look. */
h1, h2, .wp-block-post-title, .wp-block-site-title { text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; }

/* Buttons as on the site: yellow with a thin black edge, lightly rounded,
   Barlow Condensed in capitals at the regular weight (theme.json sets face,
   colours, edge and radius). The black-and-yellow and outline variants keep the edge. */
.wp-block-button__link { text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; }
.wp-block-button.is-style-outline .wp-block-button__link { border-width: 1px; }

/* The star band (pattern "Stjernebånd"): a line of name ✴︎ name ✴︎ that
   scrolls sideways, as the marquee on the candidates' pages. functions.php
   repeats the words and doubles the run, so the loop moves by one run
   (-50 %) with the band full from the first moment; its speed is set there
   per band, the same for a short and a long one. */
.jordskred-band { overflow: hidden; white-space: nowrap; }
.jordskred-band .jordskred-band__track { max-width: none; white-space: nowrap; text-wrap: nowrap; font-family: var(--wp--preset--font-family--barlow-semi-condensed); font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.jordskred-band__loop { display: inline-block; width: max-content; animation: jordskred-band 40s linear infinite; }
.jordskred-band__run { padding-right: 0.35em; }
@media (prefers-reduced-motion: reduce) { .jordskred-band__loop { animation: none; } }
@keyframes jordskred-band { to { transform: translateX(-50%); } }

/* Embedded forms and lists (Keila, Zetkin): full width of their column. */
.jordskred-embed :is(iframe, object) { width: 100%; border: 0; display: block; }

/* Newsletter form (pattern "Nyhedsbrev"): plain fields in the brand colours. */
.jordskred-newsletter { display: grid; gap: var(--wp--preset--spacing--30); max-width: 32rem; }
.jordskred-newsletter label { font-weight: 600; }
.jordskred-newsletter input[type="email"] { font: inherit; padding: 0.8em 1em; border: 2px solid var(--wp--preset--color--dark-green); border-radius: var(--jordskred-radius, 4px); background: var(--wp--preset--color--white); color: var(--wp--preset--color--dark-green); width: 100%; }
.jordskred-newsletter button { font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.9em 1.6em; border: 0; border-radius: var(--jordskred-radius, 4px); background: var(--wp--preset--color--dark-green); color: var(--wp--preset--color--yellow); cursor: pointer; }
.jordskred-newsletter button:hover { background: var(--wp--preset--color--black); }
.jordskred-newsletter small { color: inherit; opacity: 0.8; }

/* Text for screen readers and search engines only (WordPress's own class name). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Skip link and focus, visible in every section colour. */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Text on the coloured sections is a step heavier (400) than on white (300):
   the light weight on yellow and light green is close to the contrast limit
   at small sizes. Headings keep their own weights. */
.is-style-section-yellow p, .is-style-section-yellow li,
.is-style-section-light-green p, .is-style-section-light-green li,
.is-style-section-dark-green p, .is-style-section-dark-green li,
.is-style-section-black p, .is-style-section-black li { font-weight: 400; }

/* The three numbers (pattern Tre tal, the front page): equal columns, each
   number centred over its line, tabular figures so the columns align; on a
   phone they stack, still centred, with the number and its line kept together. */
.jordskred-tal > .wp-block-column { text-align: center; flex-basis: 0 !important; flex-grow: 1; }
.jordskred-tal h2 { font-variant-numeric: tabular-nums; margin-bottom: 0.1em; }
.jordskred-tal p { max-width: 16em; margin-left: auto; margin-right: auto; text-wrap: balance; }
@media (max-width: 781px) { .jordskred-tal { gap: var(--wp--preset--spacing--40) !important; } .jordskred-tal h2 { font-size: clamp(3.2rem, 18vw, 5rem); } }

/* ---- Decoration, as block styles (functions.php registers the names) ----
   The Squarespace site's shapes: starbursts, badges, hand-drawn rings,
   rows of dots, a slightly tilted button or picture. Each is one click in
   the editor's Styles panel; nothing is placed by hand in CSS. */

/* Shapes */
:root {
	--jordskred-starburst: polygon(50.0% 0.0%, 54.7% 8.3%, 61.1% 1.3%, 63.9% 10.4%, 71.7% 5.0%, 72.3% 14.4%, 81.2% 10.9%, 79.7% 20.3%, 89.1% 18.8%, 85.6% 27.7%, 95.0% 28.3%, 89.6% 36.1%, 98.7% 38.9%, 91.7% 45.3%, 100.0% 50.0%, 91.7% 54.7%, 98.7% 61.1%, 89.6% 63.9%, 95.0% 71.7%, 85.6% 72.3%, 89.1% 81.2%, 79.7% 79.7%, 81.2% 89.1%, 72.3% 85.6%, 71.7% 95.0%, 63.9% 89.6%, 61.1% 98.7%, 54.7% 91.7%, 50.0% 100.0%, 45.3% 91.7%, 38.9% 98.7%, 36.1% 89.6%, 28.3% 95.0%, 27.7% 85.6%, 18.8% 89.1%, 20.3% 79.7%, 10.9% 81.2%, 14.4% 72.3%, 5.0% 71.7%, 10.4% 63.9%, 1.3% 61.1%, 8.3% 54.7%, 0.0% 50.0%, 8.3% 45.3%, 1.3% 38.9%, 10.4% 36.1%, 5.0% 28.3%, 14.4% 27.7%, 10.9% 18.8%, 20.3% 20.3%, 18.8% 10.9%, 27.7% 14.4%, 28.3% 5.0%, 36.1% 10.4%, 38.9% 1.3%, 45.3% 8.3%);
	--jordskred-badge: polygon(50.0% 0.0%, 56.3% 10.5%, 65.5% 2.4%, 68.2% 14.4%, 79.4% 9.5%, 78.3% 21.7%, 90.5% 20.6%, 85.6% 31.8%, 97.6% 34.5%, 89.5% 43.7%, 100.0% 50.0%, 89.5% 56.3%, 97.6% 65.5%, 85.6% 68.2%, 90.5% 79.4%, 78.3% 78.3%, 79.4% 90.5%, 68.2% 85.6%, 65.5% 97.6%, 56.3% 89.5%, 50.0% 100.0%, 43.7% 89.5%, 34.5% 97.6%, 31.8% 85.6%, 20.6% 90.5%, 21.7% 78.3%, 9.5% 79.4%, 14.4% 68.2%, 2.4% 65.5%, 10.5% 56.3%, 0.0% 50.0%, 10.5% 43.7%, 2.4% 34.5%, 14.4% 31.8%, 9.5% 20.6%, 21.7% 21.7%, 20.6% 9.5%, 31.8% 14.4%, 34.5% 2.4%, 43.7% 10.5%);
	--jordskred-star: polygon(50.0% 0.0%, 56.9% 33.4%, 85.4% 14.6%, 66.6% 43.1%, 100.0% 50.0%, 66.6% 56.9%, 85.4% 85.4%, 56.9% 66.6%, 50.0% 100.0%, 43.1% 66.6%, 14.6% 85.4%, 33.4% 56.9%, 0.0% 50.0%, 33.4% 43.1%, 14.6% 14.6%, 43.1% 33.4%);
}

/* Image: cut as a starburst, or a disc, or with a yellow starburst behind it. */
.wp-block-image.is-style-takket img { clip-path: var(--jordskred-starburst); aspect-ratio: 1; object-fit: cover; }
.wp-block-image.is-style-rund img { clip-path: circle(50%); aspect-ratio: 1; object-fit: cover; }
.wp-block-image.is-style-stjerne-bag { position: relative; isolation: isolate; }
.wp-block-image.is-style-stjerne-bag::before { content: ""; position: absolute; inset: 6% -10% auto -10%; aspect-ratio: 1; background: var(--jordskred-shape, var(--wp--preset--color--yellow)); clip-path: var(--jordskred-starburst); z-index: -1; transform: rotate(8deg); }

/* Group: a badge ("Valgt ind, 1.298 stemmer"), a card, slanted edges. */
.wp-block-group.is-style-maerkat { aspect-ratio: 1; width: 11rem; max-width: 100%; display: grid; place-content: center; text-align: center; padding: 2rem !important; background: var(--wp--preset--color--black); color: var(--wp--preset--color--white); clip-path: var(--jordskred-badge); transform: rotate(-8deg); font-size: var(--wp--preset--font-size--small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; }
.wp-block-group.is-style-maerkat > * { margin: 0; }
.wp-block-group.is-style-maerkat.has-background { background: var(--wp--preset--color--black); }
.wp-block-group.is-style-maerkat.has-yellow-background-color { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--black); }
.wp-block-group.is-style-maerkat.has-dark-green-background-color { background: var(--wp--preset--color--dark-green); color: var(--wp--preset--color--yellow); }
.wp-block-group.is-style-kort { background: var(--wp--preset--color--white); color: var(--wp--preset--color--dark-green); border: 2px solid var(--wp--preset--color--black); border-radius: 12px; padding: var(--wp--preset--spacing--40); box-shadow: 0 6px 18px rgb(0 0 0 / 0.08); }
.wp-block-group.is-style-skraa { clip-path: polygon(0 1.5%, 100% 0, 100% 98.5%, 0 100%); padding-top: calc(var(--wp--preset--spacing--60) + 2vw) !important; padding-bottom: calc(var(--wp--preset--spacing--60) + 2vw) !important; }

/* Heading, paragraph: a hand-drawn ring or underline around the text. */
.is-style-ringet-ind { display: inline-block; position: relative; padding: 0.15em 0.6em; }
.is-style-ringet-ind::after { content: ""; position: absolute; inset: -0.1em -0.2em; border: 2px solid currentColor; border-radius: 48% 52% 55% 45% / 60% 42% 58% 40%; transform: rotate(-1.5deg); pointer-events: none; }
.is-style-understreget { display: inline; background: linear-gradient(transparent 70%, var(--wp--preset--color--yellow) 70%, var(--wp--preset--color--yellow) 92%, transparent 92%); padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Text: a thin hand-drawn ring around a few words in running text (the
   editor's format "Ringet ind", class jordskred-ring). */
.jordskred-ring { position: relative; white-space: nowrap; }
/* The loop is the Squarespace site's pen stroke (assets/img/ring-haandtegnet.svg,
   also brand/shapes/), stretched to the words, drawn in the text's colour. */
.jordskred-ring::after { content: ""; position: absolute; top: -0.08em; bottom: -0.39em; left: -0.98em; right: -0.86em; background: currentColor; -webkit-mask: url("assets/img/ring-haandtegnet.svg") 0 0 / 100% 100% no-repeat; mask: url("assets/img/ring-haandtegnet.svg") 0 0 / 100% 100% no-repeat; pointer-events: none; }

/* Button: the wonky poster button, yellow with a black edge and shadow. */
.wp-block-button.is-style-skaev .wp-block-button__link { border: 2px solid var(--wp--preset--color--black); box-shadow: 4px 4px 0 var(--wp--preset--color--black); border-radius: 6px; transform: rotate(-2deg); transition: transform 120ms ease; font-weight: 600; }
.wp-block-button.is-style-skaev .wp-block-button__link:hover { transform: rotate(0deg) translate(2px, 2px); box-shadow: 2px 2px 0 var(--wp--preset--color--black); }

/* The footer follows the last section with no gap: a yellow section and the
   yellow footer would otherwise show a white stripe; every section has its
   own padding. */
.wp-site-blocks > footer { margin-block-start: 0; }

/* Button: black with white letters, as the sign-up buttons on the Squarespace site. */
.wp-block-button.is-style-sort .wp-block-button__link { background: var(--wp--preset--color--black); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--black); border-radius: 4px; }
.wp-block-button.is-style-sort .wp-block-button__link:hover { background: var(--wp--preset--color--dark-green); border-color: var(--wp--preset--color--dark-green); }

/* The front page's statement (class jordskred-manifest): wide, large and
   light as on the Squarespace site, under a thin line; running text set
   justified on a wide screen. */
.jordskred-manifest { border-top: 1px solid rgb(0 0 0 / 0.2); }
.jordskred-manifest p { font-weight: 300; font-size: clamp(1.15rem, 1.5vw, 1.55rem); line-height: 1.45; }
.jordskred-manifest h3 { font-size: var(--wp--preset--font-size--x-large); margin-top: var(--wp--preset--spacing--50); }
@media (min-width: 782px) { .jordskred-manifest p:not(.has-text-align-center) { text-align: justify; hyphens: auto; } }

/* Button: an outlined pill (Onboarding's download button): no fill, a thin
   edge in the text's colour; yellow on a black field. */
.wp-block-button.is-style-omrids .wp-block-button__link { background: transparent; color: currentColor; border: 1.5px solid currentColor; border-radius: 999px; padding: 0.9em 2.2em; }
:is(.is-style-section-black, .has-black-background-color) .wp-block-button.is-style-omrids .wp-block-button__link { color: var(--wp--preset--color--yellow); }
.wp-block-button.is-style-omrids .wp-block-button__link:hover { background: var(--wp--preset--color--yellow); border-color: var(--wp--preset--color--yellow); color: var(--wp--preset--color--black); }

/* Heading, paragraph: words marked with a yellow highlighter pen, line by
   line, in the case they are written (Onboarding's "Arranger et
   vennemøde"). Like a felt-tip stroke: the ends slanted and a little ragged,
   the ink heavier at the start and the end of each line than in the middle,
   a lighter streak along the top. */
.is-style-markeret {
	--pen: var(--wp--preset--color--yellow);
	display: inline; text-transform: none; color: var(--wp--preset--color--black);
	padding: 0.08em 0.4em; margin: 0 -0.2em; line-height: 1.35;
	border-radius: 0.9em 0.25em 0.8em 0.3em;
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
	background:
		linear-gradient(104deg, transparent 0.9%, var(--pen) 2.4%, color-mix(in srgb, var(--pen) 85%, transparent) 5.8%, color-mix(in srgb, var(--pen) 70%, transparent) 93%, color-mix(in srgb, var(--pen) 90%, transparent) 96%, transparent 98%),
		linear-gradient(183deg, transparent 0%, color-mix(in srgb, var(--pen) 45%, transparent) 7.9%, transparent 15%);
}

/* A photograph filling its half with a caption in each top corner (pattern
   "Billede og sort felt"); the black half beside it centres its content. */
.jordskred-foto-hjoerner .wp-block-cover__inner-container { align-self: stretch; }
.jordskred-foto-hjoerner .wp-block-cover__inner-container > .wp-block-group { justify-content: space-between; }
.jordskred-halvdele { gap: 0 !important; }
.jordskred-halvdele > .wp-block-column > .wp-block-cover { height: 100%; }
/* The halves meet the sections above and below without a white gap. */
.jordskred-halvdele, .jordskred-halvdele + .alignfull { margin-block-start: 0 !important; }
/* Both halves are as tall as the taller one; the black half centres its content. */
.jordskred-halvdele > .wp-block-column { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.jordskred-spoergsmaal { font-family: var(--wp--preset--font-family--barlow-semi-condensed); font-weight: 800; line-height: 1.3; }

/* Slightly tilted, for pictures, groups, headings, buttons. */
.is-style-drejet-venstre { transform: rotate(-2.5deg); }
.is-style-drejet-hoejre { transform: rotate(2.5deg); }

/* A light green disc in a box's top right corner (Om Jordskred's black box);
   additional CSS class jordskred-cirkel on the group. The first block keeps
   clear of it. */
.jordskred-cirkel { position: relative; }
.jordskred-cirkel::after { content: ""; position: absolute; top: var(--wp--preset--spacing--40); right: var(--wp--preset--spacing--40); width: clamp(2.5rem, 5vw, 4.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--wp--preset--color--light-green); pointer-events: none; }
.jordskred-cirkel > :first-child { padding-right: clamp(3rem, 6vw, 5.5rem); }

/* The big star between two text columns (Om Jordskred); additional CSS
   class jordskred-midtstjerne on the middle column. Smaller when the
   columns stack. */
.jordskred-midtstjerne .wp-block-image img { width: 100%; height: auto; }
@media (max-width: 781px) { .jordskred-midtstjerne .wp-block-image { max-width: 55%; margin-inline: auto; } }

/* Separator: a row of dots, or of stars. */
.wp-block-separator.is-style-prikker { border: 0 !important; height: 3rem; width: 100%; max-width: none; background: radial-gradient(circle, currentColor 1.1rem, transparent calc(1.1rem + 1px)) 0 50% / 25% 100% repeat-x; opacity: 1; }
.wp-block-separator.is-style-stjerner { border: 0 !important; height: auto; width: 100%; max-width: none; opacity: 1; text-align: center; font-size: var(--wp--preset--font-size--x-large); line-height: 1; }
.wp-block-separator.is-style-stjerner::before { content: "✴︎  ✴︎  ✴︎  ✴︎  ✴︎"; white-space: pre; letter-spacing: 0.5em; }

/* The party mark on a candidate card's corner (pattern Kandidatkort). */
.wp-block-group.is-style-kort { position: relative; }
.wp-block-group.is-style-kort > .jordskred-partimaerke { position: absolute; top: -2.2rem; left: -1.6rem; margin: 0; width: 72px; }
.wp-block-group.is-style-kort > .jordskred-partimaerke img { width: 72px; height: 72px; object-fit: contain; }
/* The party mark over a portrait's lower corner (candidate pages). */
.wp-block-image.jordskred-partimaerke-portraet { width: 7rem; margin-top: -8rem; margin-bottom: 1rem; position: relative; z-index: 1; }

/* ---- Navigation -------------------------------------------------------- */
/* The menu folds into the hamburger up to 1024 px (WordPress folds at 600), so it never wraps to two lines beside the wordmark. */
@media (min-width: 600px) and (max-width: 1024px) {
	.wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
}
/* The page you are on is underlined, as on the Squarespace site. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
/* "Bliv medlem" is a menu item too, but shown only inside the mobile menu;
   on wide screens the header's yellow button does the job. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .jordskred-nav-cta { display: none; }
/* The mobile menu: the wordmark on top, poster-sized capitals, a star in
   front of each item, the yellow background from the block's settings. */
.wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before { content: ""; display: block; height: 2.2rem; width: 14rem; margin-bottom: var(--wp--preset--spacing--50); background: url("assets/img/jordskred-wordmark-black-800.png") no-repeat left center / contain; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: var(--wp--preset--spacing--30); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.7rem, 7.5vw, 2.6rem); line-height: 1.1; padding: 0.15em 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.jordskred-nav-cta) .wp-block-navigation-item__content::before { content: "✴︎"; margin-right: 0.4em; font-size: 0.7em; vertical-align: 0.15em; display: inline-block; } /* inline-block: the current page's underline stays under the words, not the star */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { text-decoration-thickness: 4px; text-underline-offset: 0.15em; }
.wp-block-navigation__responsive-container.is-menu-open .jordskred-nav-cta { margin-top: var(--wp--preset--spacing--40); }
.wp-block-navigation__responsive-container.is-menu-open .jordskred-nav-cta .wp-block-navigation-item__content { display: inline-block; background: var(--wp--preset--color--black); color: var(--wp--preset--color--yellow); padding: 0.55em 1em; border-radius: var(--jordskred-radius, 4px); font-size: 1.1rem; letter-spacing: 0.04em; text-decoration: none; }
.wp-block-navigation__responsive-container.is-menu-open .jordskred-nav-cta .wp-block-navigation-item__content::before { content: none; }
.wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--black); }
.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

/* A row of small decorative pictures (dots, stars, arrows) from the old
   site, spread across the width; the converter puts them here. */
.jordskred-dekor { display: flex; justify-content: space-between; align-items: center; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; }
.jordskred-dekor .wp-block-image { margin: 0; flex: 0 1 auto; }
.jordskred-dekor img { max-height: 6rem; width: auto; max-width: 9rem; object-fit: contain; }
@media (max-width: 781px) { .jordskred-dekor img { max-height: 3.5rem; max-width: 5rem; } }
/* Columns: the picture column comes first on a phone even when it is last on a desktop. */
@media (max-width: 781px) { .wp-block-columns.is-style-billede-foerst-paa-mobil { flex-wrap: wrap-reverse; } }
/* Details: a yellow box with a rounded edge, as the Signal guide's accordions. */
.wp-block-details.is-style-gul { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--black); border: 2px solid var(--wp--preset--color--black); border-radius: 12px; padding: 0.6rem 1rem; }
.wp-block-details.is-style-gul summary { text-align: center; font-weight: 600; }
.wp-block-details.is-style-gul[open] { padding-bottom: 1rem; }
.wp-block-details.is-style-gul + .wp-block-details.is-style-gul { margin-top: 0.5rem; }
/* A single decorative picture sits in the middle. */
.jordskred-dekor:has(> :only-child) { justify-content: center; }
/* The header: a three-column grid, so the wordmark is centred whatever the
   menu and the button measure; on a phone the hamburger, the wordmark, the button. */
.jordskred-header-row { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--wp--preset--spacing--30); }
.jordskred-header-row .wp-block-navigation__container { flex-wrap: nowrap; gap: var(--wp--preset--spacing--30); }
.jordskred-header-row .wp-block-navigation-item__content { white-space: nowrap; }
.jordskred-header-row > .wp-block-navigation { justify-self: start; }
.jordskred-header-row > .wp-block-site-logo { justify-self: center; }
.jordskred-header-row > .wp-block-buttons { justify-self: end; }
/* On a phone the wordmark shrinks so the hamburger and the button fit beside it and it stays in the middle. */
@media (max-width: 600px) { .jordskred-header-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .jordskred-header-row > .wp-block-site-logo img { width: clamp(110px, 32vw, 180px); height: auto; } }
/* The header's button: one line, a little smaller than the body buttons. */
.jordskred-header-knap .wp-block-button__link { white-space: nowrap; font-size: 0.95rem; padding: 0.55em 1.1em; }
@media (max-width: 781px) { .jordskred-header-knap .wp-block-button__link { font-size: 0.85rem; padding: 0.5em 0.8em; } }
/* The candidate card (pattern Kandidatkort), as on the site's posters:
   the portrait from the chest up, its lower part cut off straight; the name
   card over the portrait's bottom edge; the badge beside the shoulder with a
   bold line over a light one; the party mark on the card's corner. Sizes are
   container-query units of the card's own width, so the badge keeps its
   place beside the shoulder at every width and never covers the name.
   The portrait fills the card's width; the pictures on Vores kandidater are
   framed alike (head top and shoulders at the same height) by
   wordpress/migration/portraits.php. */
.jordskred-kandidat { position: relative; display: grid; justify-items: center; width: 24rem; max-width: 100%; margin-left: auto; margin-right: auto; container-type: inline-size; }
.jordskred-kandidat > .jordskred-portraet { width: 100%; margin: 0; aspect-ratio: 800 / 920; overflow: hidden; }
.jordskred-kandidat > .jordskred-portraet a, .jordskred-kandidat > .jordskred-portraet img { display: block; }
.jordskred-kandidat > .jordskred-portraet img { width: 100%; height: auto; }
.jordskred-kandidat > .is-style-maerkat { position: absolute; right: -7cqi; top: 53cqi; width: 46cqi; padding: 3cqi !important; transform: none; z-index: 2; }
.jordskred-kandidat > .is-style-maerkat p { font-size: clamp(0.75rem, 5.6cqi, 1.45rem); font-weight: 800; line-height: 1.1; letter-spacing: 0; white-space: nowrap; }
.jordskred-kandidat > .is-style-maerkat p + p { font-weight: 300; font-size: clamp(0.6rem, 4.6cqi, 1.2rem); }
.jordskred-kandidat > .is-style-kort { width: 100%; margin-top: -2.8rem; position: relative; z-index: 1; border-radius: 8px; padding: 1.2rem 1.5rem 1.4rem; text-align: center; }
.jordskred-kandidat > .is-style-kort :is(h2, h3) { font-size: clamp(1.1rem, 7cqi, 1.6rem); text-transform: uppercase; margin-bottom: 0.8rem; }
.jordskred-kandidat > .is-style-kort p { font-size: clamp(0.85rem, 4.5cqi, 1.2rem); }
.jordskred-kandidat > .is-style-kort > .jordskred-partimaerke { top: -1.4rem; left: 0.3rem; width: 4.6rem; }
.jordskred-kandidat > .is-style-kort > .jordskred-partimaerke img { width: 4.6rem; height: 4.6rem; }
/* Rows of cards: three a row on a wide screen, two between 782 and 1100 px, one on a phone. */
@media (min-width: 782px) and (max-width: 1100px) {
	.wp-block-columns.jordskred-kandidater-raekke { flex-wrap: wrap !important; justify-content: center; }
	.wp-block-columns.jordskred-kandidater-raekke > .wp-block-column { flex: 0 1 calc(50% - 1rem) !important; }
}
/* Two cards in the last row: closer together, as on the site. */
.jordskred-kandidater-raekke-to { justify-content: center; }
/* The second row's cards stand halfway between the first row's: the same
   column width and gap as a row of three. */
@media (min-width: 1101px) { .jordskred-kandidater-raekke-to > .wp-block-column { flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3) !important; } }

/* Added 20 October 2026 with the second round of patterns. */
.wp-block-image.is-style-ramme img { border: 2px solid var(--wp--preset--color--black); border-radius: 12px; }
.is-style-plakat { display: inline; background: var(--wp--preset--color--black); color: var(--wp--preset--color--yellow); padding: 0.05em 0.35em; line-height: 1.25; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h1.is-style-plakat, h2.is-style-plakat, h3.is-style-plakat { display: inline-block; line-height: 1.05; }
.jordskred-program__raekke { border-bottom: 2px solid var(--wp--preset--color--dark-green); padding-bottom: var(--wp--preset--spacing--30); }
.jordskred-program__raekke:last-child { border-bottom: 0; }
.jordskred-program__raekke p { margin: 0; }

/* Third round of patterns, 20 October 2026. */
.jordskred-tidslinje__raekke { position: relative; padding-left: 2rem; padding-bottom: var(--wp--preset--spacing--40); }
.jordskred-tidslinje__raekke::before { content: ""; position: absolute; left: 0.45rem; top: 0.35rem; bottom: 0; border-left: 2px solid var(--wp--preset--color--dark-green); }
.jordskred-tidslinje__raekke::after { content: ""; position: absolute; left: 0; top: 0.35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--wp--preset--color--yellow); border: 2px solid var(--wp--preset--color--black); }
.jordskred-tidslinje__raekke:last-child::before { display: none; }
.jordskred-tidslinje__raekke p { margin: 0; }
.jordskred-trin .is-style-maerkat { width: 6rem; margin: 0 auto var(--wp--preset--spacing--30); padding: 1rem !important; }
.jordskred-trin .is-style-maerkat p { font-size: var(--wp--preset--font-size--x-large); font-weight: 800; line-height: 1; }
.jordskred-trin .is-style-maerkat p:empty { display: none; }
.jordskred-arrangementer .is-style-maerkat { width: 7.5rem; margin: 0 auto var(--wp--preset--spacing--30); padding: 1.2rem !important; }
.jordskred-arrangementer .is-style-maerkat p { font-weight: 700; line-height: 1.1; }
.jordskred-logoer img { max-height: 72px; width: auto; object-fit: contain; }
.jordskred-stribe .wp-block-buttons { justify-content: flex-end; }
@media (max-width: 781px) { .jordskred-stribe .wp-block-buttons { justify-content: center; } }
.wp-block-table.is-style-gul-hoved table { border-collapse: collapse; }
.wp-block-table.is-style-gul-hoved th { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--black); font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.wp-block-table.is-style-gul-hoved th, .wp-block-table.is-style-gul-hoved td { border: 2px solid var(--wp--preset--color--black); padding: 0.6rem 0.8rem; }
.wp-block-video.is-style-ramme video { border: 2px solid var(--wp--preset--color--black); border-radius: 12px; }

/* Fourth round of patterns, 21 October 2026. */
.jordskred-valgdag .is-style-maerkat { width: 12rem; margin-left: auto; }
.jordskred-stemmeseddel { background: var(--wp--preset--color--white); border-radius: 4px !important; box-shadow: 0 6px 18px rgb(0 0 0 / 0.12); }
.jordskred-stemmeseddel__liste > li { padding-left: 0 !important; border-bottom: 1px solid var(--wp--preset--color--dark-green); padding-bottom: 0.4rem; margin-bottom: 0.4rem; font-size: 1.1rem; }
.jordskred-stemmeseddel__liste > li::before { content: none !important; }
.jordskred-plakatvaeg .wp-block-column { position: relative; }
.jordskred-plakatvaeg__midt { position: relative; z-index: 1; transform: scale(1.08); }
.jordskred-plakatvaeg__maerkat { position: absolute; right: -1rem; top: -1.5rem; z-index: 2; width: 7rem !important; padding: 1rem !important; }
.jordskred-opslag__hoved p { margin: 0; line-height: 1.2; }
.jordskred-opslag__hoved .wp-block-image { margin: 0; }
.jordskred-maal { gap: 0 !important; border: 2px solid var(--wp--preset--color--black); border-radius: 999px; overflow: hidden; }
.jordskred-maal .wp-block-column { padding: 0.35rem 1rem; min-height: 2.2rem; }
.jordskred-maal p { margin: 0; }
.wp-block-list.is-style-tjek > li { padding-left: 2em; }
.wp-block-list.is-style-tjek > li::before { content: ""; width: 1.1em; height: 1.1em; border: 2px solid var(--wp--preset--color--black); border-radius: 4px; top: 0.15em; background: var(--wp--preset--color--white); }
.jordskred-plakat { position: relative; overflow: hidden; }
.jordskred-plakat::before, .jordskred-plakat::after { content: ""; position: absolute; width: clamp(3rem, 8vw, 7rem); aspect-ratio: 1; background: var(--wp--preset--color--yellow); clip-path: var(--jordskred-star); }
.jordskred-plakat::before { top: 1.5rem; left: 1.5rem; }
.jordskred-plakat::after { bottom: 1.5rem; right: 1.5rem; }
.jordskred-plakat h2 { line-height: 0.9; }
.jordskred-tabel-centreret td:not(:first-child), .jordskred-tabel-centreret th:not(:first-child) { text-align: center; }
.jordskred-omtale p { margin: 0 0 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--wp--preset--color--dark-green); }
.jordskred-seddel { padding: var(--wp--preset--spacing--40) !important; min-height: 9rem; display: grid; place-content: center; box-shadow: 2px 4px 10px rgb(0 0 0 / 0.15); }
.jordskred-seddel p { margin: 0; }
.jordskred-knapstak .wp-block-button, .jordskred-knapstak .wp-block-button__link { width: 100%; text-align: center; }
.jordskred-knapstak .wp-block-button__link { font-size: 1.3rem; padding: 0.9em 1.3em; }
/* In a narrow column (a third of the page) the stack's text stays on one line. */
.wp-block-column .jordskred-knapstak .wp-block-button__link { font-size: clamp(0.95rem, 1.15vw, 1.3rem); padding: 1em 1em; }
.jordskred-faktaboks h3 { margin-top: 0; }
.jordskred-tak { width: 100%; max-width: 18rem; margin: 0 auto var(--wp--preset--spacing--40); aspect-ratio: 1; transform: rotate(-6deg); }
.jordskred-tak p:first-child { font-size: var(--wp--preset--font-size--xx-large); font-weight: 800; line-height: 1; }


/* ---- Sign-up pages (Bliv medlem, Donér) ----------------------------------- */
/* On a phone the poster would push the form a screen down; it shows from the
   columns' breakpoint (782 px) up. */
@media (max-width: 781px) { .jordskred-kun-stor { display: none; } }
/* The line of reassurance under a sign-up form. */
.jordskred-tryghed { font-size: var(--wp--preset--font-size--small); text-align: center; margin-top: 0.75rem; }