/* ====== NEW 2026-07-03 - RE AI HELP =======*/

/* ====== Responsive breakpoints (viewport width) ====== */
:root { --site-max: 1055px; }

/* Desktop default: keep existing style.css floats/widths */

/* Tablet/mobile: stack into one column */
@media (max-width: 800px) {
  body { width: 98%; padding: 2px; font-size: 86%; }

  #wrap {
    width: 98%;
    margin: 0;
    padding: 2px;
    overflow: hidden;
    background: #fff;
  }

  #content, #sidebar, #contentleft, #postarea, #archive {
    float: none !important;
    width: auto !important;
  }

  #content { padding: 2px; }
  #sidebar { padding: 10px 0 10px 6px; clear: both; }

  /* Images: make them fluid */
  img { max-width: 100%; height: auto; }
  img.fltrt, img.fltlft { max-width: 50%; height: auto; }
}

/* Extra-small tweaks */
@media (max-width: 480px) {
  /* Keep same stacking; optionally tighten a few spacings here later */
}

/* ====== Common modern responsive breakpoints ====== */

@media (max-width: 900px) {
  body { width: 98%; padding: 2px; font-size: 86%; }

  #wrap {
    width: 98%;
    margin: 0;
    padding: 2px;
    overflow: hidden;
    background: #fff;
  }

  #content, #sidebar, #contentleft, #postarea, #archive {
    float: none !important;
    width: auto !important;
  }

  #content { padding: 2px; }

  #sidebar {
    padding: 10px 0 10px 6px;
    clear: both;
  }

  img { max-width: 100%; height: auto; }
}

/* Smaller phone tweaks */
@media (max-width: 600px) {
  #content { padding: 2px; }

  /* If your nav/header is wide, let it wrap */
  .navbar, .globalNav, .topnavbar, .subnavbar {
    max-width: 100%;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* Extra-small (optional) */
@media (max-width: 480px) {
  /* Add tiny spacing reductions here if needed after testing */
  #wrap { padding: 1px; }
}


/* Header/nav responsive toggles (replaces wp-phone.css + wp-tablet.css behavior) */
@media (max-width: 900px) {
  .topimg { display: block; }
  .topimgph { display: none; }

  .toptbl { display: none; }
  .topnavbar { display: none; }
  .subnavbar { display: block; }
  .subnav { display: block; }
  .globalNav { display: none; }
  .sumimg { display: block; }

  .header { display: block; }
}

/* Phones */
@media (max-width: 600px) {
  .topimg { display: none; }
  .topimgph { display: none; }

  .toptbl { display: block; }
  .topnavbar { display: block; }
  .subnavbar { display: none; }
  .subnav { display: none; }
  .globalNav { display: none; }
  .sumimg { display: block; }

  .header { display: none; } /* mirrors your wp-phone.css */
}

/* Make the big link row behave on narrow screens */
@media (max-width: 600px) {
  .globalNav { display: block; }
  .globalNav a { white-space: normal; }
}

/* Desktop (inherits style.css) */

/* Tablet + below */
@media (max-width: 900px) {
  .header { display: block; }
  .topimg { display: none; }
  .topimgph { display: none; }

  .toptbl { display: block; }
  .topnavbar { display: none; }
  .subnavbar { display: block; }
  .subnav { display: block; }
  .globalNav { display: none; }
  .sumimg { display: block; }
}

/* Phones */
@media (max-width: 600px) {
  .header { display: block; }
  .topimg { display: block; }
  .topimgph { display: none; }

  .toptbl { display: none; }
  .topnavbar { display: none; }
  .subnavbar { display: none; }
  .subnav { display: none; }
  .globalNav { display: none; }
  .sumimg { display: block; }
}