/**
 * Hardline — component and behaviour CSS.
 *
 * Ownership rule: theme.json owns supported defaults (palette, type scale,
 * spacing, button element). This file owns only components and behaviour that
 * theme.json cannot express. Never hardcode a hex here — use palette vars.
 */

/* ---------------------------------------------------------------------------
   0. The edge
   ------------------------------------------------------------------------ */

/*
 * One inline edge for the whole site.
 *
 * WordPress has two alignment systems that disagree on wide screens: a
 * constrained layout centres content in a `contentSize` column, while a
 * full-width section with gutter padding starts at the gutter. At 1920px that
 * is 304px versus 64px — the site looks like two sites stacked.
 *
 * `--hl-edge` resolves to whichever is larger: the gutter on narrow screens,
 * or the centred column's edge on wide ones. Every full-bleed component uses
 * it, so headers, heroes, bands and constrained sections all share one edge.
 *
 * `100%` deliberately, not `100vw`. Every component that applies this is itself
 * full width inside a full-width containing block, so the two agree — except
 * that `100vw` also counts the vertical scrollbar. On a system with classic
 * (non-overlay) scrollbars `100vw` overstates the viewport by ~15px, which
 * pushes the computed edge out and can overflow the page to the right.
 */
:root {
	--hl-content: 1312px;
	--hl-cell-pad: 26px;
}

@media (max-width: 760px) {
	:root { --hl-cell-pad: 20px; }
}

/* ---------------------------------------------------------------------------
   1. Layout plumbing
   ------------------------------------------------------------------------ */

/* Root blockGap otherwise leaves blank slivers between full-width sections,
   under the sticky header and above the footer. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > header {
	margin-top: 0;
	margin-block-start: 0;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Condensed display voice. The wdth axis is what makes this theme's headings
   read as condensed without a second font file. */
h1, h2, h3, h4, h5,
.wp-block-post-title,
.hl-display {
	font-variation-settings: 'wdth' 78;
	text-wrap: balance;
}

p { text-wrap: pretty; }

/* Nothing in this theme has rounded corners. It is a load-bearing decision. */
.wp-block-button__link,
.wp-block-image img,
.wp-block-cover,
.wp-block-group,
input, textarea, select {
	border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   2. Sections
   ------------------------------------------------------------------------ */

/* Every content section shares one vertical padding value. Rhythm comes from
   alternating backgrounds, never from spacing drift. */
.is-style-section-flush {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
	padding-left: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--60);
}

/* The single deliberate second tier: edge bands (CTA, footer). */
.hl-band {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	padding-left: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--60);
}

/*
 * Components that lay their own content out directly, rather than handing it to
 * a constrained inner container, must take the edge themselves — otherwise they
 * sit at the gutter while every constrained section sits at the column edge.
 */
.hl-header,
.hl-rail,
.hardline-pattern-cta-band,
.hl-hero .wp-block-cover__inner-container,
.hardline-pattern-stat-band {
	padding-left: max(var(--wp--preset--spacing--60), calc((100% - var(--hl-content)) / 2));
	padding-right: max(var(--wp--preset--spacing--60), calc((100% - var(--hl-content)) / 2));
}

.hl-section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: 38px;
}

/* ---------------------------------------------------------------------------
   3. Colour roles on dark surfaces
   ------------------------------------------------------------------------ */

/* `muted` (#67605A) only reaches 3.1:1 against ink — it must never carry text
   on a dark surface. On dark, muted text uses the on-dark token instead. */
.has-ink-background-color .hl-muted,
.has-surface-mid-background-color .hl-muted,
.hl-on-dark .hl-muted {
	color: var(--wp--preset--color--on-dark) !important;
}

.hl-muted {
	color: var(--wp--preset--color--muted);
}

.hl-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.6;
}

.hl-lede {
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.62;
	max-width: 52ch;
}

/*
 * The 52ch measure exists to stop lines running too long in a full-width
 * container. Inside a column that is already narrower than that, the cap does
 * nothing useful and a lot of harm: the lede stops short while the paragraphs
 * under it run to the column edge, so the column has a ragged right side.
 *
 * Symmetry rule: within a text column, every block shares the column's right
 * edge. A deliberately narrower measure belongs in a full-width context only.
 */
.wp-block-column .hl-lede,
.wp-block-column .hl-lede.hl-muted {
	max-width: none;
}

/*
 * A column carrying several paragraphs of running text, not two or three
 * lines of intro. At the split the city pages use, the text column is 721px
 * wide — around 85 characters per line, which is past the point where the eye
 * reliably finds the next line's start.
 *
 * The cap goes on the column, not on the paragraphs, so the symmetry rule
 * above still holds: every block inside still shares the column's right edge,
 * the edge just sits further left. Below the columns breakpoint the column is
 * already narrower than the cap, so this is inert on mobile.
 *
 * 56ch, not 70ch, for the ~70-character measure being aimed at. `ch` is the
 * advance of "0", which in this face is 9.74px at the 17px body size, while
 * the average character actually costs 7.8px. Measured against rendered line
 * boxes, 56ch lands on ~70 characters; 70ch would land on ~87 and leave the
 * column no narrower than it started.
 */
