/* Credit Union Difference - visual identity layer
   Reads only the --cud-* custom properties from functions.php's color-scheme
   toggle, so every rule here repaints correctly under either scheme. */

/* Blocksy prints its own Customizer-generated `body{background-color:...}`
   in a <style id="ct-main-styles-inline-css"> block that is NOT tied to any
   enqueue dependency - it's echoed directly and lands dead last in <head>,
   after this stylesheet, so it wins the same-specificity cascade tie no
   matter how enqueue order is arranged. !important is the only reliable way
   to own this property. */
body {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--cud-ink);
	background: var(--cud-bg) !important;
}
/* "Visibly tinted" background option (Appearance -> CUD Theme Options) - a
   wash of the active scheme's hero color instead of flat cream. */
body.cud-bg-tinted {
	background: color-mix(in srgb, var(--cud-hero-bg) 18%, var(--cud-bg)) !important;
}

h1, h2, .cud-quote p {
	font-family: Georgia, "Times New Roman", serif;
}

/* Default: sits on the cream page background (Book value-grid, Participant
   Workbook, etc.) - needs a color with real contrast against light cream,
   not the bright lime highlight, which is nearly unreadable there. */
.cud-eyebrow {
	text-transform: uppercase;
	letter-spacing: .13em;
	font-size: .8rem;
	font-weight: 900;
	color: var(--cud-accent-b);
	margin: 0 0 10px;
}
/* Inside a dark section (hero/band), the highlight color is what has
   contrast - this is the one place it belongs. */
.cud-hero .cud-eyebrow,
.cud-band .cud-eyebrow {
	color: var(--cud-highlight);
}

/* Comparison table (Products page) */
.wp-block-table table {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.wp-block-table th {
	background: var(--cud-primary);
	color: #fff;
	text-align: left;
	padding: 16px;
}
.wp-block-table td {
	padding: 16px;
	border-bottom: 1px solid var(--cud-border);
	vertical-align: top;
}

/* Blocksy renders its own automatic page-title bar (".hero-section", with an
   <h1 class="page-title">) above every page's content. The original design
   actually keeps this as a small muted breadcrumb-style label above each
   hero (matching the source draft's ".onepage-label" treatment) - not a big
   page heading, and not hidden outright as an earlier pass here assumed. */
.hero-section[data-type="type-1"] {
	margin-bottom: 0;
	padding: 20px 0 0;
}
.hero-section[data-type="type-1"] .page-title {
	font-family: Inter, sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .8rem !important;
	font-weight: 700;
	color: var(--cud-muted);
}
/* Appearance -> CUD Theme Options -> "Page name label" toggle. */
body.cud-hide-page-label .hero-section[data-type="type-1"] {
	display: none;
}

/* Blocksy sets `color` directly on the h1/h2/h3 elements themselves (not just
   inherited from a parent), and a directly-set color always wins over an
   inherited one regardless of stylesheet order or specificity. Any heading
   living inside a dark section must be told explicitly to go white, or it
   silently renders in Blocksy's default dark ink on a dark background. */
.cud-hero h1,
.cud-hero h2,
.cud-hero h3,
.cud-hero .wp-block-heading,
.cud-band h1,
.cud-band h2,
.cud-band h3,
.cud-band .wp-block-heading {
	color: #fff;
}

/* Pill buttons */
.cud-btn,
.cud-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 13px 22px;
	font-weight: 800;
	background: var(--cud-highlight);
	color: var(--cud-primary);
	border: 2px solid var(--cud-highlight);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
	transition: transform .2s ease;
	text-decoration: none;
}
.cud-btn:hover,
.cud-btn .wp-block-button__link:hover {
	transform: translateY(-1px);
}
.cud-btn-secondary,
.cud-btn-secondary .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
	box-shadow: none;
}
.cud-btn-disabled,
.cud-btn-disabled .wp-block-button__link {
	background: transparent;
	color: var(--cud-muted);
	border-color: var(--cud-border);
	box-shadow: none;
	cursor: default;
	pointer-events: none;
}

/* Hero sections - use --cud-hero-bg (the source draft's dedicated hero
   gradient tone), not --cud-primary (reserved for footer/band/table-header,
   and a different color from the hero in the Scheme B draft). */
