/**
 * [noygal_search] portal — the page a client lands on when she has a code but
 * no direct link.
 *
 * Design intent: this is not a login form, it's the door to someone's own
 * photographs, so the photograph carries the page and the interface stays
 * quiet around it. The image is mounted on a visible white mat with a deeper
 * margin below — the proportions of a mounted print — rather than bled to the
 * edge of a coloured panel.
 *
 * Everything is scoped under .ns-portal so it can never leak into the host
 * theme, and every colour reads from the plugin's --ns-* design tokens (with
 * literal fallbacks) so the Design screen still governs it.
 *
 * TYPOGRAPHY NOTE: the display face is set here rather than inherited from
 * --ns-font-accent because that token's default (Cormorant Garamond) contains
 * no Hebrew glyphs at all — Hebrew silently falls through to whatever serif
 * the OS picks, which is why this page's headings looked inconsistent between
 * machines. Frank Ruhl Libre is a real Hebrew serif and is loaded explicitly
 * by NOYGAL_Search_Shortcode::enqueue_assets().
 */

.ns-portal {
	--portal-ink: var(--ns-ink, #221F1D);
	--portal-muted: var(--ns-muted-aa, #7A6E68);
	--portal-line: var(--ns-border, #E2DAD3);
	--portal-mat: var(--ns-white, #fff);
	--portal-field: var(--ns-cream, #FBF9F7);
	--portal-accent: var(--ns-rose-dark, #A87068);
	--portal-accent-soft: var(--ns-rose-pale, #F5EAE7);
	--portal-display: 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
	--portal-ui: var(--ns-font-ui, 'Heebo', 'Arial Hebrew', Arial, sans-serif);

	position: relative;
	box-sizing: border-box;
	padding: 40px 20px 56px;
	background:
		radial-gradient(120% 90% at 100% 0%, var(--ns-rose-pale, #F7EFEC) 0%, transparent 55%),
		linear-gradient(180deg, var(--ns-cream, #FBF9F7) 0%, var(--ns-beige, #F1EBE4) 100%);
	font-family: var(--portal-ui);
	color: var(--portal-ink);
}
.ns-portal *,
.ns-portal *::before,
.ns-portal *::after { box-sizing: border-box; }

.ns-portal-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

/* ---------------------------------------------------------------
 * The mounted plate — the signature element.
 * --------------------------------------------------------------- */
.ns-portal-plate {
	order: -1; /* photo above the form on small screens */
	margin: 0;
	padding: 10px 10px 14px;
	background: var(--portal-mat);
	box-shadow: 0 1px 2px rgba(34,31,29,.05), 0 18px 44px -18px rgba(34,31,29,.28);
}
.ns-portal-photo {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	object-position: center 42%;
}
.ns-portal-plate figcaption {
	margin-top: 10px;
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .16em;
	color: var(--portal-muted);
	text-align: center;
}

/* ---------------------------------------------------------------
 * Type
 * --------------------------------------------------------------- */
.ns-portal-eyebrow {
	margin: 0 0 14px;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	color: var(--portal-accent);
}
.ns-portal-eyebrow::after {
	content: "";
	display: block;
	width: 26px;
	height: 1px;
	margin-top: 10px;
	background: var(--portal-accent);
	opacity: .45;
}

.ns-portal-title {
	margin: 0 0 10px;
	font-family: var(--portal-display);
	font-weight: 500;
	font-size: clamp(1.9rem, 6vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--portal-ink);
}

.ns-portal-sub {
	margin: 0 0 26px;
	max-width: 34ch;
	font-size: .95rem;
	line-height: 1.65;
	color: var(--portal-muted);
}

/* ---------------------------------------------------------------
 * Form. Fields are underlines rather than boxes — fewer competing
 * rectangles next to the mounted photograph.
 * --------------------------------------------------------------- */
.ns-portal-form { margin: 0; }

.ns-portal-names {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 22px;
}

.ns-portal-field { margin: 0; }
.ns-portal-field label {
	display: block;
	margin-bottom: 6px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--portal-muted);
}
.ns-portal-field input {
	width: 100%;
	min-height: 46px;
	padding: 8px 2px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--portal-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--portal-line);
	border-radius: 0;
	transition: border-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.ns-portal-field input:hover { border-bottom-color: var(--portal-accent); }
.ns-portal-field input:focus {
	outline: none;
	border-bottom-color: var(--portal-accent);
	box-shadow: 0 1px 0 0 var(--portal-accent);
}
.ns-portal-field input::placeholder { color: var(--portal-line); }

/* Single code field, not six boxes: paste from WhatsApp works in one gesture,
   and one tracked field sits far more quietly on the page than a row of
   little rectangles. */
.ns-portal-field-code { margin-bottom: 30px; }
.ns-portal-field-code input {
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: .5em;
	text-indent: .5em; /* balances the trailing letter-space so text sits centred */
	text-align: center;
	direction: ltr;
}
.ns-portal-field-code small {
	display: block;
	margin-top: 8px;
	font-size: .72rem;
	color: var(--portal-muted);
}

.ns-portal-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 14px 28px;
	font-family: inherit;
	font-size: .98rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
	background: var(--portal-ink);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background .2s ease, transform .12s ease;
}
.ns-portal-submit:hover { background: var(--portal-accent); }
.ns-portal-submit:active { transform: translateY(1px); }
.ns-portal-submit:focus-visible {
	outline: 2px solid var(--portal-accent);
	outline-offset: 3px;
}

.ns-portal-help {
	display: inline-block;
	margin-top: 20px;
	font-size: .84rem;
	color: var(--portal-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--portal-line);
	padding-bottom: 2px;
	transition: color .2s ease, border-color .2s ease;
}
.ns-portal-help:hover {
	color: var(--portal-accent);
	border-bottom-color: var(--portal-accent);
}

/* Messages */
.ns-portal-note {
	margin: 0 0 20px;
	padding: 12px 16px;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--portal-ink);
	background: var(--portal-accent-soft);
	border-inline-start: 2px solid var(--portal-accent);
}
.ns-portal-note-error { animation: ns-portal-nudge .35s ease; }

@keyframes ns-portal-nudge {
	0%, 100% { transform: translateX(0); }
	30% { transform: translateX(-4px); }
	70% { transform: translateX(4px); }
}

/* ---------------------------------------------------------------
 * Desktop: two columns. The plate becomes a tall portrait print and
 * the mat gains its deeper bottom margin — the proportion that reads
 * as "mounted" rather than "cropped".
 * --------------------------------------------------------------- */
@media (min-width: 900px) {
	.ns-portal { padding: 88px 32px 96px; }

	.ns-portal-inner {
		/* Both columns are sized to their content and the PAIR is centered.
		 *
		 * The previous `1fr minmax(320px, 400px)` let the form column stretch
		 * to fill everything left over, while .ns-portal-form-col capped the
		 * content inside it — so the form was pinned to the outer edge of an
		 * over-wide column and the photo to the opposite edge, with a large
		 * dead gap between them. Fixed columns + justify-content:center keeps
		 * the two blocks together in the middle, and makes the result
		 * independent of however wide the theme's container turns out to be.
		 */
		grid-template-columns: auto auto;
		justify-content: center;
		gap: 64px;
		align-items: center;
	}

	.ns-portal-plate {
		order: 0; /* natural order: form column first (right in RTL), plate second */
		width: 360px;
		padding: 16px 16px 30px;
	}
	.ns-portal-photo {
		height: auto;
		aspect-ratio: 3 / 4;
		object-position: center 38%;
	}
	.ns-portal-plate figcaption { margin-top: 16px; }

	.ns-portal-form-col { width: 400px; max-width: 100%; }
	.ns-portal-title { font-size: clamp(2.2rem, 2.6vw, 2.9rem); }
	.ns-portal-submit { width: auto; min-width: 220px; }
}

/* Very wide screens: nudge the gap up a little so the pair doesn't read as
   two things crammed together on a large monitor. */
@media (min-width: 1400px) {
	.ns-portal-inner { gap: 80px; }
	.ns-portal-plate { width: 400px; }
}

/* Single-column but roomier — tablets and large phones. */
@media (min-width: 560px) and (max-width: 899px) {
	.ns-portal { padding: 56px 32px 72px; }
	.ns-portal-inner { max-width: 520px; }
	.ns-portal-photo { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
	.ns-portal-note-error { animation: none; }
	.ns-portal-submit,
	.ns-portal-field input,
	.ns-portal-help { transition: none; }
}

/* Astra prints its own page-title header above the_content() on every
   page-builder-template page. This page states its own purpose in its H1, so
   the theme's generic title directly above would be a duplicate heading. */
.ast-page-builder-template article > .entry-header { display: none; }