/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* -------------------------------------------------------------------------
 * Tame Bricks' paragraph-to-heading spacing.
 * Bricks core sets `margin-block: 1.2em 0` on a heading that follows a
 * paragraph. Because `em` is relative to the heading's own font size, large
 * headings (h1/h2) get a 48–58px top margin. Use a fixed rem so the gap is
 * consistent regardless of heading size. Adjust the value to taste.
 * ---------------------------------------------------------------------- */
:where(p:last-of-type) + h1,
:where(p:last-of-type) + h2,
:where(p:last-of-type) + h3,
:where(p:last-of-type) + h4,
:where(p:last-of-type) + h5,
:where(p:last-of-type) + h6 {
	margin-block: 1.5rem 0;
}

/* -------------------------------------------------------------------------
 * Brand button — Figma teal→gold gradient.
 * Bricks' "primary" style forces background-color: var(--bricks-color-primary)
 * (#ffd64f yellow) and suppresses the element's gradient. Override globally so
 * every primary button is the brand gradient (hero, CTAs, header "Let's Talk").
 * ---------------------------------------------------------------------- */
.bricks-button.bricks-background-primary {
	background-color: transparent;
	background-image: linear-gradient(135deg, #6baabc 0%, #cba869 100%);
	border: 0;
	border-radius: 12px;
}
.bricks-button.bricks-background-primary:hover {
	background-image: linear-gradient(135deg, #5e9bac 0%, #bd9a5d 100%);
}

/* -------------------------------------------------------------------------
 * "Three Paths" question lists — real <ul>, no markers, 8px under each line.
 * ---------------------------------------------------------------------- */
ul.dh-qlist {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 20px; /* larger — adjust to taste */
}
ul.dh-qlist li {
	margin: 0;
	padding: 0;
}
/* The questions are links — underline so they read as links, teal on hover. */
ul.dh-qlist a {
	font-size: 18px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
ul.dh-qlist a:hover {
	color: #6baabc;
	text-decoration-thickness: 2px;
}
/* The questions are links — underline so they read as links in body copy,
   brand teal on hover. (Site-wide link hover lives in Theme Styles → Links.) */
ul.dh-qlist a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
ul.dh-qlist a:hover {
	color: #6baabc;
	text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------------
 * FAQ accordion — fill the column, white cards w/ soft shadow, brand +/− icon.
 * (Item background set to #fff on the element; column #dh-faq-list set in data.)
 * ---------------------------------------------------------------------- */
#dh-faq-list {
	flex: 1 1 0;
	min-width: 0;
}
.brxe-accordion .accordion-item {
	box-shadow: 0 8px 20px 2px rgba(0, 0, 0, 0.07);
}
.brxe-accordion .accordion-title-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.brxe-accordion .accordion-title-wrapper::after {
	content: "+";
	flex: 0 0 auto;
	margin-left: 16px;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	color: #6baabc;
	transition: transform 0.2s ease;
}
.brxe-accordion .brx-open .accordion-title-wrapper::after {
	content: "\2013"; /* en dash */
}
/* Links inside FAQ answers — same affordance as the Three Paths lists. */
.brxe-accordion .accordion-content-wrapper a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 0.15s ease;
}
.brxe-accordion .accordion-content-wrapper a:hover {
	text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------------
 * Sticky site header. Must live on #brx-header (the direct <body> child) —
 * NOT the section inside it, whose containing block is too short to ever stick.
 * No ancestor has an overflow that would break position:sticky.
 * ---------------------------------------------------------------------- */
#brx-header {
	position: sticky;
	top: 0;
	z-index: 999;
}
/* Offset under the WP admin toolbar when it's showing (logged-in users only).
   Toolbar is 32px normally, 46px at ≤782px. Visitors have no .admin-bar class. */
.admin-bar #brx-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar #brx-header {
		top: 46px;
	}
}

/* -------------------------------------------------------------------------
 * Single-post template (#186) — "Related questions" cards (no images).
 * ---------------------------------------------------------------------- */
.brxe-related-posts .related-posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.brxe-related-posts .repeater-item {
	margin: 0;
	padding: 0;
}
.brxe-related-posts .repeater-item h3 {
	margin: 0;
	font-family: "Outfit", sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.35;
}
.brxe-related-posts .repeater-item h3 a {
	color: #6baabc;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
.brxe-related-posts .repeater-item h3 a:hover {
	color: #4d8496;
	text-decoration-thickness: 2px;
}

/* Links inside post content (Further Reading, inline) — real link affordance,
   teal on hover. Same treatment as the Three Paths + FAQ links. */
.brxe-post-content a {
	color: #6baabc;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
.brxe-post-content a:hover {
	color: #4d8496;
	text-decoration-thickness: 2px;
}

/* Stack the single-post 2-column body + related grid on small screens */
@media screen and (max-width: 767px) {
	#brxe-dhbodyc {
		flex-direction: column;
	}
	#brxe-dhlcol,
	#brxe-dhrcol {
		width: 100% !important;
	}
	.brxe-related-posts .related-posts {
		grid-template-columns: 1fr;
	}
}