/* 
    Tatle tale Website Polish & Responsive CSS
    Targets Wix-exported structures surgically.
*/

/* =============================================
   Tatle tale Story page — text readability fix
   Adds soft white backdrop behind story text
   without removing the sandy background.
   ============================================= */
.tt-story-text-wrapper {
    padding: 24px 32px !important;
    box-sizing: border-box !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
}

/* Ensure the water background expands to fit the full story text */
#comp-mn3ibqmf,
#comp-mn3ibqn5,
.comp-mn3ibqn5-container {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
}

.comp-mn3ibqn5-container {
    grid-template-rows: max-content !important;
}

#comp-mn3ibqmf ._backgroundLayer_1mvr8_24,
#comp-mn3ibqn72,
.comp-mn3ibqn72 {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

/* Force video to cover the background */
.comp-mn3ibqn72 video, 
.comp-mn3ibqn72 wow-image {
    height: 100% !important;
    object-fit: cover !important;
}

/* 1. Global Responsive & Overflow Fixes */
html,
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Ensure main page scrollbar is active */
    width: 100% !important;
    position: relative !important;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    min-height: 100% !important;
    height: auto !important;
}

/* Force body and html to be scrollable if Wix tries to block them */
body.blockSiteScrolling,
body.siteScrollingBlocked,
body.fullScreenMode,
body.siteScrollingBlockedIOSFix {
    overflow-y: auto !important;
    position: relative !important;
    height: auto !important;
}

* {
    box-sizing: border-box;
}

/* Fix for Wix masterPage and other containers which often cause double scrollbars */
#masterPage,
.masterPage,
#SITE_CONTAINER,
#site-root,
#SITE_PAGES,
#PAGES_CONTAINER,
#DYNAMIC_STRUCTURE_CONTAINER,
#CURRENT_PAGE_WRAPPER,
[data-testid="responsive-container-overflow"],
.xv1rf-overflow-wrapper {
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* Force no internal vertical scroll */
    overflow: visible !important;
    height: auto !important;
    min-height: 100px !important; /* Ensure it doesn't collapse to 0 */
    position: relative !important;
    display: block !important;
}

/* Mesh layouts in Wix are notorious for height: 0 !important on mobile */
.mesh-layout,
[data-mesh-id$="inlineContent"],
[data-mesh-id$="gridContainer"] {
    height: auto !important;
    min-height: 50px !important;
    overflow: visible !important;
    display: block !important;
}

/* 2. Image Scaling & Responsive Media */
img,
video,
canvas,
svg,
.wow-image,
[data-testid="linkElement"] img {
    max-width: 100% !important;
    height: auto !important;
}

/* Force Wix images to respect container bounds on mobile */
@media screen and (max-width: 768px) {
    [data-testid="mesh-container-content"] {
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .wixui-image,
    .wow-image {
        width: 100% !important;
        height: auto !important;
    }
}

/* 3. Subtle Hover Effects */
a,
button,
.wixui-button,
.wixui-horizontal-menu__item-link,
[data-testid="linkElement"],
.tt-workshop-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, filter 0.3s ease !important;
}

a:hover,
button:hover,
.wixui-button:hover,
.wixui-horizontal-menu__item-link:hover,
[data-testid="linkElement"]:hover {
    opacity: 0.85 !important;
    transform: translateY(-2px) !important;
}

/* Logo hover effect */
.logo-wrapper a:hover,
.tt-footer-left a:hover {
    transform: scale(1.05) !important;
    opacity: 1 !important;
}

/* Logo Sizing Standardization */
/* Navbar Logo: 140px (Desktop) / 97px (Mobile) */
.logo-wrapper img, 
#SITE_HEADER img[alt="Homepage"],
.comp-mnhr9cdc_r_comp-ml6dpvaj img {
    width: 140px !important;
    height: auto !important;
    transition: width 0.3s ease !important;
}

/* Footer Logo: 150px (Desktop) / 110px (Mobile) */
.tt-footer-logo {
    width: 150px !important;
    height: auto !important;
    transition: width 0.3s ease !important;
}

