/* Sidebar (spec §4.4, §5.1) — loaded on any template with a sidebar-* part
   (everything but front-page and 404). Slice 3. */

/* Hide sidebar below 1024px (must be ≥300px, so no room on narrow screens) */
@media (max-width: 1023px) {

	.sidebar,
	.site-sidebar-column,
	.sidebar-column { display: none; }
}

/* Sidebar column: 360px on wide screens, never narrower than 300px.
   Code-review follow-up (Phase 8): this narrowing previously only applied
   to .single-post__sidebar — .sidebar-column (category/archive/author/
   search) and .site-sidebar-column (SH-7's new homepage sidebar mode)
   shared the same 360px-fixed-width layout pattern but not this responsive
   behavior. Extended to all three for consistency. */
.single-post__sidebar,
.sidebar-column,
.site-sidebar-column {
	min-width: 300px;
}

@media (min-width: 1440px) {

	.single-post__sidebar,
	.sidebar-column,
	.site-sidebar-column { flex-basis: 360px !important; }
}

@media (min-width: 1024px) and (max-width: 1439px) {

	.single-post__sidebar,
	.sidebar-column,
	.site-sidebar-column { flex-basis: 300px !important; }
}

/* Sidebar widgets — padding per Figma spec.
   1440px+: 40px all around → 280px inner content in 360px column.
   1024–1439px: 20px all around → 260px inner in 300px column.
   Uses !important to override inline padding from block JSON attributes. */
.sidebar .cta-donate,
.sidebar .cta-newsletter {
	padding: 20px !important;
	border-radius: 0;
	box-sizing: border-box;
}

@media (min-width: 1440px) {

	.sidebar .cta-donate,
	.sidebar .cta-newsletter {
		padding: 40px !important;
	}
}

.sidebar .cta-donate {
	margin-bottom: 24px;
}

/* Sidebar newsletter CTA — left-justify text, add input field */
.sidebar .cta-newsletter {
	text-align: left;
}

.sidebar .cta-newsletter .has-text-align-center {
	text-align: left;
}

.sidebar .cta-newsletter .wp-block-heading {
	font-size: var(--wp--preset--font-size--x-large);
}

.sidebar .cta-newsletter .wp-block-buttons {
	justify-content: flex-start;
}

.sidebar .cta-newsletter .wp-block-group:has(.wp-block-buttons) {
	justify-content: flex-start;
}

/* Sidebar newsletter inline form — email input + submit button, stacked.
   QA-10 / FU-5: side-by-side input+button don't fit the 360px sidebar
   column — shrinking the input to fit leaves it too narrow to use.
   Unconditional, not behind a `@media (max-width: 400px)` viewport query
   (the original QA-10 fix) — this sidebar column is a fixed 360px-wide
   container regardless of the browser's viewport width (e.g. it's just as
   cramped inside a 1200px desktop two-column layout as on a narrow phone),
   and this file only ever loads in that same fixed-width sidebar context
   (see ghn_enqueue_contextual_styles() in functions.php), so there's no
   wider-viewport case where side-by-side would actually fit. */
.cta-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--20);
}

.cta-newsletter__input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	border: 1px solid var(--wp--preset--color--primary-dark);
	border-right: 1px solid var(--wp--preset--color--primary-dark);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

.cta-newsletter__input::placeholder {
	color: #999;
}

.cta-newsletter__submit {
	padding: 10px 16px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--primary-dark);
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
}

.cta-newsletter__submit:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	filter: none;
}