/* ==========================================================================
   Nuori Mobile — front-end + editor styles
   Loaded on the front end and injected into the block editor so the
   homepage looks the same while you edit it.
   ========================================================================== */

:root {
	--nuori-frame: 480px;          /* the mobile canvas width */
	--nuori-gutter: 22px;
	--nuori-teal: #00737a;
	--nuori-teal-deep: #005a60;
	--nuori-ink: #14282a;
}

/* --------------------------------------------------------------------------
   1. Mobile-only frame
   The design is mobile-first and mobile-only: on anything wider than the
   frame the whole site stays at phone width and is centred on a tinted
   backdrop, the way a phone mockup reads.
   -------------------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body.nuori-body {
	background: #d9e4e4;
	margin: 0;
}

body.nuori-body .wp-site-blocks {
	width: 100%;
	max-width: var(--nuori-frame);
	margin-inline: auto;
	background: var(--wp--preset--color--cream);
	overflow-x: clip;
	box-shadow: 0 0 60px rgba(20, 40, 42, 0.16);
	min-height: 100vh;
}

@media (max-width: 480px) {
	body.nuori-body { background: var(--wp--preset--color--cream); }
	body.nuori-body .wp-site-blocks { box-shadow: none; }
}

/*
 * The gutter lives on <main> and on each text section, so full-bleed blocks
 * cancel it with a negative margin. Scoped to the content area: the header and
 * footer are full-bleed too but carry their own padding, and pulling them out
 * would widen the document and break the frame.
 */
.nuori-main {
	padding-inline: var(--nuori-gutter);
}

.nuori-main .alignfull {
	margin-left: calc(-1 * var(--nuori-gutter));
	margin-right: calc(-1 * var(--nuori-gutter));
	width: auto;
	max-width: none;
}

/* Text sections put the gutter back inside themselves. Cover blocks set their
   own padding inline, which wins over this. */
.nuori-section:not(.wp-block-cover) {
	padding-inline: var(--nuori-gutter);
}

.nuori-main > .alignfull:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

.nuori-display,
.has-display-font-family {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: -0.005em;
}

.nuori-display em {
	font-style: italic;
}

.nuori-eyebrow { text-transform: uppercase; }

.nuori-fineprint { opacity: 0.85; }

/* Wordmark images keep their intrinsic proportions and never stretch. */
.nuori-wordmark img { height: auto; display: block; }
.nuori-wordmark.aligncenter img { margin-inline: auto; }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.nuori-header {
	position: sticky;
	top: 0;
	z-index: 30;
	backdrop-filter: saturate(140%) blur(6px);
	background-color: rgba(253, 251, 250, 0.9) !important;
	border-bottom: 1px solid rgba(0, 115, 122, 0.12);
}

.nuori-header .wp-block-site-logo img { height: auto; }

/* When a custom logo is set, hide the text fallback beside it. */
.nuori-header .wp-block-site-logo:has(img) + .nuori-header__title { display: none; }

.nuori-header__title a { text-decoration: none; }

.nuori-header .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.nuori-hero { text-shadow: 0 1px 24px rgba(20, 40, 42, 0.35); }

.nuori-hero .wp-block-cover__inner-container > * {
	max-width: min(22ch, 100%);
	margin-inline: auto;
}

.nuori-hero .wp-block-buttons,
.nuori-hero .nuori-wordmark { max-width: 100%; }

.nuori-cta .wp-block-button__link {
	box-shadow: 0 6px 20px rgba(20, 40, 42, 0.18);
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   5. Bands (image strips with text over them)
   -------------------------------------------------------------------------- */

.nuori-band__title { text-shadow: 0 2px 18px rgba(20, 40, 42, 0.45); }

.nuori-band--stream .wp-block-cover__inner-container { pointer-events: none; }

/* --------------------------------------------------------------------------
   6. Problem cards
   -------------------------------------------------------------------------- */

.nuori-effect-card {
	overflow: hidden;
	text-shadow: 0 1px 14px rgba(20, 40, 42, 0.45);
}

/* --------------------------------------------------------------------------
   7. "Water, Reimagined" pills
   -------------------------------------------------------------------------- */

.nuori-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 2px 10px rgba(20, 40, 42, 0.08);
	margin: 0;
}

.nuori-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 1;
	color: var(--nuori-teal);
}

.nuori-reimagined__photo img { width: 100%; display: block; }

/* --------------------------------------------------------------------------
   8. "What touches your skin" circles
   -------------------------------------------------------------------------- */

.nuori-circles { gap: 6px !important; }

.nuori-circles .wp-block-column { flex-basis: 0; flex-grow: 1; min-width: 0; }

.nuori-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	padding: 6px;
	margin: 0;
	hyphens: auto;
}

