/**
 * layout.css — page frame, header, navigation, footer, page furniture, print.
 *
 * Depends on base.css for every token. There is not one raw colour value in
 * this file: if a colour is missing, it gets added to :root in base.css.
 *
 * --bedi-navy IS A FILL, NOT A TEXT COLOUR. On the white canvas this file was
 * written against it was both; on the dark canvas base.css now declares it
 * cannot be, and that is arithmetic rather than taste — a fill that carries
 * white text needs a relative luminance of 0.183 or less, text on #0B0F17 needs
 * 0.209 or more, and the two ranges do not overlap. So the role is split:
 * --bedi-navy fills (buttons, the current page number), --bedi-link-brand is the
 * readable brand text and the visible brand hairline. Both resolve to #273A60
 * under [data-theme="light"], so nothing below changed by a pixel in light mode.
 *
 * Likewise, a control that swaps its fill to --bedi-accent on hover has to swap
 * its ink to --bedi-on-accent with it. --bedi-ink-inverse is the ink for a NAVY
 * fill and is light; left on an accent fill it reads at 2.1:1.
 *
 * The mobile navigation drawer is pure CSS state. assets/js/nav.js only
 * toggles the class `is-open` on the nav and `bedi-nav-is-open` on <body>, and
 * flips aria-expanded on the toggle button. Every transition, transform and
 * overlay below is driven from those three things, so the JavaScript stays at
 * roughly forty lines and can be read in one sitting.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * 1. PAGE FRAME
 * ====================================================================== */

.bedi-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

@supports (min-height: 100svh) {
	.bedi-site {
		min-height: 100svh;
	}
}

.bedi-main {
	flex: 1 0 auto;
	padding-block: var(--bedi-space-lg) var(--bedi-space-2xl);
}

/* THE ONE CONTAINER, AND IT IS CAPPED AT THE SHELL, NOT AT THE MEASURE.
   --bedi-shell is the measure plus one gutter either side (base.css), so the
   content inside this box is exactly --bedi-content-width and its inline edges
   land on the same x as the header bar, the hero band and the category cards.
   Capped at the measure instead, as it was, the content came out 1280 minus 80
   and sat 40px inside everything above it — which is the misalignment on every
   inner page.
   theme.json's settings.layout.contentSize must stay equal to the MEASURE for
   an aligned block to line up with this; it is 1280px there for that reason. */
.bedi-container {
	margin-inline: auto;
	max-width: var(--bedi-shell);
	padding-inline: var(--bedi-gutter);
	width: 100%;
}

.bedi-container--wide {
	max-width: var(--bedi-wide-width);
}

/* =========================================================================
 * 2. CONTENT / SIDEBAR GRID
 *
 * sidebar.php returns early when the widget area is empty, so there is no
 * ".has-sidebar" flag to pass down: the grid asks the DOM instead. Browsers
 * without :has() fall back to a single column with the sidebar stacked below,
 * which is the correct degraded layout anyway.
 * ====================================================================== */

.bedi-layout {
	display: grid;
	gap: var(--bedi-space-xl);
}

@media (min-width: 62em) {
	.bedi-layout:has(> .bedi-sidebar) {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) var(--bedi-sidebar-width);
	}
}

.bedi-layout__content {
	min-width: 0;
}

.bedi-sidebar {
	min-width: 0;
}

/* Widget markup comes from Bedi\Theme\Theme::register_widget_areas(), which
   wraps each widget in <section class="bedi-widget widget …"> and titles it
   with <h2 class="bedi-widget__title">. The core `widget` class is kept in the
   selector because third-party widgets bring their own markup. */
.bedi-widget {
	margin-block-end: var(--bedi-space-lg);
}

.bedi-widget:last-child {
	margin-block-end: 0;
}

.bedi-widget__title {
	font-size: var(--bedi-text-lg);
	margin-block-end: var(--bedi-space-2xs);
}

.bedi-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-widget li + li {
	margin-block-start: var(--bedi-space-3xs);
}

.bedi-widget a {
	color: var(--bedi-link-brand);
	text-decoration: none;
}

.bedi-widget a:hover,
.bedi-widget a:focus-visible {
	color: var(--bedi-accent);
	text-decoration: underline;
}

