/* ============================================================
   Emerald Opportunities Fund -- consolidated stylesheet
   Shared with emeraldcapital.com.au (rebuilt from the original
   WordPress theme as plain, framework-free CSS3 using Flexbox/Grid).
   Fund-specific additions are at the end of this file.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
	--color-accent: #93a553;
	--color-dark: #1a1a1a;
	--color-nav-bg: #1c1c1c;
	--color-text: #666;
	--color-heading: #333;
	--color-light-bg: #eee;
	--font-body: 'Lato', sans-serif;
	--font-heading: 'Poppins', sans-serif;
	--font-nav: 'Open Sans', sans-serif;
	--font-accent: 'Raleway', sans-serif;
	--container-width: 1140px;
}

/* ---------- Reset / base ---------- */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-text);
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3 {
	font-family: var(--font-heading);
	color: var(--color-heading);
	margin: 0;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

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

.text-justify {
	text-align: justify;
}

.accent {
	color: var(--color-accent);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Spam-bot honeypot field -- hidden from sighted users AND assistive
   tech (unlike .sr-only). Real visitors never see or fill this in. */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.section-heading {
	font-weight: 700;
	font-size: 42px;
	margin: 0 0 50px;
}

.section-intro {
	max-width: 900px;
	margin: 0 auto 40px;
}

.divider {
	background: var(--color-accent);
	width: 75px;
	height: 2px;
	display: block;
	margin: 12px 0 0;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 700;
	border: 2px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

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

.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--color-dark);
}

.btn-outline {
	background: transparent;
	border-color: #c7c7c8;
	color: #fff;
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background: #333;
	border-color: #fff;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	background-color: var(--color-nav-bg);
	transition: background-color .2s linear;
}

.site-header.scrolled {
	background-color: #333;
}

.navbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 15px 20px;
}

.navbar-brand img {
	height: 60px;
	width: auto;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.nav-toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
}

.navbar-collapse {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 6px;
	font-family: var(--font-nav);
}

.nav-menu a {
	display: block;
	padding: 10px 14px;
	font-size: 17px;
	color: #fff;
}

.nav-menu a:hover,
.nav-menu a:focus-visible,
.nav-menu a[aria-current="page"] {
	color: var(--color-accent);
}

.nav-cta a {
	border: 1px solid var(--color-accent);
	color: var(--color-accent) !important;
	padding: 8px 16px;
}

.nav-cta a:hover {
	color: #fff !important;
	border-color: #fff;
}

@media (max-width: 900px) {
	.nav-toggle {
		display: flex;
	}

	.navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		background: var(--color-nav-bg);
		padding: 10px 20px 20px;
		display: none;
	}

	.navbar-collapse.open {
		display: flex;
	}

	.nav-menu {
		flex-direction: column;
		width: 100%;
		gap: 0;
	}

	.nav-menu-secondary {
		border-top: 1px solid #333;
		margin-top: 10px;
		padding-top: 10px;
	}
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
	position: relative;
	height: 100vh;
	min-height: 520px;
	overflow: hidden;
	color: #fff;
}

.hero-media {
	position: absolute;
	inset: 0;
	background: #000;
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-poster-mobile {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .35);
}

.hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

.hero-text {
	max-width: 480px;
	text-align: center;
}

.hero-text h1 {
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 10px;
}

.hero-tagline {
	font-size: 18px;
	margin: 0 0 25px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

@media (max-width: 767px) {
	.hero-video {
		display: none;
	}

	.hero-poster-mobile {
		display: block;
	}

	.hero-content {
		justify-content: center;
	}
}

/* ============================================================
   INNER PAGE MASTHEAD
   The banner used on every page other than the homepage: a short
   title strip with a background photo, similar to the hero but
   static and compact.
   ============================================================ */
.page-masthead {
	position: relative;
	display: flex;
	align-items: center;
	height: 220px;
	margin-top: 90px;
	padding: 0 20px;
	color: #fff;
	background: #222 url("assets/images/masthead.jpg") no-repeat center top;
	background-size: cover;
}

.page-masthead::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

.page-masthead h1 {
	position: relative;
	z-index: 1;
	max-width: var(--container-width);
	margin: 0 auto;
	width: 100%;
	color: #fff;
	font-size: 36px;
	font-weight: 700;
}

/* ============================================================
   PAGE CONTENT (prose pages: About, Corporate Advisory, Asset
   Management, Disclaimer, Terms of Use, Privacy Policy)
   ============================================================ */
.page-content {
	padding: 60px 0;
}

.page-content .prose {
	max-width: 860px;
	margin: 0 auto;
}

.prose h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 40px 0 15px;
}

.prose h2:first-child {
	margin-top: 0;
}

