/* ThriveWorkOS — escape-hatch CSS for rules theme.json cannot express.
   Design tokens (color/type/spacing) all come from theme.json; this file
   only covers hover states, backdrop-filter, dropdown chrome, and the
   hand-built logo mark / diagram glyphs. */

::selection {
	background: var( --wp--preset--color--brass );
	color: var( --wp--preset--color--dropdown-panel );
}

/* ---------- Sticky header ---------- */
/* The blur lives on a ::before, not on .site-header itself: a
   backdrop-filter on the header would make it the containing block for
   the mobile nav's position:fixed overlay, trapping the full-screen menu
   inside the header's own (tiny) box instead of covering the viewport. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var( --wp--preset--color--border );
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba( 244, 239, 228, 0.86 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

/* ---------- Logo mark (3 stacked bars) ---------- */
.thriveworkos-logo-bars {
	display: inline-flex;
	flex-direction: column;
	gap: 2.5px;
	width: 20px;
}
.thriveworkos-logo-bar {
	height: 3px;
	border-radius: 1px;
}
.thriveworkos-logo-bar--1 { background: var( --wp--preset--color--heading ); }
.thriveworkos-logo-bar--2 { background: var( --wp--preset--color--brass ); }
.thriveworkos-logo-bar--3 { background: var( --wp--preset--color--border-alt-2 ); }

.thriveworkos-logo-bars--inverse .thriveworkos-logo-bar--1 { background: var( --wp--preset--color--cream ); }
.thriveworkos-logo-bars--inverse .thriveworkos-logo-bar--2 { background: var( --wp--preset--color--brass ); }
.thriveworkos-logo-bars--inverse .thriveworkos-logo-bar--3 { background: var( --wp--preset--color--dark-muted ); }

.thriveworkos-wordmark-os { color: var( --wp--preset--color--brass ); }
.thriveworkos-logo-bars--inverse ~ .thriveworkos-wordmark .thriveworkos-wordmark-os,
.site-footer .thriveworkos-wordmark-os { color: var( --wp--preset--color--brass-light ); }

/* ---------- Navigation ---------- */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	font-weight: 600;
	color: var( --wp--preset--color--heading );
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	width: 290px;
	background: var( --wp--preset--color--dropdown-panel );
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 6px;
	box-shadow: 0 20px 44px -20px rgba( 28, 24, 21, 0.35 );
	padding: 8px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 12px 14px;
	border-radius: 4px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	background: var( --wp--preset--color--menu-hover );
}

/* Book a Call — rendered as a brass button inside core/navigation */
.thriveworkos-nav-cta .wp-block-navigation-item__content {
	background: var( --wp--preset--color--brass );
	color: var( --wp--preset--color--cta-on-brass ) !important;
	font-weight: 600;
	padding: 10px 18px !important;
	border-radius: 5px;
}
.thriveworkos-nav-cta .wp-block-navigation-item__content:hover {
	background: var( --wp--preset--color--brass-hover );
	color: var( --wp--preset--color--cta-on-brass ) !important;
}

/* ---------- Buttons ---------- */
.wp-block-button:not(.is-style-ghost):not(.is-style-inverse) .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--brass-hover );
}
.wp-block-button.is-style-inverse .wp-block-button__link {
	background: var( --wp--preset--color--heading );
	color: var( --wp--preset--color--cream );
}
.wp-block-button.is-style-inverse .wp-block-button__link:hover {
	background: #000;
}
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: none;
	color: var( --wp--preset--color--body-text );
	border-bottom: 1.5px solid var( --wp--preset--color--border-alt-2 );
	border-radius: 0;
	padding: 0 0 2px;
	font-weight: 600;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	color: var( --wp--preset--color--brass );
	border-bottom-color: var( --wp--preset--color--brass );
}

/* ---------- Eyebrow / kicker labels ---------- */
.eyebrow,
.wp-block-paragraph.is-style-eyebrow {
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-size: var( --wp--preset--font-size--eyebrow );
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var( --wp--preset--color--brass );
	font-weight: 500;
}
.is-style-dark-band .eyebrow,
.is-style-dark-band .wp-block-paragraph.is-style-eyebrow,
.is-style-card-dark .eyebrow {
	color: var( --wp--preset--color--brass-light );
}
.eyebrow a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Quote divider list ---------- */
.quote-divider-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.quote-divider-list li {
	font-family: var( --wp--preset--font-family--newsreader );
	font-size: 21px;
	font-style: italic;
	color: var( --wp--preset--color--heading );
	padding: 15px 0;
	border-top: 1px solid var( --wp--preset--color--border );
}
.quote-divider-list li:last-child {
	border-bottom: 1px solid var( --wp--preset--color--border );
}

