/* ================================================================
   ACAD-SECTION-* — page-level section classes (not section--dark)
   ================================================================ */
.acad-section-dark {
  background: var(--navy) !important;
  color: var(--white) !important;
}
.acad-section-dark * { color: var(--on-dark); }
.acad-section-dark h1,
.acad-section-dark h2,
.acad-section-dark h3,
.acad-section-dark h4 { color: var(--white) !important; }
.acad-section-dark p { color: var(--on-dark) !important; }
.acad-section-dark .eyebrow { color: var(--steel-light) !important; }
.acad-section-dark .number { color: var(--steel-light) !important; }
.acad-section-dark .pillar { border-color: var(--steel) !important; }
.acad-section-dark .tech-list { border-color: var(--hairline-dark) !important; }
.acad-section-dark .tech-list li { border-color: var(--hairline-dark) !important; color: var(--on-dark) !important; }
.acad-section-dark .tech-list li::before { color: var(--steel-light) !important; }
.acad-section-dark a.link-arrow { color: var(--steel-light) !important; }
.acad-section-dark a.link-arrow:hover { color: var(--white) !important; }
.acad-section-dark .btn--ghost { color: var(--white) !important; border-color: var(--white) !important; }
.acad-section-dark .btn--ghost:hover { background: var(--white) !important; color: var(--navy) !important; }

.acad-section-light {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
.acad-section-light h1,
.acad-section-light h2,
.acad-section-light h3,
.acad-section-light h4 { color: var(--ink) !important; }

.acad-section-warm {
  background: var(--bg-alt) !important;
  color: var(--ink) !important;
}
.acad-section-warm h1,
.acad-section-warm h2,
.acad-section-warm h3,
.acad-section-warm h4 { color: var(--ink) !important; }

/* Alias — if section--dark used alongside acad classes */
.section--dark .acad-section-dark { background: transparent !important; }

/* ================================================================
   NAV INNER — ensure entry-content wrapper doesn't constrain nav
   ================================================================ */
.entry-content .site-nav,
.single-content .site-nav,
.content-wrap .site-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9999 !important;
}

/* ================================================================
   ADDITIONAL MOBILE FIXES
   ================================================================ */
@media (max-width: 640px) {
  /* Ensure acad-section padding on mobile */
  .acad-section-dark,
  .acad-section-light,
  .acad-section-warm {
    padding-left: var(--gutter-page) !important;
    padding-right: var(--gutter-page) !important;
  }
  /* Trust bar wrapping fix */
  .trust-bar .container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  /* Nav dropdown full width on mobile */
  .nav-dropdown a small { display: none !important; }
  /* Pillar stacking */
  .pillar { padding-right: 0 !important; }
}

