/* ==========================================================================
   Brandon LaGreca theme — supplemental CSS

   theme.json owns colours, type, spacing and block defaults. This file only
   covers what theme.json cannot express: focus rings, motion preferences,
   a few component refinements, Gravity Forms legibility, and responsive
   adjustments at the two breakpoints WordPress itself uses (781px stacks
   columns) plus a tablet step (1024px).

   Sections: 1 Tokens · 2 Accessibility · 3 Header · 4 Footer · 5 Content
             6 Components · 7 Gravity Forms · 8 Responsive
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */

:root {
	--bl-line: rgba(61, 53, 47, 0.12);        /* hairlines on light backgrounds */
	--bl-line-strong: rgba(61, 53, 47, 0.3);  /* form / input borders */
	--bl-radius: 10px;
	--bl-shadow: 0 12px 30px rgba(61, 53, 47, 0.18);
	--bl-header-height: 72px;
}

/* 2. Accessibility ------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-4);
	outline-offset: 3px;
	border-radius: 4px;
}
.has-contrast-background-color :where(a, button):focus-visible,
.has-accent-3-background-color :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--accent-2);
}
.skip-link.screen-reader-text:focus {
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--accent-3);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.bl-js [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}
/* Visible cue for links that open a new tab (markup adds the screen-reader text). */
.wp-block-post-content a[target="_blank"]:not(.wp-block-button__link)::after {
	content: "\2197";
	margin-left: 0.25em;
	font-size: 0.75em;
	vertical-align: super;
}

/* 3. Header -------------------------------------------------------------- */

.bl-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--bl-line);
}
body.admin-bar .bl-site-header {
	top: 32px;
}
.bl-site-header .bl-header-cta .wp-block-button__link {
	white-space: nowrap;
}
.wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--accent-1);
	text-underline-offset: 0.35em;
}

/* Mobile overlay menu.
   Core pads the open overlay with
   `clamp(1rem, var(--wp--style--root--padding-top), 20rem)` on each side. A
   unitless root padding makes that clamp() invalid and CSS drops the whole
   shorthand, so the panel loses *all* four sides at once and the links sit
   flush against the screen edge. theme.json now sets those values in px,
   and the padding below is restated so the overlay cannot lose it again.
   The header nav is right-aligned on desktop; in the full-screen panel the
   links read better ranged left. */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open:not(.disable-default-overlay) {
	padding: clamp(1.5rem, 6vw, 3rem) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	max-width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	max-width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* 4. Footer -------------------------------------------------------------- */

.bl-site-footer a {
	color: inherit;
}
.bl-site-footer a[href^="mailto:"] {
	overflow-wrap: anywhere;
}
.bl-site-footer .wp-block-social-links .wp-social-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.15rem 0;
	line-height: 1.3;
}
.bl-site-footer .wp-block-social-links .wp-block-social-link-label {
	font-size: var(--wp--preset--font-size--small);
}

/* 5. Content ------------------------------------------------------------- */

.bl-landing main > .wp-block-post-content > :first-child {
	margin-top: 0;
}
.wp-block-post-content p,
.wp-block-post-content li {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}
.wp-block-post-content > p + p {
	margin-top: 1.25em;
}
.wp-block-post-content li {
	padding-block: 0.2rem; /* distinct touch targets in link lists */
}
.wp-block-post-content li > a:only-child {
	display: inline-block; /* ≥24px tap target for link-only list items (WCAG 2.5.8) */
	vertical-align: top;   /* keeps the bullet on the first line when the link wraps */
	padding-block: 0.15rem;
}
.wp-block-post-content sup {
	font-size: 0.7em;
	line-height: 0;
}
.wp-block-post-content .wp-block-image.alignright,
.wp-block-post-content .wp-block-image.alignleft {
	max-width: min(44%, 360px);
	margin-top: 0.4em;
	margin-bottom: 1em;
}
.wp-block-image figcaption {
	text-align: left;
}
.wp-block-table table {
	border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--bl-line-strong);
}
/* "References" heading at the end of a post and everything after it. */
.bl-references {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--bl-line);
}
.bl-references,
.bl-references ~ p,
.bl-references ~ ol,
.bl-references ~ ul {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	word-break: break-word;
}
.wp-block-search__input {
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--bl-line-strong);
	border-radius: 6px 0 0 6px;
}
.wp-block-search__button {
	margin-left: 0;
}
.wp-block-query-pagination .page-numbers.current {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* 6. Components ---------------------------------------------------------- */

/* Utilities used in page content. */
.bl-muted {
	color: var(--wp--preset--color--muted);
}

/* Breadcrumbs — the visible counterpart to the BreadcrumbList structured data.
   Separators are drawn with ::before on li + li so the slash is decoration and
   never lands in the accessibility tree or in copied text. */
.bl-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.4rem;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--muted);
}
.bl-breadcrumbs li {
	display: inline;
}
.bl-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.4rem;
	opacity: 0.55;
}
.bl-breadcrumbs [aria-current="page"] {
	color: inherit;
}
.bl-round img,
.bl-shadow img {
	border-radius: var(--bl-radius);
}
.bl-shadow img {
	box-shadow: var(--bl-shadow);
}
.bl-book-cover img {
	border-radius: 4px;
	box-shadow: var(--bl-shadow);
}

