/*
 * BRD Astra Child — theme styles.
 * Loaded on the front end (after Astra) and in the block editor.
 * Everything is scoped to .brd-* classes or block-style variations so
 * Astra's own styling is never fought globally.
 */

:root {
	--brd-navy: #0f2a4a;
	--brd-blue: #1257a6;
	--brd-blue-dark: #0d4485;
	--brd-sky: #e8f1fb;
	--brd-amber: #f5a623;
	--brd-amber-dark: #d98c0f;
	--brd-ink: #101828;
	--brd-slate: #475467;
	--brd-mist: #f7f9fc;
	--brd-radius: 12px;
	--brd-radius-lg: 20px;
	--brd-shadow: 0 8px 30px rgba(15, 42, 74, 0.08);
	--brd-shadow-lg: 0 16px 48px rgba(15, 42, 74, 0.14);
	--brd-transition: 180ms ease;
}

/* ---------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------ */

.is-style-brd-card,
.is-style-brd-card-featured {
	background: #fff;
	border: 1px solid rgba(15, 42, 74, 0.08);
	border-radius: var(--brd-radius-lg);
	box-shadow: var(--brd-shadow);
	transition: transform var(--brd-transition), box-shadow var(--brd-transition), border-color var(--brd-transition);
	position: relative;
	overflow: hidden;
}

.is-style-brd-card::before,
.is-style-brd-card-featured::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--brd-blue), var(--brd-amber));
	opacity: 0;
	transition: opacity var(--brd-transition);
}

.is-style-brd-card:hover::before,
.is-style-brd-card-featured::before {
	opacity: 1;
}

.is-style-brd-card:hover,
.is-style-brd-card-featured:hover {
	transform: translateY(-6px);
	box-shadow: var(--brd-shadow-lg);
	border-color: rgba(18, 87, 166, 0.25);
}

.is-style-brd-card-featured {
	border: 2px solid var(--brd-blue);
}

/* ---------------------------------------------------------------------
 * Icon badges (service cards)
 * ------------------------------------------------------------------ */

.brd-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 14px;
	margin-bottom: 1.1rem;
}

.brd-icon::before {
	content: "";
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	background-color: #fff;
}

.brd-icon--found {
	background: linear-gradient(135deg, var(--brd-blue), var(--brd-blue-dark));
}

.brd-icon--found::before {
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z"/></svg>') center / contain no-repeat;
}

.brd-icon--chosen {
	background: linear-gradient(135deg, var(--brd-amber), var(--brd-amber-dark));
}

.brd-icon--chosen::before {
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 1.5l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.8 7.1-.7z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 1.5l2.9 6.6 7.1.7-5.4 4.8 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.8 7.1-.7z"/></svg>') center / contain no-repeat;
}

.brd-icon--listed {
	background: linear-gradient(135deg, var(--brd-navy), #1a3a63);
}

.brd-icon--listed::before {
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 5h16v2H4zm0 6h16v2H4zm0 6h10v2H4z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 5h16v2H4zm0 6h16v2H4zm0 6h10v2H4z"/></svg>') center / contain no-repeat;
}

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------ */

.is-style-brd-cta .wp-block-button__link {
	background: linear-gradient(135deg, var(--brd-amber), var(--brd-amber-dark));
	color: var(--brd-ink);
	border-radius: 999px;
	font-weight: 700;
	padding: 0.9em 1.8em 0.9em 2.2em;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: transform var(--brd-transition), box-shadow var(--brd-transition), gap var(--brd-transition);
	box-shadow: 0 6px 18px rgba(245, 166, 35, 0.4);
}

.is-style-brd-cta .wp-block-button__link::after {
	content: "\2192";
	transition: transform var(--brd-transition);
}

.is-style-brd-cta .wp-block-button__link:hover,
.is-style-brd-cta .wp-block-button__link:focus {
	color: var(--brd-ink);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(245, 166, 35, 0.45);
	gap: 0.75em;
}

.is-style-brd-cta .wp-block-button__link:hover::after {
	transform: translateX(2px);
}

.is-style-brd-cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--brd-navy);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Checklist
 * ------------------------------------------------------------------ */

.is-style-brd-checklist {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.is-style-brd-checklist li {
	position: relative;
	padding-left: 2em;
	margin-bottom: 0.65em;
}

.is-style-brd-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background-color: var(--brd-blue);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.7 5.9-4.2 4.9a.75.75 0 0 1-1.13.02L4.3 8.6a.75.75 0 1 1 1.1-1.02l1.5 1.62 3.66-4.27a.75.75 0 0 1 1.14.97z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.7 5.9-4.2 4.9a.75.75 0 0 1-1.13.02L4.3 8.6a.75.75 0 1 1 1.1-1.02l1.5 1.62 3.66-4.27a.75.75 0 0 1 1.14.97z"/></svg>') center / contain no-repeat;
}

/* Checklist inside dark sections */
.has-brd-navy-background-color .is-style-brd-checklist li::before {
	background-color: var(--brd-amber);
}

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------ */