.wp-block-column.hl-measure {
	max-width: 56ch;
}

/* Accent mark on a heading word — the signature device. */
.is-style-mark-accent mark,
.hl-mark {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	padding: 0 0.16em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------ */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s, color 0.25s, box-shadow 0.25s;
	max-width: 320px;
}

.wp-block-button__link:hover {
	transform: translate(-3px, -3px);
	box-shadow: var(--wp--preset--shadow--hard);
}

/* Ghost variant. Both background AND text are set explicitly for every surface
   so a button can never render text the same colour as its fill. */
.is-style-ghost .wp-block-button__link,
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--ink);
	box-shadow: none;
}

.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	box-shadow: none;
	transform: translate(-3px, -3px);
}

/* Ghost on a dark surface flips to the accent so it stays legible. A cover or
   hero counts as dark too — without these selectors the ghost button renders
   ink-on-ink and disappears entirely. */
.has-ink-background-color .is-style-ghost .wp-block-button__link,
.has-surface-mid-background-color .is-style-ghost .wp-block-button__link,
.hl-on-dark .is-style-ghost .wp-block-button__link,
.hl-hero .is-style-ghost .wp-block-button__link,
.wp-block-cover .is-style-ghost .wp-block-button__link {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	background-color: transparent;
}

.has-ink-background-color .is-style-ghost .wp-block-button__link:hover,
.has-surface-mid-background-color .is-style-ghost .wp-block-button__link:hover,
.hl-on-dark .is-style-ghost .wp-block-button__link:hover,
.hl-hero .is-style-ghost .wp-block-button__link:hover,
.wp-block-cover .is-style-ghost .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

/* Generic link colour rules must never repaint a button label. */
.hl-card a:not(.wp-block-button__link),
.hl-panel a:not(.wp-block-button__link) {
	color: currentColor;
}

:where(a):focus-visible,
:where(button):focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   5. Grids
   ------------------------------------------------------------------------ */

/* auto-FIT, not auto-fill: auto-fill leaves a dead empty track. */
.hl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
}

/*
 * Hairline grid.
 *
 * The obvious build — 1px gaps over a coloured container — forces every cell to
 * carry horizontal padding, which insets its text one step further than every
 * other element on the page. Compensating with negative margins loses to the
 * constrained layout's `margin-inline: auto !important`.
 *
 * So the cells carry no horizontal padding at all: they sit flush on the shared
 * edge, and the dividers are drawn inside the column gap by pseudo-elements.
 * `overflow: hidden` clips the leading divider of each row, which is what makes
 * this work with `auto-fit` where "first cell in the row" is not addressable.
 */
.hl-grid-hairline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	column-gap: calc(2 * var(--hl-cell-pad));
	row-gap: 0;
	background: none;
	align-items: stretch;
	overflow: hidden;
	/*
	 * The dividers have to follow the surface, exactly as `.hl-muted` does.
	 * They were hard-coded to `line-dark` — a 20% paper line built for dark
	 * surfaces — which made every hairline grid on a light section invisible:
	 * a 20% #F7F5F0 line drawn on #F7F5F0 is the background. Light is the
	 * default here because that is the page base; dark surfaces opt in below.
	 */
	--hl-hairline: var(--wp--preset--color--line);
}

.hl-grid-hairline.hl-on-ink,
.hl-on-dark .hl-grid-hairline,
.has-ink-background-color .hl-grid-hairline,
.has-surface-mid-background-color .hl-grid-hairline {
	--hl-hairline: var(--wp--preset--color--line-dark);
}

.hl-grid-hairline > * {
	position: relative;
	padding-inline: 0;
	background: transparent;
}

/* Column divider — centred in the gap. */
.hl-grid-hairline > *::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--hl-cell-pad));
	width: 1px;
	background: var(--hl-hairline);
}

/* Row divider — only visible once the grid wraps; the first row's is clipped. */
.hl-grid-hairline > *::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: var(--hl-hairline);
}

/* WordPress adds margin-block-start to every layout child except the first,
   which offsets grid items inside their cells and breaks row alignment. */
.hl-grid > *,
.hl-grid-hairline > * {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	/* Grid items default to min-width:auto, so an image's intrinsic width can
	   push a card wider than its track and overflow the page. */
	min-width: 0;
	/*
	 * `stretch` is already the default, and stating it is not decoration — it
	 * is what keeps the cards from vanishing in WebKit.
	 *
	 * A .hl-card carries no in-flow content: the photo and the .hl-card__body
	 * are both absolutely positioned, so the box has nothing to take a size
	 * from and leans entirely on `aspect-ratio` plus the stretch into its
	 * track. Combined with the `min-width: 0` above, WebKit resolves the inline
	 * size from that empty content instead of the track, and the card collapses
	 * to 0x0 — no image, no text, an invisible row.
	 *
	 * Measured on iPhone 15: 18 of 18 cards on /stationer-aktiviteter and 7 of 9
	 * on the home page were 0x0. The panel card survived, which is the tell —
	 * its heading and paragraph are in normal flow. Chrome was unaffected, so
	 * this only ever showed on real iOS hardware.
	 *
	 * Note for anyone tempted by a padding-top ratio hack instead: it does not
	 * help here. The collapse is on the inline axis, and 125% of zero is zero.
	 */
	justify-self: stretch;
}