/* Hero covers: legible text, no parallax. */
.wp-block-cover.bl-hero {
	min-height: clamp(420px, 60vh, 640px);
}
.wp-block-cover.bl-hero .wp-block-cover__image-background {
	object-position: center 30%;
}
.bl-hero-subtitle {
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.bl-hero-portrait img {
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}

/* Post cards (blog, archives, home, related posts). */
.bl-card {
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--bl-line);
	border-radius: var(--bl-radius);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bl-card:hover,
.bl-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--bl-shadow);
}
.bl-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
}
.bl-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}
.bl-card .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.bl-card .wp-block-post-excerpt__more-link {
	font-weight: 600;
	text-decoration: none;
}
.bl-card .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}

/* FAQ accordion. */
.wp-block-accordion.bl-faq .wp-block-accordion-item {
	border-bottom: 1px solid var(--bl-line);
}
.wp-block-accordion.bl-faq .wp-block-accordion-heading__toggle {
	padding: 1rem 0;
	text-align: left;
}
.wp-block-accordion.bl-faq .wp-block-accordion-panel {
	padding-bottom: 1.25rem;
}

/* Tabs (About → Extended Portfolio). */
.wp-block-tabs .wp-block-tab-list {
	gap: 0.25rem;
	border-bottom: 2px solid var(--bl-line);
}
.wp-block-tabs .wp-block-tab-list button {
	margin-bottom: -2px;
	padding: 0.75rem 1rem;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}
.wp-block-tabs .wp-block-tab-list button[aria-selected="true"] {
	border-bottom-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-3);
}
.wp-block-tabs .wp-block-tab-panel {
	padding-top: var(--wp--preset--spacing--30);
}

/* Stat tiles (Media page): 6 → 3 → 2 across. The block carries
   is-not-stacked-on-mobile so WordPress does not force one per row; the
   specificity here beats core's nowrap rule. */
.wp-block-columns.bl-stats.is-not-stacked-on-mobile {
	flex-wrap: wrap !important;
}
.bl-stats > .wp-block-column {
	box-sizing: border-box; /* tiles carry padding; keep the basis maths honest */
}
.bl-stats .wp-block-heading {
	overflow-wrap: normal;
	word-break: keep-all;
}

/* 7. Gravity Forms (Orbital theme) ----------------------------------------
   Colours come from the gform_default_styles filter in inc/blocks.php and
   per-block attributes; only type and dark-background legibility live here. */

.gform_wrapper.gform-theme--orbital {
	--gf-label-font-family: var(--wp--preset--font-family--heading);
	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--heading);
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-padding-y: 0.85rem;
	--gf-ctrl-btn-padding-x: 1.6rem;
	--gf-ctrl-btn-radius: 6px;
}
.gform_wrapper .gform_button {
	cursor: pointer;
}
.has-contrast-background-color .gform_wrapper :is(.gfield_label, .gfield_description, .ginput_complex label, .ginput_counter, .gfield_required_text, .gform_validation_errors, .gfield_validation_message),
.has-contrast-background-color .gform_confirmation_message {
	color: #fff;
}
.has-contrast-background-color .gform_wrapper .gfield_validation_message {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--accent-2);
}

/* 8. Responsive ---------------------------------------------------------- */

