/* Left-align banner H1 on Vault pages (Blogs, Fitness, Fatherhood, Work) plus About Me and Let's Connect, in line with the content column. Not blog posts. */
body:is(.page-id-2081, .page-id-2082, .page-id-2083, .page-id-2084, .page-id-1859, .page-id-1860) .wp-block-cover__inner-container > .wp-block-group {
	align-items: stretch;
}
body:is(.page-id-2081, .page-id-2082, .page-id-2083, .page-id-2084, .page-id-1859, .page-id-1860) .wp-block-cover__inner-container .is-vertical:has(> .wp-block-post-title) {
	align-items: flex-start;
}
body:is(.page-id-2081, .page-id-2082, .page-id-2083, .page-id-2084, .page-id-1859, .page-id-1860) .wp-block-cover__inner-container .wp-block-post-title {
	text-align: left;
	width: 100%;
}

/* Italicize in-page H2s on Vault pages only */
body:is(.page-id-2081, .page-id-2082, .page-id-2083, .page-id-2084) .wp-block-post-content h2 {
	font-style: italic;
}

/* Site title matches the site-wide Poppins (theme default was Source Sans 3) */
.wp-block-site-title,
.wp-block-site-title a {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
}
/* Let's Connect page: content sits flush under the green banner (other pages get spacing). */
.page-id-1860 .bjl-page-main {
  margin-top: 0 !important;
}

/* About Me page: banner title lines up with the 700px body text column. */
.page-id-1859 header h1.wp-block-post-title {
  max-width: 700px;
}

/* Mobile: shorter green title banner. Inline styles set the desktop height, so !important is needed. */
@media (max-width: 600px) {
  header.wp-block-template-part .wp-block-group.alignfull.has-background {
    min-height: 150px !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}
/* Homepage: remove the white gap between the site header and the green hero banner. */
.wp-site-blocks > .wp-block-cover.aligncenter {
	margin-block-start: 0;
}
/* Let's Connect page: banner stays full width. Content is a 960px grid that lines up with the banner title.
   Row 1: profile. Row 2: Listen + Read side by side. Row 3: Instagram. Row 4: blog CTA. Stacks to one column on small screens. */
.page-id-1860 .wp-block-post-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	max-width: min(960px, calc(100% - 2 * var(--wp--preset--spacing--50)));
	margin: 1.5rem auto;
	padding-left: 0;
	padding-right: 0;
}
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull {
	max-width: none;
	width: auto;
	margin: 0;
	border-radius: 12px;
	grid-column: 1 / -1;
}
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(2),
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(3) {
	grid-column: auto;
}
.page-id-1860 .wp-block-post-content > p:empty {
	display: none;
}
@media (max-width: 781px) {
	.page-id-1860 .wp-block-post-content {
		grid-template-columns: 1fr;
	}
}
/* Let's Connect page: left column = Listen then Instagram; right column = Read (spans both rows). */
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(1) {
	grid-column: 1 / -1;
	grid-row: 1;
}
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(2) {
	grid-column: 1;
	grid-row: 2;
}
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(3) {
	grid-column: 2;
	grid-row: 2 / span 2;
}
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(4) {
	grid-column: 1;
	grid-row: 3;
}
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(5) {
	grid-column: 1 / -1;
	grid-row: 4;
}
@media (max-width: 781px) {
	.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(n) {
		grid-column: 1;
		grid-row: auto;
	}
}
/* Let's Connect page: taller Spotify embed (16:9 instead of the wide 21:9 strip). */
.page-id-1860 .wp-embed-aspect-21-9 .wp-block-embed__wrapper::before {
	padding-top: 56.25%;
}

/* ===== Mobile nav overlay: white background, green accents, social row ===== */

/* Social icons live in the menu markup but only show inside the open mobile overlay. */
.wp-block-navigation .bjl-nav-social {
	display: none;
}