.prose p {
	margin: 0 0 18px;
}

.prose ul {
	margin: 0 0 18px;
	padding-left: 22px;
}

.prose li {
	margin-bottom: 8px;
}

/* ---------- Info card grid (Services / Capital Raising pages) ---------- */
.info-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 10px;
}

.info-card {
	flex: 1 1 300px;
	max-width: 340px;
	background: #fff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .15);
	text-align: center;
}

.info-card .service-icon {
	margin-bottom: 10px;
}

.info-card h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 15px 0;
}

.info-card p {
	margin: 0 0 20px;
}

/* ---------- Contact info row (Contact page) ---------- */
.contact-info-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
	text-align: center;
	margin-top: 40px;
}

.contact-info-row > div {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.contact-info-row .icon-circle {
	background: rgba(147, 165, 83, .15);
	color: var(--color-accent);
}

/* ============================================================
   AUTH FORMS (Client Login / Register)
   Static forms only -- no backend is wired up yet. See script.js.
   ============================================================ */
.auth-section {
	display: flex;
	justify-content: center;
	padding: 60px 20px;
}

.auth-card {
	width: 100%;
	max-width: 440px;
	background: #fff;
	padding: 40px;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 0, 0, .1);
}

.auth-card h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 8px;
	text-align: center;
}

.auth-intro {
	text-align: center;
	margin: 0 0 30px;
	font-size: 16px;
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.auth-form label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-heading);
	margin-bottom: 6px;
}

.auth-form input {
	width: 100%;
	height: 50px;
	padding: 10px 16px;
	font-size: 16px;
	color: #333;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.auth-form input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.auth-form .btn {
	margin-top: 10px;
	width: 100%;
	text-align: center;
}

.auth-links {
	margin-top: 20px;
	text-align: center;
	font-size: 15px;
}

.auth-links a {
	color: var(--color-accent);
	font-weight: 700;
}

.auth-links a:hover,
.auth-links a:focus-visible {
	text-decoration: underline;
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why-choose-us {
	background: var(--color-light-bg);
	padding: 80px 0;
}

.service-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 60px;
}

.service-card {
	flex: 1 1 260px;
	background: #fff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .15);
	text-align: center;
}

.service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 82px;
	margin: 0 auto;
	border-radius: 50%;
	background: #e2e2e2;
	color: var(--color-heading);
	font-size: 32px;
}

.service-card h3 {
	font-size: 24px;
	font-weight: 700;
	margin: 20px 0;
}

.service-card p {
	margin-bottom: 30px;
}

.card-link {
	display: inline-block;
	width: 150px;
	background: var(--color-accent);
	color: #fff;
	padding: 15px 0;
	border-radius: 2px;
}

.card-link:hover,
.card-link:focus-visible {
	background: var(--color-dark);
}

/* ============================================================
   WHO WE ARE
   ============================================================ */
.who-we-are {
	padding: 80px 0;
	font-size: 20px;
}

.who-we-are-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	align-items: center;
}

.who-we-are-text h3 {
	font-size: 30px;
	font-weight: 700;
}

.who-we-are-text p {
	margin: 15px 0;
}

.btn-read-more {
	display: inline-block;
	background: var(--color-accent);
	margin-top: 10px;
}

.btn-read-more span {
	display: inline-block;
	border: 4px solid #fff;
	background: var(--color-accent);
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	padding: 10px 20px;
}

.btn-read-more:hover span,
.btn-read-more:focus-visible span {
	background: var(--color-dark);
}

.who-we-are-image img {
	border-radius: 6px;
}

