/*
Theme Name: Himalayan Summit
Theme URI: https://example.com/
Author: Himalayan
Author URI: https://example.com/
Description: A custom theme replicating the Himalayan Summit Landing Page with Three.js, GSAP & Genjutsu Motion UI/UX.
Version: 1.1
Text Domain: himalayan
*/

/* Lenis Smooth Scroll Overrides */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  overflow-x: hidden;
}

/* Genjutsu Dynamic Dual-Ring Magnetic Cursor & Ambient Spotlight */
@media (pointer: fine) {
  body {
    cursor: default;
  }

  #cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: #8A6A4A;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    margin-top: -4px;
    margin-left: -4px;
    transition: transform 0.05s ease-out, background-color 0.3s ease, opacity 0.3s ease;
  }

  #cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(138, 106, 74, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    margin-top: -19px;
    margin-left: -19px;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                height 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                margin 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                border-color 0.3s ease, 
                background-color 0.3s ease;
  }

  #cursor-label {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    margin-top: 18px;
    margin-left: 18px;
    white-space: nowrap;
  }

  .cursor-ring-active {
    width: 58px !important;
    height: 58px !important;
    margin-top: -29px !important;
    margin-left: -29px !important;
    border-color: rgba(47, 79, 70, 0.8) !important;
    background-color: rgba(47, 79, 70, 0.08) !important;
    backdrop-filter: blur(2px);
  }

  .cursor-dot-active {
    background-color: #2F4F46 !important;
    transform: scale(1.5) !important;
  }
}

@media (pointer: coarse) {
  #cursor-dot, #cursor-ring, #cursor-label {
    display: none !important;
  }
}

#ambient-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 106, 74, 0.07) 0%, rgba(47, 79, 70, 0.04) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* Three.js Hero Canvas */
#himalayan-3d-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Glassmorphism & 3D Spatial Utilities */
.glass-panel {
  background: rgba(245, 242, 236, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #DDD7CF;
}

/* Organic Nature Texture & Topo Contour Overlay */
.nature-topo-bg {
  background-image: radial-gradient(circle at 50% 50%, rgba(124, 139, 106, 0.05) 0%, transparent 60%),
                    repeating-linear-gradient(45deg, rgba(138, 106, 74, 0.02) 0px, rgba(138, 106, 74, 0.02) 2px, transparent 2px, transparent 12px);
}

.nature-card {
  background: #F5F2EC;
  border: 1px solid #DDD7CF;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.nature-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2F4F46, #8A6A4A, #7C8B6A);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nature-card:hover::after {
  opacity: 1;
}

.accordion-card, [data-genjutsu-tilt] {
  transition: transform 0.15s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}

.accordion-card:hover {
  border-color: #8A6A4A !important;
  box-shadow: 0 20px 40px -15px rgba(47, 79, 70, 0.15);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FAF8F5;
}
::-webkit-scrollbar-thumb {
  background: #8A6A4A;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2F4F46;
}

/* Mobile Hero Center Alignment on X-Axis */
@media (max-width: 1023px) {
  #hero,
  #hero .grid,
  #hero [class*="col-span"],
  #hero h1,
  #hero p,
  #hero span,
  #hero div {
    text-align: center !important;
  }
  #hero [class*="col-span"],
  #hero .grid > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #hero h1,
  #hero p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  #hero .flex,
  #hero .inline-flex,
  #hero .flex-wrap {
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #hero .border-t {
    justify-content: center !important;
    width: 100% !important;
  }
}

/* Mobile Offcanvas Toggle Menu White Text Rules */
#offcanvas-menu,
#offcanvas-menu nav,
#offcanvas-menu nav a,
#offcanvas-menu nav ul,
#offcanvas-menu nav li,
#offcanvas-menu nav li a,
#offcanvas-menu .mobile-link,
#offcanvas-menu span,
#offcanvas-menu p {
  color: #ffffff !important;
}

#offcanvas-menu nav a:hover,
#offcanvas-menu nav li a:hover,
#offcanvas-menu .mobile-link:hover {
  color: #8A6A4A !important;
}

/* ==========================================================================
   Experiences, Blog, Community & Album Slider & Card Styles
   ========================================================================== */
#experiences-slider-container,
#blog-slider-container,
#community-slider-container,
#album-slider-container {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

#experiences-slider-track,
#blog-slider-track,
#community-slider-track,
#album-slider-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.exp-slide-item,
.blog-slide-item,
.comm-slide-item,
.album-slide-item {
  box-sizing: border-box;
}

.cursor-grab {
  cursor: grab;
}

.cursor-grabbing,
.cursor-grab:active {
  cursor: grabbing;
}

/* ==========================================================================
   Popup Rich Content Typography (Matches Dashboard & Page Design)
   ========================================================================== */
