/* ==========================================================================
   Responsive Core (v1.0)
   Purpose: Make an existing site resilient from 25% to 500% browser zoom
   Strategy: Fluid typography, fluid containers, flexible grids, overflow safety,
   media-queries, and utility classes that override rigid px layouts.
   Usage: Include AFTER your existing CSS to override it.
   ========================================================================== */

/* 1) CSS Reset: keep it minimal to avoid breaking legacy styles */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; text-rendering: optimizeLegibility; }

/* 2) Root scales (typography, spacing) with clamp to remain readable across zooms */
:root {
  /* base font scales between 15px and 18px depending on viewport */
  --step-0: clamp(0.9375rem, 0.92rem + 0.2vw, 1.125rem); /* ~15–18px */
  --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.875rem);
  --step-3: clamp(1.62rem, 1.4rem + 1.0vw, 2.25rem);
  --step-4: clamp(1.94rem, 1.6rem + 1.4vw, 2.8rem);

  /* fluid spacing scale */
  --space-1: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
  --space-2: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.6rem + 0.4vw, 1rem);
  --space-4: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  --space-5: clamp(1.5rem, 1rem + 1vw, 2rem);
  --space-6: clamp(2rem, 1.2rem + 2vw, 3rem);

  /* content max width guardrails */
  --max-content: 72rem; /* ~1152px at 16px base */
}

/* 3) Base typography */
html, body { font-size: var(--step-0); line-height: 1.5; }
h1 { font-size: var(--step-4); line-height: 1.1; margin: 0 0 var(--space-4); }
h2 { font-size: var(--step-3); line-height: 1.2; margin: 0 0 var(--space-3); }
h3 { font-size: var(--step-2); line-height: 1.25; margin: 0 0 var(--space-2); }
p, ul, ol { margin: 0 0 var(--space-3); }
small { font-size: 0.875em; }

/* 4) Containers & layout */
.container, .wrapper, main, .content {
  width: min(100% - 2rem, var(--max-content));
  margin-inline: auto;
}
.section { padding: var(--space-5) 0; }

/* 5) Media elements scale safely */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
img, video { display: block; }
iframe { border: 0; }


/* 6) Flex/Grid helpers to replace rigid px grids */
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.col { flex: 1 1 16rem; min-width: 0; } /* min-width:0 prevents overflow on zoom */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
}

/* 7) Buttons & controls scale with font-size */
button, input, select, textarea {
  font: inherit;
  line-height: 1.2;
  padding: 0.6em 1em;
  max-width: 100%;
}
label { display: inline-block; margin-bottom: 0.5em; }

/* 8) Overflow safety nets: prevent layout breakage at extreme zooms */
.wrap, .text-wrap, p, h1, h2, h3, h4, h5, h6, li, td, th {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Prevent fixed-width elements from blowing out layouts */
[class*="col-"], [class*="span-"], [class*="column"] { min-width: 0; }
img[width], img[height] { height: auto; }

/* 9) Navigation patterns */
.nav { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.nav a { text-decoration: none; }
.nav .spacer { flex: 1 1 auto; }

/* 10) Card pattern */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid hsl(0 0% 90%);
  border-radius: 0.75rem;
  padding: var(--space-4);
  background: white;
}

/* 11) Utility classes (use freely to patch rigid areas) */
.w-100 { width: 100% !important; }
.max-w-100 { max-width: 100% !important; }
.h-auto { height: auto !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.p-0 { padding: 0 !important; }
.px-2 { padding-inline: var(--space-2) !important; }
.py-2 { padding-block: var(--space-2) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }

/* 12) Media queries for key breakpoints */
@media (max-width: 1200px) {
  :root { --max-content: 68rem; }
}
@media (max-width: 992px) {
  :root { --max-content: 62rem; }
  .hide-md { display: none !important; }
}
@media (max-width: 768px) {
  :root { --max-content: 48rem; }
  .nav { gap: var(--space-1); }
  .stack-md { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
  :root { --max-content: 44rem; }
  .hide-sm { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 13) Legacy table + form fixes to survive zoom extremes */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75em; text-align: left; }
fieldset { min-width: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea {
  width: 100%;
}

/* 14) Aspect ratio helper */
.aspect { position: relative; width: 100%; }
.aspect::before { content: ""; display: block; padding-top: var(--aspect, 56.25%); }
.aspect > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 15) Images inside flex/grid should not overflow at 500% */
figure, .media { display: block; margin: 0; }
figure img { width: 100%; height: auto; }

/* 16) Prevent horizontal scrollbars caused by over-wide components */
html, body { overflow-x: hidden; }
.section, .container, .wrapper, .content { max-width: 100vw; }