/* Cogent Networks - mobile pass. Everything here lives inside breakpoints, so desktop
   layout is untouched. Inline styles win over stylesheets, so overrides that fight an
   inline value are marked important deliberately and only inside these media queries. */
/* base state: drawer and burger are mobile-only. site.js injects them on
   every viewport, so they must be hidden by default and revealed inside
   the phone breakpoint below. */
.cn-burger { display: none; }
.cn-drawer { display: none; }

/* ---------- tablet and below: release the desktop min-width ---------- */
@media (max-width: 1100px) {
  #cn-root { min-width: 0 !important; }
  .cn-wrap, header > div, footer > div { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ---------- phone ---------- */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  #cn-root { min-width: 0 !important; width: 100% !important; }

  /* nav: logo icon only, hamburger, drawer */
  header > div:first-child { height: 62px !important; gap: 12px !important; padding: 0 18px !important; }
  header nav { display: none !important; }
  header > div:first-child > a:first-child span { display: none !important; }
  header > div:first-child > a:first-child .cn-tagline { display: none !important; }
  header > div:first-child > a:last-child { display: none !important; }  /* desktop portal button */
  #cn-lang { margin-left: auto !important; }
  .cn-burger { display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--badge-border);
    border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; }
  .cn-burger span { display: block; width: 18px; height: 2px; background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .cn-megamenu { display: none !important; }

  .cn-drawer { position: fixed; inset: 62px 0 0 0; z-index: 190; background: var(--bg);
    border-top: 1px solid var(--line); overflow-y: auto; display: none;
    -webkit-overflow-scrolling: touch; }
  .cn-drawer.open { display: block; }
  .cn-drawer-in { padding: 10px 18px 28px; display: flex; flex-direction: column; }
  .cn-drawer a, .cn-drawer button { min-height: 44px; }
  .cn-drawer-link { display: flex; align-items: center; font-size: 16px; font-weight: 600;
    color: var(--text); padding: 13px 2px; border-bottom: 1px solid var(--line-soft); }
  .cn-acc-head { display: flex; align-items: center; justify-content: space-between; width: 100%;
    font-family: inherit; font-size: 16px; font-weight: 600; color: var(--text); background: none;
    border: none; border-bottom: 1px solid var(--line-soft); padding: 13px 2px; cursor: pointer; text-align: left; }
  .cn-acc-head i { font-style: normal; font-size: 11px; color: var(--accent); transition: transform .18s ease; }
  .cn-acc.open .cn-acc-head i { transform: rotate(180deg); }
  .cn-acc-body { display: none; padding: 6px 0 12px 10px; }
  .cn-acc.open .cn-acc-body { display: block; }
  .cn-acc-body a { display: block; font-size: 14.5px; color: var(--body); padding: 11px 2px;
    border-bottom: 1px solid var(--line-soft); }
  .cn-drawer-cta { display: flex !important; align-items: center; justify-content: center;
    margin-top: 20px; width: 100%; padding: 15px 18px; border-radius: 7px;
    background: var(--accent-btn, var(--accent)); color: var(--on-accent);
    font-size: 15.5px; font-weight: 600; }

  /* every multi-column grid stacks */
  .cn-grid2, .cn-grid3, .cn-grid4, .cn-grid5, .cn-split, .d4-band,
  .hub-wrap, .cn-two, .cn-three { grid-template-columns: 1fr !important; gap: 16px !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display: grid"] { gap: 16px !important; }

  /* stat strips 2x2 */
  .d1-stats { grid-template-columns: 1fr 1fr !important; }
  .d1-stat { padding: 16px 14px !important; }

  /* type floor and section rhythm */
  body { font-size: 15px; }
  .cn-section { padding: 48px 0 !important; }
  h1 { font-size: 32px !important; line-height: 1.12 !important; }
  h2, .cn-h2 { font-size: 25px !important; line-height: 1.15 !important; }
  h3, .cn-h3 { font-size: 18px !important; }
  .cn-lead { font-size: 16px !important; }
  .cn-p, p { font-size: 15px !important; }
  [style*="font-size: 9"], [style*="font-size: 10"], [style*="font-size: 11"],
  [style*="font-size: 12"], [style*="font-size: 13"] { font-size: 14px !important; }
  .cn-mono, .cn-eyebrow, .cn-chip, .pv-badge, .d1-tool, .cn-photo-cap,
  .d2-node-k, .d1-mock-row, .d1-mock-bar span, .hub-chip, .d6-node-d,
  .cn-tag, .pv-tag, .d3-node-d, .d4-title, .cn-lang-btn, footer .cn-mono {
    font-size: 11px !important; }
  .cn-eyebrow { font-size: 11px !important; }

  /* tables scroll in a contained area rather than squashing */
  .cn-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; border-radius: 10px; }
  .cn-table thead, .cn-table tbody, .cn-table tr { white-space: normal; }
  .cn-table td, .cn-table th { min-width: 148px; }
  .cn-table td:first-child, .cn-table th:first-child { min-width: 128px; }

  /* diagrams: fixed-size stages become vertical flow, connectors as a left rail */
  .pv-wrap, .hub-stage-wrap { height: auto !important; overflow: visible; }
  .pv-stage, .hub-stage { width: 100% !important; height: auto !important;
    transform: none !important; position: static !important; }
  .pv-svg, .hub-spoke, .hub-orbit, .hub-glow, .hub-ring, .d3-track, .pv-stair, .pv-gate,
  .d6-spoke, .d6-orbit, .d6-glow { display: none !important; }
  .pv-card, .hub-card, .d6-node, .hub-chip {
    position: static !important; width: auto !important; margin: 0 0 12px 0 !important;
    left: auto !important; top: auto !important; transform: none !important; }
  .pv-stage, .hub-stage { display: flex !important; flex-direction: column;
    padding-left: 16px; border-left: 2px solid var(--accent); }
  .pv-core, .hub-core, .d6-core { position: static !important; width: auto !important;
    height: auto !important; margin: 0 0 16px 0 !important; border-radius: 10px !important;
    transform: none !important; padding: 16px !important; }
  .hub-legend { display: none !important; }
  .d3-nodes, .pv-nodes { grid-template-columns: 1fr !important; }
  .d3-node { padding-left: 16px; border-left: 2px solid var(--line); margin-bottom: 4px; }

  /* swimlanes scroll horizontally in place */
  .d2 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .d2-lane { min-width: 720px; }

  /* globe fills width; tooltips are tap-driven */
  #cn-globe { width: 100% !important; }
  #cn-globe canvas { touch-action: pan-y; }

  /* photos, forms and CTAs */
  .cn-photo { aspect-ratio: 4 / 3; }
  .cn-input, form button, .cn-btn, .cn-btn-ghost { width: 100%; min-height: 48px; }
  .cn-btn, .cn-btn-ghost { justify-content: center; }
  a[class*="cn-btn"] { display: flex !important; }
  [style*="display: flex"][style*="gap: 12px"] { flex-wrap: wrap !important; }

  /* touch targets */
  header a, header button, footer a, .cn-lang-item { min-height: 44px; display: flex; align-items: center; }
  footer a { padding: 4px 0; }

  /* hover-only affordances also work on tap */
  .pv-card:active, .hub-card:active, .cn-card:active { border-color: var(--accent); }
}

@media (max-width: 400px) {
  .cn-wrap, header > div, footer > div { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: 28px !important; }
  h2, .cn-h2 { font-size: 22px !important; }
  .d1-stats { grid-template-columns: 1fr 1fr !important; }
}