/* Tablet and below. */
@media (max-width: 1024px) {
	.bl-stats > .wp-block-column {
		flex-basis: calc(33.333% - var(--wp--preset--spacing--20) * 2 / 3) !important;
	}
	/* Forms inside a narrow column: one field per row. */
	.wp-block-column .gform_wrapper .gform_fields > .gfield {
		grid-column: 1 / -1 !important;
	}
}
/* Tablet only: footer as 2 × 2. */
@media (max-width: 1024px) and (min-width: 782px) {
	.bl-site-footer > .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.bl-site-footer > .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--50)) !important;
	}
}
/* Phone (WordPress stacks columns here). */
@media (max-width: 781px) {
	body.admin-bar .bl-site-header {
		top: 46px;
	}
	.bl-site-header > .wp-block-group {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
	}
	.bl-site-header .bl-header-search {
		display: none; /* search remains on the blog, search and 404 pages */
	}
	.bl-site-header .bl-header-cta .wp-block-button__link {
		padding: 0.5rem 0.85rem;
		font-size: 0.9rem;
	}
	.bl-site-header .wp-block-site-title {
		font-size: 1.15rem;
	}
	.bl-site-header .wp-block-site-logo img {
		width: 36px;
		height: auto;
	}
	.bl-site-footer > .wp-block-columns {
		gap: var(--wp--preset--spacing--40) !important;
	}
	.bl-site-footer .bl-footer-logo img {
		width: 100px;
	}
	.bl-stats > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--20) / 2) !important;
	}
	.wp-block-post-content .wp-block-image.alignright,
	.wp-block-post-content .wp-block-image.alignleft {
		float: none;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}
/* Small phones: title + menu only. */
@media (max-width: 480px) {
	.bl-site-header .bl-header-cta {
		display: none;
	}
}

/* 9. Motion ---------------------------------------------------------------
   Hover / hover-out micro-interactions, animated link underlines and the
   scroll-reveal states driven by assets/js/motion.js. Everything here is
   opacity/transform/background only (no layout shift) and is switched off
   under prefers-reduced-motion by the block in section 2. */

:root {
	--bl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* fast start, soft landing */
	--bl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--bl-dur: 0.45s;
}

/* Text links: underline draws in from the left on hover/focus and retreats to
   the right on hover-out; the text itself warms to the brand purple. */
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-social-link-anchor),
.bl-site-footer a:not(.wp-block-button__link):not(.wp-social-link a),
.wp-block-post-terms a,
.wp-block-post-excerpt__more-link,
.bl-card .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% 2px;
	background-position: 100% 100%;
	transition:
		background-size var(--bl-dur) var(--bl-ease-out),
		color 0.25s ease;
	padding-bottom: 1px;
}
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-social-link-anchor):hover,
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-block-social-link-anchor):focus-visible,
.bl-site-footer a:not(.wp-block-button__link):hover,
.bl-site-footer a:not(.wp-block-button__link):focus-visible,
.wp-block-post-terms a:hover,
.wp-block-post-excerpt__more-link:hover,
.bl-card .wp-block-post-title a:hover,
.bl-card:focus-within .wp-block-post-title a {
	background-size: 100% 2px;
	background-position: 0% 100%;
}
/* Links in prose keep a resting hairline so they are still identifiable as links (WCAG 1.4.1). */
.wp-block-post-content p a:not(.wp-block-button__link) {
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(91, 91, 122, 0.55), rgba(91, 91, 122, 0.55));
	background-size: 0% 2px, 100% 1px;
	background-position: 100% 100%, 0% 100%;
}
.wp-block-post-content p a:not(.wp-block-button__link):hover,
.wp-block-post-content p a:not(.wp-block-button__link):focus-visible {
	background-size: 100% 2px, 100% 1px;
	background-position: 0% 100%, 0% 100%;
}

/* Navigation: underline grows from the centre; current item stays underlined. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	transition: color 0.25s ease;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 2px;
	background: var(--wp--preset--color--accent-1);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--bl-dur) var(--bl-ease-out);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
.wp-block-navigation .current-menu-item > a {
	text-decoration: none; /* replaces the static underline from section 3 */
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* Buttons: lift on hover, settle on hover-out; a soft sheen sweeps across. */
.wp-block-button__link,
.gform_wrapper .gform_button {
	position: relative;
	overflow: hidden;
	transition:
		transform 0.35s var(--bl-ease-out),
		box-shadow 0.35s var(--bl-ease-out),
		background-color 0.3s ease,
		color 0.3s ease;
	will-change: transform;
}
.wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 0.6s var(--bl-ease-in-out);
	pointer-events: none;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(61, 53, 47, 0.18);
}
.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::before {
	transform: translateX(120%);
}
.wp-block-button__link:active,
.gform_wrapper .gform_button:active {
	transform: translateY(0) scale(0.98);
	transition-duration: 0.1s;
}