/* Overlay shell: white, thin green bar across the top. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #ffffff;
	border-top: 6px solid #3f5b44;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 4rem 2rem 2.5rem;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 0.25rem;
	width: 100%;
}

/* Main links: big, Poppins, green, with a hairline divider between each. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	flex-wrap: wrap;
	border-bottom: 1px solid #d8dcd0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	color: #3f5b44;
	padding: 0.9rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: #1e2a22;
}

/* Current page gets a green marker. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset 4px 0 0 #3f5b44;
	padding-left: 1rem;
}

/* Vault submenu: smaller, indented, green rule on the left. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0.75rem 1rem;
	margin-left: 0.25rem;
	border-left: 2px solid #3f5b44;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.125rem;
	font-weight: 500;
	color: #5b6058;
	padding: 0.45rem 0;
}

/* Social row. */
.wp-block-navigation__responsive-container.is-menu-open .bjl-nav-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	width: 100%;
	margin-top: 2rem;
	padding-top: 1.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .bjl-nav-social::before {
	content: "Find me on";
	flex-basis: 100%;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5b6058;
}
.wp-block-navigation__responsive-container.is-menu-open .bjl-nav-social .wp-social-link {
	background-color: #3f5b44 !important;
	color: #ffffff !important;
}

/* Close button: green, easy to tap. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #3f5b44;
	top: 1.25rem;
	right: 1.25rem;
}
.wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
}

/* Gentle staggered fade-in when the menu opens. */
@keyframes bjl-nav-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > * {
		opacity: 0;
		animation: bjl-nav-rise 0.4s ease forwards;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > :nth-child(1) { animation-delay: 0.05s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > :nth-child(2) { animation-delay: 0.12s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > :nth-child(3) { animation-delay: 0.19s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > :nth-child(4) { animation-delay: 0.26s; }
}


/* ===== Mobile nav overlay: compact, left-aligned pass (overrides the block above) ===== */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 3.75rem 1.5rem 1.5rem;
	justify-content: flex-start;
	align-items: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.5rem;
	padding: 0.6rem 0;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	padding-left: 0.75rem;
}

/* Vault submenu: one compact row instead of a tall stack. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0 1.25rem;
	padding: 0 0 0.6rem 0.75rem;
	margin: 0 0 0.25rem;
	min-width: 0;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1rem;
	padding: 0.3rem 0;
}

/* Social row: left-aligned, smaller icons, no divider line under it. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(> .bjl-nav-social) {
	border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .bjl-nav-social {
	justify-content: flex-start;
	text-align: left;
	font-size: 20px;
	gap: 0.6rem;
	margin-top: 0.75rem;
	padding-top: 0.5rem;
}


/* ===== Mobile nav: right-side drawer, right-aligned, no dividers (overrides the two blocks above) ===== */
.wp-block-navigation__responsive-container.is-menu-open {
	left: auto;
	right: 0;
	width: 72%;
	max-width: 320px;
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
	--navigation-layout-justification-setting: flex-end;
	--navigation-layout-justify: flex-end;
	--navigation-layout-align: flex-end;
	text-align: right;
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-navigation__responsive-container.is-menu-open {
		animation: bjl-drawer-in 0.25s ease;
	}
}
@keyframes bjl-drawer-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 3.75rem 1.25rem 1.5rem;
	align-items: flex-end;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-end;
	justify-content: flex-start;
	text-align: right;
}

/* No dividers. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(> .bjl-nav-social) {
	border-bottom: 0;
	align-items: flex-end;
	justify-content: flex-end;
	text-align: right;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: right;
}

/* Current page marker moves to the right edge. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: inset -4px 0 0 #3f5b44;
	padding-left: 0;
	padding-right: 0.75rem;
}

/* Vault submenu: right-aligned row, green rule on the right. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	justify-content: flex-end;
	gap: 0 1rem;
	padding: 0 0.75rem 0.5rem 0;
	border-left: 0;
	border-right: 2px solid #3f5b44;
	margin: 0 0 0.25rem;
}

/* Social row: right-aligned. */
.wp-block-navigation__responsive-container.is-menu-open .bjl-nav-social {
	justify-content: flex-end;
	text-align: right;
}


/* Vault submenu: stack vertically again, right-aligned. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
	justify-content: flex-end;
}


/* ===== Mobile nav: floating rounded card instead of full-height rectangle ===== */
.wp-block-navigation__responsive-container.is-menu-open {
	top: 0.75rem;
	right: 0.75rem;
	bottom: auto;
	height: auto;
	max-height: calc(100dvh - 1.5rem);
	overflow-y: auto;
	border-top: 0;
	border-radius: 24px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
@keyframes bjl-drawer-in {
	from { transform: translateX(calc(100% + 1rem)); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}


/* ===== Mobile nav: flush-right drawer, rounded on the left side only, set lower on screen ===== */
.wp-block-navigation__responsive-container.is-menu-open {
	top: 5rem;
	right: 0;
	border-radius: 24px 0 0 24px;
	max-height: calc(100dvh - 6.5rem);
	box-shadow: -10px 8px 30px rgba(0, 0, 0, 0.18);
}


/* ===== Mobile nav: underlined main links + "Nav" label top left ===== */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: #3f5b44;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "Nav";
	position: absolute;
	top: 1.35rem;
	left: 1.5rem;
	font-family: var(--wp--preset--font-family--poppins);
	font-style: italic;
	font-weight: 200;
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #3f5b44;
}


/* ===== Mobile nav: remove "Nav" label, X becomes "Close Nav", more space above first link ===== */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: none;
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
	content: "Close Nav";
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	color: #3f5b44;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 5.5rem;
}


/* Close Nav: italic, thin */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
	font-style: italic;
	font-weight: 200;
}


