/*
Theme Name: Celeste
Theme URI: http://akamotu.com/
Author: Akamotu
Author URI: http://akamotu.com/
Description: Celeste Theme.
Version: 2.20.1
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: celeste
Tags: custom-theme, responsive, wpbakery
*/

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

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

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

/* Display Script (CormorantGaramond Light Italic) */
@font-face {
    font-family: 'CormorantGaramond';
    src: url('./assets/fonts/CormorantGaramond-200Italic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
/* Display Script (CormorantGaramond Regular) */
@font-face {
    font-family: 'CormorantGaramond';
    src: url('./assets/fonts/CormorantGaramond-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Display Script (CormorantGaramond Regular Italic) */
@font-face {
    font-family: 'CormorantGaramond';
    src: url('./assets/fonts/CormorantGaramond-400Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

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

/* Display Script (CormorantGaramond Medium Italic) */
@font-face {
    font-family: 'CormorantGaramond';
    src: url('./assets/fonts/CormorantGaramond-500Italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

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

/* Display Script (CormorantGaramond Semi-Bold Italic) */
@font-face {
    font-family: 'CormorantGaramond';
    src: url('./assets/fonts/CormorantGaramond-600Italic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
/* Display Script (CormorantGaramond Bold) */
@font-face {
    font-family: 'CormorantGaramond';
    src: url('./assets/fonts/CormorantGaramond-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Display Script (CormorantGaramond Bold Italic) */
@font-face {
    font-family: 'CormorantGaramond';
    src: url('./assets/fonts/CormorantGaramond-700Italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Body Text (Lexend Thin) */
@font-face {
    font-family: 'Lexend';
    src: url('./assets/fonts/Lexend-100.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
/* Body Text (Lexend Extra-Light) */
@font-face {
    font-family: 'Lexend';
    src: url('./assets/fonts/Lexend-200.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
/* Body Text (Lexend Light) */
@font-face {
    font-family: 'Lexend';
    src: url('./assets/fonts/Lexend-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

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

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

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

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

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

:root {
	/* Fonts */
	--font-modern: 'Lexend', sans-serif;
	--font-display: 'CormorantGaramond', serif;
	--font-body: 'Lexend', sans-serif;
	--font-ui: 'Lexend', sans-serif;

	/* Brand Colours (Semantic Naming) */
	--color-primary: #f8f7f2;
	--color-secondary: #1a1a1a;
	--color-third: #a72e3d;
	--color-fourth: #647692;
	--color-additional: #333f48;

	/* Core Element Backgrounds */
	--bg-body: #f8f7f2;
	--bg-footer: #1a1a1a;
	--bg-header: transparent;
	--bg-header-sticky: #f8f7f2;

	/* UI Defaults */
	--btn-radius: 50px;
	--container-width: 1920px;
    --content-wide: 1920px;
    --button-line-height: 20px;
    --button-size-desktop: 14px;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Visually hide screen reader text but keep it available for assistive tech */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Display the skip link when focused via keyboard navigation */
.screen-reader-text:focus {
	background-color: var(--bg-body, #f8f7f2);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--color-secondary, #1a1a1a);
	display: block;
	font-family: var(--font-ui);
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   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.
   The spacing amount is a fluid clamp() driven by --celeste-header-spacing (Layout options → Global Header Spacing).
   Responsive scaling is baked into the token itself — no media query override needed.
   This can be disabled via ACF 'Disable Header Spacing' toggle for hero pages. */
body.celeste-top-padding {
    padding-top: var(--celeste-header-spacing, 200px);
}

@media (max-width: 768px) {
	.site-main {overflow-x: hidden;}
}

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

.site-main ul:not(.ticket-filters ul, .fc-icon-grid) {
    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;
}

@media (min-width: 768px) {
    .site-main,
    .container,
    .footer-container {
        padding-left: clamp(20px, calc(7.5vw - 9px), 150px);
        padding-right: clamp(20px, calc(7.5vw - 9px), 150px);
    }
}

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

/* Default Vertical Row Spacing — driven by --celeste-row-spacing (Layout options → Global Row Spacing).
   The token is a fluid clamp() — no media query override needed.
   First and last rows suppress their top margin to avoid double-spacing at page edges. */
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: var(--celeste-row-spacing, 80px);
	margin-bottom: var(--celeste-row-spacing, 80px);
}

@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);
}

/* ==========================================================================
   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);
}

p {
	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;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   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 */
.celeste-col-left > .vc_column-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

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

/* Desktop Alignment - Right */
.celeste-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 */
	.celeste-col-mob-left > .vc_column-inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

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

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

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

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