/* Cards: lift, and the image eases in toward the viewer; settles back on hover-out. */
.bl-card {
	transition:
		transform var(--bl-dur) var(--bl-ease-out),
		box-shadow var(--bl-dur) var(--bl-ease-out),
		border-color var(--bl-dur) ease;
}
.bl-card:hover,
.bl-card:focus-within {
	transform: translateY(-6px);
	border-color: transparent;
}
.bl-card .wp-block-post-featured-image {
	overflow: hidden;
}
.bl-card .wp-block-post-featured-image img {
	transition: transform 0.7s var(--bl-ease-out);
}
.bl-card:hover .wp-block-post-featured-image img,
.bl-card:focus-within .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* Book covers, portraits, stat tiles and social links: subtle lift. */
.bl-book-cover img,
.bl-round img,
.bl-shadow img,
.bl-stats > .wp-block-column,
.bl-site-footer .wp-block-social-links .wp-social-link a,
.bl-topic-pills .wp-block-group {
	transition:
		transform var(--bl-dur) var(--bl-ease-out),
		box-shadow var(--bl-dur) var(--bl-ease-out),
		background-color 0.3s ease;
}
.bl-book-cover a:hover img,
.bl-book-cover a:focus-visible img {
	transform: translateY(-8px) rotate(-1.5deg);
	box-shadow: 0 22px 40px rgba(61, 53, 47, 0.3);
}
.bl-stats > .wp-block-column:hover {
	transform: translateY(-4px);
	box-shadow: var(--bl-shadow);
}
.bl-site-footer .wp-block-social-links .wp-social-link a:hover {
	transform: translateX(4px);
}
.bl-topic-pills .wp-block-group:hover {
	background-color: var(--wp--preset--color--accent-1);
	transform: translateY(-2px);
}

/* Accordion: the plus icon turns into a minus-style rotation when open. */
.wp-block-accordion-heading__toggle-icon {
	display: inline-block;
	transition: transform var(--bl-dur) var(--bl-ease-out), color 0.3s ease;
}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--accent-3);
}
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon,
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
	transform: rotate(135deg);
}
.wp-block-accordion-heading__toggle {
	transition: color 0.25s ease, padding-left 0.3s var(--bl-ease-out);
}
.wp-block-accordion-heading__toggle:hover {
	color: var(--wp--preset--color--accent-3);
	padding-left: 0.35rem;
}

/* Tabs: active underline slides in. */
.wp-block-tabs .wp-block-tab-list button {
	transition: color 0.25s ease, border-color 0.3s var(--bl-ease-out), background-color 0.25s ease;
}
.wp-block-tabs .wp-block-tab-list button:hover {
	color: var(--wp--preset--color--accent-3);
	background-color: var(--wp--preset--color--accent-5);
}

/* Scroll reveal (only when the script has run: html.bl-js). Elements waiting
   offstage are translated sideways, so clip horizontal overflow at the root
   (clip, not hidden, keeps the sticky header working). */
.bl-js body,
.bl-js .wp-site-blocks {
	overflow-x: clip;
}
.bl-js [data-reveal] {
	opacity: 0;
	transition:
		opacity 0.7s var(--bl-ease-out) var(--bl-reveal-delay, 0ms),
		transform 0.8s var(--bl-ease-out) var(--bl-reveal-delay, 0ms);
	will-change: opacity, transform;
}
.bl-js [data-reveal="up"]     { transform: translateY(32px); }
.bl-js [data-reveal="up-sm"]  { transform: translateY(18px); }
.bl-js [data-reveal="left"]   { transform: translateX(-36px); }
.bl-js [data-reveal="right"]  { transform: translateX(36px); }
.bl-js [data-reveal="scale"]  { transform: scale(0.94); }
.bl-js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}
/* Once revealed, hand transforms back to the hover rules above. */
.bl-js [data-reveal].is-visible.bl-card,
.bl-js .bl-stats > [data-reveal].is-visible {
	will-change: auto;
}

/* Hero: gentle entrance for the cover background and its content on load. */
.bl-js .wp-block-cover.bl-hero .wp-block-cover__image-background {
	animation: bl-hero-zoom 1.6s var(--bl-ease-out) both;
}
@keyframes bl-hero-zoom {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}