/* ---------- Card variants ---------- */
.is-style-card-bordered {
	box-sizing: border-box;
	height: 100%;
	border: 1px solid var( --wp--preset--color--border-alt );
	border-radius: 8px;
	padding: 28px;
	transition: border-color 0.15s ease;
}
.wp-block-column > .is-style-card-bordered {
	display: flex;
	flex-direction: column;
}
.is-style-card-bordered:hover {
	border-color: var( --wp--preset--color--brass );
}
a.is-style-card-bordered:hover,
a:hover .is-style-card-bordered {
	border-color: var( --wp--preset--color--brass );
}

.is-style-card-rule-brass {
	border-top: 2px solid var( --wp--preset--color--brass );
	padding-top: 20px;
}
.is-style-card-rule-grey {
	border-top: 2px solid var( --wp--preset--color--border-alt-2 );
	padding-top: 20px;
}
.is-style-card-dark {
	background: var( --wp--preset--color--dark-card );
	border-radius: 8px;
	padding: 28px;
	color: var( --wp--preset--color--dark-text );
}
.is-style-card-dark :is(h1,h2,h3,h4) {
	color: var( --wp--preset--color--cream );
}

/* ---------- Dark section band ---------- */
.is-style-dark-band {
	background: var( --wp--preset--color--heading );
	color: var( --wp--preset--color--dark-text );
}
.is-style-dark-band :is(h1,h2,h3,h4) {
	color: var( --wp--preset--color--cream );
}
.is-style-dark-band p {
	color: var( --wp--preset--color--dark-text );
}

/* ---------- Brass CTA band ---------- */
.is-style-brass-band {
	background: var( --wp--preset--color--brass );
	color: var( --wp--preset--color--cta-on-brass );
}
.is-style-brass-band :is(h1,h2,h3,h4) {
	color: var( --wp--preset--color--cta-on-brass );
}

/* ---------- FAQ accordion (core/details) ---------- */
details.wp-block-details {
	border-top: 1px solid var( --wp--preset--color--border );
}
details.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	padding-right: 28px;
	position: relative;
}
details.wp-block-details summary::-webkit-details-marker {
	display: none;
}
details.wp-block-details summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	color: var( --wp--preset--color--brass );
}
details.wp-block-details[open] summary::after {
	content: '\2013';
}

/* ---------- Footer ---------- */
.site-footer {
	background: var( --wp--preset--color--heading );
	color: var( --wp--preset--color--muted-2 );
}
.site-footer a {
	color: var( --wp--preset--color--dark-text );
}
.site-footer a:hover {
	color: var( --wp--preset--color--cream );
}
.site-footer input[type="email"] {
	background: var( --wp--preset--color--footer-input-bg );
	border: 1px solid var( --wp--preset--color--dark-border );
	border-radius: 5px;
	color: var( --wp--preset--color--cream );
	padding: 11px 13px;
}
.site-footer .wp-block-button .wp-block-button__link {
	border-radius: 5px;
}
.site-footer .wp-block-button .wp-block-button__link:hover {
	background: var( --wp--preset--color--brass-light );
}
.site-footer .footer-bottom-bar {
	border-top: 1px solid var( --wp--preset--color--footer-input-bg );
}

/* ---------- Home hero "operating stack" diagram ---------- */
.thriveworkos-diagram-arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var( --wp--preset--color--muted-2 );
	font-size: 12px;
	line-height: 1;
	padding: 9px 0;
}
.thriveworkos-diagram-arrow::before {
	content: "";
	width: 1px;
	height: 14px;
	background: var( --wp--preset--color--border-alt-2 );
	margin-bottom: 2px;
}
.thriveworkos-diagram-box {
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 8px;
	background: var( --wp--preset--color--card );
}
.thriveworkos-diagram-box--dark {
	background: var( --wp--preset--color--heading );
	color: var( --wp--preset--color--dark-text );
	border-color: var( --wp--preset--color--dark-border );
	border-left: 4px solid var( --wp--preset--color--brass );
	box-shadow: 0 24px 50px -28px rgba( 28, 24, 21, 0.55 );
}
.thriveworkos-diagram-chip {
	border: 1px solid var( --wp--preset--color--dark-border );
	border-radius: 5px;
	text-align: center;
	color: var( --wp--preset--color--dark-text );
	font-size: 13px;
	font-weight: 500;
	padding: 12px 8px;
}

