/* =====================================================================
   Program (pih_program) single template — SELF-CONTAINED.

   Own namespace (pihp-), own tokens, no shared classes. Nothing here
   touches pih-programs.css and nothing there touches this page.

   Decorative SVG paths are set as custom properties below — swap the two
   URLs if the uploads move.
   ===================================================================== */

.pihp {
	/* Brand palette (26PIH005 guide) */
	--pihp-pnw:        #003f3f;
	--pihp-forest:     #002517;
	--pihp-legacy:     #007777;
	--pihp-legacy-dk:  #005c5c;
	--pihp-desert:     #f9bf3b;
	--pihp-desert-hv:  #e59438;
	--pihp-coastal:    #acc9c9;
	--pihp-ivory:      #f3f0e0;
	--pihp-agate:      #fbf9f3;
	--pihp-ink:        #2a150d;

	/* Decorative graphics */
	--pihp-svg-basketweave-legGrn: url("../svg/BasketWeave1-LegGrn.svg");

	/* Triangle clusters, bottom-right of Intro and Helpful Links.
	   FILL IN your SVG paths here (relative to this stylesheet).

	   Each SVG is used as a MASK: only its shape matters, the colour comes
	   from the band (ivory on Intro, Legacy teal on Helpful Links). Export
	   with a transparent background, shapes filled any solid colour.

	   The ratio is the SVG's width / height (its viewBox), so the box
	   hugs the artwork and the triangles sit exactly on the band's edge. */
	--pihp-svg-triangles-intro:   url("../svg/BasketWeave1-Ivory.svg");
	--pihp-svg-triangles-helpful: url("../svg/BasketWeave1-LegGrn.svg");
	--pihp-triangles-ratio-intro:   1 / 1;
	--pihp-triangles-ratio-helpful: 1 / 1;
	--pihp-svg-siletz:  url("/wp-content/uploads/2026/09/26PIH005-SiletzTribes-Pattern-Rev.svg");

	/* Layout */
	--pihp-max:    1120px;
	--pihp-featured-max: 1320px;  /* Featured panel runs wider than content */
	--pihp-text:   44rem;   /* optional reading cap — see .pihp-intro below */
	--pihp-gutter: clamp(1.25rem, 5vw, 3.5rem);
	--pihp-band:   clamp(2.5rem, 6vw, 4.5rem);

	font-family: Lato, system-ui, sans-serif;
	color: var(--pihp-ink);

	/* GeneratePress wrappers must not box the full-bleed bands. */
	.site-main,
	.entry-content {
		margin: 0;
		padding: 0;
		max-inline-size: none;
	}

	/* ---------- 5. Client-managed block area (CTA pattern, extra blocks) ----
	   Must come after the .entry-content reset above — it shares the same
	   specificity, so source order decides. The ACF bands are full-bleed;
	   this area behaves like normal page content instead. */
	.pihp-blocks {
		max-inline-size: var(--pihp-max);
		margin-inline: auto;
		padding-inline: var(--pihp-gutter);
		padding-block: var(--pihp-band);

		> .alignfull {
			inline-size: 100vw;
			max-inline-size: 100vw;
			margin-inline: calc(50% - 50vw);
		}

		> .alignwide {
			inline-size: min(100vw, calc(var(--pihp-max) + 8rem));
			max-inline-size: none;
			margin-inline: calc(50% - min(50vw, calc(var(--pihp-max) / 2 + 4rem)));
		}

		/* A full-bleed block flush at either end (the CTA pattern is usually
		   the only thing here) shouldn't get wrapper padding. */
		&:has(> .alignfull:first-child) { padding-block-start: 0; }
		&:has(> .alignfull:last-child)  { padding-block-end: 0; }

		> :first-child { margin-block-start: 0; }
		> :last-child  { margin-block-end: 0; }
	}

	/* ---------- Bands: full-bleed regardless of GP content width ---------- */
	.pihp-section {
		position: relative;
		inline-size: 100vw;
		margin-inline: calc(50% - 50vw);
		/* GeneratePress gives every direct child of .site-main a 20px bottom
		   margin, which shows as a white strip between bands. */
		margin-block: 0;
		padding-block: var(--pihp-band);
		overflow: hidden;
	}

	.pihp-inner {
		position: relative;
		z-index: 1;
		max-inline-size: var(--pihp-max);
		margin-inline: auto;
		padding-inline: var(--pihp-gutter);
	}

	/* ---------- Typography ---------- */
	.pihp-heading {
		margin: 0 0 1rem;
		font-weight: 300;
		font-size: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);
		line-height: 1.15;
		color: var(--pihp-pnw);
	}
	.pihp-heading--xl {
		font-size: clamp(2rem, 1rem + 3.2vw, 3.125rem);
		margin-block-end: 1.25rem;
	}

	.pihp-prose {
		font-size: 1rem;
		line-height: 1.65;

		p,
		ul,
		ol {
			margin: 0 0 1.1rem;
		}
		> :last-child { margin-block-end: 0; }

		ul,
		ol { padding-inline-start: 1.35rem; }
		li { margin-block-end: 0.35rem; }

		strong { font-weight: 700; }

		a {
			color: var(--pihp-legacy);
			text-decoration: underline;
			text-underline-offset: 3px;
		}
		a:hover { color: var(--pihp-pnw); }
	}

	/* ---------- 1. Intro: white, text + optional program logo ----------
	   Headline full width, then the body (logo + copy). The logo sits first
	   in the markup so each breakpoint can lay it out differently:
	     desktop  — its own right-hand grid column
	     tablet   — floated right, copy wraps around it
	     phone    — stacked above the copy, larger
	   No logo: the copy simply fills the width at every size. */
	.pihp-intro {
		background: #fff;

		/* Triangle cluster in ivory, rising into the ivory Primary band
		   below. Placement lives in the shared triangle rules further
		   down; this only picks the artwork and colour. */
		--pihp-tri-svg:   var(--pihp-svg-triangles-intro);
		--pihp-tri-ratio: var(--pihp-triangles-ratio-intro);
		--pihp-tri-color: var(--pihp-ivory);

		/* The headline is a normal block above the body, so it spans the full
		   width with no grid placement needed. */

		/* Desktop: the body is the grid. One column by default so the copy
		   fills the band; a logo adds the right-hand column. */
		.pihp-intro__body {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			column-gap: clamp(1rem, 3vw, 2.25rem);
			align-items: start;
		}

		.pihp-intro__body:has(.pihp-intro__logo) {
			grid-template-columns: minmax(0, 1fr) clamp(11rem, 22vw, 17rem);
		}

		/* The logo is first in source (so it can float on tablet), but on
		   desktop it belongs in the right-hand column. */
		.pihp-intro__logo {
			grid-column: 2;
			grid-row: 1;

			img {
				display: block;
				inline-size: 100%;
				block-size: auto;
			}
		}

		.pihp-intro__text {
			grid-column: 1;
			grid-row: 1;
		}

		/* If long lines read poorly, uncomment to cap the copy only.
		.pihp-prose { max-inline-size: var(--pihp-text); }
		*/

		/* Button sits at the bottom of the copy column. */
		.pihp-intro__actions {
			margin: 2rem 0 0;
		}

		/* The .pih-btn / .pih-btn-legacy classes live in pih-programs.css.
		   If that file is not loaded on this CPT, these fallbacks keep the
		   button looking right; when it IS loaded, its rules match the same
		   selector with equal specificity and — being a separate later
		   stylesheet — take over. Delete this block if you always load it. */
		.pihp-intro__actions a.pih-btn {
			display: inline-block;
			padding: 10px 26px;
			border: 2px solid transparent;
			border-radius: 999px;
			font: 600 14px/1.2 Lato, sans-serif;
			letter-spacing: 0.02em;
			text-transform: uppercase;
			text-decoration: none;
			white-space: nowrap;
			transition: background-color 0.15s ease, color 0.15s ease;
		}
		.pihp-intro__actions a.pih-btn-legacy {
			background: var(--pihp-legacy);
			color: #fff;
		}
		.pihp-intro__actions a.pih-btn-legacy:hover {
			background: var(--pihp-pnw);
			color: #fff;
		}
		.pihp-intro__actions a.pih-btn:focus-visible {
			outline: 3px solid var(--pihp-desert);
			outline-offset: 2px;
		}


		/* Responsive rules are nested HERE rather than in the global media
		   queries at the bottom — the desktop rules above sit at
		   .pihp .pihp-intro … specificity, so an override outside this block
		   can't beat them. */

		/* Tablet: drop the grid, float the logo right, let the copy wrap
		   around it. flow-root keeps the float inside the section. */
		@media (width <= 860px) {
			.pihp-intro__body {
				display: flow-root;
			}

			.pihp-intro__logo {
				float: right;
				inline-size: clamp(10rem, 30vw, 14rem);
				margin: 0.25rem 0 1rem clamp(1rem, 3vw, 2rem);
			}

			/* A list beside the float would run its bullets underneath the
			   logo; flow-root narrows the whole list to fit beside it. */
			.pihp-prose :is(ul, ol) {
				display: flow-root;
			}
		}

		/* Phone: no float — logo stacks above the copy, larger, centered.
		   Tight margins above and below so it sits close to the headline
		   and the copy. */
		@media (width <= 600px) {
			.pihp-intro__heading { margin-block-end: 0.75rem; }

			.pihp-intro__logo {
				float: none;
				inline-size: clamp(11rem, 60vw, 16rem);
				margin: 0 auto 0.75rem;
			}
		}
	}

	/* ---------- 2 + 4. Image + link list ---------- */
	/* Equal columns: the image stays large (~475px at full width, close to
	   the comp) while the text column keeps enough room for "Primary
	   Resources" on one line at every width above the 860px stack.
	   Top-aligned so the image and the heading start on the same line. */
	.pihp-media {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 5vw, 4rem);
		align-items: start;
	}

	/* Pull the heading up by its top leading so its cap height, not its
	   line box, lines up with the top edge of the image. */
	.pihp-media__body > .pihp-heading:first-child {
		margin-block-start: -0.15em;
	}

	/* Primary Resources rich text: a little room before the link list when
	   both are filled in. */
	.pihp-media__text + .pihp-linklist {
		margin-block-start: 1.25rem;
	}

	/* Grouped resource lists typed into the text field (a subheading, then a
	   list of links) match the link list: small bold group labels, no
	   bullets, same link size and spacing. Plain <h3>/<ul> in the editor —
	   no classes to lose. */
	.pihp-media__text {
		h3 {
			margin: 1.5rem 0 0.5rem;
			font-size: 1.0625rem;
			font-weight: 700;
			line-height: 1.3;
			color: var(--pihp-pnw);
		}
		> h3:first-child { margin-block-start: 0; }

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		li {
			margin-block-end: 0.55rem;
			font-size: 0.9375rem;
		}
	}

	/* Section has links but no image: single column, full-width text. */
	.pihp-media--textonly {
		grid-template-columns: 1fr;
	}

	.pihp-media__figure {
		img {
			display: block;
			inline-size: 100%;
			block-size: auto;
		}
	}

	.pihp-media__placeholder {
		display: block;
		inline-size: 100%;
		aspect-ratio: 3 / 2;
		background: #d9d9d9;
	}

	.pihp-linklist {
		list-style: none;
		margin: 0;
		padding: 0;

		.pihp-linklist__item { margin-block-end: 0.55rem; }

		a {
			color: var(--pihp-legacy);
			font-size: 0.9375rem;
			text-decoration: underline;
			text-underline-offset: 3px;
		}
		a:hover { color: var(--pihp-pnw); }
	}

	.pihp-primary {
		background: var(--pihp-ivory);

		/* Long link lists split into two columns. The switch happens at the
		   7th item — change the number in :nth-child() to move the
		   threshold. Columns fill top to bottom, so reading order holds. */
		.pihp-linklist:has(> .pihp-linklist__item:nth-child(7)) {
			columns: 2;
			column-gap: clamp(1.25rem, 3vw, 2.5rem);
		}

		/* Keep a wrapped link title in one piece rather than split across
		   the column break. */
		.pihp-linklist__item {
			break-inside: avoid;
		}

		/* Phones: back to a single column. */
		@media (width <= 600px) {
			.pihp-linklist:has(> .pihp-linklist__item:nth-child(7)) {
				columns: 1;
			}
		}
	}

	/* Helpful Links: ivory, teal triangles rising into the CTA band below. */
	.pihp-helpful {
		background: var(--pihp-ivory);

		--pihp-tri-svg:   var(--pihp-svg-triangles-helpful);
		--pihp-tri-ratio: var(--pihp-triangles-ratio-helpful);
		--pihp-tri-color: var(--pihp-legacy);
	}

	/* No Featured Resources slider on the page: Helpful Links would sit
	   straight after Primary Resources (also ivory) and the two would read
	   as one band. Switch it to white whenever the section right before it
	   isn't the slider. If Helpful Links is the first band, it stays ivory. */
	.pihp-section:not(.pihp-featured) + .pihp-helpful {
		background: #fff;
	}

	/* ---------- Triangle clusters (shared) ----------
	   Sit on the bottom edge of the band, half off the right side of the
	   page, as in both comps. The section's overflow clip trims the half
	   that's off-page. Content (.pihp-inner, z-index 1) paints above. */
	.pihp-intro::after,
	.pihp-helpful::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: 0;
		translate: 50% 0;
		inline-size: clamp(7rem, 20vw, 18rem);
		aspect-ratio: var(--pihp-tri-ratio, 1 / 1);
		background: var(--pihp-tri-color);
		-webkit-mask: var(--pihp-tri-svg) center bottom / contain no-repeat;
		mask: var(--pihp-tri-svg) center bottom / contain no-repeat;
		pointer-events: none;
	}

	/* ---------- 3. Featured Resources ----------
	   overflow-x:clip (not overflow:hidden) so the panel's negative top
	   margin can overlap the band above while the full-bleed width is
	   still clipped horizontally. */
	.pihp-featured {
		background: var(--pihp-legacy);
		overflow: visible;
		overflow-x: clip;
		z-index: 1;
		/* room for the Siletz strip along the bottom */
		padding-block-end: calc(var(--pihp-band) + 20px + 1.25rem);

		/* Wider than the other bands so four cards get real room — roughly
		   260px each at full width, close to the comp's proportions. */
		.pihp-inner { max-inline-size: var(--pihp-featured-max); }

		&::after {
			content: "";
			position: absolute;
			inset-inline: 0;
			inset-block-end: 1.25rem;
			block-size: 20px;
			background: var(--pihp-svg-siletz) center / auto 20px repeat-x;
			opacity: 0.75;
			pointer-events: none;
		}
	}

	.pihp-panel {
		/* Side padding doubles as the arrow lane: the arrows sit inside it,
		   so the eyebrow and the cards share one left edge, as in the comp. */
		--pihp-panel-pad: clamp(1rem, 4.5vw, 3.75rem);

		background: var(--pihp-pnw);
		color: #fff;
		padding: clamp(1.25rem, 3vw, 2rem) var(--pihp-panel-pad) clamp(1.5rem, 3vw, 2rem);
		margin-block-start: calc(var(--pihp-band) * -1.6);
	}

	/* Featured is the first band on the page (Primary Resources empty), so
	   there is nothing above for it to overlap. */
	.pihp-featured--flush .pihp-panel {
		margin-block-start: 0;
	}

	.pihp-eyebrow {
		margin: 0 0 1.25rem;
		font-size: 0.875rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #fff;

		&::after {
			content: "";
			display: block;
			inline-size: 30px;
			block-size: 3px;
			margin-block-start: 8px;
			background: var(--pihp-desert);
		}
	}

	/* ---------- Carousel ----------
	   No gutter here — the arrows live in the panel's side padding (see
	   .pihp-panel), so the track uses the full width and lines up with the
	   eyebrow whether or not arrows are showing. */
	.pihp-carousel {
		position: relative;
	}

	.pihp-carousel__track {
		list-style: none;
		margin: 0;
		padding: 0 0 4px;
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;

		&::-webkit-scrollbar { display: none; }
	}

	.pihp-carousel__slide {
		flex: 0 0 calc((100% - 3rem) / 4);
		scroll-snap-align: start;
	}

	/* Not a slider (everything fits on one page — the JS hides the arrows):
	   centre the row instead of leaving empty space on the right.
	   `safe center` falls back to start if the row ever overflows, so the
	   first card can't be pushed out of reach; browsers without `safe`
	   ignore that line and keep the plain `center` above it. */
	.pihp-carousel:has(.pihp-carousel__arrow--next[hidden]) .pihp-carousel__track {
		justify-content: center;
		justify-content: safe center;
	}

	.pihp-card {
		block-size: 100%;

		/* Thin Desert border around the whole card, as in the comp. */
		.pihp-card__link {
			display: flex;
			flex-direction: column;
			block-size: 100%;
			background: #fff;
			border: 1px solid var(--pihp-desert);
			color: var(--pihp-ink);
			text-decoration: none;
		}
		.pihp-card__link:hover .pihp-card__title,
		.pihp-card__link:focus-visible .pihp-card__title {
			color: var(--pihp-legacy);
			text-decoration: underline;
			text-underline-offset: 3px;
		}
		.pihp-card__link:focus-visible {
			outline: 3px solid var(--pihp-desert);
			outline-offset: 2px;
		}

		/* Every card image is the same 16:9 box, whatever the upload's shape.
		   flex: none stops the column from squashing the box on cards with
		   longer text — that's what made some images shorter than others.
		   The image is absolutely positioned so its own width/height
		   attributes can't stretch the box either; it just crops to fill. */
		.pihp-card__media {
			position: relative;
			display: block;
			flex: none;
			aspect-ratio: 16 / 9;
			overflow: hidden;
			background: #d9d9d9;

			img {
				position: absolute;
				inset: 0;
				inline-size: 100%;
				block-size: 100%;
				max-inline-size: none;
				object-fit: cover;
				object-position: center;
				display: block;
			}
		}

		.pihp-card__body {
			display: block;
			padding: 1rem 1.125rem 1.25rem;
		}

		.pihp-card__title {
			display: block;
			margin-block-end: 0.5rem;
			font-size: 0.9375rem;
			font-weight: 700;
			line-height: 1.3;
			color: var(--pihp-ink);
		}

		.pihp-card__text {
			display: block;
			font-size: 0.8125rem;
			line-height: 1.5;
		}
	}

	/* Arrows */
	.pihp-carousel__arrow {
		position: absolute;
		inset-block-start: 38%;
		z-index: 2;
		inline-size: 40px;
		block-size: 40px;
		display: grid;
		place-items: center;
		padding: 0;
		border: 2px solid var(--pihp-desert);
		border-radius: 50%;
		background: transparent;
		color: var(--pihp-desert);
		cursor: pointer;

		span {
			inline-size: 10px;
			block-size: 10px;
			border-inline-end: 2px solid currentColor;
			border-block-start: 2px solid currentColor;
		}

		&:hover:not(:disabled),
		&:focus-visible {
			background: var(--pihp-desert);
			color: var(--pihp-pnw);
		}
		&:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
		&:disabled { opacity: 0.35; cursor: default; }
	}

	/* Centre each 40px arrow in the panel's side padding. */
	.pihp-carousel__arrow--prev {
		inset-inline-start: calc((var(--pihp-panel-pad) + 40px) / -2);
		span { transform: rotate(-135deg); margin-inline-start: 3px; }
	}
	.pihp-carousel__arrow--next {
		inset-inline-end: calc((var(--pihp-panel-pad) + 40px) / -2);
		span { transform: rotate(45deg); margin-inline-end: 3px; }
	}

	/* Dots */
	.pihp-carousel__dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-block-start: 12px;

		button {
			inline-size: 22px;
			block-size: 22px;
			display: grid;
			place-items: center;
			padding: 0;
			border: 0;
			background: transparent;
			cursor: pointer;
		}
		button::before {
			content: "";
			inline-size: 9px;
			block-size: 9px;
			border-radius: 50%;
			border: 1.5px solid #fff;
		}
		button[aria-current="true"]::before {
			background: var(--pihp-coastal);
			border-color: var(--pihp-coastal);
		}
		button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
	}

	/* The display values above beat the UA stylesheet's [hidden] rule, so
	   restate it. The JS sets hidden when everything already fits. */
	.pihp-carousel__arrow[hidden],
	.pihp-carousel__dots[hidden] {
		display: none;
	}

	/* ---------- Responsive ---------- */
	@media (width <= 900px) {
		.pihp-carousel__slide { flex-basis: calc((100% - 1rem) / 2); }

		/* Two-up and below: swipe + dots only. */
		.pihp-carousel__arrow { display: none; }
	}

	@media (width <= 860px) {
		.pihp-media { grid-template-columns: 1fr; }

		/* Stacked image (Primary Resources + Helpful Links): smaller than
		   full width and centered above the text. */
		.pihp-media__figure {
			order: -1;
			justify-self: center;
			inline-size: min(85%, 26rem);
		}

		.pihp-panel { margin-block-start: 0; }

	}

	@media (width <= 560px) {
		.pihp-carousel__slide { flex-basis: 100%; }
	}

	@media (prefers-reduced-motion: reduce) {
		.pihp-carousel__track { scroll-behavior: auto; }
	}
}

/* The full-bleed bands need a clip on the page, not just the section. */
body.single-pih_program { overflow-x: clip; }