/* =============================================================================
   NDNR Search Bar — Front-end Styles
   Version: 1.0.0
   ============================================================================= */

/* ── Custom Properties ──────────────────────────────────────────────────────── */
:root {
	--ndnr-blue:        #1060A5;
	--ndnr-brown:       #704A35;
	--ndnr-charcoal:    #292929;
	--ndnr-panel:       #EEF5FB;
	--ndnr-white:       #FFFFFF;
	--ndnr-border-lg:   #EEEEEE;
	--ndnr-border-sm:   #DDDDDD;
	--ndnr-radius:      4px;
	--ndnr-transition:  0.2s ease;
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.ndnr-search-wrap {
	font-family: Arial, Helvetica, sans-serif;
	color: var(--ndnr-charcoal);
	background: var(--ndnr-white);
	max-width: 960px;
	margin: 0 auto;
	padding: 0 16px 48px;
	box-sizing: border-box;
}

/* ── Search Form ────────────────────────────────────────────────────────────── */
.ndnr-search-form {
	margin: 32px 0 24px;
}

.ndnr-search-form__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}

.ndnr-search-form__input {
	flex: 1 1 260px;
	padding: 12px 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: var(--ndnr-charcoal);
	border: 2px solid var(--ndnr-border-sm);
	border-radius: var(--ndnr-radius);
	outline: none;
	transition: border-color var(--ndnr-transition);
	box-sizing: border-box;
}

.ndnr-search-form__input:focus {
	border-color: var(--ndnr-blue);
}

.ndnr-search-form__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	background-color: var(--ndnr-blue);
	color: var(--ndnr-white);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 700;
	border: none;
	border-radius: var(--ndnr-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--ndnr-transition), opacity var(--ndnr-transition);
	white-space: nowrap;
}

.ndnr-search-form__button:hover,
.ndnr-search-form__button:focus-visible {
	background-color: #0a4a84;
	outline: 2px solid var(--ndnr-blue);
	outline-offset: 2px;
}

.ndnr-search-form__button svg {
	flex-shrink: 0;
}

/* ── Results Heading (H1) ───────────────────────────────────────────────────── */
.ndnr-search-heading {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 36px;
	color: var(--ndnr-charcoal);
	margin: 0 0 32px;
	line-height: 1.2;
}

.ndnr-search-heading em {
	font-style: normal;
	color: var(--ndnr-blue);
}

/* ── Result Sections ────────────────────────────────────────────────────────── */
.ndnr-results-section {
	margin-bottom: 48px;
	padding-bottom: 32px;
	border-bottom: 2px solid var(--ndnr-border-lg);
}

.ndnr-results-section:last-child {
	border-bottom: none;
}

/* Section Title (H2) */
.ndnr-section-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--ndnr-charcoal);
	margin: 0 0 24px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ndnr-blue);
}

/* ── Category Group ─────────────────────────────────────────────────────────── */
.ndnr-category-group {
	margin-bottom: 32px;
}

/* Category Title (H3) */
.ndnr-category-title {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--ndnr-charcoal);
	margin: 0 0 12px;
}

.ndnr-category-link {
	color: var(--ndnr-blue);
	text-decoration: none;
	transition: color var(--ndnr-transition);
}

.ndnr-category-link:hover,
.ndnr-category-link:focus-visible {
	color: #0a4a84;
	text-decoration: underline;
}

/* ── Posts List ─────────────────────────────────────────────────────────────── */
.ndnr-posts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ndnr-post-item {
	padding: 16px 0;
	border-bottom: 1px solid var(--ndnr-border-lg);
}

.ndnr-post-item:first-child {
	padding-top: 0;
}

.ndnr-post-item:last-child {
	border-bottom: none;
}

/* Post Title (H4 — desktop 17px, mobile 16px) */
.ndnr-post-title {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--ndnr-charcoal);
	margin: 0 0 6px;
}

.ndnr-post-title a {
	color: var(--ndnr-blue);
	text-decoration: none;
	transition: color var(--ndnr-transition);
}

.ndnr-post-title a:hover,
.ndnr-post-title a:focus-visible {
	color: #0a4a84;
	text-decoration: underline;
}

/* Meta — Date & Author */
.ndnr-post-meta {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: var(--ndnr-brown);
	margin: 0 0 8px;
}

.ndnr-meta-date,
.ndnr-meta-author {
	color: var(--ndnr-brown);
}

/* Excerpt */
.ndnr-post-excerpt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: var(--ndnr-charcoal);
	line-height: 1.7;
	margin: 0 0 10px;
}

/* Read More */
.ndnr-read-more {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--ndnr-white);
	background-color: var(--ndnr-blue);
	padding: 6px 14px;
	border-radius: var(--ndnr-radius);
	text-decoration: none;
	transition: background-color var(--ndnr-transition);
	min-height: 36px;
	line-height: 2;
}

.ndnr-read-more:hover,
.ndnr-read-more:focus-visible {
	background-color: #0a4a84;
	color: var(--ndnr-white);
	outline: 2px solid var(--ndnr-blue);
	outline-offset: 2px;
}

/* ── Other Content Items ────────────────────────────────────────────────────── */
.ndnr-other-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ndnr-other-item {
	padding: 16px 0;
	border-bottom: 1px solid var(--ndnr-border-lg);
}

.ndnr-other-item:last-child {
	border-bottom: none;
}

/* ── Load More Button ───────────────────────────────────────────────────────── */
.ndnr-load-more {
	display: block;
	margin: 24px auto 0;
	padding: 13px 36px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--ndnr-blue);
	background-color: var(--ndnr-panel);
	border: 2px solid var(--ndnr-blue);
	border-radius: var(--ndnr-radius);
	cursor: pointer;
	text-align: center;
	transition: background-color var(--ndnr-transition), color var(--ndnr-transition);
	min-height: 48px;
}

.ndnr-load-more:hover,
.ndnr-load-more:focus-visible {
	background-color: var(--ndnr-blue);
	color: var(--ndnr-white);
	outline: 2px solid var(--ndnr-blue);
	outline-offset: 2px;
}

.ndnr-load-more:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ndnr-load-more.ndnr-loading::after {
	content: ' …';
	display: inline;
}

/* ── Responsive — Mobile (≤ 640px) ─────────────────────────────────────────── */
@media (max-width: 640px) {
	.ndnr-search-wrap {
		padding: 0 12px 32px;
	}

	/* H1 — 29px on mobile */
	.ndnr-search-heading {
		font-size: 29px;
		margin-bottom: 24px;
	}

	/* H2 — 23px on mobile */
	.ndnr-section-title {
		font-size: 23px;
	}

	/* H3 Category — 18px on mobile */
	.ndnr-category-title {
		font-size: 18px;
	}

	/* Post title — 16px on mobile */
	.ndnr-post-title {
		font-size: 16px;
	}

	/* Excerpt — 16px on mobile */
	.ndnr-post-excerpt {
		font-size: 16px;
	}

	/* Search button — full width on very small screens */
	.ndnr-search-form__inner {
		flex-direction: column;
	}

	.ndnr-search-form__button {
		justify-content: center;
	}

	/* Increase touch target */
	.ndnr-read-more,
	.ndnr-category-link {
		padding: 10px 16px;
	}
}