/* Custom CSS by CCloud Media */
/* Main styles */

/* ========================================================================
   Google Fonts Import (Editorial Serif, Script & Modern Sans)
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Imperial+Script&family=Pinyon+Script&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Italiana&family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ========================================================================
   Looping Hero Background Video & Curtain Effect (Option A)
   ======================================================================== */

.site-bg-video-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.site-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.site-bg-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.52) 100%);
    pointer-events: none;
}

/* Base page elements must remain transparent so the hero reveals the video */
html,
body,
.tm-page,
.tm-page-container,
.tm-main,
main#tm-main {
    background-color: transparent !important;
    background-image: none !important;
}

/* Persistent Header: persists throughout full page scroll */
.tm-header,
.tm-header-mobile {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 990 !important;
    background: transparent !important;
    --hs-nav-progress: 0;
}

.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container {
    background: transparent !important;
}

/* Translucent backdrop (#f9f2f1) that fades in smoothly with scroll progress */
.tm-header::before,
.tm-header-mobile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f9f2f1;
    backdrop-filter: blur(calc(var(--hs-nav-progress, 0) * 12px));
    -webkit-backdrop-filter: blur(calc(var(--hs-nav-progress, 0) * 12px));
    box-shadow: 0 4px 20px rgba(0, 0, 0, calc(var(--hs-nav-progress, 0) * 0.08));
    opacity: var(--hs-nav-progress, 0);
    pointer-events: none;
    z-index: -1;
    will-change: opacity, backdrop-filter;
    transition: opacity 0.25s ease-out;
}

/* Fallback state if toggled */
.tm-header.tm-header-scrolled::before,
.tm-header-mobile.tm-header-scrolled::before {
    opacity: 1;
}

