/* ============================================================
   AMAN-SPEC TYPOGRAPHY
   Display serif (Didot) for headings + logo.
   Body serif (Fraunces from Google Fonts) for paragraphs.
   Humanist sans (Inter) for labels, nav, buttons.
   ============================================================ */

/* Didot — self-hosted display serif (headings only) */
@font-face {
    font-family: 'Didot';
    src: url('../fonts/didot-2/Didot.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Didot';
    src: url('../fonts/didot-2/Didot Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Didot';
    src: url('../fonts/didot-2/Didot Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Body copy — serif, weight 400, dense line-height like Aman (1.45–1.55) */
body {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.012em;
    color: #2b2926;
}

/* Headings — Didot, weight 400, near-zero tracking */
h1, h2, h3, h4, h5, h6,
.font-display-lg, .font-headline-lg, .font-headline-md {
    font-family: 'Didot', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.005em;
}
/* Headings inherit color from their context (light sections = dark body color,
   dark/image sections = the light text color set on their container). This avoids
   forcing dark text onto headings that sit over dark hero imagery. */

/* Pull quotes — italic serif */
blockquote, .pull-quote {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Labels, eyebrows, nav — Inter, restrained tracking (Aman ≈ 0.143em) */
.font-label-caps,
.overline {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0.16em;
    font-size: 11px;
    text-transform: uppercase;
}
.overline {
    color: #6b6358;
}

/* Body paragraphs — serif, 400, dense */
p, .font-body-md, .font-body-lg {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    line-height: 1.7;
}

/* Buttons — Inter, restrained tracking */
button, .btn, a.cta {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0.16em;
    font-size: 12px;
    text-transform: uppercase;
}

/* Font helpers */
.font-ornamental {
    font-family: 'Didot', Georgia, serif;
}
.text-ornamental { 
    letter-spacing: 0.2em; 
}

/* Scrollbar completely hidden */
html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Scroll reveal initial states */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility: honour reduced-motion — neutralise reveals, parallax & zooms */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
    .img-hover-container:hover img { transform: none !important; }
}

/* Jali Grid Pattern */
.jali-pattern {
    background-image: radial-gradient(#705b3c 0.5px, transparent 0.5px);
    background-size: 18px 18px;
    opacity: 0.05;
}

/* Tactile Paper / Sandstone Texture — Suryagarh-style warm beige wall */
.paper-texture {
    background-color: #b8a784;
    background-image: url("../public/images/texture.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Rajputana Arch Frame Clipping Path */
.arch-frame {
    clip-path: path("M 0 500 L 0 150 C 0 50 100 0 250 0 C 400 0 500 50 500 150 L 500 500 Z");
    overflow: hidden;
}

/* Image zoom & hover containers */
.img-hover-container {
    overflow: hidden;
}
.img-hover-container img {
    transition: none;
}
.img-hover-container:hover img {
    transform: none;
}

/* Menu Hover Item Interactions */
.menu-item-hover:hover .menu-dot {
    opacity: 1;
    transform: translateX(0);
}

/* Parallax image transitions */
.image-reveal {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom global overrides */
.nav-link, 
.nav-icon, 
.nav-logo-primary,
.nav-logo-secondary,
.nav-btn {
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Generous, responsive horizontal margins (Aman/Suryagarh breathing room) */
.px-margin-desktop {
    padding-left: clamp(24px, 6vw, 80px) !important;
    padding-right: clamp(24px, 6vw, 80px) !important;
}

/* Edge-to-edge feature images / heroes that break out of any container */
.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

header#top-nav {
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* NAV — matches index.html exactly */

/* Default state: white (over hero image) */
header#top-nav .nav-link,
header#top-nav .nav-icon {
    color: white;
}
header#top-nav .nav-logo-primary {
    color: white;
}
header#top-nav .nav-logo-secondary {
    color: rgba(255,255,255,0.6);
}
header#top-nav .nav-btn {
    color: #ffffff;
    border-color: rgba(255,255,255,0.7);
    background-color: transparent;
}
header#top-nav:not(.scrolled) .nav-btn:hover {
    background-color: #705b3c;
    color: #ffffff;
    border-color: #705b3c;
}

/* Scrolled state & Always scrolled state for light-header pages */
header#top-nav.scrolled,
body.nav-always-scrolled header#top-nav {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(112, 91, 60, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
header#top-nav.scrolled .nav-link,
header#top-nav.scrolled .nav-icon,
body.nav-always-scrolled header#top-nav .nav-link,
body.nav-always-scrolled header#top-nav .nav-icon {
    color: #705b3c !important;
}
header#top-nav.scrolled .nav-logo-primary,
body.nav-always-scrolled header#top-nav .nav-logo-primary {
    color: #705b3c !important;
}
header#top-nav.scrolled .nav-logo-secondary,
body.nav-always-scrolled header#top-nav .nav-logo-secondary {
    color: rgba(112, 91, 60, 0.7) !important;
}
header#top-nav.scrolled .nav-btn,
body.nav-always-scrolled header#top-nav .nav-btn {
    color: #705b3c !important;
    border-color: #705b3c !important;
}
header#top-nav.scrolled .nav-btn:hover,
body.nav-always-scrolled header#top-nav .nav-btn:hover {
    background-color: #705b3c !important;
    color: #ffffff !important;
}