/* ---------- Cross-link row / breadcrumb ---------- */
.thriveworkos-breadcrumb {
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-size: var( --wp--preset--font-size--eyebrow );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
}
.thriveworkos-breadcrumb a {
	color: var( --wp--preset--color--brass );
}

/* ---------- Mobile nav overlay ---------- */
/* Core pads the overlay via clamp(1rem, var(--wp--style--root--padding-*), 20rem),
   but theme.json never defines that root padding variable, so the clamp
   resolves to nothing and the menu sits flush against the screen edges.
   Set real padding directly instead of relying on the (unset) variable. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 28px !important;
}

/* The desktop nav is right-justified (layout.justifyContent:"right"), and
   core couples the overlay's alignment to that same setting — which pushes
   every mobile menu item flush against the right edge instead of reading
   left to right. Force left alignment for the overlay specifically. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__label {
	font-family: var( --wp--preset--font-family--newsreader );
	font-size: 26px;
	font-weight: 500;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	padding: 10px 0;
}

/*
 * Core flattens nested submenus permanently open inside the mobile overlay
 * (no toggle) — fine for one level of two or three links, but it reads as
 * clutter and isn't how a mobile nav with nested menus normally behaves.
 * Restore the toggle button (core hides it here) and turn the submenu into
 * a real collapsible accordion, driven by the toggle's existing
 * aria-expanded state (already wired up by core's navigation interactivity,
 * we're only changing what the CSS does with it).
 */
