/*
Theme Name: Paris Paradis
Theme URI: http://theloyaltyco.app/
Author: The Loyalty Co
Author URI: http://theloyaltyco.app/
Description: Paris Paradis theme.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paradis
Tags: custom-theme, responsive, wpbakery
*/

/* ==========================================================================
   Font Definitions
   ========================================================================== */

/* Modern Header (Bw Modelica) */
@font-face {
    font-family: 'Bw Modelica';
    src: url('./assets/fonts/bw-modelica-900.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Display Script (Ainsley Blossom) */
@font-face {
    font-family: 'Ainsley Blossom';
    src: url('./assets/fonts/ainsley-blossom.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Body Text (Montserrat Regular) */
@font-face {
    font-family: 'Montserrat';
    src: url('./assets/fonts/montserrat-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Body Text (Montserrat Semi-Bold) */
@font-face {
    font-family: 'Montserrat';
    src: url('./assets/fonts/montserrat-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Body Text (Montserrat Bold) */
@font-face {
    font-family: 'Montserrat';
    src: url('./assets/fonts/montserrat-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* UI / Buttons (Blair ITC Bold) */
@font-face {
    font-family: 'Blair ITC';
    src: url('./assets/fonts/blair-itc-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Global Design System - CSS Variables
   ========================================================================== */

:root {
	/* Fonts */
	--font-modern: 'Bw Modelica', sans-serif;
	--font-display: 'Ainsley Blossom', serif;
	--font-body: 'Montserrat', sans-serif;
	--font-ui: 'Blair ITC', sans-serif;

	/* Brand Colours (Semantic Naming) */
	--color-primary: #fbf3de;
	--color-secondary: #000000;
	--color-third: #e30713;
	--color-fourth: #005ce3;
	--color-additional: #b0b0b0;

	/* Core Element Backgrounds */
	--bg-body: #fbf3de;
	--bg-footer: #000000;
	--bg-header: transparent;
	--bg-header-sticky: #fbf3de;

	/* UI Defaults */
	--btn-radius: 50px;
	--container-width: 1920px;
    --content-wide: 1920px;
	--footer-container-width: 1920px;
}

/* ==========================================================================
   Minimal Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	background-color: var(--bg-body);
	color: var(--color-secondary);
}

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

iframe {
    border:none;
}

/* ==========================================================================
   LAYOUT ARCHITECTURE
   ========================================================================== */

   :root {
    /* Define the global content width */
    --wp--style--global--content-size: 1920px;
}

body {
    overflow-x: hidden; /* Prevents scrollbar if a row barely misses calculation */
}

/* Header Spacing Control
   By default, pages have top padding to prevent content from hiding behind the fixed header.
   This can be disabled via ACF 'Disable Header Spacing' toggle for hero pages. */
body.paradis-top-padding {
    padding-top: 200px;
}

@media (max-width: 768px) {
    body.paradis-top-padding {
        padding-top: 120px;
    }
	.site-main {overflow-x: hidden;}
}

.site-main {
	overflow-wrap: break-word;
}

.site-main ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
}

.site-main,
.container,
.footer-container {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
	padding-left: 40px;
	padding-right: 40px;
}
.footer-container {
	max-width: var(--footer-container-width);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 40px;
	padding-right: 40px;
}
@media (min-width: 768px) {
    .site-main,
    .container {
        padding-left: clamp(20px, calc(7.5vw - 9px), 150px);
        padding-right: clamp(20px, calc(7.5vw - 9px), 150px);
    }
.footer-container {
	padding-left: clamp(20px, calc(4vw - 9px), 150px);
	padding-right: clamp(20px, calc(4vw - 9px), 150px);
}
}

.vc_row .vc_row,
.vc_row.vc_inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Default Vertical Row Spacing */
body .vc_row:not(.vc_row_inner):first-of-type, body .vc_row:not(.vc_row_inner):last-of-type {
    margin-top: 0;
}
body .vc_row:not(.vc_row_inner) {
	margin-top: 40px;        
	margin-bottom: 40px;
}

@media (min-width: 768px) {
	
    body .vc_row:not(.vc_row_inner) {
		margin-top: 60px;        
		margin-bottom: 60px;
    }
}

@media (min-width: 768px) {
.vc_row.haute-bleed-right {
    padding-right: 0 !important;
}
.vc_row.haute-bleed-left {
    padding-left: 0 !important;
}
}

.col-flex-center > .vc_column-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    transition: min-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), padding 0.3s ease;
    will-change: min-height;
}

/* Custom Column Height Definitions */
.min-h-100vh > .vc_column-inner { min-height: 100vh; }
.min-h-75vh > .vc_column-inner  { min-height: 75vh; }
.min-h-50vh > .vc_column-inner  { min-height: 50vh; }
.min-h-25vh > .vc_column-inner  { min-height: 25vh; }
@media (max-width: 768px) {
.min-h-mob-auto > .vc_column-inner { min-height: auto!important; }
.min-h-mob-100vh > .vc_column-inner { min-height: 100vh!important; }
.min-h-mob-75vh > .vc_column-inner  { min-height: 75vh!important; }
.min-h-mob-50vh > .vc_column-inner  { min-height: 50vh!important; }
.min-h-mob-25vh > .vc_column-inner  { min-height: 25vh!important; }
}

@media (max-width: 767px) {
    .vc_row[data-vc-stretch-content="true"]:not(.vc_row-no-padding) .vc_column-inner{
        padding-left: 35px !important;
        padding-right: 35px !important;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

@media (max-width: 767px) {
	.mobile-reverse-columns {
		display: flex;
		flex-direction: column-reverse;
	}
}

/* MOBILE ALIGNMENT UTILITIES */
   @media (max-width: 767px) {
    
    /* LEFT ALIGN */
    .mob-text-left { 
        text-align: left !important; 
    }
    .mob-text-left > .vc_column-inner { 
        align-items: flex-start !important; /* Aligns flex children (buttons) */
    }

    /* CENTER ALIGN */
    .mob-text-center { 
        text-align: center !important; 
    }
    .mob-text-center > .vc_column-inner { 
        align-items: center !important; 
    }

    /* RIGHT ALIGN */
    .mob-text-right { 
        text-align: right !important; 
    }
    .mob-text-right > .vc_column-inner { 
        align-items: flex-end !important; 
    }

    /* JUSTIFY */
    .mob-text-justify { 
        text-align: justify !important; 
    }
}

.site-footer {
	background-color: var(--bg-footer);
}

/* GLOBAL FIX: Sub-pixel White Line Prevention */
/* Applies only to our heavy custom components, saving memory */
.paradis-dual-heading,
.paradis-video-hero,
.paradis-ticket-grid,
.paradis-single-heading,
.paradis-marquee,
.paradis-history-timeline {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* ==========================================================================
   Typography Application
   ========================================================================== */

/* Headings */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 700; /* Fallback */
    line-height: 1.2;
}

h1, .h1 {
    font-family: var(--h1-font-family, var(--font-modern));
    font-weight: var(--h1-font-weight, 900);
    font-size: var(--h1-size-fluid, clamp(2rem, 3.04px + 5.17vw, 3.5rem));
    line-height: var(--h1-line-height, 1.1);
    text-transform: var(--h1-text-transform, none);
    color: var(--h1-color, inherit);
}

h2, .h2 {
    font-family: var(--h2-font-family, var(--font-modern));
    font-weight: var(--h2-font-weight, 700);
    font-size: var(--h2-size-fluid, clamp(1.5rem, -4.97px + 5.17vw, 3rem));
    line-height: var(--h2-line-height, 1.2);
    text-transform: var(--h2-text-transform, none);
    color: var(--h2-color, inherit);
}

h3, .h3 {
    font-family: var(--h3-font-family, var(--font-modern));
    font-weight: var(--h3-font-weight, 700);
    font-size: var(--h3-size-fluid, clamp(1.25rem, -4.14px + 4.31vw, 2.5rem));
    line-height: var(--h3-line-height, 1.3);
    text-transform: var(--h3-text-transform, none);
    color: var(--h3-color, inherit);
}

h4, .h4 {
    font-family: var(--h4-font-family, var(--font-modern));
    font-weight: var(--h4-font-weight, 700);
    font-size: var(--h4-size-fluid, clamp(1.25rem, 5.52px + 2.59vw, 2rem));
    line-height: var(--h4-line-height, 1.4);
    text-transform: var(--h4-text-transform, none);
    color: var(--h4-color, inherit);
}

h5, .h5 {
    font-family: var(--h5-font-family, var(--font-modern));
    font-weight: var(--h5-font-weight, 700);
    font-size: var(--h5-size-fluid, clamp(1rem, 6.35px + 1.72vw, 1.5rem));
    line-height: var(--h5-line-height, 1.5);
    text-transform: var(--h5-text-transform, none);
    color: var(--h5-color, inherit);
}

h6, .h6 {
    font-family: var(--h6-font-family, var(--font-modern));
    font-weight: var(--h6-font-weight, 700);
    font-size: var(--h6-size-fluid, clamp(0.875rem, 6.76px + 1.29vw, 1.25rem));
    line-height: var(--h6-line-height, 1.5);
    text-transform: var(--h6-text-transform, none);
    color: var(--h6-color, inherit);
}

/* Body Text Override */
body, p {
    font-family: var(--body-font-family, var(--font-body));
    font-weight: var(--body-font-weight, 400);
    font-size: var(--body-size-fluid, clamp(1rem, 1rem, 1rem));
    line-height: var(--body-line-height, 1.6);
    color: var(--body-color, inherit);
    text-transform: var(--body-text-transform, none);
	margin-bottom: 0.5rem;
}

/* Button Base Override */
button, input[type="button"], input[type="reset"], input[type="submit"], .btn {
	font-family: var(--button-font-family, var(--font-ui));
	font-weight: var(--button-font-weight, 700);
	font-size: var(--button-size-desktop, 1rem);
	line-height: var(--button-line-height, 1);
	text-transform: var(--button-text-transform, uppercase);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 30px;
	text-decoration: none;
	border: none;
	vertical-align: middle;
	cursor: pointer;
	transition: all 0.3s ease;
    text-transform: uppercase;
}

/* ==========================================================================
   HEADER STYLES (Dual-Header Ghost System v7.0)
   ========================================================================== */

/* Base Header Styles (Shared by Both Headers) */
.site-header {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	padding-top: 60px;
	padding-bottom: 30px;
}

/* Hero Header (Absolute - Scrolls with Page) */
.site-header--hero {
	position: absolute;
	background-color: var(--bg-header);
}

/* Ghost Header (Fixed - Slides In/Out) */
.site-header--ghost {
	position: fixed;
	background-color: var(--bg-header-sticky);
	color: var(--text-header-sticky);
	padding-top: 40px;
	padding-bottom: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ghost Header - Visible State */
.site-header--ghost.is-visible {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Ghost Header - Hidden State (Scrolling Down) */
.site-header--ghost.is-hidden {
	transform: translateY(-100%);
	opacity: 1;
	visibility: visible;
}

/* Ghost Header - Fading Out (Returning to Top) */
.site-header--ghost.is-fading {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* Ghost Header CTA Styling */
.site-header--ghost .header-cta {
	color: var(--text-header-sticky);
	border-color: var(--text-header-sticky);
}

/* NOTE: Ghost hover styles are dynamically generated in dynamic-css.php
   based on the selected animation style to prevent conflicts */

/* Ghost Header Burger Icon */
.site-header--ghost .burger-icon span {
	background-color: var(--text-header-sticky);
}

/* Header Inner Wrapper */
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Desktop Header */
.header-desktop {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
}
.header-mobile {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: flex-end;
}

@media (min-width: 1080px) {
	.header-desktop {
		display: flex; /* Show Desktop Header */
	}
	.header-mobile {
		display: none!important; /* Hide Mobile Header */
	}
}

/* Logo Styling */
.site-logo {
	height: 48px;
	display: flex;
	align-items: center;
	margin-right: 48px;
}

.site-logo a {
	display: flex;
	height: 100%;
	align-items: center;
}

.site-logo img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

/* Navigation */
.main-navigation {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 1;
	justify-content: flex-end;
}

.primary-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}

.primary-menu > li {
	position: relative;
}

.primary-menu > li > a {
	font-family: var(--font-nav, var(--font-modern));
	font-weight: var(--weight-nav-default, 500);
	font-size: var(--size-header-desktop, 16px);
	text-decoration: none;
	color: currentColor;
	transition: font-weight 0.3s ease, text-shadow 0.3s ease;
	text-shadow: none;
	display: block;
	padding: 8px 0;
	text-transform: uppercase;
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu .sub-menu > li > a:hover,
.primary-menu .sub-menu > li.current-menu-item > a,
.primary-menu .sub-menu .sub-menu > li.current-menu-item > a,
.primary-menu .sub-menu .sub-menu .sub-menu > li > a:hover,
.primary-menu .sub-menu .sub-menu .sub-menu > li.current-menu-item > a,
.primary-menu .sub-menu .sub-menu .sub-menu .sub-menu > li > a:hover,
.primary-menu .sub-menu .sub-menu .sub-menu .sub-menu > li.current-menu-item > a
 {
	/* font-weight: var(--weight-nav-hover, 700); */
	text-shadow: 1.2px 0.3px 0 currentColor;
}



/* Sub-Menu Styling */
.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--color-submenu-bg, #fbf3de);
	border: var(--submenu-border-width, 1px) solid var(--color-submenu-border, #000);
	border-radius: var(--submenu-radius, 12px);
	min-width: 220px;
	padding: 10px 0;
	list-style: none;
	margin: 0;
	display: none;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 100;
}

.primary-menu .sub-menu.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.primary-menu .sub-menu li {
	position: relative;
}

.primary-menu .sub-menu a {
	display: block;
	padding: 13px 20px;
	font-size: var(--size-submenu, 14px);
	color: var(--color-submenu-text, #000);
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 5px;
}

/* Nested Sub-Menus (Level 2 & 3) */
.primary-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin-left: 5px;
	transform: translateX(-10px);
}

.primary-menu .sub-menu .sub-menu.flip-left {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 5px;
	transform: translateX(10px);
}

.primary-menu .sub-menu .sub-menu.is-visible {
	transform: translateX(0);
}

/* Header CTA Button */
.header-cta {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 24px;
	border: 2px solid currentColor;
	border-radius: 50px;
	background-color: transparent;
	color: currentColor;
	transition: all 0.3s ease;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* NOTE: Hover styles are dynamically generated in dynamic-css.php
   based on the selected animation style to prevent conflicts */

/* Header Skin Classes (Hero Header Only) */
.site-header--hero.skin--light {
	color: #FCF3DE;
}

.site-header--hero.skin--dark {
	color: #000000;
}

/* Mobile Header */
.header-mobile {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: flex-end;
}

.site-logo-mobile {
	height: 32px;
	display: flex;
	align-items: center;
	margin-right: auto;
}

.site-logo-mobile a {
	display: flex;
	height: 100%;
	align-items: center;
}

.site-logo-mobile img {
	height: 100%;
	width: auto;
	object-fit: contain;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.burger-icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 24px;
}

.burger-icon span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fbf3de;
	transition: all 0.3s ease;
}
.site-header.skin--dark .burger-icon span {
	background-color: #000000;
}

/* Burger icon for ghost header is now handled in the Ghost Header section above */


/* Mobile Flyout */
.mobile-flyout {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--bg-flyout-menu, #000000);
	z-index: 2000;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	padding: 96px 40px 94px;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-y: auto;
	transform: translateX(100%); /* Start completely off-screen to the right */
    transition: transform 0.6s cubic-bezier(0.25, 0.6, 0.25, 1), visibility 0s linear 0.4s;
    visibility: hidden; /* Hide from screen readers/clicks when closed */
    will-change: transform;
}

body.flyout-active .mobile-flyout {
	visibility: visible;
	transform: translateX(0);
    visibility: visible;
    transition: transform 0.6s cubic-bezier(0.25, 0.6, 0.25, 1), visibility 0s linear 0s;
}

.flyout-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
	min-height: 37px;
}

.flyout-logo {
	height: 37px;
	display: flex;
	align-items: center;
	max-width: 400px;
}

.flyout-logo img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.flyout-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--color-flyout-menu-close-button, #FCF3DE);
}

.close-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.close-icon svg {
	width: 100%;
	height: 100%;
}

/* Flyout Body */
.flyout-body {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1;
}

.flyout-navigation {
	display: flex;
	margin-bottom: 68px;
}

.mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu > li {
	margin-bottom: 32px;
}

.mobile-menu a {
	font-size: var(--size-menu-mobile, 24px);
	font-family: var(--font-nav, var(--font-modern));
	font-weight: var(--weight-nav-default, 400);
	color: var(--color-flyout-menu-text, #FCF3DE);
	text-decoration: none;
	text-transform: uppercase;
}
.mobile-menu a:hover, 
.mobile-menu a:focus,
.mobile-menu > li > a:hover,
.mobile-menu > li.current-menu-item > a
 {
	font-weight: var(--weight-nav-hover, 700);
}

.flyout-cta {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 32px;
	border: 2px solid var(--color-flyout-menu-button-border, #FCF3DE);
	border-radius: 50px;
	background-color: var(--color-flyout-menu-button-bg, transparent);
	color: var(--color-flyout-menu-button-text, #FCF3DE);
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin-bottom: 36px;
	transition: all 0.3s ease;
}

/* NOTE: Flyout CTA hover styles are dynamically generated in dynamic-css.php
   based on the selected animation style to prevent conflicts */

/* MOBILE MENU SUB-MENU */

/* Reset Desktop Styles */
.mobile-menu .sub-menu {
	display: none;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	box-shadow: none;
	border: none;
	padding-left: 20px;
	margin-top: 10px;
	background-color: transparent;
}

/* Active State (Triggered by JS) */
.mobile-menu .menu-item-has-children.active > .sub-menu {
	display: block;
	animation: fadeIn 0.3s ease;
}

.mobile-menu .sub-menu li {
	margin-bottom: 12px;
}

.mobile-menu .sub-menu a {
	font-size: 18px;
	font-weight: 400;
	color: var(--color-flyout-menu-text, #FCF3DE);
}

.mobile-menu .menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu .menu-item-has-children > a::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s ease;
    margin-left: 25px;
}
.mobile-menu .menu-item-has-children.active > a::after {
    transform: translateY(-2px) rotate(225deg);
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Flyout Social Icons */
.flyout-social {
	display: flex;
	gap: 12px;
	align-items: center;
}

.flyout-social a {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	transition: color 0.3s ease;
}

.flyout-social a:hover {
	color: #e30613;
}

.flyout-social svg {
	width: 100%;
	height: 100%;
}

/* Mobile Responsive */
@media (max-width: 1023px) {
	.site-header {
		padding-top: 38px;
		padding-bottom: 30px;
	}
}

/* MENU INDICATORS */

/* Main Menu (Level 1) - Down Chevron */
.primary-menu > .menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.primary-menu > .menu-item-has-children > a::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 0.3s ease;
}

.primary-menu > .menu-item-has-children:hover > a::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

/* Sub-Menus (Level 2 & 3) - Right Chevron */
.primary-menu .sub-menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.primary-menu .sub-menu .menu-item-has-children > a::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform:translatex(-20px)  rotate(45deg) ;
    margin-left: 10px;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.primary-menu .sub-menu .menu-item-has-children:hover > a::after {
	opacity: 1;
	transform: translateX(0)  rotate(45deg);
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

.site-footer {
	background-color: var(--bg-footer);
	color: var(--color-footer-text, #fbf3de);
	padding-top: 94px;
	padding-bottom: 65px;
}

/* Footer Columns Grid */
.footer-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 76px;
}

.footer-column {
	display: flex;
	flex-direction: column;
}

/* Brand Column */
.footer-brand {
	align-items: flex-start;
}

.footer-logo img {
	height: 64px;
	width: auto;
}

.footer-map-image {
	margin-top: 30px;
	border-radius: 12px;
	overflow: hidden;
	width: 100%;
}

.footer-map-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Contact Column */
.footer-contact {
	display: flex;
	justify-content: center;
	flex-direction: row;
}

.contact-container {
	max-width: 310px;
	text-align: left;
}

.contact-info {
	margin-bottom: 36px;
}

.footer-heading {
	font-family: var(--footer-header-font-family, var(--font-ui)); /* Defaults to UI */
    font-weight: var(--footer-header-font-weight, 700);
    font-size: var(--footer-header-size-mobile, 14px);
    line-height: var(--footer-header-line-height, 1.4);
    text-transform: var(--footer-header-text-transform, uppercase);
    color: var(--footer-header-color, var(--color-footer-headers, #e30613));
    margin-bottom: 16px;
}
.footer-address,
.footer-phone,
.footer-email,
.copyright,
.legal-links,
.legal-links a {
    font-family: var(--footer-body-font-family, var(--font-body));
    font-weight: var(--footer-body-font-weight, 400);
    font-size: var(--footer-body-size-mobile, 14px);
    line-height: var(--footer-body-line-height, 1.6);
    text-transform: var(--footer-body-text-transform, none);
    color: var(--footer-body-color, var(--color-footer-text, #fbf3de));
}
@media screen and (min-width: 767px) {
	.footer-heading {
		font-size: var(--footer-header-size-desktop, 18px);
	}
	.footer-address,
.footer-phone,
.footer-email,
.copyright,
.legal-links,
.legal-links a {
    font-size: var(--footer-body-size-desktop, 14px);
}
}

.footer-address,
.footer-phone,
.footer-email {
	margin-bottom: 8px;
}

.footer-address a,
.footer-phone a,
.footer-email a {
	color: var(--color-footer-social, #fbf3de);
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-address a:hover,
.footer-phone a:hover,
.footer-email a:hover {
	color: var(--color-footer-social-hover, #e30613);
}

/* Social Icons */
.footer-social {
	display: flex;
	gap: 12px;
	align-items: center;
}

.social-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-footer-social, #fbf3de);
	transition: color 0.3s ease;
}
@media screen and (min-width: 767px) {
	.social-icon {
	width: 30px;
	height: 30px;
}
}

.social-icon:hover {
	color: var(--color-footer-social-hover, #e30613);
}

.social-icon svg {
	width: 100%;
	height: 100%;
}

/* Newsletter Column */
.footer-newsletter {
	align-items: flex-start;
}

.newsletter-form {
	width: 100%;
}

/* Footer Bottom */
.footer-bottom {
	text-align: center;
	padding-top: 20px;
}

.copyright {
	margin-bottom: 15px;
}

.legal-links {
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
}

.legal-links a {
	text-decoration: none;
	transition: color 0.3s ease;
	color: var(--color-footer-social, #fbf3de);
}

.legal-links a:hover {
	color: var(--color-footer-social-hover, #e30613);
}

.legal-links .separator {
	color: var(--footer-body-color, var(--color-footer-text, #fbf3de));
	opacity: 0.5;
}

/* Mobile Footer */
@media (max-width: 767px) {
	.site-footer {
		padding-top: 100px;
		padding-bottom: 130px;
	}

	.footer-columns {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 82px;
		margin-bottom: 55px;
	}

	.footer-brand {
		align-items: center;
	}

	.footer-contact {
		justify-content: center;
	}

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

	.contact-info {
		margin-bottom: 36px;
	}

	.footer-social {
		justify-content: center;
	}

	.footer-newsletter {
		align-items: center;
	}

	.legal-links {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   404 ERROR PAGE
   ========================================================================== */

/* Editorial Fallback Layout
   Only layout CSS - typography inherits from semantic tags (h1, p) */
.error-404-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	text-align: center;
}

.error-404-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.error-404-content h1 {
	margin: 0;
}

.error-404-content p {
	margin: 0;
	max-width: 400px;
}

/* Dark Mode for 404 Editorial Fallback
   Forces dark header styling when fallback is displayed */
body.error-404-dark .site-header--hero {
	background-color: var(--bg-header-sticky, #000);
	color: var(--text-header-sticky, #fff);
}

body.error-404-dark .site-header--hero a {
	color: var(--text-header-sticky, #fff);
}

/* ==========================================================================
   WPBAKERY COLUMN CONTENT ALIGNMENT
   ========================================================================== */

/**
 * Horizontal Content Alignment for WPBakery Columns
 * 
 * Targets the .wpb_wrapper (3 levels deep) to align child elements
 * while maintaining vertical stacking behavior.
 * 
 * Structure:
 * .wpb_column (custom class applied here)
 *   └─ .vc_column-inner
 *       └─ .wpb_wrapper (flexbox applied here)
 *           └─ child elements
 */

/* Desktop Alignment - Left */
.paradis-col-left > .vc_column-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Desktop Alignment - Center */
.paradis-col-center > .vc_column-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Desktop Alignment - Right */
.paradis-col-right > .vc_column-inner  {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Mobile Alignment Overrides (max-width: 767px) */
@media (max-width: 767px) {
	/* Mobile - Left */
	.paradis-col-mob-left > .vc_column-inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	/* Mobile - Center */
	.paradis-col-mob-center > .vc_column-inner  {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Mobile - Right */
	.paradis-col-mob-right > .vc_column-inner  {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
}

/* Desktop Alignment - Stretch */
.paradis-col-stretch > .vc_column-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Mobile Alignment - Stretch */
@media (max-width: 767px) {
	.paradis-col-mob-stretch > .vc_column-inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
}

/* ====================================================================
   VIDEO HERO COMPONENT
   ==================================================================== */

/**
 * Video Hero Container
 * Full-width video background hero section with responsive controls.
 * Height is controlled via dynamic CSS injection.
 */
.paradis-video-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
}

/**
 * Video Background
 * Uses object-fit: cover for proper scaling without transform hacks.
 * Mobile-first source order with media queries in HTML.
 */
.paradis-video-hero .video-hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/**
 * Video Overlay
 * Color overlay with alpha support for darkening/tinting video.
 */
.paradis-video-hero .video-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/**
 * Content Container
 * Positioned above video/overlay with flexbox for vertical alignment.
 * Uses .container class for horizontal constraints.
 */
.paradis-video-hero .video-hero-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;

}

/**
 * Disable Container Padding
 * Removes inherited padding from .container class for precise max-width control.
 */
.video-hero-no-padding .video-hero-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/**
 * Desktop Vertical Alignment
 * Controls vertical positioning of content using flexbox justify-content.
 */
.video-hero-align-top .video-hero-content {
	justify-content: flex-start;
}

.video-hero-align-middle .video-hero-content {
	justify-content: center;
}

.video-hero-align-bottom .video-hero-content {
	justify-content: flex-end;
}

/**
 * Desktop Horizontal Alignment
 * Controls horizontal positioning of content using flexbox align-items.
 */
.video-hero-h-align-left .video-hero-content {
	align-items: flex-start;
}

.video-hero-h-align-center .video-hero-content {
	align-items: center;
}

.video-hero-h-align-right .video-hero-content {
	align-items: flex-end;
}

/**
 * Mobile Alignment Overrides
 * Applies at 767px breakpoint (strict mobile breakpoint per PROJECT_MAP).
 * Allows independent control of alignment on mobile devices.
 */
@media (max-width: 767px) {
	/* Mobile Vertical Alignment */
	.video-hero-mob-align-top .video-hero-content {
		justify-content: flex-start;
	}

	.video-hero-mob-align-middle .video-hero-content {
		justify-content: center;
	}

	.video-hero-mob-align-bottom .video-hero-content {
		justify-content: flex-end;
	}

	/* Mobile Horizontal Alignment */
	.video-hero-mob-h-align-left .video-hero-content {
		align-items: flex-start;
	}

	.video-hero-mob-h-align-center .video-hero-content {
		align-items: center;
	}

	.video-hero-mob-h-align-right .video-hero-content {
		align-items: flex-end;
	}
}

/**
 * Desktop Vertical Alignment - Space Distribution
 * Advanced flexbox properties for distributing content with spacing.
 */
.video-hero-align-space-between .video-hero-content {
	justify-content: space-between;
}

.video-hero-align-space-around .video-hero-content {
	justify-content: space-around;
}

.video-hero-align-space-evenly .video-hero-content {
	justify-content: space-evenly;
}

/**
 * Desktop Horizontal Alignment - Stretch
 * Makes child elements stretch to fill full width of container.
 */
.video-hero-h-align-stretch .video-hero-content {
	align-items: stretch;
}

/**
 * Mobile Vertical Alignment - Space Distribution
 * Applies at 767px breakpoint (strict mobile breakpoint per PROJECT_MAP).
 */
@media (max-width: 767px) {
	.video-hero-mob-align-space-between .video-hero-content {
		justify-content: space-between;
	}

	.video-hero-mob-align-space-around .video-hero-content {
		justify-content: space-around;
	}

	.video-hero-mob-align-space-evenly .video-hero-content {
		justify-content: space-evenly;
	}

	/**
	 * Mobile Horizontal Alignment - Stretch
	 */
	.video-hero-mob-h-align-stretch .video-hero-content {
		align-items: stretch;
	}
}

/**
 * Error State
 * Displayed when required desktop video is missing.
 */
.paradis-video-hero-error {
	padding: 40px;
	background: #f8d7da;
	color: #721c24;
	text-align: center;
	border: 1px solid #f5c6cb;
	border-radius: 4px;
}

/* ==========================================================================
   Marquee Slider Component (Chunk 7)
   ========================================================================== */

/**
 * Marquee Slider Wrapper
 * 100% width, relies on parent WPBakery Row for container settings.
 * No internal max-width or overflow toggles per v7.0 requirements.
 */
.paradis-marquee {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	margin-bottom: 20px;
}

/**
 * Swiper Container
 * Main slider container with overflow handling.
 */
.paradis-marquee .swiper {
	width: 100%;
	overflow: visible;
}

/**
 * Swiper Wrapper
 * CRITICAL: Linear timing function for smooth continuous motion.
 * Do not change transition-timing-function (ticker effect depends on this).
 */
.paradis-marquee .swiper-wrapper {
	transition-timing-function: linear !important;
}

/**
 * Swiper Slide
 * Individual slide dimensions (auto-sized based on content).
 */
.paradis-marquee .swiper-slide {
	width: auto;
	height: auto;
}

/**
 * Slide Images
 * Fills container with object-fit: contain for uniform appearance.
 * Height override applied via inline style when user specifies custom height.
 */
.paradis-marquee .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/**
 * Hide Pagination and Navigation
 * Elements required by Swiper for proper loop but visually hidden.
 */
.paradis-marquee .swiper-pagination,
.paradis-marquee .swiper-button-prev,
.paradis-marquee .swiper-button-next {
	display: none !important;
}

/**
 * Empty State
 * Displayed when no images are selected in WPBakery editor.
 */
.paradis-marquee-empty {
	padding: 40px;
	background: #f8f9fa;
	color: #6c757d;
	text-align: center;
	border: 2px dashed #dee2e6;
	border-radius: 4px;
}

.paradis-marquee-empty p {
	margin: 0;
	font-size: 14px;
}

/* ==========================================================================
   Universal Card Slider Component
   ========================================================================== */

/**
 * Card Slider Container
 * Base wrapper for both Grid and Slider modes.
 */
.paradis-card-slider {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}

/**
 * Swiper Container
 */
.paradis-card-slider .swiper {
	width: 100%;
	overflow: hidden;
}

/**
 * Swiper Wrapper - Mobile Default (Always Active Swiper)
 */
@media (max-width: 767px) {
	.paradis-card-slider .swiper-wrapper {
		display: flex; /* Swiper's default behavior */
	}
}

/**
 * Desktop Grid Mode (CRITICAL: Complete Swiper Reset)
 * Disables all Swiper transforms, transitions, and inline styles.
 * Grid layout applied via dynamic CSS (per-instance).
 */
@media (min-width: 768px) {
	.paradis-card-slider[data-desktop-layout="grid"] .swiper-wrapper {
		display: grid !important;
		transform: translate3d(0, 0, 0) !important; /* Reset Swiper transform */
		transition: none !important; /* Disable slide transitions */
		will-change: auto !important; /* Remove GPU optimization hints */
	}
	
	/**
	 * CRITICAL: Reset individual slide inline styles in Grid mode
	 * Swiper applies inline width and margin-right to slides.
	 * These must be overridden for CSS Grid to work properly.
	 */
	.paradis-card-slider[data-desktop-layout="grid"] .swiper-slide {
		width: auto !important; /* Override Swiper's inline width */
		margin-right: 0 !important; /* Override Swiper's inline margin */
	}
	
	/**
	 * Hide controls in Grid mode (not needed for static layout)
	 */
	.paradis-card-slider[data-desktop-layout="grid"] .swiper-pagination,
	.paradis-card-slider[data-desktop-layout="grid"] .swiper-button-prev,
	.paradis-card-slider[data-desktop-layout="grid"] .swiper-button-next {
		display: none !important;
	}
}

/**
 * Desktop Slider Mode
 * Maintains Swiper's default behavior (no overrides needed).
 */
@media (min-width: 768px) {
	/*.paradis-card-slider[data-desktop-layout="slider"] .swiper-wrapper {
		 Swiper's native transform/transition behavior 
	} */
}

/**
 * Card Slides (Universal)
 * Content-driven height for flexible card designs.
 */
.paradis-card-slider .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

/**
 * Pagination Dots
 * Positioned below the slider with theme-aware colors.
 */
.paradis-card-slider .swiper-pagination {
	position: relative;
	margin-top: 20px;
	text-align: center;
}

.paradis-card-slider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: #ccc;
	opacity: 0.5;
	transition: opacity 0.3s ease;
	border-radius: 50%;
}

.paradis-card-slider .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--color-primary, #333);
}

/**
 * Navigation Arrows
 * Theme-aware colors with responsive sizing.
 */
.paradis-card-slider .swiper-button-prev,
.paradis-card-slider .swiper-button-next {
	color: var(--color-primary, #333);
	width: 44px;
	height: 44px;
}

.paradis-card-slider .swiper-button-prev:after,
.paradis-card-slider .swiper-button-next:after {
	font-size: 24px;
}

/**
 * Mobile Navigation Adjustments
 * Smaller controls for touch devices.
 */
@media (max-width: 767px) {
	.paradis-card-slider .swiper-button-prev,
	.paradis-card-slider .swiper-button-next {
		width: 32px;
		height: 32px;
	}
	
	.paradis-card-slider .swiper-button-prev:after,
	.paradis-card-slider .swiper-button-next:after {
		font-size: 18px;
	}
}


/* ==========================================================================
   Forminator Dropdown Overrides
   ========================================================================== */

/**
 *  Formats the Forminator Dropdown Container
 */

html body .forminator-select-dropdown {
    border: 2px solid #000000 !important; 
    border-radius: 16px !important; 
}
html body .forminator-select-dropdown.forminator-select-dropdown--below {
	z-index:5;
}
.select2-selection {
    border-radius:50px;
    background-color: transparent;
    border-width: 2px;
}

html body .forminator-select-dropdown {
	border: 2px solid #000000;
	border-radius: 16px;
}

.forminator-ui .select2-container--open .select2-selection__rendered {
    color: #000000 !important;
}

button.btn.forminator-button-submit {
	font-weight: var(--button-font-weight, 700)!important;
	font-size: var(--button-size-desktop, 1rem)!important;
	font-family: var(--font-ui)!important;
}