/* Organize Today, supplemental styles not expressible in theme.json */

/* Responsive video/chart embeds (YouTube, Datawrapper, Flourish iframes) */
.wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.wp-block-embed.wp-block-embed-youtube {
	margin: 2.5rem 0;
}

/* Chart figure pattern */
.organize-today-chart img {
	display: block;
	width: 100%;
	height: auto;
}
.organize-today-chart figure {
	margin: 0;
}

/* Forms (newsletter + contact) share a plain, high-contrast style */
.organize-today-newsletter-form,
.organize-today-contact-form {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.organize-today-contact-form {
	flex-direction: column;
	gap: 0;
}
.organize-today-newsletter-form input[type="email"],
.organize-today-contact-form input,
.organize-today-contact-form textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--wp--preset--color--off-black);
	border-radius: 3px;
	background: var(--wp--preset--color--off-white);
	color: var(--wp--preset--color--off-black);
	width: 100%;
}
.organize-today-newsletter-form input[type="email"] {
	flex: 1 1 14rem;
}
.organize-today-contact-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}
.organize-today-contact-form p {
	margin: 0 0 1rem;
}
.organize-today-newsletter-form button,
.organize-today-contact-form button {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	background: var(--wp--preset--color--slate-blue);
	color: var(--wp--preset--color--off-white);
	border: 0;
	border-radius: 3px;
	padding: 0.65rem 1.4rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.organize-today-newsletter-form button:hover,
.organize-today-contact-form button:hover {
	background: var(--wp--preset--color--maroon);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Subtle slate-blue desaturation on article/guide featured images.
   Partial grayscale + a translucent color-blend overlay in the site's
   slate blue, applies wherever the post-featured-image block is used
   (homepage cards, archive grid, single-article header). */
.wp-block-post-featured-image {
	position: relative;
	overflow: hidden;
}
.wp-block-post-featured-image img {
	filter: grayscale(45%) contrast(1.02);
}
.wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--slate-blue);
	mix-blend-mode: color;
	opacity: 0.35;
	pointer-events: none;
}

/* Article, Guide, and About page bodies: keep charts/tables/images breathing room, table styling for data */
.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	margin: 2rem 0;
}
.wp-block-post-content th,
.wp-block-post-content td {
	border: 1px solid var(--wp--preset--color--off-black);
	padding: 0.5rem 0.75rem;
	text-align: left;
}
.wp-block-post-content th {
	background: var(--wp--preset--color--slate-blue-tint);
}


/* ==========================================================================
   Header entrance motion. Deliberately restrained: one small fade and
   settle on load, nothing further down the page picks this up by default.
   Respects prefers-reduced-motion. Remove the .site-header--intro class in
   parts/header.html to turn this off without touching this block.
   ========================================================================== */
.site-header--intro {
	opacity: 0;
	transform: translateY(-6px);
	animation: site-header-intro 0.5s ease-out forwards;
}

@keyframes site-header-intro {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header--intro {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ==========================================================================
   Elegance pass: refined details across cards, buttons, links, and focus
   states. None of this adds new motion beyond a restrained hover response;
   the goal is a quieter, more considered surface, not more movement.
   ========================================================================== */

/* Framework-teaser cards and any similarly bordered content box: replace
   the flat, heavy black border with a lighter rule and a soft lift on
   hover, so the cards read as considered surfaces rather than boxes. */
.wp-block-group[style*="border-width:1px"][style*="border-color:var(--wp--preset--color--off-black)"] {
	border-color: var(--wp--preset--color--off-black) !important;
	border-color: rgba(32, 31, 29, 0.14) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wp-block-group[style*="border-width:1px"][style*="border-color:var(--wp--preset--color--off-black)"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(32, 31, 29, 0.08);
	border-color: rgba(32, 31, 29, 0.28) !important;
}

/* Article grid cards: a quieter hover than the framework cards above,
   since these are previews of articles, not interactive UI elements.
   Targets the card's own hover state directly rather than assuming a
   specific parent element, since the exact markup the query block
   generates can vary by WordPress version. */
.wp-block-post-template .wp-block-group[style*="border-top-color"] {
	transition: border-top-color 0.2s ease;
}
.wp-block-post-template .wp-block-group[style*="border-top-color"]:hover {
	border-top-color: var(--wp--preset--color--maroon) !important;
}

/* Buttons: a slightly slower, smoother hover than the browser default,
   and a small lift to match the card treatment above rather than a
   flat color swap alone. */
.wp-block-button__link {
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1px currentColor;
}

/* Body copy links: a deliberate underline with breathing room, rather
   than the browser default sitting flush against descenders. Navigation
   links are excluded, since a nav shouldn't look like body prose. */
.wp-block-post-content a:not(.wp-block-button__link),
.wp-block-group.article-header--intro a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.15s ease;
}

/* Headings: a small negative letter-spacing at the largest sizes reads
   more designed and less like unadjusted default type, particularly for
   a serif face at display size. */
.has-xx-large-font-size,
.has-x-large-font-size {
	letter-spacing: -0.01em;
}

/* Focus states in the site's own palette rather than the browser default
   blue, visible in both light and dark mode since it's set here, not
   inside the dark-mode-only layer in style.css. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--slate-blue);
	outline-offset: 3px;
}

/* Text selection in the site's own palette, a small detail most themes
   leave at the browser default. */
::selection {
	background: var(--wp--preset--color--slate-blue-tint);
	color: var(--wp--preset--color--off-black);
}

/* ==========================================================================
   Article header entrance motion. Same restrained treatment as the site
   header: one small fade and settle, once, on load. Nothing on the article
   body itself picks this up, matching the "not further down the page"
   preference stated for the homepage.
   ========================================================================== */
.article-header--intro {
	opacity: 0;
	transform: translateY(-6px);
	animation: site-header-intro 0.5s ease-out 0.1s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.article-header--intro {
		opacity: 1;
		transform: none;
		animation: none;
	}
}