/* ===================================================
   AI MADE - COMPREHENSIVE RESPONSIVE CSS FIXES
   Plugin: aimade-responsive-css v1.0
   Last updated: 2026-03-11

   FIXES:
   1. Negative margins (-25px) causing horizontal overflow
   2. Fixed pixel widths preventing mobile scaling
   3. Absolute positioning breaking layout on mobile
   4. Blog page missing H1 styling
   5. Tools page card grid not scaling
   6. About page timeline elements overflow
   7. Homepage ticker/cards not responsive
   8. Typography scaling for mobile
   9. Navigation consistency
   10. Footer alignment
   =================================================== */

/* ===========================
   1. GLOBAL OVERFLOW FIX
   Kill horizontal scroll site-wide
   =========================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Fix Neve's -25px margins on .container */
.neve-main > .container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.neve-main .container.single-page-container,
.neve-main .container.archive-container {
  padding-left: 15px;
  padding-right: 15px;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ===========================
   2. GLOBAL TYPOGRAPHY SCALE
   Consistent readable sizing
   =========================== */
body {
  font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.7;
  color: #e0e0e0;
  background: #0d0d1a;
}

h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.2; font-weight: 800; }
h2 { font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.3; font-weight: 700; }
h3 { font-size: clamp(1.15rem, 3vw, 1.5rem); line-height: 1.4; font-weight: 600; }
h4 { font-size: clamp(1rem, 2.5vw, 1.25rem); line-height: 1.4; font-weight: 600; }

p { 
  font-size: clamp(0.95rem, 2vw, 1.05rem); 
  line-height: 1.75; 
  margin-bottom: 1.2em;
}

/* ===========================
   3. HOMEPAGE FIXES
   =========================== */

/* Ticker overflow fix */
.page-id-8 [style*="overflow: hidden"][style*="flex: 1"] {
  max-width: 100vw !important;
  overflow: hidden !important;
}

