/* ===== Mobile responsiveness overrides (light-mode safe) =====
   Drop this file in the same folder and link it AFTER your existing CSS files.

   <link rel="stylesheet" href="jacksonstyle_structure.css" />
   <link rel="stylesheet" href="jacksonstyle_blue.css" />  <!-- or red -->
   <link rel="stylesheet" href="mobile-overrides.css" />
*/

/* 1) Responsive typography */
.bigname { font-size: clamp(1.6rem, 5vw, 2.3rem); }
h1 { font-size: clamp(1.4rem, 4.2vw, 2rem); }
h2 { font-size: clamp(1.2rem, 3.6vw, 1.6rem); }
h3 { font-size: clamp(0.95rem, 0.95vw, 0.95rem); }
body { line-height: 1.5; }

/* 2) Container gutters — progressively narrower margins */
@media (max-width: 1200px) {
  body > div { margin-left: 12% !important; margin-right: 12% !important; }
}
@media (max-width: 900px) {
  body > div { margin-left: 8% !important; margin-right: 8% !important; }
}
@media (max-width: 680px) {
  body > div { margin-left: 4% !important; margin-right: 4% !important; }
}

/* 3) Paragraph widths — reduce right margin */
@media (max-width: 900px) {
  p.type2 { margin-right: 8% !important; }
}
@media (max-width: 680px) {
  p.type1, p.type2, p.type3 {
    margin-right: 4% !important;
    margin-left: 4% !important;
    display: block !important;
  }
  p.type3 { width: 100% !important; }
}

/* 4) Header/nav row — wrap nicely on mobile */
@media (max-width: 680px) {
  .type1 > span:last-child {
    float: none !important;
    display: flex !important;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
  }
  .button { padding: 12px 16px; font-size: 15px; }
  #theme-btn { margin-left: 4px; }
}

/* 5) Images — make full-width on small screens */
@media (max-width: 900px) {
  img.leftinlineimg, img.rightinlineimg {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 0 1rem 0 !important;
  }
  img[style*="float:right"], img[style*='float: right'] {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 0 1rem 0 !important;
  }
}

/* 6) Tables — scroll on overflow */
.table1 { overflow-x: auto; display: block; }

/* 7) Buttons/links — spacing when wrapping */
.button + .button { margin-left: 0; }