/* ============================================
   Custom Dark Theme Overrides + Top Nav Menu
   Loaded AFTER main.css to override styles.
   ============================================ */

/* ---------- Color palette ----------
   --bg-dark:       page / wrapper background
   --bg-dark-alt:   slightly lighter panels (forms, hover)
   --bg-darker:     header / nav bar
   --text-main:     primary off-white body text
   --text-muted:    secondary muted text
   --border-soft:   subtle borders on dark bg
   --accent:        original template accent color
*/
:root {
	--bg-dark: #1e1e22;
	--bg-dark-alt: #2a2a30;
	--bg-darker: #16161a;
	--text-main: #e8e6e3;
	--text-muted: rgba(232, 230, 227, 0.75);
	--border-soft: rgba(255, 255, 255, 0.12);
	--accent: #47D3E5;
}

/* ---------- Page background ---------- */
body,
body.is-preload {
	background: var(--bg-dark);
}

#wrapper > * {
	background-color: var(--bg-dark) !important;
}

/* ---------- Generic text-heavy sections ---------- */
/* .wrapper.style1 is the white text-block section the template uses for
   the gallery intro, the features/icons grid, the contact form, and the footer. */
.wrapper.style1 {
	background-color: var(--bg-dark) !important;
	color: var(--text-main) !important;
}

.wrapper.style1 h1,
.wrapper.style1 h2,
.wrapper.style1 h3,
.wrapper.style1 h4,
.wrapper.style1 h5,
.wrapper.style1 h6,
.wrapper.style1 strong,
.wrapper.style1 b {
	color: var(--text-main) !important;
}

.wrapper.style1 p,
.wrapper.style1 li,
.wrapper.style1 label,
.wrapper.style1 .caption p {
	color: var(--text-muted) !important;
}

.wrapper.style1 a {
	color: var(--accent);
	border-bottom-color: rgba(71, 211, 229, 0.4);
}

/* ---------- Spotlight sections (image + text) ----------
   The .content panel sits next to an image; on the original template
   it has a white background with black text. */
.spotlight.style1 .content {
	background-color: var(--bg-dark) !important;
	color: var(--text-main) !important;
}

.spotlight.style1 .content h1,
.spotlight.style1 .content h2,
.spotlight.style1 .content h3 {
	color: var(--text-main) !important;
}

.spotlight.style1 .content p {
	color: var(--text-muted) !important;
}

/* ---------- Banner (hero) section ---------- */
.banner.style1 .content {
	background-color: var(--bg-dark) !important;
	color: var(--text-main) !important;
}

.banner.style1 .content h1,
.banner.style1 .content h2,
.banner.style1 .content p,
.banner.style1 .content .major {
	color: var(--text-main) !important;
}

/* ---------- Buttons ----------
   Default buttons were black bg / white text. Invert for dark theme: 
   make them subtle outlined buttons that stand out against dark bg. */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	background-color: transparent !important;
	box-shadow: inset 0 0 0 1px var(--text-main) !important;
	color: var(--text-main) !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	background-color: rgba(71, 211, 229, 0.1) !important;
	box-shadow: inset 0 0 0 1px var(--accent) !important;
	color: var(--accent) !important;
}

.button.primary {
	background-color: var(--accent) !important;
	box-shadow: none !important;
	color: var(--bg-darker) !important;
}

/* ---------- Form inputs ---------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
	background-color: var(--bg-dark-alt) !important;
	border-color: var(--border-soft) !important;
	color: var(--text-main) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
	border-color: var(--accent) !important;
}

input::placeholder,
textarea::placeholder {
	color: rgba(232, 230, 227, 0.4) !important;
}

label {
	color: var(--text-main) !important;
}

/* ---------- Gallery captions ---------- */
.gallery .caption {
	background-color: rgba(22, 22, 26, 0.85) !important;
	color: var(--text-main) !important;
}

.gallery .caption h3 {
	color: var(--text-main) !important;
}

/* ---------- Items grid (icon features) ---------- */
.items.style1 section h3 {
	color: var(--text-main) !important;
}

.items.style1 section p {
	color: var(--text-muted) !important;
}

.items.style1 .icon {
	color: var(--text-main) !important;
}

/* ---------- Footer icons ---------- */
footer.wrapper.style1 .icons a {
	color: var(--text-main) !important;
}

footer.wrapper.style1 .icons a:hover {
	color: var(--accent) !important;
}

/* ---------- Section dividers ---------- */
#wrapper.divided > * {
	border-bottom: 1px solid var(--border-soft);
}

/* ============================================
   TOP NAVIGATION MENU (collapsible)
   ============================================ */

#top-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background-color: rgba(22, 22, 26, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border-soft);
	padding: 0.6rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Left group: hamburger menu + brand */
#top-nav .nav-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Wrapper around the toggle button + dropdown, so the dropdown
   can be positioned relative to the toggle on the left side. */
#top-nav .nav-menu-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

/* Right group: "Contact Us:" label + envelope icon */
#top-nav .nav-right {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

#top-nav .nav-contact-label {
	color: var(--text-main);
	font-size: 0.9rem;
	font-weight: 300;
}

#top-nav .nav-contact-icon {
	color: var(--text-main);
	border-bottom: none;
}

#top-nav .nav-contact-icon:hover {
	color: var(--accent);
}

#top-nav .nav-brand {
	color: var(--text-main);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.9rem;
	text-decoration: none;
	border-bottom: none;
}

