/**
 * Newsletter Hub — public styles.
 *
 * Every colour comes from the CSS custom properties printed by
 * NLHUB_Frontend::design_css(), so the whole UI re-skins from the settings
 * screen without touching this file.
 */

.nlhub {
	--nlhub-primary: #0a2855;
	--nlhub-primary-dark: #061e46;
	--nlhub-accent: #ffd200;
	--nlhub-text: #1b2733;
	--nlhub-bg: #f7f9fc;
	--nlhub-border: #e4eaf2;
	--nlhub-radius: 14px;
	--nlhub-muted: #667788;
	--nlhub-shadow: 0 1px 2px rgba(16, 32, 56, .04), 0 8px 24px rgba(16, 32, 56, .06);
	--nlhub-shadow-hover: 0 2px 4px rgba(16, 32, 56, .06), 0 16px 36px rgba(16, 32, 56, .11);

	box-sizing: border-box;
	color: var(--nlhub-text);
	font-size: 16px;
	line-height: 1.6;
}

.nlhub *,
.nlhub *::before,
.nlhub *::after {
	box-sizing: inherit;
}

.nlhub img {
	max-width: 100%;
	height: auto;
}

.nlhub .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------ */

.nlhub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: calc(var(--nlhub-radius) * .65);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.nlhub-btn:focus-visible {
	outline: 3px solid var(--nlhub-accent);
	outline-offset: 2px;
}

.nlhub-btn--primary {
	background: var(--nlhub-primary);
	color: #fff;
}

.nlhub-btn--primary:hover {
	background: var(--nlhub-primary-dark);
	color: #fff;
}

.nlhub-btn--ghost {
	background: transparent;
	border-color: var(--nlhub-border);
	color: var(--nlhub-text);
}

.nlhub-btn--ghost:hover {
	border-color: var(--nlhub-primary);
	color: var(--nlhub-primary);
}

.nlhub-btn[disabled],
.nlhub-btn.is-busy {
	opacity: .6;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Notices
 * ------------------------------------------------------------------------ */

.nlhub-notice {
	padding: 14px 18px;
	margin: 0 0 20px;
	border-radius: calc(var(--nlhub-radius) * .6);
	border-left: 4px solid var(--nlhub-primary);
	background: var(--nlhub-bg);
	font-size: 15px;
}

.nlhub-notice--success {
	border-left-color: #1f9d55;
	background: #ecfaf1;
	color: #135c33;
}

.nlhub-notice--error {
	border-left-color: #d64545;
	background: #fdeeee;
	color: #7d2222;
}

.nlhub-notice--info {
	border-left-color: var(--nlhub-primary);
}

/* ---------------------------------------------------------------------------
 * Archive header + toolbar
 * ------------------------------------------------------------------------ */

.nlhub-archive__header {
	margin: 0 0 22px;
}

.nlhub-archive__title {
	margin: 0 0 6px;
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
	line-height: 1.15;
	color: var(--nlhub-primary);
}

.nlhub-archive__subtitle {
	margin: 0;
	max-width: 62ch;
	color: var(--nlhub-muted);
}

.nlhub-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 14px;
	margin: 0 0 16px;
	background: var(--nlhub-bg);
	border: 1px solid var(--nlhub-border);
	border-radius: var(--nlhub-radius);
}

.nlhub-toolbar__search {
	position: relative;
	flex: 1 1 260px;
	min-width: 200px;
}

.nlhub-toolbar__search-icon {
	position: absolute;
	top: 50%;
	left: 13px;
	transform: translateY(-50%);
	color: var(--nlhub-muted);
	pointer-events: none;
}

.nlhub-toolbar input[type="search"],
.nlhub-toolbar select {
	width: 100%;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid var(--nlhub-border);
	border-radius: calc(var(--nlhub-radius) * .55);
	font: inherit;
	font-size: 15px;
	color: var(--nlhub-text);
	appearance: none;
}

.nlhub-toolbar input[type="search"] {
	padding-left: 40px;
}

.nlhub-toolbar select {
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667788'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 20px;
	cursor: pointer;
}

.nlhub-toolbar input[type="search"]:focus,
.nlhub-toolbar select:focus {
	outline: none;
	border-color: var(--nlhub-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nlhub-primary) 18%, transparent);
}

.nlhub-toolbar__field {
	flex: 0 1 auto;
	min-width: 150px;
}

.nlhub-toolbar__reset {
	padding: 11px 16px;
	font-size: 14px;
}

.nlhub-archive__count {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--nlhub-muted);
}

