/* Tailwind CSS configuration */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --sage-green-1: #666666; /* Ivory Mist */
    --sage-green-2: #9A7D55; /* Amber Earth */
    --sage-green-3: #6D8B74; /* Forest Moss */
    --beige: #6B8E7A; /* Deep Fern */
    --white: #F9F9F9; /* Ultra-Light Gray */
    --dark-gray: #5A6B60; /* Deep Moss */
    --light-mist: #C1C9C2; /* Frosted Leaf */
    --ivory-mist: #666666; /* Medium Gray */
    --soft-fern: #5F7E6E; /* Soft Fern */
  }
}

body {
  font-family: 'Lora', serif;
  scroll-behavior: smooth;
  background-color: var(--white);
  margin: 0;
  padding: 0;
  color: var(--dark-gray);
  font-size: 1rem !important; /* Base font size for mobile */
}

/* Override Tailwind's base font size */
html {
  font-size: 16px !important;
}

/* Override Tailwind text size classes */
.text-lg {
  font-size: 1rem !important; /* 16px instead of 18px */
}

.text-xl {
  font-size: 1.125rem !important; /* 18px instead of 20px */
}

.text-2xl {
  font-size: 1.25rem !important; /* 20px instead of 24px */
}

.text-3xl {
  font-size: 1.5rem !important; /* 24px instead of 30px */
}

.text-4xl {
  font-size: 2.5rem !important; /* 40px instead of 36px */
}

.text-5xl {
  font-size: 3.5rem !important; /* 56px instead of 48px */
}

/* Hero heading responsive sizing */
.hero-overlay h1 {
  font-size: 1.875rem !important; /* 30px for mobile */
}

@media (min-width: 768px) {
  .hero-overlay h1 {
    font-size: 2.5rem !important; /* 40px for tablet */
  }
}

@media (min-width: 1024px) {
  .hero-overlay h1 {
    font-size: 3.5rem !important; /* 56px for desktop */
  }
}

/* Global media defaults for responsiveness */
img, video {
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
  font-family: 'Lora', serif;
}

@media (min-width: 640px) {
  body { font-size: 1rem !important; } /* Standard font size for tablets and up */
}

