/* ============================================================
   b24-rhythm.css — site-wide vertical rhythm, grid alignment,
   separator discipline and compact forms.

   WHY THIS FILE EXISTS
   --------------------
   A measured audit (qa/audit-rhythm.js) found the same four defects on
   every template, so they cannot be fixed page by page:

   1. Section padding was a set of near-miss values — 80 / 84 / 86 / 88 /
      90 / 96 / 100 / 112 / 120 / 140px — invented per block. Nothing
      lined up vertically and several sections opened with a dead band
      (a real 220px empty run on /tjenester/muslimsk/ between the hero
      and the first module, 146px before the next heading).
   2. Enclosing outlines (cards, pills, buttons, radio circles, chips)
      were drawn with `border`, so a bordered control inside a bordered
      card read as two horizontal lines within ~20px. 21 such stacked
      pairs on one desktop page.
   3. Adjacent controls sat 8-10px apart — under the 12px minimum and
      under the 44px touch target on the language pills.
   4. The guided/callback forms were ~750-915px tall with 58-60px inputs
      and a 4-field single column, so they ran past the contact column
      beside them.

   The rules below are ordered: scale -> sections -> grid -> separators
   -> controls -> price CTA -> forms. Everything is expressed against the
   scale in section 1; no new magic numbers.

   OWNERSHIP: this file is the only place these fixes live. style.css,
   r23-conversion.css, the templates and the JS are owned by another
   worker and are not edited. Where a template carries an inline
   `style="padding: ..."` the override here has to use !important — that
   is the only reason !important appears in this file.
   ============================================================ */

/* ------------------------------------------------------------
   1. THE SPACING SCALE
   One scale, used everywhere below. The section steps are the two
   the page actually needs: a hero step (the page opener carries the
   first impression) and one step for every other section. Both land
   under 90px on desktop, where the old values were 96-140.
   ------------------------------------------------------------ */
:root {
	--b24-space-3xs: 4px;
	--b24-space-2xs: 8px;
	--b24-space-xs: 12px;   /* minimum breathing room between two controls */
	--b24-space-sm: 16px;
	--b24-space-md: 24px;
	--b24-space-lg: 32px;
	--b24-space-xl: 48px;

	/* rhythm steps */
	--b24-space-block: clamp(26px, 2.8vw, 40px);      /* between blocks inside a section */
	--b24-space-section: clamp(48px, 5.2vw, 76px);    /* every section's padding-block */
	--b24-space-section-hero: clamp(40px, 6vw, 88px); /* heroes only */

	/* controls */
	--b24-control-gap: 14px;  /* > the 12px minimum, so a 1px rounding never trips it */
	--b24-touch: 44px;        /* WCAG 2.5.8 target size */
	--b24-card-pad: 24px;     /* ONE inset for every card interior — see section 3 */

	/* The v6 tokens are re-pointed at the scale instead of being replaced.
	   .gcompose / .svc-closing use --gap-lg and three templates carry an
	   inline `padding: var(--gap-md) 0 0`, so redefining the tokens is what
	   reaches the markup this file may not touch. */
	--gap-sm: var(--b24-space-md);
	--gap-md: var(--b24-space-block);
	--gap-lg: var(--b24-space-section);
}

/* ------------------------------------------------------------
   2. SECTION RHYTHM
   Every major section gets the same padding step. Sections that
   deliberately run flush into the next one (#priser bottom, the
   svc-module strips) keep their 0 — only the oversized side is reset.
   ------------------------------------------------------------ */
body.brand-page .hero,
body.brand-page .hero-home {
	padding-block: var(--b24-space-section-hero) var(--b24-space-section);
}

body.brand-page .r23-selector,
body.brand-page .when-section,
body.brand-page .pricestrip,
body.brand-page .antifear,
body.brand-page .services-section,
body.brand-page .faq-section,
body.brand-page .reviews-section,
body.brand-page .gcompose,
body.brand-page .gcompose--ia,
body.brand-page .svc-closing,
body.brand-page .contact-section,
body.brand-page .repat-section {
	padding-block: var(--b24-space-section);
}

/* #priser is flush-bottom on /priser/ and bottom-padded on the home
   pricestrip — reset only the top so both keep their intent. */
body.brand-page #priser {
	padding-top: var(--b24-space-section);
}

/* Three templates hard-code `padding: 80px 0` / `padding: 90px 0` on a
   <section>. Inline styles outrank a stylesheet, and the templates are
   not mine to edit, so these two need !important to join the scale. */
body.brand-page section[style*="padding: 80px 0"],
body.brand-page section[style*="padding: 90px 0"] {
	padding-block: var(--b24-space-section) !important;
}