/* ===== "Here's the Gist" callout for blog posts (Group block with class bjl-gist) ===== */
.bjl-gist {
	background-color: #f5f3ee;
	border-left: 6px solid #3f5b44;
	border-radius: 0 12px 12px 0;
	padding: 1.25rem 1.5rem;
	margin-top: 1.5rem;
	margin-bottom: 2rem;
}
.bjl-gist .bjl-gist__title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: #3f5b44;
	margin: 0 0 0.6rem;
}
.bjl-gist ul {
	margin: 0;
	padding-left: 1.25rem;
}
.bjl-gist li {
	margin-bottom: 0.4rem;
	line-height: 1.6;
}
.bjl-gist li:last-child {
	margin-bottom: 0;
}


/* "Here's the Gist" callout: smaller, lighter body text; title matches homepage section headings */
.bjl-gist .bjl-gist__title {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}
.bjl-gist li {
	font-size: 0.9rem;
	font-weight: 300;
	line-height: 1.6;
	color: #1e2a22;
}


/* ===== Post sidebar preview: categories + related posts cards (classes only used on the preview draft) ===== */
.bjl-side-card {
	background-color: #ffffff;
	border: 1px solid #dde0d8;
	border-radius: 12px;
	padding: 1rem 1.1rem;
	margin-bottom: 1rem;
}
.bjl-side-card .bjl-side-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #3f5b44;
	margin: 0 0 0.5rem;
}
.bjl-side-card ul,
.bjl-side-card .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bjl-side-card .wp-block-categories li {
	font-size: 14px;
	padding: 0.4rem 0;
	border-bottom: 1px solid #eceee8;
}
.bjl-side-card .wp-block-categories li:last-child {
	border-bottom: 0;
}
.bjl-side-card .wp-block-post-template > li {
	padding: 0.5rem 0;
	border-bottom: 1px solid #eceee8;
}
.bjl-side-card .wp-block-post-template > li:last-child {
	border-bottom: 0;
}
.bjl-side-card .wp-block-post-title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
}
.bjl-side-card .wp-block-post-terms {
	font-size: 11px;
	color: #5b6058;
	margin: 2px 0 0;
}
@media (min-width: 782px) {
	.bjl-side-sticky {
		position: sticky;
		top: 1.5rem;
	}
}


/* ===== Post template: sidebar author card, related thumbnails, category pills ===== */
.bjl-author-card {
	gap: 0.9rem;
}
.bjl-author-card .bjl-side-title {
	margin: 0 0 2px;
}
.bjl-author-card .wp-block-post-author-name {
	font-size: 16px;
	font-weight: 600;
	color: #1e2a22;
	margin: 0;
}
.bjl-author-card .wp-block-avatar img {
	border-radius: 50%;
	display: block;
}

