/* ==============================================
   BASE — Reset + Global Typography + RWD Foundation
   base.css
   ============================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  max-width:100%;
  width:100%;
}

body{
  background:var(--clr-bg);
  color:var(--txt-main);
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.6;
  min-height:100vh;
  overflow-x:clip;
  max-width:100%;
  width:100%;
  position:relative;
}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--clr-bg)}
::-webkit-scrollbar-thumb{background:rgba(74,120,74,.4);border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:rgba(74,120,74,.65)}

/* Fluid Typography Scale */
h1{font-size:clamp(1.85rem, 4.5vw, var(--fs-5xl));font-weight:800;line-height:1.18;letter-spacing:-0.02em;overflow-wrap:break-word;word-break:break-word}
h2{font-size:clamp(1.5rem, 3.2vw, var(--fs-4xl));font-weight:800;line-height:1.24;letter-spacing:-0.015em;overflow-wrap:break-word;word-break:break-word}
h3{font-size:clamp(1.25rem, 2.2vw, var(--fs-2xl));font-weight:700;line-height:1.3;overflow-wrap:break-word;word-break:break-word}
h4{font-size:clamp(1.1rem, 1.6vw, var(--fs-xl));font-weight:700;line-height:1.35;overflow-wrap:break-word;word-break:break-word}
h5{font-size:var(--fs-base);font-weight:700;overflow-wrap:break-word;word-break:break-word}
h6{font-size:var(--fs-sm);font-weight:700;overflow-wrap:break-word;word-break:break-word}
p{color:var(--txt-muted);line-height:1.75;font-size:clamp(0.92rem, 1.05vw, var(--fs-base));overflow-wrap:break-word;word-break:break-word}
p.lead{font-size:clamp(1.05rem, 1.5vw, var(--fs-xl));line-height:1.65}
a{color:inherit;text-decoration:none;transition:var(--tr-fast)}
img,video,iframe,canvas{max-width:100%;height:auto;display:block}
svg{max-width:100%;height:auto}
pre,code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
ul,ol{list-style:none}
input,textarea,select,button{
  font-family:inherit;
  font-size:16px; /* 16px prevents iOS Safari auto-zoom on input focus */
}

/* Utility: container */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1rem, 3.5vw, var(--sp-6));
}

/* Utility: section spacing */
.section{padding-block:clamp(2.75rem, 5.5vw, var(--sp-20))}
.section--sm{padding-block:clamp(1.75rem, 3.5vw, var(--sp-12))}
.section--lg{padding-block:clamp(3.5rem, 7vw, var(--sp-24))}

/* Utility: responsive table wrapper */
.table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-bottom:var(--sp-4);
}

/* Utility: visually-hidden */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Utility: text align helpers */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-gradient{
  background:var(--grad-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Utility: flex helpers */
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-wrap{flex-wrap:wrap}
.flex-col{flex-direction:column}
.gap-1{gap:var(--sp-1)}
.gap-2{gap:var(--sp-2)}
.gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)}
.gap-6{gap:var(--sp-6)}
.gap-8{gap:var(--sp-8)}
.w-full{width:100%}

/* Utility: Responsive Grid Helpers */
.grid{display:grid;gap:var(--sp-6)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
.grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}

/* ═══ 1. Tablet Breakpoint (768px - 1024px) ═══ */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }
  .grid-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
  .container {
    padding-inline: clamp(1.25rem, 4vw, var(--sp-6));
  }
}

/* ═══ 2. Mobile Breakpoint (< 768px) ═══ */
@media (max-width: 768px) {
  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .grid-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
  .section {
    padding-block: clamp(2rem, 5vw, var(--sp-12));
  }
  .section--sm {
    padding-block: clamp(1.5rem, 3.5vw, var(--sp-8));
  }
  .section--lg {
    padding-block: clamp(2.5rem, 6vw, var(--sp-16));
  }
  .container {
    padding-inline: clamp(0.95rem, 3.5vw, 1.25rem);
  }

  /* Touch Targets & Form Inputs on Mobile (< 768px) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .btn,
  button.btn,
  a.btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.25rem;
  }
}

/* ═══ 3. Small Mobile Breakpoint (< 480px) ═══ */
@media (max-width: 480px) {
  .grid-stats {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .container {
    padding-inline: 0.85rem;
  }
}

/* Accessibility: focus ring */
:focus-visible{outline:2px solid var(--clr-primary);outline-offset:3px;border-radius:var(--r-sm)}