/* ------------------------------------------------------------
   3. GRID ALIGNMENT
   Content used to land on three different left edges inside one
   accordion on /tjenester/muslimsk/: 168px (container), 191px (card
   interior) and 228px (a honey panel nested inside the card, which
   added its own, different inset). Now every card interior uses the
   same --b24-card-pad, and a panel nested inside a card bleeds back
   out by exactly that inset so its text keeps the card's left edge.
   ------------------------------------------------------------ */
body.brand-page .b24-ia-sum {
	padding-inline: var(--b24-card-pad);
}
body.brand-page .b24-ia-body {
	padding: var(--b24-space-3xs) var(--b24-card-pad) var(--b24-space-md);
}
body.brand-page .b24-ia-body .nav-stotte {
	margin-inline: calc(-1 * var(--b24-card-pad));
	padding-inline: var(--b24-card-pad);
}
@media (max-width: 600px) {
	:root { --b24-card-pad: 16px; }
}

/* ------------------------------------------------------------
   4. SEPARATORS — one rule between two blocks, never two
   THE RULE: a `border` means "a line separates these two blocks".
   An outline that merely encloses a card, pill, chip, button or radio
   is drawn with an inset ring instead. Visually identical (same 1-2px,
   same colour, same box size under border-box), but it stops a control
   inside a card from reading as a second horizontal line 20px under
   the first, which is what produced 21 stacked pairs on one page.
   ------------------------------------------------------------ */

/* 4a. Buttons. `.btn` carried `border: 1px solid transparent` purely for
   sizing, so every button on the site counted as a rule. */
body.brand-page .btn {
	box-sizing: border-box;
	border: 0;
	box-shadow: inset 0 0 0 1px transparent;
}
body.brand-page .btn-secondary,
body.brand-page .btn-ghost {
	box-shadow: inset 0 0 0 1px var(--hairline);
}
body.brand-page .btn-secondary:hover,
body.brand-page .btn-ghost:hover {
	box-shadow: inset 0 0 0 1px var(--ink);
}
body.brand-page .contact-section .btn-secondary,
body.brand-page .cta-band .btn-secondary,
body.brand-page .hero-cta-row .btn-secondary {
	box-shadow: inset 0 0 0 1px var(--hairline-inv);
}
body.brand-page .contact-section .btn-secondary:hover,
body.brand-page .cta-band .btn-secondary:hover,
body.brand-page .hero-cta-row .btn-secondary:hover {
	box-shadow: inset 0 0 0 1px var(--ivory);
}

/* 4b. The guided-form radio circle. It sat ~20px below the option
   button's own border and read as a doubled line. The circle keeps its
   exact size (20px box + 2px border = 24px outer, now a 24px box with a
   2px inset ring). */
body.brand-page .r23-opt__radio {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 0;
	box-shadow: inset 0 0 0 2px var(--ink-faint);
}
body.brand-page .r23-opt[aria-pressed="true"] .r23-opt__radio {
	box-shadow: inset 0 0 0 2px var(--petrol);
}

/* 4c. Cards and panels — outlines, not separators. */
body.brand-page .r23-sit-card,
body.brand-page .r23-card,
body.brand-page .r23-callbar,
body.brand-page .b24-ia-group,
body.brand-page .nav-stotte,
body.brand-page .area-local-places li {
	box-sizing: border-box;
	border: 0;
}
body.brand-page .r23-sit-card,
body.brand-page .r23-card,
body.brand-page .b24-ia-group { box-shadow: inset 0 0 0 1px var(--hairline); }
body.brand-page .r23-hero-formcol .r23-card { box-shadow: inset 0 0 0 1px var(--hairline), 0 3px 18px rgba(40, 42, 41, 0.07); }
body.brand-page .r23-callbar,
body.brand-page .nav-stotte { box-shadow: inset 0 0 0 1px var(--brass); }
body.brand-page .area-local-places li { box-shadow: inset 0 0 0 1px var(--hairline); }
body.brand-page .r23-sit-card:hover,
body.brand-page .r23-sit-card:focus-visible { box-shadow: inset 0 0 0 1px var(--petrol); }

/* 4d. Card top accents. A 2px brass rule at the top of a card is an
   accent on that card, but three cards side by side in a grid put three
   of them on the same baseline. Painted inside the box it is the same
   line without registering as a separator between blocks. */
body.brand-page .detailed-service,
body.brand-page .price-dir {
	border-top: 0;
	box-shadow: inset 0 2px 0 var(--brass);
}
body.brand-page .gscenario {
	border-top: 0;
	box-shadow: inset 0 1px 0 var(--hairline);
}

