/**
 * NB member portal / public listings — design system.
 *
 * ---------------------------------------------------------------------
 * Why this file looks the way it does
 * ---------------------------------------------------------------------
 * The approved design expresses almost everything as inline
 * `style` attributes, and the PHP views reproduce those verbatim. Inline
 * styles already outrank any theme selector, so the bulk of the design is
 * theme-proof for free.
 *
 * What inline styles *cannot* express is what's left here: pseudo-classes
 * (:hover/:focus/::placeholder), keyframes, and a reset. Those need real
 * selectors — and a real selector is exactly where a theme can outrank us.
 * So every rule below is written against a repeated class
 * (`.nb-p.nb-p.nb-p`), giving specificity 0-3-0. That beats essentially any
 * theme rule (`.entry-content ul li a` is 0-1-3) without resorting to
 * `!important`, which would be unoverridable by the site owner too.
 *
 * The reset is deliberately aggressive: block themes inject margins,
 * padding, list styling and typographic scale into anything inside
 * `.entry-content`, and this markup renders inside exactly that.
 * ---------------------------------------------------------------------
 */

/* ------------------------------------------------------------------
 * Root + design tokens.
 *
 * The root is transparent and unconstrained: no background, width, margin
 * or padding. A screen therefore fills the theme's own content container
 * and inherits its page colour and gutters. Only the auth screens set a
 * max-width (see NB_Portal::open()).
 *
 * `--acc*` are re-declared inline on the root element from the site's
 * accent setting (see NB_Settings::accent_css_vars) and so win over the
 * defaults here.
 * ------------------------------------------------------------------ */
.nb-p {
	--ink: #241F1B;
	--ink2: #544D46;
	--ink3: #6E665D;
	--line: #E8E3DC;
	--line2: #D5CDC4;
	--lineS: #F0EBE4;
	--paper: #FFFFFF;
	--page: #F6F4F1;
	--acc: #A95440;
	--acc2: #8F4331;
	--accs: #F8EEEA;
	--sage: #5E7A63;
	--sage2: #3F5744;
	--sages: #ECF1EB;
	--r: 6px;
	--r2: 4px;
	--sh: 0 1px 2px rgba(36, 31, 27, .05), 0 10px 26px -14px rgba(36, 31, 27, .16);

	/*
	 * Deliberately no background. The design paints its own page canvas
	 * (--page), but in a theme the portal has to sit on whatever light
	 * background the theme already provides - so the root stays
	 * transparent and --page is used only for small surface tints below
	 * (table header rows, file inputs, secondary-button hover).
	 */
	background: transparent;
	color: var(--ink);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------
 * Reset — neutralise theme bleed inside the portal.
 * ------------------------------------------------------------------ */

/* The portal carries its layout in inline styles so a theme cannot reach
 * in and rearrange it. The side effect is that an inline display outranks
 * the browser's own [hidden] { display: none }, leaving anything hidden by
 * attribute on screen. Restating it here with enough weight to beat an
 * inline value is the one place that has to be !important; scoping it to
 * .nb-p keeps it away from the surrounding theme. */
.nb-p [hidden] {
	display: none !important;
}

.nb-p.nb-p.nb-p,
.nb-p.nb-p.nb-p *,
.nb-p.nb-p.nb-p *::before,
.nb-p.nb-p.nb-p *::after {
	box-sizing: border-box;
}

.nb-p.nb-p.nb-p h1,
.nb-p.nb-p.nb-p h2,
.nb-p.nb-p.nb-p h3,
.nb-p.nb-p.nb-p p,
.nb-p.nb-p.nb-p ul,
.nb-p.nb-p.nb-p ol,
.nb-p.nb-p.nb-p li,
.nb-p.nb-p.nb-p dl,
.nb-p.nb-p.nb-p dd,
.nb-p.nb-p.nb-p dt,
.nb-p.nb-p.nb-p figure,
.nb-p.nb-p.nb-p table {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

.nb-p.nb-p.nb-p ul,
.nb-p.nb-p.nb-p ol {
	list-style: none;
}

.nb-p.nb-p.nb-p table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

.nb-p.nb-p.nb-p th,
.nb-p.nb-p.nb-p td {
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
}

.nb-p.nb-p.nb-p img {
	max-width: 100%;
	height: auto;
	display: block;
}

.nb-p.nb-p.nb-p input,
.nb-p.nb-p.nb-p select,
.nb-p.nb-p.nb-p textarea,
.nb-p.nb-p.nb-p button {
	font-family: inherit;
	margin: 0;
	max-width: 100%;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Native affordances that appearance:none strips and we want back. */
.nb-p.nb-p.nb-p input[type="date"],
.nb-p.nb-p.nb-p input[type="time"],
.nb-p.nb-p.nb-p input[type="file"],
.nb-p.nb-p.nb-p input[type="checkbox"],
.nb-p.nb-p.nb-p input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
}

.nb-p.nb-p.nb-p select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E665D' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 34px !important;
}

.nb-p.nb-p.nb-p a {
	color: var(--acc);
	text-decoration: none;
	box-shadow: none;
}

.nb-p.nb-p.nb-p a:hover {
	color: var(--acc2);
}

.nb-p.nb-p.nb-p input::placeholder,
.nb-p.nb-p.nb-p textarea::placeholder {
	color: #A9A199;
	opacity: 1;
}

/* ------------------------------------------------------------------
 * Interaction states. Inline styles carry the resting appearance; these
 * carry what inline styles can't express.
 * ------------------------------------------------------------------ */
.nb-p.nb-p.nb-p .nb-i:focus,
.nb-p.nb-p.nb-p .nb-i:focus-visible {
	outline: none;
	border-color: var(--acc);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent);
}

