/**
 * Section styles that block supports can't express:
 * rotation, z-stacking, element-level opacity, and the decorative blob bleed.
 */

/* --------------------------------------------------------------------------
   Box sizing
   Core's border-box reset covers core block wrappers but not the plain markup
   inside a custom block. Without this, `height: 100%` on a padded card resolves
   as CONTENT height and the padding is added on top — a 285px card renders 369.
   -------------------------------------------------------------------------- */

[class*="wp-block-nurturenest-"],
[class*="wp-block-nurturenest-"] *,
[class*="wp-block-nurturenest-"] *::before,
[class*="wp-block-nurturenest-"] *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Tilted photo frame — Personal Support + Why Mothers Choose Us
   The photo is upright; the outline is what rotates. Both rects are the same
   size and concentric, so the offset look comes entirely from the rotation.
   -------------------------------------------------------------------------- */

.is-style-tilt-left,
.is-style-tilt-right {
	display: grid;
	position: relative;
	isolation: isolate;
}

.is-style-tilt-left img,
.is-style-tilt-right img {
	grid-area: 1 / 1;
	border-radius: 16px;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.is-style-tilt-left::after,
.is-style-tilt-right::after {
	content: "";
	grid-area: 1 / 1;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 16px;
	pointer-events: none;
	z-index: 1;
}

.is-style-tilt-left::after {
	transform: rotate(-5.65deg);
}

.is-style-tilt-right::after {
	transform: rotate(5.65deg);
}

/* The rotated outline needs room to poke out past the photo. */
.is-style-tilt-left,
.is-style-tilt-right {
	margin: 26px 24px;
}

/* --------------------------------------------------------------------------
   Decorative watercolor blob
   One 209x268 asset reused across sections at 40% opacity. Positioned from the
   Figma coordinates: it bleeds past the section edge, which is why .nn-blob
   clips on the x axis (see below) — otherwise the bleed widens the document.
   -------------------------------------------------------------------------- */

.nn-blob {
	position: relative;
	/*
	 * `clip` (not `hidden`) contains the bleed on the x axis without creating a
	 * scroll container; overflow-y stays visible so the blob can still spill
	 * vertically into the neighbouring section the way the design draws it.
	 */
	overflow-x: clip;
	overflow-y: visible;
}

.nn-blob::before {
	content: "";
	position: absolute;
	width: 209px;
	height: 268px;
	background-image: url("../images/blob.webp");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.4;
	pointer-events: none;
	z-index: 0;
}

/* Personal Support: sits at the bottom-right, bleeding off the right edge. */
.nn-blob--right::before {
	right: -31px;
	bottom: 0;
}

/* Why Mothers Choose Us: top-left, bleeding up and off the left edge. */
.nn-blob--left::before {
	left: -33px;
	top: -34px;
}

/* Keep real content above the decoration. */
.nn-blob > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 781px) {
	.nn-blob::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.nn-header {
	border-bottom: 1px solid #1a1a1a1f;
}

.nn-header .wp-block-navigation__container {
	gap: 24px;
}

.nn-header .wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   Buttons — the design has two variants beyond the theme.json default
   -------------------------------------------------------------------------- */

/* Outline-on-white: used by "Learn More" in Personal Support. */
.wp-block-button.is-style-outline-primary .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	padding: 12px 24px;
	line-height: 21px;
}

.wp-block-button.is-style-outline-primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Outline-on-photo: used by "Check Insurance Coverage" in the hero. */
.wp-block-button.is-style-outline-white .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
	font-weight: 500;
	line-height: 21px;
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brown-500);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.nn-hero .wp-block-cover__background {
	background: linear-gradient(to top, rgba(119, 71, 56, 0.5) 0%, rgba(119, 71, 56, 0) 100%);
}

.nn-hero__inner {
	max-width: 1042px;
}

/* --------------------------------------------------------------------------
   Shared — the design capitalizes headings via CSS; the stored strings are
   sentence case. Keep the transform here so the editor shows the real copy.
   -------------------------------------------------------------------------- */

.nn-capitalize {
	text-transform: capitalize;
}

/* --------------------------------------------------------------------------
   Section header rows (Steps, Blog) — heading left, button bottom-right
   -------------------------------------------------------------------------- */

.nn-steps__header,
.nn-blog__header {
	align-items: flex-end;
	gap: 32px;
}

.nn-steps__title {
	max-width: 670px;
	margin: 0;
}