.hl-grid-hairline > * {
	padding-block: 30px;
}

.hl-grid-hairline.hl-on-ink > * {
	padding-block: 32px;
}

/* ---------------------------------------------------------------------------
   6. Media cards
   ------------------------------------------------------------------------ */

.hl-card {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	aspect-ratio: 4 / 5;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

/* The image fills the card as a background layer. Taking it out of flow also
   stops its intrinsic width from driving the card's min-content width. */
.hl-card .wp-block-image,
.hl-card figure {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
}

.hl-card img,
.hl-card .wp-block-image img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hl-card:hover img {
	transform: scale(1.06);
}

.hl-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--media-scrim);
	pointer-events: none;
}

/* The scrim exists to make text legible over a photo. A card with no photo —
   an accent or outline panel — must not get it, or the panel fades to black. */
.hl-card.is-style-panel-accent::after,
.hl-card.is-style-panel-outline::after,
.hl-card:not(:has(img))::after {
	content: none;
}

.hl-card__body {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 1;
}

.hl-card__eyebrow {
	color: var(--wp--preset--color--accent);
	margin-bottom: 6px;
}

/*
 * The featured card spans 2 columns x 3 rows, not 2 x 2. Two reasons, and the
 * second is why it stays that way: the drone photo it carries is a top-down of
 * a full course, which is a long thin shape — at 2x2 (0.80) two thirds of the
 * course length would be cropped away, at 2x3 (0.53) none of it is. And with
 * nine cards in a five-column grid, 2x3 leaves one empty cell where 2x2 left
 * four.
 */
.hl-card--featured {
	grid-column: span 2;
	grid-row: span 3;
	aspect-ratio: auto;
}

.hl-card--featured .hl-card__body {
	left: 26px;
	right: 26px;
	bottom: 24px;
}

/* Description reveals on hover, but hover does not exist on touch — so on
   touch and narrow screens it is always visible. */
.hl-card__desc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: rgba(247, 245, 240, 0.88);
	margin: 6px 0 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.45s, opacity 0.35s;
}

.hl-card:hover .hl-card__desc,
.hl-card:focus-within .hl-card__desc {
	max-height: 6em;
	opacity: 1;
}

@media (hover: none), (max-width: 760px) {
	.hl-card__desc {
		max-height: 6em;
		opacity: 1;
		transition: none;
	}
}

@media (max-width: 760px) {
	/*
	 * One column on phones, not two.
	 *
	 * Two 171px columns put the card description in a measure of roughly
	 * fifteen characters per line. Four lines of that is unpleasant to read
	 * even when it fits, and on ten of the twenty-three station cards it did
	 * not fit: `.hl-card__desc` caps at 6em, so the sentence was cut mid-word
	 * with no ellipsis.
	 *
	 * A full-width card fixes both at once — the measure becomes readable and
	 * nothing is clipped — and it suits a photo-led page better than a pair of
	 * thumbnails. 16/9 rather than the desktop 4/5 keeps the list scrollable:
	 * the page grows from 4843px to 6984px, where a full-height 4/5 card would
	 * have taken it to 12566px.
	 */
	.hl-grid {
		grid-template-columns: 1fr;
	}
	.hl-card {
		aspect-ratio: 16 / 9;
	}
	/* 8/15 = 0.533, the same shape the 2x3 span produces on desktop, so the
	   photo is cropped identically at both ends of the range. Declared after
	   the rule above, which shares its specificity, so it stays portrait. */
	.hl-card--featured {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 8 / 15;
	}
}

/* ---------------------------------------------------------------------------
   7. Panels
   ------------------------------------------------------------------------ */

.is-style-panel-accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	padding: 24px;
}

/*
 * A panel used as a grid card gets its height from its image-card siblings,
 * which are locked to aspect-ratio 4/5. At a 390px viewport that cell is
 * 169x211 while three lines of content plus padding needed 212 — one pixel
 * over, and one pixel was enough to lose a whole line.
 *
 * The reason it fails so badly is that WordPress's vertical flex layout
 * defaults to `flex-wrap: wrap`. An overflowing child does not clip at the
 * bottom; it wraps into a second flex column — here at x=157 inside a 169px
 * card — and `overflow: hidden` on .hl-card ate all but a 12px slice of it.
 * Below roughly 391px, which covers the iPhone SE and the 12/13/14 widths,
 * the line was invisible rather than merely cropped.
 *
 * `nowrap` is the guard: content that does not fit is clipped at the bottom,
 * which fails gracefully and legibly.
 *
 * The room itself came from the copy — the label is one line now, not two,
 * which leaves 18px of slack at 390px. That is enough today, so the padding
 * stays at 24px everywhere. If a longer label ever pushes it over again, this
 * guard means a clipped descender rather than a vanished line.
 */
