/* ==========================================================================
   CertCare — responsive layer
   --------------------------------------------------------------------------
   The site is built with the dc-runtime framework: every element carries its
   "desktop" design as an inline `style`. Inline styles win over stylesheet
   rules, so the media-query overrides below use `!important` to retrofit a
   responsive layout without rewriting the markup.

   Loaded once site-wide via the SiteNav helmet (SiteNav is on every page), so
   these classes are available on every page that renders the nav.

   Hooks added to the markup:
     Layout      cc-hero, cc-hero-copy, cc-hero-media, cc-split,
                 cc-grid-2, cc-grid-3, cc-grid-4,
                 cc-footer-grid, cc-footer-bottom,
                 cc-section, cc-pad-y, cc-full-sm, cc-center-sm
     Mobile nav  cc-nav-inner, cc-nav-links, cc-open, cc-nav-toggle,
                 cc-nav-cta, cc-nav-cta-mobile

   Breakpoints: 960px (tablet & down), 900px (nav hamburger), 600px (phones).
   ========================================================================== */

/* ---- Global base (all viewports) ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }            /* kill stray horizontal scroll; keeps position:sticky working (unlike overflow:hidden) */
img { max-width: 100%; }

/* Mobile-only nav pieces are hidden on desktop by default */
.cc-nav-toggle { display: none; }
.cc-nav-cta-mobile { display: none; }

/* ==========================================================================
   Tablet and below
   ========================================================================== */
@media (max-width: 960px) {
  /* Hero: two-column → stacked */
  .cc-hero        { grid-template-columns: 1fr !important; }
  .cc-hero-media  { min-height: 300px !important; }
  /* but replaced elements (video/img) already size via aspect-ratio — don't force height */
  .cc-hero-media:is(video, img) { min-height: 0 !important; }

  /* Asymmetric content/aside splits → single column */
  .cc-split       { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Four-up tiles → two-up */
  .cc-grid-4      { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer columns → two-up */
  .cc-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 28px !important; }

  /* Trim oversized section padding */
  .cc-section     { padding-left: 26px !important; padding-right: 26px !important; }
  .cc-pad-y       { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* ==========================================================================
   Nav hamburger
   ========================================================================== */
@media (max-width: 900px) {
  .cc-nav-inner   { padding-left: 18px !important; padding-right: 18px !important; gap: 12px !important; }

  .cc-nav-toggle  { display: inline-flex !important; align-items: center; justify-content: center; }
  .cc-nav-cta     { display: none !important; }   /* desktop CTA hidden; lives inside the menu instead */

  /* Links container becomes a full-width dropdown panel toggled by cc-open */
  .cc-nav-links {
    display: none !important;
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #0a3b44;
    padding: 6px 0 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 34px rgba(8, 40, 48, 0.32);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .cc-nav-links.cc-open { display: flex !important; }

  /* Flatten the desktop 68px-tall flex rows for vertical stacking */
  .cc-nav-links > a,
  .cc-nav-links > div            { height: auto !important; width: 100%; }
  .cc-nav-links > div           { flex-direction: column !important; align-items: stretch !important; }
  .cc-nav-links a               { height: auto !important; padding: 13px 24px !important; }

  /* Mobile CTA shown at the bottom of the menu — compact pill, not full-width.
     The menu is a flex column with align-items:stretch, so align-self:flex-start
     is what actually stops the pill from stretching edge-to-edge. */
  .cc-nav-cta-mobile {
    display: inline-block !important;
    align-self: flex-start !important;
    width: auto !important;
    margin: 14px 24px 6px !important;
  }

  /* Hover dropdown panels (Solution / Industries / Resources): on desktop they
     float as an absolute white card. Inside the stacked mobile menu that card
     overlaps the other rows, so flatten it to expand inline instead. */
  .cc-nav-links > div > div {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 2px 0 6px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .cc-nav-links > div > div a {
    color: #bcd6db !important;
    padding: 11px 24px 11px 40px !important;   /* indent sub-items under their parent */
  }
  /* Hide the thin divider used inside the desktop dropdown card */
  .cc-nav-links > div > div > div {
    display: none !important;
  }
}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 600px) {
  .cc-grid-2      { grid-template-columns: 1fr !important; }
  .cc-grid-3      { grid-template-columns: 1fr !important; }
  .cc-grid-4      { grid-template-columns: 1fr 1fr !important; }   /* keep 2-up for icon tiles */

  .cc-footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .cc-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .cc-section     { padding-left: 18px !important; padding-right: 18px !important; }
  .cc-pad-y       { padding-top: 46px !important; padding-bottom: 46px !important; }
  .cc-hero-copy   { padding: 48px 20px !important; }
  .cc-hero-media  { min-height: 230px !important; }

  .cc-full-sm     { width: 100% !important; }
  .cc-center-sm   { justify-content: center !important; text-align: center !important; }

  /* UnderConstruction placeholder pages */
  .cc-uc          { padding: 56px 20px !important; min-height: 0 !important; }
  .cc-uc-title    { font-size: 31px !important; }
}