/* =========================================================================
 * 3. HEADER
 * ====================================================================== */

.bedi-header {
	background-color: var(--bedi-surface);
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
	position: relative;
	z-index: var(--bedi-z-header);
}

.bedi-header__inner {
	align-items: center;
	column-gap: var(--bedi-space-md);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	min-height: var(--bedi-header-height);
	row-gap: var(--bedi-space-2xs);
}

.bedi-branding {
	align-items: center;
	column-gap: var(--bedi-space-sm);
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
	padding-block: var(--bedi-space-2xs);
}

.bedi-branding .custom-logo-link {
	display: block;
	line-height: 0;
}

.bedi-branding .custom-logo {
	height: auto;
	max-height: 3rem;
	width: auto;
}

.bedi-branding__title {
	font-size: var(--bedi-text-xl);
	line-height: var(--bedi-leading-tight);
	margin: 0;
}

.bedi-branding__link {
	color: var(--bedi-link-brand);
	text-decoration: none;
}

.bedi-branding__link:hover,
.bedi-branding__link:focus-visible {
	color: var(--bedi-accent);
}

.bedi-branding__description {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 0;
}

/* =========================================================================
 * 4. NAVIGATION
 *
 * Default state (no JavaScript, or a viewport wide enough not to need a
 * drawer) is a plain horizontal list. The drawer rules in section 4b are
 * scoped to .bedi-js, which nav.js sets on <html>. If the script never runs,
 * the menu stays a static list and remains fully usable.
 * ====================================================================== */

.bedi-nav__list {
	align-items: center;
	column-gap: var(--bedi-space-sm);
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bedi-space-3xs);
}

.bedi-nav__list li {
	position: relative;
}

/* wp_page_menu() wrapper, used only when no menu is assigned to the 'primary'
   location. It must not introduce a box of its own between .bedi-nav and the
   list, or the drawer's scroll area would sit on the wrong element. */
.bedi-nav__fallback {
	display: contents;
}

.bedi-nav__list a {
	color: var(--bedi-link-brand);
	display: block;
	font-weight: var(--bedi-weight-medium);
	padding: var(--bedi-space-2xs) var(--bedi-space-3xs);
	text-decoration: none;
}

.bedi-nav__list a:hover,
.bedi-nav__list a:focus-visible {
	color: var(--bedi-accent);
	text-decoration: underline;
}

.bedi-nav__list .current-menu-item > a,
.bedi-nav__list .current_page_item > a,
.bedi-nav__list .current-menu-ancestor > a,
.bedi-nav__list .current_page_ancestor > a {
	color: var(--bedi-accent);
	text-decoration: underline;
}

.bedi-nav__list .sub-menu,
.bedi-nav__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Toggle button ----------------------------------------------------
   Hidden by default: on a wide viewport it is not needed, and without
   JavaScript it would do nothing. Section 4b reveals it. */

.bedi-nav-toggle {
	align-items: center;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-sm);
	color: var(--bedi-link-brand);
	display: none;
	flex: 0 0 auto;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.bedi-nav-toggle:hover {
	border-color: var(--bedi-link-brand);
	color: var(--bedi-accent);
}

.bedi-nav-toggle__bars {
	display: block;
	height: 2px;
	position: relative;
	width: 1.25rem;
}

.bedi-nav-toggle__bars,
.bedi-nav-toggle__bars::before,
.bedi-nav-toggle__bars::after {
	background-color: currentcolor;
	border-radius: 2px;
	transition:
		background-color var(--bedi-duration) var(--bedi-easing),
		transform var(--bedi-duration) var(--bedi-easing);
}

.bedi-nav-toggle__bars::before,
.bedi-nav-toggle__bars::after {
	content: "";
	height: 2px;
	inset-inline-start: 0;
	position: absolute;
	width: 100%;
}

.bedi-nav-toggle__bars::before {
	inset-block-start: -6px;
}

.bedi-nav-toggle__bars::after {
	inset-block-start: 6px;
}

/* Open state: the middle bar disappears, the outer two cross. Driven by
   aria-expanded, which is the state the assistive technology reads too, so
   the two can never disagree. */
.bedi-nav-toggle[aria-expanded="true"] .bedi-nav-toggle__bars {
	background-color: transparent;
}