.hl-card.is-style-panel-accent,
.hl-card.is-style-panel-outline {
	flex-wrap: nowrap;
}

.is-style-panel-outline {
	border: 1px solid var(--wp--preset--color--line);
	padding: 24px;
}

/* ---------------------------------------------------------------------------
   8. Marquee rail
   ------------------------------------------------------------------------ */

.hl-rail {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	border-top: 1px solid var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--ink);
	padding: 15px max(var(--wp--preset--spacing--60), calc((100% - var(--hl-content)) / 2));
	overflow: hidden;
	white-space: nowrap;
}

.hl-rail__track {
	display: flex;
	gap: 34px;
	width: max-content;
	padding-right: 34px;
	animation: hl-rail-slide 34s linear infinite;
}

.hl-rail__track > * {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.hl-rail:hover .hl-rail__track {
	animation-play-state: paused;
}

@keyframes hl-rail-slide {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.hl-rail__track { animation: none; }
	.hl-rail { overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   9. Header and navigation
   ------------------------------------------------------------------------ */

/*
 * A sticky element can only travel inside its parent's box, and the template
 * part wraps the header in a div that is exactly the header's own height — so
 * `position: sticky` computes correctly, reports `sticky`, and still scrolls
 * away immediately because it has nowhere to travel. Removing the wrapper's box
 * with `display: contents` promotes the header to a child of the page column,
 * which is what it has to be for sticky to mean anything.
 *
 * Matched on `:has()` rather than a class so every template gets it without
 * each one having to remember to tag its header slot.
 */
.wp-block-template-part:has(> .hl-header) {
	display: contents;
}

/* No backdrop-filter/transform/filter here — they would create a containing
   block and trap any position:fixed overlay inside the header. */
.hl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-bottom: 1px solid rgba(247, 245, 240, 0.14);
	padding: 15px max(var(--wp--preset--spacing--60), calc((100% - var(--hl-content)) / 2));
	gap: var(--wp--preset--spacing--40);
}

/* The logo and the CTA must never shrink or be pushed past the gutter. Left to
   flex defaults the CTA group shrinks below its button's width and the button
   spills through the right edge of the window. The nav is the only group
   allowed to give way, and the drawer takes over before it has to. */
.hl-header > .wp-block-site-logo,
.hl-header > *:last-child {
	flex: 0 0 auto;
}

.hl-header .wp-block-navigation {
	flex: 0 1 auto;
	min-width: 0;
}

.hl-header .hl-cta .wp-block-button__link {
	white-space: nowrap;
}

.hl-header .wp-block-navigation {
	gap: 20px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	flex-wrap: nowrap;
}

/* Menu labels must never wrap: a wrapped label silently grows the header from
   one row to two and reads as broken. Let them stay on one line and hand over
   to the drawer before the row itself runs out of width. */
.hl-header .wp-block-navigation .wp-block-navigation-item {
	white-space: nowrap;
}

.hl-header .wp-block-navigation-item__content {
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

.hl-header .wp-block-navigation-item__content:hover,
.hl-header .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* The desktop submenu otherwise inherits the mobile overlay's preset colour
   classes (applied with !important) and renders as a cramped dark box. */
@media (min-width: 782px) {
	.hl-header .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--ink) !important;
		color: var(--wp--preset--color--paper) !important;
		border: 1px solid rgba(247, 245, 240, 0.22) !important;
		border-radius: 0 !important;
		box-shadow: 8px 8px 0 rgba(20, 20, 15, 0.35);
		padding: 6px !important;
		min-width: 240px;
		gap: 0 !important;
		margin-top: 0;
	}

	/* No margin gap between trigger and panel — crossing a gap drops :hover. */
	.hl-header .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -10px;
		height: 10px;
	}

	.hl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--paper) !important;
		padding: 10px 14px !important;
		border-bottom: 0;
		white-space: nowrap;
		font-weight: 600;
	}

	.hl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--ink) !important;
	}
}

/* ---------------------------------------------------------------------------
   10. Mobile drawer
   ------------------------------------------------------------------------ */

.hl-burger,
.hl-drawer {
	display: none;
}