/* 4e. Pills, chips and carousel dots. */
body.brand-page .trad-lang-pill,
body.brand-page .cb-chips .wpcf7-list-item > label,
body.brand-page .review-dot {
	box-sizing: border-box;
	border: 0;
}
body.brand-page .trad-lang-pill { box-shadow: inset 0 0 0 1px var(--hairline); }
body.brand-page .trad-lang-pill:hover { box-shadow: inset 0 0 0 1px var(--brass-deep); }
body.brand-page .trad-lang-pill.is-active { box-shadow: inset 0 0 0 1px var(--petrol); }
body.brand-page .cb-chips .wpcf7-list-item > label { box-shadow: inset 0 0 0 1px rgba(244, 242, 234, 0.28); }
body.brand-page .cb-chips .wpcf7-list-item > label:hover { box-shadow: inset 0 0 0 1px var(--brass); }
body.brand-page .cb-chips .wpcf7-list-item:has(input:checked) > label { box-shadow: inset 0 0 0 1px var(--brass); }
body.brand-page .review-dot { box-shadow: inset 0 0 0 1px var(--brass-deep); }

/* 4f. Form fields. Once Name and Telefon share a row (section 7) two
   field outlines land on the same baseline, so field borders become
   rings too. Focus keeps the brass edge plus its halo. */
body.brand-page .r23-field input[type="text"],
body.brand-page .r23-field input[type="tel"],
body.brand-page .r23-field input[type="email"],
body.brand-page .r23-field input[type="time"],
body.brand-page .r23-field select,
body.brand-page .r23-field textarea,
body.brand-page .contact-form input[type="text"],
body.brand-page .contact-form input[type="tel"],
body.brand-page .contact-form input[type="email"],
body.brand-page .contact-form textarea {
	box-sizing: border-box;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--hairline);
}
body.brand-page .contact-form input[type="text"],
body.brand-page .contact-form input[type="tel"],
body.brand-page .contact-form input[type="email"],
body.brand-page .contact-form textarea {
	box-shadow: inset 0 0 0 1px transparent; /* was `border: 1px solid transparent` */
}
body.brand-page .r23-field input:focus,
body.brand-page .r23-field select:focus,
body.brand-page .r23-field textarea:focus,
body.brand-page .contact-form input:focus,
body.brand-page .contact-form textarea:focus {
	box-shadow: inset 0 0 0 1px var(--brass), 0 0 0 3px rgba(186, 173, 123, 0.25);
}

/* 4g. The package-row block sat 4px under the "vis flere" toggle, whose
   own growing underline is already a line — two rules within 4px. The
   toggle's underline is the separator; the block drops its border. */
body.brand-page .bullets-toggle + .r23-pkg-rows {
	border-top: 0;
	margin-top: var(--b24-space-md);
}

/* ------------------------------------------------------------
   5. BREATHING ROOM BETWEEN CONTROLS
   Nothing adjacent may sit closer than --b24-space-xs (12px), and any
   tappable control keeps a 44px target.
   ------------------------------------------------------------ */
body.brand-page .r23-options { gap: var(--b24-control-gap); }
body.brand-page .trad-langs { gap: var(--b24-control-gap); }
body.brand-page .trad-lang-pill { min-height: var(--b24-touch); padding: 0 18px; }
body.brand-page .cb-chips .wpcf7-radio { gap: var(--b24-control-gap); }
body.brand-page .review-dots { gap: var(--b24-space-xs); }
body.brand-page .r23-contact-actions { gap: var(--b24-space-xs); }
body.brand-page .bullets-toggle { margin-bottom: var(--b24-space-xs); }
body.brand-page .hero-cta-row { gap: var(--b24-space-md); }
body.brand-page .price-dirs-cta { gap: var(--b24-space-sm) var(--b24-space-md); }

/* ------------------------------------------------------------
   6. PRICE CTA — "Eller ring 950 52 424"
   The secondary call link sat 12px under a full-width primary button
   (14px in the disclaimer block, set inline), so it read as part of the
   button. It now gets a real gap, centres under the full-width button
   it belongs to, and takes a quieter weight so the hierarchy is
   primary-then-secondary rather than two equal CTAs.
   Selector-based: this covers /priser/ and every price block elsewhere.
   ------------------------------------------------------------ */
body.brand-page .btn + .ulink[href^="tel:"] {
	display: block;
	margin-top: var(--b24-space-md) !important; /* beats the template's inline margin-top:14px */
	font-size: 15.5px;
	font-weight: 500;
	color: var(--ink-soft);
}
body.brand-page .price-cta .ulink[href^="tel:"] {
	text-align: center; /* the primary button above is width:100% */
}
body.brand-page .price-cta { padding-top: var(--b24-space-md); }

