/*
 * We Are CU*Answers: internal page template and patterns.
 *
 * Styles for templates/page.html and the patterns in patterns/. Loaded on the
 * front end and in the block editor by functions.php. Values are taken from the
 * live homepage, so internal pages match it: the gray banner panel, the orange
 * asterisk eyebrow, the large uppercase section headings, rounded shadowed
 * images, the outline and orange buttons, and the gray and navy bands.
 *
 * Site-wide hand-written CSS still lives in Additional CSS; this file only
 * covers the classes below, all prefixed "cua-", plus core Button blocks.
 */

:root {
	/* The homepage banner panel sits 100px in from each side of the 1920px
	   mockup (5.2083%), with ~30px rounded top corners. In vw rather than %
	   so the banner and the page content below it, which sit in different
	   containers, measure from the same thing and line up exactly. */
	--cua-panel-inset: 5.2083vw;
	--cua-panel-radius: clamp(12px, 1.55vw, 30px);
	--cua-panel-padding: clamp(24px, 3.3vw, 64px);
	/* Where the banner's text starts: the panel's edge plus its inner padding.
	   The page content below uses the same gutter. */
	--cua-page-gutter: calc(var(--cua-panel-inset) + var(--cua-panel-padding));
	--cua-panel-fill: linear-gradient(to bottom, rgba(230, 230, 230, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
	--cua-image-radius: 10px;
	--cua-image-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
	--cua-hover-gradient: linear-gradient(90deg, var(--wp--preset--color--primary-light) 0%, var(--wp--preset--color--primary) 100%);
}


/* ── Eyebrow: small bold label with the orange asterisk ─────────────────────
   Matches "Why CU*Answers?" and "What we do differently?" on the homepage.
   Add the class "cua-eyebrow" to any Paragraph or Heading. */
.cua-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
}

.cua-eyebrow::before {
	content: "";
	flex: none;
	width: 0.85em;
	height: 0.85em;
	background: url("../images/asterisk-circle.svg") center / contain no-repeat;
}

.cua-eyebrow.has-text-align-center {
	justify-content: center;
}

.cua-eyebrow.has-text-align-right {
	justify-content: flex-end;
}

.cua-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.cua-eyebrow a:hover,
.cua-eyebrow a:focus-visible {
	text-decoration: underline;
}


/* ── Display heading: the large uppercase section heading ───────────────────
   Matches "EXPLORE WITH CONFIDENCE." For the navy second line, select the
   words and use the Highlight tool (text color: Navy). */
.cua-display {
	margin-top: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: clamp(32px, 3.3vw, 48px);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.cua-eyebrow + .cua-display {
	margin-top: clamp(12px, 1vw, 18px);
}

/* Words colored with the Highlight tool: Frost draws an orange stripe under
   highlighted text, which the design doesn't use. */
.cua-display mark.has-inline-color {
	background-image: none;
}


/* ── Rounded, shadowed images ───────────────────────────────────────────────
   Matches the photos in the "Hear it from our Owners" tabs. Add the class
   "cua-image" to an Image block. */
.cua-image img {
	border-radius: var(--cua-image-radius);
	box-shadow: var(--cua-image-shadow);
}


/* ── Buttons (core Button block) ─────────────────────────────────────────────
   The default style is the orange gradient from theme.json, and its hover
   flips the gradient. The Outline style is the homepage's white button with a
   gray border, which fills with orange and turns its text white on hover. */
.wp-block-button .wp-block-button__link {
	font-size: clamp(16px, 1.05vw, 20px);
	border-radius: 8px;
	padding: 0.75em 1.5em;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	color: #000000;
	background: #ffffff;
	border: 1px solid #a8a8a8;
	padding: calc(0.75em - 1px) calc(1.5em - 1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	color: #ffffff;
	background: var(--cua-hover-gradient);
	border-color: var(--wp--preset--color--primary);
}


/* ── Internal page banner (templates/page.html) ─────────────────────────────
   A shorter version of the homepage banner: the same gray panel and right-hand
   hexagons, with the parent page label, page title, intro line and featured
   image. */
.cua-page-hero {
	position: relative;
	isolation: isolate;
	/* The homepage banner also sits a little below the header. */
	margin-top: clamp(12px, 1.7vw, 24px) !important;
	margin-bottom: clamp(48px, 6vw, 96px);
	padding-block: clamp(20px, 2vw, 36px) clamp(24px, 2.4vw, 44px);
}

/* The panel. */
.cua-page-hero::before {
	content: "";
	position: absolute;
	inset: 0 var(--cua-panel-inset);
	z-index: -2;
	/* Unlike the homepage banner, which fades out, this panel is a solid card
	   rounded on all four corners, so it ends cleanly above the page content.
	   Same family as the call-to-action panel and the footer's newsletter box. */
	border-radius: var(--cua-panel-radius);
	background: linear-gradient(to bottom, #efefef 0%, #f6f6f6 100%);
}

/* The hexagons, faded out at the top, bottom and left so they never end in a
   hard edge. */
.cua-page-hero::after {
	content: "";
	position: absolute;
	inset: 0 var(--cua-panel-inset);
	z-index: -1;
	border-radius: var(--cua-panel-radius);
	background: url("../images/hexagons-right.svg") right center / auto 115% no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 70%, transparent 100%),
	                    linear-gradient(to right, transparent 25%, #000 60%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 70%, transparent 100%),
	            linear-gradient(to right, transparent 25%, #000 60%);
	mask-composite: intersect;
	pointer-events: none;
}

/* Content fills the panel, less its inner padding. */
.cua-page-hero > .cua-page-hero__columns {
	margin: 0 var(--cua-page-gutter);
	column-gap: clamp(32px, 4vw, 80px);
}

.cua-page-hero__text > * + * {
	margin-top: 0;
}

.cua-page-hero__title {
	margin: clamp(12px, 1vw, 18px) 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(36px, 3.4vw, 64px);
	font-weight: 700;
	line-height: 0.95;
	color: var(--wp--preset--color--contrast);
}

.cua-page-hero__parent + .cua-page-hero__title {
	margin-top: clamp(16px, 1.4vw, 26px);
}

.cua-page-hero__text > .cua-page-hero__title:first-child {
	margin-top: 0;
}

.cua-page-hero__intro {
	max-width: 34em;
	margin-top: clamp(16px, 1.5vw, 28px) !important;
	font-size: clamp(16px, 1.2vw, 22px);
	line-height: 1.45;
}

.cua-page-hero__intro .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* No featured image: drop the empty column so the text has the full width. */
.cua-page-hero__media:not(:has(img)) {
	display: none;
}

.cua-page-hero__media .wp-block-post-featured-image {
	margin: 0;
}


/* ── Page content below the banner ──────────────────────────────────────────
   Spans the same width as the banner's contents: everything starts where the
   banner's text starts and ends where its image ends. Full-width bands (gray,
   navy) still run edge to edge, with their contents held to the same lines. */
.cua-page-content {
	padding-inline: var(--cua-page-gutter);
}

.cua-page-content > .alignfull {
	margin-inline: calc(-1 * var(--cua-page-gutter));
	padding-inline: var(--cua-page-gutter) !important;
}

.cua-page-content > .alignfull > * {
	max-width: none;
}

/* Wide groups would otherwise add WordPress's 30px page padding on top of the
   gutter and start further in. Groups given their own padding keep it. */
.cua-page-content > .has-global-padding:not(.alignfull):not([style*="padding-left"]) {
	padding-inline: 0;
}


/* ── Hexagon section backgrounds ─────────────────────────────────────────────
   The light hexagon clusters behind the homepage's two middle sections. Add
   "cua-hex-left" or "cua-hex-right" to a full-width Group.

   The graphic sits on its own layer behind the section (::before) rather than
   being the section's background, because only a separate layer can be faded
   with a mask. It fades out at the top and bottom of the section, so it never
   stops in a hard line where the section ends, and towards the text on the
   inner side. */
.cua-hex-left,
.cua-hex-right {
	--cua-hex-size: min(40%, 760px);
	position: relative;
	isolation: isolate;
}

.cua-hex-left::before,
.cua-hex-right::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	/* Kept to the image's side of the section, so the lines run behind the
	   photo and never under the text. */
	background-size: var(--cua-hex-size) auto;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.cua-hex-left::before {
	background-image: url("../images/hexagons-left.svg");
	background-position: 0% 85%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%),
	                    linear-gradient(to right, #000 calc(var(--cua-hex-size) * 0.55), transparent var(--cua-hex-size));
	mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%),
	            linear-gradient(to right, #000 calc(var(--cua-hex-size) * 0.55), transparent var(--cua-hex-size));
}

.cua-hex-right::before {
	background-image: url("../images/hexagons-right.svg");
	background-position: 100% 5%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%),
	                    linear-gradient(to left, #000 calc(var(--cua-hex-size) * 0.55), transparent var(--cua-hex-size));
	mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%),
	            linear-gradient(to left, #000 calc(var(--cua-hex-size) * 0.55), transparent var(--cua-hex-size));
}

/* Room between the image and the text in the text-and-image patterns. */
.cua-hex-left > .wp-block-columns,
.cua-hex-right > .wp-block-columns {
	column-gap: clamp(40px, 5vw, 96px);
}


/* ── Gray band ───────────────────────────────────────────────────────────────
   The "Hear it from our Owners" background. */
.cua-band-gray {
	background: linear-gradient(to bottom, #f4f4f4 0%, #cacaca 100%);
}


/* ── Numbers band ────────────────────────────────────────────────────────────
   "Let the numbers do the talking": orange figures with a rule beneath, white
   labels, and thin dividers between the columns. */
.cua-stats > .wp-block-column {
	text-align: center;
}

.cua-stats > .wp-block-column + .wp-block-column {
	border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.cua-stat__number {
	width: fit-content;
	margin: 0 auto;
	padding: 0 0.3em 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	font-size: clamp(36px, 3.3vw, 48px);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--primary-light);
}

.cua-stat__label {
	margin: 15px 0 0;
	font-size: clamp(20px, 1.9vw, 28px);
	line-height: 1.1;
	color: var(--wp--preset--color--base);
}

/* Columns stack on phones, so the dividers turn horizontal. */
@media (max-width: 781px) {
	.cua-stats > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.5);
		padding-top: 30px;
	}
}


/* ── Call-to-action panel ────────────────────────────────────────────────────
   The banner's gray panel, rounded on all corners, with hexagons on the left. */
.cua-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--cua-panel-radius);
	background: var(--cua-panel-fill), linear-gradient(to bottom, #f4f4f4, #ffffff);
}

.cua-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../images/hexagons-left.svg") left center / auto 140% no-repeat;
	-webkit-mask-image: linear-gradient(to right, #000 0, transparent 45%);
	mask-image: linear-gradient(to right, #000 0, transparent 45%);
	pointer-events: none;
}