/* Affilobase responsive layer.
   The pages are inline-styled, so anything that needs a media query lives here.
   Rules are deliberately broad (attribute-substring selectors + !important):
   they retro-fit one responsive behaviour onto 15 hand-styled pages without
   touching every inline declaration. Header and footer get named classes. */

/* ---------- containment: nothing leaves the screen or its own box ----------
   Applies at every width. The exclusions matter: absolutely and fixed
   positioned layers (the flag dropdown, hero dot patterns, the search panel)
   must NOT be clamped to their anchor's width. */
html, body { max-width: 100%; }
body { overflow-x: hidden; }

/* An inline display: declaration outranks the UA rule for [hidden], so a
   collapsed flex/grid block would stay visible without this. */
[hidden] { display: none !important; }

img, svg, video, iframe, canvas, table { max-width: 100%; }

/* Flex and grid children need permission to shrink, or one long word
   (a program name, a URL) pushes the whole row past the viewport. */
[style*="display:flex"] > *, [style*="display:grid"] > * { min-width: 0; }

header *:not([style*="position:absolute"]):not([style*="position:fixed"]),
section *:not([style*="position:absolute"]):not([style*="position:fixed"]),
footer *:not([style*="position:absolute"]):not([style*="position:fixed"]) { max-width: 100%; }

p, h1, h2, h3, h4, li, td, th, span, a, code, input, textarea, select { overflow-wrap: break-word; }
code { word-break: break-word; }

/* ---------- header ---------- */
.ab-cta-short { display: none; }

@media (max-width: 1240px) {
  .ab-header { padding: 14px 24px !important; }
  .ab-header-left { gap: 18px !important; }
  .ab-nav { gap: 17px !important; font-size: 14px !important; }
}

@media (max-width: 1080px) {
  .ab-header-in { gap: 14px !important; }
  .ab-header-left { flex: 1 1 auto; min-width: 0; }
  .ab-nav {
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; min-width: 0;
  }
  .ab-nav::-webkit-scrollbar { display: none; }
  .ab-actions { gap: 10px !important; }
  .ab-signin { display: none !important; }
}

@media (max-width: 720px) {
  .ab-header { padding: 10px 16px !important; }
  .ab-logo-word { font-size: 18px !important; }
  .ab-cta { padding: 10px 14px !important; font-size: 13px !important; }
}

@media (max-width: 560px) {
  .ab-cta-long { display: none; }
  .ab-cta-short { display: inline; }
  .ab-nav { gap: 15px !important; }
}

/* ---------- footer ---------- */
@media (max-width: 1100px) {
  .ab-footer-grid { grid-template-columns: 1.4fr 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 820px) {
  .ab-footer { padding: 44px 20px 28px !important; }
  .ab-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .ab-footer-bottom { flex-wrap: wrap !important; gap: 14px !important; }
}
@media (max-width: 520px) {
  .ab-footer-grid { grid-template-columns: 1fr !important; }
  .ab-footer-legal { gap: 14px !important; flex-wrap: wrap !important; }
}

/* ---------- page bodies ----------
   Multi-column inline grids collapse, sticky sidebars stop sticking, and the
   40px page gutters shrink. Header keeps its own sticky; everything else does
   not, because two stacked sticky bars eat a phone screen. */
@media (max-width: 1000px) {
  body { overflow-x: hidden; }
  div[style*="grid-template-columns"]:not(.ab-footer-grid):not(.ab-keep-grid):not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }
  [style*="position:sticky"]:not(.ab-header):not(.ab-filters), [style*="position: sticky"]:not(.ab-header):not(.ab-filters) {
    position: static !important;
    top: auto !important;
  }
  header.ab-header { position: sticky !important; top: 0 !important; }
  /* the filter panel stays pinned and scrolls inside itself at every width */
  .ab-filters {
    position: sticky !important;
    top: 78px !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 760px) {
  section { padding-left: 20px !important; padding-right: 20px !important; }
  h1 { font-size: clamp(28px, 8.4vw, 54px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(21px, 5.6vw, 34px) !important; }
  div[style*="display:flex"][style*="align-items:stretch"] { flex-wrap: wrap !important; }
  div[style*="max-width:800px"] input, div[style*="max-width:800px"] select { min-width: 0 !important; }
  [data-ab-search-fab] { right: 16px !important; width: 46px !important; height: 46px !important; }
  /* nowrap is what pushes rows off a phone screen — the header nav scrolls instead */
  section [style*="white-space:nowrap"], footer [style*="white-space:nowrap"] { white-space: normal !important; }
  section div[style*="display:flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap !important; }
}

/* Long inline tab rows scroll instead of breaking over three lines. */
@media (max-width: 900px) {
  [role="tablist"] { overflow-x: auto; scrollbar-width: none; }
  [role="tablist"]::-webkit-scrollbar { display: none; }
}