/* ==========================================================================
   Startup Nest — base.css
   Reset, layout, header, navigation, buttons, footer, modals, notices.
   Declarations are ported from the legacy index.php / contact.php styles;
   only the selectors are re-prefixed with `sn-`.
   ========================================================================== */

/* ------------ RESET ------------ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sn-font-body, 'Inter', sans-serif);
	background: var(--sn-surface, #FFFFFF);
	color: var(--sn-ink, #383331);
}

img,
video {
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--sn-primary, #864622);
}

button {
	font-family: inherit;
}

:focus-visible {
	outline: 2px solid var(--sn-primary, #864622);
	outline-offset: 2px;
}

/* ------------ LAYOUT ------------ */
.sn-container {
	width: 88%;
	max-width: var(--sn-container, 1280px);
	margin: 0 auto;
}

.sn-main {
	display: block;
}

.sn-section {
	padding: 50px 0;
}

.sn-section--center {
	text-align: center;
}

/* The post_class() wrapper emitted by page.php and single.php. Holds long-form
   copy at a readable measure inside the much wider `.sn-container`. */
.sn-page-content {
	max-width: 860px;
	margin: 0 auto;
}

.sn-page-title {
	font-family: var(--sn-font-display, 'El Messiri', sans-serif);
	font-size: 42px;
	font-weight: 600;
	color: var(--sn-footer, #844521);
	line-height: 1.2;
	margin-bottom: 22px;
}

.sn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.sn-card {
	background: var(--sn-surface, #FFFFFF);
	border: 1px solid var(--sn-border, #e9e9e9);
	border-radius: var(--sn-radius, 12px);
	box-shadow: var(--sn-shadow, 0 4px 14px rgba(0, 0, 0, .08));
	padding: 24px;
}

.sn-card__media img {
	border-radius: 8px;
	display: block;
	margin-bottom: 16px;
}

.sn-card__title {
	font-family: var(--sn-font-display, 'El Messiri', sans-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--sn-primary, #864622);
	margin-bottom: 8px;
}

.sn-card__title a {
	color: inherit;
	text-decoration: none;
}

.sn-card__meta,
.sn-entry__meta {
	font-size: 14px;
	color: var(--sn-muted, #555555);
	margin-bottom: 12px;
}

.sn-card__excerpt,
.sn-entry {
	font-size: 15px;
	line-height: 1.6;
	color: var(--sn-muted, #555555);
}

.sn-entry p,
.sn-entry ul,
.sn-entry ol {
	margin-bottom: 16px;
}

.sn-entry ul,
.sn-entry ol {
	padding-left: 22px;
}

.sn-entry h2,
.sn-entry h3 {
	font-family: var(--sn-font-display, 'El Messiri', sans-serif);
	color: var(--sn-primary, #864622);
	margin: 24px 0 12px;
}

.sn-entry__media img {
	border-radius: var(--sn-radius, 12px);
	display: block;
	margin-bottom: 24px;
}

.sn-pagelinks,
.sn-backlink {
	display: block;
	margin: 20px 0;
	font-size: 15px;
}

.pagination,
.post-navigation {
	margin-top: 34px;
	font-size: 15px;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	margin-right: 6px;
	border-radius: 6px;
	text-decoration: none;
	color: var(--sn-ink, #383331);
	background: var(--sn-bg, #EEEEEE);
}

.pagination .page-numbers.current {
	background: var(--sn-primary, #864622);
	color: #FFF;
}

/* ------------ HEADER ------------ */
.sn-header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--sn-bg, #EEEEEE);
	z-index: 999;
}

.sn-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
}

.sn-logo,
.sn-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--sn-ink, #383331);
	font-family: var(--sn-font-display, 'El Messiri', sans-serif);
	font-size: 22px;
	font-weight: 700;
}

.sn-logo img,
.sn-header .custom-logo-link img {
	height: 70px;
	width: auto;
	object-fit: contain;
}

.sn-nav__menu ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.sn-nav__menu a {
	text-decoration: none;
	color: var(--sn-ink, #383331);
	font-weight: 500;
	font-size: 15px;
	transition: .25s;
}

.sn-nav__menu a:hover {
	color: var(--sn-primary, #864622);
}

.sn-nav__menu .current-menu-item > a,
.sn-nav__menu .current_page_item > a,
.sn-nav__menu a.active {
	color: var(--sn-primary, #864622);
	font-weight: 600;
}

/* The nav CTA keeps the button colours. */
.sn-nav__menu a.sn-btn--brown,
.sn-nav__menu a.sn-btn--brown:hover,
.sn-mobile-menu a.sn-btn--brown,
.sn-mobile-menu a.sn-btn--brown:hover {
	color: #FFFFFF;
}

.sn-nav__menu a.sn-btn--black,
.sn-mobile-menu a.sn-btn--black {
	color: #FFFFFF;
}

/* ------------ HAMBURGER ------------ */
.sn-hamburger {
	display: none;
	background: none;
	border: none;
	font-size: 30px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	color: var(--sn-ink, #383331);
}

/* ------------ MOBILE MENU ------------ */
.sn-mobile-menu {
	display: none;
	flex-direction: column;
	background: var(--sn-bg, #EEEEEE);
	padding: 18px 0 24px;
	width: 100%;
	animation: sn-slide-down .3s ease forwards;
}

.sn-mobile-menu.is-open,
.sn-mobile-menu.is-active,
.sn-mobile-menu.show {
	display: flex;
}

.sn-mobile-menu[hidden] {
	display: none;
}

.sn-mobile-menu ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
	margin: 0;
	padding: 0;
}

.sn-mobile-menu a {
	color: var(--sn-ink, #383331);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
}

.sn-mobile-menu a:hover {
	color: var(--sn-primary, #864622);
}

.sn-mobile-menu .sn-btn--brown {
	width: 60%;
	margin: 0 auto;
	text-align: center;
}

@keyframes sn-slide-down {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ------------ BUTTONS ------------ */
.sn-btn {
	display: inline-block;
	padding: 10px 24px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 6px;
	border: none;
	text-decoration: none;
	cursor: pointer;
	transition: .3s;
}

.sn-btn + .sn-btn {
	margin-left: 10px;
}

.sn-btn--brown {
	background: var(--sn-primary, #864622);
	color: #FFFFFF;
}

.sn-btn--brown:hover {
	opacity: .9;
}

.sn-btn--black {
	background: var(--sn-ink, #383331);
	color: #FFFFFF;
}

.sn-btn--black:hover {
	background: #222222;
}

.sn-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

/* ------------ FOOTER ------------ */
.sn-footer {
	background: var(--sn-footer, #844521);
	color: #FFFFFF;
	text-align: center;
	padding: 26px 0;
	margin-top: 0;
}

.sn-footer p {
	font-size: 14px;
	opacity: .88;
}

.sn-footer a {
	color: #FFFFFF;
}

/* ------------ MODALS ------------ */
.sn-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.45);
	justify-content: center;
	align-items: center;
	padding: 20px;
	z-index: 9999;
}

.sn-modal.is-open,
.sn-modal.is-active,
.sn-modal[aria-hidden="false"] {
	display: flex;
}

.sn-modal[hidden] {
	display: none;
}

.sn-modal__box {
	background: #FFFFFF;
	padding: 32px 34px 28px;
	border-radius: 14px;
	width: 90%;
	max-width: 360px;
	text-align: center;
	position: relative;
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
	animation: sn-fade-in .25s ease;
}

.sn-modal__box--wide {
	width: 95%;
	max-width: 900px;
	max-height: 85vh;
	overflow-y: auto;
	text-align: left;
	padding: 35px;
}

.sn-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #777777;
	transition: .2s;
}

.sn-modal__close:hover {
	color: #000000;
}

.sn-modal__title {
	font-family: var(--sn-font-display, 'El Messiri', sans-serif);
	color: var(--sn-footer, #844521);
	font-size: 34px;
	margin-bottom: 25px;
	padding-right: 25px;
}

.sn-modal__title--small {
	font-size: 20px;
	margin-bottom: 16px;
	padding-right: 25px;
}

.sn-modal__content h3 {
	font-family: var(--sn-font-display, 'El Messiri', sans-serif);
	color: var(--sn-footer, #844521);
	font-size: 24px;
	margin-top: 25px;
	margin-bottom: 12px;
}

.sn-modal__content p {
	font-size: 15px;
	line-height: 1.8;
	color: var(--sn-muted, #555555);
	margin-bottom: 14px;
}

.sn-modal__content ul {
	padding-left: 22px;
	margin-bottom: 18px;
}

.sn-modal__content li {
	font-size: 15px;
	line-height: 1.8;
	color: var(--sn-muted, #555555);
	margin-bottom: 8px;
}

.sn-modal__content a {
	color: var(--sn-footer, #844521);
	font-weight: 600;
	text-decoration: underline;
}

body.sn-modal-open {
	overflow: hidden;
}

@keyframes sn-fade-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ------------ NOTICES ------------ */
/* Both variants ship: the companion plugin renders a success notice after a
   successful submission and an error notice on validation failure. The box
   metrics repeat on the modifiers so a notice still reads correctly when it
   carries only the modifier class. Colours match the legacy `.success-box` /
   `.error-box` in contact.php. */
.sn-notice,
.snc-notice,
.sn-notice--success,
.snc-notice--success,
.sn-notice--error,
.snc-notice--error {
	padding: 16px 18px;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.5;
}

.sn-notice--success,
.snc-notice--success {
	background: #e8f8e4;
	color: #206520;
	border: 1px solid #b4ebb0;
}

.sn-notice--error,
.snc-notice--error {
	background: #ffeaea;
	color: #a94442;
	border: 1px solid #f5c6cb;
}

.sn-notice a,
.snc-notice a {
	color: inherit;
	text-decoration: underline;
}

/* ------------ SKIP LINK / SCREEN READER TEXT ------------ */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #FFFFFF;
	border-radius: 6px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip: auto !important;
	clip-path: none;
	color: var(--sn-primary, #864622);
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	width: auto;
	left: 6px;
	top: 6px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	z-index: 100000;
}

.sn-skip-link:focus {
	position: fixed;
}

/* ------------ SEARCH FORM ------------ */
.search-form {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 18px 0;
}

.search-form .search-field {
	padding: 12px 14px;
	border: 1px solid #dddddd;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
}

.search-form .search-submit {
	background: var(--sn-primary, #864622);
	color: #FFFFFF;
	border: none;
	padding: 12px 22px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.search-form .search-submit:hover {
	background: var(--sn-primary-dark, #6e381d);
}

/* ------------ SHARED RESPONSIVE ------------ */
@media (max-width: 768px) {
	.sn-nav__menu {
		display: none;
	}

	.sn-hamburger {
		display: block;
	}

	.sn-nav {
		padding: 14px 0;
	}

	.sn-logo img,
	.sn-header .custom-logo-link img {
		height: 56px;
	}

	.sn-page-title {
		font-size: 32px;
	}

	.sn-section {
		padding: 40px 0;
	}

	.sn-modal__box--wide {
		width: 95%;
		padding: 25px 20px;
		max-height: 90vh;
	}

	.sn-modal__title {
		font-size: 28px;
	}

	.sn-modal__content h3 {
		font-size: 20px;
	}

	.sn-modal__content p,
	.sn-modal__content li {
		font-size: 14px;
	}

	.search-form,
	.search-form .search-field,
	.search-form .search-submit {
		width: 100%;
	}
}

/* ------------ MOTION PREFERENCES ------------ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.sn-mobile-menu,
	.sn-modal__box {
		animation: none;
	}

	* {
		transition-duration: .01ms !important;
	}
}