/* 4. Scroll Reveal Base Styles */
[data-tt-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

[data-tt-reveal].tt-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 5. Navbar Polish */
.navbar,
#SITE_HEADER {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 6. Mobile Spacing & Text Wrapping */
@media screen and (max-width: 480px) {

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* 7. Top Gap Fix - Ensures navbar is flush with top of screen */
/* Override Wix dynamic spacing variables that often cause gaps */
:root {
    --computed-space-above: 0 !important;
    --space-above: 0 !important;
}

#SITE_PAGES,
#masterPage,
#site-root,
#SITE_CONTAINER,
[data-testid="responsive-container-overflow"],
[data-testid="responsive-container-content"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
    top: 0 !important;
}

header,
#SITE_HEADER,
.S6Dcte {
    margin-top: 0 !important;
    top: 0 !important;
}

/* 8. Workshops Section - Zigzag Layout */
.tt-clean-workshops {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.tt-workshops-heading {
    text-align: center;
    margin-bottom: 20px;
}

.tt-workshops-copy {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    line-height: 1.6;
    color: #444;
}

.tt-w-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.tt-workshop-image-wrap,
.tt-workshop-card {
    flex: 1;
    width: 50%;
}

.tt-workshop-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: block;
}

.tt-workshop-card {
    padding: 20px;
}

.tt-workshop-card h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #333;
}

.tt-workshop-card p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 25px;
    color: #555;
}

.tt-workshop-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #333;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease !important;
}

.tt-workshop-btn:hover {
    background-color: #555;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    opacity: 1 !important;
}

/* Responsive Stacking */
@media screen and (max-width: 768px) {
    .tt-w-row {
        flex-direction: column !important;
        gap: 30px;
        margin-bottom: 60px;
    }

    .tt-workshop-image-wrap,
    .tt-workshop-card {
        width: 100%;
    }

    /* For Row 2, swap order on mobile so image is on top if desired */
    /* Currently Row 2 is Card then Image in HTML. Let's make it Image then Card. */
    .row-2 {
        flex-direction: column-reverse !important;
    }

    .tt-workshop-card {
        text-align: center;
        padding: 0;
    }
}

/* 9. Site-wide Footer Styling */
.tt-main-footer {
    background-color: #fff;
    padding: 40px 20px 20px;
    border-top: 1px solid #eee;
    color: #333;
    position: relative;
    z-index: 10;
}

.tt-footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.tt-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}

.tt-footer-left,
.tt-footer-center,
.tt-footer-right {
    flex: 1;
}

.tt-footer-left {
    display: flex;
    justify-content: flex-start;
}

.tt-footer-logo {
    width: 150px !important;
    height: auto !important;
}

.tt-footer-center {
    display: flex;
    justify-content: center;
}

.tt-footer-nav {
    display: flex;
    gap: 30px;
}

.tt-footer-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 1rem;
}

.tt-footer-right {
    display: flex;
    justify-content: flex-end;
}

.tt-footer-socials {
    display: flex;
    gap: 15px;
}

.tt-footer-socials a {
    display: block;
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.tt-footer-socials a:hover {
    transform: scale(1.1);
}

.tt-footer-socials svg {
    width: 100%;
    height: 100%;
    fill: #333;
}

.tt-footer-bottom {
    text-align: center;
    border-top: 1px solid #f5f5f5;
    padding-top: 25px;
}

.tt-footer-email {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: #111;
    font-weight: 600;
}

.tt-footer-copy {
    margin: 0;
    font-size: 0.95rem;
    color: #444;
    font-weight: 500;
}

/* Footer Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .tt-footer-top {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .tt-footer-left,
    .tt-footer-center,
    .tt-footer-right {
        justify-content: center;
        flex: none;
        width: 100%;
    }

    .tt-footer-nav {
        flex-direction: column;
        gap: 15px;
    }

    /* Mobile Logo Sizing */
    .logo-wrapper img, 
    #SITE_HEADER img[alt="Homepage"],
    .comp-mnhr9cdc_r_comp-ml6dpvaj img {
        width: 97px !important;
    }
    .tt-footer-logo {
        width: 110px !important;
    }
}

/* Force footer visibility — override Wix parent clipping */
.tt-main-footer,
.tt-main-footer * {
    visibility: visible !important;
    opacity: 1 !important;
}

.tt-main-footer {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Ensure Wix container ancestors of footer don't clip it */
/* Ensure Wix container ancestors of footer and survey don't clip it */
#SITE_CONTAINER,
#site-root,
#masterPage,
#PAGES_CONTAINER,
#SITE_PAGES,
#CURRENT_PAGE_WRAPPER,
#DYNAMIC_STRUCTURE_CONTAINER,
#main_MF {
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    min-height: 100% !important;
    display: block !important;
}