@media (max-width: 767px) {
	.who-we-are-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

/* ============================================================
   SUBSCRIBE
   ============================================================ */
.subscribe {
	background: var(--color-light-bg);
	padding: 80px 0;
}

.subscribe-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.subscribe-form input[type="email"] {
	width: 380px;
	max-width: 100%;
	height: 55px;
	padding: 10px 20px;
	font-size: 18px;
	color: #333;
	border: 0;
	background: #fff;
}

.subscribe-form .btn {
	height: 55px;
}

/* ============================================================
   CONTACT / HOW TO REACH US
   ============================================================ */
.contact {
	background: #111 url("assets/images/contact-bg.jpg") no-repeat center top;
	background-size: cover;
	padding: 80px 0 0;
	color: #e5e5e5;
}

.contact .section-heading {
	color: #fff;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px;
	margin-bottom: 40px;
}

.contact-details h3,
.contact-form h3 {
	color: #fff;
	font-family: var(--font-accent);
	font-size: 30px;
	font-weight: 500;
	margin-bottom: 30px;
}

.contact-details p {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 20px;
	margin: 15px 0;
}

.contact-details a {
	color: #fff;
}

.icon-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(147, 165, 83, .2);
	color: var(--color-accent);
	font-size: 22px;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.contact-form input {
	height: 55px;
	padding: 10px 20px;
	font-size: 18px;
	color: #333;
	border: 0;
	background: #fff;
}

/* Set by script.js when client-side validation fails. */
.contact-form input[aria-invalid="true"],
.subscribe-form input[aria-invalid="true"] {
	box-shadow: inset 0 0 0 2px #d93025;
}

.contact-form .btn {
	width: 150px;
	margin-top: 10px;
}

.form-message {
	font-size: 15px;
	color: var(--color-accent);
	background: rgba(255, 255, 255, .1);
	padding: 10px 15px;
	border-radius: 4px;
}

@media (max-width: 900px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Footer ---------- */
.site-footer {
	text-align: center;
	padding: 40px 0 30px;
	border-top: 1px solid rgba(255, 255, 255, .15);
}

.social-list {
	display: flex;
	justify-content: center;
	gap: 15px;
	list-style: none;
	margin: 0 0 25px;
	padding: 0;
}

.social-list a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 18px;
}

.social-list a:hover,
.social-list a:focus-visible {
	background: var(--color-accent);
}

.btn-share {
	background: var(--color-accent);
	color: #fff;
	border: 0;
	width: 140px;
	padding: 10px 0;
	font-size: 16px;
	border-radius: 2px;
	cursor: pointer;
	margin-bottom: 20px;
}

.btn-share:hover,
.btn-share:focus-visible {
	background: var(--color-dark);
}

.footnote {
	max-width: 800px;
	margin: 0 auto;
	font-family: var(--font-accent);
	font-size: 13px;
	line-height: 1.7;
}

.footnote a {
	color: #fff;
	text-decoration: underline;
}

.back-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: 25px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background: var(--color-accent);
}

/* ============================================================
   Scroll fade-in animation (vanilla JS toggles .is-visible
   via IntersectionObserver -- see script.js)
   ============================================================ */
.fade-in-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}

.fade-in-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   EMERALD OPPORTUNITIES FUND ADDITIONS
   ============================================================ */
.text-link {
	color: var(--color-accent);
	font-weight: 700;
}

.text-link:hover,
.text-link:focus-visible {
	text-decoration: underline;
}

.prose hr {
	border: 0;
	border-top: 1px solid #ddd;
	margin: 30px 0;
}

/* Information Memorandum PDF viewer */
.pdf-viewer {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 500px;
	margin-top: 30px;
	border: 0;
	box-shadow: 0 0 5px rgba(0, 0, 0, .15);
}

@media (max-width: 480px) {
	.auth-card {
		padding: 30px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fade-in-up {
		opacity: 1;
		transform: none;
		transition: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* ============================================================
   WHOLESALE CLIENT GATE (overlay built by script.js)
   ============================================================ */
/* Until the visitor answers "Yes", the page stays visible but dimmed
   behind the overlay. It can't be scrolled or clicked (script.js also
   marks it inert, which blocks keyboard focus and screen readers). */
html.wc-gate,
html.wc-gate body {
	overflow: hidden;
}

html.wc-gate body > :not(.wc-gate-overlay) {
	pointer-events: none;
	user-select: none;
}

.wc-gate-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 10, 10, .6);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.wc-gate-dialog {
	width: 100%;
	max-width: 560px;
	padding: 48px 40px 40px;
	text-align: center;
	background: var(--color-nav-bg);
	border-top: 4px solid var(--color-accent);
	border-radius: 2px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.wc-gate-dialog:focus {
	outline: none;
}

.wc-gate-logo {
	display: block;
	max-width: 235px;
	width: 100%;
	height: auto;
	margin: 0 auto 28px;
}

.wc-gate-dialog h2 {
	margin: 0 0 32px;
	font-size: 24px;
	line-height: 1.35;
	color: #fff;
}

.wc-gate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.wc-gate-actions .btn {
	min-width: 170px;
}

.wc-gate-actions .btn-primary:hover,
.wc-gate-actions .btn-primary:focus-visible {
	background: #7a8a43;
}

.wc-gate-actions .btn-secondary {
	background: transparent;
	border-color: #c7c7c8;
	color: #fff;
}

.wc-gate-actions .btn-secondary:hover,
.wc-gate-actions .btn-secondary:focus-visible {
	background: #333;
	border-color: #fff;
}

@media (max-width: 480px) {
	.wc-gate-dialog {
		padding: 36px 20px 28px;
	}

	.wc-gate-dialog h2 {
		font-size: 20px;
	}

	.wc-gate-actions .btn {
		width: 100%;
	}
}