/* ============================================
   FLUID TYPOGRAPHY SYSTEM
   Dynamic font scaling based on viewport
   ============================================ */

:root {
  /* Fluid Scaling Variables */
  --fluid-min-width: 375px;
  /* iPhone SE */
  --fluid-max-width: 1200px;
  /* Large tablet */
  --fluid-min-font: 16px;
  /* Minimum readable */
  --fluid-max-font: 19px;
  /* Desktop maximum */

  /* Fluid Heading Ranges */
  --fluid-h1-min: 2rem;
  --fluid-h1-max: 4rem;
  --fluid-h2-min: 1.6rem;
  --fluid-h2-max: 2.8rem;
  --fluid-h3-min: 1.35rem;
  --fluid-h3-max: 2.2rem;
  --fluid-h4-min: 1.15rem;
  --fluid-h4-max: 1.5rem;

  /* Fluid Text Ranges */
  --fluid-text-min: 0.95rem;
  --fluid-text-max: 1.1rem;
  --fluid-small-min: 0.8rem;
  --fluid-small-max: 0.9rem;
}

/* ============================================
   FLUID BASE FONT
   Scales html font size smoothly
   ============================================ */

@media (max-width: 1200px) {
  html {
    font-size: clamp(
      var(--fluid-min-font),
      calc(
        var(--fluid-min-font) +
          (var(--fluid-max-font) - var(--fluid-min-font)) *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      var(--fluid-max-font)
    );
  }
}

/* ============================================
   FLUID HEADINGS
   Dynamic heading scaling
   ============================================ */

@media (max-width: 1200px) {
  h1 {
    font-size: clamp(
      var(--fluid-h1-min),
      calc(
        var(--fluid-h1-min) + (var(--fluid-h1-max) - var(--fluid-h1-min)) *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      var(--fluid-h1-max)
    );
  }

  h2 {
    font-size: clamp(
      var(--fluid-h2-min),
      calc(
        var(--fluid-h2-min) + (var(--fluid-h2-max) - var(--fluid-h2-min)) *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      var(--fluid-h2-max)
    );
  }

  h3 {
    font-size: clamp(
      var(--fluid-h3-min),
      calc(
        var(--fluid-h3-min) + (var(--fluid-h3-max) - var(--fluid-h3-min)) *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      var(--fluid-h3-max)
    );
  }

  h4 {
    font-size: clamp(
      var(--fluid-h4-min),
      calc(
        var(--fluid-h4-min) + (var(--fluid-h4-max) - var(--fluid-h4-min)) *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      var(--fluid-h4-max)
    );
  }
}

/* ============================================
   FLUID BODY TEXT
   Dynamic paragraph and text scaling
   ============================================ */

@media (max-width: 1200px) {
  /* Body text */
  p,
  li,
  a {
    font-size: clamp(
      var(--fluid-text-min),
      calc(
        var(--fluid-text-min) +
          (var(--fluid-text-max) - var(--fluid-text-min)) *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      var(--fluid-text-max)
    ) !important;
  }

  /* Small text */
  small,
  .caption,
  .meta,
  .fine-print {
    font-size: clamp(
      var(--fluid-small-min),
      calc(
        var(--fluid-small-min) +
          (var(--fluid-small-max) - var(--fluid-small-min)) *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      var(--fluid-small-max)
    ) !important;
  }
}

/* ============================================
   FLUID COMPONENTS
   Dynamic component scaling
   ============================================ */

@media (max-width: 1200px) {
  /* Buttons */
  .btn,
  .btn-primary,
  .btn-outline {
    -webkit-tap-highlight-color: transparent;

    font-size: clamp(
      0.9rem,
      calc(
        0.9rem + 0.1rem *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      1rem
    ) !important;
  }

  /* Navigation */
  nav a,
  .nav-link {
    font-size: clamp(
      0.9rem,
      calc(
        0.9rem + 0.1rem *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      1rem
    ) !important;
  }

  /* Form elements */
  input,
  textarea,
  select {
    font-size: clamp(
      var(--fluid-text-min),
      calc(
        var(--fluid-text-min) +
          (var(--fluid-text-max) - var(--fluid-text-min)) *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      var(--fluid-text-max)
    ) !important;
  }

  /* Labels */
  label {
    font-size: clamp(
      0.85rem,
      calc(
        0.85rem + 0.1rem *
          (
            (100vw - var(--fluid-min-width)) /
              (var(--fluid-max-width) - var(--fluid-min-width))
          )
      ),
      0.95rem
    ) !important;
  }
}

/* ============================================
   FLUID BREAKPOINTS
   Fixed sizes for specific breakpoints
   ============================================ */

/* Tablet refinements */
@media (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 17px;
    /* Fixed base for tablets */
  }

  h1 {
    font-size: 3rem !important;
  }

  h2 {
    font-size: 2.2rem !important;
  }

  h3 {
    font-size: 1.6rem !important;
  }

  h4 {
    font-size: 1.3rem !important;
  }
}

/* Mobile optimizations */
@media (max-width: 600px) {
  html {
    font-size: 16px;
    /* Standard mobile base */
  }

  /* Better mobile line heights */
  p,
  li,
  a {
    line-height: 1.65 !important;
  }

  /* Compact but readable headings */
  h1 {
    font-size: 2.5rem !important;
    line-height: 1.15;
  }

  h2 {
    font-size: 1.8rem !important;
    line-height: 1.2;
  }

  h3 {
    font-size: 1.5rem !important;
    line-height: 1.25;
  }
}

/* Small mobile adjustments */
@media (max-width: 375px) {
  html {
    font-size: 16px;
    /* Slightly smaller for very small screens */
  }

  h1 {
    font-size: 2.2rem !important;
  }

  h2 {
    font-size: 1.6rem !important;
  }

  h3 {
    font-size: 1.4rem !important;
  }
}