.hl-burger {
	appearance: none;
	background: transparent;
	border: 1.5px solid rgba(247, 245, 240, 0.4);
	color: var(--wp--preset--color--paper);
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.hl-burger:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Core only collapses its own nav at 600px, which lets a wide menu wrap to two
   rows on tablet. Hand over to the drawer before the inline nav can wrap.
   1410px is measured, not guessed: this header needs 1373px for a single row —
   the breakpoint sits above it so the CTA always keeps its full gutter. */
@media (max-width: 1410px) {
	.hl-header .wp-block-navigation { display: none; }
	.hl-burger { display: inline-flex; }
}

.hl-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	flex-direction: column;
	overflow-y: auto;
	/* The drawer is the viewport; nothing inside it may scroll sideways. Rows are
	   sized in border-box below so this should never engage — it is here so a
	   future overlong label or a plugin's markup cannot reintroduce the
	   horizontal scrollbar behind the open menu. */
	overflow-x: hidden;
	overscroll-behavior: contain;
}

.hl-drawer.is-open {
	display: flex;
}

.hl-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px var(--wp--preset--spacing--60);
	border-bottom: 1px solid rgba(247, 245, 240, 0.14);
}

.hl-drawer__close {
	appearance: none;
	background: transparent;
	border: 1.5px solid rgba(247, 245, 240, 0.4);
	color: var(--wp--preset--color--paper);
	width: 46px;
	height: 46px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.hl-drawer__close:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.hl-drawer__nav {
	padding: var(--wp--preset--spacing--30) 0;
}

.hl-drawer__nav a,
.hl-drawer__nav .wp-block-navigation-item__content,
.hl-drawer__toggle {
	/*
	 * Required, not cosmetic. These rows take `width: 100%` — the drawer's full
	 * width, i.e. the viewport — and then add the gutter padding below. As
	 * content-box that padding lands *outside* the 100%, so every row renders
	 * viewport + 2 × gutter (430px on a 390px phone) and the open menu scrolls
	 * sideways. Core's `box-sizing: border-box` reset does not reach these:
	 * WordPress scopes its own to block wrappers, and the drawer's rows are
	 * anchors inside them.
	 */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	padding: 18px var(--wp--preset--spacing--60);
	border-bottom: 1px solid rgba(247, 245, 240, 0.12);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: 'wdth' 78;
	font-weight: 800;
	font-size: 22px;
	text-transform: uppercase;
	background: transparent;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	cursor: pointer;
}

.hl-drawer__nav a:hover,
.hl-drawer__toggle:hover {
	color: var(--wp--preset--color--accent);
}

.hl-drawer__toggle svg {
	transition: transform 0.25s;
	flex: none;
}

.hl-drawer__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Rows must span the full drawer width, or the hairline divider stops at the
   end of the label and the menu reads as ragged. */
.hl-drawer__nav .wp-block-navigation,
.hl-drawer__nav .wp-block-navigation__container,
.hl-drawer__nav .wp-block-navigation-item {
	width: 100%;
	gap: 0;
}

.hl-drawer__nav .wp-block-navigation-item {
	display: block;
}

/* Inside the drawer the submenu must be an inline accordion panel. Left alone
   it keeps its desktop dropdown behaviour and opens as a white floating box
   on top of the other rows. */
.hl-drawer .wp-block-navigation__submenu-container {
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	background-color: rgba(247, 245, 240, 0.05) !important;
	color: var(--wp--preset--color--paper) !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	display: block;
}

.hl-drawer .wp-block-navigation-submenu__toggle[aria-expanded="false"] + .wp-block-navigation__submenu-container {
	display: none !important;
}

.hl-drawer .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper) !important;
	font-family: var(--wp--preset--font-family--body);
	font-variation-settings: normal;
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	padding: 14px var(--wp--preset--spacing--60) 14px calc(var(--wp--preset--spacing--60) + 18px);
	border-bottom: 1px solid rgba(247, 245, 240, 0.1);
}

.hl-drawer .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: transparent;
	color: var(--wp--preset--color--accent) !important;
}

/*
 * A submenu row is three siblings inside one <li>: the link, the toggle button
 * and the panel. The drawer sets `display: block` on nav items so each row
 * spans the full width — which also stacks those three, dropping the chevron
 * onto its own line under the label. The parent row has to be a flex row
 * instead, with the panel forced onto a line of its own.
 */
.hl-drawer__nav .wp-block-navigation-item.has-child {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.hl-drawer__nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	flex: 1 1 auto;
	width: auto;
	/*
	 * No right gutter on this one row. Every other row ends at the drawer edge
	 * and needs it; here the neighbour is the toggle, which carries its own
	 * padding, so the gutter is interior dead space. Reclaiming it is what pays
	 * for the toggle's enlarged target below without moving the wrap threshold.
	 */
	padding-right: 0;
}