/* Container width — expansive luxury, not a narrow column */
.max-w-max-width {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

/* Material Icons properties override */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
}

/* =====================================
   PINNED GALLERY: Suryagarh-style scroll-driven slide-up
   ===================================== */

#pinned-gallery {
    position: relative;
    background: #f0ece2;
}

#pinned-gallery .pinned-content {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

/* Strip transitions — smooth slide, no bounce */
#gallery-strip {
    transition: transform 0.05s linear;
    will-change: transform;
}

/* Left text transitions */
#gallery-badge,
#gallery-number,
#gallery-title-left {
    transition: opacity 300ms ease;
}

/* =====================================
   AMAN-STYLE HORIZONTAL SCROLL GALLERY
   Single row — varying image heights, horizontal scroll with snap
   ===================================== */

/* Wrapper — scrollbar hidden, no horizontal padding (track owns it) */
.hs-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hs-wrapper::-webkit-scrollbar {
    display: none;
    height: 0;
}

/* Horizontal flex track — ALL images centered on one axis, tight gaps */
.hs-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(12px, 1.5vw, 24px);
    width: max-content;
    padding: 56px clamp(40px, 8vw, 120px);
    position: relative;
}

/* Each image figure */
.hs-item {
    flex-shrink: 0;
    overflow: hidden;
    margin: 0;
    position: relative;
    border-radius: 0;
    width: auto;
    min-width: 0;
    cursor: pointer;
    /* Uniform height for every card — only the aspect ratio (and so the
       width) differs between portrait/square/landscape photos. */
    height: clamp(220px, 32vh, 320px);
}

/* Portrait */
.hs-item.tall {
    aspect-ratio: 4 / 5;
}

/* Square */
.hs-item.square {
    aspect-ratio: 1 / 1;
}

/* Wide landscape */
.hs-item.short {
    aspect-ratio: 3 / 2;
}

.hs-item img {
    height: 100%;
    width: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    transition: filter 0.8s ease;
}

/* Hover effects */
.hs-item:hover img {
    filter: brightness(1.05) contrast(1.02);
}

/* Subtle gradient overlay */
.hs-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.06));
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.hs-item:hover::after {
    opacity: 0;
}

.hs-item.tall img {
    object-position: center 30%;
}

/* Smooth snap scroll */
@media (min-width: 1024px) {
    .hs-wrapper {
        scroll-snap-type: x mandatory;
    }
    .hs-item {
        scroll-snap-align: center;
    }
}

/* Responsive: smaller gaps on mobile */
@media (max-width: 767px) {
    .hs-track {
        gap: 10px;
        padding: 36px 32px;
    }
    .hs-item {
        height: clamp(180px, 30vh, 260px);
    }
}

/* =====================================
   ROOMS SLIDER — desktop arrows, mobile native swipe
   On mobile the arrow buttons are hidden, so the track must be
   swipeable. Neutralise the JS translateX transform and let the
   viewport scroll horizontally with snap.
   ===================================== */
@media (max-width: 767px) {
    .rooms-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .rooms-viewport::-webkit-scrollbar {
        display: none;
        height: 0;
    }
    #rooms-track {
        transform: none !important;
    }
    #rooms-track > a {
        scroll-snap-align: start;
    }
}