.nn-blog__title {
	max-width: 539px;
	margin: 0;
}

@media (max-width: 781px) {
	.nn-steps__header,
	.nn-blog__header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * Arrow glyph appended to buttons — core/button has no icon slot.
 * Uses the real arrow asset as a mask (shaft + head) rather than a CSS chevron;
 * a rotated border corner draws ">" which is a different glyph to the design's.
 * Masking means it inherits currentColor, so one rule covers the orange-on-white
 * and white-on-photo variants.
 */
.nn-btn-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.nn-btn-arrow .wp-block-button__link::after {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-arrow-right.svg") no-repeat center / contain;
	mask: url("../images/icon-arrow-right.svg") no-repeat center / contain;
}

/* The outline variants carry the larger 24px arrow in the design. */
.nn-btn-arrow.is-style-outline-primary .wp-block-button__link::after,
.nn-btn-arrow.is-style-outline-white .wp-block-button__link::after {
	flex-basis: 24px;
	width: 24px;
	height: 24px;
}

/* --------------------------------------------------------------------------
   Why Mothers Choose Us — 2x2 feature grid
   -------------------------------------------------------------------------- */

.nn-feature-grid {
	gap: 40px 24px;
}

.nn-feature__icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Blog cards
   -------------------------------------------------------------------------- */

.nn-blog__grid {
	gap: 30px;
}

.nn-blog__card {
	border-radius: 14px;
	overflow: hidden;
	min-height: 426px;
}

/*
 * Element-level opacity, deliberately — the design fades the panel AND its
 * text together. An rgba() background would leave the text fully opaque and
 * stop matching the Figma.
 */
.nn-blog__panel {
	opacity: 0.7;
	width: 100%;
}

.nn-blog__panel .wp-block-post-date,
.nn-blog__panel .wp-block-post-date time {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--base);
	line-height: 24px;
	margin: 0;
}

.nn-blog__panel .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--card);
	font-weight: 700;
	line-height: 32px;
}