/* Hero section padding on mobile */
.page-id-8 [style*="padding: 0; margin: -40px"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Card grids on homepage */
.page-id-8 [style*="display: grid"] {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  gap: 16px !important;
  padding: 0 10px;
}

/* Fix any 700px, 900px max-widths to be responsive */
.page-id-8 [style*="max-width: 700px"],
.page-id-8 [style*="max-width: 900px"] {
  max-width: min(900px, calc(100vw - 40px)) !important;
}

/* ===========================
   4. BLOG PAGE FIXES
   =========================== */

/* Add visual H1 to blog archive */
.blog .archive-container::before {
  content: 'Blog';
  display: block;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 30px;
  padding-top: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Blog post cards */
.blog .nv-index-posts .posts-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important;
  gap: 24px !important;
}

.blog .posts-wrapper article {
  background: #1a1a2e;
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.blog .posts-wrapper article:hover {
  border-color: rgba(0, 212, 255, 0.3);
  transform: translateY(-2px);
}

.blog .posts-wrapper article .blog-entry-title a {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 700;
}

.blog .posts-wrapper article .blog-entry-title a:hover {
  color: #00d4ff !important;
}

.blog .posts-wrapper article .excerpt-wrap {
  color: #a0aec0;
  font-size: 0.92em;
  line-height: 1.6;
}

.blog .posts-wrapper article .meta {
  color: #667eea;
  font-size: 0.85em;
}

/* ===========================
   5. ABOUT PAGE FIXES
   =========================== */

/* Hero section responsive */
.page-id-9 [style*="padding: 80px 30px"] {
  padding: 60px 20px 40px !important;
}

/* Timeline absolute elements fix */
.page-id-9 [style*="position: absolute; left: -44px"] {
  left: -30px !important;
}

/* About cards max-width */
.page-id-9 [style*="max-width: 900px"],
.page-id-9 [style*="max-width: 800px"],
.page-id-9 [style*="max-width: 600px"] {
  max-width: min(900px, calc(100vw - 40px)) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

/* Stats/profile card fix */
.page-id-9 [style*="width: 100px; height: 100px"] {
  width: 80px !important;
  height: 80px !important;
}

/* ===========================
   6. TOOLS PAGE FIXES
   =========================== */

/* Main container */
.page-id-271 [style*="max-width: 1100px"] {
  max-width: min(1100px, calc(100vw - 40px)) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}

/* Tool cards grid */
.page-id-271 [style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
}

/* Filter bar wrap */
.page-id-271 [style*="display: flex"][style*="justify-content: center"][style*="gap: 20px"] {
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 15px !important;
}

/* Tool hero section */
.page-id-271 [style*="padding: 70px 30px"] {
  padding: 50px 20px 40px !important;
}

/* Max-width on description text */
.page-id-271 [style*="max-width: 650px"] {
  max-width: min(650px, calc(100vw - 40px)) !important;
}

/* ===========================
   7. SINGLE POST FIXES
   =========================== */

.single-post .neve-main .container {
  max-width: min(800px, calc(100vw - 30px));
  margin: 0 auto;
  padding: 20px 15px;
}

.single-post .entry-title {
  font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  color: #ffffff;
  margin-bottom: 16px;
}

.single-post .entry-content h2 {
  color: #00d4ff;
  margin-top: 2em;
  margin-bottom: 0.8em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.single-post .entry-content h3 {
  color: #e0e0e0;
  margin-top: 1.5em;
}

.single-post .entry-content p {
  color: #c0c0d0;
}

.single-post .entry-content a {
  color: #00d4ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.single-post .entry-content a:hover {
  color: #40e0ff;
}

.single-post .entry-content ul,
.single-post .entry-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.2em;
}

.single-post .entry-content li {
  margin-bottom: 0.5em;
  color: #c0c0d0;
}

.single-post .entry-content blockquote {
  border-left: 3px solid #00d4ff;
  padding: 12px 20px;
  margin: 1.5em 0;
  background: rgba(0, 212, 255, 0.05);
  border-radius: 0 8px 8px 0;
}

.single-post .entry-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px;
}

.single-post .entry-content figure {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===========================
   8. NAVIGATION FIXES
   =========================== */

.header--row .container {
  max-width: 100% !important;
}

.nv-title-tagline-wrap a {
  color: #ffffff !important;
  font-weight: 700;
}

/* ===========================
   9. FOOTER FIXES
   =========================== */

.site-footer {
  background: #0a0a15 !important;
  border-top: 1px solid rgba(0, 212, 255, 0.1);
}

.site-footer .container {
  max-width: min(1200px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 30px 20px;
}

/* ===========================
   10. MOBILE BREAKPOINTS
   =========================== */

/* Tablet (768px and below) */
@media screen and (max-width: 768px) {
  /* Kill ALL negative margins */
  [style*="margin-left:-25px"],
  [style*="margin-right:-25px"],
  [style*="margin: -40px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Force all fixed widths to be fluid */
  [style*="width: 420px"],
  [style*="width: 500px"],
  [style*="width: 600px"],
  [style*="width: 650px"],
  [style*="width: 700px"],
  [style*="width: 800px"],
  [style*="width: 900px"],
  [style*="width: 1100px"],
  [style*="max-width: 600px"],
  [style*="max-width: 650px"],
  [style*="max-width: 700px"],
  [style*="max-width: 800px"],
  [style*="max-width: 900px"],
  [style*="max-width: 1100px"] {
    max-width: calc(100vw - 30px) !important;
    width: auto !important;
  }

  /* Grid columns go single on tablet */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Flex wrap everything */
  [style*="display: flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* Reduce hero paddings */
  [style*="padding: 80px"],
  [style*="padding: 70px"] {
    padding: 40px 15px 30px !important;
  }

  /* Scale down large text */
  [style*="font-size: 2.8em"],
  [style*="font-size: 2.6em"] {
    font-size: 1.8em !important;
  }

  [style*="font-size: 1.6em"],
  [style*="font-size: 1.5em"] {
    font-size: 1.2em !important;
  }

  /* Timeline dots fix */
  [style*="position: absolute; left: -44px"] {
    left: -20px !important;
    width: 20px !important;
    height: 20px !important;
  }

  [style*="position: absolute; left: 18px"][style*="width: 3px"] {
    left: 8px !important;
  }

  /* About page margin-top negative fix */
  [style*="margin: -30px auto"] {
    margin-top: 0 !important;
  }

  /* Single post container */
  .single-post .neve-main .container {
    padding: 15px 12px;
  }

  .single-post .entry-title {
    font-size: 1.5rem !important;
  }
}

/* Phone (480px and below) */
@media screen and (max-width: 480px) {
  /* Even tighter padding */
  .container,
  .neve-main .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* Hero sections ultra-compact */
  [style*="padding: 80px"],
  [style*="padding: 70px"],
  [style*="padding: 60px"] {
    padding: 30px 12px 20px !important;
  }

  /* Ticker smaller */
  [style*="font-size: 0.88em"][style*="padding: 0 30px"] {
    padding: 0 10px !important;
    font-size: 0.8em !important;
  }

  /* Tool cards full width */
  [style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
  }

  /* Profile avatar smaller */
  [style*="width: 100px; height: 100px"] {
    width: 60px !important;
    height: 60px !important;
  }

  /* Blog cards stack */
  .blog .nv-index-posts .posts-wrapper {
    grid-template-columns: 1fr !important;
  }

  .blog .posts-wrapper article {
    padding: 15px;
  }

  /* Single post images */
  .single-post .entry-content img {
    border-radius: 6px;
  }
}

/* ===========================
   11. ACCESSIBILITY & POLISH
   =========================== */

/* Focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: rgba(0, 212, 255, 0.3);
  color: #ffffff;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0d0d1a;
}

::-webkit-scrollbar-thumb {
  background: #1a1a2e;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00d4ff;
}

/* Print styles */
@media print {
  body { background: white !important; color: black !important; }
  .header--row, .site-footer, .nv-search-icon-component { display: none !important; }
}



/* ===================================================
   SKILLS INDEX - FutureTools-inspired directory
   Page ID: 415 (.page-id-415)
   =================================================== */

/* Hero Section */
.page-id-415 .nv-content-wrap { padding: 0 !important; }
.si-hero {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  padding: 60px 20px;
  text-align: center;
  margin: -20px -20px 0 -20px;
  border-radius: 0 0 20px 20px;
}
.si-hero-title {
  color: #fff !important;
  font-size: 2.8em !important;
  margin-bottom: 10px !important;
  font-weight: 800 !important;
}
.si-hero-subtitle {
  color: #a0aec0 !important;
  font-size: 1.3em !important;
  max-width: 700px;
  margin: 0 auto 30px !important;
}
.si-stats-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.si-stat { text-align: center; }
.si-stat-number { font-size: 2.2em; font-weight: 800; }
.si-stat-label { color: #94a3b8; font-size: 0.9em; }
.si-blue { color: #60a5fa; }
.si-green { color: #34d399; }
.si-amber { color: #f59e0b; }
.si-red { color: #ef4444; }

/* Search */
.si-search-wrap { max-width: 600px; margin: 0 auto; }
.si-search-input {
  width: 100%;
  padding: 16px 24px;
  font-size: 1.1em;
  border: 2px solid #334155 !important;
  border-radius: 12px !important;
  background: #1e293b !important;
  color: #fff !important;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.si-search-input:focus { border-color: #60a5fa !important; }
.si-powered-by { color: #64748b !important; font-size: 0.85em !important; margin-top: 15px !important; }
.si-powered-by a { color: #60a5fa !important; text-decoration: none !important; }
.si-powered-by a:hover { text-decoration: underline !important; }

/* Filter Bars */
.si-filter-bar, .si-rating-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 15px;
  justify-content: center;
  padding: 0 20px;
}
.si-rating-bar { margin-bottom: 30px; }
.si-filter-btn, .si-rating-btn {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid #334155;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.2s;
  font-family: inherit;
}
.si-filter-btn:hover, .si-rating-btn:hover { border-color: #60a5fa; color: #fff; }
.si-filter-active { background: #1e293b !important; color: #fff !important; border-color: #60a5fa !important; }
.si-rating-active { background: #1e293b !important; color: #fff !important; }
.si-rating-label { color: #94a3b8; font-size: 0.85em; padding: 8px 0; }

/* Loading */
.si-loading {
  text-align: center;
  color: #60a5fa;
  padding: 40px;
  font-size: 1.1em;
  animation: si-pulse 1.5s ease-in-out infinite;
}
@keyframes si-pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }

/* Skills Grid */
.si-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin: 0 20px 40px;
}

/* Skill Card */
.si-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 24px;
  transition: all 0.2s ease;
}
.si-card:hover {
  border-color: #334155;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.si-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 6px;
}

/* Ecosystem Badges */
.si-eco-badge, .si-rating-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}
.si-eco-openclaw { background: #172554; color: #60a5fa; }
.si-eco-mcp { background: #14532d; color: #34d399; }
.si-eco-agent { background: #3b0764; color: #c084fc; }
.si-eco-indie { background: #422006; color: #fb923c; }

/* Rating Badges */
.si-card-verified { background: #052e16; border: 1px solid #22c55e; color: #22c55e; }
.si-card-low { background: #422006; border: 1px solid #eab308; color: #eab308; }
.si-card-medium { background: #431407; border: 1px solid #f97316; color: #f97316; }
.si-card-high { background: #450a0a; border: 1px solid #ef4444; color: #ef4444; }
.si-card-unsafe { background: #1c1917; border: 1px solid #78716c; color: #78716c; }
.si-card-unrated { background: #1e293b; border: 1px solid #475569; color: #94a3b8; }

/* Card Content */
.si-card-name {
  color: #fff !important;
  font-size: 1.15em !important;
  margin: 0 0 4px !important;
  font-weight: 700 !important;
}
.si-card-author {
  color: #64748b !important;
  font-size: 0.8em !important;
  margin: 0 0 10px !important;
}
.si-card-desc {
  color: #94a3b8 !important;
  font-size: 0.9em !important;
  line-height: 1.5 !important;
  margin: 0 0 15px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.si-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.si-tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: #1e293b;
  color: #64748b;
  font-size: 0.75em;
}

/* Card Actions */
.si-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.si-card-btn-primary {
  padding: 8px 16px;
  border-radius: 6px;
  background: #1e293b;
  color: #60a5fa !important;
  text-decoration: none !important;
  font-size: 0.8em;
  font-weight: 600;
  transition: background 0.2s;
}
.si-card-btn-primary:hover { background: #334155; }
.si-card-install {
  font-size: 0.7em;
  color: #475569;
  background: #0f172a;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  display: inline-block;
}

/* Pagination */
.si-pagination { text-align: center; margin: 20px 0 40px; }
.si-count { color: #94a3b8 !important; margin-bottom: 15px !important; }
.si-load-more {
  padding: 12px 40px;
  border-radius: 8px;
  border: 2px solid #60a5fa;
  background: transparent;
  color: #60a5fa;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.si-load-more:hover { background: #60a5fa; color: #fff; }

/* Browse CTA */
.si-browse-cta { text-align: center; margin: 20px 0 40px; }
.si-browse-link {
  padding: 12px 40px;
  border-radius: 8px;
  border: 2px solid #60a5fa;
  background: transparent;
  color: #60a5fa !important;
  text-decoration: none !important;
  font-size: 1em;
  font-weight: 600;
  display: inline-block;
  transition: all 0.2s;
}
.si-browse-link:hover { background: #60a5fa; color: #fff !important; }

/* CTA Section */
.si-cta-section {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  margin: 40px 20px;
}
.si-cta-title { color: #fff !important; font-size: 1.8em !important; margin-bottom: 10px !important; }
.si-cta-desc { color: #94a3b8 !important; max-width: 600px; margin: 0 auto 20px !important; }
.si-cta-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.si-btn-primary {
  padding: 12px 30px;
  border-radius: 8px;
  background: #60a5fa;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: background 0.2s;
}
.si-btn-primary:hover { background: #3b82f6; }
.si-btn-outline {
  padding: 12px 30px;
  border-radius: 8px;
  border: 2px solid #60a5fa;
  color: #60a5fa !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: all 0.2s;
}
.si-btn-outline:hover { background: #60a5fa; color: #fff !important; }

/* Trust Badges */
.si-trust-badges {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin: 30px 20px;
  opacity: 0.7;
}
.si-trust-badges span { color: #94a3b8; font-size: 0.85em; }

/* Skills page dark background override */
.page-id-415 { background: #0a0a15 !important; }
.page-id-415 .neve-main { background: #0a0a15 !important; }
.page-id-415 .nv-page-title-wrap { display: none; }

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .si-hero { padding: 40px 15px; margin: -15px -15px 0 -15px; }
  .si-hero-title { font-size: 2em !important; }
  .si-stats-row { gap: 20px; }
  .si-stat-number { font-size: 1.6em; }
  .si-grid { grid-template-columns: 1fr; margin: 0 10px 30px; gap: 15px; }
  .si-cta-section { padding: 30px 15px; margin: 30px 10px; }
  .si-filter-bar, .si-rating-bar { padding: 0 10px; gap: 6px; }
  .si-filter-btn, .si-rating-btn { padding: 6px 14px; font-size: 0.8em; }
}
@media screen and (max-width: 480px) {
  .si-hero { padding: 30px 10px; }
  .si-hero-title { font-size: 1.6em !important; }
  .si-hero-subtitle { font-size: 1em !important; }
  .si-card { padding: 16px; }
  .si-card-install { display: none; }
}


/* === NEW ECOSYSTEM BADGES === */
.si-eco-microsoft { background: #1a1a2e; color: #00bcf2; }
.si-eco-claude { background: #1a1a2e; color: #d4a574; }
.si-eco-codex { background: #1a1a2e; color: #8b5cf6; }
.si-eco-hf { background: #1a1a2e; color: #ff9d00; }

/* === CATEGORY FILTER BAR === */
.si-category-bar {
  overflow-x: auto !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  padding-bottom: 8px !important;
  margin-bottom: 15px !important;
}
.si-category-bar::-webkit-scrollbar {
  height: 4px;
}
.si-category-bar::-webkit-scrollbar-track {
  background: #1e293b;
  border-radius: 2px;
}
.si-category-bar::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 2px;
}
.si-category-bar .si-filter-btn {
  display: inline-block !important;
  font-size: 0.8em !important;
  padding: 5px 12px !important;
  white-space: nowrap !important;
}

/* === DOWNLOAD COUNT BADGE === */
.si-card-downloads {
  display: inline-block !important;
  margin-left: 8px !important;
  font-size: 0.85em !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
}

/* === SEARCH INPUT ENHANCEMENT === */
.si-search-input {
  width: 100% !important;
  padding: 14px 20px !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #e2e8f0 !important;
  font-size: 1em !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
.si-search-input::placeholder {
  color: #64748b !important;
}
.si-search-input:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}



/* ===================================================
   AI MADE — SHADOWS, DEPTH & MODERN POLISH
   Added: 2026-03-13
   Appended to aimade-responsive-css v3.0.0
   =================================================== */

/* Theme custom properties */
:root {
  --am-bg: #0d0d1a;
  --am-card: #1a1a2e;
  --am-accent: #00d4ff;
  --am-accent2: #667eea;
  --am-text: #e0e0e0;
  --am-shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4);
  --am-shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.4);
  --am-shadow-lg: 0 10px 30px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.3);
  --am-shadow-glow: 0 0 20px rgba(0,212,255,0.15);
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Brand selection color */
::selection { background: rgba(0,212,255,0.35); color: #fff; }

/* Focus states — accessibility */
:focus-visible { outline: 2px solid var(--am-accent); outline-offset: 3px; border-radius: 4px; }

/* Custom dark scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--am-bg); }
::-webkit-scrollbar-thumb { background: #2a2a4e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--am-accent2); }

/* ---- NAVIGATION GLASS EFFECT ---- */
.hfg_header, #masthead, .header--row {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(13,13,26,0.85) !important;
  border-bottom: 1px solid rgba(0,212,255,0.08);
}

/* ---- BLOG POST CARDS — SHADOWS & DEPTH ---- */
.blog .posts-wrapper article,
.archive .posts-wrapper article {
  box-shadow: var(--am-shadow-md);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.blog .posts-wrapper article:hover,
.archive .posts-wrapper article:hover {
  box-shadow: var(--am-shadow-lg), var(--am-shadow-glow);
  transform: translateY(-4px);
}

/* ---- SINGLE POST CONTENT ---- */
.single-post .nv-content-wrap {
  background: var(--am-card);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--am-shadow-lg);
  border: 1px solid rgba(255,255,255,0.04);
}
@media (max-width: 768px) {
  .single-post .nv-content-wrap { padding: 20px 16px; border-radius: 12px; }
}

/* Blockquotes — accent left border + glass */
.nv-content-wrap blockquote,
.entry-content blockquote {
  border-left: 4px solid var(--am-accent) !important;
  background: rgba(0,212,255,0.04);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 1.5em 0;
}

/* Code blocks — subtle depth */
.nv-content-wrap pre,
.entry-content pre {
  background: #0a0a18 !important;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  padding: 20px;
}

/* ---- PAGE SECTIONS — CARDS & CONTAINERS ---- */
/* Skills Index cards */
.si-grid .si-skill-card,
[class*="si-card"] {
  box-shadow: var(--am-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255,255,255,0.04);
}
.si-grid .si-skill-card:hover,
[class*="si-card"]:hover {
  box-shadow: var(--am-shadow-md), var(--am-shadow-glow);
  transform: translateY(-3px);
}

/* Skills Index filter bar — glass */
.si-filter-bar, .si-rating-bar {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(26,26,46,0.7) !important;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

/* ---- MEMBERSHIP PAGE CARDS ---- */
.page-id-438 [style*="border-radius"] {
  box-shadow: var(--am-shadow-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255,255,255,0.06);
}
.page-id-438 [style*="border-radius"]:hover {
  transform: translateY(-6px);
  box-shadow: var(--am-shadow-lg), 0 0 30px rgba(0,212,255,0.2);
}

/* ---- HOMEPAGE SECTIONS ---- */
.page-id-8 [style*="border-radius"] {
  box-shadow: var(--am-shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.page-id-8 [style*="border-radius"]:hover {
  box-shadow: var(--am-shadow-md);
  transform: translateY(-2px);
}

/* ---- BUTTONS — MODERN HOVER ---- */
.nv-content-wrap a.wp-block-button__link,
.entry-content a.wp-block-button__link,
button.si-filter-btn,
button.si-rating-btn,
button.si-load-more,
.si-cta-section a {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}
.nv-content-wrap a.wp-block-button__link:hover,
.entry-content a.wp-block-button__link:hover,
button.si-load-more:hover,
.si-cta-section a:hover {
  transform: scale(1.03);
  box-shadow: var(--am-shadow-md), var(--am-shadow-glow);
}

/* Active filter buttons — glow */
button.si-filter-active,
button.si-rating-active {
  box-shadow: 0 0 12px rgba(0,212,255,0.3);
}

/* ---- TABLES — CLEAN DEPTH ---- */
.nv-content-wrap table,
.entry-content table {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--am-shadow-sm);
  border: 1px solid rgba(255,255,255,0.06);
}
.nv-content-wrap table th,
.entry-content table th {
  background: rgba(0,212,255,0.08);
}

/* ---- IMAGES — SUBTLE FRAME ---- */
.nv-content-wrap img,
.entry-content img {
  border-radius: 10px;
  box-shadow: var(--am-shadow-sm);
}

/* ---- ABOUT PAGE ---- */
.page-id-9 [style*="border-radius"] {
  box-shadow: var(--am-shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ---- FOOTER — SUBTLE TOP BORDER ---- */
.site-footer, footer.hfg_footer {
  border-top: 1px solid rgba(0,212,255,0.1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

/* ---- LINKS — SMOOTH UNDERLINE TRANSITION ---- */
.nv-content-wrap a:not(.wp-block-button__link),
.entry-content a:not(.wp-block-button__link) {
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s ease, color 0.3s ease;
}
.nv-content-wrap a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):hover {
  text-decoration-color: var(--am-accent);
}

/* ---- MOBILE ADJUSTMENTS ---- */
@media (max-width: 768px) {
  .blog .posts-wrapper article:hover,
  .si-grid .si-skill-card:hover {
    transform: translateY(-2px);
  }
  .page-id-438 [style*="border-radius"]:hover {
    transform: translateY(-3px);
  }
}


/* ===================================================
   MOBILE NAVIGATION FIX
   Fix: Menu sidebar was rendering behind hero images
   and page content due to z-index stacking context
   =================================================== */

/* Ensure mobile menu sidebar sits above ALL content */
#header-menu-sidebar,
.header-menu-sidebar {
  z-index: 999999 !important;
  position: fixed !important;
}

/* Overlay also needs high z-index */
.header-menu-sidebar-overlay {
  z-index: 999998 !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Mobile header bar needs to be above content too */
.header--row[data-show-on="mobile"] {
  z-index: 99999 !important;
  position: relative !important;
}

/* ===========================
   MOBILE MENU REDESIGN
   Clean, dark, modern sidebar
   =========================== */

/* Sidebar panel styling */
#header-menu-sidebar-bg {
  background: linear-gradient(180deg, #0d0d1a 0%, #1a1a2e 100%) !important;
  border-right: 1px solid rgba(0, 212, 255, 0.15) !important;
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5) !important;
  padding-top: 20px !important;
}

/* Close button styling */
#header-menu-sidebar .close-sidebar-panel {
  padding: 15px 20px !important;
  margin-bottom: 10px !important;
}

#header-menu-sidebar .hamburger .icon-bar {
  background-color: #00d4ff !important;
}

/* Menu items container */
#header-menu-sidebar .nav-menu-primary {
  padding: 10px 0 !important;
}

/* Individual menu items */
#header-menu-sidebar .primary-menu-ul .menu-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin: 0 !important;
}

#header-menu-sidebar .primary-menu-ul .menu-item .wrap {
  padding: 0 !important;
}

#header-menu-sidebar .primary-menu-ul .menu-item a {
  display: block !important;
  padding: 16px 24px !important;
  color: #e0e0e0 !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  position: relative !important;
}

#header-menu-sidebar .primary-menu-ul .menu-item a::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 0 !important;
  background: #00d4ff !important;
  border-radius: 0 2px 2px 0 !important;
  transition: height 0.25s ease !important;
}

#header-menu-sidebar .primary-menu-ul .menu-item a:hover,
#header-menu-sidebar .primary-menu-ul .menu-item a:focus {
  color: #00d4ff !important;
  background: rgba(0, 212, 255, 0.05) !important;
  padding-left: 28px !important;
}

#header-menu-sidebar .primary-menu-ul .menu-item a:hover::before,
#header-menu-sidebar .primary-menu-ul .menu-item a:focus::before {
  height: 24px !important;
}

/* Active menu item highlight */
#header-menu-sidebar .primary-menu-ul .menu-item.current-menu-item a {
  color: #00d4ff !important;
  font-weight: 600 !important;
  background: rgba(0, 212, 255, 0.08) !important;
}

#header-menu-sidebar .primary-menu-ul .menu-item.current-menu-item a::before {
  height: 24px !important;
}

/* Mobile hamburger icon - make it more visible */
.navbar-toggle .icon-bar {
  background-color: #00d4ff !important;
  height: 2px !important;
  width: 22px !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
}

/* Ensure the mobile header bar itself has proper background */
@media (max-width: 960px) {
  .header--row[data-show-on="mobile"] {
    background: rgba(13, 13, 26, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
  }

  /* Mobile logo sizing */
  .header--row[data-show-on="mobile"] .site-logo img {
    max-height: 45px !important;
    width: auto !important;
  }

  /* Search icon in mobile header */
  .header--row[data-show-on="mobile"] .nv-search .nv-icon svg,
  .header--row[data-show-on="mobile"] .nv-search svg {
    fill: #a0aec0 !important;
  }
}

/* Fix hero section stacking - ensure it doesn't create a stacking context that beats the nav */
.neve-main,
#content,
.single-page-container,
.nv-single-page-wrap,
.nv-content-wrap {
  z-index: 1 !important;
  position: relative !important;
}

/* Override any inline z-index on hero sections */
.page-id-8 .nv-content-wrap [style*="z-index"] {
  z-index: 1 !important;
}



/* =====================================================
   LAYOUT OVERHAUL — 2026-03-16
   Fixes: 5-item grids, nav text, blog stacking,
   touch targets, fluid typography, heavy spacing
   ===================================================== */


/* ---------------------------------------------------
   A. 5-ITEM GRIDS (Rating Cards + Stat Bar)
   Skills Index: .am-grid.am-grid-3 with 5 .am-card
   Homepage: .am-stats with 5 .am-stat
   --------------------------------------------------- */

/* Rating cards grid — tablet: flex + center orphan */
@media (min-width: 481px) and (max-width: 960px) {
  .am-grid.am-grid-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--am-space-lg, 24px) !important;
  }
  .am-grid.am-grid-3 > .am-card,
  .am-grid.am-grid-3 > article.am-card,
  .am-grid.am-grid-3 > div.am-card {
    flex: 0 1 calc(50% - 24px) !important;
    min-width: 200px !important;
    max-width: 100% !important;
  }
}

/* Rating cards grid — mobile: 1 column stacked */
@media (max-width: 480px) {
  .am-grid.am-grid-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--am-space-md, 16px) !important;
  }
  .am-grid.am-grid-3 > .am-card,
  .am-grid.am-grid-3 > article.am-card,
  .am-grid.am-grid-3 > div.am-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Stat bar — 2-column on tablet */
@media (min-width: 481px) and (max-width: 768px) {
  .am-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
  }
  .am-stat {
    flex: 0 1 calc(50% - 20px) !important;
    min-width: 120px !important;
  }
}

/* Stat bar — 1 column on tiny phones */
@media (max-width: 380px) {
  .am-stat {
    flex: 0 0 100% !important;
  }
}


/* ---------------------------------------------------
   B. HIDE "Navigation Menu" TEXT
   Neve's toggle: button.navbar-toggle > span.screen-reader-text
   --------------------------------------------------- */

.navbar-toggle .screen-reader-text,
button.navbar-toggle .screen-reader-text,
.menu-mobile-toggle .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ---------------------------------------------------
   C. BLOG 3-COLUMN → STACKED ON MOBILE
   Container: .nv-index-posts .posts-wrapper
   Articles: article.layout-grid
   --------------------------------------------------- */

@media (max-width: 768px) {
  .nv-index-posts .posts-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .nv-index-posts .posts-wrapper > article,
  .nv-index-posts .posts-wrapper > .nv-ft-post {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .nv-index-posts .article-content-col {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Kill negative margins on thumbnails */
  .layout-grid .nv-post-thumbnail-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .nv-post-thumbnail-wrap img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}


/* ---------------------------------------------------
   D. TOUCH TARGETS
   All tappable elements meet 44px minimum
   Blog excerpt links get 10-12px padding
   --------------------------------------------------- */

/* Blog article links — bigger tap target */
.nv-index-posts .entry-title a,
.nv-index-posts .excerpt-wrap a,
.nv-index-posts .nv-post-thumbnail-wrap a,
article.post .entry-title a,
article.post .excerpt-wrap a {
  display: inline-block;
  padding: 10px 12px;
  margin: -10px -12px;
  -webkit-tap-highlight-color: transparent;
}

/* All buttons and badge links — 44px minimum */
.am-btn,
.wp-block-button__link,
article.post a,
.nv-index-posts a {
  min-height: 44px;
  min-width: 44px;
}

/* Buttons — fluid padding */
.am-btn,
.wp-block-button__link,
button:not(.navbar-toggle) {
  padding: clamp(10px, 1.5vw, 14px) clamp(20px, 3vw, 32px) !important;
  font-size: clamp(13px, 1.2vw + 7px, 15px) !important;
}


/* ---------------------------------------------------
   E. TYPOGRAPHY — ENHANCED clamp() SCALING
   Override existing fixed sizes with smooth fluid ones
   --------------------------------------------------- */

/* Hero heading — extra large */
.am-hero h1 {
  font-size: clamp(1.8rem, 4vw + 0.5rem, 3rem) !important;
  line-height: 1.1 !important;
}

.am-hero p {
  font-size: clamp(0.95rem, 1.5vw + 0.3rem, 1.2rem) !important;
}

/* Stat numbers — fluid */
.am-stat-number {
  font-size: clamp(1.4rem, 2.5vw + 0.5rem, 2.4rem) !important;
}

.am-stat-label {
  font-size: clamp(0.7rem, 1vw + 0.2rem, 0.85rem) !important;
}

/* Blog entry titles */
.blog-entry-title.is-h4,
h2.blog-entry-title {
  font-size: clamp(1rem, 1.8vw + 0.3rem, 1.3rem) !important;
  line-height: 1.3 !important;
}

/* Badges — fluid */
.am-badge {
  font-size: clamp(11px, 1.2vw + 6px, 13px) !important;
  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px) !important;
  white-space: nowrap !important;
}


/* ---------------------------------------------------
   F. HEAVY SPACING BETWEEN SECTIONS
   Generous padding + margins for "No BS" clean look
   --------------------------------------------------- */

/* Sections — generous fluid padding */
.entry-content > section,
.nv-content-wrap > section {
  padding-top: clamp(40px, 6vw, 80px) !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
}

/* Dividers — extra breathing room */
hr.am-divider {
  margin-top: clamp(32px, 5vw, 64px) !important;
  margin-bottom: clamp(32px, 5vw, 64px) !important;
}

/* Card internal spacing */
.am-card {
  padding: clamp(16px, 3vw, 28px) !important;
}

/* Hero section — generous space */
.am-hero {
  padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 40px) !important;
}

/* Stat bar spacing */
.am-stats {
  padding: clamp(16px, 3vw, 32px) 0 !important;
  margin: clamp(24px, 4vw, 48px) auto !important;
}

/* Blog card content padding */
.nv-index-posts .content,
.nv-index-posts .article-content-col .content {
  padding: clamp(12px, 3vw, 25px) !important;
}

/* Footer breathing room */
.am-footer,
.nv-footer-content {
  padding: clamp(24px, 5vw, 48px) clamp(16px, 3vw, 24px) !important;
}


/* ---------------------------------------------------
   G. ABOUT PAGE — SAME RESPONSIVE GRID
   page-id-9 with .am-grid.am-grid-3
   --------------------------------------------------- */

@media (max-width: 480px) {
  body.page-id-9 .am-grid.am-grid-3 {
    display: flex !important;
    flex-direction: column !important;
  }
  body.page-id-9 .am-grid.am-grid-3 > * {
    width: 100% !important;
  }
}

@media (min-width: 481px) and (max-width: 960px) {
  body.page-id-9 .am-grid.am-grid-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  body.page-id-9 .am-grid.am-grid-3 > * {
    flex: 0 1 calc(50% - 24px) !important;
  }
}


/* ---------------------------------------------------
   H. GLOBAL SAFETY — OVERFLOW + IMAGES + TABLES
   --------------------------------------------------- */

/* Override hardcoded max-widths on mobile */
@media (max-width: 768px) {
  .entry-content div[style*="max-width"],
  .nv-content-wrap div[style*="max-width"] {
    max-width: 100% !important;
  }
}

/* Images never overflow */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Tables scroll horizontally */
table {
  display: block !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Ecosystem badge container — fluid gap */
div[style*="flex-wrap:wrap"][style*="justify-content:center"],
div[style*="flex-wrap: wrap"][style*="justify-content: center"] {
  gap: clamp(8px, 2vw, 16px) !important;
}


/* ===================================================
   ADDITIONAL FIXES v4.1 — 2026-03-17
   1. Container alignment
   2. Logo sizing
   3. Membership pricing grid (4 tiers)
   4. Enhanced mobile/tablet/desktop breakpoints
   =================================================== */

/* ===========================
   CONTAINER ALIGNMENT FIX
   All sections centered and consistent max-width
   =========================== */
.am-hero,
section[style*="padding"],
.am-section {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100vw !important;
}

.am-hero > div,
section > div[style*="max-width"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure all am-grid containers are centered */
.am-grid,
div[style*="grid-template-columns"] {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--am-max-width, 1200px) !important;
}

/* Neve container fixes — stop theme from breaking alignment */
.nv-single-page-wrap,
.nv-content-wrap {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page .entry-content {
  max-width: 100% !important;
  width: 100% !important;
}

/* ===========================
   LOGO SIZING FIX
   Constrain header logo to reasonable size
   =========================== */
.site-logo img,
.custom-logo,
.custom-logo-link img,
.nv-nav-header .site-logo img,
header .custom-logo,
.header-main .site-logo img,
.hfg_header .site-logo img {
  max-height: 48px !important;
  width: auto !important;
  height: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}

/* Mobile logo even smaller */
@media (max-width: 768px) {
  .site-logo img,
  .custom-logo,
  .custom-logo-link img {
    max-height: 36px !important;
    max-width: 150px !important;
  }
}

/* ===========================
   4-TIER PRICING GRID
   Membership page — responsive 4-column layout
   =========================== */

/* Desktop: 4 columns */
@media (min-width: 1024px) {
  .am-grid[style*="grid-template-columns: repeat(4"],
  div[style*="display:grid"][style*="repeat(4"],
  div[style*="display: grid"][style*="repeat(4"] {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}

/* Tablet: 2x2 grid */
@media (min-width: 601px) and (max-width: 1023px) {
  .am-grid[style*="grid-template-columns: repeat(4"],
  div[style*="display:grid"][style*="repeat(4"],
  div[style*="display: grid"][style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* Mobile: single column */
@media (max-width: 600px) {
  .am-grid[style*="grid-template-columns: repeat(4"],
  div[style*="display:grid"][style*="repeat(4"],
  div[style*="display: grid"][style*="repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ===========================
   CARD ALIGNMENT FIX
   All .am-card elements consistent height in grid
   =========================== */
.am-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.am-card .am-btn {
  margin-top: auto !important;
}

/* Highlighted card (featured tier) — keep prominent */
.am-card-highlighted {
  border: 2px solid var(--am-accent, #00d4ff) !important;
  transform: scale(1.02);
  z-index: 1;
}

@media (max-width: 600px) {
  .am-card-highlighted {
    transform: none !important;
  }
}

/* ===========================
   SECTION SPACING CONSISTENCY
   Heavy padding between sections (No BS aesthetic)
   =========================== */
section + section,
.am-section + .am-section {
  margin-top: 0 !important;
}

section[style*="padding"] {
  padding-left: clamp(16px, 4vw, 40px) !important;
  padding-right: clamp(16px, 4vw, 40px) !important;
}

/* ===========================
   STAT GRID / BADGE GRID
   Homepage ecosystem badges and stat counters
   =========================== */
.am-stat-grid,
div[style*="display:grid"][style*="gap"] {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ===========================
   ENHANCED MOBILE TYPOGRAPHY
   =========================== */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  h2 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
  h3 { font-size: clamp(1rem, 4vw, 1.3rem) !important; }

  p, li, span {
    font-size: clamp(0.9rem, 3.5vw, 1rem) !important;
    line-height: 1.7 !important;
  }

  /* Price display */
  .am-card span[style*="font-size:2.5rem"],
  .am-card span[style*="font-size: 2.5rem"],
  .am-card div[style*="font-size:2.5rem"] {
    font-size: 2rem !important;
  }
}

/* ===========================
   TABLET ENHANCEMENTS
   =========================== */
@media (min-width: 481px) and (max-width: 768px) {
  .am-hero {
    padding: 60px 20px !important;
  }

  /* 2-col grids on tablet */
  .am-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===========================
   WIDE DESKTOP CENTERING
   =========================== */
@media (min-width: 1400px) {
  section > div[style*="max-width"] {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===========================
   FOOTER FIXES
   =========================== */
footer, .am-footer {
  text-align: center !important;
}

footer a, .am-footer a {
  word-break: break-word !important;
}

@media (max-width: 600px) {
  footer nav,
  .am-footer nav,
  footer div[style*="flex"],
  .am-footer div[style*="flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
}


/* ===================================================
   RESPONSIVE CSS v4.2 — March 17, 2026
   Fixes: selector mismatches, negative margin overflow,
   375px breakpoint, hero/footer mobile, pricing grid
   =================================================== */

/* ===========================
   FIX 1: PRICING GRID SELECTOR MISMATCH
   The inline style uses NO space after colon:
   grid-template-columns:repeat(4,1fr)
   Add matching selectors without spaces
   =========================== */

/* Tablet: 2 columns (601px - 1023px) */
@media (min-width: 601px) and (max-width: 1023px) {
  .am-grid[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* Mobile: 1 column (≤600px) */
@media (max-width: 600px) {
  .am-grid[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ===========================
   FIX 2: NEGATIVE MARGIN OVERFLOW GUARD
   Catch ALL negative margin patterns on mobile
   =========================== */
@media (max-width: 768px) {
  /* Hero negative margins */
  .am-hero,
  section[style*="margin: -40px"],
  section[style*="margin:-40px"],
  div[style*="margin: -40px"],
  div[style*="margin:-40px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Footer negative margins */
  .am-footer,
  footer[style*="margin"],
  div.am-footer[style*="margin"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Global negative margin catch-all */
  [style*="margin-left:-"],
  [style*="margin-right:-"],
  [style*="margin: -"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===========================
   FIX 3: 375px BREAKPOINT (iPhone SE/mini)
   =========================== */
@media (max-width: 375px) {
  /* Tighter padding */
  .am-hero {
    padding: 24px 12px !important;
  }

  /* Stats stack fully vertical */
  .am-stats {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .am-stat {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  /* Smaller fonts */
  h1 { font-size: clamp(1.3rem, 7vw, 1.8rem) !important; }
  h2 { font-size: clamp(1.1rem, 6vw, 1.5rem) !important; }

  /* Buttons full width */
  .am-btn,
  .am-btn-primary,
  .am-btn-secondary {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 16px !important;
  }

  /* Container tighter */
  .container,
  .neve-main .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Cards no padding overflow */
  .am-card {
    padding: 16px !important;
  }
}

/* ===========================
   FIX 4: HERO SECTION MOBILE POLISH
   =========================== */
@media (max-width: 480px) {
  .am-hero {
    padding: 32px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .am-hero h1 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }

  .am-hero p {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
    max-width: 100% !important;
  }

  /* Hero buttons side by side or stacked */
  .am-hero .am-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

/* ===========================
   FIX 5: MEMBERSHIP/PRICING MOBILE
   =========================== */
@media (max-width: 600px) {
  /* Pricing cards — full width with good spacing */
  .page-id-438 .am-grid,
  .page-id-438 div[style*="grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .page-id-438 .am-card,
  .page-id-438 [style*="border-radius"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Enterprise card CTA */
  .page-id-438 a[href*="mailto"] {
    display: block !important;
    text-align: center !important;
  }
}

/* Tablet: 2-column pricing */
@media (min-width: 601px) and (max-width: 768px) {
  .page-id-438 .am-grid,
  .page-id-438 div[style*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* ===========================
   FIX 6: SKILLS INDEX TABLE MOBILE
   =========================== */
@media (max-width: 600px) {
  .page-id-415 table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 13px !important;
  }

  .page-id-415 table th,
  .page-id-415 table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }
}

/* ===========================
   FIX 7: FOOTER MOBILE LAYOUT
   =========================== */
@media (max-width: 600px) {
  .am-footer {
    padding: 24px 16px !important;
    margin: 0 !important;
  }

  .am-footer nav,
  .am-footer div[style*="flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .am-footer a {
    padding: 8px 0 !important;
  }

  /* Bottom bar footer */
  .nv-footer-content {
    padding: 16px !important;
  }

  .nv-footer-content .wp-block-column {
    flex-basis: 100% !important;
    text-align: center !important;
  }
}

/* ===========================
   FIX 8: BLOG CARDS MOBILE
   =========================== */
@media (max-width: 480px) {
  .blog .posts-wrapper article,
  .nv-index-posts article {
    padding: 12px !important;
  }

  .blog .posts-wrapper article img,
  .nv-post-thumbnail img {
    border-radius: 8px !important;
  }

  /* Single post content */
  .single-post .entry-content {
    padding: 0 !important;
  }

  .single-post .entry-content img {
    border-radius: 8px !important;
  }
}

/* ===========================
   FIX 9: ABOUT PAGE MOBILE
   =========================== */
@media (max-width: 480px) {
  body.page-id-9 .am-stats {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
  }

  body.page-id-9 .am-stat {
    width: 100% !important;
    text-align: center !important;
  }

  body.page-id-9 .am-stat-number {
    font-size: 2rem !important;
  }
}

/* ===========================
   FIX 10: CONTACT PAGE MOBILE
   =========================== */
@media (max-width: 600px) {
  .page-id-7 input[type="text"],
  .page-id-7 input[type="email"],
  .page-id-7 textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ===========================
   FIX 11: ECOSYSTEM BADGES MOBILE
   =========================== */
@media (max-width: 480px) {
  .am-grid-2,
  div[style*="grid-template-columns"][style*="repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Ecosystem badge items */
  .am-badge {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* ===========================
   FIX 12: GLOBAL TOUCH TARGETS
   Minimum 44px tap targets (WCAG)
   =========================== */
@media (max-width: 768px) {
  a, button, [role="button"],
  input[type="submit"],
  .am-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Nav links */
  .nv-nav-wrap a,
  .header-menu-sidebar a {
    padding: 12px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ===========================
   FIX 13: PREVENT ALL HORIZONTAL OVERFLOW
   Belt and suspenders approach
   =========================== */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto !important;
}

/* === END v4.2 PATCH === */