/* ==========================================================================
   Homepage styles
   Loaded only on the front page — see fidoalliance_enqueue_home_styles()
   in functions/scripts.php. Also registered as an editor style so the
   Site Editor previews it.

   Section hooks (set as classNames in the Front Page template):
   .home-who-we-are   — "Who We Are" panel section
   .home-focus-areas  — "Our Focus Areas" cards section
   .home-membership   — "Membership" full-width band
   .home-video-band   — passkeys explainer video band (emerald)
   Bands carry their background on the outer alignfull group; inner content
   constrains to the 1240px rail via the group's layout settings.
   Theme design tokens are available as CSS custom properties, e.g.
   var(--wp--preset--color--emerald), var(--wp--preset--spacing--medium).
   ========================================================================== */

 :root {
	--border-base: 1px solid rgba( 0, 0, 0, 0.16 );
 }

/* --------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */

/* WP's root-padding-aware rule (.has-global-padding > .alignfull) gives
   full-width blocks -40px side margins to cancel the site's root padding.
   Inside the sidebar layout's content column that's wrong — it bleeds the
   band backgrounds under the sidebar. Contain alignfull sections (and the
   injected #subscribe-section-wrapper) to their column on the homepage. */
body.home .wp-block-column .has-global-padding > .alignfull {
	margin-left: 0;
	margin-right: 0;
}

/* Semibold headings across the homepage. Scoped to body.home so the rule
   can't leak if this file is ever loaded elsewhere. Heading blocks in the
   template carry no inline font-weight — keep it that way or they'll win. */
/* Lato Medium (500) is registered in theme.json (assets/fonts/
   Lato-Medium.woff2) — without that file, 500 would silently fall back to
   Regular 400 (Lato otherwise ships 100/400/700/900 here). */
body.home h1,
body.home h2 {
	font-weight: 500;
}

body.home h3,
body.home h4,
body.home h5,
body.home h6 {
	font-weight: 600;
}

/* Exception: the video band h3 follows the hero-heading style (48/56 @500)
   per the design, not the general h3 weight */
body.home .home-video-band h3 {
	font-weight: 500;
}

/* Heading scale (desktop). Below 992px the fluid preset sizes from the
   markup (max-36) keep scaling headings down for small devices.
   font-size !important beats WP's preset-class rules (emitted with
   !important); hero line-height !important beats the slides' inline 1.2. */
@media (min-width: 992px) {
	/* Hero scale — carousel headings, video band heading, subscribe heading */
	body.home .fido-hero-slider h2,
	body.home .home-video-band h3,
	body.home #section--subscribe .section__heading {
		font-size: 44px !important;
		letter-spacing: -0.55px;
		line-height: 52px !important;
	}

	/* Section scale — Who We Are, Our Focus Areas, Membership, Latest News */
	body.home .home-who-we-are h2,
	body.home .home-focus-areas > h2,
	body.home .home-membership h2,
	body.home .home-news > h2 {
		font-size: 36px !important;
		line-height: 44px !important;
	}
}

/* "Learn more" text links (Who We Are, Membership) — same treatment as the
   focus-card .item__link, arrow included. The arrow is CSS-rendered (::after
   rules grouped with the card links below); no arrow character in markup. */
.learn-more-link a,
.home-news .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--emerald);
	font-weight: 600;
	text-decoration: none;
}

.learn-more-link a:hover,
.home-news .wp-block-post-excerpt__more-link:hover {
	color: var(--wp--preset--color--cyan);
}

/* --------------------------------------------------------------------------
   Hero slider (.fido-hero-slider)
   Each slide is a full-width emerald wp-block-columns holding two 50/50
   halves of the FULL band (not the rail):
   - Left / content half: padding-left computed so text starts on the same
     1240px rail as the sections below (percentage resolves against the
     flex container, i.e. the band width).
   - Right / media half: media spans the half's width at its natural aspect
     ratio, never cropped, vertically centered in the equal-height band.
   -------------------------------------------------------------------------- */

/* Eyebrows (hero slides + video band) — mirror #section--subscribe
   .section__subheading from parts/section-subscribe.css, but yellow (the
   color comes from the markup's has-yellow-color preset class). margin
   needs !important to beat the hero slides' inline margins. */
body.home .fido-hero-slider .wp-block-column p.has-yellow-color,
body.home .home-video-band p.has-yellow-color {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.6px;
	margin: 0 0 16px !important;
	text-transform: uppercase;
}

