/* 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;
	}
}

/* ==========================================================================
   Expandable Card pattern: styling for the native <details>/<summary>
   element, since browsers ship almost no default styling worth keeping.
   The rotating "+" mirrors the interaction the 3D model page originally
   built with custom JavaScript, but needs none here, the browser already
   handles open/closed state, keyboard activation, and screen reader
   semantics on its own.

   Two real variants share this same base, since the 3D model page uses
   the same interaction in two visually different registers: a bordered
   box for the vantage cards, and a plain bottom-border row for the
   tempo and connections accordions. A third, "emphasis," covers the one
   card (Coherence) that's meant to read as the whole rather than a peer.
   ========================================================================== */
.organize-today-expandable__summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
}
.organize-today-expandable__summary::-webkit-details-marker {
	display: none;
}
.organize-today-expandable__summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.2rem;
	color: var(--wp--preset--color--slate-blue);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.organize-today-expandable__details[open] .organize-today-expandable__summary::after {
	transform: rotate(45deg);
}
.organize-today-expandable__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.15rem;
}
.organize-today-expandable__hook {
	flex-basis: 100%;
	font-size: 0.9rem;
	color: var(--wp--preset--color--gray-mid);
	margin-top: 0.4rem;
}
.organize-today-expandable__body {
	margin-top: 1rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--off-black);
}
@media (prefers-reduced-motion: reduce) {
	.organize-today-expandable__summary::after {
		transition: none;
	}
}

/* Card variant (default look): a bordered box, used for the vantage grid. */
.organize-today-expandable--card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.organize-today-expandable--card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(32,31,29,0.12);
}
[data-theme="dark"] .organize-today-expandable--card:hover {
	box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}

/* List variant: a plain row with a bottom border, no box, no hover lift.
   Used for the tempo and connections accordions, where several items
   stack in a single column and a full border on each would look heavy. */
.organize-today-expandable--list {
	border: none !important;
	border-bottom: 1px solid rgba(32,31,29,0.14) !important;
	border-radius: 0 !important;
	padding: 0.25rem 0.25rem 1.25rem !important;
}
[data-theme="dark"] .organize-today-expandable--list {
	border-bottom-color: var(--dm-border) !important;
}
.organize-today-expandable--list .organize-today-expandable__summary {
	padding: 1.25rem 0 0;
}

/* Emphasis variant: the one card meant to read as the whole rather than
   a peer among equals (Coherence, on the 3D model page). Dark regardless
   of light or dark mode, since it represents the same idea either way. */
.organize-today-expandable--emphasis {
	background: var(--wp--preset--color--off-black) !important;
	border-color: var(--wp--preset--color--slate-blue) !important;
}
.organize-today-expandable--emphasis .organize-today-expandable__title,
.organize-today-expandable--emphasis .organize-today-expandable__hook {
	color: var(--wp--preset--color--off-white);
}
.organize-today-expandable--emphasis .organize-today-expandable__body {
	color: var(--wp--preset--color--gray-mid);
}
[data-theme="dark"] .organize-today-expandable--emphasis {
	background: var(--dm-bg-2) !important;
	border-color: var(--dm-link) !important;
}

/* Ladder List pattern: border-left shifts to slate blue on hover, the
   same accent-on-interaction idea used elsewhere in the theme rather
   than a new convention just for this pattern. */
.wp-block-group[style*="border-left-color:var(--wp--preset--color--gray-mid)"] {
	transition: border-left-color 0.2s ease;
}
.wp-block-group[style*="border-left-color:var(--wp--preset--color--gray-mid)"]:hover {
	border-left-color: var(--wp--preset--color--slate-blue) !important;
}

/* ==========================================================================
   Section Rail: fixed side navigation that tracks scroll position,
   paired with assets/js/section-rail.js. Generic across any page,
   nothing here is specific to the 3D model page it originated on.
   ========================================================================== */
.organize-today-rail {
	position: fixed;
	left: 28px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.organize-today-rail__line {
	position: absolute;
	left: 3.5px;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: var(--wp--preset--color--off-black);
	opacity: 0.14;
	z-index: -1;
}
[data-theme="dark"] .organize-today-rail__line {
	background: var(--dm-border);
	opacity: 1;
}
.organize-today-rail__tick {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	opacity: 0.35;
	transition: opacity 0.4s ease;
	cursor: pointer;
}
.organize-today-rail__tick--active {
	opacity: 1;
}
.organize-today-rail__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--gray-mid);
	transition: background 0.4s ease, box-shadow 0.4s ease;
}
[data-theme="dark"] .organize-today-rail__dot {
	background: var(--dm-text-dim);
}
.organize-today-rail__tick--active .organize-today-rail__dot {
	background: var(--wp--preset--color--slate-blue);
	box-shadow: 0 0 10px rgba(90,107,158,0.5);
}
[data-theme="dark"] .organize-today-rail__tick--active .organize-today-rail__dot {
	background: var(--dm-link);
	box-shadow: 0 0 10px rgba(111,168,152,0.5);
}
.organize-today-rail__label {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-mid);
	white-space: nowrap;
}
[data-theme="dark"] .organize-today-rail__label {
	color: var(--dm-text-dim);
}
.organize-today-rail__tick--active .organize-today-rail__label {
	color: var(--wp--preset--color--slate-blue);
}
[data-theme="dark"] .organize-today-rail__tick--active .organize-today-rail__label {
	color: var(--dm-link);
}
@media (max-width: 900px) {
	.organize-today-rail {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.organize-today-rail__tick,
	.organize-today-rail__dot {
		transition: none;
	}
}

/* ==========================================================================
   Service Capability Block: three color variants for pages that list
   several capabilities in a row and want some visual variety between
   them rather than identical blocks back to back.
   ========================================================================== */
.organize-today-capability--tint {
	background-color: var(--wp--preset--color--slate-blue-tint) !important;
}
[data-theme="dark"] .organize-today-capability--tint {
	background-color: var(--dm-bg-2) !important;
}
.organize-today-capability--warm {
	background-color: var(--wp--preset--color--maroon-tint) !important;
}
[data-theme="dark"] .organize-today-capability--warm {
	background-color: rgba(185,138,62,0.1) !important;
}
[data-theme="dark"] .organize-today-capability--neutral {
	background-color: var(--dm-bg-2) !important;
}
.organize-today-capability {
	color: var(--wp--preset--color--off-black);
}
[data-theme="dark"] .organize-today-capability {
	color: var(--dm-text);
}