.wp-block-navigation__responsive-container.is-menu-open .has-child {
	display: grid !important;
	grid-template-columns: 1fr 36px;
	align-items: center;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
	grid-column: 1;
	grid-row: 1;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation-submenu__toggle {
	display: flex !important;
	grid-column: 2;
	grid-row: 1;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation-submenu__toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	grid-row: 2;
	border-left: 1px solid var( --wp--preset--color--border );
	margin-top: 0 !important;
	max-height: 0 !important;
	opacity: 0;
	overflow: hidden !important;
	visibility: hidden !important;
	transition: max-height 0.25s ease, opacity 0.2s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) .wp-block-navigation__submenu-container {
	margin-top: 4px !important;
	max-height: 320px !important;
	opacity: 1;
	visibility: visible !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 19px;
	font-weight: 400;
	color: var( --wp--preset--color--muted );
}

.wp-block-navigation__responsive-container.is-menu-open .thriveworkos-nav-cta {
	margin-top: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .thriveworkos-nav-cta .wp-block-navigation-item__content {
	font-family: var( --wp--preset--font-family--libre-franklin );
	font-size: 17px;
	display: inline-block;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var( --wp--preset--color--heading );
}

/* ---------- Responsive: grid-layout blocks don't auto-collapse like flex columns do ---------- */
@media ( max-width: 781px ) {
	.site-footer-grid {
		grid-template-columns: 1fr !important;
		row-gap: 40px !important;
	}
}

/* core/columns already stacks below 781px via core CSS; just tidy up gap on
   the diagram + asymmetric-row-list when stacked. */
@media ( max-width: 600px ) {
	.thriveworkos-diagram-box {
		margin-top: 32px;
	}
}

/* ---------- Insights index: "The Operator's Brief" ledger ---------- */
.thriveworkos-filter-bar {
	background: var( --wp--preset--color--card-alt );
	border-top: 1px solid var( --wp--preset--color--border );
	border-bottom: 1px solid var( --wp--preset--color--border );
	padding: 0 32px !important;
}
.thriveworkos-filter-tabs {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.thriveworkos-filter-tab {
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --wp--preset--color--muted );
	padding: 18px 0;
	border-bottom: 2px solid transparent;
	display: inline-block;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.thriveworkos-filter-tab:hover {
	color: var( --wp--preset--color--heading );
	border-bottom-color: var( --wp--preset--color--border-alt-2 );
}
.thriveworkos-filter-tab.is-active {
	color: var( --wp--preset--color--heading );
	border-bottom-color: var( --wp--preset--color--brass );
}
.thriveworkos-result-count {
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-size: 11.5px;
	letter-spacing: 0.08em;
	color: var( --wp--preset--color--muted-2 );
}

.thriveworkos-eyebrow-tag {
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--brass );
	margin: 0 0 10px;
}
.thriveworkos-issue-number {
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-weight: 500;
	font-size: 22px;
	color: var( --wp--preset--color--muted-2 );
}
.thriveworkos-featured-row .thriveworkos-issue-number {
	font-size: 40px;
	line-height: 1;
	color: var( --wp--preset--color--heading );
}

.thriveworkos-ledger-meta {
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}
.thriveworkos-ledger-meta .wp-block-post-terms {
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--brass );
}
.thriveworkos-ledger-meta .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
.thriveworkos-ledger-meta .wp-block-post-date {
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var( --wp--preset--color--muted-2 );
	position: relative;
	padding-left: 14px;
}
.thriveworkos-ledger-meta .wp-block-post-date::before {
	content: "\00B7";
	position: absolute;
	left: 4px;
}

.thriveworkos-featured-row {
	padding: 56px 0;
	border-bottom: 1px solid var( --wp--preset--color--border );
}
.thriveworkos-featured-row h2 {
	max-width: 760px;
}
.thriveworkos-featured-row .wp-block-post-excerpt {
	max-width: 680px;
	margin-bottom: 20px !important;
}
.thriveworkos-read-more {
	font-family: var( --wp--preset--font-family--libre-franklin );
	font-size: 15.5px;
	font-weight: 600;
	color: var( --wp--preset--color--heading );
	text-decoration: none;
	border-bottom: 1.5px solid var( --wp--preset--color--brass );
	padding-bottom: 2px;
}

.thriveworkos-ledger-row {
	padding: 36px 0;
	border-top: 1px solid var( --wp--preset--color--border );
}
.thriveworkos-ledger-row h3 {
	max-width: 720px;
}
.thriveworkos-ledger-row .wp-block-post-excerpt {
	max-width: 640px;
}
.wp-block-post-title a {
	text-decoration: none;
	color: var( --wp--preset--color--heading );
}
.wp-block-post-title a:hover {
	color: var( --wp--preset--color--brass );
}

.thriveworkos-pagination {
	padding: 32px 0 0;
	gap: 8px;
}
.thriveworkos-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 8px;
}
.thriveworkos-pagination .wp-block-query-pagination-previous::before {
	content: "\2190\00A0\00A0";
}
.thriveworkos-pagination .wp-block-query-pagination-next::after {
	content: "\00A0\00A0\2192";
}
.thriveworkos-pagination .page-numbers,
.thriveworkos-pagination .wp-block-query-pagination-previous,
.thriveworkos-pagination .wp-block-query-pagination-next {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	min-width: 40px;
	padding: 0 14px;
	border: 1px solid var( --wp--preset--color--border );
	border-radius: 6px;
	font-family: var( --wp--preset--font-family--ibm-plex-mono );
	font-size: 14px;
	color: var( --wp--preset--color--body-text );
	text-decoration: none;
}
.thriveworkos-pagination .page-numbers {
	padding: 0;
	width: 40px;
}
.thriveworkos-pagination a.page-numbers:hover,
.thriveworkos-pagination .wp-block-query-pagination-previous:hover,
.thriveworkos-pagination .wp-block-query-pagination-next:hover {
	border-color: var( --wp--preset--color--brass );
}
.thriveworkos-pagination .page-numbers.current {
	background: var( --wp--preset--color--brass );
	border-color: var( --wp--preset--color--brass );
	color: var( --wp--preset--color--heading );
	font-weight: 500;
}
.thriveworkos-pagination .page-numbers.dots {
	border-color: transparent;
	color: var( --wp--preset--color--muted-2 );
}

.thriveworkos-newsletter-card {
	text-align: center;
	padding: 52px 48px !important;
}
.thriveworkos-newsletter-card .eyebrow {
	justify-content: center;
}
.thriveworkos-newsletter-card form {
	justify-content: center;
}