/*
Theme Name: Wendy Elizabeth Jones
Theme URI: https://wendyelizabethjones.com
Description: Child theme of Twenty Twenty-Five for Wendy Elizabeth Jones. Design tokens live in theme.json; custom blocks and block styles live in the Good Code Studio Custom Blocks plugin.
Author: GoodCodeStudio
Author URI: https://thatgoodcode.com
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: wendy-jones
*/

/* ---------- Header ---------- */
.wej-site-header {
	/* Not positioned at rest, so the slide-down "top" only applies once fixed. */
	position: static;
}
.wej-logo {
	display: inline-block;
	width: clamp(190px, 18vw, 348px);
	color: var(--wp--preset--color--white);
	line-height: 0;
}
.wej-logo svg {
	width: 100%;
	height: auto;
	display: block;
}
.wej-site-header .wp-block-navigation .wp-block-navigation-item__content {
	/* Same space above as below (the underline lives below) so the text
	   lines up with the social icons. */
	padding-top: 6px;
	padding-bottom: 6px;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}
.wej-site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wej-site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	border-bottom-color: currentColor;
}
.wej-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	padding: 2rem 1.5rem;
}
.wej-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--anton);
	font-size: 2.5rem;
	letter-spacing: 0.02em;
}

/* ---------- Footer ---------- */
.wej-footer a {
	text-decoration: none;
}
.wej-footer a:hover {
	text-decoration: underline;
}
.wej-footer .wej-footer-links p {
	margin-block: 0.35rem;
}

/* ---------- Sections ---------- */
/* Full-width sections butt up against each other (no block-gap seams). */
.wp-site-blocks > * {
	margin-block-start: 0;
}
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}
.wej-split > .wp-block-column + .wp-block-column {
	border-left: 1px solid rgba(20, 20, 20, 0.25);
	padding-left: clamp(1.5rem, 5vw, 6rem);
}
@media (max-width: 781px) {
	.wej-split > .wp-block-column + .wp-block-column {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid rgba(20, 20, 20, 0.25);
		padding-top: 3rem;
	}
}

/* Hero: keep Wendy's face in frame on narrow screens */
@media (max-width: 781px) {
	.wej-hero {
		min-height: 85vh !important;
		background-position: 52% 30% !important;
	}
}

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.wej-header-social {
		display: none !important;
	}
	.gcs-show__sep {
		display: none;
	}
	.gcs-show__meta {
		flex-direction: column;
		row-gap: 2px;
	}
}
/* Long email addresses in big display type */
a[href^="mailto:"] {
	overflow-wrap: anywhere;
}
.has-anton-font-family a[href^="mailto:"] {
	font-size: min(1em, 7.2vw);
}

/* ---------- Header (slides down once you scroll past it) ---------- */
/* Same approach as 1sourcerentals.com: one header; past its height the
   body gets .wej-scrolling, the header turns fixed and its "top" animates
   from far above the screen into place. */
.home .wej-header-wrap {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 50;
}
.home .wej-header-wrap .wej-site-header {
	background-color: transparent !important;
}
/* Inner pages: hold the header's space so content doesn't jump. */
body:not(.home) .wej-header-wrap {
	min-height: var(--wej-header-h, auto);
}
.wej-site-header {
	transition: top 0.6s ease;

	padding-top: clamp(1.5rem, 2.1vw, 2.5rem) !important;
}
/* Start point for the slide-down. Front end only: the Site Editor positions
   every block, so this would push the header off the editor canvas. */
body:not(.editor-styles-wrapper) .wej-site-header:not(.block-editor-block-list__block) {
	top: -499px;
}
body.wej-scrolling .wej-site-header:not(.block-editor-block-list__block),
body.home.wej-scrolling .wej-header-wrap .wej-site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
	background-color: var(--wp--preset--color--ink) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