.nn-blog__panel .wp-block-post-title a {
	color: var(--wp--preset--color--brown-500);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   CTA collage
   Figma places five photos and the text block at absolute offsets inside a
   1226.25x886 frame. Reproducing that with px would only be correct at 1440,
   and letting the text sit in normal flow while the photos are absolute means
   the two scale independently — which is exactly how photos end up on top of
   the headline at some widths.

   So the frame itself is the layout: one fixed-ratio stage, and BOTH the
   photos and the text are positioned as percentages of it. The whole
   composition then scales as one unit and the spatial relationship the
   designer drew holds at every width.
   -------------------------------------------------------------------------- */

.nn-cta {
	position: relative;
	overflow: hidden;
	padding-block: 0;
}

.nn-cta__stage {
	width: min(1226px, 100%);
	margin-inline: auto;
	position: relative;
	aspect-ratio: 1226.25 / 886;
}

.nn-cta__collage {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.nn-cta__photo {
	position: absolute;
	margin: 0;
}

.nn-cta__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Figma offsets as percentages of the 1226.25x886 frame. */
.nn-cta__photo--1 { left: 8.716%;  top: 0;       width: 17.941%; height: 24.831%; }
.nn-cta__photo--2 { left: 16.391%; top: 52.145%; width: 15.413%; height: 21.332%; }
.nn-cta__photo--3 { left: 71.111%; top: 8.524%;  width: 14.190%; height: 19.639%; }
.nn-cta__photo--4 { left: 93.221%; top: 40.858%; width: 15.494%; height: 21.445%; }
.nn-cta__photo--5 { left: 50.968%; top: 58.239%; width: 30.173%; height: 41.761%; }

/*
 * Text block: x=247.375, y=225, w=908 inside the 1226.25x886 frame.
 * It is anchored to the section rather than the stage because a Gutenberg group
 * cannot be nested inside an HTML block. That is equivalent here: the stage is
 * the section's only flow child and the section has no padding, so the two are
 * exactly the same height — 25.395% resolves against the same box either way.
 * The width tracks the stage the same way the stage tracks the viewport.
 */
.wp-block-group.nn-cta__text,
.nn-cta__text {
	position: absolute;
	top: 25.395%;
	left: 50%;
	transform: translateX(-50%);
	width: min(908px, 74.045vw);
	z-index: 1;
	padding-block: 0;
}

.nn-cta__text h2 {
	margin: 0;
	line-height: 1.2;
}

/*
 * Below this width the headline alone is taller than the frame allows, so the
 * overlay cannot hold — the photos would land on the words no matter how the
 * percentages scale. Drop the collage and let the text flow normally.
 */
@media (max-width: 900px) {
	.nn-cta__stage {
		aspect-ratio: auto;
		height: auto;
	}

	.nn-cta__collage {
		display: none;
	}

	.nn-cta__text {
		position: static;
		transform: none;
		width: 100%;
		padding-block: clamp(56px, 10vw, 100px);
	}
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.nn-footer__top {
	display: flex;
	align-items: flex-start;
	gap: 100px;
}

.nn-footer__brand {
	/* shrink allowed: `0 0 403px` pins the column and blows out narrow viewports */
	flex: 0 1 403px;
	min-width: 0;
	max-width: 403px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.nn-footer__logo {
	margin: 0;
}

.nn-footer__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 24px;
}

.nn-footer__links {
	flex: 1;
	min-width: 0;
	display: grid;
	/* minmax(0, 1fr): a plain 1fr floors at min-content, so the contact column's
	   icon + text pushes the whole grid wider than its container. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.nn-footer__col-title {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 28px;
}

.nn-footer__col-title--upper {
	text-transform: uppercase;
	line-height: 24px;
}

.nn-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nn-footer__list a,
.nn-footer__contact a,
.nn-footer__policies a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--base);
	line-height: 24px;
}

.nn-footer__list a:hover,
.nn-footer__contact a:hover,
.nn-footer__policies a:hover {
	text-decoration: underline;
}

.nn-footer__contact {
	margin: 0;
}

.nn-footer__contact-row {
	align-items: center;
	line-height: 24px;
	flex-wrap: nowrap;
}

.nn-footer__contact-icon {
	margin: 0;
	flex: 0 0 24px;
}

.nn-footer__contact-icon img {
	width: 24px;
	height: 24px;
}

.nn-footer__contact-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 24px;
	color: var(--wp--preset--color--base);
}

.nn-footer__contact-text a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.nn-footer__contact-text a:hover {
	text-decoration: underline;
}

.nn-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 30px;
	gap: 24px;
}

.nn-footer__policies p {
	margin: 0;
}

.nn-footer__social .wp-social-link {
	width: 20px;
	height: 20px;
}

@media (max-width: 1024px) {
	.nn-footer__top {
		flex-direction: column;
		gap: 48px;
		/*
		 * Once this is a column, the cross axis is horizontal — and the inherited
		 * `align-items: flex-start` sizes children to max-content instead of the
		 * container width. The newsletter's intrinsic width then defines the page
		 * width and everything scrolls sideways.
		 */
		align-items: stretch;
	}

	.nn-footer__brand {
		flex: 0 1 auto;
		max-width: 403px;
	}

	.nn-footer__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}
}

@media (max-width: 600px) {
	.nn-footer__links {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Section flow
   Full-bleed sections butt directly against each other and against the header
   and footer — the design has no seam between them. Vertical rhythm inside a
   section comes from that section's own padding and blockGap, never from a
   margin between sections.
   -------------------------------------------------------------------------- */

.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

main.wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}

main.wp-block-group > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Calendar icon on the booking CTAs
   Applied as a mask rather than an <img> so the glyph inherits currentColor —
   the same button style then works on the white header and over the hero photo.
   -------------------------------------------------------------------------- */

.nn-btn-calendar .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.nn-btn-calendar .wp-block-button__link::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-calendar.svg") no-repeat center / contain;
	mask: url("../images/icon-calendar.svg") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   Footer social icons
   Figma: 4 icons, 20x20, 40px centre-to-centre, white, no chip. The core block
   draws a 16px glyph inside its 20px box, so the glyph is sized up to fill it.
   The 20px box is under the 24px touch minimum, so a pseudo-element widens the
   hit area without changing the visual.
   -------------------------------------------------------------------------- */

.nn-footer__social .wp-social-link {
	position: relative;
	width: 20px;
	height: 20px;
	padding: 0;
	background: none;
}

.nn-footer__social .wp-social-link a {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.nn-footer__social .wp-social-link svg {
	width: 20px;
	height: 20px;
	fill: var(--wp--preset--color--base);
}

.nn-footer__social .wp-social-link::after {
	content: "";
	position: absolute;
	inset: -6px;
}

.nn-footer__social .wp-social-link:hover svg {
	opacity: 0.75;
}