/* Custom Stylesheet for Radha Kunj Township — Premium Real Estate Theme */

:root {
    --gold-soft: #1f3f8f;
    --gold-deep: #17306a;
    --gold-premium: #3a5cb8;
    
    --charcoal-dark: #fbf9f4;  /* Main Light Background */
    --charcoal-mid: #ffffff;   /* Card Background */
    --charcoal-light: #f1ebe1; /* Section Dividers / Light Panel Backgrounds */
    
    --beige-light: #1c1a17;    /* Charcoal Dark text color for headings */
    --beige-dark: #3a3832;     /* Medium dark text color for body copy */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--charcoal-dark);
}
::-webkit-scrollbar-thumb {
    background: rgba(31, 63, 143, 0.25);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold-soft);
}

/* Base resets & styles */
body {
    background-color: var(--charcoal-dark);
    color: var(--beige-dark);
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Playfair Display', serif;
}

/* Luxury Glassmorphism Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(31, 63, 143, 0.2);
    box-shadow: 0 20px 50px rgba(28, 26, 23, 0.05);
}

.glass-panel-light {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(31, 63, 143, 0.1);
}

/* Keyframe animations */
@keyframes modalReveal {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modal {
    animation: modalReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spinSlow 12s linear infinite;
}

/* Glow highlights */
.glow-gold {
    box-shadow: 0 0 25px rgba(31, 63, 143, 0.1);
}

.glow-gold-hover:hover {
    box-shadow: 0 0 35px rgba(31, 63, 143, 0.15);
    border-color: rgba(31, 63, 143, 0.35);
    transform: translateY(-2px);
}

/* Custom form fields */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 2px rgba(31, 63, 143, 0.15);
}

/* Luxury gold text gradients */
.text-gold-gradient {
    background: linear-gradient(135deg, #6c541e 0%, #1f3f8f 50%, #9e7f3b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-gold-gradient {
    background: linear-gradient(135deg, #1f3f8f 0%, #3a5cb8 50%, #1f3f8f 100%);
}

/* General transitions */
a, button, input, select, textarea {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Layout header offset adjustments */
.pt-header-active {
    padding-top: 110px;
}
@media (min-width: 768px) {
    .pt-header-active {
        padding-top: 105px;
    }
}
.pt-header-normal {
    padding-top: 70px;
}

/* Marquee line effect */
.marquee-text-flow {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeFlow 25s linear infinite;
}

@keyframes marqueeFlow {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Custom Checkbox style */
.checkbox-custom {
    accent-color: var(--gold-deep);
}

/* ----------------------------------------------------
   HEADER DYNAMIC THEMING & CONTRAST CALIBRATION
   ---------------------------------------------------- */
/* Dark Hero (Transparent Mode at top of Index/Project specs) */
#site-header.theme-dark-hero {
    color: #ffffff;
}
#site-header.theme-dark-hero .logo-text {
    color: #ffffff;
}
#site-header.theme-dark-hero .nav-link {
    color: rgba(255, 255, 255, 0.75);
}
#site-header.theme-dark-hero .nav-link:hover {
    color: #ffffff;
}
#site-header.theme-dark-hero .nav-link.active {
    color: #d98a99;
}
#site-header.theme-dark-hero .phone-link {
    color: rgba(255, 255, 255, 0.75);
}
#site-header.theme-dark-hero .phone-link:hover {
    color: #d98a99;
}
#site-header.theme-dark-hero .mobile-toggle {
    color: #ffffff;
}
#site-header.theme-dark-hero .mobile-toggle:hover {
    color: #d98a99;
}

/* Light Hero (Transparent Mode at top of default pages) OR Scrolled Mode */
#site-header.theme-light-hero,
#site-header.header-scrolled {
    background-color: rgba(251, 249, 244, 0.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(31, 63, 143, 0.15);
    box-shadow: 0 10px 30px rgba(28, 26, 23, 0.05);
    color: #1c1a17;
}
#site-header.theme-light-hero .logo-text,
#site-header.header-scrolled .logo-text {
    color: #1c1a17;
}
#site-header.theme-light-hero .nav-link,
#site-header.header-scrolled .nav-link {
    color: rgba(28, 26, 23, 0.75);
}
#site-header.theme-light-hero .nav-link:hover,
#site-header.header-scrolled .nav-link:hover {
    color: #1c1a17;
}
#site-header.theme-light-hero .nav-link.active,
#site-header.header-scrolled .nav-link.active {
    color: #1f3f8f;
}
#site-header.theme-light-hero .phone-link,
#site-header.header-scrolled .phone-link {
    color: rgba(28, 26, 23, 0.75);
}
#site-header.theme-light-hero .phone-link:hover,
#site-header.header-scrolled .phone-link:hover {
    color: #1f3f8f;
}
#site-header.theme-light-hero .mobile-toggle,
#site-header.header-scrolled .mobile-toggle {
    color: #1c1a17;
}
#site-header.theme-light-hero .mobile-toggle:hover,
#site-header.header-scrolled .mobile-toggle:hover {
    color: #1f3f8f;
}

/* ====================================================
   KRISHNA / BRAJ "PREMIUM BHAKTI" THEME LAYER
   Peacock teal + Marigold saffron + gold accents
   ==================================================== */

/* Devanagari accent text (shlokas, greetings) */
.font-devanagari {
    font-family: 'Tiro Devanagari Hindi', serif;
}