.hl-drawer__nav .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
	/*
	 * Three things have to be stated explicitly here, and each fails silently
	 * on its own:
	 *   - `align-self: stretch` because core sets `center`, which collapses the
	 *     button to the chevron's 10px and leaves its hairline floating above
	 *     the label's instead of continuing it.
	 *   - `height: auto` because stretch does nothing against an explicit height.
	 *   - a width, because the button sizes to its content while its content is
	 *     sized by the button — the gutter padding eats the whole box and the
	 *     chevron renders 0px wide, i.e. invisible.
	 */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-self: stretch;
	height: auto;
	box-sizing: content-box;
	width: 16px;
	/*
	 * The chevron is 16px and the only padding was the gutter to its right, so
	 * the arrow sat flush against the button's own left edge: aim at the arrow,
	 * drift a few px left, and you hit the link and navigate to the parent page
	 * instead of opening the panel. This widens the target to 56×72 without
	 * moving the arrow — `box-sizing: content-box` keeps the content box at the
	 * chevron's 16px, so padding grows the border box leftward only.
	 *
	 * Left padding, not a bigger `width`: width is measured from the right edge
	 * inward here, so widening it would drag the chevron off the gutter and out
	 * of line with the burger above it.
	 *
	 * **20px is a ceiling, not a preference.** The label cannot shrink below its
	 * longest word, so past a point the toggle stops fitting beside it and wraps
	 * onto its own line — the row grows to 90px and the chevron collapses to
	 * 18px tall. That already happens at ≤340px today, before this change.
	 * Measured thresholds, drawer width at which the row breaks:
	 *
	 *     36px target (before)                     ≤340px
	 *     64px target, label keeps its gutter      ≤368px  ← breaks 360px phones
	 *     56px target, gutter reclaimed above      ≤340px  ← unchanged, chosen
	 *
	 * So the enlargement is paid for entirely by the label's dead right gutter.
	 * Re-measure with the loop in this file's history before growing it further:
	 * anything above 20px here starts eating 360px devices, which are common.
	 */
	padding-left: 20px;
	/* The label's own hairline stops where the label stops, so the toggle has to
	   carry the rest of it or the divider breaks short of the drawer edge. */
	border-bottom: 1px solid rgba(247, 245, 240, 0.12);
}

.hl-drawer__nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	flex: 0 0 100%;
}

/* The submenu toggle chevron sits on the right of its row and rotates open. */
.hl-drawer .wp-block-navigation-submenu__toggle {
	margin-left: auto;
	padding: 0 var(--wp--preset--spacing--60) 0 0;
	color: var(--wp--preset--color--paper);
	background: transparent;
	border: 0;
}

.hl-drawer .wp-block-navigation-submenu__toggle svg {
	transition: transform 0.25s;
	flex: none;
	width: 16px;
	height: 16px;
}

.hl-drawer .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.hl-drawer__foot {
	margin-top: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.hl-drawer__social {
	display: flex;
	gap: 16px;
}

.hl-drawer__social a {
	display: inline-flex;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--paper);
}

.hl-drawer__social a:hover {
	color: var(--wp--preset--color--accent);
}

body.hl-locked {
	overflow: hidden;
}

/*
 * The header CTA stays a labelled button on phones. It was an icon-only square
 * so it could not wrap the header onto a second row, but an unlabelled square
 * reads as a broken control — nothing tells you it books an event. Tightening
 * the type and padding buys the same width back and keeps the label.
 *
 * `!important` is required: the button carries its desktop padding and size as
 * inline block attributes, which otherwise win over any class rule here.
 */
@media (max-width: 600px) {
	.hl-header .hl-cta .wp-block-button__link {
		padding: 11px 13px !important;
		font-size: 11px !important;
		letter-spacing: 0.06em;
	}

	/*
	 * The logo's 168px is a desktop width and does not fit a phone row: at 375px
	 * the logo's whole budget is the viewport minus the padding (40), the header
	 * gap and the CTA-plus-burger group (166) — 137px with the 32px gap. The row
	 * has no wrap, so an oversized logo does not break onto a second line; it
	 * pushes the CTA through the right gutter and the two insets stop matching.
	 *
	 * Two changes buy the width back: a tighter gap, which a three-item phone row
	 * does not need at 32px, and a 140px cap. That still reads larger than the
	 * old 120 and leaves ~13px of slack at 375px. `!important` is needed because
	 * the width arrives as the img's own `width` attribute.
	 */
	.hl-header {
		gap: 16px;
	}

	/*
	 * Both logos, not just the header's. The drawer overlays the header and puts
	 * its own logo at the same coordinates, so the two are read as one element
	 * that changes size when the menu opens — capping only the header made the
	 * logo visibly jump from 140px to 168px on tap.
	 *
	 * The drawer has room for the full 168px (its only neighbour is the close
	 * button), so the cap is not needed there on its own. It is here purely so
	 * the pair matches. If the header cap ever changes, change this with it.
	 */
	.hl-header .wp-block-site-logo img,
	.hl-drawer__top .wp-block-site-logo img {
		max-width: 140px !important;
		height: auto !important;
	}
}

/*
 * The floor where the labelled CTA stops fitting, measured not guessed. Below
 * 400px the header's padding (40) and gap (32) stop shrinking, so the row needs
 * a constant 358px: logo 120 + CTA 108 + burger 46, plus those gaps. Verified
 * 375px fits and 320px overflows to 338.
 *
 * The cut sits at 375px — the narrowest phone still in common use — so the
 * button survives on every real device and only drops on tiny or heavily
 * zoomed viewports, where the burger reaches the same page anyway.
 */