body.wej-scrolling .wej-logo {
	width: clamp(130px, 9vw, 170px);
}
body.wej-scrolling .wej-site-header > .wp-block-group > .wp-block-group {
	padding-top: 0.4rem !important;
}
body.wej-scrolling .wej-site-header .wp-block-navigation {
	margin-top: 0;
}
@media (max-width: 600px) {
	body.wej-scrolling .wej-site-header:not(.block-editor-block-list__block),
	body.home.wej-scrolling .wej-header-wrap .wej-site-header {
		top: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wej-site-header {
		transition: none;
	}
}
.wej-hero {
	/* Design proportions (1920×1060), but never taller than the screen so
	   the buttons stay above the fold. */
	--wej-hero-h: min(clamp(560px, 55.21vw, 1060px), calc(100svh - var(--wp-admin--admin-bar--height, 0px)));
	min-height: var(--wej-hero-h) !important;
	height: var(--wej-hero-h);
	background-size: cover !important;
	background-position: 50% 0 !important;
}
.wej-hero-eyebrow {
	letter-spacing: 0.4em !important;
}
.wej-hero-buttons {
	gap: 24px !important;
}
.wej-hero-buttons .wp-block-button {
	width: min(460px, 100%);
}
.wej-hero-buttons .wp-block-button__link {
	width: 100%;
	min-height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
}
@media (max-width: 781px) {
	.wej-hero {
		--wej-hero-h: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
		background-position: 52% 0 !important;
		background-size: auto 78vh !important;
		background-repeat: no-repeat !important;
	}
	.wej-hero-buttons .wp-block-button__link {
		min-height: 64px;
		font-size: 1rem;
	}
}

/* Footer type to match the design */
.wej-footer .wej-footer-links h6 {
	font-size: 0.8125rem;
	letter-spacing: 0.24em;
}
.wej-footer .wej-footer-links p {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.8);
}
.wej-hero > .wej-hero-buttons {
	width: 100%;
	flex-wrap: nowrap;
}
.wej-hero > .wej-hero-eyebrow + p {
	margin-top: 12px !important;
}
.wej-footer .wej-footer-links p {
	white-space: nowrap;
}
@media (max-width: 781px) {
	.wej-hero > .wej-hero-buttons {
		flex-wrap: wrap;
	}
}

/* Nav: one underline only (the border), never the text underline */
.wej-site-header .wp-block-navigation a,
.wej-site-header .wp-block-navigation a:hover,
.wej-site-header .wp-block-navigation a:focus {
	text-decoration: none !important;
}

/* Hero: dark fade behind the text on short screens, where the photo is
   cropped and the title/buttons sit over brighter parts of the image. */
.wej-hero {
	position: relative;
	isolation: isolate;
}
.wej-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(20, 20, 20, 0.85) 0%, rgba(20, 20, 20, 0.55) 30%, rgba(20, 20, 20, 0) 60%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
@media (min-width: 782px) and (max-height: 960px) {
	.wej-hero::before {
		opacity: 1;
	}
}

/* Text pages (default template: Privacy, Terms): readable section headings */
.page-template-default .wp-block-post-content h2 {
	font-size: clamp(1.75rem, 2.4vw, 2.25rem);
	margin-top: 2.5rem;
}
.page-template-default .wp-block-post-content h3 {
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	margin-top: 2.25rem;
	margin-bottom: 0.5rem;
}

/* Mobile hero: start the photo below the logo, and keep side gutters on the buttons */
@media (max-width: 781px) {
	.wej-hero {
		background-position: 52% 96px !important;
		background-size: auto 68svh !important;
		padding-left: var(--wp--style--root--padding-left, 20px) !important;
		padding-right: var(--wp--style--root--padding-right, 20px) !important;
	}
}
@media (max-width: 781px) {
	.wej-hero-buttons .wp-block-button__link {
		padding-left: 12px;
		padding-right: 12px;
		font-size: 0.9375rem;
		letter-spacing: 0.08em;
	}
}
@media (max-width: 400px) {
	.wej-hero-eyebrow {
		letter-spacing: 0.25em !important;
	}
}

/* Video card titles wrap to 2–3 lines on phones: open up the line height */
@media (max-width: 781px) {
	.gcs-video-card .wp-block-heading {
		line-height: 1.1 !important;
	}
}

/* "Also available on Amazon" under the Stream / Buy buttons */
.wej-also-buy {
	margin-top: 0.85rem !important;
	opacity: 0.75;
}
.wej-also-buy a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.wej-also-buy a:hover {
	opacity: 1;
	color: var(--wp--preset--color--teal);
}

/* No focus outline on mouse/touch clicks; keyboard users still get the teal
   :focus-visible ring (theme.json), which matters for accessibility. */
.wp-site-blocks :focus:not(:focus-visible),
.wp-element-button:focus:not(:focus-visible),
.wp-block-button__link:focus:not(:focus-visible) {
	outline: none !important;
}
/* Keyboard focus ring for plain links too, matching the buttons. */
.wp-site-blocks a:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 3px;
}

/* Outline buttons: fill with teal on hover (visible on dark and light sections) */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--teal) !important;
	border-color: var(--wp--preset--color--teal) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Smooth color change on button hover */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}