/* Fix: prevent negative left margin clipping text on mobile */
@media screen and (max-width: 719px) {
  .content-style-boxed .content-bg:not(.loop-entry) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Fix: dark-on-dark titles in audience cards - only for truly dark backgrounds */
.acad-section-warm [style*="background:#0F"] h3,
.acad-section-warm [style*="background:#1B"] h3,
.acad-section-warm [style*="background:#2A"] h3,
.acad-section-warm [style*="background:#0f"] h3,
.acad-section-warm [style*="background:#1b"] h3,
.acad-section-warm [style*="background:#2a"] h3 {
  color: var(--white) !important;
}
.acad-section-warm [style*="background:#0F"] p,
.acad-section-warm [style*="background:#1B"] p,
.acad-section-warm [style*="background:#2A"] p,
.acad-section-warm [style*="background:#0f"] p,
.acad-section-warm [style*="background:#1b"] p,
.acad-section-warm [style*="background:#2a"] p {
  color: var(--white) !important;
}

/* Fix: light card h3 in acad-section-warm should use ink (dark) color */
.acad-section-warm [style*="background:#F5"] h3,
.acad-section-warm [style*="background:#EC"] h3,
.acad-section-warm [style*="background:#f5"] h3,
.acad-section-warm [style*="background:#ec"] h3 {
  color: var(--ink) !important;
}

/* Fix: allow auto-margin centering on headings with inline margin-left:auto */
.single-content h1[style*="margin-left:auto"],
.single-content h2[style*="margin-left:auto"],
.single-content h3[style*="margin-left:auto"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix: stack two-column grids on mobile */
@media screen and (max-width: 719px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* Photo grid - responsive */
@media screen and (max-width: 719px) {
  .acad-photo-grid[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .acad-photo-grid[style*="repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== INSIGHTS & SECTION-LIGHT card text color fix ===== */
.acad-section-light [style*="background:#EC"] h2,
.acad-section-light [style*="background:#EC"] h3,
.acad-section-light [style*="background:#ec"] h2,
.acad-section-light [style*="background:#ec"] h3,
.acad-section-light [style*="background:#F5"] h2,
.acad-section-light [style*="background:#F5"] h3,
.acad-section-light [style*="background:#f5"] h2,
.acad-section-light [style*="background:#f5"] h3,
[style*="background:#ECE7DA"] h2,
[style*="background:#ECE7DA"] h3,
[style*="background:#F5F3EE"] h2,
[style*="background:#F5F3EE"] h3 {
  color: var(--ink) !important;
}

/* ===== Photo grid: 3-col default, 2-col on mobile ===== */
@media screen and (max-width: 719px) {
  .acad-photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== WP Columns block: single column on mobile ===== */
@media screen and (max-width: 719px) {
  .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-column {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }
}

/* =============================================
   ACADEMIA DEVELOPMENT - DESKTOP RESPONSIVE FIX
   Centers content & restores proper spacing on
   desktop / tablet while preserving phone layout.
   ============================================= */

/* --- 1. CENTER ALL SECTION CONTENT --- */
.acad-section-dark .acad-container,
.acad-section-warm .acad-container,
.acad-section-light .acad-container,
.acad-section-dark > div > .acad-container,
section[class*="acad-section"] .acad-container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Catch direct children that aren't .acad-container but wrap content */
section[class*="acad-section"] > .hero-section-overlay ~ * ,
section[class*="acad-section"] > div:not([style*="position: absolute"]):not(.hero-section-overlay) {
    box-sizing: border-box;
}

/* --- 2. DESKTOP: Larger padding, centered max-width --- */
@media (min-width: 768px) {
    section[class*="acad-section"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .acad-section-dark .acad-container,
    .acad-section-warm .acad-container,
    .acad-section-light .acad-container {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }

    /* Wrap section content so it stays centered even if section is full width */
    .acad-section-dark,
    .acad-section-warm,
    .acad-section-light {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* --- 3. LARGE DESKTOP: Wider but still centered --- */
@media (min-width: 1200px) {
    .acad-section-dark .acad-container,
    .acad-section-warm .acad-container,
    .acad-section-light .acad-container {
        max-width: 1280px !important;
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
}

/* --- 4. EXTRA SPACING for key sections (Who we work with / Start the conversation) --- */
@media (min-width: 768px) {
    .acad-section-warm .acad-container,
    .acad-section-light .acad-container {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
}

/* --- 5. ONE OPERATOR END TO END section: ensure it's centered with breathing room --- */
@media (min-width: 768px) {
    #method .acad-container,
    section.acad-section-light .acad-container {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }

    /* Method grid: 3-column layout should sit centered */
    #method .acad-container > div,
    section[id="method"] .acad-container > div {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- 6. ENTRY HERO (top of page) - center hero on desktop --- */
@media (min-width: 768px) {
    .entry-hero .entry-hero-container-inner {
        width: 100%;
    }
    .entry-hero .hero-container.site-container {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* --- 7. GLOBAL CONTENT WRAPPER on desktop --- */
@media (min-width: 768px) {
    .entry-content > section,
    .entry-content > .wp-block-group {
        width: 100%;
        box-sizing: border-box;
    }
}

/* --- 8. FIELD WORK / IMAGE GALLERY - keep only professional images visible --- */
/* Force gallery to align center & cap height so non-professional 
   images don't dominate */
@media (min-width: 768px) {
    .acad-section-dark + section .acad-container,
    section.acad-section-warm .acad-gallery,
    .acad-gallery {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- 9. SECTION VERTICAL SPACING (more breathing room) --- */
@media (min-width: 768px) {
    section[class*="acad-section"] + section[class*="acad-section"] {
        /* No negative margin - keep clean separation */
    }
}

/* --- 10. PROTECT MOBILE LAYOUT (phone view) --- */
@media (max-width: 767px) {
    .acad-section-dark .acad-container,
    .acad-section-warm .acad-container,
    .acad-section-light .acad-container {
        max-width: 100% !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .entry-hero .hero-container.site-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* --- 11. ADDITIONAL: trust bar (FLORIDA LICENSED line) centered --- */
.acad-trust-bar {
    text-align: center;
}
@media (min-width: 768px) {
    .acad-trust-bar {
        max-width: 1200px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- 12. Headings should not bleed off-screen --- */
@media (min-width: 768px) {
    .acad-container h1,
    .acad-container h2,
    .acad-container h3,
    .acad-container p {
        max-width: 100%;
    }
}

/* --- 13. PROFESSIONAL IMAGES ONLY - mark gallery images --- */
/* Add slight uniformity / professionalism to gallery */
.acad-gallery img,
.field-work img,
section.acad-section-dark img:not([style*="absolute"]) {
    object-fit: cover;
    width: 100%;
    height: auto;
}


/* ============================================================
   Phase C — recertification hero stretch fix.
   Hero <img> uses position:absolute inset:0; if its section is
   position:static, it sizes to the article container (13063px).
   Re-anchor it to its section and cap section height for
   consistency with other service pages.
   ============================================================ */
.page-id-2229 .acad-section-dark:first-of-type,
.page-id-2229 .acad-section-dark:first-of-type > div:first-child {
  position: relative;
}
.page-id-2229 .acad-section-dark:first-of-type {
  max-height: 720px;
  width: 100%;
  overflow: hidden;
}
.page-id-2229 .acad-section-dark:first-of-type > div:first-child > img {
  max-height: 720px;
}