@media (max-width: 374px) {
	.hl-header .hl-cta { display: none; }
}

/* ---------------------------------------------------------------------------
   11. Hero
   ------------------------------------------------------------------------ */

.hl-hero {
	position: relative;
	min-height: min(88vh, 760px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	/* The inline edge belongs to the inner container, not here, or the two
	   paddings stack and the hero indents twice as far as everything else. */
	padding: var(--wp--preset--spacing--60) 0;
}

.hl-hero .wp-block-cover__background,
.hl-hero__scrim {
	background: var(--wp--preset--gradient--hero-scrim) !important;
}

/* Hero content is left-aligned as a block. A constrained layout centres any
   child that carries a max-width — and it does so with `margin-inline: auto
   !important`, so this has to answer in kind or the lede drifts to the middle
   of the hero, away from the heading it belongs to. */
.hl-hero .wp-block-cover__inner-container > *,
.hl-hero.is-layout-constrained > .wp-block-cover__inner-container > *,
.hl-hero .wp-block-cover__inner-container.is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left;
}

.hl-hero h1 {
	margin-top: 18px;
	margin-bottom: 0;
	max-width: 20ch;
}

/* The display face has a 0.92 line-height and the accent mark adds its own
   box, so the heading's ink reaches close to its edges. The lede needs a real
   gap under it, not a nominal one, or the two read as touching. */
.hl-hero .hl-lede {
	margin-top: 34px;
	margin-bottom: 0;
	max-width: 52ch;
}

.hl-hero .wp-block-buttons {
	margin-top: 34px;
}

@media (max-width: 760px) {
	.hl-hero h1 { max-width: none; }
	.hl-hero .hl-lede { margin-top: 26px; }
	.hl-hero .wp-block-buttons { margin-top: 26px; }

	/*
	 * A hero that ends exactly at the fold tells the visitor nothing about what
	 * is below it. 72svh leaves roughly a hundred pixels of the next section
	 * showing on a phone, which is the whole reason to shorten it.
	 *
	 * `svh`, not `vh`. On iOS `vh` measures the viewport with the address bar
	 * hidden, so a `vh`-sized hero is taller than what you can actually see
	 * while the bar is up — which is how the home page's buttons ended up 94px
	 * below the fold. `svh` measures the smaller, always-visible box. The `vh`
	 * line above it is the fallback for engines without `svh`.
	 *
	 * The 760px ceiling is inherited from the base rule and never binds here;
	 * it is repeated so the two declarations stay readable side by side.
	 */
	.hl-hero {
		min-height: min(72vh, 760px);
		min-height: min(72svh, 760px);
	}
}

/*
 * A text-only page header, for pages that carry no hero photograph — a policy,
 * a legal notice, a 404. Same left-aligned block as the hero and the same fight
 * with the constrained layout: a constrained parent centres any child carrying
 * a max-width using `margin-inline: auto !important`, which pulls the lede into
 * the middle of the band away from the heading it belongs to. The hero answers
 * that in kind inside its cover container; this does the same for a plain band.
 */
.hl-page-head > *,
.hl-page-head.is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left;
}

.hl-page-head h1 {
	max-width: 20ch;
}

@media (max-width: 760px) {
	.hl-page-head h1 { max-width: none; }
}

/* ---------------------------------------------------------------------------
   12. Forms
   ------------------------------------------------------------------------ */

.hl-form {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	padding: clamp(24px, 3vw, 40px);
}

.hl-form input[type="text"],
.hl-form input[type="email"],
.hl-form input[type="tel"],
.hl-form input[type="date"],
.hl-form input[type="number"],
.hl-form select,
.hl-form textarea,
.fluentform .ff-el-form-control {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--paper) !important;
	padding: 13px 14px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 16px !important;
	color: var(--wp--preset--color--ink) !important;
	box-shadow: none !important;
}

.hl-form input:focus,
.hl-form select:focus,
.hl-form textarea:focus,
.fluentform .ff-el-form-control:focus {
	outline: 2px solid var(--wp--preset--color--accent) !important;
	outline-offset: 0;
	border-color: var(--wp--preset--color--ink) !important;
}

.fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--mono) !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500 !important;
	color: var(--wp--preset--color--muted) !important;
}

/*
 * Fine print under a consent checkbox. The consent label itself must stay plain
 * text — the form plugin reuses it as the input's aria-label and as the stored
 * value, so a link in there is read out as literal markup and lands in the
 * entry. The link belongs in a sibling block like this one instead.
 */
