:root {
    --desktop-heading-xl: clamp(40px, 2.6vw, 60px);  /* Hero Title, h1 */
    --desktop-heading-lg: clamp(30px, 2vw, 40px);    /* h2 Section title */
    --desktop-heading: clamp(20px, 1.6vw, 30px);     /* h3 • h4 Card title */
    --desktop-body: clamp(18px, 1vw, 20px);          /* body, p, li */
    --desktop-caption: clamp(13px, 0.8vw, 16px);     /* caption */

    --letter-spaceing-hero: 0.35em;      /* h1 h2 */
    --letter-spaceing-title: 0.25em;      /* h3 h4 h5 h6 */
    --letter-spaceing-body: 0.15em;      /* body, p, li  */
    --letter-spaceing-tight: 0.05em;      

    --mobile-heading-xl: clamp(20px, 5vw, 28px);
    --mobile-heading-lg: clamp(18px, 4vw, 24px);
    --mobile-heading: clamp(16px, 3.5vw, 20px);
    --mobile-body: clamp(14px, 3vw, 18px);
    --mobile-caption: clamp(12px, 2.8vw, 16px);
}

/* -------------------------
   Language-based overrides
------------------------- */

/* Japanese */
body.translatepress-ja {
    --font-body: 'Zen Old Mincho', serif;
    --font-heading: 'Federo', 'Zen Old Mincho',sans-serif;
}

/* punctuation line breaks for Japanese */

.line-break-keep-all {
    word-break: keep-all;
}

/* English */
body.translatepress-en_US {
    --font-body: 'Federo','Zen Old Mincho', sans-serif;
    --font-heading: 'Federo', 'Zen Old Mincho', sans-serif;
}
body.translatepress-en_US p{ font-family:'Zen Old Mincho', sans-serif; }

/* Traditional Chinese */
body.translatepress-zh_TW {
    --font-body: 'Cactus Classical Serif', serif;
    --font-heading: 'Federo','Cactus Classical Serif', serif; /* or Chinese heading font */
}

/* Simplified Chinese */
body.translatepress-zh_CN {
    --font-body: 'Noto Serif SC', serif;
    --font-heading: 'Federo','Noto Serif SC', serif; /* or Chinese heading font */
}

/* Apply */
body, p, li { 
    font-family: var(--font-body);  
    font-size: var(--desktop-body);
    letter-spacing: var(--letter-spaceing-body);
}

/* hide banner */

.banner-none{
     display: none;
}

h1,h2,h3,h4,h5,h6 ,figcaption{ font-family: var(--font-heading); }

h1,h2 { letter-spacing: var(--letter-spaceing-hero);}
h1{ font-size: var(--desktop-heading-xl); }
h2{ font-size: var(--desktop-heading-lg); }

h3,h4,h5,h6 { 
    font-size: var(--desktop-heading); 
    letter-spacing: var(--letter-spaceing-title);
}

.caption, small {
    font-size: var(--desktop-caption);
    letter-spacing: var(--letter-spaceing-tight);
}

/* Smooth scroll down animation for jump to the section on Room|Facility page */
html {
  scroll-behavior: smooth;
}

a{
    transition: opacity 0.5s ease;
}
a:hover {
    opacity: 0.5;
    transition:  opacity 0.5s ease;
}

figure.wp-block-image img{
    max-width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;

}

/* See more button. From white to green. */
.btn-see-more > a.wp-block-button__link.has-primary-light-color:hover {
    opacity: 1;
    color: white !important;
    background-color: var(--wp--preset--color--primary);
    transition:  all 0.5s ease;
}
.btn-see-more > a.wp-block-button__link.has-dining-color:hover {
    opacity: 1;
    color: white !important;
    background-color: var(--wp--preset--color--dining);
    transition:  all 0.5s ease;
}