#top-nav .nav-toggle {
	background: transparent;
	border: 1px solid var(--border-soft);
	color: var(--text-main);
	width: 42px;
	height: 38px;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: none !important;
}

#top-nav .nav-toggle:hover {
	border-color: var(--accent);
	color: var(--accent) !important;
	background: transparent !important;
}

#top-nav .nav-toggle .bar {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
}

#top-nav .nav-toggle .bar::before,
#top-nav .nav-toggle .bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
}

#top-nav .nav-toggle .bar::before { top: -6px; }
#top-nav .nav-toggle .bar::after  { top:  6px; }

#top-nav .nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 0;
	background-color: rgba(22, 22, 26, 0.98);
	border: 1px solid var(--border-soft);
	border-radius: 6px;
	min-width: 180px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#top-nav.is-open .nav-links {
	display: block;
}

#top-nav .nav-links li {
	margin: 0;
	padding: 0;
}

#top-nav .nav-links a {
	display: block;
	padding: 0.85rem 1.25rem;
	color: var(--text-main);
	text-decoration: none;
	border-bottom: 1px solid var(--border-soft);
	font-size: 0.95rem;
	transition: background-color 0.15s, color 0.15s;
}

#top-nav .nav-links li:last-child a {
	border-bottom: none;
}

#top-nav .nav-links a:hover,
#top-nav .nav-links a.active {
	background-color: rgba(71, 211, 229, 0.1);
	color: var(--accent);
}

/* Push page content down so the fixed nav doesn't cover the banner top.
   The banner is fullscreen-tall, so we only need a small spacer; the
   transparent backdrop lets the banner image still feel edge-to-edge. */
body { padding-top: 0; }

/* ============================================
   VIDEO EMBED (Section Two) — Bunny Stream player
   ============================================ */

/* The spotlight section that holds the video. We let the section size
   itself to its content rather than being driven purely by the text
   block, so a wide 16:9 video doesn't leave big empty bands above/below. */
.spotlight.style1.has-video {
	align-items: center;
}

/* Give the video side more room than the default 35% so a widescreen
   video isn't cramped, and rebalance the text side to match. */
.spotlight.style1.has-video .content {
	width: 50%;
}

.spotlight.style1.has-video .image {
	width: 50%;
	min-width: 0;
	/* Override the template's full-bleed image behaviour: instead of the
	   image stretching to the section height, the .image box now just
	   wraps the 16:9 video and is vertically centred. */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	padding: 2rem;
}

/* 16:9 aspect-ratio wrapper so the iframe always keeps widescreen shape. */
.spotlight.style1.has-video .video-embed-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #000;
	overflow: hidden;
	transition: opacity 0.75s ease-in-out;
	opacity: 1;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Fallback for browsers without aspect-ratio support: padding-top hack. */
@supports not (aspect-ratio: 16 / 9) {
	.spotlight.style1.has-video .video-embed-wrap {
		height: 0;
		padding-top: 56.25%; /* 9 / 16 */
	}
}

.spotlight.style1.has-video.onscroll-image-fade-in.is-inactive .video-embed-wrap {
	opacity: 0;
}

/* The Bunny Stream player iframe fills the 16:9 wrapper. */
.spotlight.style1.has-video .video-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* On stacked/portrait layouts the template puts the image full-width;
   keep the video centred and not overly tall there. */
@media screen and (max-width: 980px) {

	.spotlight.style1.has-video .content,
	.spotlight.style1.has-video .image {
		width: 50%;
	}

}

@media screen and (max-width: 736px) and (orientation: portrait) {

	.spotlight.style1.has-video .content,
	.spotlight.style1.has-video .image {
		width: 100%;
	}

	.spotlight.style1.has-video .image {
		padding: 1.5rem;
	}

}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 1.5rem 3rem;
}

.contact-page .inner {
	max-width: 720px;
	width: 100%;
}

/* ---------- Footer: enquiries label + envelope icon ---------- */

.footer-contact {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.footer-contact-label {
	color: var(--text-main);
	font-size: 0.95rem;
	font-weight: 300;
}

/* Strip the default margin from the icons list when it's grouped with
   the label so the row stays tight. */
.footer-contact .icons {
	margin: 0;
}

.footer-contact .icons li {
	padding-left: 0;
}

/* ---------- Contact form: status + error states ---------- */

.form-status {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 6px;
	border: 1px solid var(--border-soft);
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: left;
}

.form-status--success {
	background-color: rgba(71, 211, 229, 0.08);
	border-color: rgba(71, 211, 229, 0.4);
	color: var(--accent);
}

.form-status--error {
	background-color: rgba(229, 71, 71, 0.08);
	border-color: rgba(229, 71, 71, 0.4);
	color: #ff8a8a;
}

/* Red outline on fields the user needs to fix */
.field.has-error input,
.field.has-error textarea {
	border-color: #ff6b6b !important;
	box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.25) !important;
}

/* ============================================
   RESPONSIVE — narrow screens
   ============================================ */

@media screen and (max-width: 480px) {

	#top-nav {
		padding: 0.6rem 1rem;
	}

	#top-nav .nav-left {
		gap: 0.75rem;
	}

	/* Hide the "Contact Us:" text on small screens — the envelope
	   icon still links to the contact page and saves horizontal space. */
	#top-nav .nav-contact-label {
		display: none;
	}

}