/**
 * Mobile Responsive Styles for Ethical Hacking YouTube Theme
 * @CyberSecurityCourse - Mobile-First Design
 *
 * Breakpoints:
 * - Mobile: < 480px (small phones)
 * - Mobile Large: 480px - 767px (large phones)
 * - Tablet: 768px - 991px
 * - Desktop: 992px - 1199px
 * - Large Desktop: 1200px+
 */

/* ============================================
   MOBILE VALIDATION CLASSES (for testing)
   ============================================ */
.mobile-debug * {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}

.mobile-debug [class*="wp-block-"] {
  outline: 1px solid rgba(0, 255, 0, 0.3);
}

/* ============================================
   DESKTOP SITE TITLE - Show full, hide short
   ============================================ */
@media screen and (min-width: 992px) {
  .kb-site-title .site-title-short {
    display: none !important;
  }

  .kb-site-title .site-title-full {
    display: inline !important;
  }
}

/* ============================================
   HIDE SPACERS & EMPTY COLUMNS ON MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  /* Hide WordPress spacer blocks on mobile */
  .wp-block-spacer {
    display: none !important;
  }

  /* Hide empty group blocks that act as spacers */
  .wp-block-group:empty {
    display: none !important;
  }

  /* Hide Kadence spacer blocks */
  .kt-block-spacer,
  .kb-spacer {
    display: none !important;
  }

  /* Hide any element with only height/margin used as spacer */
  div[style*="height"]:empty,
  div[style*="margin"]:empty {
    display: none !important;
  }

  /* CRITICAL: Hide empty columns in grid layouts */
  .wp-block-column:empty,
  .wp-block-column:not(:has(*)),
  .wp-block-column:not(:has(p, h1, h2, h3, h4, h5, h6, img, a, ul, ol, div:not(:empty))) {
    display: none !important;
  }

  /* Hide columns that only contain empty nested elements */
  .wp-block-column:has(> .wp-block-group:empty):not(:has(p, h1, h2, h3, h4, h5, h6, img, a)) {
    display: none !important;
  }

  /* Reduce gap between cards in grids */
  .wp-block-columns {
    gap: 1rem !important;
  }

  /* Remove excessive margins from groups */
  .wp-block-group[style*="margin-top"],
  .wp-block-group[style*="margin-bottom"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  /* Even more aggressive spacer removal on phones */
  .wp-block-spacer,
  .kt-block-spacer,
  .kb-spacer,
  [class*="spacer"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Collapse empty divs */
  .wp-block-group:not(:has(*)) {
    display: none !important;
  }

  /* =============================================
     NUCLEAR OPTION: Hide ALL empty/decorative columns
     v2.1.2 - Aggressive fix for tool section columns
     ============================================= */

  /* Hide columns that are truly empty */
  .wp-block-column:empty {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Hide columns without ANY meaningful content */
  .wp-block-column:not(:has(h1, h2, h3, h4, h5, h6, p, li, span, a, img, figure, video, iframe, .wp-block-button, .wp-block-image, .kb-icon-list, .ehc-tool-card, .ehc-feature-card, .ehc-cert-card, .ehc-course-card)) {
    display: none !important;
  }

  /* Force single column layout - CRITICAL for tool sections */
  .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Only show columns that have actual cards/content */
  .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
  }

  /* Hide columns with only background, no content - broadest selector */
  .wp-block-column:not(:has(*:not(:empty))),
  .wp-block-column:not(:has(img)):not(:has(p)):not(:has(h1)):not(:has(h2)):not(:has(h3)):not(:has(h4)):not(:has(a)):not(:has(figure)):not(:has(.wp-block-group:has(*))) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Specifically target tool section empty columns */
  .wp-block-column[style*="background"]:not(:has(img, h1, h2, h3, h4, p, a, figure)) {
    display: none !important;
  }

  /* Hide columns that only have empty nested groups */
  .wp-block-column:has(.wp-block-group:empty):not(:has(p, h1, h2, h3, h4, h5, h6, img, a, figure)) {
    display: none !important;
  }
}

/* ============================================
   HOMEPAGE SECTION MOBILE OVERRIDES (CRITICAL)
   Fixes for style.css !important values
   ============================================ */

/* Tablet breakpoint (768px - 991px) */
@media screen and (max-width: 991px) {
  /* Hero section - reduce padding */
  main.ehc-homepage .ehc-hero,
  .ehc-homepage .ehc-hero.ehc-section,
  .ehc-hero {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    min-height: 60vh !important;
  }

  /* All content sections - consistent tablet spacing */
  main.ehc-homepage .ehc-section,
  main.ehc-homepage .ehc-latest-section,
  main.ehc-homepage .ehc-courses-section,
  main.ehc-homepage .ehc-cert-section,
  main.ehc-homepage .ehc-kb-section,
  .ehc-section,
  .ehc-latest-section,
  .ehc-courses-section,
  .ehc-cert-section,
  .ehc-kb-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Final CTA tablet spacing */
  main.ehc-homepage .ehc-final-cta,
  .ehc-final-cta {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Hero heading tablet size */
  .ehc-hero h1 {
    font-size: 36px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  .ehc-hero p {
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }

  /* Section headings tablet */
  .ehc-section h2,
  .ehc-latest-section h2,
  .ehc-courses-section h2,
  .ehc-cert-section h2,
  .ehc-kb-section h2 {
    font-size: 28px !important;
    margin-bottom: 12px !important;
  }
}

/* Mobile breakpoint (max-width: 767px) */
@media screen and (max-width: 767px) {
  /* Hero section - compact mobile layout */
  main.ehc-homepage .ehc-hero,
  .ehc-homepage .ehc-hero.ehc-section,
  .ehc-hero {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    min-height: auto !important;
  }

  /* Hero columns - stack on mobile */
  .ehc-hero .wp-block-columns,
  .ehc-hero > .wp-block-columns {
    max-width: 100% !important;
    gap: 24px !important;
  }

  /* Hero heading - mobile optimized */
  .ehc-hero h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .ehc-hero p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }

  /* All content sections - mobile compact spacing */
  main.ehc-homepage .ehc-section,
  main.ehc-homepage .ehc-latest-section,
  main.ehc-homepage .ehc-courses-section,
  main.ehc-homepage .ehc-cert-section,
  main.ehc-homepage .ehc-kb-section,
  .ehc-section,
  .ehc-latest-section,
  .ehc-courses-section,
  .ehc-cert-section,
  .ehc-kb-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Final CTA mobile spacing */
  main.ehc-homepage .ehc-final-cta,
  .ehc-final-cta {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Section headings - mobile */
  .ehc-homepage .ehc-section h2,
  .ehc-homepage h2.has-text-align-center,
  .ehc-section h2,
  .ehc-latest-section h2,
  .ehc-courses-section h2,
  .ehc-cert-section h2,
  .ehc-kb-section h2 {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    margin-bottom: 10px !important;
  }

  /* Section descriptions - mobile */
  .ehc-section > p.has-text-align-center,
  .ehc-homepage .ehc-section > p.has-text-align-center {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
  }

  /* Cards - mobile padding */
  .ehc-track-card,
  .ehc-pricing-card,
  .ehc-cert-card {
    padding: 20px !important;
  }

  /* Card lists - mobile */
  .ehc-track-card ul,
  .wp-block-group ul {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .ehc-track-card li,
  .wp-block-group li {
    padding: 8px 0;
    font-size: 14px;
  }
}

/* Small phone breakpoint (max-width: 480px) */
@media screen and (max-width: 480px) {
  /* Hero - extra compact for small phones */
  main.ehc-homepage .ehc-hero,
  .ehc-homepage .ehc-hero.ehc-section,
  .ehc-hero {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .ehc-hero h1 {
    font-size: clamp(22px, 6.5vw, 28px) !important;
  }

  .ehc-hero p {
    font-size: 14px !important;
  }

  /* Sections - extra compact */
  main.ehc-homepage .ehc-section,
  main.ehc-homepage .ehc-latest-section,
  main.ehc-homepage .ehc-courses-section,
  main.ehc-homepage .ehc-cert-section,
  main.ehc-homepage .ehc-kb-section,
  .ehc-section,
  .ehc-latest-section,
  .ehc-courses-section,
  .ehc-cert-section,
  .ehc-kb-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Final CTA - extra compact */
  main.ehc-homepage .ehc-final-cta,
  .ehc-final-cta {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Section headings - small phones */
  .ehc-section h2,
  .ehc-latest-section h2,
  .ehc-courses-section h2,
  .ehc-cert-section h2,
  .ehc-kb-section h2 {
    font-size: clamp(18px, 5vw, 22px) !important;
  }

  /* Cards - smaller padding */
  .ehc-track-card,
  .ehc-pricing-card,
  .ehc-cert-card {
    padding: 16px !important;
  }
}

/* ============================================
   BASE MOBILE RESETS
   ============================================ */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* Improve touch targets */
a, button, input, select, textarea,
[role="button"],
.wp-block-button__link,
.wp-block-navigation-link {
  min-height: 44px;
  min-width: 44px;
}

/* ============================================
   MOBILE TYPOGRAPHY
   ============================================ */
@media screen and (max-width: 767px) {
  html {
    font-size: 15px;
  }

  h1, .wp-block-heading h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }

  h2, .wp-block-heading h2 {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    line-height: 1.25 !important;
  }

  h3, .wp-block-heading h3 {
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    line-height: 1.3 !important;
  }

  h4, h5, h6 {
    font-size: clamp(1rem, 3.5vw, 1.25rem) !important;
  }

  p, li, td, th {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
}

/* ============================================
   MOBILE HEADER STYLES - OVERLAP FIX v2.2.0
   ============================================ */

/* CSS Custom Properties for header heights */
:root {
  --header-height-desktop: 70px;
  --header-height-tablet: 60px;
  --header-height-mobile: 56px;
  --admin-bar-height-desktop: 32px;
  --admin-bar-height-mobile: 46px;
}

/* ============================================
   HEADER SPACER - Prevents content overlap
   ============================================ */

/* Global sticky header setup */
.kb-site-header,
header.wp-block-group.kb-site-header,
.ehc-site-header {
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  background: rgba(8, 10, 15, 0.98) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Admin bar support - Desktop (32px) */
body.admin-bar .kb-site-header,
body.admin-bar header.wp-block-group.kb-site-header,
body.admin-bar .ehc-site-header {
  top: var(--admin-bar-height-desktop) !important;
}

/* CRITICAL: Content spacing to prevent header overlap */
/* Target first element after header in WordPress block editor output */
.wp-site-blocks > header.kb-site-header + *,
.wp-site-blocks > header.wp-block-group.kb-site-header + *,
body > .wp-site-blocks > *:not(header):first-of-type {
  scroll-margin-top: calc(var(--header-height-desktop) + 20px);
}

/* ============================================
   TABLET BREAKPOINT (768px - 991px)
   ============================================ */
@media screen and (max-width: 991px) {
  /* Hide top bar on tablet/mobile - reduces header height */
  .kb-top-bar,
  .ehc-top-bar {
    display: none !important;
  }

  /* Main header adjustments with consistent height */
  .kb-main-header,
  .ehc-main-header {
    padding: 0.75rem 1rem !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem;
    min-height: var(--header-height-tablet);
    align-items: center !important;
  }

  /* Ensure sticky positioning */
  .kb-site-header,
  header.wp-block-group.kb-site-header,
  .ehc-site-header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }

  /* Admin bar support - Mobile (46px from 783px down) */
  body.admin-bar .kb-site-header,
  body.admin-bar header.wp-block-group.kb-site-header,
  body.admin-bar .ehc-site-header {
    top: var(--admin-bar-height-mobile) !important;
  }

  /* Content spacing for tablet */
  .wp-site-blocks > header.kb-site-header + *,
  .wp-site-blocks > header.wp-block-group.kb-site-header + * {
    scroll-margin-top: calc(var(--header-height-tablet) + 16px);
  }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 767px)
   ============================================ */
@media screen and (max-width: 767px) {
  /* Compact header for mobile */
  .kb-main-header,
  .ehc-main-header {
    padding: 0.625rem 0.875rem !important;
    min-height: var(--header-height-mobile);
    gap: 0.5rem;
  }

  /* Logo area */
  .kb-main-header .wp-block-group:first-child,
  .ehc-main-header .wp-block-group:first-child {
    flex: 1;
    min-width: 0;
  }

  .kb-main-header .wp-block-group:first-child p,
  .ehc-main-header .wp-block-group:first-child p {
    font-size: 0.875rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hide "by Ethical Hacking Co" on small screens */
  .kb-main-header .wp-block-group:first-child span,
  .ehc-main-header .wp-block-group:first-child span {
    display: none;
  }

  /* Hide header search and subscribe on mobile */
  .kb-header-search,
  .ehc-header-search {
    display: none !important;
  }

  .kb-header-subscribe,
  .ehc-header-subscribe {
    display: none !important;
  }

  /* Hide email course button on mobile - show in menu */
  .kb-header-course {
    display: none !important;
  }

  /* Content spacing for mobile */
  .wp-site-blocks > header.kb-site-header + *,
  .wp-site-blocks > header.wp-block-group.kb-site-header + * {
    scroll-margin-top: calc(var(--header-height-mobile) + 12px);
  }

  /* Admin bar adjustments for mobile */
  body.admin-bar .wp-site-blocks > header.kb-site-header + *,
  body.admin-bar .wp-site-blocks > header.wp-block-group.kb-site-header + * {
    scroll-margin-top: calc(var(--header-height-mobile) + var(--admin-bar-height-mobile) + 12px);
  }
}

/* ============================================
   WORDPRESS ADMIN BAR PRECISE BREAKPOINTS
   ============================================ */
@media screen and (max-width: 782px) {
  /* WordPress admin bar switches to 46px at 782px */
  body.admin-bar .kb-site-header,
  body.admin-bar header.wp-block-group.kb-site-header,
  body.admin-bar .ehc-site-header {
    top: 46px !important;
  }
}

@media screen and (max-width: 600px) {
  /* WordPress admin bar becomes position:absolute at 600px */
  body.admin-bar .kb-site-header,
  body.admin-bar header.wp-block-group.kb-site-header,
  body.admin-bar .ehc-site-header {
    top: 0 !important;
  }

  /* Add margin-top when admin bar scrolls away */
  body.admin-bar .wp-site-blocks {
    margin-top: 0 !important;
  }
}

/* ============================================
   MOBILE NAVIGATION - HAMBURGER MENU SYSTEM
   Enhanced v2.1.2 - Premium Mobile Experience
   ============================================ */

/* Background overlay when menu is open */
.ehc-mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ehc-mobile-menu-overlay.is-visible {
  display: block;
  opacity: 1;
}

/* Body lock when menu open */
body.ehc-menu-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none;
}

@media screen and (max-width: 991px) {
  /* Navigation container */
  .kb-main-nav,
  .ehc-main-nav,
  .wp-block-navigation {
    position: relative;
  }

  /* HAMBURGER BUTTON - Premium design */
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #f8fafc;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .wp-block-navigation__responsive-container-open:hover,
  .wp-block-navigation__responsive-container-open:focus {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 255, 136, 0.08) 100%);
    border-color: rgba(0, 255, 136, 0.5);
    box-shadow: 0 4px 16px rgba(0, 255, 136, 0.2);
    outline: none;
  }

  .wp-block-navigation__responsive-container-open:active {
    transform: scale(0.92);
  }

  .wp-block-navigation__responsive-container-open svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: transform 0.3s ease;
  }

  /* MOBILE MENU CONTAINER - Premium slide-in panel */
  /* CRITICAL: Override WordPress core display:none - container must be rendered but off-screen */
  .wp-block-navigation__responsive-container {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 88% !important;
    max-width: 340px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: linear-gradient(180deg, #12121a 0%, #0a0a0f 50%, #0f0f18 100%) !important;
    z-index: 99999 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
    border-left: 1px solid rgba(0, 255, 136, 0.1);
    -webkit-overflow-scrolling: touch;
    /* FORCE VISIBILITY - Override WP core that sets display:none */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none; /* Prevent interaction when closed (off-screen) */
  }

  /* Re-enable pointer events when open */
  .wp-block-navigation__responsive-container.is-menu-open {
    pointer-events: auto !important;
  }

  /* MENU OPEN STATE - Force visible with all properties */
  .wp-block-navigation__responsive-container.is-menu-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    pointer-events: auto !important;
  }

  /* Also ensure the inner elements are visible */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }

  /* Menu inner wrapper */
  .wp-block-navigation__responsive-close {
    display: block !important;
    height: 100%;
    padding: 0;
  }

  .wp-block-navigation__responsive-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
  }

  /* CLOSE BUTTON - Premium design */
  .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    color: #94a3b8 !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
  }

  .wp-block-navigation__responsive-container-close:hover,
  .wp-block-navigation__responsive-container-close:focus {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
    transform: rotate(90deg);
    outline: none;
  }

  .wp-block-navigation__responsive-container-close svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
  }

  /* MENU HEADER with branding */
  .wp-block-navigation__responsive-container::before {
    content: '🔐 CyberSecurityCourse';
    display: block;
    padding: 24px 24px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #00ff88;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* MENU CONTENT AREA */
  .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column;
    padding: 12px 0 32px 0 !important;
    height: 100%;
  }

  /* MENU ITEMS CONTAINER */
  .wp-block-navigation__responsive-container .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* INDIVIDUAL MENU ITEMS - No animation for Android compatibility */
  .wp-block-navigation__responsive-container .wp-block-navigation-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    /* Animation disabled - causes invisible items on Android Chrome */
  }

  .wp-block-navigation__responsive-container .wp-block-navigation-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* DISABLED: Staggered animations break on Android Chrome */
  /* Menu items appear immediately for reliability */

  /* MENU LINKS - Premium hover effects */
  .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    padding: 18px 24px !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    color: #e4e4e7 !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    position: relative;
    overflow: hidden;
  }

  /* Active indicator line */
  .wp-block-navigation__responsive-container .wp-block-navigation-item__content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #00ff88 0%, #3b82f6 100%);
    border-radius: 0 2px 2px 0;
    transition: height 0.25s ease;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover::before,
  .wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus::before {
    height: 60%;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover,
  .wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.08) 0%, transparent 100%) !important;
    color: #00ff88 !important;
    padding-left: 32px !important;
    outline: none;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation-item__content:active {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.15) 0%, transparent 100%) !important;
    transform: scale(0.98);
  }

  .wp-block-navigation__responsive-container .current-menu-item > .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container .current-menu-ancestor > .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container .current-page-ancestor > .wp-block-navigation-item__content {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.18) 0%, rgba(59, 130, 246, 0.12) 100%) !important;
    color: #00ff88 !important;
  }

  .wp-block-navigation__responsive-container .current-menu-item > .wp-block-navigation-item__content::before,
  .wp-block-navigation__responsive-container .current-menu-ancestor > .wp-block-navigation-item__content::before,
  .wp-block-navigation__responsive-container .current-page-ancestor > .wp-block-navigation-item__content::before {
    height: 60%;
  }

  /* Menu item label */
  .wp-block-navigation__responsive-container .wp-block-navigation-item__label {
    font-size: inherit;
    font-weight: inherit;
  }

  /* Hide desktop elements in mobile menu */
  .wp-block-navigation__responsive-container .kb-header-search,
  .wp-block-navigation__responsive-container .kb-header-subscribe {
    display: none !important;
  }

  /* MOBILE MENU CTA - Real link */
  .kb-main-nav .kb-mobile-cta-link {
    display: none;
  }

  .wp-block-navigation__responsive-container .kb-mobile-cta-link {
    display: block;
    margin: auto 20px 24px 20px;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation__container {
    flex: 1;
  }

  .wp-block-navigation__responsive-container .kb-mobile-cta-link .wp-block-navigation-item__content {
    justify-content: center;
    padding: 16px 20px !important;
    border-radius: 12px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #b91c1c 100%);
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3);
    animation: ctaPulse 3s ease-in-out infinite;
  }

  .wp-block-navigation__responsive-container .kb-mobile-cta-link .wp-block-navigation-item__content:hover,
  .wp-block-navigation__responsive-container .kb-mobile-cta-link .wp-block-navigation-item__content:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(255, 0, 0, 0.45);
  }

  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3); }
    50% { box-shadow: 0 6px 30px rgba(255, 0, 0, 0.5); }
  }

  /* Swipe indicator */
  .wp-block-navigation__responsive-container::after {
    content: '';
    position: fixed;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .wp-block-navigation__responsive-container.is-menu-open::after {
    opacity: 1;
  }

  /* Header adjustments for mobile */
  .kb-main-header {
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  /* Hide search and subscribe button on mobile - show in menu instead */
  .kb-header-search {
    display: none !important;
  }

  .kb-header-subscribe {
    display: none !important;
  }

  /* Logo sizing for mobile */
  .kb-main-header .wp-block-site-logo img {
    max-height: 32px;
    width: auto;
  }

  /* Mobile site title - show short version */
  .kb-site-title .site-title-full {
    display: none !important;
  }

  .kb-site-title .site-title-short {
    display: inline !important;
  }

  .kb-main-header p[style*="font-weight:700"],
  .kb-main-header .kb-site-title {
    font-size: 1.1rem !important;
    white-space: nowrap !important;
  }
}

/* Small phones */
@media screen and (max-width: 480px) {
  .wp-block-navigation__responsive-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .kb-main-header {
    padding: 10px 12px !important;
  }

  .kb-main-header p[style*="font-weight:700"],
  .kb-main-header .kb-site-title {
    font-size: 1rem !important;
  }
}

/* ============================================
   MOBILE CONTENT AREAS
   ============================================ */
@media screen and (max-width: 767px) {
  /* Main content padding */
  .ehc-main-content,
  .ehc-page-content,
  .ehc-archive-page,
  .ehc-search-page,
  .ehc-lesson-page,
  .ehc-404-page,
  .ehc-docs-archive {
    padding: 1rem !important;
  }

  /* Remove extra margins */
  main > .wp-block-group:first-child {
    padding-top: 1rem !important;
  }

  /* Cards and boxes */
  .ehc-post-card,
  .ehc-archive-card,
  .ehc-search-result,
  .ehc-doc-card,
  .ehc-sidebar-cta,
  .ehc-related-lessons {
    padding: 1rem !important;
    border-radius: 8px !important;
  }

  /* Columns to stack */
  .wp-block-columns {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Post grids */
  .wp-block-post-template {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Query blocks grid */
  [class*="wp-block-query"] .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   MOBILE ARTICLE/POST STYLES
   ============================================ */
@media screen and (max-width: 767px) {
  /* Featured images */
  .wp-block-post-featured-image {
    margin-bottom: 1rem;
  }

  .wp-block-post-featured-image img {
    border-radius: 8px;
    width: 100%;
    height: auto;
  }

  /* Post titles */
  .wp-block-post-title {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  /* Post excerpts */
  .wp-block-post-excerpt {
    font-size: 0.875rem !important;
  }

  .wp-block-post-excerpt__more-link {
    display: inline-block;
    margin-top: 0.5rem;
  }

  /* Post meta */
  .wp-block-post-date,
  .wp-block-post-terms {
    font-size: 0.75rem !important;
  }

  /* Author info */
  .wp-block-post-author {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .wp-block-post-author__avatar {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ============================================
   MOBILE BETTERDOCS / KNOWLEDGE BASE
   ============================================ */
@media screen and (max-width: 991px) {
  /* Sidebar becomes collapsible */
  .betterdocs-sidebar,
  .betterdocs-sidebar-content {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    z-index: 99998;
    transition: left 0.3s ease;
    overflow-y: auto;
    border-radius: 0;
    border-right: 1px solid var(--betterdocs-border);
  }

  .betterdocs-sidebar.is-open,
  .betterdocs-sidebar-content.is-open {
    left: 0;
  }

  /* Sidebar overlay */
  .betterdocs-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99997;
  }

  .betterdocs-sidebar-overlay.is-visible {
    display: block;
  }

  /* Sidebar toggle button */
  .betterdocs-sidebar-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--betterdocs-surface);
    border: 1px solid var(--betterdocs-border);
    border-radius: 8px;
    color: var(--betterdocs-text);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 1rem;
  }

  .betterdocs-sidebar-toggle::before {
    content: '☰';
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 767px) {
  /* Single doc content */
  .betterdocs-single-content,
  .betterdocs-single-main {
    padding: 1.25rem !important;
    margin: 0 !important;
  }

  .betterdocs-single-content .entry-title,
  .betterdocs-single-content h1 {
    font-size: 1.375rem !important;
  }

  /* Table of Contents */
  .betterdocs-toc,
  .betterdocs-toc-wrap {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .betterdocs-toc ul li a {
    font-size: 0.875rem;
    padding: 0.5rem 0;
  }

  /* Category boxes grid */
  .betterdocs-categories-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .betterdocs-category-box,
  .betterdocs-category-grid-item,
  .betterdocs-single-category-wrapper {
    width: 100% !important;
    padding: 1rem !important;
  }

  /* Breadcrumbs */
  .betterdocs-breadcrumb,
  .betterdocs-breadcrumb-wrap {
    font-size: 0.8125rem;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* Navigation prev/next */
  .betterdocs-navigation,
  .betterdocs-doc-navigation {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }

  .betterdocs-navigation a,
  .betterdocs-doc-navigation a {
    padding: 1rem;
  }

  /* Code blocks */
  .betterdocs-single-content .entry-content pre {
    padding: 1rem;
    font-size: 0.8125rem;
    border-radius: 8px;
    margin: 1rem -1.25rem;
    border-radius: 0;
  }

  /* Tables */
  .betterdocs-single-content .entry-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .betterdocs-single-content .entry-content th,
  .betterdocs-single-content .entry-content td {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   MOBILE FOOTER
   ============================================ */
@media screen and (max-width: 991px) {
  .ehc-footer-main {
    padding: 2rem 1rem !important;
  }

  .ehc-footer-main .wp-block-columns {
    gap: 2rem !important;
  }

  .ehc-footer-main .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 767px) {
  /* Footer links */
  .ehc-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    list-style: none !important;
    padding: 0 !important;
  }

  .ehc-footer-links li {
    flex: 0 0 calc(50% - 0.5rem);
    margin: 0 !important;
  }

  .ehc-footer-links li a {
    display: block;
    padding: 0.5rem 0;
  }

  /* Footer bottom */
  .ehc-footer-bottom {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
    padding: 1.25rem 1rem !important;
  }

  .ehc-footer-bottom p {
    font-size: 0.75rem !important;
  }

  /* Social links */
  .ehc-footer-social {
    justify-content: center;
  }

  .ehc-footer-social li {
    margin: 0 !important;
  }
}

/* ============================================
   MOBILE VIDEO & EMBEDS
   ============================================ */
@media screen and (max-width: 767px) {
  /* Video wrapper */
  .ehc-video-wrapper {
    margin: 1rem 0;
    border-radius: 8px;
  }

  /* Video player in lessons */
  .ehc-video-player {
    margin-bottom: 1rem !important;
  }

  /* Embedded content */
  .wp-block-embed {
    margin: 1rem 0;
  }

  .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }

  .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Video grids */
  .ehc-video-grid,
  .ehc-playlist-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .ehc-video-card,
  .ehc-playlist-item {
    border-radius: 8px;
  }

  .ehc-video-title {
    font-size: 0.9375rem !important;
    padding: 0.75rem !important;
  }
}

/* ============================================
   MOBILE BUTTONS & CTAS
   ============================================ */
@media screen and (max-width: 767px) {
  /* Button groups */
  .wp-block-buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .wp-block-button {
    width: 100%;
  }

  .wp-block-button__link {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.9375rem !important;
  }

  /* YouTube CTA buttons */
  .ehc-btn-youtube {
    width: 100%;
  }

  .ehc-btn-youtube .wp-block-button__link {
    width: 100%;
  }

  /* Footer CTA */
  .ehc-footer-cta {
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
  }

  .ehc-footer-cta h3 {
    font-size: 1.125rem !important;
  }

  .ehc-footer-cta p {
    font-size: 0.9375rem !important;
  }

  /* Inline CTAs */
  .ehc-inline-cta,
  .ehc-mid-cta {
    padding: 0.875rem !important;
    font-size: 0.875rem !important;
  }

  /* Floating CTA */
  .ehc-floating-cta {
    bottom: 1rem !important;
    right: 1rem !important;
  }
}

/* ============================================
   MOBILE SEARCH
   ============================================ */
@media screen and (max-width: 767px) {
  /* Search form */
  .wp-block-search {
    flex-direction: column !important;
    gap: 0.75rem;
  }

  .wp-block-search__inside-wrapper {
    flex-direction: column !important;
    gap: 0.75rem;
  }

  .wp-block-search__input {
    width: 100% !important;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 8px !important;
  }

  .wp-block-search__button {
    width: 100% !important;
    min-height: 48px;
    justify-content: center;
  }

  /* Search in header (when visible) */
  .ehc-header-search .wp-block-search {
    max-width: 100%;
  }
}

/* ============================================
   MOBILE PAGINATION
   ============================================ */
@media screen and (max-width: 767px) {
  .wp-block-query-pagination {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }

  .wp-block-query-pagination-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
  }

  .wp-block-query-pagination-numbers .page-numbers {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    font-size: 0.875rem;
  }

  .wp-block-query-pagination-previous,
  .wp-block-query-pagination-next {
    min-height: 40px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* ============================================
   MOBILE 404 PAGE
   ============================================ */
@media screen and (max-width: 767px) {
  .ehc-404-page {
    padding: 3rem 1rem !important;
  }

  .ehc-404-page h1 {
    font-size: 4rem !important;
  }

  .ehc-404-page h2 {
    font-size: 1.25rem !important;
  }
}

/* ============================================
   MOBILE FORMS
   ============================================ */
@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 16px; /* Prevents zoom on iOS */
    border-radius: 8px;
  }

  textarea {
    min-height: 120px;
  }

  label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
  }
}

/* ============================================
   MOBILE IMAGES
   ============================================ */
@media screen and (max-width: 767px) {
  img {
    max-width: 100%;
    height: auto;
  }

  .wp-block-image {
    margin: 1rem 0;
  }

  .wp-block-image img {
    border-radius: 8px;
  }

  .wp-block-image figcaption {
    font-size: 0.8125rem;
    text-align: center;
    margin-top: 0.5rem;
  }

  /* Gallery */
  .wp-block-gallery {
    gap: 0.5rem !important;
  }

  .wp-block-gallery.columns-3,
  .wp-block-gallery.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION FIXES
   ============================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .wp-block-navigation__responsive-container.is-menu-open {
    padding-top: 0.5rem;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    padding-top: 3rem;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
}

/* ============================================
   SAFE AREA INSETS (iPhone X+)
   ============================================ */
@supports (padding: max(0px)) {
  .ehc-site-header {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .ehc-site-footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --ehc-border: rgba(255, 255, 255, 0.3);
  }

  a {
    text-decoration: underline;
  }

  button,
  .wp-block-button__link {
    border: 2px solid currentColor;
  }
}

/* ============================================
   HOMEPAGE HERO SECTION - MOBILE OPTIMIZATION
   ============================================ */
@media screen and (max-width: 991px) {
  /* Hero cover section */
  .kb-hero-section {
    min-height: auto !important;
    padding: 0 !important;
  }

  .kb-hero-section .wp-block-cover__inner-container {
    padding: 0 !important;
  }

  .kb-hero-section .wp-block-group {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Stack columns on tablet */
  .kb-hero-section .wp-block-columns {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .kb-hero-section .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Hero text adjustments */
  .kb-hero-section h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    text-align: center !important;
  }

  .kb-hero-section h1 br {
    display: none;
  }

  .kb-hero-section > .wp-block-group > .wp-block-group > .wp-block-columns > .wp-block-column:first-child p {
    text-align: center !important;
  }

  /* Center hero buttons */
  .kb-hero-section .wp-block-buttons {
    justify-content: center !important;
  }
}

@media screen and (max-width: 767px) {
  .kb-hero-section .wp-block-group {
    padding: 32px 16px !important;
  }

  .kb-hero-section h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
    margin-bottom: 1rem !important;
  }

  .kb-hero-section p {
    font-size: 0.9375rem !important;
    margin-bottom: 1.25rem !important;
  }

  /* Stack CTA buttons */
  .kb-hero-section .wp-block-buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .kb-hero-section .wp-block-button {
    width: 100% !important;
  }

  .kb-hero-section .wp-block-button__link {
    width: 100% !important;
    justify-content: center !important;
    padding: 1rem 1.5rem !important;
    font-size: 0.9375rem !important;
  }
}

@media screen and (max-width: 480px) {
  .kb-hero-section .wp-block-group {
    padding: 24px 12px !important;
  }

  .kb-hero-section h1 {
    font-size: clamp(1.375rem, 6vw, 1.75rem) !important;
  }

  .kb-hero-section p {
    font-size: 0.875rem !important;
  }
}

/* ============================================
   HERO STATS / SOCIAL PROOF - MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  .kb-hero-stats {
    justify-content: center !important;
    margin-top: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  .kb-hero-stats {
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    justify-content: space-around !important;
  }

  .kb-hero-stats > .wp-block-group {
    flex: 0 0 auto !important;
    min-width: 80px !important;
    padding: 0 !important;
    border: none !important;
    text-align: center;
  }

  .kb-hero-stats p[style*="font-size:2rem"] {
    font-size: 1.5rem !important;
  }

  .kb-hero-stats p[style*="font-size:0.875rem"] {
    font-size: 0.75rem !important;
  }
}

@media screen and (max-width: 480px) {
  .kb-hero-stats {
    gap: 1rem !important;
  }

  .kb-hero-stats > .wp-block-group {
    min-width: 70px !important;
  }

  .kb-hero-stats p[style*="font-size:2rem"] {
    font-size: 1.25rem !important;
  }
}

/* ============================================
   HERO VIDEO WRAPPER - MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  .kb-hero-video-wrap {
    max-width: 600px !important;
    margin: 0 auto !important;
  }
}

@media screen and (max-width: 767px) {
  .kb-hero-video-wrap {
    border-radius: 12px !important;
    overflow: hidden;
  }

  .kb-featured-video {
    border-radius: 12px !important;
  }

  .kb-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }

  .kb-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .kb-video-meta {
    padding: 12px !important;
    font-size: 0.8125rem !important;
  }

  .kb-video-meta strong {
    font-size: 0.875rem !important;
    display: block;
    margin: 0.5rem 0 0.25rem;
  }

  .kb-video-meta span {
    font-size: 0.75rem !important;
    display: block;
  }

  .kb-badge {
    font-size: 0.625rem !important;
    padding: 0.25rem 0.5rem !important;
  }
}

/* ============================================
   FEATURE CARDS GRID - MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  .kb-features-section {
    padding: 3rem 24px !important;
  }

  .kb-features-section .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  .kb-features-section .wp-block-column {
    flex-basis: calc(50% - 0.5rem) !important;
    width: calc(50% - 0.5rem) !important;
  }

  .kb-feature-card {
    padding: 1.5rem 1.25rem !important;
    height: 100%;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(10, 12, 18, 0.9) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }

  .kb-feature-card p[style*="font-size:2.5rem"] {
    font-size: 2rem !important;
    margin-bottom: 0.75rem !important;
  }

  .kb-feature-card h3 {
    font-size: 1.125rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}

@media screen and (max-width: 991px) {
  .kb-features-table {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(8, 12, 20, 0.92);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  }

  .kb-features-table table {
    width: 100%;
    border-collapse: collapse;
  }

  .kb-features-table thead {
    display: none;
  }

  .kb-features-table tbody tr {
    display: block;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .kb-features-table tbody tr:last-child {
    border-bottom: 0;
  }

  .kb-features-table tbody th,
  .kb-features-table tbody td {
    display: block;
    padding: 0;
    border: 0;
  }

  .kb-features-table tbody th {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f8fafc;
    margin-bottom: 0.5rem;
  }

  .kb-features-table tbody td {
    font-size: 0.9rem;
    color: rgba(226, 232, 240, 0.75);
    line-height: 1.6;
  }
}

@media screen and (max-width: 767px) {
  .kb-features-section {
    padding: 2.5rem 16px !important;
  }

  .kb-features-section .wp-block-columns {
    flex-direction: column !important;
  }

  .kb-features-section .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  .kb-feature-card {
    padding: 1.25rem 1rem !important;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .kb-feature-card p[style*="font-size:2.5rem"] {
    font-size: 1.75rem !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }

  .kb-feature-card h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .kb-feature-card p:last-child {
    font-size: 0.8125rem !important;
    margin: 0 !important;
  }
}

@media screen and (max-width: 480px) {
  .kb-features-section {
    padding: 2rem 12px !important;
  }

  .kb-feature-card {
    padding: 1rem !important;
  }
}

/* ============================================
   LEARNING TRACKS SECTION - MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  .kb-tracks-section {
    padding: 3rem 24px !important;
  }

  .kb-tracks-section .wp-block-columns {
    gap: 1.25rem !important;
  }

  .kb-track-card {
    padding: 1.5rem !important;
  }

  .kb-track-card h3 {
    font-size: 1.25rem !important;
  }

  .kb-checklist {
    font-size: 0.8125rem !important;
  }

  .kb-checklist li {
    padding: 0.375rem 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .kb-tracks-section {
    padding: 2.5rem 16px !important;
  }

  .kb-tracks-section .wp-block-columns {
    flex-direction: column !important;
  }

  .kb-tracks-section .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .kb-track-card {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }

  /* Compact track card header */
  .kb-track-card > .wp-block-group:first-child {
    margin-bottom: 0.75rem;
  }

  .kb-track-card p[style*="font-size:2rem"] {
    font-size: 1.5rem !important;
  }

  .kb-track-card h3 {
    font-size: 1.125rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  .kb-track-card > p {
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
  }

  /* Track stats row */
  .kb-track-card > .wp-block-group:last-of-type:not(.wp-block-buttons) {
    margin-top: 1rem;
  }

  .kb-track-card .wp-block-buttons {
    margin-top: 1rem !important;
  }
}

@media screen and (max-width: 480px) {
  .kb-tracks-section {
    padding: 2rem 12px !important;
  }

  .kb-track-card {
    padding: 1rem !important;
  }
}

/* ============================================
   CERTIFICATION CARDS - MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  .kb-cert-section {
    padding: 3rem 24px !important;
  }

  .kb-cert-section .wp-block-columns {
    gap: 1.25rem !important;
  }

  .kb-cert-card {
    padding: 1.5rem !important;
  }

  .kb-cert-card h3 {
    font-size: 1.375rem !important;
  }
}

@media screen and (max-width: 767px) {
  .kb-cert-section {
    padding: 2.5rem 16px !important;
  }

  .kb-cert-section .wp-block-columns {
    flex-direction: column !important;
  }

  .kb-cert-section .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .kb-cert-card {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }

  .kb-cert-card h3 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  .kb-cert-card > p {
    font-size: 0.8125rem !important;
  }

  .kb-cert-card hr {
    margin: 1rem 0 !important;
  }

  .kb-cert-card p[style*="font-weight:600"] {
    font-size: 0.75rem !important;
    line-height: 1.8 !important;
  }

  .kb-cert-card .wp-block-buttons {
    margin-top: 1.25rem !important;
  }
}

@media screen and (max-width: 480px) {
  .kb-cert-section {
    padding: 2rem 12px !important;
  }

  .kb-cert-card {
    padding: 1rem !important;
  }
}

/* ============================================
   LATEST VIDEOS SECTION - MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  .kb-section {
    padding: 3rem 24px !important;
  }

  .kb-section h2 {
    font-size: clamp(1.375rem, 4vw, 1.75rem) !important;
  }

  /* Section header with button */
  .kb-section > .wp-block-group:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
}

@media screen and (max-width: 767px) {
  .kb-section {
    padding: 2.5rem 16px !important;
  }

  .kb-section h2 {
    font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
  }

  .kb-section > p {
    font-size: 0.875rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* YouTube shortcode grid */
  .youtube-grid,
  .kb-video-grid,
  [class*="youtube-"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

@media screen and (max-width: 480px) {
  .kb-section {
    padding: 2rem 12px !important;
  }
}

/* ============================================
   YOUTUBE VIDEO CARDS - MOBILE
   ============================================ */
@media screen and (max-width: 767px) {
  .youtube-video-card,
  .kb-video-card {
    border-radius: 10px !important;
    overflow: hidden;
  }

  .youtube-video-card .video-thumbnail,
  .kb-video-card .video-thumbnail {
    aspect-ratio: 16/9;
  }

  .youtube-video-card .video-info,
  .kb-video-card .video-info {
    padding: 0.75rem !important;
  }

  .youtube-video-card .video-title,
  .kb-video-card .video-title {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .youtube-video-card .video-meta,
  .kb-video-card .video-meta {
    font-size: 0.75rem !important;
    margin-top: 0.375rem;
  }
}

/* ============================================
   COURSE GRID - MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  .youtube-courses-grid,
  .kb-courses-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}

@media screen and (max-width: 767px) {
  .youtube-courses-grid,
  .kb-courses-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .youtube-course-card,
  .kb-course-card {
    border-radius: 10px !important;
  }

  .youtube-course-card .course-thumbnail,
  .kb-course-card .course-thumbnail {
    aspect-ratio: 16/9;
  }

  .youtube-course-card .course-info,
  .kb-course-card .course-info {
    padding: 1rem !important;
  }

  .youtube-course-card .course-title,
  .kb-course-card .course-title {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .youtube-course-card .course-description,
  .kb-course-card .course-description {
    font-size: 0.8125rem !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .youtube-course-card .course-meta,
  .kb-course-card .course-meta {
    font-size: 0.75rem !important;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ============================================
   FINAL CTA SECTION - MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  .kb-cta-section {
    min-height: auto !important;
    padding: 3rem 24px !important;
  }

  .kb-cta-section h2 {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }

  .kb-cta-section p[style*="font-size:1.25rem"] {
    font-size: 1rem !important;
  }

  .kb-cta-section p[style*="font-size:1rem"] {
    font-size: 0.875rem !important;
  }
}

@media screen and (max-width: 767px) {
  .kb-cta-section {
    padding: 2.5rem 16px !important;
  }

  .kb-cta-section h2 {
    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    margin-bottom: 0.75rem !important;
  }

  .kb-cta-section p {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }

  .kb-cta-section .wp-block-buttons {
    width: 100%;
  }

  .kb-cta-section .wp-block-button {
    width: 100%;
  }

  .kb-cta-section .wp-block-button__link {
    width: 100% !important;
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
  }

  .kb-cta-section p[style*="margin-top:1.5rem"] {
    margin-top: 1rem !important;
    font-size: 0.75rem !important;
  }
}

@media screen and (max-width: 480px) {
  .kb-cta-section {
    padding: 2rem 12px !important;
  }

  .kb-cta-section h2 {
    font-size: 1.25rem !important;
  }
}

/* ============================================
   SECTION HEADINGS - MOBILE OPTIMIZATION
   ============================================ */
@media screen and (max-width: 767px) {
  .kb-section h2.has-text-align-center,
  .kb-features-section h2,
  .kb-tracks-section h2,
  .kb-cert-section h2 {
    font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
    margin-bottom: 0.5rem !important;
  }

  .kb-section > p.has-text-align-center,
  .kb-features-section > p.has-text-align-center,
  .kb-tracks-section > p.has-text-align-center,
  .kb-cert-section > p.has-text-align-center {
    font-size: 0.875rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* ============================================
   TOUCH-FRIENDLY IMPROVEMENTS
   ============================================ */
@media screen and (max-width: 991px) {
  /* Larger tap targets */
  .kb-track-card .wp-block-button__link,
  .kb-cert-card .wp-block-button__link,
  .kb-feature-card a,
  .kb-section .wp-block-button__link {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Better link spacing */
  .kb-checklist li {
    padding: 0.5rem 0 !important;
  }

  /* Card hover effects - remove on touch */
  .kb-feature-card,
  .kb-track-card,
  .kb-cert-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .kb-feature-card:active,
  .kb-track-card:active,
  .kb-cert-card:active {
    transform: scale(0.98);
  }
}

/* ============================================
   PULSE BUTTON ANIMATION - MOBILE
   ============================================ */
@media screen and (max-width: 767px) {
  .kb-pulse-btn .wp-block-button__link {
    animation: none !important; /* Reduce battery drain on mobile */
  }

  .kb-pulse-btn:active .wp-block-button__link {
    transform: scale(0.98);
  }
}

/* ============================================
   SCROLL SNAP FOR HORIZONTAL SECTIONS
   ============================================ */
@media screen and (max-width: 767px) {
  /* Optional horizontal scroll for cards */
  .kb-horizontal-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem !important;
    padding-bottom: 1rem;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .kb-horizontal-scroll::-webkit-scrollbar {
    display: none;
  }

  .kb-horizontal-scroll > * {
    flex: 0 0 85%;
    max-width: 300px;
    scroll-snap-align: start;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
@media screen and (max-width: 767px) {
  /* GPU acceleration for smooth scrolling */
  .kb-site-header,
  .wp-block-navigation__responsive-container,
  .ehc-mobile-menu-overlay {
    will-change: transform;
    transform: translateZ(0);
  }

  /* Reduce repaints */
  .kb-hero-section,
  .kb-section,
  .kb-cta-section {
    contain: layout style;
  }

  /* Optimize images */
  img {
    content-visibility: auto;
  }

  /* Lazy load offscreen content */
  .kb-section:not(:nth-child(-n+2)) {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
  }
}

/* ============================================
   TOP BAR MOBILE ADJUSTMENTS
   ============================================ */
@media screen and (max-width: 991px) {
  .kb-top-bar {
    display: none !important;
  }
}

/* ============================================
   KADENCE BLOCKS OVERRIDES - MOBILE
   ============================================ */
@media screen and (max-width: 767px) {
  /* Kadence row/columns */
  .kt-row-layout-inner,
  .kt-row-column-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .kt-row-layout-inner > .kt-row-column-wrap {
    flex-direction: column !important;
  }

  .kt-row-column-wrap > .kadence-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* Kadence info boxes */
  .kt-info-box-wrap {
    padding: 1.25rem !important;
  }

  .kt-info-box-wrap .kt-info-box-title {
    font-size: 1rem !important;
  }

  /* Kadence buttons */
  .kt-button-wrap .kt-button {
    padding: 0.875rem 1.25rem !important;
    font-size: 0.9375rem !important;
    min-height: 48px;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
/* ============================================
   CTA FEATURE BADGES - MOBILE RESPONSIVE
   ============================================ */
/* These are the "Hands-on Labs, Structured Learning, Cert Prep, 100% Free" badges */
.ehc-cta-features,
.ehc-youtube-cta .wp-block-group[style*="flex"] {
  gap: 0.5rem !important;
}

@media screen and (max-width: 767px) {
  /* Make feature badges stack properly on mobile */
  .ehc-cta-features,
  .ehc-youtube-cta .wp-block-group[style*="flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  /* Individual badge styling for mobile */
  .ehc-cta-features > .wp-block-group,
  .ehc-youtube-cta .wp-block-group[style*="border-radius:100px"] {
    margin: 0 !important;
    width: auto !important;
    max-width: 90% !important;
  }

  /* Ensure text doesn't wrap inside badges */
  .ehc-cta-features p,
  .ehc-youtube-cta .wp-block-group[style*="border-radius:100px"] p {
    white-space: nowrap !important;
    font-size: 0.8125rem !important;
  }

  /* CTA section padding adjustment */
  .ehc-youtube-cta {
    padding: 3rem 1rem !important;
  }

  /* CTA heading size */
  .ehc-youtube-cta h2 {
    font-size: 1.5rem !important;
  }

  /* CTA subheading */
  .ehc-youtube-cta > .wp-block-group > p,
  .ehc-youtube-cta p[style*="1.125rem"] {
    font-size: 1rem !important;
    padding: 0 0.5rem;
  }
}

@media screen and (max-width: 480px) {
  /* Even smaller phones - 2 column grid */
  .ehc-cta-features,
  .ehc-youtube-cta .wp-block-group[style*="flex"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .ehc-cta-features > .wp-block-group,
  .ehc-youtube-cta .wp-block-group[style*="border-radius:100px"] {
    max-width: 100% !important;
    text-align: center;
    justify-content: center;
  }

  .ehc-cta-features p,
  .ehc-youtube-cta .wp-block-group[style*="border-radius:100px"] p {
    font-size: 0.75rem !important;
  }
}

@media print {
  .ehc-site-header,
  .ehc-site-footer,
  .ehc-floating-cta,
  .ehc-inline-cta,
  .ehc-footer-cta,
  .wp-block-navigation,
  .betterdocs-sidebar,
  .ehc-header-search {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }

  a {
    color: black !important;
    text-decoration: underline;
  }

  .ehc-video-wrapper {
    page-break-inside: avoid;
  }
}