/* ---------------------------------------------------------------------------
 * Results grid
 * ------------------------------------------------------------------------ */

.nlhub-results {
	display: grid;
	gap: 22px;
	transition: opacity .18s ease;
}

.nlhub-results[aria-busy="true"] {
	opacity: .45;
}

.nlhub-results--grid.nlhub-cols-1 { grid-template-columns: 1fr; }
.nlhub-results--grid.nlhub-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nlhub-results--grid.nlhub-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nlhub-results--grid.nlhub-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nlhub-results--list {
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (max-width: 900px) {
	.nlhub-results--grid.nlhub-cols-3,
	.nlhub-results--grid.nlhub-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.nlhub-results--grid {
		grid-template-columns: 1fr !important;
	}
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------ */

.nlhub-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--nlhub-border);
	border-radius: var(--nlhub-radius);
	box-shadow: var(--nlhub-shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.nlhub-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--nlhub-shadow-hover);
	border-color: color-mix(in srgb, var(--nlhub-primary) 25%, var(--nlhub-border));
}

.nlhub-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--nlhub-bg);
}

.nlhub-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.nlhub-card:hover .nlhub-card__media img {
	transform: scale(1.04);
}

.nlhub-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 16px;
}

.nlhub-card__badge {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--nlhub-accent);
	color: var(--nlhub-primary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
}

.nlhub-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
}

.nlhub-card__title a {
	color: var(--nlhub-primary);
	text-decoration: none;
}

.nlhub-card__title a:hover {
	text-decoration: underline;
}

.nlhub-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	color: var(--nlhub-muted);
}

.nlhub-card__author::before {
	content: "·";
	margin-right: 10px;
}

.nlhub-card__excerpt {
	margin: 0;
	font-size: 15px;
	color: #4a5b6d;
}

.nlhub-card__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--nlhub-border);
}

.nlhub-card__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--nlhub-primary);
	text-decoration: none;
}

.nlhub-card__link:hover {
	text-decoration: underline;
}

.nlhub-results--list .nlhub-card {
	flex-direction: row;
}

.nlhub-results--list .nlhub-card__media {
	flex: 0 0 32%;
	aspect-ratio: auto;
}

@media (max-width: 640px) {
	.nlhub-results--list .nlhub-card {
		flex-direction: column;
	}

	.nlhub-results--list .nlhub-card__media {
		aspect-ratio: 16 / 9;
	}
}

.nlhub-empty {
	padding: 40px 20px;
	margin: 0;
	text-align: center;
	color: var(--nlhub-muted);
	background: var(--nlhub-bg);
	border: 1px dashed var(--nlhub-border);
	border-radius: var(--nlhub-radius);
}

/* ---------------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------------ */

.nlhub-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin: 26px 0 0;
}

.nlhub-page {
	min-width: 40px;
	padding: 9px 13px;
	background: #fff;
	border: 1px solid var(--nlhub-border);
	border-radius: calc(var(--nlhub-radius) * .5);
	font: inherit;
	font-size: 14px;
	color: var(--nlhub-text);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nlhub-page:hover:not([disabled]):not(.is-current) {
	border-color: var(--nlhub-primary);
	color: var(--nlhub-primary);
}

.nlhub-page.is-current {
	background: var(--nlhub-primary);
	border-color: var(--nlhub-primary);
	color: #fff;
	font-weight: 700;
	cursor: default;
}

.nlhub-page[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.nlhub-page-ellipsis {
	padding: 0 4px;
	color: var(--nlhub-muted);
}

/* ---------------------------------------------------------------------------
 * Share bar
 * ------------------------------------------------------------------------ */

.nlhub-share {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
	margin: 26px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--nlhub-border);
}

.nlhub-share--compact {
	margin: 0;
	padding: 0;
	border-top: 0;
}

.nlhub-share__heading {
	font-size: 14px;
	font-weight: 700;
	color: var(--nlhub-text);
}

.nlhub-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nlhub-share__item {
	margin: 0;
}

.nlhub-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	background: #fff;
	border: 1px solid var(--nlhub-border);
	border-radius: 999px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--nlhub-text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.nlhub-share__btn:hover,
.nlhub-share__btn:focus-visible {
	background: var(--nlhub-net, var(--nlhub-primary));
	border-color: var(--nlhub-net, var(--nlhub-primary));
	color: #fff;
}

.nlhub-share__btn.is-done {
	background: #1f9d55;
	border-color: #1f9d55;
	color: #fff;
}

.nlhub-share--icons .nlhub-share__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.nlhub-share--icons .nlhub-share__btn {
	width: 36px;
	height: 36px;
	padding: 0;
	justify-content: center;
}

.nlhub-share__count {
	font-size: 13px;
	color: var(--nlhub-muted);
}

.nlhub-share__count strong {
	color: var(--nlhub-text);
}

.nlhub-share__panel {
	flex: 1 1 100%;
	padding: 16px;
	margin-top: 6px;
	background: var(--nlhub-bg);
	border: 1px solid var(--nlhub-border);
	border-radius: var(--nlhub-radius);
}

.nlhub-share__panel-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
}