.bjl-side-card .wp-block-jetpack-related-posts .jp-related-posts-i2__list,
.bjl-side-card .wp-block-jetpack-related-posts .jp-related-posts-i2__row {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bjl-side-card .jp-related-posts-i2__post {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
.bjl-side-card .jp-related-posts-i2__post:last-child {
	margin-bottom: 0;
}
.bjl-side-card .jp-related-posts-i2__post-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	margin: 0 0 6px;
}
.bjl-side-card .jp-related-posts-i2__post-link {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: #1e2a22;
	text-decoration: none;
}

.bjl-terms-row {
	font-size: 13px;
	color: #5b6058;
}
.bjl-terms-row .wp-block-post-terms {
	margin: 0 0 0.5rem;
}
.bjl-terms-row .wp-block-post-terms a {
	display: inline-block;
	background-color: #f5f3ee;
	border: 1px solid #dde0d8;
	border-radius: 999px;
	padding: 0.2rem 0.8rem;
	margin: 0 0.35rem 0.35rem 0;
	font-size: 13px;
	color: #3f5b44;
	text-decoration: none;
}
.bjl-terms-row .wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}


/* Keep reading card: thumbnails from the query block */
.bjl-side-card .wp-block-post-template > li .wp-block-post-featured-image {
	margin: 0 0 6px;
}
.bjl-side-card .wp-block-post-template > li .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}
.bjl-side-card .wp-block-post-template > li {
	padding: 0.75rem 0;
}
.bjl-side-card .wp-block-post-template > li:first-child {
	padding-top: 0.25rem;
}
.bjl-side-card .wp-block-post-template > li:last-child {
	padding-bottom: 0;
}


/* Published by card: contact links under the name */
.bjl-author-card .bjl-author-links {
	font-size: 13px;
	line-height: 1.6;
	margin: 4px 0 0;
	overflow-wrap: anywhere;
}
.bjl-author-card .bjl-author-links a {
	color: #3f5b44;
	text-decoration: none;
}
.bjl-author-card .bjl-author-links a:hover {
	text-decoration: underline;
}


/* Published by card: social logos under the name */
.bjl-author-card .bjl-author-social {
	margin-top: 8px;
	gap: 0.4rem;
}
.bjl-author-card .bjl-author-social .wp-social-link {
	background-color: #3f5b44 !important;
	color: #ffffff !important;
}


/* Sidebar scrolls with the page (no sticky) */
.bjl-side-sticky {
	position: static !important;
	top: auto !important;
}



/* Mobile: body text about 1px smaller (theme fluid size is ~17.8px on phones, this sets 16.8px). Headings unchanged. */
@media (max-width: 600px) {
	body {
		font-size: 1.05rem;
	}
}



/* Mobile readability pass: more line spacing for body text, Gist bullets up to 16px. */
@media (max-width: 600px) {
	body {
		line-height: 1.6;
	}
	.bjl-gist li {
		font-size: 1rem;
	}
}



/* ===== Header: the logo image already reads "Brandon's Blog Vault". The site title stays in the markup as hidden text so the homepage keeps its H1 and crawlers and screen readers still get the name. Inner pages have their own H1, so it is dropped there. ===== */
.wp-block-site-title.bjl-sr-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
body:not(.home) .wp-block-site-title.bjl-sr-title {
	display: none;
}


/* Header title fix: this site's homepage body class is "blog" (no static front page set), so keep the hidden H1 there instead of removing it. */
body.blog .wp-block-site-title.bjl-sr-title,
body.home .wp-block-site-title.bjl-sr-title {
	display: block;
}



/* Header logo: larger on desktop so the wordmark stays crisp on standard (1x) screens. Phones keep the 200px size set in the block. */
@media (min-width: 782px) {
	.wp-block-site-logo img {
		width: 260px !important;
		height: auto !important;
	}
}



/* Sidebar scrolls with the page again (sticky) on desktop. Overrides the "no sticky" rule above now that the image sits in the body column.
   max-height + overflow keeps every card reachable when the sidebar is taller than the screen. */