.fluentform .hl-form-fineprint p {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.fluentform .hl-form-fineprint a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fluentform .hl-form-fineprint a:hover {
	background: var(--wp--preset--color--accent);
	text-decoration: none;
}

.fluentform .ff-btn-submit {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
	border: 1.5px solid var(--wp--preset--color--ink) !important;
	border-radius: 0 !important;
	padding: 17px 30px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.fluentform .ff-btn-submit:hover {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--ink) !important;
	transform: translate(-3px, -3px);
	box-shadow: var(--wp--preset--shadow--hard);
}

/* The plugin's tooltip icon and required asterisk ship in its own blue/red;
   pull them into the palette. */
.fluentform .ff-el-tooltip svg {
	fill: var(--wp--preset--color--muted);
	width: 13px;
	height: 13px;
	vertical-align: middle;
}

.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
	color: var(--wp--preset--color--muted);
}

.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
	accent-color: var(--wp--preset--color--ink);
	width: 17px;
	height: 17px;
	margin-right: 8px;
}

.fluentform .ff-el-form-check-label {
	font-size: 15px;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

/* A long form leaves the neighbouring info card stranded at the top. Let it
   follow the scroll instead of ending the column two thirds early. */
@media (min-width: 782px) {
	.hardline-pattern-contact-split .wp-block-column:last-child > .hl-panel {
		position: sticky;
		top: 92px;
	}
}

/* ---------------------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------------------ */

.hl-footer {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-dark);
}

/*
 * Footer link lists share the column's left edge with the heading above them.
 * A <ul> arrives with the browser's bullet indent, which pushes every link one
 * step in from its own heading and makes the footer columns read as unaligned.
 */
.hl-footer .hl-footer-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/*
 * A footer link's clickable area is its inline box — 16px of text, well under
 * the 24px WCAG 2.2 asks for as a minimum target. The list row is already 27px
 * tall, so letting the link fill it costs no height at all and turns dead
 * padding into target. Applies at every width.
 */
.hl-footer .hl-footer-list a {
	display: block;
}

.hl-footer a {
	color: inherit;
	text-decoration: none;
}

.hl-footer a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.hl-social {
	display: flex;
	gap: 14px;
	align-items: center;
}

.hl-social a {
	display: inline-flex;
	color: var(--wp--preset--color--paper);
}

.hl-social a:hover {
	color: var(--wp--preset--color--accent);
}

.hl-social svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* ---------------------------------------------------------------------------
   14. Long-form document body
   ------------------------------------------------------------------------ */

/*
 * A legal or policy document is not an editorial section: it is read top to
 * bottom in order, and the display scale that gives a marketing section its
 * impact makes a document shout. `.hl-prose` steps the heading scale down one
 * tier — h2 to display-m, h3 to display-s — and takes over vertical rhythm from
 * the block editor so the reader gets consistent paragraph spacing without a
 * per-block margin on every paragraph.
 *
 * It is the only place in the theme where a heading level uses a size other
 * than its theme.json default. That exception is scoped to this class.
 */
.hl-prose > h2 {
	font-size: var(--wp--preset--font-size--display-m);
	margin-block: 52px 16px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.hl-prose > h2:first-child {
	margin-block-start: 0;
	padding-top: 0;
	border-top: 0;
}

.hl-prose > h3 {
	font-size: var(--wp--preset--font-size--display-s);
	margin-block: 30px 10px;
}

.hl-prose > p,
.hl-prose > ul,
.hl-prose > ol {
	margin-block: 0 16px;
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}

.hl-prose > ul,
.hl-prose > ol {
	padding-left: 20px;
}

.hl-prose > ul li,
.hl-prose > ol li {
	margin-block-end: 6px;
}

.hl-prose > p > strong {
	color: var(--wp--preset--color--ink);
}

/*
 * Document links must stay visible against muted body text — the theme's
 * global link colour is `currentColor`, which would make them indistinguishable
 * from the paragraph they sit in.
 */
.hl-prose a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hl-prose a:hover {
	background: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* The in-page index: mono, hairline-separated, one row per section. */
.hl-toc {
	list-style: none;
	padding-left: 0;
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.hl-toc li {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.hl-toc a {
	display: block;
	padding: 10px 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.hl-toc a:hover {
	color: var(--wp--preset--color--ink);
}

@media (min-width: 900px) {
	.hl-doc-index {
		position: sticky;
		top: 96px;
		align-self: start;
	}
}

/*
 * Core stacks `wp-block-columns` to one column per row at 781px. With four
 * columns the footer goes from 361px to roughly 870px — 2.4× its own height,
 * and close to a whole phone screen of links.
 *
 * A two-column grid takes over instead. The brand column keeps full width
 * because it carries the logo, the description and the address; the three link
 * columns are narrow by nature and pair up without wrapping. Measured at 390px:
 * 877px before, 658px after.
 */
@media (max-width: 781px) {
	.hl-footer .wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px 24px;
	}

	/* The columns block sets flex-basis and margins inline; neither means
	   anything to a grid, and both fight it. */
	.hl-footer .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		margin: 0 !important;
	}

	.hl-footer .wp-block-columns > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}

	/* line-height 2 is right for a wide footer and wasteful in a narrow one. */
	.hl-footer .hl-footer-list {
		line-height: 1.9 !important;
	}

	.hl-footer .wp-block-column p {
		line-height: 1.7 !important;
	}
}