/* Mobile-first responsive stylesheet
   - Place this file in the project root alongside existing CSS files.
   - It aims to provide safe, minimal overrides to make layouts fluid and touch-friendly.
   - You'll likely need page-specific tweaks later; this is a broad, low-risk baseline.
*/

:root{
  --max-width: 1100px;
  --content-padding: 16px;
  --base-font-size: 16px;
}

/* Reset box sizing and sensible defaults */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-size:var(--base-font-size); -webkit-text-size-adjust:100%}

/* Make the main container centered with max width */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding-left:var(--content-padding);padding-right:var(--content-padding)}

/* Images and media scale */
img,video,canvas{max-width:100%;height:auto;display:block}

/* Utilities */
.row{display:flex;flex-wrap:wrap}
.col{flex:1 1 100%}
.hide-mobile{display:none}

/* Buttons and touch targets */
button,a.button{display:inline-block;padding:12px 16px;border-radius:6px;text-align:center;touch-action:manipulation}

/* Improve form elements on small screens */
input,textarea,select{font-size:1rem;padding:10px;border-radius:6px;width:100%;max-width:100%}

/* Responsive nav helper */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.navbar .nav-items{display:flex;gap:12px}
.navbar .nav-toggle{display:none}

/* Card layout */
.card{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);padding:12px}

/* Make tables scroll on small screens */
.table-responsive{overflow:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}

/* Typography scaling for small devices */
h1{font-size:1.6rem;margin:.4rem 0}
h2{font-size:1.25rem;margin:.35rem 0}
p{line-height:1.45}

/* Small-screen layout tweaks */
@media (max-width: 900px){
  :root{--max-width:900px}
  .navbar .nav-items{display:none}
  .navbar .nav-toggle{display:block}
  .hide-desktop{display:none}
  .hide-mobile{display:block}
}

/* Very small devices */
@media (max-width:480px){
  :root{--content-padding:12px;--base-font-size:15px}
  h1{font-size:1.35rem}
  button,a.button{padding:10px 12px}
}

/* Accessibility helpers */
.focus-outline:focus{outline:3px solid #3b82f6;outline-offset:2px}

/* Small, safe overrides for existing layout classes often used in project */
.header,header{width:100%}
.sidebar{flex:0 0 260px}
@media (max-width:1000px){
  .sidebar{display:none}
}

/* Constrain large fixed-width elements often found in templates */
.container-fixed{padding-left:var(--content-padding);padding-right:var(--content-padding);max-width:100%}

/* Helpers for long forms */
.form-row{display:flex;gap:12px}
.form-row .col{flex:1 1 auto}
@media (max-width:700px){
  .form-row{flex-direction:column}
}

/* Small visual improvements for dist pages that may be legacy */
body{background-color:#f7f8fb}

/* End of responsive baseline */

/* Emergency guide styles */
.emergency-guide{background:#fff;border-radius:8px;padding:14px;margin-top:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06)}
.emergency-guide h2,.emergency-guide h3{margin:0 0 8px 0;font-size:1.05rem}
.emergency-list{margin:8px 0 0 1.05rem;padding-left:0}
.emergency-list li{margin:10px 0}
.emergency-list strong{display:block;font-weight:700;margin-bottom:4px}
.emergency-small{color:var(--muted,#666);font-size:.95rem;margin-top:10px}

@media (max-width:600px){
  .emergency-list li{font-size:0.95rem}
  .emergency-guide{padding:12px}
}