@media (min-width: 782px) {
	.bjl-side-sticky {
		position: sticky !important;
		top: 1.5rem !important;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}



/* Sidebar stays put while the body scrolls: plain sticky, no inner scrolling. */
@media (min-width: 782px) {
	.bjl-side-sticky {
		max-height: none !important;
		overflow: visible !important;
	}
}



/* ===== Blog posts: banner title lines up with the left edge of the 1100px layout (logo edge). Scoped to single posts so pages keep their 960px banner. ===== */
body.single-post header.wp-block-template-part > .wp-block-group.alignfull > .wp-block-group {
	max-width: 1100px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Blog posts: publish date centered over the article column. */
body.single-post .wp-block-post-date {
	text-align: center;
}



/* Blog post banner fix: the 960px cap sits on the post title block itself (the wrapper group is already full width), so widen the title block. Supersedes the wrapper-group rule above. */
body.single-post header.wp-block-template-part .wp-block-post-title {
	max-width: 1100px;
	width: 100%;
	text-align: left;
}



/* ===== Header search: magnifying-glass icon that expands into a field ===== */
.wp-block-navigation .bjl-nav-search {
	align-self: center;
}
.wp-block-navigation .bjl-nav-search .wp-block-search__button {
	background: transparent;
	color: #2c4030;
	border: 0;
	padding: 0.35rem;
	margin: 0;
	cursor: pointer;
	line-height: 1;
}
.wp-block-navigation .bjl-nav-search .wp-block-search__button:hover,
.wp-block-navigation .bjl-nav-search .wp-block-search__button:focus-visible {
	color: #000000;
}
.wp-block-navigation .bjl-nav-search .wp-block-search__button svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}
.wp-block-navigation .bjl-nav-search .wp-block-search__input {
	border: 1px solid #dde0d8;
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.9rem;
	background: #ffffff;
}
/* Mobile drawer: keep the search left of the tap target and full width when open. */
.wp-block-navigation__responsive-container.is-menu-open .bjl-nav-search {
	align-self: flex-end;
	max-width: 100%;
}



/* ===== Header search moved to its own row under the main nav, right-aligned under Let's Connect ===== */
.bjl-header-search-row {
	margin-top: 0.25rem;
}
.bjl-header-search .wp-block-search__button {
	background: transparent;
	color: #2c4030;
	border: 0;
	padding: 0.25rem;
	margin: 0;
	cursor: pointer;
	line-height: 1;
}
.bjl-header-search .wp-block-search__button:hover,
.bjl-header-search .wp-block-search__button:focus-visible {
	color: #000000;
}
.bjl-header-search .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.bjl-header-search .wp-block-search__input {
	border: 1px solid #dde0d8;
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.9rem;
	background: #ffffff;
}



/* ===== Header search v3: centered in the header row with a "Search for Blogs" label (replaces the under-nav row styles above) ===== */
.bjl-header-main {
	position: relative;
}
.bjl-header-search .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.bjl-header-search .wp-block-search__button::after {
	content: "Search for Blogs";
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}
/* Once the field opens, the label gets out of the way. */
.bjl-header-search:focus-within .wp-block-search__button::after {
	display: none;
}
/* Desktop: dead center of the header row, in the white space between logo and nav. */
@media (min-width: 1000px) {
	.bjl-header-main .bjl-header-search {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}
}
/* Smaller screens: icon only, sits between logo and menu button. */
@media (max-width: 999px) {
	.bjl-header-search .wp-block-search__button::after {
		display: none;
	}
}



/* Header search: icon on the right of the label; hover keeps the text visible (green to dark, underlined label) instead of going white. */
.bjl-header-search .wp-block-search__button {
	flex-direction: row-reverse;
	background-color: transparent !important;
	color: #2c4030 !important;
}
.bjl-header-search .wp-block-search__button:hover,
.bjl-header-search .wp-block-search__button:focus-visible {
	background-color: transparent !important;
	color: #1e2a22 !important;
}
.bjl-header-search .wp-block-search__button:hover::after,
.bjl-header-search .wp-block-search__button:focus-visible::after {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}



/* ===== Header search v4: always-open field (no expand animation), centered on desktop. Overrides the button-only / label rules above. ===== */
.bjl-header-search .wp-block-search__button::after {
	content: none !important;
}
.bjl-header-search .wp-block-search__inside-wrapper {
	border: 1px solid #dde0d8;
	border-radius: 999px;
	background: #ffffff;
	padding: 2px 4px 2px 14px;
	align-items: center;
}
.bjl-header-search .wp-block-search__input {
	border: 0 !important;
	border-radius: 0;
	background: transparent;
	padding: 0.35rem 0;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.9rem;
	min-width: 0;
}
.bjl-header-search .wp-block-search__input:focus {
	outline: none;
}
.bjl-header-search .wp-block-search__inside-wrapper:focus-within {
	border-color: #3f5b44;
}
.bjl-header-search .wp-block-search__button {
	flex-direction: row;
	padding: 0.3rem 0.4rem;
}
/* Smaller screens: no room between logo and menu, so the field drops to its own full-width row. */
@media (max-width: 999px) {
	.bjl-header-main {
		flex-wrap: wrap !important;
	}
	.bjl-header-main .bjl-header-search {
		order: 3;
		flex: 1 1 100%;
		width: 100% !important;
		max-width: 100%;
		margin-top: 0.5rem;
	}
}



/* Header search on small screens: half width, centered on its own row. */
@media (max-width: 999px) {
	.bjl-header-main .bjl-header-search {
		flex: 0 0 50% !important;
		width: 50% !important;
		min-width: 170px;
		margin-left: auto;
		margin-right: auto;
	}
}



/* Header search on small screens: left aligned (overrides the centered margins above). */
@media (max-width: 999px) {
	.bjl-header-main .bjl-header-search {
		margin-left: 0;
		margin-right: auto;
	}
}



/* ===== Header search v5: magnifying-glass icon right of the logo opens a full-screen search overlay (replaces the inline search field styles above) ===== */
.bjl-search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 0 0.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #2c4030;
	cursor: pointer;
	flex-shrink: 0;
}
.bjl-search-trigger:hover,
.bjl-search-trigger:focus-visible {
	background: #f5f3ee;
	color: #1e2a22;
}
.bjl-search-trigger svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