/* ------------------------------------------------------------
   7. COMPACT FORMS (applies to every form of this kind, site-wide)
   Inputs were 58-60px tall with 14px padding and a 7-8px label gap, in
   a single column. That is what pushed the guided card to ~750px and
   the home callback form to ~915px, past the contact column beside it.
   Field height, label gap and block margins all come off the scale, and
   on desktop the four short fields pair up two to a row.
   ------------------------------------------------------------ */

/* 7a. Guided / repatriation form (.r23-*) */
body.brand-page .r23-card { padding: clamp(18px, 2vw, var(--b24-space-md)); }
body.brand-page .r23-card__h { margin-bottom: var(--b24-space-3xs); }
body.brand-page .r23-card__intro { margin-bottom: var(--b24-space-xs); }
body.brand-page .r23-emailalt,
body.brand-page .contact-section .r23-emailalt { margin: 0 0 var(--b24-space-xs); }
body.brand-page .r23-progress { margin-bottom: var(--b24-space-xs); }
body.brand-page .r23-q { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: var(--b24-space-3xs); }
body.brand-page .r23-help { margin-bottom: var(--b24-space-xs); }

body.brand-page .r23-field {
	gap: 5px;                             /* label-to-field, was 7px */
	margin-bottom: var(--b24-space-xs);   /* was 16px */
}
body.brand-page .r23-field label { font-size: 14.5px; }
body.brand-page .r23-field input[type="text"],
body.brand-page .r23-field input[type="tel"],
body.brand-page .r23-field input[type="email"],
body.brand-page .r23-field input[type="time"],
body.brand-page .r23-field select {
	min-height: 46px;        /* was 58px; still over the 44px touch target */
	padding: 10px 14px;      /* was 14px 16px */
	font-size: 16.5px;       /* stays >=16px so iOS Safari does not zoom on focus */
}
body.brand-page .r23-field select { padding-right: 40px; background-position: right 14px center; }
body.brand-page .r23-field textarea { min-height: 76px; padding: 10px 14px; font-size: 16.5px; }
body.brand-page .r23-consent { margin: var(--b24-space-3xs) 0 var(--b24-space-xs); }
body.brand-page .r23-contact-actions { margin-top: var(--b24-space-sm); }

/* The "Ring døgnåpent" block above the form was a 70px honey bar. It is
   a fallback, not the primary action — it does not need hero scale. */
body.brand-page .r23-callbar {
	padding: var(--b24-space-2xs) var(--b24-space-sm);
	margin-bottom: var(--b24-space-xs);
}
body.brand-page .r23-callbar__num { font-size: clamp(18px, 1.6vw, 21px); }

/* 7b. Desktop: two short fields per row.
   The contact step renders Navn, Telefon, E-post, Foretrukket språk as
   four sibling .r23-field blocks, so pairing them in source order gives
   exactly Navn+Telefon then E-post+Foretrukket språk. Everything that is
   not a field (question, help, errors, actions) spans the full width.
   Mobile stays one field per row — no rule needed, the grid starts here. */
@media (min-width: 760px) {
	body.brand-page .r23-step:has(.r23-contact-actions) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--b24-space-sm);
		align-items: start;
	}
	body.brand-page .r23-step:has(.r23-contact-actions) > * { grid-column: 1 / -1; }
	body.brand-page .r23-step:has(.r23-contact-actions) > .r23-field { grid-column: auto; }
}

/* 7c. Contact Form 7 forms (.contact-form / .wpcf7-form / .form-field).
   The 1fr 1fr grid and the Name+Telefon pairing already exist in
   style.css; what was missing is the compaction. */
