/*
 * Norah demo section layout, version 1.6.0.
 *
 * Owner design round on the canonical demo homepage:
 * - The contact grid columns top-align instead of end-aligning.
 * - The offer list uses brand diamond bullets aligned to the text line with a
 *   deeper left indent.
 * - The footer restructures into two rows: logo left with navigation right,
 *   copyright bottom-left under the logo, and the boundary disclaimer moved
 *   out of its own boxed section into the bottom-right, right-aligned.
 * The boundary graph element now lives inside the footer shell; this layer
 * only restyles it.
 *
 * 1.1.0 restores the documented light-button role (ivory surface for sky-blue
 * backgrounds) so the offer call to action reads as a button on the pale blue
 * offer card again, and gives the two why-point cards the same static glass
 * treatment as the hero orbs and note.
 *
 * 1.2.0 marks the glass gradient with !important because the Bricks
 * lazy-background rule otherwise suppresses it, matching the proven hero
 * glass pattern.
 *
 * 1.3.0 places the glass gradients inside Bricks' own `@layer bricks`. The
 * lazy-background suppression lives in that layer, and layered !important
 * declarations beat unlayered ones regardless of specificity, which is why
 * the gradients stayed invisible while the bricks-lazy-hidden class is
 * present. Adding the override to the same layer restores the static glass
 * sheen on the why-point cards, the hero orbs, and the hero note.
 *
 * 1.4.0 makes the header sticky with a glass surface state once the page
 * scrolls (state class toggled by assets/norah-demo-header-sticky.js), gives
 * the offer call to action a glass hover state, and darkens the contact
 * action text to ink.
 *
 * 1.5.0 removes the drop shadow from the pale blue offer card, renders
 * its three-line description paragraph in light ivory on the blue surface,
 * and releases the boundary disclaimer's width cap so it sits on one line at
 * desktop widths while still wrapping gracefully on narrow screens.
 *
 * 1.6.0 reverts the card description to ink after owner review and gives the
 * card heading a light ivory-tinted bottom border on the blue surface.
 */

/* Contact: top-align both columns. */
body.norah-geometry-v1 .norah-home .norah-contact__grid {
	align-items: start;
}

/* Offer list: diamond bullets on the text line, deeper indent. */
body.norah-geometry-v1 .norah-home .norah-offer__list {
	padding-inline-start: 3.2rem;
}

body.norah-geometry-v1 .norah-home .norah-offer__list li {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 0.88rem 0;
}

body.norah-geometry-v1 .norah-home .norah-offer__list li::before {
	content: "";
	position: static;
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: currentColor;
	transform: rotate(45deg);
}

/* Footer: two-row layout with the disclaimer bottom-right. */
body.norah-geometry-v1 .norah-home .norah-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--norah-hv-gap-wide, 4rem);
	row-gap: 3.2rem;
}

body.norah-geometry-v1 .norah-home .norah-brand--footer {
	grid-row: 1;
	grid-column: 1;
	justify-self: start;
}

body.norah-geometry-v1 .norah-home .norah-footer__nav {
	grid-row: 1;
	grid-column: 2;
	justify-self: end;
}

body.norah-geometry-v1 .norah-home .norah-footer__copyright {
	grid-row: 2;
	grid-column: 1;
	justify-self: start;
}

body.norah-geometry-v1 .norah-home .norah-boundary {
	grid-row: 2;
	grid-column: 2;
	justify-self: end;
	inline-size: auto;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: right;
}

body.norah-geometry-v1 .norah-home .norah-boundary p {
	margin: 0;
	font-size: max(13px, var(--norah-type-micro));
	line-height: 1.65;
	text-align: right;
	color: var(--norah-ink);
}

/* Light button: ivory on the sky card, per the documented surface roles. */
body.norah-geometry-v1 .norah-home .norah-button--light {
	border-color: var(--norah-ivory);
	background: var(--norah-ivory);
	box-shadow: 0 0.7rem 1.6rem rgba(71, 75, 72, 0.12);
	color: var(--norah-ink) !important;
	transition: background-color 0.2s ease, background-image 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Glass hover: translucent ivory, light edge, blur, and soft lift shadow. */
body.norah-geometry-v1 .norah-home .norah-button--light:hover {
	border-color: rgba(255, 255, 255, 0.68);
	background-color: rgba(246, 243, 237, 0.28);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(246, 243, 237, 0.08));
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.56), inset -1px -1px 0 rgba(71, 75, 72, 0.05), 0 0.7rem 1.6rem rgba(71, 75, 72, 0.12);
	-webkit-backdrop-filter: blur(14px) saturate(115%);
	backdrop-filter: blur(14px) saturate(115%);
	color: var(--norah-ink) !important;
}

/* Why-point cards share the hero orb and note glass treatment. */
body.norah-geometry-v1 .norah-home .norah-point {
	border: 1px solid rgba(255, 255, 255, 0.68);
	background-color: rgba(246, 243, 237, 0.16);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(246, 243, 237, 0.06)) !important;
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.56), inset -1px -1px 0 rgba(71, 75, 72, 0.05), 0 1rem 2.4rem rgba(71, 75, 72, 0.1);
	-webkit-backdrop-filter: blur(14px) saturate(115%);
	backdrop-filter: blur(14px) saturate(115%);
}

body.norah-geometry-v1 .norah-home .norah-point h3 {
	color: var(--norah-ink);
}

body.norah-geometry-v1 .norah-home .norah-point p {
	color: var(--norah-stone);
}

/* The lazy-background suppression is layered, so the glass gradients must be
 * layered too; see the version note above. */
@layer bricks {
	body.norah-geometry-v1 .norah-home .norah-point,
	body.norah-geometry-v1 .norah-home .norah-hero__orb,
	body.norah-geometry-v1 .norah-home .norah-hero__note,
	body.norah-geometry-v1 .norah-home .norah-header {
		background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(246, 243, 237, 0.06)) !important;
	}
}

/* Header: sticky, switching to its glass surface state on scroll. The
 * state class is toggled by assets/norah-demo-header-sticky.js. */
body.norah-geometry-v1 .norah-home .norah-header {
	position: sticky;
	top: 0;
	z-index: 60;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.norah-geometry-v1.norah-header-scrolled .norah-home .norah-header {
	border-bottom-color: rgba(255, 255, 255, 0.68);
	background-color: rgba(246, 243, 237, 0.72);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.56), 0 0.7rem 1.6rem rgba(71, 75, 72, 0.08);
	-webkit-backdrop-filter: blur(14px) saturate(115%);
	backdrop-filter: blur(14px) saturate(115%);
}

/* Contact action text reads as primary ink copy. */
body.norah-geometry-v1 .norah-home .norah-contact__action p {
	color: var(--norah-ink);
}

/* Offer card: flat blue surface; heading divider is a light line. */
body.norah-geometry-v1 .norah-home .norah-offer__card {
	box-shadow: none;
}

body.norah-geometry-v1 .norah-home .norah-offer__card h3 {
	border-bottom-color: rgba(246, 243, 237, 0.45);
}