.cud-hero {
	/* The radial highlight sits at top-right, right where the cover image
	   lands, and a 25%/40%-spread mix reads as an obvious light patch rather
	   than a subtle accent (visible next to the mockups) - toned down. */
	background: radial-gradient(circle at top right, color-mix(in srgb, var(--cud-highlight) 14%, transparent), transparent 28%),
		linear-gradient(135deg, var(--cud-hero-bg), color-mix(in srgb, var(--cud-hero-bg) 60%, #000 10%) 60%);
	color: #fff;
	border-radius: 22px;
	padding: clamp(40px, 6vw, 78px);
}
.cud-hero.cud-hero-board {
	background: linear-gradient(135deg, var(--cud-hero-bg), var(--cud-accent-a));
}
.cud-hero.cud-hero-employee {
	background: linear-gradient(135deg, var(--cud-accent-b), var(--cud-hero-bg));
}

/* Cards */
.cud-card {
	background: #fff;
	border-radius: 22px;
	padding: 28px;
	border: 1px solid var(--cud-border);
	box-shadow: 0 10px 28px rgba(21, 34, 56, .08);
	height: 100%;
}
.cud-card.cud-card-board {
	border-top: 8px solid var(--cud-accent-a);
}
.cud-card.cud-card-employee {
	border-top: 8px solid var(--cud-accent-b);
}
.cud-card.cud-card-book {
	border-top: 8px solid var(--cud-highlight);
}
.cud-card .cud-module-number {
	display: inline-block;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cud-highlight) 25%, #fff);
	color: var(--cud-primary);
	padding: 6px 12px;
	font-weight: 900;
	font-size: .85rem;
}

/* Quote / testimonial card */
.cud-quote {
	background: #fff;
	border-left: 7px solid var(--cud-accent-b);
	border-radius: 22px;
	padding: 24px 28px;
	box-shadow: 0 10px 28px rgba(21, 34, 56, .08);
}
.cud-quote p {
	color: var(--cud-primary);
	font-size: 1.3rem;
	margin-top: 0;
}
.cud-quote span,
.cud-quote cite {
	color: var(--cud-muted);
	font-weight: 700;
}

/* Book / product cover images - explicit, pronounced drop shadow so the
   cover visibly separates from the page background under either scheme. */
.cud-book-cover img,
img.cud-book-cover {
	display: block;
	max-width: 300px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 14px;
	/* Near-black, multi-layer shadow so it reads clearly wherever the cover
	   sits - on cream/white cards AND on the dark hero background, where a
	   lighter navy-tinted shadow barely showed up at all. */
	box-shadow:
		0 40px 80px rgba(0, 0, 0, .55),
		0 16px 32px rgba(0, 0, 0, .4),
		0 4px 10px rgba(0, 0, 0, .3) !important;
}

/* Bulleted lists - Blocksy zeroes out list-style-type on every <ul>, so a
   plain wp:list renders with no markers at all unless given one back. Uses
   the original draft's gold-checkmark treatment. */
.wp-block-list {
	padding-left: 0;
	list-style: none;
}
.wp-block-list li {
	position: relative;
	padding-left: 30px;
	margin: 10px 0;
}
.wp-block-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--cud-accent-b);
	font-weight: 900;
}

/* Note / callout box */
.cud-note {
	background: color-mix(in srgb, var(--cud-bg) 60%, #fff);
	border: 1px solid var(--cud-border);
	border-radius: 22px;
	padding: 28px;
}

/* Movement band (dark full-bleed statement section) */
.cud-band {
	background: var(--cud-primary);
	color: #fff;
	border-radius: 22px;
	padding: clamp(36px, 6vw, 54px) clamp(24px, 8vw, 96px);
	text-align: center;
}

@media (max-width: 760px) {
	.cud-hero { padding: 36px 24px; }
}

/* Site header - sticky translucent bar with a circular "CUD" brand mark,
   matching the original draft's .site-header/.brand treatment. Background
   and text use the scheme-specific --cud-header-* tokens rather than a
   fixed dark/light choice: Scheme A's own draft used a dark header, Scheme
   B's used a cream one - it is not just a color swap of the same rule.
   Blocksy's #header only sets position:relative/z-index itself, so there's
   no fight over `position` - safe to promote to sticky here. */
#header.ct-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--cud-header-bg);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--cud-border);
}
/* Blocksy's Customizer-generated inline CSS paints an opaque white
   background-color directly on this NESTED row div (not the outer #header
   above), on top of whatever the outer header's own background is. That
   made Scheme A's white nav text invisible against a still-white bar - the
   outer header rule never had a chance to show through. */
