/*
 * Nomad Friendly — the parts of the design Elementor has no control for.
 * Source of truth: this file. Deployed to wp-content/nf-site-tweaks.css.
 */

html { scroll-behavior: smooth; }

::selection { background: #E8205F; color: #fff; }

/* Anchors sit under the fixed header, so give them room. */
[id] { scroll-margin-top: 96px; }

/* ------------------------------------------------------------------ header */

.nf-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: linear-gradient(180deg, rgba(0, 33, 28, .55) 0%, rgba(0, 33, 28, 0) 100%);
	transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}

.nf-header.is-solid {
	background: rgba(246, 242, 238, .94);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 1px 0 rgba(0, 33, 28, .08);
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Nav inverts with the header. */
.elementor .nf-header .nf-nav .elementor-item,
.elementor .nf-header .nf-nav .elementor-item:visited {
	color: #fff;
	transition: color .35s ease;
}

.elementor .nf-header.is-solid .nf-nav .elementor-item,
.elementor .nf-header.is-solid .nf-nav .elementor-item:visited {
	color: #00211C;
}

.elementor .nf-header .nf-nav .elementor-item:hover,
.elementor .nf-header.is-solid .nf-nav .elementor-item:hover {
	color: #E8205F;
}

.nf-header .elementor-menu-toggle { color: #fff; }
.nf-header.is-solid .elementor-menu-toggle { color: #00211C; }

/* The mobile drawer the export never had. */
.nf-header .elementor-nav-menu--dropdown {
	background: #00211C;
	border-radius: 0 0 28px 28px;
	padding: 12px 0 20px;
}

.nf-header .elementor-nav-menu--dropdown .elementor-item {
	color: rgba(255, 255, 255, .86) !important;
	font-size: 18px;
	padding: 14px 24px;
}

.nf-header .elementor-nav-menu--dropdown .elementor-item:hover {
	color: #E8205F !important;
	background: transparent;
}

/* ------------------------------------------------------------- scroll reveal */

.nf-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
}

.nf-reveal.is-in {
	opacity: 1;
	transform: none;
}

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

	.nf-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------- typography */

.nf-measure-14 .elementor-heading-title { max-width: 14ch; }
.nf-measure-16 .elementor-heading-title { max-width: 16ch; }
.nf-measure-34 p { max-width: 34ch; }
.nf-measure-38 p { max-width: 38ch; }
.nf-measure-46 p { max-width: 46ch; }

.elementor-widget-heading .elementor-heading-title { text-wrap: balance; }
.elementor-widget-text-editor p { text-wrap: pretty; }

/* Underlined mail address in the footer. */
.nf-maillink .elementor-heading-title a {
	color: inherit;
	border-bottom: 2px solid #E8205F;
	padding-bottom: 4px;
	transition: color .2s ease;
}

.nf-maillink .elementor-heading-title a:hover { color: #E8205F; }

.nf-legal a { color: rgba(255, 255, 255, .66); }
.nf-legal a:hover { color: #fff; }

.nf-footer-links .elementor-icon-list-item > a { transition: color .2s ease; }

/* ------------------------------------------------------------------- pieces */

/* Numbered step marker in "How it works". */
.nf-step-number .elementor-heading-title {
	font-variant-numeric: tabular-nums;
}

/* "Most taken" ribbon on the middle pricing card. */
.nf-ribbon {
	position: absolute !important;
	top: 24px;
	right: 24px;
	z-index: 2;
}

.nf-ribbon .elementor-heading-title {
	background: #E8205F;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: 999px;
	display: inline-block;
}

/* Criteria rows: label left, value right, hairline between. */
.nf-spec-row {
	border-bottom: 1px solid rgba(0, 33, 28, .1);
}

.nf-spec-row:last-child { border-bottom: 0; }

/* Cards that need to sit on top of a photo. */
.nf-overlay-card {
	backdrop-filter: blur(2px);
}

/* Place tiles: caption over the image. */
.nf-tile { position: relative; overflow: hidden; }

.nf-tile .nf-tile-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px;
	background: linear-gradient(180deg, rgba(0, 33, 28, 0) 0%, rgba(0, 33, 28, .78) 100%);
}

/* Hello Elementor leaves a gap above a full-bleed hero. */
.elementor-page .site-main,
.elementor-page .page-content { margin: 0; padding: 0; }

/* Forms: the accent focus ring the export shows. */
.elementor-field-group .elementor-field:focus {
	border-color: #E8205F !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(232, 32, 95, .14);
}

/* Accent dot before the hero eyebrow. */
.nf-eyebrow-dot .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #E8205F;
	margin-right: 10px;
	vertical-align: middle;
}

/* Text link with the accent rule under it. */
.nf-underline-link .elementor-heading-title a,
.nf-underline-link .elementor-heading-title {
	display: inline-block;
	border-bottom: 2px solid #E8205F;
	padding-bottom: 4px;
	color: inherit;
	transition: color .2s ease;
}

.nf-underline-link .elementor-heading-title a:hover { color: #E8205F; }

/* The standards photo is a 4:3 crop in the design, not the file's own ratio. */
.nf-cover-4x3 img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

/* Price suffix rides small next to the figure. */
.nf-price .elementor-heading-title span {
	font-family: "Instrument Sans", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	opacity: .7;
}

.nf-plan { position: relative; }

/* Section intros sit on the heading's baseline, not at the top of the row. */
.nf-align-end { align-self: flex-end; }

/* Newsletter: field and button on one line, as in the export. */
.nf-inline-form .elementor-form-fields-wrapper { align-items: center; }
.nf-inline-form .elementor-field-group { margin-bottom: 0; }

.nf-inline-form .elementor-field-textual {
	border: 1px solid rgba(0, 33, 28, .16);
	background: #fff;
	padding: 14px 20px;
	font-size: 15px;
}

.nf-places-grid { width: 100%; }
.nf-places-grid .elementor-loop-container { height: 100%; }
.nf-places-grid .e-loop-item { height: 100%; }

/* Tile photos scale in on hover, as in the export. */
.nf-tile { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.nf-tile:hover { transform: scale(1.01); }

/* Partner hero: the eyebrow is a filled pill, not plain text. */
.nf-pill .elementor-heading-title {
	display: inline-block;
	background: #E8205F;
	color: #fff;
	padding: 8px 14px;
	border-radius: 999px;
}

/* Criteria and plan lists use an em dash, not an icon. */
.nf-check-list .elementor-icon-list-item { align-items: flex-start; }

.nf-check-list .elementor-icon-list-text::before {
	content: "—";
	color: #E8205F;
	margin-right: 10px;
}

/* Week tags keep a fixed gutter so the four rows line up. */
.nf-week-tag { flex: 0 0 34px; }

.nf-cover-3x4 img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.nf-measure-22 p { max-width: 22ch; }

/* Application form: two columns on desktop, one on mobile. */
.nf-apply-form .elementor-field-textual {
	border: 1px solid rgba(0, 33, 28, .16);
	background: #fff;
	padding: 14px 18px;
	font-size: 15px;
}

.nf-apply-form textarea.elementor-field-textual { border-radius: 16px; }

/* Coworking table: three columns on desktop, stacked on mobile. */
.nf-desk-row:last-child { border-bottom: 0; }