/* Equal slide heights: the swiper wrapper is a flex row, so height:auto
   lets every slide stretch to the tallest one; the inner InnerBlocks div
   and the emerald columns then fill that height, so short slides don't
   leave white space above the pagination dots. Content centers via the
   columns' vertical alignment. */
body.home .fido-hero-slider .swiper-slide {
	height: auto;
}

/* min-height (not height): lets a slide whose natural media is taller than
   the others grow the shared band instead of overflowing it — the tallest
   natural content defines the equal height for all slides. */
body.home .fido-hero-slider .swiper-slide .wp-block-wpe-slider__innerblocks {
	min-height: 100%;
}

body.home .fido-hero-slider .swiper-slide .wp-block-columns {
	min-height: 100%;
}

/* 48px above/below and 24px beside all slide content — the media half
   stretches within this, so it always keeps 48px from the band's top/bottom
   edges and 24px from the sides */
body.home .fido-hero-slider .wp-block-columns {
	gap: 0;
	padding: 48px 24px;
}

/* Two exact halves of the band. flex-grow distribution can't do this —
   the text column's rail padding floors its flex base size and skews the
   split — so pin each column to 50% (text/media separation comes from the
   text column's own right padding). */
body.home .fido-hero-slider .wp-block-columns > .wp-block-column {
	flex: 0 0 50%;
	min-width: 0;
}

body.home .fido-hero-slider .wp-block-columns > .wp-block-column:first-child {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: max(var(--wp--preset--spacing--small), calc((100% - 1240px) / 2));
	padding-right: var(--wp--preset--spacing--small);
}

/* Media column stretches to band height; flex-centering keeps
   aspect-locked media (e.g. the video embed) vertically centered when the
   text half is taller */
