/* ================================================================
   SureCertificate Custom Brand CSS
   Comprehensive fixes for logo, inner pages, overflow, branding
   ================================================================ */

/* ===== BODY OVERFLOW FIX ===== */
html, body {
  overflow-x: hidden !important;
}
body {
  overflow-y: auto !important;
}

/* ===== LOGO FIX ===== */
img[alt="kh logo"] {
  position: relative !important;
  width: auto !important;
  height: 65px !important;
  max-width: 240px !important;
  object-fit: contain !important;
  object-position: left center !important;
  left: 0 !important;
  top: 0 !important;
  margin-top: -6px !important;
}
span.relative:has(img[alt="kh logo"]),
div.relative:has(img[alt="kh logo"]) {
  width: 240px !important;
  height: 65px !important;
  overflow: visible !important;
  display: block !important;
}

/* ===== NAV AND HEADER FIXES ===== */
header, nav, section:first-child {
  overflow: visible !important;
}

/* ===== INNER PAGE FIXES ===== */
main, [role="main"],
div#__next > div,
div#__next > section {
  overflow: visible !important;
}
.sticky, [class*="sticky"] {
  z-index: 1000;
}

/* ===== MEGA MENU STYLES ===== */
.sc-all-courses-panel {
  display: none;
}
.sc-all-courses-panel.sc-open {
  display: block !important;
  position: fixed !important;
  top: 72px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: white !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18) !important;
  max-height: calc(100vh - 72px) !important;
  overflow-y: auto !important;
}

/* ===== UPGRAD OVERLAY BRANDING ===== */
.sc-brand-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ===== SCROLLBAR FIX ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #5DA363; border-radius: 3px; }