/* Specific fix for the survey container */
[data-mesh-id="comp-mnht30g2inlineContent"],
#comp-mnht30g2 {
    overflow: visible !important;
    height: auto !important;
    min-height: 500px !important;
    display: block !important;
    position: relative !important;
}

/* Email link style in footer */
.tt-footer-email a {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

.tt-footer-email a:hover {
    text-decoration: underline;
}

/* 10. Tatle tale Story Page Cards */
.tt-card-img-wrapper {
    width: 100% !important;
    min-height: 250px !important;
    background-color: #f5f5f5 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tt-card-img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
}@media screen and (max-width: 768px) {}

/* Unified Social Icons Styling */
.tt-footer-socials, 
.faq-footer-socials, 
.privacy-footer-socials,
.faq-footer-socials-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    width: 100%;
}

.tt-social-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: #f5f5f5 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: #333 !important;
    text-decoration: none !important;
    padding: 0 !important;
    border: none !important;
}

.tt-social-icon:hover {
    background-color: #333 !important;
    color: #fff !important;
    transform: translateY(-3px) scale(1.1) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.tt-social-icon svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
    transition: fill 0.3s ease !important;
}

.tt-social-icon:hover svg {
    fill: #fff !important;
}

/* Responsive sizes */
@media screen and (max-width: 1024px) {
    .tt-social-icon {
        width: 34px !important;
        height: 34px !important;
    }
    .tt-social-icon svg {
        width: 17px !important;
        height: 17px !important;
    }
}

@media screen and (max-width: 768px) {
    .tt-social-icon {
        width: 30px !important;
        height: 30px !important;
    }
    .tt-social-icon svg {
        width: 15px !important;
        height: 15px !important;
    }
    
    .tt-footer-socials, 
    .faq-footer-socials, 
    .privacy-footer-socials {
        gap: 15px;
    }
}

@media screen and (max-width: 480px) {
    .tt-social-icon {
        width: 26px !important;
        height: 26px !important;
    }
    .tt-social-icon svg {
        width: 13px !important;
        height: 13px !important;
    }
}
/* 
   ULTIMATE STATIC MODE: Kill All Scroll Effects & Parallax
   -------------------------------------------------------
   This block aggressively neutralizes every dynamic rendering effect 
   to force a completely static, standard document flow.
*/

/* 1. Neutralize All Dynamic Visibility & Transforms Globally */
*, *::before, *::after {
    /* Stop all transitions and animations immediately */
    transition: none !important;
    animation: none !important;
    /* Kill hardware acceleration that Wix uses for scroll reveal */
    will-change: auto !important;
}

/* 2. Force Immediate Visibility & Static Positioning */
#site-root, 
#PAGES_CONTAINER, 
#SITE_PAGES,
#SITE_CONTAINER,
#DYNAMIC_STRUCTURE_CONTAINER,
#CURRENT_PAGE_WRAPPER,
#main_MF,
[data-mesh-id],
[data-reveal], 
[data-animation-name],
[data-animation-trigger],
[data-reveal-within],
[data-reveal-padding],
[data-wix-scroll],
.mesh-layout-active,
.wixui-section,
.wixui-image,
.wow-image,
.tpa-widget-native-canvas,
.comp-mnht30g2 {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: none !important;
    filter: none !important;
    clip: auto !important;
    clip-path: none !important;
}

/* 3. Kill Parallax Effects (Fixed Backgrounds) */
[data-bg-effect],
.bg-effect,
[class*="parallax"],
[id*="bg-layer"],
.SITE_BACKGROUND,
#SITE_BACKGROUND,
section,
.wixui-section {
    background-attachment: scroll !important;
    transform: none !important;
}

/* 4. Disable all reveal and animation-related classes */
[class*="reveal"], 
[class*="animation"], 
[class*="fade-in"],
[class*="transition"],
[class*="scroll-reveal"],
.tt-visible,
.pre-reveal,
.revelation {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* 5. Force Native Browser Scrolling (Disable Smooth-Scroll JS) */
html, body {
    overflow: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    position: relative !important;
    /* Kill CSS smooth scroll */
    scroll-behavior: auto !important; 
    /* Force standard scroll speed on mobile */
    -webkit-overflow-scrolling: touch !important;
    /* Prevent JS from locking the body */
    top: auto !important;
}

/* 6. Clean Container Flow */
#site-root, #masterPage, #PAGES_CONTAINER {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    display: block !important;
    position: relative !important;
    transform: none !important;
}