.popup-rich-content,
#popup-content,
#blog-popup-content,
#stories-popup-body,
#journey-popup-content,
#accordion-popup .overflow-y-auto,
#blog-popup .overflow-y-auto,
#stories-popup .overflow-y-auto,
#journey-popup .overflow-y-auto {
  color: #2B2B2B;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

.popup-rich-content p,
#popup-content p,
#blog-popup-content p,
#stories-popup-body p,
#journey-popup-content p {
  margin-bottom: 1.25rem;
  color: #2B2B2B;
  line-height: 1.8;
}

.popup-rich-content p:last-child,
#popup-content p:last-child,
#blog-popup-content p:last-child,
#stories-popup-body p:last-child,
#journey-popup-content p:last-child {
  margin-bottom: 0;
}

.popup-rich-content p.lead,
#popup-content p.lead,
#blog-popup-content p.lead,
#stories-popup-body p.lead {
  font-size: 1.15rem;
  font-weight: 600;
  color: #2F4F46;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* High-Contrast Bold Formatting as in Dashboard / Page */
.popup-rich-content strong,
.popup-rich-content b,
#popup-content strong,
#popup-content b,
#blog-popup-content strong,
#blog-popup-content b,
#stories-popup-body strong,
#stories-popup-body b,
#journey-popup-content strong,
#journey-popup-content b,
#accordion-popup strong,
#accordion-popup b,
#blog-popup strong,
#blog-popup b,
#stories-popup strong,
#stories-popup b,
#journey-popup strong,
#journey-popup b {
  font-weight: 800 !important;
  color: #2F4F46 !important; /* Brand Forest Green for high-contrast bold emphasis */
  display: inline;
}

.popup-rich-content em,
.popup-rich-content i,
#popup-content em,
#blog-popup-content em,
#stories-popup-body em,
#journey-popup-content em {
  font-style: italic;
}

.popup-rich-content h1,
.popup-rich-content h2,
.popup-rich-content h3,
.popup-rich-content h4,
.popup-rich-content h5,
.popup-rich-content h6,
#popup-content h1, #popup-content h2, #popup-content h3, #popup-content h4, #popup-content h5, #popup-content h6,
#blog-popup-content h1, #blog-popup-content h2, #blog-popup-content h3, #blog-popup-content h4, #blog-popup-content h5, #blog-popup-content h6,
#stories-popup-body h1, #stories-popup-body h2, #stories-popup-body h3, #stories-popup-body h4, #stories-popup-body h5, #stories-popup-body h6,
#journey-popup-content h1, #journey-popup-content h2, #journey-popup-content h3, #journey-popup-content h4, #journey-popup-content h5, #journey-popup-content h6 {
  font-family: "Cormorant Garamond", serif;
  color: #2F4F46;
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.popup-rich-content h1 { font-size: 2.25rem; }
.popup-rich-content h2 { font-size: 1.85rem; }
.popup-rich-content h3 { font-size: 1.5rem; }
.popup-rich-content h4 { font-size: 1.3rem; }
.popup-rich-content h5 { font-size: 1.15rem; }
.popup-rich-content h6 { font-size: 1rem; }

.popup-rich-content ul,
#popup-content ul,
#blog-popup-content ul,
#stories-popup-body ul,
#journey-popup-content ul {
  list-style-type: disc !important;
  margin-left: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  padding-left: 0.5rem !important;
}

.popup-rich-content ol,
#popup-content ol,
#blog-popup-content ol,
#stories-popup-body ol,
#journey-popup-content ol {
  list-style-type: decimal !important;
  margin-left: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  padding-left: 0.5rem !important;
}

.popup-rich-content li,
#popup-content li,
#blog-popup-content li,
#stories-popup-body li,
#journey-popup-content li {
  margin-bottom: 0.6rem;
  line-height: 1.7;
  color: #2B2B2B;
}

.popup-rich-content li strong,
.popup-rich-content li b,
#popup-content li strong,
#blog-popup-content li strong,
#stories-popup-body li strong,
#journey-popup-content li strong {
  color: #2F4F46 !important;
  font-weight: 800 !important;
}

.popup-rich-content blockquote,
#popup-content blockquote,
#blog-popup-content blockquote,
#stories-popup-body blockquote,
#journey-popup-content blockquote {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #8A6A4A;
  border-left: 4px solid #F9B230;
  background-color: rgba(245, 242, 236, 0.6);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
}

.popup-rich-content a,
#popup-content a,
#blog-popup-content a,
#stories-popup-body a,
#journey-popup-content a {
  color: #2F4F46;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s ease;
}

.popup-rich-content a:hover,
#popup-content a:hover,
#blog-popup-content a:hover,
#stories-popup-body a:hover,
#journey-popup-content a:hover {
  color: #F9B230;
}

.popup-rich-content hr,
#popup-content hr,
#blog-popup-content hr,
#stories-popup-body hr {
  border: 0;
  border-top: 1px solid #DDD7CF;
  margin: 2rem 0;
}