/**
 * NWST Custom CSS – WordPress-specific overrides and additions
 * @package NWST
 */

/* ──────────────────────────────────────────────
   WordPress Alignments
────────────────────────────────────────────── */
.alignleft  { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 0 auto 1em; }
.alignwide  { margin: 0 -2rem; max-width: calc(100% + 4rem); }
.alignfull  { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw; }

/* ──────────────────────────────────────────────
   Pagination
────────────────────────────────────────────── */
.nav-links { display: flex; gap: 0.5rem; justify-content: center; margin: 2rem 0; }
.nav-links .page-numbers { padding: 0.5rem 1rem; border: 1px solid currentColor; border-radius: 4px; text-decoration: none; }
.nav-links .page-numbers.current { background: var(--color-primary, #4a7c4e); color: #fff; border-color: transparent; }

/* ──────────────────────────────────────────────
   Admin Bar offset
────────────────────────────────────────────── */
.admin-bar .top-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .top-header { top: 46px; } }

/* ──────────────────────────────────────────────
   Gallery lightbox placeholder
────────────────────────────────────────────── */
.gallery-lightbox { display: block; overflow: hidden; position: relative; }
.gallery-overlay  { opacity: 0; position: absolute; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; padding: 1rem; transition: opacity .2s; }
.gallery-lightbox:hover .gallery-overlay { opacity: 1; }
.gallery-caption  { color: #fff; font-size: .9rem; }

/* ──────────────────────────────────────────────
   Forms
────────────────────────────────────────────── */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-2 .col-span-2 { grid-column: span 2; }
.form-grid-2 label { display: block; font-weight: 500; margin-bottom: 4px; font-size: .9rem; }
.form-grid-2 input,
.form-grid-2 textarea,
.form-grid-2 select { width: 100%; border: 1px solid #e5e7eb; border-radius: 6px; padding: .4rem .75rem; background: #f9fafb; }
@media (max-width: 600px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-grid-2 .col-span-2 { grid-column: span 1; }
}

/* ──────────────────────────────────────────────
   Team grid
────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2rem; margin-top: 2rem; }
.team-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.team-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.team-info { padding: 1rem 1.25rem 1.25rem; }
.team-position { font-weight: 600; font-size: .9rem; opacity: .75; }
.team-dept { opacity: .6; margin-top: 2px; }
.team-bio { font-size: .9rem; margin-top: .75rem; }
.team-linkedin img { width: 24px; margin-top: .5rem; opacity: .7; }
.team-linkedin:hover img { opacity: 1; }

/* ──────────────────────────────────────────────
   Event single
────────────────────────────────────────────── */
.event-meta-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.event-date-badge { background: var(--color-primary, #4a7c4e); color: #fff; border-radius: 8px; padding: .5rem .75rem; text-align: center; line-height: 1.2; }
.event-date-badge strong { display: block; font-size: 1.5rem; }
.event-details-list { margin: 1rem 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.event-detail-item { padding: .5rem 0; }
.event-featured-image { margin: 1.5rem 0; border-radius: 12px; overflow: hidden; }
.event-featured-image img { width: 100%; }
.event-register { margin: 2rem 0; }
.event-map { margin: 2rem 0; }
.map-embed iframe { width: 100%; height: 350px; border-radius: 8px; }

/* ──────────────────────────────────────────────
   Story single
────────────────────────────────────────────── */
.story-cats { margin-bottom: .5rem; }
.story-cat { background: #f3f3f3; padding: .25rem .6rem; border-radius: 4px; font-size: .8rem; margin-right: .25rem; }
.single-story .story-date { opacity: .6; font-size: .9rem; margin-bottom: .5rem; }
.story-featured-image { margin: 1.5rem 0; border-radius: 12px; overflow: hidden; }
.story-featured-image img { width: 100%; }

/* ──────────────────────────────────────────────
   Contact grid
────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-campus { margin-bottom: 2rem; }
.contact-info-list { list-style: none; padding: 0; }
.contact-info-list li { margin-bottom: .5rem; }

/* ──────────────────────────────────────────────
   Footer menu — 3-column grid layout
   Each <ul> = one column; sub-items shown flat
────────────────────────────────────────────── */
.footer-menu > ul {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-menu > ul > li > a {
    font-weight: 700;
    display: block;
    padding: 4px 0;
}

.footer-menu > ul > li > ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.footer-menu > ul > li > ul > li > a {
    display: block;
    padding: 2px 0;
    font-weight: 400;
}

/* 3rd level (grandchildren) — slightly indented */
.footer-menu > ul > li > ul > li > ul {
    list-style: none;
    padding: 0 0 0 12px;
    margin: 0;
}

.footer-menu > ul > li > ul > li > ul > li > a {
    display: block;
    padding: 1px 0;
    font-size: 0.9em;
    opacity: 0.8;
}

/* Social icons in footer — show fallback icons even without URLs */
footer .flex.gap-x-4 a {
    display: inline-flex;
    align-items: center;
}

/* Policy links row */
footer .flex.gap-6 a {
    white-space: nowrap;
}

/* ──────────────────────────────────────────────
   Prose / WYSIWYG typography
   Applied to .prose (article editor content)
   Mirrors Tailwind Typography @tailwindcss/typography
   without requiring the plugin.
────────────────────────────────────────────── */
.prose {
    color: inherit;
    line-height: 1.75;
}
.prose p   { margin-bottom: 1.25em; }
.prose h2  { font-size: 1.5rem;  font-weight: 700; margin: 1.8em 0 .6em; color: var(--color-primary, #2E6B7A); }
.prose h3  { font-size: 1.25rem; font-weight: 700; margin: 1.5em 0 .5em; color: var(--color-walgreen, #4A7C4E); }
.prose h4  { font-size: 1.1rem;  font-weight: 700; margin: 1.2em 0 .4em; }
.prose ul  { list-style: disc;   padding-left: 1.5em; margin-bottom: 1.25em; }
.prose ol  { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.25em; }
.prose li  { margin-bottom: .4em; }
.prose strong { font-weight: 700; }
.prose em     { font-style: italic; }
.prose a      { color: var(--color-primary, #2E6B7A); text-decoration: underline; }
.prose a:hover { opacity: .8; }
.prose blockquote {
    border-left: 4px solid var(--color-walgreen, #4A7C4E);
    padding: .5em 1.25em;
    margin: 1.5em 0;
    font-style: italic;
    color: #555;
    background: rgba(74,124,78,.06);
    border-radius: 0 8px 8px 0;
}
.prose img {
    max-width: 100%;
    border-radius: 12px;
    margin: 1.5em auto;
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.prose hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2em 0;
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
}
.prose th, .prose td {
    border: 1px solid #e5e7eb;
    padding: .5rem .75rem;
    text-align: left;
}
.prose th {
    background: var(--color-lazure, #e8f4f5);
    font-weight: 700;
}
.prose-lg { font-size: 1.125rem; }

/* Fix: this build's compiled Tailwind output doesn't include a bare
   `.max-w-none` utility (only `lg:max-w-none`), so `.prose.max-w-none`
   in template markup was silently still constrained to .prose's own
   max-width: 65ch. This restores the intended "no max-width" behavior
   wherever `.prose.max-w-none` is used (e.g. modals, full-width articles). */
.prose.max-w-none {
	max-width: none;
}

/* ──────────────────────────────────────────────
   Admissions — 3-step process cards
────────────────────────────────────────────── */
.adm-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 1.5rem 0;
}
@media (max-width: 767px) {
	.adm-steps-grid {
		grid-template-columns: 1fr;
	}
}

.adm-step-card {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	isolation: isolate;
	min-height: 200px;
}

.adm-step-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0.5;
	mix-blend-mode: multiply;
}

.adm-step-inner {
	padding: 2rem 1.5rem;
	text-align: center;
}

.adm-step-num {
	display: block;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary, #2E6B7A);
	margin-bottom: 0.5rem;
}

.adm-step-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-walgreen, #4A7C4E);
	margin: 0.5rem 0;
}

.adm-step-inner p {
	font-size: 0.95rem;
	color: #444;
	margin: 0;
}

/* ──────────────────────────────────────────────
   Our History — year badge on timeline cards
────────────────────────────────────────────── */
.history-year-badge {
	position: absolute;
	top: -0.875rem;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: var(--color-primary, #2E6B7A);
	color: #fff !important;
	padding: 0.15rem 0.75rem;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	z-index: 1;
}

/* ──────────────────────────────────────────────
   Work with Us — vacancy / tender list
────────────────────────────────────────────── */
.wwu-list {
	list-style: none;
	padding: 0;
	margin: 2rem 0;
	border-top: 1px solid rgba(0,0,0,.08);
	border-bottom: 1px solid rgba(0,0,0,.08);
}

.wwu-list li {
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.wwu-list li:last-child { border-bottom: none; }

.wwu-list-item {
	display: block;
	padding: 1rem 0.5rem;
	text-decoration: none !important;
	transition: color .15s;
}
.wwu-list-item:hover .wwu-list-title {
	color: var(--color-primary, #2E6B7A);
}

.wwu-list-title {
	font-size: 1.6rem;
	font-weight: 400;
	color: inherit;
	margin: 0 0 0.4rem;
	line-height: 1.2;
	transition: color .15s;
}

.wwu-list-meta {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
	font-size: 0.9rem;
	color: #888;
}

.wwu-download {
	color: var(--color-walgreen, #4A7C4E);
	font-weight: 600;
}

.wwu-empty {
	color: #888;
	font-style: italic;
	margin: 2rem 0;
}

/* ──────────────────────────────────────────────
   Single Vacancy — meta strip & apply CTA
────────────────────────────────────────────── */
.vacancy-meta-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
	margin-bottom: 0.5rem;
}

.vacancy-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	font-weight: 500;
}

.vacancy-badge svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.vacancy-badge--type {
	background: var(--color-lazure, #e8f4f5);
	color: var(--color-primary, #2E6B7A);
}

.vacancy-badge--location {
	background: #f0f4f8;
	color: #555;
}

.vacancy-badge--deadline {
	background: var(--color-orange-light, #FAE8DC);
	color: var(--color-walorange, #C0531A);
}

.vacancy-apply-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	background: #fff;
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.vacancy-apply-cta h3 { margin: 0 0 0.4rem; }
.vacancy-apply-cta p  { margin: 0; color: #666; }

.vacancy-apply-buttons {
	display: flex;
	gap: 0.75rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.vacancy-apply-cta { flex-direction: column; }
	.vacancy-meta-strip .ml-auto { margin-left: 0; width: 100%; }
}

/* ── CF7 field styling inside the dark panel ── */
.contact-form-panel .wpcf7 label,
.contact-form-panel .wpcf7-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	margin-bottom: 0.25rem;
}

.contact-form-panel .wpcf7 input[type="text"],
.contact-form-panel .wpcf7 input[type="email"],
.contact-form-panel .wpcf7 input[type="tel"],
.contact-form-panel .wpcf7 input[type="url"],
.contact-form-panel .wpcf7 select,
.contact-form-panel .wpcf7 textarea {
	display: block;
	width: 100%;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 0.375rem;
	padding: 0.375rem 0.75rem;
	font-size: 0.95rem;
	color: #111;
	margin-bottom: 0;
	box-sizing: border-box;
}

.contact-form-panel .wpcf7 input:focus,
.contact-form-panel .wpcf7 textarea:focus {
	outline: 2px solid var(--color-primary, #2E6B7A);
	outline-offset: 1px;
}

.contact-form-panel .wpcf7 textarea {
	min-height: 8rem;
	resize: vertical;
}

/* CF7 form grid — mirror the design's 6-column grid */
.contact-form-panel .wpcf7-form p {
	margin-bottom: 1rem;
	color: #fff;
}

/* Submit button */
.contact-form-panel .wpcf7 input[type="submit"],
.contact-form-panel .wpcf7 .wpcf7-submit {
	background: var(--color-waldark, #1E2B3C);
	color: #fff;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	padding: 0.75rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, border-color .2s;
	margin-top: 0.5rem;
}
.contact-form-panel .wpcf7 input[type="submit"]:hover,
.contact-form-panel .wpcf7 .wpcf7-submit:hover {
	background: #0f1a26;
}

/* CF7 response messages */
.contact-form-panel .wpcf7-response-output {
	border: 1px solid rgba(255,255,255,.3) !important;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin-top: 1rem;
	color: #fff !important;
	font-size: 0.9rem;
}
.contact-form-panel .wpcf7-mail-sent-ok {
	background: rgba(74,124,78,.3) !important;
}
.contact-form-panel .wpcf7-validation-errors,
.contact-form-panel .wpcf7-mail-sent-ng {
	background: rgba(192,83,26,.3) !important;
}

/* CF7 validation error highlight */
.contact-form-panel .wpcf7-not-valid {
	border-color: #f87171 !important;
}
.contact-form-panel .wpcf7-not-valid-tip {
	color: #fca5a5;
	font-size: 0.8rem;
	display: block;
	margin-top: 2px;
}

/* CF7 missing plugin notice */
.contact-cf7-missing {
	background: rgba(255,255,255,.1);
	border: 1px dashed rgba(255,255,255,.4);
	border-radius: 8px;
	padding: 1.5rem;
	color: #fff;
	text-align: center;
}
.contact-cf7-missing p { margin-bottom: 1rem; }

/* ──────────────────────────────────────────────
   Contact Us — detail rows
────────────────────────────────────────────── */
.contact-detail-row {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 0.5rem 0;
}

.contact-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	color: var(--color-primary, #2E6B7A);
	opacity: .5;
	margin-top: 2px;
}

/* ──────────────────────────────────────────────
   Contact Us — dark gradient form panel
────────────────────────────────────────────── */
.contact-form-panel {
	/* Matches the design's: bg-gradient-to-l from-walblue-600 to-walblue */
	background: linear-gradient(to left, var(--color-walblue-600, #245f87), var(--color-walblue, #2E7DAE));
	border-radius: 1rem 1rem 0 0;
	padding: 3rem;
	max-width: 48rem;
	margin: 0 auto;
}

@media (max-width: 640px) {
	.contact-form-panel { padding: 1.75rem 1.25rem; }
}

.contact-form-heading {
	color: #fff !important;
	margin: 0 0 0.75rem;
}

.contact-form-divider {
	border: none;
	border-top: 1px solid rgba(255,255,255,.3);
	margin-bottom: 1.5rem;
}

/* ── CF7 field wrapper ── */
.contact-cf7-wrap .wpcf7-form {
	color: #fff;
}

/* Labels */
.contact-cf7-wrap .wpcf7-form label {
	display: block;
	color: rgba(255,255,255,0.9);
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
	width: 100%;
}
.contact-cf7-wrap .wpcf7-form label br,
.contact-cf7-wrap .wpcf7-form p > br:first-child,
.contact-cf7-wrap .wpcf7-form p > br {
	display: none;
}

/* All text inputs, selects, textarea */
.contact-cf7-wrap .wpcf7-form input[type="text"],
.contact-cf7-wrap .wpcf7-form input[type="email"],
.contact-cf7-wrap .wpcf7-form input[type="tel"],
.contact-cf7-wrap .wpcf7-form input[type="url"],
.contact-cf7-wrap .wpcf7-form input[type="number"],
.contact-cf7-wrap .wpcf7-form select,
.contact-cf7-wrap .wpcf7-form textarea {
	display: block;
	width: 100%;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 0.375rem;
	padding: 0.375rem 0.75rem;
	font-size: 0.9rem;
	color: #111;
	box-sizing: border-box;
	margin-top: 0.25rem;
}

.contact-cf7-wrap .wpcf7-form input:focus,
.contact-cf7-wrap .wpcf7-form textarea:focus,
.contact-cf7-wrap .wpcf7-form select:focus {
	outline: 2px solid rgba(255,255,255,.5);
	outline-offset: 1px;
}

.contact-cf7-wrap .wpcf7-form textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Submit button */
.contact-cf7-wrap .wpcf7-form input[type="submit"],
.contact-cf7-wrap .wpcf7-submit {
	background: #0f1a26;
	color: #fff;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	padding: 0.75rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	margin-top: 1rem;
	transition: background .15s;
}

.contact-cf7-wrap .wpcf7-form input[type="submit"]:hover,
.contact-cf7-wrap .wpcf7-submit:hover {
	background: #000;
}

/* CF7 response messages */
.contact-cf7-wrap .wpcf7-response-output {
	border: 1px solid rgba(255,255,255,.3) !important;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin-top: 1rem;
	color: #fff !important;
	font-size: 0.9rem;
}
.contact-cf7-wrap .wpcf7-mail-sent-ok {
	background: rgba(74,124,78,.4) !important;
}
.contact-cf7-wrap .wpcf7-validation-errors,
.contact-cf7-wrap .wpcf7-mail-sent-ng {
	background: rgba(192,83,26,.4) !important;
}

/* CF7 validation tip */
.contact-cf7-wrap .wpcf7-not-valid {
	border-color: #f87171 !important;
}
.contact-cf7-wrap .wpcf7-not-valid-tip {
	color: #fca5a5;
	font-size: 0.78rem;
	display: block;
	margin-top: 2px;
}

/* ── CF7 2-column grid layout ──
   CF7 outputs <p> tags per field.
   We add .half class in CF7 form builder to mark 2-column fields,
   and use grid for the overall layout.
   Fallback: all fields full-width (safe for all browsers). ── */
.contact-cf7-wrap .wpcf7-form > p {
	margin: 0;
	grid-column: span 2;
}

/* The CF7 form itself as a 2-column grid */
.contact-cf7-wrap .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1rem;
	align-items: start;
}

/* Half-width fields: add class="half" to the CF7 form tag for first/last name, phone/country */
.contact-cf7-wrap .wpcf7-form > p.half {
	grid-column: span 1;
}

/* Response output full width */
.contact-cf7-wrap .wpcf7-form > .wpcf7-response-output {
	grid-column: span 2;
}

@media (max-width: 640px) {
	.contact-cf7-wrap .wpcf7-form,
	.contact-cf7-wrap .wpcf7-form > p,
	.contact-cf7-wrap .wpcf7-form > p.half {
		grid-template-columns: 1fr;
		grid-column: span 1;
	}
}

/* Missing CF7 plugin notice */
.contact-cf7-missing {
	background: rgba(255,255,255,.1);
	border: 1px dashed rgba(255,255,255,.4);
	border-radius: 8px;
	padding: 1.5rem;
	color: #fff;
	text-align: center;
}
.contact-cf7-missing p { margin-bottom: 1rem; }

/* ── Map section ── */
.contact-map-section {
	line-height: 0;
}
.contact-map-section iframe {
	display: block;
	width: 100%;
}

/* ──────────────────────────────────────────────
   Fees Structure — fee tables inside the prose article
────────────────────────────────────────────── */
.fees-article table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.9rem;
}

.fees-article table th,
.fees-article table td {
	border: 1px solid #e5e7eb;
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

/* Header rows (first 2 rows of the main fee table) */
.fees-article table tr:first-child td,
.fees-article table tr:nth-child(2) td {
	background: var(--color-lazure, #e8f4f5);
	font-weight: 600;
	text-align: center;
}

/* CLASS row */
.fees-article table tr:nth-child(3) td:first-child {
	background: var(--color-primary, #2E6B7A);
	color: #fff;
	font-weight: 700;
}

/* Numeric fee cells — right align for readability */
.fees-article table td:not(:first-child) {
	text-align: center;
}

/* First column (class names) — left align, bold */
.fees-article table td:first-child {
	font-weight: 600;
	white-space: nowrap;
}

/* Responsive — horizontal scroll on small screens instead of squashing */
.fees-article {
	overflow-x: auto;
}
@media (max-width: 640px) {
	.fees-article table {
		font-size: 0.78rem;
		min-width: 600px;
	}
}

/* Section heading spacing inside the long article */
.fees-article h3 {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(0,0,0,.08);
	text-transform: uppercase;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
}
.fees-article h3:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 1rem;
}

.fees-article ol[type="a"] {
	list-style-type: lower-alpha;
}

/* ──────────────────────────────────────────────
   Accordion (Community page)
────────────────────────────────────────────── */
.accordion-group {
	border-top: 1px solid rgba(0,0,0,.08);
}

.accordion-group dt {
	border-bottom: 1px solid rgba(0,0,0,.08);
}

.accordion-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-primary, #2E6B7A);
	padding: 1.25rem 0.5rem;
	cursor: pointer;
}

.accordion-button::after {
	content: '+';
	font-size: 1.5rem;
	font-weight: 400;
	color: #999;
	transition: transform .2s;
	flex-shrink: 0;
	margin-left: 1rem;
}

.accordion-group dt.is-open .accordion-button::after {
	content: '−';
}

.accordion-content {
	display: none;
	padding: 0 0.5rem 1.5rem;
	color: #555;
}

.accordion-content p {
	margin-bottom: 0.75rem;
}

/* ──────────────────────────────────────────────
   Stories / Events list rows
────────────────────────────────────────────── */
.text-3xl {
	font-size: 1.875rem;
	line-height: 1.2;
	margin: 0.5rem 0 0;
}

ul.divide-y > li + li {
	border-top: 1px solid rgba(0,0,0,.08);
}

/* Pagination styling */
nav[aria-label="Pagination"] a {
	text-decoration: none;
	color: inherit;
}
nav[aria-label="Pagination"] svg {
	display: inline-block;
	vertical-align: middle;
}

/* ──────────────────────────────────────────────
   Single Event — tag badge + meta strip
────────────────────────────────────────────── */
.event-tag-badge {
	display: inline-block;
	background: rgba(255,255,255,.25);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}

.event-meta-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.event-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	color: #444;
}

.event-meta-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	color: var(--color-primary, #2E6B7A);
	opacity: .7;
}

.event-meta-cta {
	margin-left: auto;
}

@media (max-width: 640px) {
	.event-meta-cta { margin-left: 0; width: 100%; text-align: center; }
}

.event-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

.event-map-embed iframe {
	width: 100%;
	height: 350px;
	border: 0;
	border-radius: 12px;
}

/* ──────────────────────────────────────────────
   Single Story — meta strip
────────────────────────────────────────────── */
.story-meta-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: 0.9rem;
	color: #888;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(0,0,0,.08);
}

.story-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ──────────────────────────────────────────────
   Missing Tailwind utilities
   The compiled styles.css was purged based only on classes
   present in the designer's static HTML files. Templates built
   afterwards (Events/Stories archives) use a few additional
   responsive utilities that never made it into that build.
   Added here manually with the same 1024px "lg" breakpoint.
────────────────────────────────────────────── */
@media (min-width: 1024px) {
	.lg\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lg\:gap-12 {
		gap: 3rem;
	}
	.lg\:gap-x-24 {
		column-gap: 6rem;
	}
}
@media (min-width: 1024px) {
	.lg\:px-12 {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

/* ──────────────────────────────────────────────
   Contact — map tab switcher
────────────────────────────────────────────── */
.contact-map-tabs {
	display: flex;
	gap: 0;
	background: #1D3557;
}

.contact-map-tab {
	flex: 1;
	padding: 0.75rem 1.5rem;
	background: none;
	border: none;
	color: rgba(255,255,255,.65);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	transition: color .15s, border-color .15s;
}

.contact-map-tab:hover {
	color: #fff;
}

.contact-map-tab.is-active {
	color: #fff;
	border-bottom-color: var(--color-walorange, #C0531A);
}

.contact-map-panel iframe {
	display: block;
	width: 100%;
}

/* ── AJAX form status states (Schedule a Visit / Contact popups) ── */
.nwst-form-status {
	display: none;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.nwst-form-status--loading {
	background: #f3f4f6;
	color: #374151;
}

.nwst-form-status--success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.nwst-form-status--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.nwst-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: nwst-spin 0.65s linear infinite;
	flex-shrink: 0;
	vertical-align: -3px;
}

@keyframes nwst-spin {
	to { transform: rotate(360deg); }
}

.nwst-field-error {
	border-color: #ef4444 !important;
	background-color: #fef2f2 !important;
}

.nwst-field-error-msg {
	margin: 0;
}

/* ──────────────────────────────────────────────
   Contact Us page — native AJAX form
   (replaces the old Contact Form 7 embed; same
   visual language as .contact-form-panel/.contact-cf7-wrap)
────────────────────────────────────────────── */
.nwst-contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1rem;
	align-items: start;
}

.nwst-cf-field {
	grid-column: span 2;
	margin: 0 0 1rem;
}

.nwst-cf-field.half {
	grid-column: span 1;
}

.nwst-contact-form label {
	display: block;
	color: rgba(255,255,255,0.9);
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
}

.nwst-contact-form input,
.nwst-contact-form select,
.nwst-contact-form textarea {
	display: block;
	width: 100%;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.9rem;
	color: #111;
	box-sizing: border-box;
}

.nwst-contact-form input:focus,
.nwst-contact-form select:focus,
.nwst-contact-form textarea:focus {
	outline: 2px solid rgba(255,255,255,.5);
	outline-offset: 1px;
}

.nwst-contact-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.nwst-cf-submit {
	background: #0f1a26;
	color: #fff;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	padding: 0.75rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}

.nwst-cf-submit:hover {
	background: #000;
}

/* Response banner sits full-width in the 2-col grid */
.nwst-cf-response {
	grid-column: span 2;
}

.nwst-cf-response.nwst-form-status--success,
.nwst-cf-response.nwst-form-status--error,
.nwst-cf-response.nwst-form-status--loading {
	color: #fff;
	border-color: rgba(255,255,255,.3);
}
.nwst-cf-response.nwst-form-status--success { background: rgba(74,124,78,.4); }
.nwst-cf-response.nwst-form-status--error   { background: rgba(192,83,26,.4); }
.nwst-cf-response.nwst-form-status--loading { background: rgba(255,255,255,.15); }

/* Field-level validation errors (light text needed on the dark panel) */
.nwst-contact-form .nwst-field-error {
	border-color: #f87171 !important;
	background-color: #fff5f5 !important;
}
.nwst-contact-form .nwst-field-error-msg {
	color: #fca5a5;
	font-size: 0.78rem;
}

@media (max-width: 640px) {
	.nwst-contact-form,
	.nwst-cf-field,
	.nwst-cf-field.half {
		grid-template-columns: 1fr;
		grid-column: span 1;
	}
}

/* ──────────────────────────────────────────────
   Social share buttons (Stories / Events / Gallery)
────────────────────────────────────────────── */
.nwst-share-buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1rem 0;
}
.nwst-share-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #666;
	margin-right: 0.15rem;
}
.nwst-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 9999px;
	background: #f0f0f0;
	color: #333;
	border: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .15s;
	padding: 0;
}
.nwst-share-btn svg {
	width: 1.1rem;
	height: 1.1rem;
}
.nwst-share-btn:hover {
	transform: translateY(-1px);
	color: #fff;
}
.nwst-share-btn.nwst-share-facebook:hover  { background-color: #1877F2; }
.nwst-share-btn.nwst-share-whatsapp:hover  { background-color: #25D366; }
.nwst-share-btn.nwst-share-x:hover         { background-color: #000; }
.nwst-share-btn.nwst-share-linkedin:hover  { background-color: #0A66C2; }
.nwst-share-btn.nwst-share-instagram:hover { background-color: #C13584; }

.nwst-share-copied {
	font-size: 0.78rem;
	color: var(--color-primary, #2E6B7A);
	font-weight: 600;
	opacity: 0;
	transition: opacity .2s;
}
.nwst-share-copied.is-visible {
	opacity: 1;
}

/* Gallery album share row */
.nwst-gallery-album-share {
	margin-top: 0.75rem;
}

/* Testimonial section — large image swaps with the active slide */
#testimonial-active-image {
	transition: opacity .25s ease-in-out;
}