/* Dark primary button. */
.nb-p.nb-p.nb-p .nb-b1:hover {
	background: #3B332C;
	border-color: #3B332C;
}

/* Light secondary button. */
.nb-p.nb-p.nb-p .nb-b2:hover {
	background: var(--page);
	border-color: var(--ink3);
}

/* "Load More" / accent-outline button. */
.nb-p.nb-p.nb-p .nb-b3:hover {
	border-color: var(--acc);
	color: var(--acc);
}

/* Autocomplete suggestion row. */
.nb-p.nb-p.nb-p .nb-sg:hover,
.nb-p.nb-p.nb-p .nb-sg:focus,
.nb-p.nb-p.nb-p .nb-sg.is-active {
	background: var(--accs);
	outline: none;
}

/* Card that lifts on hover. */
.nb-p.nb-p.nb-p .nb-card:hover {
	border-color: var(--line2);
	box-shadow: var(--sh);
}

/* Row link that takes the accent on hover. */
.nb-p.nb-p.nb-p .nb-lh:hover {
	color: var(--acc);
}

/* Keyboard focus, everywhere, for anything we haven't styled explicitly. */
.nb-p.nb-p.nb-p a:focus-visible,
.nb-p.nb-p.nb-p button:focus-visible {
	outline: 2px solid var(--acc);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Motion.
 * ------------------------------------------------------------------ */
@keyframes nb-rise {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nb-p.nb-p.nb-p *,
	.nb-p.nb-p.nb-p *::before,
	.nb-p.nb-p.nb-p *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* ------------------------------------------------------------------
 * Responsive.
 *
 * These rules need `!important`, unusually, and for a specific reason:
 * the design carries `grid-template-columns` as an inline `style`
 * attribute (that inline-first approach is what makes the whole portal
 * immune to theme bleed). An inline declaration outranks every selector,
 * so a stylesheet rule - at any specificity, including a container query -
 * cannot collapse those grids without it. This overrides only our own
 * inline styles, never the theme's.
 *
 * Two passes, deliberately. The viewport query handles a genuinely small
 * screen. The container query handles the other, more common case: a full
 * desktop viewport where the theme still gives us a narrow article column
 * (the single org/event views render inside `the_content`, and the event
 * view splits that again with its QR sidebar).
 * ------------------------------------------------------------------ */
.nb-p {
	container-type: inline-size;
}

/* The label/value rows sit inside a card far narrower than the screen, so
 * the card itself is the query container for them. */
.nb-p.nb-p.nb-p .nb-rowset {
	container-type: inline-size;
}

@media (max-width: 860px) {
	.nb-p.nb-p.nb-p .nb-g2,
	.nb-p.nb-p.nb-p .nb-g4,
	.nb-p.nb-p.nb-p .nb-gdetail,
	.nb-p.nb-p.nb-p .nb-gfilter,
	.nb-p.nb-p.nb-p .nb-gfilter-ev {
		grid-template-columns: 1fr !important;
	}

	.nb-p.nb-p.nb-p .nb-row {
		grid-template-columns: 1fr !important;
		gap: 4px !important;
	}
}

@container (max-width: 860px) {
	.nb-p.nb-p.nb-p .nb-gdetail,
	.nb-p.nb-p.nb-p .nb-gfilter-ev {
		grid-template-columns: 1fr !important;
	}
}

@container (max-width: 620px) {
	.nb-p.nb-p.nb-p .nb-g2,
	.nb-p.nb-p.nb-p .nb-g4,
	.nb-p.nb-p.nb-p .nb-gfilter {
		grid-template-columns: 1fr !important;
	}
}

@container (max-width: 460px) {
	.nb-p.nb-p.nb-p .nb-row {
		grid-template-columns: 1fr !important;
		gap: 4px !important;
	}
}

/* Wide content must scroll inside its own container, never the page. */
.nb-p.nb-p.nb-p .nb-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * The flyer lightbox is intentionally NOT styled here. It renders at the
 * end of <body>, outside .nb-p, and on pages that load a different
 * stylesheet - so it styles itself inline instead. See
 * assets/js/nb-lightbox.js.
 */