@charset "UTF-8";

/**
 * sidebar.css 1.0.0
 * Author: hybrid.
 *
 * Core layout — wrapper, header, footer, sections, aside, sidebar.
 * Project overrides live in theme-layout.css.
 *
 * Section modifiers
 * [default]  — normal content max-width
 * .focus     — heading section
 * .full      — no content max-width, no padding
 * .large     — no content max-width
 * .min       — short padding
 * .cover     — fullscreen (100svh) min-height
 * .banner    — introduction section, fixed height
 *
 * WP / CSS mapping
 * section           ↔ .section / .wp-block-group
 * section-content   ↔ .wp-block-group__inner-container
 * null              ↔ short
 * alignwide         ↔ normal
 * alignfull         ↔ large
 *
 * Breakpoints
 * 50rem   = 800px
 * 62.5rem = 1000px
 * 75rem   = 1200px
 * 87.5rem = 1400px
 *
 * Tokens
 * --gutter-gap         structural spacing: header padding, first/last child in main,
 *                      gap between section-content and aside, sticky sidebar offset.
 *                      Varies widely: 1.25rem → 3rem.
 * --section-gap        horizontal only: margin-left / margin-right of .section-content.
 *                      Varies moderately: 1.25rem → 2rem.
 * --content-max-width  max-width of content areas (default: 75rem → 87.5rem at 1400px)
 * --stroke-width       border width used throughout the theme (default: .125rem)
 *
 * Dependencies
 * --content-spacing  defined in spacing.css
 * --font-size        defined in fonts.css
 * --bright-color     defined in colors.css
 * --dark-color       defined in colors.css
 * --background-color defined in colors.css
 */



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */


/* ============================== SIDEBAR ============================== */

/* =============== DEFAULT =============== */

.sidebar {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	padding: var(--content-spacing) 0;
}
.sidebar > * + * {
	margin-top: 1em;
}
.sidebar > .short + * {
	margin-top: 0;
}

.sidebar form {
	pointer-events: auto;
}


/* =============== STICKY =============== */

.sticky.sidebar {
	position: sticky;
	z-index: 200;
	top: var(--header-height);
}


/* =============== STICKY-FOOTER =============== */

.sidebar.sticky-footer {
	margin-top: auto;
	padding: var(--content-spacing) 0;
	background: var(--bright-color);
}


/* =============== FILTERS =============== */

.sidebar nav.filters {
	width: 100%;
}
.sticky.sidebar nav.filters.only-mobile {
	margin: 0;
}


/* =============== INLINE =============== */

/* In books — .sidebar.inline */

.sidebar.inline .buttons-container {
	flex-direction: row;
	align-items: baseline;
	gap: var(--gutter-gap);
}
.sidebar.inline .buttons-container > * {
	flex-grow: 1;
	flex-basis: 0;
	white-space: nowrap;
	margin: 0;
}
.sidebar.inline .buttons-container fieldset {
	flex-grow: 2;
}
.sidebar.inline .buttons-container nav.buttons {
	flex-wrap: unset;
}
.sidebar.inline.is-stuck {
	background: var(--bright-color);
}


/* =============== CONTEXTUAL OFFSETS =============== */

body:has(#contextual) .sidebar.sticky { top: calc(var(--header-height) + var(--contextual-height)); }

@media (min-width: 1000px) {
	.sidebar.sticky { margin-top: 0; }
	body:has(#contextual) .sidebar.sticky { top: calc(var(--header-height) + var(--contextual-height)); }
}