.bedi-nav-toggle[aria-expanded="true"] .bedi-nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.bedi-nav-toggle[aria-expanded="true"] .bedi-nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ---- 4b. Desktop dropdowns -------------------------------------------- */

@media (min-width: 56.25em) {
	.bedi-nav__list .sub-menu,
	.bedi-nav__list .children {
		background-color: var(--bedi-surface-raised);
		border: var(--bedi-border-width) solid var(--bedi-rule);
		border-radius: var(--bedi-radius-md);
		box-shadow: var(--bedi-shadow-2);
		display: none;
		inset-block-start: 100%;
		inset-inline-start: 0;
		min-width: 14rem;
		padding-block: var(--bedi-space-3xs);
		position: absolute;
		z-index: var(--bedi-z-drawer);
	}

	.bedi-nav__list > li:hover > .sub-menu,
	.bedi-nav__list > li:focus-within > .sub-menu,
	.bedi-nav__list > li:hover > .children,
	.bedi-nav__list > li:focus-within > .children {
		display: block;
	}

	.bedi-nav__list .sub-menu a,
	.bedi-nav__list .children a {
		padding: var(--bedi-space-2xs) var(--bedi-space-sm);
	}
}

/* ---- 4c. Mobile drawer ------------------------------------------------- */

@media (max-width: 56.1875em) {
	.bedi-js .bedi-nav-toggle {
		display: inline-flex;
	}

	.bedi-js .bedi-nav {
		background-color: var(--bedi-surface-raised);
		border-inline-start: var(--bedi-border-width) solid var(--bedi-rule);
		box-shadow: var(--bedi-shadow-2);
		inset-block: 0;
		inset-inline-end: 0;
		max-width: 22rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--bedi-space-xl) var(--bedi-space-md) var(--bedi-space-lg);
		position: fixed;
		transform: translateX(100%);
		transition:
			transform var(--bedi-duration) var(--bedi-easing),
			visibility var(--bedi-duration) var(--bedi-easing);
		visibility: hidden;
		width: 85vw;
		z-index: var(--bedi-z-drawer);
	}

	/* visibility, not display, so the transform can animate — and so that the
	   links inside a closed drawer are genuinely unreachable by Tab rather
	   than merely off screen. */
	.bedi-js .bedi-nav.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	/* The logical properties above (inset-inline-end, border-inline-start) flip
	   for RTL on their own; translateX is physical and does not, so only the
	   transform needs an override.

	   The compound selector is not a style choice. language_attributes() puts
	   `dir` on <html>, which is the same element nav.js puts .bedi-js on, so a
	   descendant combinator — `[dir="rtl"] .bedi-js` — can never match. The
	   second selector in each pair covers a dir="rtl" wrapper further down. */
	[dir="rtl"].bedi-js .bedi-nav,
	.bedi-js [dir="rtl"] .bedi-nav {
		transform: translateX(-100%);
	}

	[dir="rtl"].bedi-js .bedi-nav.is-open,
	.bedi-js [dir="rtl"] .bedi-nav.is-open {
		transform: translateX(0);
	}

	.bedi-js .bedi-nav .bedi-nav__list {
		align-items: stretch;
		flex-direction: column;
		row-gap: var(--bedi-space-3xs);
	}

	.bedi-js .bedi-nav .bedi-nav__list a {
		padding: var(--bedi-space-2xs) 0;
	}

	.bedi-js .bedi-nav .sub-menu,
	.bedi-js .bedi-nav .children {
		border-inline-start: var(--bedi-border-width) solid var(--bedi-rule);
		margin-inline-start: var(--bedi-space-2xs);
		padding-inline-start: var(--bedi-space-xs);
	}

	/* Scroll lock and scrim. The scrim is a body pseudo-element rather than an
	   extra div, so the templates stay free of presentational markup. Clicking
	   it lands outside the nav, which nav.js treats as "close". */
	body.bedi-nav-is-open {
		overflow: hidden;
	}

	.bedi-js body.bedi-nav-is-open::after {
		background-color: var(--bedi-overlay);
		content: "";
		inset: 0;
		position: fixed;
		z-index: var(--bedi-z-overlay);
	}

	/* The drawer is rendered inside .bedi-header, and .bedi-header is a stacking
	   context of its own (position: relative + z-index: --bedi-z-header). A
	   descendant can never paint above an ancestor's context, so --bedi-z-drawer
	   on .bedi-nav is resolved INSIDE that context, at the header's z-index of
	   --bedi-z-header — below the scrim, which sits in the root context at
	   --bedi-z-overlay. Without the rule below the scrim covers the open drawer:
	   the menu is dimmed, and every tap on a link hits the pseudo-element
	   instead, which nav.js reads as an outside click and closes the drawer.

	   Raising the header itself is what actually orders the two, and it keeps
	   the toggle button above the scrim so the drawer can always be closed. */
	.bedi-js body.bedi-nav-is-open .bedi-header {
		z-index: var(--bedi-z-drawer);
	}
}