body.home .fido-hero-slider .wp-block-columns > .wp-block-column:last-child {
	align-items: center; /* media capped below half-width centers horizontally */
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Media renders at its natural aspect ratio, un-cropped — the media
   dictates its own height and centers vertically in the equal-height band
   (client: no clipping of slide imagery or video). */
body.home .fido-hero-slider .wp-block-columns > .wp-block-column:last-child figure {
	margin: 0;
	width: 100%;
}

body.home .fido-hero-slider .wp-block-columns > .wp-block-column:last-child img {
	display: block;
	height: auto;
	max-height: 512px; /* cap media height; scales down proportionally, never crops */
	max-width: 100%;
	width: auto !important; /* beats per-image inline width from the editor; auto keeps aspect under the cap */
}

/* Keep the video embed a true 16:9 aspect box — flex sizing must not
   stretch or shrink it */
body.home .fido-hero-slider .wp-block-columns > .wp-block-column:last-child .embed-container {
	flex: none;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Passkeys explainer video band (.home-video-band)
   Same 50/50 full-band geometry as the hero, mirrored: media fills the left
   half flush to the band edges (48px above/below), text half on the right
   is capped so its content ends on the 1240px rail.
   -------------------------------------------------------------------------- */

body.home .home-video-band .wp-block-columns {
	gap: 0;
	padding: 48px 24px;
}

body.home .home-video-band .wp-block-columns > .wp-block-column {
	flex: 0 0 50%;
	min-width: 0;
}

body.home .home-video-band .wp-block-columns > .wp-block-column:first-child {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.home .home-video-band .wp-block-columns > .wp-block-column:first-child figure {
	margin: 0;
	width: 100%;
}

body.home .home-video-band .wp-block-columns > .wp-block-column:first-child img {
	display: block;
	height: auto;
	width: 100% !important;
}

body.home .home-video-band .wp-block-columns > .wp-block-column:last-child {
	padding-left: var(--wp--preset--spacing--small);
	padding-right: max(var(--wp--preset--spacing--small), calc((100% - 1240px) / 2));
}

/* Below desktop the hero heading must match the other H1-styled headings.
   The long selector out-specifies a legacy rule (.swiper-wrapper
   .swiper-slide ... .wp-block-heading { font-size: 1.625rem !important }
   at ≤768px) that was shrinking it to 26px. */
@media (max-width: 991px) {
	body.home .fido-hero-slider .swiper-slide .wp-block-columns .wp-block-column h2.wp-block-heading {
		font-size: var(--wp--preset--font-size--max-36) !important;
		line-height: 1.3 !important;
	}
}

/* Stacked (mobile) layout for both 50/50 bands: the text half sheds its
   rail padding so content meets the media's edges (the band's 24px inset),
   with a 32px gap between the stacked halves. 781px = WP's column stack
   breakpoint. align-content packs the halves — the swiper stretches every
   slide to the tallest slide's height, and default align-content: stretch
   would pad the 32px gap with the surplus. */
@media (max-width: 781px) {
	body.home .fido-hero-slider .wp-block-columns,
	body.home .home-video-band .wp-block-columns {
		align-content: center;
		row-gap: 32px;
	}

	body.home .fido-hero-slider .wp-block-columns > .wp-block-column:first-child,
	body.home .home-video-band .wp-block-columns > .wp-block-column:last-child {
		padding-left: 0;
		padding-right: 0;
	}
}

/* --------------------------------------------------------------------------
   Who We Are (.home-who-we-are) / Membership (.home-membership)
   -------------------------------------------------------------------------- */

.home-who-we-are p:not(.learn-more-link),
.home-membership p:not(.learn-more-link) {
	line-height: 1.5;
}

@media (min-width: 992px) {
	.home-who-we-are p:not(.learn-more-link),
	.home-membership p:not(.learn-more-link) {
		font-size: 18px;
	}
}

/* --------------------------------------------------------------------------
   Our Focus Areas (.home-focus-areas)
   Feed structure:
   .feed--icon-content-card
     .item
       .item__icon > img          (SVGs in assets/images/home/)
       .container--content
         h3.item__title
         p.item__description
         a.item__link
   -------------------------------------------------------------------------- */

.feed--icon-content-card {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}

.feed--icon-content-card .item {
	align-items: flex-start;
   border-left: var( --border-base );
   display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 0 0 24px;
   row-gap: 16px;
}

.feed--icon-content-card .item__icon {
	align-items: center;
   display: flex;
	flex-shrink: 0;
   height: 56px;
   justify-content: center;
   width: 56px;
}

/* Icon SVG exports include their own yellow circle tile — render at full size */
.feed--icon-content-card .item__icon img {
	display: block;
	width: 56px;
	height: 56px;
}

.feed--icon-content-card .item__title {
	font-size: 20px;
   font-weight: 600;
	line-height: 28px;
   margin: 0 0 8px;
}

/* Heading links keep the heading color in all states; underline on hover only */
.feed--icon-content-card .item__title a {
	color: inherit;
	text-decoration: none;
}

/* !important needed: legacy-styles.scss:62 sets a:hover { text-decoration:
   none !important } site-wide; matching !important lets specificity decide */
.feed--icon-content-card .item__title a:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.feed--icon-content-card .item__description {
	font-size: 16px;
   line-height: 24px;
   margin: 0;
}

/* Fill the row-stretched card height so the link can anchor to the bottom */
.feed--icon-content-card .container--content {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.feed--icon-content-card .item__link {
	align-self: flex-start;
	color: var( --wp--preset--color--emerald );
	font-weight: 600;
	margin-top: auto;
	padding-top: 16px;
	text-decoration: none;
}

/* Material Symbols "arrow_forward" inlined as a mask — painted with
   currentColor so it follows the link's color states. No font/library load. */
.learn-more-link a::after,
.home-news .wp-block-post-excerpt__more-link::after,
.feed--icon-content-card .item__link::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.16s ease-in-out;
   vertical-align: middle;
	width: 24px;
}

.learn-more-link a:hover::after,
.home-news .wp-block-post-excerpt__more-link:hover::after,
.feed--icon-content-card .item__link:hover::after {
	transform: translateX( 2px );
}

/* Column drops: 3 -> 2 at the mobile stack breakpoint, 2 -> 1 at 640px.
   The mobile block also tightens the section's vertical rhythm to 56px —
   !important beats the inline 96px values from the template's block attrs
   (.home-focus-areas padding-top / .home-video-band margin-top). */
@media (max-width: 781px) {
	.feed--icon-content-card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .home-focus-areas {
		padding-top: 56px !important;
	}

	body.home .home-video-band {
		margin-top: 56px !important;
	}
}

@media (max-width: 640px) {
	.feed--icon-content-card {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Membership (.home-membership)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Newsletter signup: NOT built here. The existing partial
   parts/section-subscribe.php (#section--subscribe, styled by
   parts/section-subscribe.css) is injected after the news section by
   inject_subscribe_section() in functions.php.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Footer (homepage only)
   The footer renders outside the sidebar/content columns, so its centered
   alignwide rows drift relative to the subscribe band above (which sits in
   the content column). Pin the rows to the column's left edge (sidebar =
   256px) so the logo/social row lines up with the band. Core's layout rules
   center alignwide with margin auto !important, hence the !important here.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	body.home footer.wp-block-template-part .alignwide {
		/* 256px sidebar minus the root padding the footer group already adds */
		margin-left: calc(256px - var(--wp--style--root--padding-left, 0px)) !important;
	}
}