/* Dark peacock glassmorphism panel for cinematic/video heroes */
.glass-panel-peacock {
    background: rgba(16, 31, 66, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(124, 39, 51, 0.28);
    box-shadow: 0 24px 70px rgba(3, 20, 30, 0.45);
}

/* Light rose text gradient (brand heading on the dark navy hero) */
.text-saffron-gold {
    background: linear-gradient(135deg, #f6e2e6 0%, #e6b3bd 45%, #d98a99 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Peacock text gradient (headings on light sections) */
.text-peacock-gradient {
    background: linear-gradient(135deg, #17306a 0%, #1f3f8f 45%, #3a5cb8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Saffron gradient background (buttons/CTAs) */
.bg-saffron-gradient {
    background: linear-gradient(135deg, #8a2f3c 0%, #7c2733 50%, #5e1b26 100%);
}

/* Peacock gradient background (buttons/CTAs) */
.bg-peacock-gradient {
    background: linear-gradient(135deg, #1f3f8f 0%, #17306a 100%);
}

/* Morpankh (peacock-feather) section divider */
.motif-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #1f3f8f;
    margin: 0 auto;
    max-width: 22rem;
}
.motif-divider::before,
.motif-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, rgba(31, 63, 143, 0.5), transparent);
}
.motif-divider i {
    font-size: 1rem;
    color: #7c2733;
    filter: drop-shadow(0 1px 2px rgba(31, 63, 143, 0.25));
}

/* Temple-arch (torana) top corners for premium cards */
.arch-card {
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    position: relative;
}

/* Radhe Radhe greeting strip */
.greeting-strip {
    letter-spacing: 0.35em;
}

/* Peacock glow on hover (theme variant of glow-gold-hover) */
.glow-peacock-hover:hover {
    box-shadow: 0 0 35px rgba(31, 63, 143, 0.18);
    border-color: rgba(31, 63, 143, 0.35);
    transform: translateY(-2px);
}

/* Ensure hero video always covers its container */
.hero-media-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====================================================
   GLOBAL READABILITY — enlarge the small text utilities
   (body-scoped so these win over the Tailwind CDN)
   ==================================================== */
body .text-\[9px\]  { font-size: 12px; line-height: 1.6; }
body .text-\[10px\] { font-size: 13px; line-height: 1.6; }
body .text-\[11px\] { font-size: 13px; }
body .text-\[12px\] { font-size: 14px; }
body .text-\[13px\] { font-size: 15px; line-height: 1.9; }
body .text-\[14px\] { font-size: 16px; line-height: 1.9; }
body .text-\[15px\] { font-size: 17px; line-height: 1.95; }
body .text-xs   { font-size: 1rem;     line-height: 1.7rem;  }   /* -> 16px */
body .text-sm   { font-size: 1.075rem; line-height: 1.8rem;  }   /* -> ~17px */
body .text-base { font-size: 1.2rem;   line-height: 1.95rem; }   /* -> ~19px */

/* Keep the desktop (sm:) step-ups aligned to the same scale */
@media (min-width: 640px) {
    body .sm\:text-sm   { font-size: 1.075rem; }
    body .sm\:text-base { font-size: 1.2rem; }
}

/* Navigation header stays compact regardless of the global text bump */
#site-header .nav-link   { font-size: 0.78rem; }
#site-header .phone-link { font-size: 0.78rem; }
#site-header .logo-text  { font-size: 0.8rem; }
#site-header .text-xs        { font-size: 0.78rem; }
#site-header .text-sm        { font-size: 0.82rem; }
#site-header .text-\[9px\]   { font-size: 9px; }
#site-header .text-\[10px\]  { font-size: 10px; }

/* ====================================================
   ZEN-MINIMAL LAYER — calm, spacious, peaceful
   ==================================================== */
/* Soft, diffuse shadow (peaceful depth, no hard edges) */
.shadow-soft { box-shadow: 0 30px 80px -30px rgba(31, 63, 143, 0.14); }

/* Thin centered hairline divider */
.divider-thin {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(31, 63, 143, 0.22), transparent);
}

/* Quiet eyebrow label (wide-spaced, understated) */
.zen-eyebrow {
    font-size: 0.82rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #1f3f8f;
    font-weight: 600;
}

/* Elegant light serif display heading */
.zen-display {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

/* Airy paragraph copy */
.zen-copy {
    font-weight: 300;
    line-height: 2;
    color: #4a4a46;
}

/* Gentle lift on quiet cards */
.zen-lift { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s; }
.zen-lift:hover { transform: translateY(-4px); box-shadow: 0 40px 90px -35px rgba(31, 63, 143, 0.2); }

/* Soft attention pulse for the floating offer button */
@keyframes pulseSoft {
    0%, 100% { box-shadow: 0 10px 26px rgba(124, 39, 51, 0.40); }
    50%      { box-shadow: 0 12px 34px rgba(124, 39, 51, 0.75); }
}
.pulse-soft { animation: pulseSoft 2.2s ease-in-out infinite; }

/* Expanding floating-action pill: circle by default, opens on hover */
.fab-pill {
    display: flex;
    align-items: center;
    height: 3.5rem;
    width: 3.5rem;
    border-radius: 9999px;
    overflow: hidden;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: width;
}
.fab-pill:hover { width: 12.5rem; }
.fab-pill .fab-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
}
.fab-pill .fab-label {
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-right: 1.25rem;
}