/* =========================================================================
 * 5. FOOTER — MOVED
 *
 * Every rule that was here is now in assets/css/footer.css, under the handle
 * `bedi-footer-css`.
 *
 * They described a footer that was a menu and a copyright, which is what the
 * old footer.php rendered — and on the live shop that menu was never assigned,
 * so the whole footer was one line of text under every page. It is four
 * columns, a contact list, a payment row and a bottom bar now, which is a
 * component, and every component in this theme has its own file.
 *
 * Nothing is left behind on purpose: a retired rule set that still matches
 * nothing is a rule set the next reader has to prove is dead before deleting.
 *
 * The print block near the end of this file still hides `.bedi-footer`, and
 * that stays here — it belongs with the rest of the print rules.
 * ====================================================================== */


/* =========================================================================
 * 6. PAGE FURNITURE
 *
 * The shared chrome the core templates render: page intros, the post loop,
 * pagination, the empty state, 404, and the two custom post type views.
 * ====================================================================== */

.bedi-page-intro {
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
	margin-block-end: var(--bedi-space-lg);
	padding-block-end: var(--bedi-space-md);
}

/*
 * Every core-template page title: archive.php, archive-soft.php, search.php
 * and index.php all print this class. It set a margin and nothing else, so the
 * heading inherited the body face — the same omission the archive title had.
 *
 * The weight must be stated, not left to cascade: theme.json's
 * elements.heading writes 600 onto :root :where(h1…h6) at (0,1,0), and 600 is
 * not one of this theme's three weights.
 */
.bedi-page-title {
	font-family: var(--bedi-font-display);
	font-weight: var(--bedi-weight-bold);
	margin: 0;
}

.bedi-page-intro__description {
	color: var(--bedi-ink-muted);
	margin-block-start: var(--bedi-space-2xs);
	max-width: var(--bedi-measure);
}

.bedi-page-intro__search {
	margin-block-start: var(--bedi-space-sm);
	max-width: 30rem;
}

.bedi-search-term {
	color: var(--bedi-ink);
}

/* ---- Post loop --------------------------------------------------------- */

.bedi-entries {
	display: grid;
	gap: var(--bedi-space-lg);
}

