/*
Theme Name: 108 Jangchub Chorten
Theme URI: https://108jangchubchorten.bt
Author: Gelephu Mindfulness City
Author URI: https://gelephumindfulnesscity.bt
Description: A sacred WordPress theme for the 108 Jangchub Chorten project - featuring Full Site Editing support, custom blocks, and block patterns for maximum customization.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jangchub-chorten
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-menu, custom-logo, editor-style, one-column, two-columns, wide-blocks

A sacred theme for the 108 Jangchub Chorten project.
*/

/* ==========================================================================
   Page Transitions — calming fade between page navigations
   ========================================================================== */

@keyframes jangchub-page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: jangchub-page-fade-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.page-exiting {
  opacity: 0;
  transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Prevent interaction during the fade-out */
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
  }
  body.page-exiting {
    opacity: 1 !important;
    transition: none !important;
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  --color-primary: var(--wp--preset--color--primary);
  --color-primary-foreground: var(--wp--preset--color--primary-foreground);
  --color-primary-hover: var(--wp--preset--color--primary-hover);
  --color-secondary: var(--wp--preset--color--secondary);
  --color-secondary-foreground: var(--wp--preset--color--secondary-foreground);
  --color-accent: var(--wp--preset--color--accent);
  --color-accent-foreground: var(--wp--preset--color--accent-foreground);
  --color-accent-hover: var(--wp--preset--color--accent-hover);
  --color-background: var(--wp--preset--color--background);
  --color-foreground: var(--wp--preset--color--foreground);
  --color-muted: var(--wp--preset--color--muted);
  --color-muted-foreground: var(--wp--preset--color--muted-foreground);
  --color-card: var(--wp--preset--color--card);
  --color-card-foreground: var(--wp--preset--color--card-foreground);
  --color-border: var(--wp--preset--color--border);
  --color-input-background: var(--wp--preset--color--input-background);
  --color-overlay-text: var(--wp--preset--color--overlay-text);

  --font-heading: var(--wp--preset--font-family--heading);
  --font-subheading: var(--wp--preset--font-family--subheading);
  --font-body: var(--wp--preset--font-family--body);
}

/* ==========================================================================
   Base Typography — Figma: Roboto 300 body, Playfair Display 500 headings
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-foreground);
  background-color: var(--color-background);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-primary);
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p,
.wp-block-paragraph {
  font-family: var(--font-body);
  font-weight: 300;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Sticky Header — Figma: bg-background/95, backdrop-blur-sm, sticky top-0
   ========================================================================== */

.site-header {
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-background) 95%, transparent) !important;
}

/* Backdrop blur on pseudo-element so header doesn't create a containing block
   for position:fixed descendants (breaks WP nav mobile overlay otherwise). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

/* Remove any solid background WordPress may add */
.site-header.has-background {
  background: color-mix(in srgb, var(--color-background) 95%, transparent) !important;
}

/* Site branding — logo + title/tagline stacked */
.site-branding .wp-block-site-logo {
  line-height: 0;
  margin: 0;
}
.site-branding .wp-block-site-logo img {
  display: block;
  height: auto;
}
.site-branding__text .wp-block-site-title,
.site-branding__text .wp-block-site-title a {
  margin: 0 !important;
  line-height: 1.1;
  text-decoration: none;
}
.site-branding__text .wp-block-site-tagline {
  margin: 0.15rem 0 0 !important;
  line-height: 1.2;
}

/* ==========================================================================
   Hero–Header Seamless Connection — No gap between nav and hero
   ========================================================================== */

/* Remove WordPress block gap between top-level template blocks */
.wp-site-blocks > * + * {
  margin-block-start: 0 !important;
}

/* Ensure main content starts flush against header */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group[class*="wp-block-group"] {
  margin-top: 0 !important;
}

/* Hero sections have no top margin */
.stupas-hero {
  margin-top: 0 !important;
}

/* ==========================================================================
   Navigation — Figma: League Spartan 400, 0.02em tracking
   ========================================================================== */

