/* Shared page frame and components, also loaded in the block editor. */
.wp-site-blocks > .np-inner-page,
.editor-styles-wrapper .np-inner-page {
	min-height: 100vh;
	margin: 0;
	padding: 42px max(22px, calc((100% - 1120px) / 2)) 70px;
	background: linear-gradient(180deg, #f8f7fb 0, #fff 45%, #f8f7fb 100%);
}
.np-inner-page > .wp-block-post-content { margin-block: 0; }
.np-inner-page .wp-block-post-content > * + * { margin-top: 32px; }
.np-inner-page .np-inner-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1120px; margin: 0 auto 35px; }
.np-inner-top .brand { font-size: 18px; min-width: 0; }
.np-inner-top .brand-logo { display: block; width: auto; max-width: min(220px, 42vw); height: auto; max-height: 48px; }
.np-inner-top .np-back-link { color: var(--purple); font-size: 14px; font-weight: 700; text-decoration: none; flex-shrink: 0; }
.np-page-block { max-width: 1120px; margin: 0 auto; overflow-wrap: anywhere; }
.np-page-block *, .np-inner-top * { box-sizing: border-box; }
.np-page-block :where(a, button, input):focus-visible,
.np-inner-top a:focus-visible { outline: 3px solid var(--np-accent, var(--purple)); outline-offset: 4px; }
.np-page-block :where(button, input) { font: inherit; }
.np-page-block :where(a) { transition: background-color .2s, filter .2s; }
.np-inner-title { margin: 0 auto 22px; max-width: 1120px; }
.np-inner-title h1 { margin: 0; color: var(--np-heading, var(--ink)); font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.2; letter-spacing: -2px; }
.np-inner-title p { margin: 9px 0 0; color: var(--muted); line-height: 1.5; }
.np-editor-placeholder { padding: 24px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); }
.np-page-block .np-primary-action,
.np-page-block .np-secondary-action { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 18px; border-radius: 15px; text-align: center; text-decoration: none; font-weight: 800; line-height: 1.4; }
.np-page-block .np-primary-action:hover { background: var(--np-button-hover, var(--np-button, #25bce7)); filter: brightness(1.07); }
.np-page-block .np-secondary-action:hover { filter: brightness(1.2); }

/* Login and registration share presentation, but have separate ACF groups. */
.np-auth-wrap {
	--np-start: #d92b2b; --np-end: #a91523; --np-glow: #ff7878; --np-text: #ffffff;
	--np-muted: #fff0ef; --np-input: #ffffff; --np-input-text: #ffe9e9; --np-button: #ff5e58; --np-button-text: #ffffff;
	max-width: 520px; margin: 0 auto; padding: 50px; border-radius: 26px; color: var(--np-text);
	background: radial-gradient(circle at 50% 0, var(--np-glow), transparent 36%), linear-gradient(150deg, var(--np-start), var(--np-end));
	box-shadow: 0 24px 48px #b4253538; text-align: center;
}
.np-auth-mark { font-size: 42px; font-weight: 900; letter-spacing: -3px; line-height: 1.2; }
.np-auth-wrap h1 { color: var(--np-text); font-size: 44px; font-weight: 700; line-height: 1.2; margin: 45px 0 10px; }
.np-auth-wrap > p { font-size: 17px; line-height: 1.5; margin: 17px 0 37px; color: var(--np-muted); }
.np-auth-field { display: flex; gap: 13px; align-items: center; border-radius: 17px; background: color-mix(in srgb, var(--np-input) 17%, transparent); padding: 0 19px; margin: 13px 0; text-align: left; }
.np-auth-field > span[aria-hidden] { font-size: 20px; }
.np-auth-field input { border: 0; outline: 0; border-radius: 0; background: transparent; color: var(--np-input-text); width: 100%; min-width: 0; font-size: 17px; line-height: 1.2; padding: 22px 0; box-shadow: none; }
.np-auth-field input::placeholder { color: var(--np-input-text); opacity: 1; }
.np-auth-field:focus-within { outline: 2px solid var(--np-text); outline-offset: 3px; }
.np-auth-field input:focus-visible { outline: 0; }
.np-auth-row { display: flex; justify-content: flex-end; margin: 18px 0 34px; }
.np-auth-row a { color: var(--np-text); text-decoration: none; }
.np-auth-wrap .np-auth-submit { display: block; width: 100%; border: 0; border-radius: 50px; padding: 19px; background: var(--np-button); color: var(--np-button-text); font-size: 21px; line-height: 1.2; font-weight: 800; text-decoration: none; }
.np-auth-wrap .np-auth-submit:hover { background: var(--np-button-hover, var(--np-button)); filter: brightness(1.08); }
.np-auth-wrap > .np-auth-switch { font-size: 14px; margin-top: 24px; color: var(--np-muted); }
.np-auth-switch a { color: var(--np-text); font-weight: 800; text-decoration: underline; }

@media (max-width: 760px) {
	.wp-site-blocks > .np-inner-page, .editor-styles-wrapper .np-inner-page { padding: 25px 16px 48px; }
	.np-inner-page .np-inner-top { margin-bottom: 28px; }
	.np-auth-wrap { padding: 35px 24px; border-radius: 20px; }
	.np-auth-wrap h1 { margin-top: 32px; font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) { .np-page-block :where(a) { transition: none; } }
