/* ==========================================================================
   Epikurean Resorts — custom CSS
   Only what Tailwind's utility classes can't cleanly express: exact
   structural layout ported from the original design, fixed-position
   sidebar behavior, and multi-breakpoint overrides collapsed onto
   Tailwind's sm/md/lg/xl/2xl/3xl/4xl scale.
   ========================================================================== */

:root {
	--epik-black: #000000;
	--epik-white: #ffffff;
	--epik-accent: #48B87E;
	--epik-navy: #253a97;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--epik-black);
	color: var(--epik-white);
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Jost', sans-serif;
	letter-spacing: 3px;
	color: var(--epik-white);
	margin: 0;
}

a {
	color: var(--epik-white);
	text-decoration: none;
}

/* Tailwind Typography's prose-invert defaults to a softened light-gray
   (gray-300) for body text, bullets, etc. — the original design uses pure
   white throughout, so override every color role it drives. */
.prose-invert {
	--tw-prose-invert-body: var(--epik-white);
	--tw-prose-invert-headings: var(--epik-white);
	--tw-prose-invert-lead: var(--epik-white);
	--tw-prose-invert-links: var(--epik-white);
	--tw-prose-invert-bold: var(--epik-white);
	--tw-prose-invert-counters: var(--epik-white);
	--tw-prose-invert-bullets: var(--epik-white);
	--tw-prose-invert-hr: rgba(255, 255, 255, .2);
	--tw-prose-invert-quotes: var(--epik-white);
	--tw-prose-invert-quote-borders: rgba(255, 255, 255, .3);
	--tw-prose-invert-captions: var(--epik-white);
	--tw-prose-invert-code: var(--epik-white);
	--tw-prose-invert-th-borders: rgba(255, 255, 255, .3);
	--tw-prose-invert-td-borders: rgba(255, 255, 255, .15);
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Restore bullet/indent styling inside rich-text content — the global
   reset above (0,0,1 specificity) otherwise beats Tailwind Typography's
   :where()-wrapped defaults (0 specificity) for every prose <ul>. */
.prose ul {
	list-style: disc;
	padding-left: 1.625em;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
}
.prose li {
	margin-top: .5em;
	margin-bottom: .5em;
}

/* Responsive content gutter, replicating the original .container's
   200px → 80px → 15px breakpoint cascade using Tailwind's scale. */
.epik-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 15px;
}
@media (min-width: 1024px) {
	.epik-container { padding-inline: 40px; }
}
@media (min-width: 1440px) {
	.epik-container { padding-inline: 80px; }
}
@media (min-width: 1920px) {
	.epik-container { padding-inline: 150px; }
}
@media (min-width: 2560px) {
	.epik-container { padding-inline: 200px; }
}

/* Outline button — white border, transparent bg, inverts on hover. */
.epik-btn {
	display: inline-block;
	border: 1px solid var(--epik-white);
	color: var(--epik-white);
	background: transparent;
	padding: 10px 24px;
	font-family: 'Jost', sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: all .3s ease-in-out;
}
.epik-btn:hover {
	background: var(--epik-white);
	color: var(--epik-black);
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */

#header-wrapper {
	width: 100%;
	min-height: 90px;
	position: relative;
	z-index: 50;
}

/* Home page only: header overlays the hero as a transparent bar. */
.is-front-page #header-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	transition: background-color .3s ease-in-out;
}
.is-front-page #header-wrapper.is-scrolled {
	position: fixed;
	background: rgba(0, 0, 0, .85);
	backdrop-filter: blur(4px);
}

#header-wrapper .navigation {
	position: relative;
	width: 100%;
	text-align: center;
	z-index: 99;
}

#header-wrapper .logo-block {
	padding: 24px 0 12px;
}
#header-wrapper .logo-block img {
	max-width: 220px;
	height: auto;
	margin: 0 auto;
}

#header-wrapper .header-block {
	width: 100%;
	z-index: 1;
	padding-bottom: 16px;
}