/* Reserve button. From green to white */
.btn-reserve> a.wp-block-button__link:hover{
    opacity: 1;
    color: var(--wp--preset--color--primary) !important;;
    background-color: white !important;
    transition:  all 0.5s ease;
}
.btn-see-more > a.wp-block-button__link.has-primary-light-color,
.btn-see-more > a.wp-block-button__link.has-dining-color,
.btn-reserve> a.wp-block-button__link{
    transition:  all 0.5s ease;
}

/* slyling for floting INS logo */
.floating-button-wrapper{
    position: fixed !important; 
    width: 100%;
    bottom: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.floating-button-wrapper.visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Floating Ins icon size */
.wp-block-social-links .wp-social-link svg {
    height: 2em;
    width: 2em;
}


/* Swiper pagination z-index fix */
/* Prevent it overflows the Header */
.swiper-pagination{
    z-index: 1;
}

/* HERO - Scroll indicator */
.scroll-indicator {
    bottom: 10px;
    height: 25svh;
    position: relative;
}

.scroll-line {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(204, 204, 204, 0) 0%, #d2d2d2 30%, #d2d2d2 70%, rgba(204, 204, 204, 0) 100%);
    position: relative;
    overflow: hidden;
}

.scroll-square {
    width: 2px;
    height: min(calc(2.5 * 1440px / 100), 2.5vw);
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    /* left: 50%; */
    transform: translateX(-25%);
    animation: scrollSquaresAnimation 2.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
    animation-fill-mode: both;
}


@keyframes scrollSquaresAnimation {
    0% {
        top: 0;
        opacity: 0.3;
    }

    85% {
        top: calc(100% - min(calc(2.5 * 1440px / 100), 4.5vw));
        /* Subtract square height */
        opacity: 1;
    }

    100% {
        top: calc(100% - min(calc(2.5* 1440px / 100), 4.5vw));
        opacity: 0;
    }
}

/* section effects */

.section-fade-white::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient from transparent to white */
    background: linear-gradient(to bottom, transparent 70%, #ffffff 100%);
    pointer-events: none;
    z-index: 1;
}

/* Specific targeting for headings and text if needed */
.section-fade-white p, 
.section-fade-white span, 
.section-fade-white h1, 
.section-fade-white h2, 
.section-fade-white h3 {
    position: relative;
    z-index: 5;
}

/* image effects */


/* Ensure all inner content sits ABOVE the gradient */
.img-black-gradient-low p {
    position: relative;
    z-index: 2;
}

/* Your gradient overlay */
.img-black-gradient-low::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 50% 100%, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0) 70%
    );
    pointer-events: none;
    /* Set this to 1 so it stays behind the text but above the image */
    z-index: 1; 
}

/* Ensure all inner content sits ABOVE the gradient */
.img-black-gradient-high p,
.img-black-gradient-high span,
.img-black-gradient-high h1,
.img-black-gradient-high h2,
.img-black-gradient-high h3
{
    position: relative;
    z-index: 2;
}

/* Your gradient overlay */
.img-black-gradient-high::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 50% 0%, 
        rgba(0, 0, 0, 0.5) 0%, 
        rgba(0, 0, 0, 0) 70%
    );
    pointer-events: none;
    /* Set this to 1 so it stays behind the text but above the image */
    z-index: 1; 
}

@media (max-width: 768px){
    h1 { font-size: var(--mobile-heading-xl); }
    h2 { font-size: var(--mobile-heading-lg);}
    h3,h4 { font-size: var(--mobile-heading); }
    body, p, li { font-size: var(--mobile-body);}
    .caption { font-size: var(--mobile-caption);}

    .btn-center-mobile{
        justify-content: center;
    }

    .mobile-flex-order-0{
        order: 0;
    }
    .mobile-flex-order-1{
        order: 1;
    }
    .mobile-flex-order-2{
        order: 2;
    }
    .mobile-center{
        text-align: center;
        align-items: center;
        justify-content: center;
        overflow-wrap: break-word;
        line-break: loose;
    }
}