/* ==========================================================================
   Talent Leaders - site-wide responsive layer
   --------------------------------------------------------------------------
   The site is built almost entirely with inline styles, which cannot carry
   media queries. Pages are also client-rendered by the DC (React) runtime,
   which re-serializes inline styles (e.g. "display: grid" with a space).
   So selectors here match on PROPERTY NAMES only (spacing-independent) plus
   element/sibling selectors, and use !important to override inline styles.

   Breakpoints:
     <=980px   header desktop CTA hides (nav-mobile.js owns the burger)
     <=900px   iPad portrait and below - every grid collapses to one column
     <=760px   phones - fluid heading sizes so titles never overflow
   ========================================================================== */

/* Never allow horizontal scrolling; keep media inside its container.
   Scoped to <body> only - overflow-x on <html> can break sticky headers. */
body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Page sections must blend into one another without divider rules. Keep
   structural borders inside forms, cards, tables, navigation, and footers. */
section {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Shared desktop dropdown behavior for the employer-first navigation. */
.tl-dd:hover .tl-dd-menu,
.tl-dd:focus-within .tl-dd-menu {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------- HEADER (<=980px, matches nav-mobile.js breakpoint) ------------ */
/* nav-mobile.js hides `header nav` and shows a fixed hamburger. The desktop
   CTA (a div OR a bare <a> sibling after <nav>) must also hide so it stops
   overlapping the burger. Those actions live in the mobile drawer instead. */
@media (max-width: 980px) {
  header nav ~ * { display: none !important; }
}

/* ---------- iPad portrait and below (<=900px) ----------------------------- */
/* Collapse every grid to a single column. Any element that declares
   grid-template-columns is a grid container, so this catches all of them
   regardless of how the columns were originally defined. */
@media (max-width: 900px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .tl-footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 18px !important;
  }
  .tl-footer-links > div {
    grid-row: auto !important;
    grid-column: auto !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .tl-footer-links > div:last-child {
    grid-column: 1 / -1 !important;
  }
  .tl-footer-trust {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* ---------- Phones (<=760px) --------------------------------------------- */
/* Fluid heading sizes stop large hero titles from overflowing the screen. */
@media (max-width: 760px) {
  h1[style] { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.12 !important; }
  h2[style] { font-size: clamp(25px, 6.2vw, 34px) !important; line-height: 1.15 !important; }
  h3[style] { font-size: clamp(19px, 4.6vw, 24px) !important; }
  footer { padding: 28px 22px 86px !important; }
}