/* ===== COLOR BRAND OVERRIDES ===== */
.text-primary-main { color: #5DA363 !important; }
.bg-primary-main { background-color: #5DA363 !important; }
.border-primary-main { border-color: #5DA363 !important; }

/* ================================================================
   CATEGORY PAGE HERO SECTION FIX
   Affects: artificial-intelligence-courses.php, agile-management.php,
   project-management-certifications.php, cyber-security-courses.php,
   cloud-computing-courses.php, itsm-certifications.php,
   data-science-courses.php, devops-courses.php, web-development-courses.php

   Root causes:
   1. Banner image uses position:absolute inside a div with no height
      → image collapses to 0px and is invisible
   2. h1 has hardcoded w-62.5 (250px) → text clips on desktop/tablet
   3. The 12-col grid doesn't stack properly on mobile
   ================================================================ */

/* --- A. Give the image column a proper height so absolute img shows --- */
/* The image wrapper: col-md-5 which is flex justify-center col-12 col-md-5 items-center flex-col */
.col-12.col-md-5 {
  position: relative !important;
  min-height: 280px !important;
}
/* The inner relative h-full wrapper */
.col-12.col-md-5 > div.relative.h-full {
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
}
/* The absolutely positioned banner image */
.col-12.col-md-5 img[alt],
.col-12.col-md-5 > div.relative.h-full img {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 12px !important;
  display: block !important;
}

/* --- B. Fix the h1 fixed width (w-62.5 = 250px) --- */
.category-banner h1 {
  width: 100% !important;
  max-width: 100% !important;
}

/* --- C. On desktop: make the 12-col grid a proper 2-column layout --- */
@media (min-width: 768px) {
  /* The HERO grid row only: image left (5 cols), text right (7 cols)
     Selector targets the specific hero grid that has BOTH grid-cols-1 AND md:grid-cols-12 */
  div[class*="grid-cols-1"][class*="md:grid-cols-12"] {
    display: grid !important;
    grid-template-columns: 5fr 7fr !important;
    gap: 32px !important;
    align-items: center !important;
  }

  /* Inner section grids (Prerequisites, etc.) that use 'grid-cols-12 grid'
     without the 'md:grid' prefix — give them a proper 2-col layout too */
  .grid.grid-cols-12.gap-5 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
  }

  /* Image column: full height */
  .col-12.col-md-5 {
    min-height: 380px !important;
    height: 100% !important;
  }
  .col-12.col-md-5 > div.relative.h-full img {
    min-height: 360px !important;
  }

  /* Text column: proper padding and full width */
  .col-12.col-md-7 {
    padding-left: 0 !important;
    width: 100% !important;
  }

  /* Ratings row: keep on one line on desktop */
  .flex.gap-spacing20.py-spacing16.border-y-1 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
}


/* --- D. On mobile: stack image above text --- */
@media (max-width: 767px) {
  /* The hero grid row becomes a column stack */
  div[class*="grid-cols-1"][class*="md:grid-cols-12"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Inner section grids: stack on mobile */
  .grid.grid-cols-12.gap-5 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Image first, take full width */
  .col-12.col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    min-height: 220px !important;
    order: -1 !important;
  }

  /* Text column full width */
  .col-12.col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-top: 20px !important;
  }

  /* Category banner text alignment */
  .category-banner {
    padding: 0 4px !important;
  }
  .category-banner h1 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    width: 100% !important;
  }
  .category-banner h2 {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Ratings row on mobile: allow wrap but keep each rating item together */
  .flex.gap-spacing20.py-spacing16.border-y-1 {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  /* Each rating item (Google 4.8/5, Facebook 4.7/5 etc): don't break internally */
  .flex.gap-spacing20.py-spacing16.border-y-1 > div,
  .flex.gap-spacing20.py-spacing16.border-y-1 > a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}


/* ================================================================
   AI PAGE: "Immersive Learning for AI Courses" section fix
   The section uses an absolute-positioned layout for the demo
   screenshot/mockup images. On smaller screens it breaks.
   ================================================================ */

/* Immersive Learning section: ensure proper containment */
section[data-id="ImmersiveLearning"],
section[id="ImmersiveLearning"] {
  overflow: hidden !important;
}

/* The tabs row (Learn, Practice, Assess, Gain Insights, Apply) */
section[data-id="ImmersiveLearning"] ul,
section[id="ImmersiveLearning"] ul {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Demo image container with absolute positioning */
section[data-id="ImmersiveLearning"] .relative,
section[id="ImmersiveLearning"] .relative {
  overflow: hidden !important;
}

@media (max-width: 768px) {
  /* Immersive learning: stack description + image on mobile */
  section[data-id="ImmersiveLearning"] .md\\:flex-row,
  section[id="ImmersiveLearning"] .md\\:flex-row {
    flex-direction: column !important;
  }

  /* Demo image frame: cap height on mobile */
  section[data-id="ImmersiveLearning"] [class*="h-"],
  section[id="ImmersiveLearning"] [class*="h-"] {
    height: auto !important;
    max-height: 300px !important;
  }
}



/* ================================================================
   Responsive fixes (site-wide)
   ================================================================ */
img, video, iframe {
  max-width: 100%;
  height: auto;
}
body, p, a, li, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
}

/* Footer: 4 cols -> 2 cols -> 1 col */
@media (max-width: 1024px) {
  #sc-global-footer section[style*="grid-template-columns:repeat(4"] div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  #sc-global-footer section[style*="grid-template-columns:repeat(4"] div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  #sc-global-footer section[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Header search + buttons on small screens */
@media (max-width: 1100px) {
  .sc-search { display: none !important; }
  .sc-cta { display: none !important; }
  .sc-links { overflow-x: auto !important; }
}

/* Mega menu height on mobile */
@media (max-width: 640px) {
  #sc-mega { top: 68px !important; padding: 10px 0 !important; }
  .sc-mega-card { min-height: auto !important; }
}

/* ================================================================
   Internal pages alignment + legacy export cleanup
   ================================================================ */
.all-courses-menu.mega-menu {
  display: none !important;
}

/* Keep all page wrappers centered consistently */
section > [class*="w-full"][class*="max-w"],
div > [class*="w-full"][class*="max-w"] {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Prevent sideways push by sliders/carousels */
.slider-container, .slider-frame, .slider-list, .swiper, .swiper-wrapper {
  max-width: 100% !important;
}
.slider-frame, .swiper { overflow: hidden !important; }

/* Normalize 12-col wrapper */
.grid.grid-cols-12 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* ================================================================
   CRITICAL: Override extreme xl:px-spacing80 / sm:px-spacing112
   horizontal padding from the KnowledgeHut legacy CSS bundles.
   spacing80 = 320px, spacing112 = 448px — these crush the content
   into a narrow left-aligned column on internal course pages.
   ================================================================ */

/* Strip the excessive section-level horizontal padding */
section[class*="spacing80"],
section[class*="spacing112"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Give the inner container a sensible centred layout */
section[class*="spacing80"] > div,
section[class*="spacing112"] > div {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* Also handle px-spacing20 direct on inner div (double-guard) */
div[class*="px-spacing20"][class*="w-full"] {
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ================================================================
   TABLET FIXES (max-width: 1024px)
   ================================================================ */
@media (max-width: 1024px) {
  section[class*="spacing80"] > div,
  section[class*="spacing112"] > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ================================================================
   MOBILE FIXES (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {

  section[class*="spacing80"] > div,
  section[class*="spacing112"] > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Stats bar: allow wrapping */
  ul[class*="justify-between"][class*="bg-secondary"] {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  ul[class*="justify-between"][class*="bg-secondary"] > li {
    flex: 0 0 45% !important;
  }

  /* Fixed-width stats bar container: go full-width */
  [class*="md:w-211"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Safely fallback 12-column grids to a vertical stack */
  .grid-cols-12 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .grid-cols-12 > * { width: 100% !important; max-width: 100% !important; }

  /* Course card grids: 1 col on tablet */
  [class*="grid-cols-1"][class*="md:grid-cols-3"],
  [class*="grid-cols-1"][class*="md:grid-cols-4"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* Stats bar flex wrap */
  .grow.shrink.basis-0.self-stretch.justify-start.items-start {
    flex-wrap: wrap !important;
  }
  .grow.shrink.basis-0.self-stretch.justify-start.items-start > div {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box;
  }

  /* FIX: "Soaring Demand" salary/hiring chart table on mobile —
     numbers were overflowing and showing letters vertically */
  table { width: 100% !important; table-layout: fixed !important; }
  td, th {
    word-break: break-word !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Prevent any fixed-pixel width styles from overflowing */
  [style*="width:493px"],
  [style*="width:684px"],
  [style*="width:568px"],
  [style*="width:305px"],
  [style*="width:279px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Banner image container: full width on mobile */
  [class*="w-130"],
  [class*="h-86"] {
    width: 100% !important;
    height: auto !important;
  }

  /* Hero two-column row: stack vertically */
  .row.g-4 {
    display: block !important;
  }
  .col-12.col-md-7,
  .col-12.col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ================================================================
   SMALL MOBILE FIXES (max-width: 640px)
   ================================================================ */
@media (max-width: 640px) {

  /* Course card grids: 1 column */
  [class*="grid-cols-1"][class*="md:grid-cols-3"],
  [class*="grid-cols-1"][class*="md:grid-cols-4"] {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 16px !important;
  }
  [class*="grid-cols-1"][class*="md:grid-cols-3"] img,
  [class*="grid-cols-1"][class*="md:grid-cols-4"] img {
    aspect-ratio: 4/3;
  }

  /* Card padding reduced */
  .rounded-xl .p-spacing20, .rounded-xl [class*="p-spacing"] {
    padding: 10px !important;
  }

  /* Stats bar: 2×2 grid on phone */
  .grow.shrink.basis-0.self-stretch.justify-start.items-start {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }
  .grow.shrink.basis-0.self-stretch.justify-start.items-start > div {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 8px !important;
    box-sizing: border-box;
  }

  /* Search box */
  .w-100 { width: auto !important; min-width: 120px !important; }

  /* Section title + search bar: stack vertically */
  #explorecourses { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  #explorecourses .w-100 { width: 100% !important; }
  #explorecourses .text-3xl { font-size: 1.5rem !important; line-height: 1.3 !important; }

  /* Slightly tighter gutters on very small screens */
  section[class*="spacing80"] > div,
  section[class*="spacing112"] > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Heading scale-down */
  h1[class*="text-2.75xl"],
  h2[class*="text-2.75xl"] {
    font-size: 1.6rem !important;
    line-height: 1.35 !important;
  }

  /* Bottom padding so sticky Call Now bar does not cover content */
  body {
    padding-bottom: 70px !important;
  }
}

/* ================================================================
   SOARING DEMAND / SALARY CHART SECTION — Mobile Fix
   The chart uses an `inline-flex` row:
     div.gap-spacing32.pt-spacing48.w-full.justify-start.items-start.inline-flex
   inside a card: div.rounded-xl.bg-white.p-spacing40
   On mobile the 3 columns get crushed to ~0 width causing letter-
   by-letter vertical text stacking.
   Fix: make the card scrollable & give the inline-flex a min-width.
   ================================================================ */

@media (max-width: 768px) {
  /* 1 — The white rounded card that wraps the salary chart:
         make it horizontally scrollable */
  div[class*="rounded-xl"][class*="bg-white"][class*="p-spacing40"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 2 — The inline-flex row itself: pin a minimum width so children
         keep their natural widths and don't collapse */
  div[class*="inline-flex"][class*="w-full"][class*="justify-start"][class*="items-start"] {
    min-width: 680px !important;
    flex-wrap: nowrap !important;
  }

  /* 3 — Each column child: don't shrink below usable width */
  div[class*="inline-flex"][class*="w-full"][class*="justify-start"] > div {
    flex-shrink: 0 !important;
    min-width: 160px !important;
  }

  /* 4 — Prevent fixed-px width inline styles from breaking layout */
  [style*="width:493px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:684px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:568px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:305px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:279px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:203px"] { width: 100% !important; max-width: 100% !important; }


  /* Practice tests page: sidebar + card grid — stack on mobile */
  aside[class*="min-w-\\[279px\\]"] {
    min-width: 100% !important;
    width: 100% !important;
    max-height: none !important;
  }

  /* Practice test card grid: remove fixed card width */
  div[class*="w-\\[305px\\]"] {
    width: 100% !important;
  }

  /* Hero section: remove fixed height from image column */
  div[class*="h-\\[385px\\]"],
  div[class*="h-\\[368"] {
    height: auto !important;
    min-height: 200px !important;
    width: 100% !important;
  }

  /* Flex rows in hero that have fixed widths (practice tests, etc.) */
  div.flex.items-center.justify-between.relative.w-full {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Section that wraps both the left text + right image columns */
  div.flex.flex-col.gap-spacing20.items-start.justify-center.relative.shrink-0 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ================================================================
   TABLET FIXES (769px – 1024px) — minor layout stability
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 3-col course grids: drop to 2 cols on tablet */
  [class*="md:grid-cols-3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Banner image: shrink to fit */
  [class*="w-130"],
  [class*="h-86"] {
    width: 100% !important;
    height: auto !important;
  }

  /* Hero flex row: give more breathing room */
  .col-12.col-md-7 { flex: 0 0 58% !important; max-width: 58% !important; }
  .col-12.col-md-5 { flex: 0 0 42% !important; max-width: 42% !important; }
}

/* ================================================================
   PMP CERTIFICATION PAGE – SPECIFIC OVERRIDES
   ================================================================ */

/* Hero image container fix */
.col-12.col-md-5 [class*="w-130"],
.col-12.col-md-5 [class*="h-86"] {
  width: 100% !important;
  height: 380px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.col-12.col-md-5 img[alt*="PMP"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: relative !important;
  left: 0 !important; top: 0 !important;
}

/* Batch widget responsive */
#pmp-batches-content > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 640px) {
  #pmp-batches-content > div {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Reviews widget responsive */
#pmp-reviews-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#pmp-reviews-content > div {
  flex: 1 1 300px;
  min-width: 0;
}
@media (max-width: 640px) {
  #pmp-reviews-content > div {
    flex: 0 0 100% !important;
  }
}

/* PMP hero mobile override */
@media (max-width: 767px) {
  .col-12.col-md-7 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 2;
  }
  .col-12.col-md-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 1;
    height: 240px !important;
  }
  .col-12.col-md-5 [class*="w-130"],
  .col-12.col-md-5 [class*="h-86"] {
    height: 240px !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  /* Prevent enrolled badge & rating overflow */
  [class*="max-w-59"], [class*="max-w-60"] {
    max-width: 100% !important;
  }
  /* Stats banner fix */
  ul.flex.relative[class*="w-211"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 20px 16px !important;
  }
  ul.flex.relative[class*="w-211"] li {
    flex: 0 0 calc(50% - 8px) !important;
    margin-bottom: 12px;
  }
  /* Program director section mobile */
  .gap-spacing32.flex.flex-row {
    flex-direction: column !important;
  }
  [class*="w-72\\.5"] {
    width: 100% !important;
    min-height: 220px !important;
    position: relative !important;
  }
}