.brd-hero {
	position: relative;
	background:
		radial-gradient(1200px 500px at 85% -10%, rgba(18, 87, 166, 0.55), transparent 60%),
		radial-gradient(900px 420px at 0% 110%, rgba(245, 166, 35, 0.18), transparent 55%),
		radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
		var(--brd-navy);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5vw), 0 100%);
}

.brd-hero + * {
	position: relative;
	margin-top: -1px;
}

/* Outline buttons: pill shape everywhere, to match the BRD CTA rhythm */
.is-style-outline .wp-block-button__link {
	border-radius: 999px;
	border-width: 2px;
	padding: 0.85em 2em;
	font-weight: 700;
	transition: background var(--brd-transition), transform var(--brd-transition), color var(--brd-transition);
}

.is-style-outline .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.brd-hero .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
}

.brd-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brd-amber);
}

.brd-eyebrow--on-light {
	color: var(--brd-blue);
}

/* ---------------------------------------------------------------------
 * Stats
 * ------------------------------------------------------------------ */

.brd-stat-number {
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--brd-blue);
}

.has-brd-navy-background-color .brd-stat-number {
	color: var(--brd-amber);
}

.brd-stats .wp-block-columns > .wp-block-column:not(:first-child) {
	border-left: 1px solid rgba(15, 42, 74, 0.12);
}

@media (max-width: 781px) {
	.brd-stats .wp-block-columns > .wp-block-column:not(:first-child) {
		border-left: none;
		border-top: 1px solid rgba(15, 42, 74, 0.12);
		padding-top: 1.5rem;
	}
}

/* ---------------------------------------------------------------------
 * Pricing
 * ------------------------------------------------------------------ */

.brd-price {
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	color: var(--brd-navy);
}

.brd-price small {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--brd-slate);
}

.brd-badge {
	display: inline-block;
	background: var(--brd-blue);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.35em 1.1em;
}

/* ---------------------------------------------------------------------
 * FAQ (core/details)
 * ------------------------------------------------------------------ */

.brd-faq .wp-block-details {
	background: #fff;
	border: 1px solid rgba(15, 42, 74, 0.1);
	border-radius: var(--brd-radius);
	padding: 1.1rem 1.4rem;
	margin-bottom: 0.9rem;
	box-shadow: var(--brd-shadow);
}

.brd-faq .wp-block-details summary {
	font-weight: 700;
	color: var(--brd-navy);
	cursor: pointer;
	transition: color var(--brd-transition);
}

.brd-faq .wp-block-details summary:hover {
	color: var(--brd-blue);
}

.brd-faq .wp-block-details summary:focus-visible {
	outline: 3px solid var(--brd-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

.brd-faq .wp-block-details[open] summary {
	color: var(--brd-blue);
	margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------------
 * Comparison table
 * ------------------------------------------------------------------ */

.brd-compare table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	background: #fff;
	border: 1px solid rgba(15, 42, 74, 0.1);
	border-radius: var(--brd-radius);
	overflow: hidden;
	box-shadow: var(--brd-shadow);
}

.brd-compare thead th {
	background: var(--brd-navy);
	color: #fff;
	font-weight: 700;
	padding: 0.9rem 1rem;
	text-align: left;
}

.brd-compare tbody td,
.brd-compare tbody th {
	padding: 0.85rem 1rem;
	border-top: 1px solid rgba(15, 42, 74, 0.08);
	vertical-align: top;
}

.brd-compare tbody tr:nth-child(even) {
	background: var(--brd-mist);
}

.brd-compare tbody td:first-child {
	font-weight: 600;
	color: var(--brd-navy);
}

/* ---------------------------------------------------------------------
 * Case study / article helpers
 * ------------------------------------------------------------------ */

.brd-kicker {
	border-left: 4px solid var(--brd-amber);
	padding-left: 1rem;
	color: var(--brd-slate);
	font-style: normal;
}

/* ---------------------------------------------------------------------
 * Blog & case-study polish (Astra archive/single markup)
 * ------------------------------------------------------------------ */

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
	border-radius: var(--brd-radius-lg);
	border: 1px solid rgba(15, 42, 74, 0.08);
	box-shadow: var(--brd-shadow);
}

.ast-article-post .entry-title a {
	color: var(--brd-navy);
	transition: color var(--brd-transition);
}

.ast-article-post .entry-title a:hover {
	color: var(--brd-blue);
}

.entry-content blockquote {
	border-left: 4px solid var(--brd-amber);
	background: var(--brd-mist);
	border-radius: 0 var(--brd-radius) var(--brd-radius) 0;
	padding: 1.25rem 1.5rem;
}

/* ---------------------------------------------------------------------
 * Accessibility & motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.is-style-brd-card,
	.is-style-brd-card-featured,
	.is-style-brd-cta .wp-block-button__link {
		transition: none;
	}

	.is-style-brd-card:hover,
	.is-style-brd-card-featured:hover,
	.is-style-brd-cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 781px) {
	.brd-compare {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.brd-compare table {
		min-width: 560px;
	}
}