dialog.bjl-search-overlay {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 1.5rem;
	border: 0;
	background: rgba(255, 255, 255, 0.97);
	color: #1e2a22;
	box-sizing: border-box;
}
dialog.bjl-search-overlay[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
dialog.bjl-search-overlay::backdrop {
	background: rgba(30, 42, 34, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
	dialog.bjl-search-overlay[open] {
		animation: bjl-search-fade 0.2s ease;
	}
}
@keyframes bjl-search-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
body:has(dialog.bjl-search-overlay[open]) {
	overflow: hidden;
}

.bjl-search-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 0;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	color: #3f5b44;
	cursor: pointer;
}
.bjl-search-close:hover,
.bjl-search-close:focus-visible {
	color: #1e2a22;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

.bjl-search-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: min(720px, 100%);
}
.bjl-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid #3f5b44;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(1.25rem, 4vw, 2rem);
	color: #1e2a22;
	-webkit-appearance: none;
	appearance: none;
}
.bjl-search-form input[type="search"]:focus {
	outline: none;
	border-bottom-color: #1e2a22;
}
.bjl-search-form input[type="search"]::placeholder {
	color: #8a8f86;
}
.bjl-search-form button[type="submit"] {
	padding: 0.7rem 1.4rem;
	background: #3f5b44;
	border: 0;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.95rem;
	font-weight: 500;
	color: #ffffff;
	cursor: pointer;
}
.bjl-search-form button[type="submit"]:hover,
.bjl-search-form button[type="submit"]:focus-visible {
	background: #2c4030;
}
@media (max-width: 600px) {
	.bjl-search-form {
		flex-wrap: wrap;
	}
	.bjl-search-form input[type="search"] {
		flex: 1 1 100%;
	}
	.bjl-search-form button[type="submit"] {
		flex: 1 1 100%;
	}
}



/* Header search v5b: icon now sits left of the nav / menu button, so no left margin. */
.bjl-search-trigger {
	margin: 0;
}
.bjl-header-right {
	flex-shrink: 0;
}



/* ===== Mobile nav: half-moon drawer. Shrinks to fit the links, big curve on the left, no wasted white space. ===== */
.wp-block-navigation__responsive-container.is-menu-open {
	width: fit-content;
	min-width: 190px;
	max-width: min(320px, 85vw);
	border-radius: 120px 0 0 120px;
	box-shadow: -8px 6px 28px rgba(0, 0, 0, 0.16);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 4.25rem 1.5rem 2.5rem 2.75rem;
	width: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	width: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.5rem;
	right: 1.5rem;
}



/* ===== Mobile nav: half-moon v2. Smaller curve, tighter padding, smaller type, and width forced to the content (the earlier fit-content was losing to the 72% rule). ===== */
.wp-block-navigation__responsive-container.is-menu-open {
	width: max-content !important;
	min-width: 0 !important;
	max-width: 85vw !important;
	border-radius: 64px 0 0 64px;
	top: 4.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: auto !important;
	min-width: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 3.5rem 1.25rem 1.5rem 2.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.2rem;
	padding: 0.4rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.95rem;
	padding: 0.2rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.1rem;
	right: 1.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
	font-size: 0.9rem;
}
.wp-block-navigation__responsive-container.is-menu-open .bjl-nav-social {
	margin-top: 0.5rem;
	padding-top: 0.25rem;
	font-size: 17px;
	gap: 0.45rem;
}



