/* ui-scale.css — global UI scale-down. Loaded AFTER theme.min.css.
   Purpose: the Silicon theme renders large/"zoomed"; this shrinks the UI
   proportionally across all devices. Theme is rem-based, so reducing the
   root font-size scales fonts + spacing + gutters together. A few targeted
   overrides tame the parts that don't follow the root (fluid heading vw,
   and the biggest section spacers). */

/* 1) Core lever: shrink everything rem-based uniformly (16px -> 14px). */
html { font-size: 87.5%; }

/* 2) Guard: prevent iOS Safari auto-zoom on input focus.
   iOS zooms when a focused field computes < 16px; keep form controls at 16px on phones. */
@media (max-width: 575.98px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .form-control,
  .form-select { font-size: 16px; }
}

/* 3) Tame fluid headings/display/fs-1..4 so desktop doesn't balloon (cap the vw growth). */
.display-1 { font-size: clamp(2rem,    1.6rem + 2.5vw,  3.25rem) !important; }
.display-2 { font-size: clamp(1.8rem,  1.5rem + 2vw,    2.85rem) !important; }
.display-3 { font-size: clamp(1.7rem,  1.4rem + 1.6vw,  2.5rem)  !important; }
.display-4 { font-size: clamp(1.55rem, 1.3rem + 1.3vw,  2.15rem) !important; }
.display-5 { font-size: clamp(1.4rem,  1.2rem + 1vw,    1.9rem)  !important; }
.display-6 { font-size: clamp(1.3rem,  1.15rem + 0.8vw, 1.65rem) !important; }

h1, .h1, .fs-1 { font-size: clamp(1.5rem,  1.3rem + 1vw,    2rem)    !important; }
h2, .h2, .fs-2 { font-size: clamp(1.3rem,  1.15rem + 0.7vw, 1.7rem)  !important; }
h3, .h3, .fs-3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem) !important; }
h4, .h4, .fs-4 { font-size: clamp(1.05rem, 1rem + 0.3vw,    1.25rem) !important; }
/* h5/h6/.fs-5/.fs-6 are fixed rem already — they shrink via the root change, leave them. */

/* 4) Tame the largest section spacers (Bootstrap -5 + Silicon -6) so desktop is less airy.
   Lower levels (1–4) are small and already shrink via the root change. */
.py-5 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
.pt-5 { padding-top: 2.25rem !important; }
.pb-5 { padding-bottom: 2.25rem !important; }
.my-5 { margin-top: 2.25rem !important; margin-bottom: 2.25rem !important; }
.mt-5 { margin-top: 2.25rem !important; }
.mb-5 { margin-bottom: 2.25rem !important; }
/* Silicon's -6 spacers (used as p-6/px-6/pt-6/py-6): pull them in. */
.p-6  { padding: 3rem !important; }
.px-6 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-6 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pt-6 { padding-top: 3rem !important; }