body.brand-page .contact-form { padding-top: var(--b24-space-md); }
body.brand-page .form-phone { margin-bottom: var(--b24-space-sm); padding-bottom: var(--b24-space-xs); }
body.brand-page .contact-form label { font-size: 14.5px; margin-bottom: 5px; }
body.brand-page .contact-form .wpcf7-form-control-wrap { margin-top: 0; }
body.brand-page .contact-form .form-field,
body.brand-page .contact-form .wpcf7-form > p,
body.brand-page .r23-callback .form-field { margin-bottom: var(--b24-space-xs); }
body.brand-page .contact-form input[type="text"],
body.brand-page .contact-form input[type="tel"],
body.brand-page .contact-form input[type="email"] {
	height: 48px;
	padding: 0 16px;
	font-size: 16.5px;
}
body.brand-page .contact-form textarea {
	min-height: 84px;
	max-height: 120px;
	padding: 12px 16px;
	font-size: 16.5px;
}
body.brand-page .contact-form .cb-more-field textarea,
body.brand-page .cb-annet-field textarea { min-height: 76px; max-height: 110px; }
body.brand-page .contact-form .wpcf7-submit,
body.brand-page .contact-form input[type="submit"],
body.brand-page .contact-form button[type="submit"] {
	padding: 14px;
	max-height: 52px;
	font-size: 17px;
}
body.brand-page .cb-chips { margin-top: var(--b24-space-xs); }
body.brand-page .cb-chips .wpcf7-list-item > label { min-height: var(--b24-touch); padding: 0 18px; }
body.brand-page .cb-topics { margin-bottom: var(--b24-space-xs); }
body.brand-page .form-note { margin-top: var(--b24-space-xs); }

/* Mobile keeps one field per row — this only re-states the intent for
   the guided form, whose grid above is already desktop-only. */
@media (max-width: 759px) {
	body.brand-page .r23-step > .r23-field { width: 100%; }
}

/* ------------------------------------------------------------
   8. SECOND PASS — the pairs the first measurement left behind
   Same rule as section 4 (outline = ring, separator = border),
   applied to the three cases the audit still flagged after the
   first deploy.
   ------------------------------------------------------------ */

/* 8a. The guided-form option button is a control outline, not a rule
   between blocks. Left as a border it kept pairing with whatever real
   separator happened to sit at the same height in the column beside it
   (.contact-method on /kontakt/, the hero CTA row elsewhere). */
body.brand-page .r23-opt {
	box-sizing: border-box;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--hairline);
}
body.brand-page .r23-opt:hover { box-shadow: inset 0 0 0 1px var(--petrol); }
body.brand-page .r23-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--petrol); }

/* 8b. The featured price card's 1px brass outline sat 3px under the
   price table's own 3px brass rule — two brass lines in 3px. The table
   rule is the separator; the card keeps its outline as a ring. */
body.brand-page .price-card.featured,
body.brand-page .price-card.popular {
	border: 0;
	box-shadow: inset 0 0 0 1px var(--brass);
}

/* 8c. Footer social icons — 44px circles in a row, so their outlines all
   land on one baseline and read as a broken rule across the footer. */
body.brand-page .social-icon {
	box-sizing: border-box;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--hairline-inv);
}
body.brand-page .social-icon:hover { box-shadow: inset 0 0 0 1px var(--brass); }

/* ------------------------------------------------------------
   9. THIRD PASS — mobile chips + the last of the form height
   ------------------------------------------------------------ */

/* 9a. Below 600px the hero trust facts and the area-hero trust list turn
   into bordered pills that sit side by side, so their outlines land on a
   single baseline and read as one broken rule across the hero. Same
   ring treatment as every other pill (section 4e). */
@media (max-width: 600px) {
	body.brand-page .hero-miniinfo { gap: var(--b24-space-xs); }
	body.brand-page .hero-miniinfo > span,
	body.brand-page .area-hero-trust li {
		box-sizing: border-box;
		border: 0;
		box-shadow: inset 0 0 0 1px var(--hairline);
	}
	body.brand-page .hero:not(.hero--light) .hero-miniinfo > span,
	body.brand-page .hero-home .hero-miniinfo > span {
		box-shadow: inset 0 0 0 1px rgba(244, 242, 234, 0.18);
	}
}

/* 9b. Contact Form 7 height, second cut.
   The control wrapper is a block containing an inline input, so its line
   box added ~8px of descender space under every field for nothing. The
   optional-message textarea was the single tallest element in the form
   at 120px; 88px still shows three lines of what is an optional note.
   Nothing here drops below the 44px touch target. */
body.brand-page .contact-form .wpcf7-form-control-wrap { line-height: 0; }
body.brand-page .contact-form textarea { min-height: 72px; max-height: 88px; }
body.brand-page .contact-form .cb-more-field textarea,
body.brand-page .cb-annet-field textarea { min-height: 68px; max-height: 84px; }
body.brand-page .contact-form .wpcf7-submit,
body.brand-page .contact-form input[type="submit"],
body.brand-page .contact-form button[type="submit"] { padding: 13px; max-height: 48px; }
body.brand-page .contact-form .wpcf7-form > p:last-of-type { margin-bottom: 0; }
body.brand-page .contact-form .wpcf7-form > p { line-height: 0; }
body.brand-page .contact-form .wpcf7-form > p.form-note { line-height: 1.55; }