/* ===== Header search: split by screen size. Desktop (1000px+) keeps the always-open centered field. Smaller screens get the magnifying-glass icon + full-screen overlay. ===== */
@media (min-width: 1000px) {
	.bjl-search-trigger,
	dialog.bjl-search-overlay {
		display: none !important;
	}
}
@media (max-width: 999px) {
	.bjl-header-main .bjl-header-search {
		display: none !important;
	}
}



/* ===== Blog posts: natural scrolling =====
   The right rail was pinned (sticky) while the page scrolled. It is taller than most screens, so the bottom cards stayed hidden and the page felt like it was fighting the scroll. Now the rail scrolls with the article on every screen size. Smooth scrolling applies to anchor jumps only and turns off for visitors who prefer reduced motion. */
@media (min-width: 782px) {
	.bjl-side-sticky {
		position: static !important;
		top: auto !important;
	}
}
html:has(body.single-post) {
	scroll-behavior: smooth;
	scroll-padding-top: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
	html:has(body.single-post) {
		scroll-behavior: auto;
	}
}

/* GoFundMe widget in the right rail, above Keep reading */
.bjl-gfm-slot {
	margin-bottom: 1rem;
	max-width: 100%;
	overflow: hidden;
}
.bjl-gfm-slot .gfm-embed {
	max-width: 100%;
}




/* ===== Vault pages: intro (italic H2 + subtitle) sits in a compact beige panel. Matches any page whose first block is a heading + paragraph group followed by a post grid, so Blogs, Fitness, Fatherhood, Work, Life Lessons and Podcast all get it. Inline padding on the group needs !important. ===== */
body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) {
	background-color: #f5f3ee;
	border-radius: 14px;
	max-width: 760px !important;
	margin: 1.75rem auto 1.5rem !important;
	padding: 1.25rem 1.75rem !important;
}
body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) > .wp-block-heading {
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	line-height: 1.25;
	margin: 0 0 0.35rem;
}
body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) > p {
	font-size: clamp(0.95rem, 1.6vw, 1.05rem) !important;
	line-height: 1.55 !important;
	margin: 0 auto;
	max-width: 600px;
}
@media (max-width: 600px) {
	body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) {
		margin: 1.25rem 1rem 1.25rem !important;
		padding: 1rem 1.1rem !important;
	}
}




/* ===== Vault intro panel v2: full width of the post grid below, rounder corners, short green accent bar under the subtitle. Overrides the compact 760px version above. ===== */
body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) {
	max-width: var(--wp--style--global--wide-size, 1100px) !important;
	width: auto;
	margin: 2rem auto 1.75rem !important;
	padding: 1.75rem 2rem 2rem !important;
	border-radius: 20px;
}
body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) > p {
	max-width: 760px;
}
body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query)::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin: 1rem auto 0;
	border-radius: 999px;
	background-color: #3f5b44;
}
@media (max-width: 600px) {
	body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) {
		margin: 1.25rem var(--wp--preset--spacing--50, 1rem) 1.25rem !important;
		padding: 1.25rem 1.25rem 1.5rem !important;
		border-radius: 16px;
	}
}




/* ===== About Me: closing quote ("Si Dios conmigo...") gets the same beige rounded panel as the Vault intros, no green bar. The 45px spacer inside the group is hidden so the panel stays tight. ===== */
.page-id-1859 .wp-block-post-content > .wp-block-group:last-child:has(> .wp-block-heading + p) {
	background-color: #f5f3ee;
	border-radius: 20px;
	padding: 1.75rem 2rem !important;
	margin-top: 1rem;
	margin-bottom: 2rem;
}
.page-id-1859 .wp-block-post-content > .wp-block-group:last-child:has(> .wp-block-heading + p) > .wp-block-heading {
	margin: 0 0 0.4rem;
}
.page-id-1859 .wp-block-post-content > .wp-block-group:last-child:has(> .wp-block-heading + p) > p {
	margin: 0;
}
.page-id-1859 .wp-block-post-content > .wp-block-group:last-child:has(> .wp-block-heading + p) > .wp-block-spacer {
	display: none;
}
@media (max-width: 600px) {
	.page-id-1859 .wp-block-post-content > .wp-block-group:last-child:has(> .wp-block-heading + p) {
		padding: 1.25rem 1.25rem !important;
		border-radius: 16px;
	}
}