@media (min-width: 40em) {
	.bedi-entries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.bedi-layout:has(> .bedi-sidebar) .bedi-entries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.bedi-entry--card {
	background-color: var(--bedi-surface-raised);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bedi-entry--card.sticky {
	border-color: var(--bedi-link-brand);
}

.bedi-entry__thumb {
	display: block;
	line-height: 0;
}

.bedi-entry__thumb-image {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.bedi-entry__body {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	gap: var(--bedi-space-2xs);
	padding: var(--bedi-space-md);
}

/*
 * The title on every WordPress-rendered page and post — which on this site
 * includes the cart and the my-account screens, since both are ordinary pages.
 * Same omission, same fix, same reason the weight is spelled out.
 */
.bedi-entry__title {
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
	margin: 0;
}

.bedi-entry--singular .bedi-entry__title {
	font-size: var(--bedi-text-3xl);
}

.bedi-entry__link {
	color: var(--bedi-link-brand);
	text-decoration: none;
}

.bedi-entry__link:hover,
.bedi-entry__link:focus-visible {
	color: var(--bedi-accent);
	text-decoration: underline;
}

.bedi-entry__meta {
	color: var(--bedi-ink-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--bedi-text-sm);
	gap: var(--bedi-space-2xs);
	margin: 0;
}

.bedi-entry__excerpt {
	max-width: var(--bedi-measure);
}

.bedi-entry__excerpt > :last-child {
	margin-block-end: 0;
}

.bedi-entry__more {
	margin: auto 0 0;
	padding-block-start: var(--bedi-space-2xs);
}

.bedi-entry__more-link {
	font-weight: var(--bedi-weight-medium);
	text-decoration: none;
}

.bedi-entry__more-link:hover,
.bedi-entry__more-link:focus-visible {
	text-decoration: underline;
}

/* ---- Singular ---------------------------------------------------------- */

.bedi-entry--singular {
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-md);
}

.bedi-entry--singular .bedi-entry__content {
	max-width: var(--bedi-measure);
}

.bedi-entry__media {
	margin: 0;
}

.bedi-entry__media img {
	border-radius: var(--bedi-radius-lg);
	width: 100%;
}

.bedi-entry__terms {
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-md);
	padding-block-start: var(--bedi-space-sm);
}

.bedi-entry__term-group {
	font-size: var(--bedi-text-sm);
	margin: 0;
}

.bedi-entry__term-label {
	color: var(--bedi-ink-muted);
	display: block;
	font-size: var(--bedi-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bedi-link-pages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-2xs);
	margin-block-start: var(--bedi-space-md);
}

.bedi-link-pages__label {
	color: var(--bedi-ink-muted);
}

.bedi-post-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-md);
	justify-content: space-between;
	margin-block-start: var(--bedi-space-xl);
	padding-block-start: var(--bedi-space-md);
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
}

.bedi-post-nav__item--next {
	margin-inline-start: auto;
	text-align: end;
}

/* ---- Pagination -------------------------------------------------------- */

.bedi-pagination {
	margin-block-start: var(--bedi-space-xl);
}

.bedi-pagination .page-numbers {
	align-items: center;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-sm);
	color: var(--bedi-link-brand);
	display: inline-flex;
	justify-content: center;
	min-height: 2.5rem;
	min-width: 2.5rem;
	padding-inline: var(--bedi-space-2xs);
	text-decoration: none;
}

.bedi-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-pagination a.page-numbers:hover,
.bedi-pagination a.page-numbers:focus-visible {
	border-color: var(--bedi-link-brand);
	color: var(--bedi-accent);
}

/* A navy FILL, so it takes navy's contrast pair. */
.bedi-pagination .page-numbers.current {
	background-color: var(--bedi-navy);
	border-color: var(--bedi-navy);
	color: var(--bedi-on-navy);
}

.bedi-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ---- Search form ------------------------------------------------------- */

.bedi-searchform {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-2xs);
}

.bedi-searchform__field {
	background-color: var(--bedi-surface-raised);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-sm);
	flex: 1 1 12rem;
	min-width: 0;
	padding: var(--bedi-space-2xs) var(--bedi-space-xs);
}

.bedi-searchform__field:hover {
	border-color: var(--bedi-link-brand);
}

.bedi-searchform__submit {
	background-color: var(--bedi-navy);
	border-radius: var(--bedi-radius-sm);
	color: var(--bedi-on-navy);
	flex: 0 0 auto;
	font-weight: var(--bedi-weight-medium);
	padding: var(--bedi-space-2xs) var(--bedi-space-md);
	transition: background-color var(--bedi-duration) var(--bedi-easing);
}

/* The fill changes, so the ink changes with it. */
.bedi-searchform__submit:hover,
.bedi-searchform__submit:focus-visible {
	background-color: var(--bedi-accent);
	color: var(--bedi-on-accent);
}

/* ---- Buttons ----------------------------------------------------------- */

.bedi-button {
	background-color: var(--bedi-navy);
	border-radius: var(--bedi-radius-sm);
	color: var(--bedi-on-navy);
	display: inline-block;
	font-weight: var(--bedi-weight-medium);
	padding: var(--bedi-space-2xs) var(--bedi-space-md);
	text-decoration: none;
	transition: background-color var(--bedi-duration) var(--bedi-easing);
}

.bedi-button:hover,
.bedi-button:focus-visible {
	background-color: var(--bedi-accent);
	color: var(--bedi-on-accent);
}