/* 7. Survey Component Stability */
[data-mesh-id*="comp-mnht30g2"],
#comp-mnht30g2,
#comp-mnht30g2__iframe,
.tpa-widget-native-canvas {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 850px !important;
    display: block !important;
    transform: none !important;
    position: relative !important;
}




/* =========================================================
   FINAL NAVBAR + PARAGRAPH CONSISTENCY FIX
   - Same navbar on every page
   - Same order: Home | Tatle tale Story | Workshops | Community Survey | Bookings | About Us | Contact
   - Hides mixed Wix/custom navbars so only one uniform navbar shows
   ========================================================= */
.tt-old-navbar-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tt-unified-navbar-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 16px 10px 16px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 99999 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.tt-unified-navbar {
    width: auto !important;
    max-width: calc(100vw - 32px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 26px !important;
    padding: 16px 28px !important;
    margin: 0 auto !important;
    background: rgba(245, 244, 241, 0.96) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
}

.tt-unified-navbar a {
    font-family: Caveat, "Comic Sans MS", cursive !important;
    font-size: 25px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    color: #174f63 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
    padding: 4px 2px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
}

.tt-unified-navbar a:hover {
    opacity: 0.72 !important;
    transform: none !important;
}

.tt-unified-navbar a.active {
    text-decoration: underline !important;
    text-underline-offset: 7px !important;
}

/* Keep paragraph reading size consistent; does not target navbar links */
body p,
body p span,
.wrichtext p,
.wrichtext p span,
.wixui-rich-text p,
.wixui-rich-text p span {
    font-size: 25px !important;
    line-height: 1.65 !important;
}

@media (max-width: 1100px) {
    .tt-unified-navbar {
        gap: 20px !important;
        padding: 14px 22px !important;
    }
    .tt-unified-navbar a {
        font-size: 24px !important;
    }
}

@media (max-width: 768px) {
    .tt-unified-navbar-wrap {
        padding: 14px 10px 10px 10px !important;
    }
    .tt-unified-navbar {
        max-width: calc(100vw - 20px) !important;
        gap: 14px 18px !important;
        padding: 13px 16px !important;
        border-radius: 28px !important;
    }
    .tt-unified-navbar a {
        font-size: 22px !important;
    }
    body p,
    body p span,
    .wrichtext p,
    .wrichtext p span,
    .wixui-rich-text p,
    .wixui-rich-text p span {
        font-size: 21px !important;
        line-height: 1.6 !important;
    }
}

/* TOP-LEFT LOGO PATCH - real website code only */
.tt-top-left-logo {
    position: fixed !important;
    top: 22px !important;
    left: 42px !important;
    width: 125px !important;
    height: auto !important;
    z-index: 100000 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
}

/* Hide only old duplicated logo placements, not the new top-left logo */
.logo-wrapper,
.tt-global-logo,
.tt-footer-logo,
.footer-logo,
.privacy-footer-logo,
.faq-footer-logo {
    display: none !important;
    visibility: hidden !important;
}

/* Keep the unified navbar clear of the top-left logo */
.tt-unified-navbar-wrap {
    padding-top: 28px !important;
}

@media (max-width: 768px) {
    .tt-top-left-logo {
        top: 14px !important;
        left: 14px !important;
        width: 82px !important;
    }
    .tt-unified-navbar-wrap {
        padding-top: 92px !important;
    }
}

/* =========================================================
   FIXED HEADER NAVBAR PATCH - 20 May 2026
   Problem fixed: logo was fixed, but navbar was relative and scrolled away.
   This makes the whole injected heading/nav area fixed on all non-survey pages.
   ========================================================= */
body:not(.tt-use-page-header-nav) {
    padding-top: 132px !important;
}

body:not(.tt-use-page-header-nav) .tt-unified-navbar-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 112px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px 24px 18px 190px !important;
    margin: 0 !important;
    background: rgba(245, 244, 241, 0.96) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
    z-index: 99998 !important;
    box-sizing: border-box !important;
}