/* ===== Vault pages: close the gap between the green banner and the beige intro panel. The template's main margin and the panel's own top margin were stacking. Now one 1.5rem gap total. Only pages that have the intro panel are affected. ===== */
.bjl-page-main:has(> .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query)) {
	margin-top: 1.5rem !important;
}
body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) {
	margin-top: 0 !important;
}
@media (max-width: 600px) {
	.bjl-page-main:has(> .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query)) {
		margin-top: 1rem !important;
	}
}




/* ===== Banner gap fix is for the Blogs page only (page-id-2081). Every other Vault page goes back to its previous spacing: template margin above content + 2rem panel margin (1.25rem on mobile). ===== */
body:not(.page-id-2081) .bjl-page-main:has(> .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query)) {
	margin-top: var(--wp--preset--spacing--60) !important;
}
body.page:not(.page-id-2081) .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) {
	margin-top: 2rem !important;
}
@media (max-width: 600px) {
	body:not(.page-id-2081) .bjl-page-main:has(> .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query)) {
		margin-top: var(--wp--preset--spacing--60) !important;
	}
	body.page:not(.page-id-2081) .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) {
		margin-top: 1.25rem !important;
	}
}




/* ===== Let's Connect: profile card gets the same short green accent bar as the Vault intro panels. Profile card only. ===== */
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(1)::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin: 1.25rem auto 0;
	border-radius: 999px;
	background-color: #3f5b44;
}




/* ===== Let's Connect: green bar moves from the bottom of the profile card to just below the profile picture. The 16px spacer under the photo becomes the bar. ===== */
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(1)::after {
	content: none;
	display: none;
}
.page-id-1860 .wp-block-post-content > .wp-block-group.alignfull:nth-child(1) > .wp-block-image + .wp-block-spacer {
	width: 72px;
	height: 4px !important;
	margin: 1.25rem auto 1.25rem !important;
	border-radius: 999px;
	background-color: #3f5b44;
}




/* "Here's the Gist" title: bold (was weight 400). Keeps uppercase, Poppins and 2px letter spacing. */
.bjl-gist .bjl-gist__title {
	font-weight: 700;
}




/* ===== Mobile nav: rounder half-moon. Left edge is one continuous half-oval (was 64px corner curves). Slightly wider and more padding on the left so text stays inside the curve. Overrides half-moon v2. ===== */
.wp-block-navigation__responsive-container.is-menu-open {
	border-radius: 50% 0 0 50% / 50% 0 0 50% !important;
	min-width: 240px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 4rem 1.5rem 3rem 3.5rem;
}




/* ===== Mobile nav: tighter half-moon. Less empty space: drawer shrinks to fit the links, smaller padding all around, flatter curve so less width is lost to it. Keeps the half-oval shape. ===== */
.wp-block-navigation__responsive-container.is-menu-open {
	min-width: 0 !important;
	width: max-content !important;
	border-radius: 38% 0 0 38% / 50% 0 0 50% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 3rem 1.25rem 1.5rem 2.25rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .bjl-nav-social {
	margin-top: 0.25rem;
	padding-top: 0;
}




/* ===== Mobile nav: kill the extra left space. The social row ("Find me on" label + 5 icons) was being measured as one long line, which forced the drawer wide. width:0 + min-width:100% lets the row fill the drawer without setting its width, so the links decide the width now. Icons wrap if needed. Left padding trimmed too. ===== */
.wp-block-navigation__responsive-container.is-menu-open .bjl-nav-social {
	width: 0 !important;
	min-width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-left: 1.75rem !important;
}




/* ===== Vault pages, mobile: beige intro panel spans the full content width (same edges as the post cards below). The earlier mobile rule added side margins that made it narrower. ===== */
@media (max-width: 600px) {
	body.page .wp-block-post-content > .wp-block-group.alignwide:first-child:has(> .wp-block-heading + p):has(~ .wp-block-query) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: auto !important;
		max-width: none !important;
	}
}