/* =====================================
   GALLERY STRIP — desktop hover-expand, mobile swipe
   Hover-to-expand is a no-op on touch, so on mobile the strip
   becomes a horizontally scrollable row of full-size panels.
   ===================================== */
.gallery-strip {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gallery-strip::-webkit-scrollbar {
    display: none;
    height: 0;
}

/* =====================================
   COPY TOOLTIP (contact page)
   ===================================== */
.copy-tooltip {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}
.copy-trigger:active + .copy-tooltip {
    visibility: visible;
    opacity: 1;
}

/* =====================================
   INTL-TEL-INPUT CUSTOM STYLES (contact page)
   ===================================== */
.iti { width: 100%; }
.iti__country-list {
    background-color: #faf9f6;
    border: 1px solid #d0c5b8;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}
.iti__selected-flag {
    background-color: transparent !important;
    border-bottom: 1px solid #d0c5b8;
}

/* =====================================
   CUSTOM COUNTRY SELECTOR (contact page)
   ===================================== */
.country-selector-container {
    position: relative;
    width: 100%;
}
.country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #faf9f6;
    border: 1px solid #d0c5b8;
    z-index: 50;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.country-option {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}
.country-option:hover {
    background: #f4f3f0;
    color: #705b3c;
}
.country-option span:first-child {
    font-size: 20px;
}
.search-container {
    position: sticky;
    top: 0;
    background: #faf9f6;
    padding: 8px;
    border-bottom: 1px solid #d0c5b8;
}
.search-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #d0c5b8;
    background: white;
    font-size: 13px;
}

/* ============================================================
   COOKIE CONSENT BANNER
   Injected by js/main.js. Full-width panel modeled on a Cookiebot-style
   consent UI, restyled in the heritage parchment + gold palette.
   ============================================================ */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: #F9F8F5;            /* aged-parchment */
    border-top: 1px solid rgba(112, 91, 60, 0.35);  /* primary @ 35% */
    box-shadow: 0 -10px 40px rgba(26, 28, 26, 0.14);
    transform: translateY(110%);
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.cookie-banner.is-visible {
    transform: translateY(0);
}
.cookie-banner__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 24px 26px;
}
.cookie-banner__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.cookie-banner__copy {
    flex: 1;
}
.cookie-banner__heading {
    font-family: 'Didot', Georgia, serif;
    font-weight: 400;
    font-size: 19px;
    letter-spacing: 0.01em;
    color: #1a1c1a;
    margin: 0 0 10px;
}
.cookie-banner__text {
    color: #38352f;                /* on-surface-variant */
    font-family: 'Fraunces', Georgia, serif;
    font-size: 14px;
    line-height: 1.7;
    max-width: 780px;
    margin: 0;
}
.cookie-banner__text a {
    color: #705b3c;                /* primary */
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cookie-banner__text a:hover {
    color: #564426;                /* on-primary-fixed-variant */
}
.cookie-btn {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.cookie-btn--accept {
    background: #a68e6b;           /* primary-container — matches Suryagarh's tan OK */
    color: #38280d;                /* on-primary-container */
    padding: 18px 56px;
    transition: background-color 200ms ease;
}
.cookie-btn--accept:hover {
    background: #705b3c;           /* primary */
    color: #ffffff;
}

.cookie-banner__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e4ddcd;
}
.cookie-banner__toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}
.cookie-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cookie-toggle__label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #1a1c1a;
}
.cookie-switch {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: #d0c5b8;           /* outline-variant, "off" track */
    cursor: pointer;
    padding: 0;
    transition: background-color 200ms ease;
    flex-shrink: 0;
}
.cookie-switch.is-on {
    background: #a68e6b;           /* primary-container, "on" track */
}
.cookie-switch.is-locked {
    cursor: not-allowed;
    opacity: 0.85;
}
.cookie-switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(26, 28, 26, 0.25);
    transition: transform 200ms ease;
}
.cookie-switch.is-on .cookie-switch__knob {
    transform: translateX(18px);
}
.cookie-banner__details {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #705b3c;                /* primary */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cookie-banner__details:hover {
    color: #564426;
}

@media (min-width: 768px) {
    .cookie-banner__inner {
        padding: 40px 48px 30px;
    }
    .cookie-banner__top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 48px;
    }
    .cookie-banner__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}