#header-wrapper .navbar-button {
	display: none;
	float: right;
	background: transparent;
	border: 0;
	padding: 14px 0 14px 20px;
	cursor: pointer;
}
#header-wrapper .navbar-button .icon-bar {
	background: var(--epik-white);
	width: 34px;
	height: 3px;
	display: block;
	margin-bottom: 5px;
	border-radius: 2px;
}

#menu ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
#menu ul li a {
	display: inline-block;
	color: var(--epik-white);
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 2px;
	padding: 10px 16px;
	transition: color .3s ease-in-out;
}
#menu ul li a:hover {
	color: rgba(255, 255, 255, .6);
}
#menu ul li:last-of-type a {
	border: 1px solid var(--epik-white);
	padding: 10px 20px;
	transition: all .3s ease-in-out;
}
#menu ul li:last-of-type a:hover {
	background: var(--epik-white);
	color: var(--epik-black);
}

@media (max-width: 991px) {
	#header-wrapper .navigation { text-align: left; padding-left: 20px; }
	#header-wrapper .navbar-button {
		display: block;
		position: absolute;
		top: 10px;
		right: 20px;
	}
	#header-wrapper .logo-block { padding-left: 0; }
	#header-wrapper .logo-block img { max-width: 160px; margin: 0; }
	#menu {
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		background: rgba(255, 255, 255, .96);
		padding: 10px 20px;
		transition: opacity .3s ease-in-out;
	}
	#menu.active {
		opacity: 1;
		visibility: visible;
	}
	#menu ul {
		flex-direction: column;
		align-items: flex-end;
		width: 100%;
	}
	#menu ul li { width: 100%; text-align: right; }
	#menu ul li a { color: var(--epik-black) !important; }
	#menu ul li:last-of-type a {
		border: none;
		padding: 10px 16px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer-wrapper {
	width: 100%;
	padding: 48px 0 32px;
	text-align: center;
}
#footer-wrapper .footer-logo img {
	margin: 0 auto 20px;
	max-width: 190px;
	height: auto;
}
#footer-wrapper .footer-info p {
	font-size: 13px;
	padding-bottom: 2px;
}
#footer-wrapper .footer-navbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 12px 0 6px;
}
#footer-wrapper .footer-navbar li {
	padding: 0 15px;
	border-right: 2px solid var(--epik-white);
}
#footer-wrapper .footer-navbar li:last-of-type { border-right: none; }
#footer-wrapper .footer-navbar li a {
	font-size: 16px;
	font-family: 'Jost', sans-serif;
}
#footer-wrapper .footer-navbar li a:hover { text-decoration: underline; }

#footer-wrapper .social-media {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
	padding-top: 6px;
}
#footer-wrapper .social-media a { font-size: 18px; }
#footer-wrapper .social-media a:hover { color: rgba(255, 255, 255, .6); }

@media (max-width: 767px) {
	/* Right-alignment only reads well once there's room beside the centered
	   nav above it — recenter on narrow screens. */
	#footer-wrapper .social-media { justify-content: center; }
}

/* ==========================================================================
   Home page
   ========================================================================== */

.epik-hero-slide__content h1 {
	text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.epik-bounce { display: inline-block; }

/* GSAP-driven hover zoom for grid cards/images (Portfolio grid, Up Coming
   Experiences grid, three-block row) — main.js animates the img's scale
   directly, this just guarantees the crop mask and a crisp base state. */
.epik-gsap-zoom { display: block; }
.epik-gsap-zoom img { transform: scale(1); will-change: transform; }

/* Card lift (Careers job openings) — plain CSS transition. */
.epik-card-hover {
	transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.epik-card-hover:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, .7);
	background-color: rgba(255, 255, 255, .03);
}

.more-button a:hover { color: rgba(255, 255, 255, .7); }

.epik-upcoming-card { padding-bottom: 10px; }