.nlhub-share__panel-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* ---------------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------------ */

.nlhub-subscribe {
	margin: 26px 0;
}

.nlhub-subscribe--card {
	padding: 26px;
	background: var(--nlhub-bg);
	border: 1px solid var(--nlhub-border);
	border-radius: var(--nlhub-radius);
}

.nlhub-subscribe__heading {
	margin: 0 0 6px;
	font-size: 1.35rem;
	color: var(--nlhub-primary);
}

.nlhub-subscribe__text {
	margin: 0 0 18px;
	max-width: 60ch;
	color: var(--nlhub-muted);
}

.nlhub-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nlhub-field {
	flex: 1 1 220px;
	margin: 0 0 12px;
}

.nlhub-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nlhub-text);
}

.nlhub-field input[type="text"],
.nlhub-field input[type="email"],
.nlhub-field textarea {
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--nlhub-border);
	border-radius: calc(var(--nlhub-radius) * .55);
	font: inherit;
	font-size: 15px;
	color: var(--nlhub-text);
}

.nlhub-field input:focus,
.nlhub-field textarea:focus {
	outline: none;
	border-color: var(--nlhub-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nlhub-primary) 18%, transparent);
}

.nlhub-field input[aria-invalid="true"] {
	border-color: #d64545;
}

.nlhub-required {
	color: #d64545;
}

.nlhub-fieldset {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.nlhub-fieldset legend {
	padding: 0;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.nlhub-fieldset__hint {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--nlhub-muted);
}

.nlhub-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.nlhub-choices--wrap {
	gap: 8px 16px;
}

.nlhub-choice {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.45;
	cursor: pointer;
}

.nlhub-choice input {
	margin: 2px 0 0;
	accent-color: var(--nlhub-primary);
}

.nlhub-choice--consent {
	display: flex;
	margin: 4px 0 14px;
	font-size: 13px;
	color: var(--nlhub-muted);
}

.nlhub-choice--consent a {
	color: var(--nlhub-primary);
}

.nlhub-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 4px;
}

.nlhub-form__message {
	margin: 12px 0 0;
	font-size: 14px;
	min-height: 1px;
}

.nlhub-form__message:empty {
	margin: 0;
}

.nlhub-form__message.is-success {
	color: #135c33;
	font-weight: 600;
}

.nlhub-form__message.is-error {
	color: #a12727;
	font-weight: 600;
}

/* Honeypot — visually gone, still reachable by naive bots. */
.nlhub-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nlhub-captcha {
	margin: 0 0 14px;
}

/* ---------------------------------------------------------------------------
 * Bar layout — a single-row strip for footers and widget areas.
 *
 * --nlhub-bar-bg and --nlhub-bar-btn are set per widget instance; both fall
 * back to the palette from Settings -> Design.
 * ------------------------------------------------------------------------ */

.nlhub-subscribe--bar {
	margin: 0;
	padding: 14px;
	background: var(--nlhub-bar-bg, var(--nlhub-accent));
	border-radius: var(--nlhub-radius);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .16);
	color: var(--nlhub-bar-text, var(--nlhub-text));
}

.nlhub-subscribe--bar .nlhub-subscribe__heading,
.nlhub-subscribe--bar .nlhub-subscribe__text {
	color: inherit;
}

.nlhub-subscribe--bar .nlhub-subscribe__heading {
	margin: 0 0 4px;
	font-size: 1.1rem;
}

.nlhub-subscribe--bar .nlhub-subscribe__text {
	margin: 0 0 12px;
	font-size: 14px;
	opacity: .85;
}

.nlhub-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}

.nlhub-bar__field {
	flex: 1 1 160px;
	min-width: 0;
	margin: 0;
}

.nlhub-bar__field input {
	width: 100%;
	height: 100%;
	padding: 13px 15px;
	background: #e9e9e9;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: calc(var(--nlhub-radius) * .45);
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	color: #33383d;
}