body:not(.tt-use-page-header-nav) .tt-unified-navbar {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

body:not(.tt-use-page-header-nav) .tt-top-left-logo {
    position: fixed !important;
    top: 16px !important;
    left: 42px !important;
    width: 118px !important;
    z-index: 100000 !important;
}

/* Wix-exported pages often ignore body padding because their root containers are positioned.
   This gives those pages breathing room below the fixed heading. */
body:not(.tt-use-page-header-nav) #SITE_CONTAINER,
body:not(.tt-use-page-header-nav) #site-root,
body:not(.tt-use-page-header-nav) #masterPage {
    margin-top: 0 !important;
}

/* Keep native custom-page headers from competing with the injected fixed header. */
body:not(.tt-use-page-header-nav) header.site-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1150px) {
    body:not(.tt-use-page-header-nav) {
        padding-top: 150px !important;
    }
    body:not(.tt-use-page-header-nav) .tt-unified-navbar-wrap {
        min-height: 130px !important;
        padding: 20px 18px 16px 160px !important;
    }
    body:not(.tt-use-page-header-nav) .tt-top-left-logo {
        left: 28px !important;
        width: 104px !important;
    }
}

@media (max-width: 768px) {
    body:not(.tt-use-page-header-nav) {
        padding-top: 178px !important;
    }
    body:not(.tt-use-page-header-nav) .tt-unified-navbar-wrap {
        min-height: 158px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 92px 12px 14px 12px !important;
    }
    body:not(.tt-use-page-header-nav) .tt-unified-navbar {
        gap: 12px 16px !important;
        justify-content: center !important;
        max-width: calc(100vw - 20px) !important;
    }
    body:not(.tt-use-page-header-nav) .tt-unified-navbar a {
        font-size: 21px !important;
    }
    body:not(.tt-use-page-header-nav) .tt-top-left-logo {
        top: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 78px !important;
    }
}

@media (max-width: 480px) {
    body:not(.tt-use-page-header-nav) {
        padding-top: 205px !important;
    }
    body:not(.tt-use-page-header-nav) .tt-unified-navbar-wrap {
        min-height: 188px !important;
    }
    body:not(.tt-use-page-header-nav) .tt-unified-navbar a {
        font-size: 19px !important;
    }
}

/* =========================================
   SAFE BUTTON TEXT VISIBILITY FIX
   Only targets CTA buttons. Does NOT touch navbar/header/logo.
   ========================================= */

/* Explore Chapter 1 / 2 / 3 */
a.tt-workshop-btn,
.tt-workshop-btn,
.tt-workshop-card .tt-workshop-btn {
    font-size: 26px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    padding: 18px 40px !important;
    min-height: 58px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Book Now */
a.booking-cta-btn,
.booking-cta-btn,
.booking-heading-row .booking-cta-btn {
    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    padding: 20px 48px !important;
    min-height: 62px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Know more about us */
a.slow-down-button,
.slow-down-button,
.slow-down-button *,
.slow-down-button span,
.slow-down-button .label {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

/* Mobile: larger than before, but not layout-breaking */
@media (max-width: 768px) {
    a.tt-workshop-btn,
    .tt-workshop-btn,
    .tt-workshop-card .tt-workshop-btn {
        font-size: 22px !important;
        padding: 16px 30px !important;
        min-height: 52px !important;
    }

    a.booking-cta-btn,
    .booking-cta-btn,
    .booking-heading-row .booking-cta-btn {
        font-size: 23px !important;
        padding: 17px 34px !important;
        min-height: 54px !important;
    }

    a.slow-down-button,
    .slow-down-button,
    .slow-down-button *,
    .slow-down-button span,
    .slow-down-button .label {
        font-size: 23px !important;
    }
}

/* ==================================================
   SAFE VIEW CHAPTER BUTTON TEXT FIX
   Only the View Chapter 01 / 02 / 03 button label is enlarged.
   Does not target chapter links, cards, navbar, or layout.
   ================================================== */
.tt-view-chapter-text {
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.tt-view-chapter-btn-safe {
    min-height: 48px !important;
    padding: 12px 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

@media (max-width:768px) {
    .tt-view-chapter-text {
        font-size: 19px !important;
    }
    .tt-view-chapter-btn-safe {
        min-height: 44px !important;
        padding: 11px 24px !important;
    }
}