/* ============================================================
   ARC FLASH CLASSES — SHARED MOBILE STYLESHEET
   Injected via <link> on all pages. Overrides embedded styles
   at tablet (≤900px), mobile (≤768px), and small phone (≤480px).
   ============================================================ */

/* ============================================================
   HAMBURGER BUTTON
   ============================================================ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #1A4FA0;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0D2B5E;
  z-index: 999;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.mobile-nav-drawer.open {
  transform: translateX(0);
}
.mobile-nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-nav-drawer-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  line-height: 1;
}
.mobile-nav-links {
  list-style: none;
  padding: 16px 0;
  margin: 0;
  flex: 1;
}
.mobile-nav-links li {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav-links li a {
  display: block;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background 0.15s;
}
.mobile-nav-links li a:hover,
.mobile-nav-links li a:active {
  background: rgba(255,255,255,0.08);
  color: #6FAEE8;
}
.mobile-nav-cta {
  padding: 20px 24px 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-nav-cta .btn-primary {
  display: block;
  text-align: center;
  padding: 14px 24px;
  font-size: 16px;
  background: #E6A817;
  color: #07173A;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}
.mobile-nav-phone {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: 12px;
}

/* ============================================================
   TABLET — 900px
   ============================================================ */
@media (max-width: 900px) {

  /* Container */
  .container { padding-left: 24px; padding-right: 24px; }

  /* Stats grid: 4-col → 2-col */
  .stats-grid { grid-template-columns: 1fr 1fr; }

  /* Services: 3-col → 2-col */
  .services-grid { grid-template-columns: 1fr 1fr; }

  /* About section: 2-col → 1-col */
  .about-inner { grid-template-columns: 1fr; gap: 36px; }
  .about-img { height: 300px; }
  .about-badge-float { right: 0; bottom: -12px; }

  /* Industries: 3-col → 2-col */
  .industries-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .industry-card { height: 320px; }

  /* Why-us grid */
  .why-grid { grid-template-columns: 1fr 1fr; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr 1fr; }

  /* Footer: 4-col → 2-col */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Page hero */
  .page-hero h1 { font-size: 34px; }
  .page-hero-img { height: 320px; object-fit: cover; }

  /* State page grids */
  .formats-grid { grid-template-columns: 1fr 1fr; }
  .vosh-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-grid { grid-template-columns: 1fr; }

  /* Quote / contact layout */
  .quote-layout { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-sidebar { display: none; }

  /* Credential strip: scroll horizontally */
  .credential-strip-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .credential-item { min-width: 160px; }

}

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

  /* Topbar — hide email on small screens */
  .topbar-contact a:not(.topbar-phone-highlight) { display: none; }
  .topbar-badge { display: none; }
  .topbar-inner { justify-content: center; }

  /* NAV — show hamburger, hide desktop links */
  .nav-hamburger { display: flex; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .mobile-nav-drawer { display: flex; flex-direction: column; }
  .nav-inner { height: 60px; }
  .site-logo { height: 36px; }

  /* Hero — homepage */
  .hero { min-height: 460px; }
  .hero-content { padding: 48px 0 40px; }
  .hero h1 { font-size: 32px; }
  .hero-sub { font-size: 15px; }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-phone-line { margin-top: 4px; }
  .hero-phone-line a { font-size: 17px; }

  /* Stats: 2-col on 768 stays */

  /* Services: stack to 1-col */
  .services-grid { grid-template-columns: 1fr; }

  /* Industries: 2-col → 1-col */
  .industries-grid { grid-template-columns: 1fr; }
  .industry-card { height: 260px; }

  /* Why-us: stack */
  .why-grid { grid-template-columns: 1fr; }

  /* Blog grid: 1-col */
  .blog-grid { grid-template-columns: 1fr; }

  /* Blog header: stack */
  .blog-header { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Section typography */
  .section-title { font-size: 26px; }
  .section-sub { font-size: 15px; }

  /* Page hero (inner pages) */
  .page-hero h1 { font-size: 26px; }
  .page-hero-sub { font-size: 15px; }
  .page-hero-img { height: 260px; }
  .page-hero-content { padding: 32px 0; }

  /* CTA strip */
  .cta-strip-actions { flex-direction: column; align-items: center; gap: 12px; }
  .cta-strip-actions a { width: 100%; max-width: 300px; text-align: center; }
  .cta-strip h2 { font-size: 24px; }
  .cta-strip p { font-size: 14px; }

  /* Footer: stack all columns */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-bottom-links { justify-content: center; flex-wrap: wrap; }

  /* State pages */
  .industries-grid { grid-template-columns: 1fr; }
  .formats-grid { grid-template-columns: 1fr; }
  .vosh-stats { grid-template-columns: 1fr 1fr; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 24px 18px; }

  /* Curriculum / content grids */
  .curriculum-grid { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: 1fr 1fr; }

  /* About page */
  .story-inner { grid-template-columns: 1fr; }
  .story-img { height: 240px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .carousel-track { flex-direction: column; }

  /* Blog page */
  .blog-cards-grid { grid-template-columns: 1fr; }
  .blog-post-layout { grid-template-columns: 1fr; }
  .blog-sidebar { display: none; }

  /* Onsite / Virtual training pages */
  .what-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }

  /* Contact page sidebar hidden on mobile */
  .contact-sidebar { display: none; }
  .contact-layout { display: block; }
  .contact-main { width: 100%; }

  /* General button sizing */
  .btn-primary,
  .btn-secondary,
  .btn-white,
  .btn-outline-white {
    padding: 12px 20px;
    font-size: 14px;
  }

  /* About page float badge */
  .about-badge-float { display: none; }

  /* Credentials strip */
  .credential-strip-inner {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .credential-item { min-width: 180px; padding: 12px 14px; }
}

/* ============================================================
   SMALL PHONE — 480px
   ============================================================ */
@media (max-width: 480px) {

  .container { padding-left: 16px; padding-right: 16px; }

  /* Hero */
  .hero { min-height: 400px; }
  .hero h1 { font-size: 26px; }
  .hero-sub { font-size: 14px; }
  .hero-content { padding: 36px 0 32px; }

  /* Stats: 2-col → 1-col */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-number { font-size: 28px; }

  /* Section typography */
  .section-title { font-size: 22px; }

  /* Page hero */
  .page-hero h1 { font-size: 22px; }
  .page-hero-img { height: 220px; }

  /* Industries */
  .industry-card { height: 220px; }

  /* Values/outcome grids: 2-col → 1-col */
  .values-grid { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: 1fr; }
  .vosh-stats { grid-template-columns: 1fr; }

  /* Footer bottom */
  .footer-bottom p { font-size: 11px; }

  /* Blog */
  .blog-img { height: 160px; }
  .blog-card { flex-direction: column; }
  .blog-card-h .blog-img { width: 100%; height: 160px; }

  /* Forms */
  .form-submit, .btn-submit { font-size: 15px; padding: 14px; }

  /* Testimonials */
  .testimonial-card { padding: 20px; }
  .testimonials-grid { grid-template-columns: 1fr; }

  /* CTA strip */
  .cta-strip { padding: 40px 0; }
  .cta-strip h2 { font-size: 20px; }
  .cta-strip-actions a { max-width: 100%; }

  /* FAQ */
  .faq-list summary { font-size: 14px; padding: 14px 16px; }

  /* Curriculum image */
  .curriculum-img { display: none; }
}

/* ============================================================
   PHONE NUMBER — VANITY + ACTUAL STACK
   Applies at all breakpoints (not mobile-only).
   ============================================================ */
.phone-stack {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
  vertical-align: middle;
}
.phone-vanity {
  font-weight: 800;
  letter-spacing: 0.01em;
}
.phone-actual {
  font-size: 0.7em;
  font-weight: 500;
  opacity: 0.8;
}


/* ============================================================
   DESKTOP NAV OVERFLOW FIX — 2026-07-18
   .nav-logo had no flex-shrink, so at normal desktop widths the
   flexbox nav-inner row (logo + nav-links + nav-cta) exceeded the
   1140px container and the logo box was compressed below its own
   content width. Since overflow was visible (not hidden), the
   logo text visually bled into the adjacent nav links ("Arc Flash
   ClassesTraining", "Contact(813) 725-0999"). Fix: stop all three
   nav-inner children from shrinking, tighten their gaps slightly,
   and give nav-inner a bit more room than the generic .container
   max-width to comfortably fit everything without wrapping.
   Applies at all breakpoints above the 768px hamburger cutoff.
   ============================================================ */
.nav-logo { flex-shrink: 0; }
.nav-links { flex-shrink: 0; gap: 24px; }
.nav-cta { flex-shrink: 0; gap: 10px; }
.nav-inner { max-width: 1260px; }