/*
Theme Name: Astra Child
Template: astra
*/

/* === HERO TEXT COLOR OVERRIDE === */

/* Force hero overlay text to stay white */
body .hero-section .hero-overlay,
body .hero-section .hero-overlay * {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* improves readability over bright areas */
}

/* Keep readable-text compatibility */
body .hero-section .hero-overlay.readable-text,
body .hero-section .hero-overlay.readable-text * {
  color: #fff !important;
}

/* Optional: make headings slightly bolder for visual balance */
body .hero-section .hero-overlay h2,
body .hero-section .hero-overlay h3 {
  font-weight: 700;
}


/* === HERO SECTION FINAL CLEANUP === */

/* Force Astra container to go full bleed */
body .ast-container .hero-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 !important;
}

/* Core hero layout */
body .hero-section {
  position: relative !important;
  aspect-ratio: 16 / 5;               /* Keeps correct video shape */
  width: 100vw !important;
  height: auto !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background-color: #1d1f22 !important;
  flex-direction: column !important;
}

/* Video fills area proportionally */
body .hero-section .hero-video {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0;
}

/* Overlay text */
body .hero-section .hero-overlay {
  position: relative !important;
  z-index: 1;
  padding: 1rem;
  max-width: 90%;
  color: #fff;
}

/* Responsive typography */

body .hero-section h2 {
  font-size: clamp(2.5rem, 9vw, 6rem);  /* bigger min/max */
}
body .hero-section h2 {
  font-size: 700%; /* roughly equal to 4rem */
}

body .hero-section h3 {
  font-size: 250%; /* roughly equal to 2.5rem */
}

body .hero-section p {
  font-size: 150%; /* roughly equal to 1.5rem */
}

/* === Mobile fine-tuning === */
@media (max-width: 768px) {
  body .hero-section {
    aspect-ratio: 16 / 9;
    max-height: 90svh !important;
  }

  body .hero-section .hero-video {
    object-fit: cover !important;
  }

  /* Smaller text on mobile for better fit */
  body .hero-section h2 {
    font-size: 320%;
  }

  body .hero-section h3 {
    font-size: 130%;
  }

  body .hero-section p {
    font-size: 90%;
  }
}

/* Fix invisible logo caused by missing Astra color filter */
.custom-logo {
  filter: none !important;
  opacity: 1 !important;
}

:root {
  --hero-scale: 1.2; /* 1.0 = normal, 1.2 = 20% bigger */
}

.hero-section.hero-small h2 {
  font-size: clamp(1.5rem, 7vw, 3rem);
}

.hero-section.hero-small h3 {
  font-size: clamp(1.9rem, 4.5vw, 3.5rem);
}

.hero-section.hero-small p {
  font-size: clamp(0.8rem, 2vw, 1rem);
}

/* === Readable Text Utility Class === */
/* Makes text more legible on dark or bright backgrounds */

.readable-text,
.readable-text * {
  color: #fff !important; /* ensures white text */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9), /* main soft shadow */
    0 0 10px rgba(0, 0, 0, 0.4);  /* glow for contrast */
}

/* Default — your current aspect ratio */
.hero-section {
  aspect-ratio: 16 / 5;
}

/* Taller hero (good for cinematic covers) */
.hero-section.hero-tall {
  aspect-ratio: 16 / 7;
}

/* Shorter, more banner-like hero */
.hero-section.hero-short {
  aspect-ratio: 16 / 10;
}

/* Extra-wide, panoramic section */
.hero-section.hero-wide {
  aspect-ratio: 32 / 9;
}


/* === Responsive Table Wrapper === */
.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  padding: 0.5em;
}

/* Base table styling */
.responsive-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px; /* smaller min-width = less scroll */
  font-size: 0.95rem; /* slightly smaller overall text */
  transform: scale(0.95); /* scale the entire table */
  transform-origin: top center;
}

/* Optional: subtle scrollbar */
.responsive-table::-webkit-scrollbar {
  height: 8px;
}
.responsive-table::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* Tighten padding and font size on smaller screens */
@media (max-width: 768px) {
  .responsive-table table {
    transform: scale(0.9);
    min-width: 580px;
  }
  .responsive-table table th,
  .responsive-table table td {
    padding: 0.5em;
    font-size: 0.85rem;
  }
}