/* --------------------------------------------------------------------------
   9. Ingredient rows
   -------------------------------------------------------------------------- */

.nuori-ingredient { align-items: flex-start !important; gap: 14px; }

.nuori-ingredient__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 0;
}

.nuori-ingredient__body { flex: 1 1 auto; min-width: 0; }

/* --------------------------------------------------------------------------
   10. Exploded view + part labels
   -------------------------------------------------------------------------- */

.nuori-inside__exploded img { height: auto; }

.nuori-partlist { display: flex; flex-wrap: wrap; gap: 8px; }

.nuori-partlabel {
	margin: 0;
	border: 1px solid rgba(0, 115, 122, 0.55);
	border-radius: 999px;
	padding: 7px 14px;
	line-height: 1;
}

.nuori-badge { display: inline-block; }

/* --------------------------------------------------------------------------
   11. Filter media cards
   -------------------------------------------------------------------------- */

.nuori-media-card {
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
}

.nuori-media-card .wp-block-media-text__media img {
	border-radius: 8px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.nuori-media-card .wp-block-media-text__content { padding: 0 0 0 12px; }

/* --------------------------------------------------------------------------
   12. Installation timeline
   -------------------------------------------------------------------------- */

.nuori-install__photo img { width: 100%; display: block; }

.nuori-timeline {
	list-style: none;
	padding-left: 30px;
	margin-inline: 0;
	position: relative;
}

.nuori-timeline::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: rgba(255, 255, 255, 0.5);
}

.nuori-timeline li {
	position: relative;
	padding-bottom: 22px;
}

.nuori-timeline li:last-child { padding-bottom: 0; }

.nuori-timeline li::before {
	content: "";
	position: absolute;
	left: -30px;
	top: 4px;
	width: 15px;
	height: 15px;
	border: 1px solid #fff;
	border-radius: 50%;
	background: transparent;
}

/* --------------------------------------------------------------------------
   13. Compare table
   -------------------------------------------------------------------------- */

.nuori-compare__big { font-family: var(--wp--preset--font-family--body); letter-spacing: -0.02em; }

.nuori-rule.wp-block-separator { border: 0; border-top: 1px solid rgba(0, 115, 122, 0.3); }

.nuori-claim { align-items: center !important; }

.nuori-claim__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 115, 122, 0.55);
	border-radius: 50%;
	margin: 0;
}

.nuori-compare-table table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	font-size: 12px;
}

.nuori-compare-table th,
.nuori-compare-table td {
	border: 0;
	padding: 11px 6px;
	text-align: center;
	color: var(--nuori-teal);
}

.nuori-compare-table thead th { font-weight: 600; font-size: 13px; }

.nuori-compare-table thead th:nth-child(2) {
	background: var(--nuori-teal);
	color: #fff;
	border-radius: 10px 10px 0 0;
}

.nuori-compare-table thead th:nth-child(3) {
	background: var(--wp--preset--color--coral);
	color: #fff;
	border-radius: 10px 10px 0 0;
}

.nuori-compare-table tbody td:first-child {
	text-align: left;
	font-weight: 600;
	width: 46%;
}

.nuori-compare-table tbody td:nth-child(2) {
	background: rgba(0, 115, 122, 0.06);
	font-weight: 700;
}

.nuori-compare-table tbody tr:last-child td:nth-child(2) { border-radius: 0 0 10px 10px; }

.nuori-compare-table tbody tr:nth-child(even) td:first-child,
.nuori-compare-table tbody tr:nth-child(even) td:nth-child(3) {
	background: rgba(0, 115, 122, 0.04);
}

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */

.nuori-quote { align-items: flex-start !important; }

.nuori-quote__avatar { flex: 0 0 auto; margin: 0; }

.nuori-quote__avatar img { border-radius: 50%; }

.nuori-testimonials__head { text-shadow: 0 1px 14px rgba(20, 40, 42, 0.4); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.nuori-footer__cols { gap: 14px; flex-wrap: wrap; }

.nuori-footer__cols .wp-block-column {
	flex: 1 1 96px;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The other columns give up room so the email address stays on one line. */
.nuori-footer__col--email { flex: 1.7 1 142px !important; }

.nuori-footer__logo img { height: auto; }

.nuori-footer a { text-decoration: none; }
.nuori-footer a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. Editor-only adjustments
   The editor canvas has no <body class="nuori-body">, so pin the frame width
   on the editor wrapper instead.
   -------------------------------------------------------------------------- */

.editor-styles-wrapper .is-root-container.wp-block-post-content,
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container {
	max-width: var(--nuori-frame);
	margin-inline: auto;
}

.editor-styles-wrapper .nuori-main { padding-inline: var(--nuori-gutter); }