.wp-block-navigation,
.wp-block-navigation .wp-block-navigation-item a {
  font-family: var(--font-subheading);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.wp-block-navigation .wp-block-navigation-item a {
  transition: color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   Button Styles — Figma: League Spartan 500, 0.25rem radius
   ========================================================================== */

.wp-block-button__link {
  font-family: var(--font-subheading);
  font-weight: 500;
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.wp-block-button__link:not(.has-background) {
  background-color: var(--color-accent);
  color: var(--color-accent-foreground);
}

.wp-block-button__link:not(.has-background):hover {
  background-color: var(--color-accent-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--color-overlay-text) 30%, transparent);
  color: var(--color-overlay-text);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: color-mix(in srgb, var(--color-overlay-text) 20%, transparent);
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-family: var(--font-body);
  font-weight: 300;
  background-color: var(--color-input-background);
  border: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

label {
  font-family: var(--font-subheading);
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* ==========================================================================
   Footer — Figma: bg-primary, py-16, text-primary-foreground
   ========================================================================== */

.site-footer {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
}

.site-footer h3,
.site-footer h4,
.site-footer .wp-block-heading {
  color: var(--color-primary-foreground);
}

.site-footer p,
.site-footer .wp-block-paragraph,
.site-footer a {
  color: var(--color-primary-foreground);
}

.site-footer a {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.site-footer a:hover {
  opacity: 1;
}

.site-footer .wp-block-navigation .wp-block-navigation-item a {
  color: var(--color-primary-foreground);
  font-family: var(--font-body);
  font-weight: 300;
}

.site-footer .wp-block-separator {
  border-color: color-mix(in srgb, var(--color-primary-foreground) 20%, transparent) !important;
  opacity: 1;
}

/* ==========================================================================
   Page Load Animation — Figma: framer-motion fade-in-up on mount
   ========================================================================== */

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Animate main content on page load */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:not(.site-header):not(.site-footer) {
  animation: pageEnter 0.6s ease-out both;
}

/* ==========================================================================
   Scroll-Triggered Animations (driven by animations.js IntersectionObserver)
   All animation state is managed via JS — these are only fallback/override rules
   ========================================================================== */

/* Hero entrance animations */
.stupas-hero__content {
  animation: fadeInUp 1s ease-out 0.3s both;
}

.stupas-hero__headline {
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.stupas-hero__subheadline {
  animation: fadeInUp 0.8s ease-out 0.7s both;
}

.stupas-hero__description {
  animation: fadeInUp 0.8s ease-out 0.9s both;
}

.stupas-hero__buttons {
  animation: fadeInUp 0.8s ease-out 1.1s both;
}

.stupas-hero__scroll {
  animation: fadeIn 1s ease-out 1.5s both;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.has-primary-color { color: var(--color-primary); }
.has-secondary-color { color: var(--color-secondary); }
.has-accent-color { color: var(--color-accent); }
.has-background-color { background-color: var(--color-background); }
.has-foreground-color { color: var(--color-foreground); }
.has-muted-color { color: var(--color-muted-foreground); }

.has-muted-background {
  background-color: var(--color-muted);
}

/* ==========================================================================
   Block Editor Styles
   ========================================================================== */

.editor-styles-wrapper {
  font-family: var(--font-body);
  font-weight: 300;
  background-color: var(--color-background);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper .wp-block-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-primary);
}

.editor-styles-wrapper p {
  font-family: var(--font-body);
  font-weight: 300;
}

/* Server-rendered block preview in editor */
.stupas-editor-block {
  pointer-events: none;
}

/* ==========================================================================
   Block Overrides
   ========================================================================== */

.wp-block-template-part-content {
  overflow: hidden;
}

.stupas-hero img,
.stupas-image-text-split__image img {
  transition: transform 0.3s ease;
}

/* Hero button hover effect */
.stupas-hero__btn:hover {
  transform: translateY(-2px);
}

/* Scroll bounce animation for hero chevron */
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(10px); }
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

/* ==========================================================================
   Mobile Nav Overlay — full-screen, padded, animated
   ========================================================================== */

/* Hamburger toggle */
.site-header .wp-block-navigation__responsive-container-open {
  padding: 0.5rem;
  color: var(--color-primary);
}
.site-header .wp-block-navigation__responsive-container-open svg {
  width: 28px;
  height: 28px;
}

/* Overlay panel */
.wp-block-navigation__responsive-container.is-menu-open {
  background: color-mix(in srgb, var(--color-background) 98%, transparent) !important;
  color: var(--color-primary) !important;
  padding: 7rem 2rem 3rem !important;
  animation: jcOverlayFade 0.25s ease-out;
}

@keyframes jcOverlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Close (X) button */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.5rem;
  color: var(--color-primary);
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close svg {
  width: 28px;
  height: 28px;
}

/* Inner dialog */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-top: 2rem;
}

/* Menu list */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 0 !important;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* Menu items — stacked, separators, tap targets, staggered fade */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  width: 100%;
  padding-block: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  opacity: 0;
  transform: translateY(8px);
  animation: jcItemIn 0.35s ease-out forwards;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:nth-child(1) { animation-delay: 0.05s; }
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:nth-child(2) { animation-delay: 0.10s; }
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:nth-child(3) { animation-delay: 0.15s; }
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:nth-child(4) { animation-delay: 0.20s; }
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:nth-child(5) { animation-delay: 0.25s; }
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:nth-child(6) { animation-delay: 0.30s; }
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:nth-child(7) { animation-delay: 0.35s; }
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:nth-child(8) { animation-delay: 0.40s; }

@keyframes jcItemIn {
  to { opacity: 1; transform: translateY(0); }
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:last-child {
  border-bottom: none;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item a {
  display: block;
  width: 100%;
  padding: 1.5rem 0.5rem;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-transform: uppercase;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item a:focus {
  color: var(--color-accent);
  padding-left: 0.75rem;
}

/* Lock body scroll while open */
.has-modal-open {
  overflow: hidden;
}

@media (max-width: 782px) {
  .site-header .wp-block-navigation {
    font-size: 0.8rem;
  }

  .stupas-hero__headline {
    font-size: clamp(2rem, 6vw, 3.5rem) !important;
  }

  .stupas-hero__buttons {
    flex-direction: column !important;
    align-items: center;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .stupas-hero__scroll {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}