.glass {
  background: rgba(154, 125, 85, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid var(--sage-green-2);
  padding: 1.5rem;
}

.beige-strip, .accent-strip, .footer-strip {
  height: 4px;
  width: 100vw; /* full viewport width to ensure edge-to-edge */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  transform: translateX(0);
}

.beige-strip { background-color: var(--sage-green-1); }
.accent-strip { background-color: var(--sage-green-2); }
.footer-strip { background-color: var(--sage-green-3); }

.hero-bg {
  position: relative;
  width: 100%;
  min-height: 40vh; /* base for mobile */
  max-height: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.2);
  background-color: transparent;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Hide video controls and play button completely - ULTRA AGGRESSIVE */
.hero-bg video::-webkit-media-controls {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-bg video::-webkit-media-controls-panel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-bg video::-webkit-media-controls-play-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-bg video::-webkit-media-controls-start-playback-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-bg video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hero-bg video::-webkit-media-controls-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Additional mobile-specific hiding */
@media (max-width: 768px) {
  .hero-bg video::-webkit-media-controls,
  .hero-bg video::-webkit-media-controls-panel,
  .hero-bg video::-webkit-media-controls-play-button,
  .hero-bg video::-webkit-media-controls-overlay-play-button,
  .hero-bg video::-webkit-media-controls-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* Hide video controls on all browsers */
.hero-bg video::-moz-media-controls {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.hero-bg video::-ms-media-controls {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Additional WebKit hiding */
.hero-bg video::-webkit-media-controls-enclosure {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.hero-bg video::-webkit-media-controls-fullscreen-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.hero-bg video::-webkit-media-controls-timeline {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.hero-bg video::-webkit-media-controls-volume-slider {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Ensure no controls are visible */
.hero-bg video {
  pointer-events: none;
  outline: none;
  border: none;
  transition: none !important;
  animation: none !important;
}

/* Prevent any transitions on hero section during navigation */
.hero-bg {
  transition: none !important;
  animation: none !important;
}

.hero-bg * {
  transition: none !important;
  animation: none !important;
}

/* Prevent page transition effects on video elements only */
html, body {
  transition: none !important;
  animation: none !important;
}

/* Force video to maintain full opacity during navigation */
.hero-bg video {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Make video appear instantly without any fade */
.hero-bg video {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* Override any browser default fade effects */
.hero-bg {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Force immediate appearance - no browser transitions */
.hero-bg, .hero-bg * {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Optimized video styling for mobile performance */
video {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  will-change: auto !important;
}

/* Video placeholder image styling - ULTRA FAST LOADING */
#video-placeholder {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  transition: none !important;
  loading: eager !important;
  background-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Clean hero background - no fallback needed */

/* Force immediate image display - remove this as we're using inline styles */

/* Additional hiding for different browsers */
.hero-bg video[controls] {
  display: none;
}

.hero-bg video:not([controls]) {
  display: block;
}

/* Force hide any remaining overlays */
.hero-bg video::before,
.hero-bg video::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Hide any pseudo-elements that might show play button */
.hero-bg video::-webkit-media-controls-panel * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  z-index: 10;
}

.hero-overlay h1 {
  font-size: 2rem; /* Base for mobile */
}
@media (min-width: 640px) { .hero-overlay h1 { font-size: 2.5rem; } }
@media (min-width: 1024px) { .hero-overlay h1 { font-size: 3rem; } }

.hero-overlay h2 {
  font-size: 1rem;
}
@media (min-width: 640px) { .hero-overlay h2 { font-size: 1.25rem; } }

/* Fixed hero heights by breakpoint to avoid letterboxing */
@media (max-width: 639px) {
  .hero-bg { height: 40vh; }
  .hero-bg video { 
    height: 40vh;
    pointer-events: none;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-bg { height: 55vh; }
  .hero-bg video { height: 55vh; }
}
@media (min-width: 1024px) {
  .hero-bg { height: 65vh; }
  .hero-bg video { height: 65vh; }
}

nav {
  background-color: var(--white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 0 1rem;
}

nav .text-3xl {
  position: static; /* allow natural flex alignment to prevent overlap */
  transform: none;
  color: var(--ivory-mist);
}

/* Navigation menu styling */
nav .hidden.xl\:flex {
  display: none;
  position: static;
  transform: none;
  gap: 1rem;
}

nav .hidden.xl\:flex a {
  color: var(--dark-gray);
  font-size: 1rem;
}

.menu-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: #E5E7EB !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 1000 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  opacity: 0;
  transform: translateY(-20px);
}

.menu-fullscreen:not(.hidden) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  display: flex !important;
}

.menu-fullscreen.hidden {
  display: none !important;
}

.menu-fullscreen a:not(.close-btn) {
  font-size: 1.25rem; /* Smaller for mobile */
  margin: 0.75rem 0;
  color: var(--dark-gray);
  text-decoration: none;
}

.menu-fullscreen a:not(.close-btn):hover {
  color: var(--sage-green-2);
}

.menu-fullscreen .close-btn {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  font-size: 1.5rem !important;
  color: var(--dark-gray) !important;
  cursor: pointer !important;
}

/* Force menu visibility - override Tailwind */
#menu-fullscreen:not(.hidden) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#menu-fullscreen.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Ensure hamburger button is clickable */
#menu-toggle {
  cursor: pointer !important;
  z-index: 1001 !important;
  position: relative !important;
  pointer-events: auto !important;
}

#menu-toggle:hover {
  background-color: rgba(0,0,0,0.1) !important;
}

/* Remove temporary red background */
#menu-toggle {
  background-color: transparent !important;
}

nav .custom\:hidden {
  display: none;
  position: static; /* within flex container */
  transform: none;
}

/* Mobile, tablet, and small desktop - show hamburger menu */
@media (max-width: 1279px) {
  nav .xl\:hidden { display: flex; }
  nav .hidden.xl\:flex { display: none; }
}

/* Large desktop navigation - show full menu */
@media (min-width: 1280px) {
  nav .hidden.xl\:flex { display: flex; }
  nav .xl\:hidden { display: none; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  nav { padding: 0 1.5rem; }
}

@media (max-width: 639px) {
  nav { padding: 0 0.75rem; }
  nav .text-3xl { font-size: 1.5rem; }
}

header { background-color: var(--sage-green-2); }
footer { background-color: var(--beige); }
footer p, footer a {
  color: #FFFFFF;
  text-shadow: 0 0 1px #FFFFFF;
}

main { background-color: transparent; }

/* Logo strip and footer: wrap and center on small screens */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
@media (min-width: 1024px) {
  .logo-row { justify-content: space-between; }
}
.logo-row img { height: 3rem; }
@media (min-width: 640px) { .logo-row img { height: 4rem; } }

footer .flex.flex-row.space-x-8 {
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Quote Section */
.quote-section {
  max-width: 90%;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  text-align: center;
}

/* Global paragraph spacing - override Tailwind */
p {
  margin-top: 0 !important;
  margin-bottom: 1.25em !important; /* double-spacing between paragraphs */
}

/* Single space between headlines and paragraphs - override Tailwind */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0 !important;
  margin-bottom: 0.625em !important; /* single space between headlines and content */
}

/* Double space between paragraphs and bullet points */
ul, ol {
  margin-top: 0 !important;
  margin-bottom: 1.25em !important; /* double space after bullet points */
}

/* Single space between individual bullet points */
ul li, ol li {
  margin-bottom: 0.3125em !important; /* single space between bullet points */
}

/* Remove spacing between consultation box text lines */
.consultation-box p {
  margin-bottom: 0 !important;
}

/* About page - make images match text column height */
.about-main-grid {
  align-items: stretch !important;
}

.about-main-grid > div {
  display: flex !important;
  flex-direction: column !important;
}

.about-main-grid img {
  flex: 1 !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.training-qualifications {
  align-items: stretch !important;
}

.training-qualifications > div {
  display: flex !important;
  flex-direction: column !important;
}

.training-qualifications img {
  flex: 1 !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}


.quote-section .accented-apostrophes {
  font-size: 4rem;
  color: var(--sage-green-2);
  line-height: 1;
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) { .quote-section .accented-apostrophes { font-size: 6rem; } }

.quote-section .quote-text, .quote-section .quote-author {
  font-size: 1rem;
}
@media (min-width: 640px) {
  .quote-section .quote-text { font-size: 1.125rem; }
  .quote-section .quote-author { font-size: 1.25rem; }
}

/* Circle Banner */
.circle-banner {
  width: 100%;
  background-color: #ECEFEF;
  padding: 2rem 0;
}

.circle-banner-wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.circle-container, .circle-text-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  justify-content: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .circle-container, .circle-text-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .circle-container, .circle-text-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

.circle {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 639px) { .circle { width: 6rem; height: 6rem; } }

.circle-img { width: 100%; height: 100%; object-fit: cover; }

.circle-text {
  font-size: 1rem;
  text-align: center;
}
@media (max-width: 639px) { .circle-text { font-size: 0.875rem; } }

/* Dropdowns */
.dropdown-content, .faq-answer {
  display: none;
  padding: 1rem;
  background: rgba(154, 125, 85, 0.1);
  border: 1px solid rgba(154, 125, 85, 0.3);
  border-radius: 0.375rem;
  margin-top: 0.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.dropdown-content.show, .faq-answer.show {
  display: block;
  max-height: 1000px;
}

/* Flower Button */
.flower-btn {
  width: 100%;
  min-height: 4rem;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(154, 125, 85, 0.3);
  scroll-margin-top: 80px;
}

.flower-text span { font-size: 1rem; }
@media (min-width: 640px) { .flower-text span { font-size: 1.25rem; } }

/* Blog Grid */
.blog-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr; }
}

.blog-img-wrapper {
  width: 100%;
  aspect-ratio: 3/2;
}

/* Fees Section */
.fees-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

.fees-sections .image-column {
  display: flex;
  align-items: center;
}

.fees-sections .text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 767px) {
  .fees-sections { grid-template-columns: 1fr; }
}

/* Contact Section */
.contact-section {
  gap: 1rem;
}
@media (max-width: 639px) {
  .contact-section .h-\[500px\], .contact-section .min-h-\[400px\] {
    min-height: 400px;
  }
  .contact-section iframe { height: 400px; }
}

/* Resources Tabs */
.tab-button {
  font-size: 0.875rem;
  padding: 0.5rem;
}
@media (min-width: 640px) { .tab-button { font-size: 1rem; padding: 0.5rem 1rem; } }

.tab-pane iframe, .tab-pane img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* For videos */
}
.tab-pane .img-wrapper img { aspect-ratio: 3/2; }

/* Modals */
#journaling-modal, #emotion-modal {
  max-width: 90vw;
}

#stephen-review-modal {
  max-width: none;
}