/* ---- Empty state and 404 -----------------------------------------------
 *
 * MOVED. .bedi-no-results and .bedi-error404 (and its __code, __text, __search
 * and __actions children) used to live here, and nothing emits those classes
 * any more.
 *
 * They were two different designs for the same moment — a grey card on an empty
 * archive, a 9rem grey numeral on the 404 — and WooCommerce drew a third, a
 * plain notice bar, on a shop archive that matched nothing. All three are now
 * one illustrated component: template-parts/empty-state.php renders it and
 * assets/css/ui.css section 5 styles it, as .bedi-empty.
 *
 * Callers: 404.php, template-parts/content-none.php, and
 * Bedi\Theme\Woo::no_products_found().
 *
 * Nothing is left behind here on purpose. A retired rule set that still matches
 * nothing is a rule set the next reader has to prove is dead before they can
 * delete it.
 * ---------------------------------------------------------------------- */

/* ---- Soft archive ------------------------------------------------------ */

.bedi-soft-list {
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-soft-list__item {
	align-items: center;
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
	column-gap: var(--bedi-space-md);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-block: var(--bedi-space-xs);
	row-gap: var(--bedi-space-2xs);
}

.bedi-soft-list__title {
	font-weight: var(--bedi-weight-medium);
	min-width: 0;
}

/*
 * The download control. The row above was already flex with space-between and
 * a single child, which is the shape it was written in anticipation of this —
 * the title takes the space it needs and the button sits at the end.
 */
.bedi-soft-list__download {
	align-items: center;
	border: var(--bedi-border-width) solid var(--bedi-rule-strong);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	column-gap: var(--bedi-space-2);
	display: inline-flex;
	flex: none;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	min-block-size: 40px;
	padding-inline: var(--bedi-space-4);
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-soft-list__download:hover,
.bedi-soft-list__download:focus-visible {
	background-color: var(--bedi-bg-2);
	border-color: var(--bedi-accent);
	color: var(--bedi-accent-strong);
}

/*
 * The file size, quieter than the label. It is the one thing worth knowing
 * before pressing download on a phone, and it should not compete with the verb.
 */
.bedi-soft-list__size {
	color: var(--bedi-ink-muted);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
}

.bedi-soft-list__download:hover .bedi-soft-list__size,
.bedi-soft-list__download:focus-visible .bedi-soft-list__size {
	color: inherit;
}

/* ---- Partners ---------------------------------------------------------- */

.bedi-partner {
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-md);
	margin-inline: auto;
	max-width: 46rem;
}

.bedi-partner__logo {
	margin: 0;
}

.bedi-partner__image {
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	width: 100%;
}

/* =========================================================================
 * 7. PRINT
 *
 * A product or spec sheet printed from this site should be black on white and
 * carry the URLs of the links it contains. Chrome, navigation and forms are
 * dropped: they are useless on paper and they waste the page.
 * ====================================================================== */

@media print {
	body {
		background-color: var(--bedi-print-surface);
		color: var(--bedi-print-ink);
		font-size: 11pt;
		line-height: 1.4;
	}

	.bedi-header,
	.bedi-footer,
	.bedi-nav,
	.bedi-nav-toggle,
	.bedi-sidebar,
	.bedi-pagination,
	.bedi-post-nav,
	.bedi-searchform,
	.bedi-entry__more,
	.skip-link {
		display: none !important;
	}

	.bedi-site,
	.bedi-main,
	.bedi-layout,
	.bedi-entries {
		display: block;
	}

	.bedi-container {
		max-width: none;
		padding-inline: 0;
	}

	.bedi-main {
		padding-block: 0;
	}

	.bedi-entry--card {
		border: 0;
		break-inside: avoid;
		margin-block-end: var(--bedi-space-sm);
		padding: 0;
	}

	a {
		color: var(--bedi-print-ink);
		text-decoration: underline;
	}

	/* Print the destination of real links, but not of same-page anchors. */
	.bedi-entry__content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 90%;
		word-break: break-all;
	}

	h1,
	h2,
	h3,
	h4 {
		break-after: avoid;
		color: var(--bedi-print-ink);
	}

	img {
		break-inside: avoid;
		max-width: 100% !important;
	}
}