.nlhub-bar__field input::placeholder {
	color: #6c7378;
	opacity: 1;
}

.nlhub-bar__field input:focus {
	outline: none;
	background: #fff;
	border-color: var(--nlhub-bar-btn, var(--nlhub-primary));
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
}

.nlhub-bar__field input[aria-invalid="true"] {
	border-color: #b3261e;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .25);
}

.nlhub-bar__button {
	flex: 0 0 auto;
	padding: 13px 30px;
	background: var(--nlhub-bar-btn, var(--nlhub-primary));
	border: 1px solid transparent;
	border-radius: calc(var(--nlhub-radius) * .45);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--nlhub-bar-btn-text, #fff);
	cursor: pointer;
	transition: filter .15s ease, transform .05s ease;
}

.nlhub-bar__button:hover {
	filter: brightness(1.25);
	color: var(--nlhub-bar-btn-text, #fff);
}

.nlhub-bar__button:active {
	transform: translateY(1px);
}

.nlhub-bar__button:focus-visible {
	/* The ring is drawn INSIDE the button, where --nlhub-bar-btn-text is
	 * guaranteed to contrast (contrast_color() picks it against the button).
	 * An outer halo in the button's own colour separates it from the strip, so
	 * the indicator never depends on the bar background alone. */
	outline: 3px solid var(--nlhub-bar-btn-text, #fff);
	outline-offset: -3px;
	box-shadow: 0 0 0 3px var(--nlhub-bar-btn, var(--nlhub-primary));
}

.nlhub-bar__button[disabled],
.nlhub-bar__button.is-busy {
	opacity: .65;
	cursor: not-allowed;
}

/* Optional extras stack underneath the row, still readable on the strip. */
.nlhub-subscribe--bar .nlhub-fieldset,
.nlhub-subscribe--bar .nlhub-choice,
.nlhub-subscribe--bar .nlhub-choice--consent,
.nlhub-subscribe--bar .nlhub-fieldset__hint {
	color: inherit;
}

.nlhub-subscribe--bar .nlhub-fieldset {
	margin: 14px 0 0;
}

.nlhub-subscribe--bar .nlhub-choice--consent {
	margin: 12px 0 0;
	opacity: .9;
}

.nlhub-subscribe--bar .nlhub-choice--consent a {
	color: inherit;
	text-decoration: underline;
}

.nlhub-subscribe--bar .nlhub-form__message {
	margin: 10px 0 0;
	font-weight: 600;
}

.nlhub-subscribe--bar .nlhub-form__message.is-success,
.nlhub-subscribe--bar .nlhub-form__message.is-error {
	color: inherit;
}

@media (max-width: 560px) {
	.nlhub-bar {
		flex-direction: column;
	}

	.nlhub-bar__field,
	.nlhub-bar__button {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* The widget wrapper itself stays out of the way — themes own the spacing. */
.nlhub-widget .nlhub-subscribe {
	margin: 0;
}

.nlhub-subscribe--inline .nlhub-form__row {
	flex-wrap: nowrap;
	align-items: flex-end;
}

@media (max-width: 640px) {
	.nlhub-subscribe--inline .nlhub-form__row {
		flex-wrap: wrap;
	}
}

/* ---------------------------------------------------------------------------
 * Preferences + latest list
 * ------------------------------------------------------------------------ */

.nlhub-preferences {
	max-width: 640px;
}

.nlhub-preferences__heading {
	margin: 0 0 6px;
	color: var(--nlhub-primary);
}

.nlhub-preferences__email {
	margin: 0 0 18px;
	color: var(--nlhub-muted);
}

.nlhub-latest__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nlhub-latest__item {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--nlhub-border);
}

.nlhub-latest__item:last-child {
	border-bottom: 0;
}

.nlhub-latest__media {
	flex: 0 0 84px;
}

.nlhub-latest__media img {
	width: 84px;
	height: 62px;
	object-fit: cover;
	border-radius: calc(var(--nlhub-radius) * .5);
}

.nlhub-latest__title {
	display: block;
	font-weight: 600;
	color: var(--nlhub-primary);
	text-decoration: none;
}

.nlhub-latest__title:hover {
	text-decoration: underline;
}

.nlhub-latest__date {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--nlhub-muted);
}

.nlhub-latest__excerpt {
	margin: 4px 0 0;
	font-size: 14px;
	color: #4a5b6d;
}

.nlhub-archive__cta {
	margin-top: 34px;
}

@media (prefers-reduced-motion: reduce) {
	.nlhub *,
	.nlhub *::before,
	.nlhub *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}