#header.ct-header [data-row="middle"] {
	background-color: var(--cud-header-bg) !important;
	background-image: none !important;
}
#header.ct-header .site-title-container {
	display: flex;
	align-items: center;
	gap: 12px;
}
#header.ct-header .site-title-container::before {
	content: "CUD";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--cud-hero-bg);
	color: #fff;
	font-family: Inter, sans-serif;
	font-weight: 800;
	font-size: .7rem;
	letter-spacing: .02em;
}
#header.ct-header .site-title a,
#header.ct-header .header-menu-1 .ct-menu-link,
#header.ct-header .ct-header-search {
	color: var(--cud-header-text);
}
/* Blocksy's "type-1" header preset sets --theme-text-transform:uppercase
   directly on the menu links via a Customizer-generated inline style; the
   mockups use normal title case, matching the source draft's plain <nav>. */
#header.ct-header .header-menu-1 .ct-menu-link {
	--theme-text-transform: none;
	text-transform: none;
}
#header.ct-header .header-menu-1 .ct-menu-link:hover,
#header.ct-header .header-menu-1 .current-menu-item .ct-menu-link {
	/* opacity, not a color swap: --cud-header-bg flips from dark (Scheme A)
	   to light (Scheme B), and a single fixed hover color can't stay legible
	   against both. */
	opacity: .6;
}

/* Footer - dark navy bar with light text/links, matching the original
   draft's .footer treatment. !important guards against the same class of
   Blocksy Customizer-inline override found on the header. */
#footer.ct-footer,
#footer.ct-footer [data-row] {
	background: var(--cud-primary) !important;
	background-color: var(--cud-primary) !important;
	color: rgba(255, 255, 255, .8);
}
#footer.ct-footer a {
	color: #fff;
}
#footer.ct-footer a:hover {
	color: var(--cud-highlight);
}

/* FAQ accordion ([cud_faq] shortcode, cud-toolkit plugin) - native
   <details>/<summary>, no JS. Each item is its own card; the open item
   gets an accent left-border and a soft glow so it reads as "lifted". */
.cud-faq-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 24px 0;
}
.cud-faq-item {
	background: #fff;
	border: 1px solid var(--cud-border);
	border-left: 4px solid transparent;
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(21, 34, 56, .06);
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.cud-faq-item:hover {
	box-shadow: 0 10px 26px rgba(21, 34, 56, .1);
}
.cud-faq-item[open] {
	border-left-color: var(--cud-accent-a);
	box-shadow: 0 14px 34px rgba(21, 34, 56, .14);
}
.cud-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	font-weight: 800;
	color: var(--cud-primary);
	font-size: 1.02rem;
}
.cud-faq-question::-webkit-details-marker {
	display: none;
}
.cud-faq-question::marker {
	content: "";
}
.cud-faq-icon {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cud-accent-a) 12%, transparent);
	transition: transform .25s ease, background .25s ease;
}
.cud-faq-icon::before,
.cud-faq-icon::after {
	content: "";
	position: absolute;
	background: var(--cud-accent-a);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.cud-faq-icon::before {
	width: 10px;
	height: 2px;
}
.cud-faq-icon::after {
	width: 2px;
	height: 10px;
	transition: opacity .2s ease;
}
.cud-faq-item[open] .cud-faq-icon {
	background: var(--cud-accent-a);
	transform: rotate(180deg);
}
.cud-faq-item[open] .cud-faq-icon::before,
.cud-faq-item[open] .cud-faq-icon::after {
	background: #fff;
}
.cud-faq-item[open] .cud-faq-icon::after {
	opacity: 0;
}
.cud-faq-answer {
	padding: 0 22px 20px;
	color: var(--cud-muted);
	border-top: 1px solid var(--cud-border);
	padding-top: 16px;
	animation: cud-faq-fade-in .3s ease;
}
.cud-faq-answer p:last-child {
	margin-bottom: 0;
}
@keyframes cud-faq-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}