/* Swiper pagination — bordered circular dots matching the original slick-dots. */
.epik-swiper .swiper-pagination-bullet {
	background: transparent;
	border: 2px solid var(--epik-white);
	opacity: 1;
	width: 12px;
	height: 12px;
}
.epik-swiper .swiper-pagination-bullet-active {
	background: var(--epik-white);
}
.epik-hero-swiper .swiper-pagination {
	bottom: 20px;
}
.epik-experiences-swiper .swiper-pagination {
	position: relative;
	margin-top: 20px;
}

/* ==========================================================================
   Compliance tabs (About / Services / Philosophy / Advisory)
   ========================================================================== */

.compliance-tab-content { display: none; }
.compliance-tab-content.active { display: block; }

.compliance-tab-menu .list-group-item { color: var(--epik-white); opacity: .55; transition: opacity .2s ease-in-out; }
.compliance-tab-menu .list-group-item:hover { opacity: .85; }
.compliance-tab-menu .list-group-item.active { opacity: 1; }
.compliance-tab-menu .list-group-item .fa-icon { opacity: 0; }
.compliance-tab-menu .list-group-item.active .fa-icon { opacity: 1; }

.content-section img { max-width: 100%; height: auto; }

/* Mobile: sidebar nav becomes redundant (no room for a sticky column), so
   stack every tab panel instead of toggling — matches the original's
   <768px fallback where clicking tabs no longer worked either. */
@media (max-width: 1023px) {
	.compliance-tab-menu .list-group { display: none; }
	.compliance-tab-content { display: block !important; }
	.compliance-tab-content + .compliance-tab-content { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .15); }
}

/* ==========================================================================
   Contact Form 7 restyling — target CF7's own stable classes rather than
   fighting its generated markup. Matches the original's plain, solid-white
   native-looking form fields (not a dark transparent-outline treatment)
   with a black/white outline submit button.
   ========================================================================== */

.wpcf7-form-control-wrap { display: block; margin-bottom: 1.1rem; }
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
	width: 100%;
	background: var(--epik-white);
	border: 1px solid rgba(0, 0, 0, .2);
	color: var(--epik-black);
	border-radius: 4px;
	padding: 10px 14px;
	font-family: 'Raleway', sans-serif;
}
.wpcf7-form-control.wpcf7-select option { color: #000; }
.wpcf7-form-control::placeholder { color: rgba(0, 0, 0, .45); }
.wpcf7-form-control.wpcf7-file { color: var(--epik-white); }
.wpcf7-submit {
	border: 1px solid var(--epik-white);
	background: var(--epik-black);
	color: var(--epik-white);
	padding: 10px 26px;
	font-weight: 700;
	transition: all .3s ease-in-out;
	cursor: pointer;
}
.wpcf7-submit:hover { background: var(--epik-white); color: var(--epik-black); }
.wpcf7-response-output { border-radius: 0 !important; margin: 1em 0 0 !important; padding: .8em 1em !important; }
.wpcf7-form.sent .wpcf7-response-output { border-color: var(--epik-accent) !important; color: var(--epik-accent); }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output { border-color: #e05555 !important; color: #e05555; }
.wpcf7-not-valid-tip { color: #e05555; font-size: .8rem; margin-top: 4px; }

/* Contact page accordion toggle, replacing the original's
   .contact-form/.open max-height transition. */
.contact-form-panel {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .4s ease, opacity .4s ease;
}
.contact-form-panel.is-open {
	max-height: 1000px;
	opacity: 1;
	transition: max-height .4s ease-in, opacity .4s ease-in;
}

/* ==========================================================================
   Legal pages — Privacy Policy sidebar jump-nav
   ========================================================================== */

.legal-toc-item { color: var(--epik-white); opacity: .55; transition: opacity .2s ease-in-out; font-size: 14px; }
.legal-toc-item:hover { opacity: .85; }
.legal-toc-item.active { opacity: 1; }
.legal-toc-item .fa-icon { opacity: 0; }
.legal-toc-item.active .fa-icon { opacity: 1; }
@media (max-width: 1023px) {
	.legal-toc { display: none; }
}