/* ============ Global Styles ============ */

/* Ensure buttons and form submits are touch-friendly */
button,
input[type="submit"],
.wp-block-button__link {
  min-height: 44px !important;
  padding: 12px 20px !important;
  border-radius: var(--radius-md, 8px) !important;
}

/* Make media responsive */
img,
iframe,
video {
  max-width: 100% !important;
  height: auto !important;
}

/* ============ Header & Navigation ============ */

/* Opaque header on all pages */
.site-header {
  background: rgba(10,7,5, 0.97) !important;
  backdrop-filter: blur(10px) !important;
}

/* Nav links hover */
.nav-links a:hover {
  color: var(--color-primary, #01696f) !important;
}

/* Mobile menu improvements */
#mobile-menu {
  backdrop-filter: blur(20px) !important;
}

/* ============ Hero Section Fix (Main Issue) ============ */

.hero {
  padding: 40px 0 32px !important;
  overflow: hidden !important;
}

.hero .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.hero-inner {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  justify-content: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.hero-inner > div:first-child {
  flex: 1 1 500px !important;
  min-width: 0 !important;
}

.hero-media {
  flex: 1 1 400px !important;
  min-width: 0 !important;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 1rem !important;
}

.hero-sub {
  font-size: 1.125rem !important;
  color: var(--color-text-muted, #7a7974) !important;
  max-width: 50ch !important;
}

/* Mobile hero */
@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column-reverse !important;
  }
  .hero-media {
    order: -1 !important; /* Image first on mobile */
  }
  .hero .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Prevent theme/plugin overrides */
.hero-inner,
.hero-inner * {
  box-sizing: border-box !important;
}

.hero-inner::after,
.hero-inner::before {
  content: none !important;
  display: none !important;
}

/* ============ Hero Media & Cards ============ */

.hero-photo-card {
  position: relative !important;
  border-radius: var(--radius-lg, 12px) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08)) !important;
}

.hero-photo-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
  color: white !important;
  padding: 2rem 1.5rem 1.5rem !important;
}

.media-card {
  border-radius: var(--radius-md, 8px) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)) !important;
  transition: all 0.2s ease !important;
}

.media-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.12)) !important;
}

/* Video sound toggle */
.sound-toggle {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: rgba(0,0,0,0.7) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  color: white !important;
  cursor: pointer !important;
}

/* ============ Buttons ============ */

.btn-primary {
  background: var(--color-primary, #01696f) !important;
  color: white !important;
  padding: 16px 32px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: var(--radius-md, 8px) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover {
  background: var(--color-primary-hover, #0c4e54) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary {
  background: transparent !important;
  color: var(--color-primary, #01696f) !important;
  border: 2px solid var(--color-primary, #01696f) !important;
  padding: 14px 30px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: var(--radius-md, 8px) !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover {
  background: var(--color-primary, #01696f) !important;
  color: white !important;
}

/* ============ Schedule Section ============ */

.weekly-schedule {
  margin: 4rem 0 !important;
  padding: 2rem !important;
  background: var(--color-surface, #f9f8f5) !important;
  border-radius: var(--radius-lg, 12px) !important;
}

.schedule-item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1.5rem !important;
  border-radius: var(--radius-md, 8px) !important;
  transition: all 0.2s ease !important;
  border: 1px solid var(--color-border, #d4d1ca) !important;
}

.schedule-item:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
  border-color: var(--color-primary, #01696f) !important;
}

/* ============ Trust Badges & Emojis ============ */

.hero-badge,
.trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  color: var(--color-primary, #01696f) !important;
}

.emoji {
  width: 1.2em !important;
  height: 1.2em !important;
  flex-shrink: 0 !important;
}

/* ============ Responsive Typography ============ */

h1, h2, h3 {
  font-family: var(--font-display, 'Instrument Serif', serif) !important;
  line-height: 1.1 !important;
}

p {
  line-height: 1.6 !important;
  max-width: 65ch !important;
}

/* Dark mode support (if enabled) */
@media (prefers-color-scheme: dark) {
  .hero-sub,
  .trust-item {
    color: var(--color-text-muted, #797876) !important;
  }
}

/* ============ Remove Test Rule ============
   Delete this after confirming hero is fixed:
body {
  outline: none !important; /* Remove red outline */
}
 /* ============ UAGB GRID HERO FIX ============ */
/* Targets the Ultimate Addons Container wrapping your hero */

.uagb-layout-grid.uagb-block-6f3d1c23 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100vw !important;
  max-width: 100% !important;
}

/* Force hero container inside to center */
.uagb-layout-grid .hero,
.uagb-layout-grid .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100% !important;
}

/* Kill any UAGB grid columns snapping left */
.uagb-layout-grid > * {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: center !important;
}

/* Mobile */
@media (max-width: 768px) {
  .uagb-layout-grid.uagb-block-6f3d1c23 {
    padding: 0 16px !important;
  }
}
.uagb-block-6f3d1c23.uagb-layout-grid.uagb-is-root-container {
  display: block !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  justify-content: initial !important;
  justify-items: initial !important;
  align-content: initial !important;
  align-items: initial !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

.uagb-block-6f3d1c23.uagb-layout-grid.uagb-is-root-container > .hero {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.uagb-block-6f3d1c23.uagb-layout-grid.uagb-is-root-container > .hero > .container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}