/* Modern native scroll-driven animation: smooth compositor-driven interpolation */
@supports (animation-timeline: scroll()) {
    @keyframes hs-nav-bg-fade {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes hs-nav-links-fade {
        from {
            color: #ffffff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        }
        to {
            color: #037753;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0);
        }
    }

    .tm-header::before,
    .tm-header-mobile::before {
        animation: hs-nav-bg-fade linear both;
        animation-timeline: scroll();
        animation-range: 30vh 85vh;
    }

    .tm-header .uk-navbar-nav > li > a,
    .tm-header-overlay .uk-navbar-nav > li > a,
    .tm-header-mobile .uk-navbar-toggle {
        animation: hs-nav-links-fade linear both;
        animation-timeline: scroll();
        animation-range: 30vh 85vh;
    }
}

/* ========================================================================
   Hero Section: Strictly Transparent & Dead-Centered in Window
   ======================================================================== */

.hs-hero-section {
    position: relative;
    z-index: auto;
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.hs-hero-section > .uk-width-1-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Hero section and its contents must remain completely transparent */
.hs-hero-section,
.hs-hero-section *,
.uk-section.hs-hero-section,
div.hs-hero-section {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
}

/* ========================================================================
   Content Sections: Original Theme Background Colours & Parallax Curtain
   ======================================================================== */

/* Content sections elevate above the fixed video to slide over it like a curtain */
.hs-hero-section ~ .uk-section,
.hs-hero-section ~ .el-section,
.hs-hero-section ~ footer,
.tm-page > footer,
footer {
    position: relative;
    z-index: 2;
}

/* Original section background colours from theme */
.uk-section-default {
    background-color: #fef9ec !important;
}

.uk-section-primary {
    background-color: #f9f2f1 !important;
}

.uk-section-secondary {
    background-color: #004651 !important;
}

.uk-section-muted {
    background-color: #ebc9d6 !important;
}

/* Fallback for sections without a specific variant */
.hs-hero-section ~ .uk-section:not([class*="uk-section-"]) {
    background-color: #fef9ec !important;
}

/* Ensure non-hero pages keep their original solid section backgrounds */
body:not(:has(.hs-hero-section)) .uk-section:not([class*="uk-section-"]) {
    background-color: #fef9ec !important;
}

/* First section below the hero casts a soft curtain shadow over the video as it scrolls up */
.hs-hero-section + .uk-section {
    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.25);
}

/* ========================================================================
   Hero Title Block (Shrinks into persistent menu bar on scroll)
   ======================================================================== */

.hs-hero-title-block {
    text-align: center;
    color: #F2BB16;
    padding: 0;
    width: 90vw;
    max-width: 90vw;
    margin: 0;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center !important;
    z-index: 9999 !important;
    user-select: none;
    box-sizing: border-box;
    pointer-events: none;
    will-change: transform;
    transition: text-shadow 0.3s ease;
}

.hs-hero-title-block.hs-title-in-navbar {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.hs-hero-title-block.hs-title-in-navbar .hs-hero-title {
    text-shadow: none !important;
}

.hs-hero-title-block.hs-title-in-navbar .hs-hero-subtitle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Container that wraps Title and Subtitle so they share exact width */
.hs-hero-brand-wrap {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}

/* Single unified font for 'Holiday Story' (Imperial Script) spanning 2/3rds of viewport width */
.hs-hero-title {
    font-family: 'Imperial Script', cursive;
    font-size: clamp(2rem, 12.6vw, 20rem);
    line-height: 1.05;
    margin: 0;
    color: #F2BB16;
    text-shadow: none !important;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    white-space: nowrap;
    display: block;
}

/* Photography Subtitle: 75% of title width, centered, refined medium weight */
.hs-hero-subtitle {
    font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 2rem);
    font-weight: 500; /* Refined lighter weight (Medium 500) */
    text-transform: uppercase;
    color: #F2BB16;
    text-shadow: none !important;
    margin: clamp(0.9rem, 1.8vw, 2.2rem) auto 0 auto; /* Reduced gap between title and subtitle */
    width: 75%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.hs-hero-subtitle > span {
    display: inline-block;
    line-height: 1;
}

/* Menu item typography: matches landing page subtitle (Montserrat uppercase) */
.tm-header .uk-navbar-nav > li > a,
.tm-header-overlay .uk-navbar-nav > li > a,
.tm-header-mobile .uk-navbar-nav > li > a,
#tm-dialog .uk-nav > li > a,
#tm-dialog-mobile .uk-nav > li > a {
    font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 0.9em !important;
}

/* Ensure navbar links are crisp and bright across all sections with smooth color mixing */
.tm-header .uk-navbar-nav > li > a,
.tm-header-overlay .uk-navbar-nav > li > a,
.tm-header-mobile .uk-navbar-toggle {
    color: #ffffff;
    color: color-mix(in srgb, #037753 calc(var(--hs-nav-progress, 0) * 100%), #ffffff);
    text-shadow: 0 2px 8px rgba(0, 0, 0, calc((1 - var(--hs-nav-progress, 0)) * 0.6));
    transition: color 0.3s ease-out, text-shadow 0.3s ease-out;
}

/* Explicit rule when menu bar is coloured in: unselected text is forest green with zero text shadow */
.tm-header.tm-header-scrolled .uk-navbar-nav > li > a,
.tm-header.tm-header-scrolled .uk-navbar-toggle,
.tm-header-mobile.tm-header-scrolled .uk-navbar-toggle {
    color: #037753 !important;
    text-shadow: none !important;
}

/* Selected (active) item & on hover: ALWAYS brand gold (#F2BB16) */
.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a:focus,
.tm-header .uk-navbar-nav > li > a.uk-active,
.tm-header-overlay .uk-navbar-nav > li.uk-active > a,
.tm-header-overlay .uk-navbar-nav > li > a:hover,
.tm-header-overlay .uk-navbar-nav > li > a:focus,
.tm-header-mobile .uk-navbar-toggle:hover,
.tm-header.tm-header-scrolled .uk-navbar-nav > li.uk-active > a,
.tm-header.tm-header-scrolled .uk-navbar-nav > li > a:hover,
.tm-header.tm-header-scrolled .uk-navbar-nav > li > a:focus,
.tm-header.tm-header-scrolled .uk-navbar-nav > li > a.uk-active,
.tm-header.tm-header-scrolled .uk-navbar-toggle:hover,
.tm-header-mobile.tm-header-scrolled .uk-navbar-toggle:hover {
    color: #F2BB16 !important;
}

/* ========================================================================
   Corner-Split Navbar (Half Left Corner, Half Right Corner)
   ======================================================================== */

.tm-header .uk-navbar-container .uk-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: clamp(1.5rem, 3.5vw, 4rem) !important;
    padding-right: clamp(1.5rem, 3.5vw, 4rem) !important;
    box-sizing: border-box !important;
}

.tm-header .uk-navbar {
    width: 100% !important;
    display: flex !important;
}

.tm-header .uk-navbar-right {
    flex: 1 1 auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
}

.tm-header .uk-navbar-nav {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Split: 1st half in left corner, 2nd half in right corner */
.tm-header .uk-navbar-nav > li:nth-child(2) {
    margin-right: auto !important;
}

.tm-header .uk-navbar-nav > li:first-child > a {
    padding-left: 0 !important;
}

.tm-header .uk-navbar-nav > li:last-child > a {
    padding-right: 0 !important;
}

/* ========================================================================
   Custom Scrollbar: Transparent Track & Gold Accent
   ======================================================================== */

/* Prevent Windows/browser from using default light-theme white scrollbars */
html {
    color-scheme: dark;
}

/* Firefox standard scrollbars */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(242, 187, 22, 0.6) transparent;
    }
}

/* Chromium / WebKit (Opera, Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #F2BB16;
}