/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for Astra
Author: CyberNiolo
Author URI: https://yourwebsite.com/
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/


/* Hide Astra theme header elements immediately */
.ast-primary-header-bar,
.ast-primary-header,
.main-header-bar,
.site-header-focus-item,
.ast-header-break-point .main-header-bar,
.ast-above-header,
.ast-below-header,
#masthead,
.site-header,
.menu-toggle,
.main-navigation,
.main-header-menu,
.site-branding,
.ast-mobile-menu-buttons,
.ast-header-custom-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Ensure these elements never appear */
.ast-desktop .main-header-menu.ast-menu-shadow,
.ast-header-break-point .main-header-bar-navigation,
.ast-header-break-point .ast-mobile-header-wrap {
    display: none !important;
}

/* Reset container spacing */
.ast-container, 
.site-content, 
#content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide entry header */
.entry-header {
    display: none !important;
}

/* Universal fix for flexbox layout in TutorLMS */
.framework-visual {
  width: 100% !important;
  display: block !important;
  position: relative !important;
  overflow: visible !important;
}

/* Force flexbox display on container rows */
.framework-visual > div[style*="height: 200px"] {
  display: flex !important;
  flex-wrap: wrap !important;
  height: auto !important;
  min-height: 200px !important;
  margin: 20px 0 !important;
  justify-content: space-around !important;
  gap: 10px !important;
}

/* Fix individual boxes */
.framework-visual > div[style*="height: 200px"] > div[style*="width: 20%"] {
  width: 22% !important;
  min-width: 200px !important;
  margin: 10px !important;
  display: block !important;
  position: relative !important;
}

/* Force box backgrounds to be visible */
.framework-visual > div[style*="height: 200px"] > div[style*="width: 20%"] > div {
  height: auto !important;
  min-height: 100px !important;
  display: block !important;
  padding: 15px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Handle responsiveness */
@media (max-width: 992px) {
  .framework-visual > div[style*="height: 200px"] > div[style*="width: 20%"] {
    width: 45% !important;
  }
}

@media (max-width: 576px) {
  .framework-visual > div[style*="height: 200px"] > div[style*="width: 20%"] {
    width: 100% !important;
  }
}

/* ===== UNIVERSAL FIXES FOR TUTOR LMS CONTENT LAYOUTS ===== */

/* Fix 1: Protect custom layouts from TutorLMS interference */
.tutor-single-course-content-area .tutor-course-content,
.tutor-course-lesson-content-area,
.tutor-single-lesson-wrap,
.tutor-lesson-content-area {
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix 2: Ensure flexbox works properly */
[style*="display: flex"],
[style*="justify-content"],
[style*="align-items"] {
  display: flex !important;
}

/* Fix 3: Force block display on important container elements */
[style*="width:"][style*="%"],
[style*="width: "][style*="%"] {
  display: block !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Fix 4: Ensure absolute positioning works */
[style*="position: absolute"] {
  position: absolute !important;
  z-index: 2 !important;
}

/* Fix 5: Preserve relative positioning containers */
[style*="position: relative"] {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

/* Fix 6: Make responsive layouts work on mobile */
@media (max-width: 768px) {
  [style*="width:"][style*="%"],
  [style*="width: "][style*="%"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  
  [style*="position: absolute"] {
    position: relative !important;
    width: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin: 5px 0 !important;
  }
}

/* ===== SPECIFIC FIX FOR PYRAMID LAYOUTS ===== */

/* Reset the original container */
div[style*="border-left: 300px solid transparent"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: none !important;
  margin: 40px auto !important;
  position: static !important;
  background: transparent !important;
}

/* Create stacked pyramid blocks */
div[style*="border-left: 300px solid transparent"] > div {
  position: static !important;
  display: block !important;
  margin: 0 auto 5px auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  padding: 15px 20px !important;
  text-align: center !important;
  border-radius: 4px !important;
}

/* Make the specific pyramid levels different widths to create the pyramid shape */
div[style*="border-left: 300px solid transparent"] > div:nth-child(10) {
  max-width: 180px !important; /* Advanced Testing */
}

div[style*="border-left: 300px solid transparent"] > div:nth-child(8) {
  max-width: 280px !important; /* Laboratory Testing */
}

div[style*="border-left: 300px solid transparent"] > div:nth-child(6) {
  max-width: 380px !important; /* Symptom Assessment */
}

div[style*="border-left: 300px solid transparent"] > div:nth-child(4) {
  max-width: 480px !important; /* Dietary Analysis */
}

div[style*="border-left: 300px solid transparent"] > div:nth-child(2) {
  max-width: 580px !important; /* Client History */
}

/* Hide empty paragraph tags */
div[style*="border-left: 300px solid transparent"] > p {
  display: none !important;
}

/* Fix header text positioning without changing header structure */
#custom-yellow-header a,
#custom-yellow-header div[style*="font-weight: 600"],
#custom-yellow-header div[style*="margin: 0 15px"] a {
  color: #1e3a8a !important;
  font-weight: 700 !important;
  display: inline-block !important;
  position: static !important;
  margin: initial !important;
}

#custom-yellow-header div[style*="display: flex"] {
  display: flex !important;
  position: static !important;
}

#custom-yellow-header div[style*="margin: 0 15px"] {
  margin: 0 15px !important;
  position: static !important;
}

/* Make sure list-style positioning is correct */
#custom-yellow-header div[style*="list-style: none"] {
  display: flex !important;
  flex-direction: row !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Add this to your style.css file */

/* Hide hamburger on desktop, show on mobile */
.mobile-hamburger {
  display: none;
  cursor: pointer;
  z-index: 9999;
}

/* Mobile menu panel styling */
.mobile-menu-panel {
  position: fixed;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: #FFDB58;
  z-index: 99999;
  transition: all 0.3s ease;
  box-shadow: 2px 0 10px rgba(0,0,0,0.2);
  padding-top: 70px;
  overflow-y: auto;
}

/* Style menu links in panel */
.mobile-menu-panel a {
  display: block;
  padding: 15px 20px;
  color: #1e3a8a !important;
  font-weight: 700 !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* When menu is open, show panel */
body.mobile-menu-open .mobile-menu-panel {
  left: 0;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  /* Show hamburger, hide regular menu */
  .mobile-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    margin-right: 10px;
  }
  
  .mobile-hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #1e3a8a;
    border-radius: 3px;
  }
  
  /* Hide the desktop menu on mobile */
  #custom-yellow-header div[style*="list-style: none"] {
    display: none !important;
  }
}