/* Responsive enhancements (always-visible menu; no IE8 support) */

/* Header background cover for modern browsers */
#header { background-size: cover; }

/* Desktop ≥ 980px: use flex columns and full-width visible menu */
@media (min-width: 980px) {
  #content-row { display: flex; align-items: flex-start; gap: 16px; }
  #main { float: none; width: auto; margin: 0; flex: 1 1 auto; min-width: 0; }
  #main-inner { margin: 0; }
  #sidebar-left, #sidebar-right { float: none; margin: 0; position: static; }
  #sidebar-left  { flex: 0 0 220px; }
  #sidebar-right { flex: 0 0 220px; }

  /* Primary menu always visible; single row if room, wraps when needed */
  #primary { height: auto; }
  #primary ul { display: flex; flex-wrap: wrap; gap: 0; }
  #primary a { padding: 14px 12px; height: auto; line-height: 1.2; background: none; }
}

/* Tablet 600–979px: narrower sidebars; menu wraps */
@media (min-width: 600px) and (max-width: 979px) {
  #content-row { display: flex; align-items: flex-start; gap: 16px; }
  #main { float: none; width: auto; margin: 0; flex: 1 1 auto; min-width: 0; }
  #main-inner { margin: 0; }
  #sidebar-left, #sidebar-right { float: none; margin: 0; position: static; box-sizing: border-box; }
  #sidebar-left, #sidebar-right { flex: 0 0 180px; }

  #primary { height: auto; }
  #primary ul { display: flex; flex-wrap: wrap; gap: 0; }
  #primary a { padding: 12px 10px; height: auto; line-height: 1.2; background: none; }
}

/* Phones < 600px: stack columns; ensure main never touches screen edge; keep menu visible as vertical list */
@media (max-width: 599px) {
  #content-row { display: block; }
  #sidebar-left, #sidebar-right { float: none; margin: 0 0 16px 0; width: 100%; position: static; box-sizing: border-box; }
  #sidebar-right { margin-right: 12px; }

  #main, #main-inner, #main-inner2 { margin: 0; }
  /* Extra breathing room so the main white card doesn't appear glued to screen edge */
  #main-inner2 { padding: 18px; }

  /* Menu always visible, stacked */
  #primary { height: auto; background: #26647b; }
  #primary ul { display: block; padding: 8px; }
  #primary ul li { display: block; }
  #primary a { display: block; padding: 12px 8px; height: auto; line-height: 1.3; background: none; border-top: 1px solid rgba(0,0,0,.08); }
  #primary a.active { color: #000; }

  /* Simpler page background on tiny screens */
  body { background: #fff; }
}

/* Forms */
@media (max-width: 599px) { input[type="text"], input[type="email"], input[type="search"], textarea, select { max-width: 100%; box-sizing: border-box; } }

/* Media scaling */
img, embed, object, video { max-width: 100%; height: auto; }