/* ==========================================================================
   SMARTCALC SUITE - UNIFIED SHARED TYPOGRAPHY & INTERACTIVE LAYOUTS
   ==========================================================================
   This stylesheet controls global styles across all calculator tools.
   To adjust the sizing, spacing, or styling of any element across the entire
   suite, simply edit the values below.
   ========================================================================== */

:root {
  /* ========================================================================
     1. GLOBAL TYPOGRAPHY CONFIGURATION (18-75 Year Old Accessibility)
     Change these multiplier variables to scale all font sizes up or down!
     For twice-as-big sizes, we have scaled these significantly.
     ======================================================================== */
  --font-scale-desktop: 1.55;  /* Sizing multiplier for Desktops/Laptops */
  --font-scale-mobile: 1.35;   /* Sizing multiplier for Mobile devices */
  
  /* Line height and letter tracking for perfect readability */
  --base-line-height: 1.6;
  --heading-line-height: 1.25;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.05em;
}

/* ==========================================================================
   2. DESKTOP TYPOGRAPHY (Screen widths 1024px and up)
   This section overrides standard Tailwind utility classes to scale up text
   on desktop displays.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Extra Small text (e.g., helper text, labels, status bars) */
  .text-xs, .text-\[10px\], .text-\[9px\] {
    font-size: calc(0.75rem * var(--font-scale-desktop)) !important; /* ~1.16rem */
    line-height: var(--base-line-height) !important;
  }

  /* Small text (e.g., descriptions, captions, small labels) */
  .text-sm {
    font-size: calc(0.875rem * var(--font-scale-desktop)) !important; /* ~1.36rem */
    line-height: var(--base-line-height) !important;
  }

  /* Base Body text (e.g., general paragraphs, input values, card content) */
  .text-base {
    font-size: calc(1rem * var(--font-scale-desktop)) !important; /* ~1.55rem */
    line-height: var(--base-line-height) !important;
  }

  /* Large text (e.g., section subheadings, input headers) */
  .text-lg {
    font-size: calc(1.125rem * var(--font-scale-desktop)) !important; /* ~1.74rem */
    line-height: var(--base-line-height) !important;
  }

  /* Extra Large text (e.g., smaller headings, highlights) */
  .text-xl {
    font-size: calc(1.25rem * var(--font-scale-desktop)) !important; /* ~1.94rem */
    line-height: var(--heading-line-height) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
  }

  /* 2x Extra Large text (e.g., standard titles, primary card titles) */
  .text-2xl {
    font-size: calc(1.5rem * var(--font-scale-desktop)) !important; /* ~2.32rem */
    line-height: var(--heading-line-height) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
  }

  /* 3x Extra Large text (e.g., calculator titles, hero greetings) */
  .text-3xl {
    font-size: calc(1.875rem * var(--font-scale-desktop)) !important; /* ~2.91rem */
    line-height: var(--heading-line-height) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
  }

  /* 4x Extra Large text (e.g., premium large hero headers) */
  .text-4xl {
    font-size: calc(2.25rem * var(--font-scale-desktop)) !important; /* ~3.49rem */
    line-height: var(--heading-line-height) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
  }
}

/* ==========================================================================
   3. MOBILE TYPOGRAPHY (Screen widths below 1024px)
   This section overrides standard Tailwind utility classes on mobile screens
   to guarantee ultra-comfortable reading for older visitors.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Extra Small text (Mobile status indicators, small captions) */
  .text-xs, .text-\[10px\], .text-\[9px\] {
    font-size: calc(0.75rem * var(--font-scale-mobile)) !important; /* ~1.01rem */
    line-height: var(--base-line-height) !important;
  }

  /* Small text (Mobile description labels) */
  .text-sm {
    font-size: calc(0.875rem * var(--font-scale-mobile)) !important; /* ~1.18rem */
    line-height: var(--base-line-height) !important;
  }

  /* Base Body text (Mobile paragraph reading text) */
  .text-base {
    font-size: calc(1rem * var(--font-scale-mobile)) !important; /* ~1.35rem */
    line-height: var(--base-line-height) !important;
  }

  /* Large text (Mobile input labels, section indicators) */
  .text-lg {
    font-size: calc(1.125rem * var(--font-scale-mobile)) !important; /* ~1.52rem */
    line-height: var(--base-line-height) !important;
  }

  /* Extra Large text (Mobile block headers, highlights) */
  .text-xl {
    font-size: calc(1.25rem * var(--font-scale-mobile)) !important; /* ~1.69rem */
    line-height: var(--heading-line-height) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
  }

  /* 2x Extra Large text (Mobile panel titles, card headers) */
  .text-2xl {
    font-size: calc(1.5rem * var(--font-scale-mobile)) !important; /* ~2.02rem */
    line-height: var(--heading-line-height) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
  }

  /* 3x Extra Large text (Mobile page headers, large numbers) */
  .text-3xl {
    font-size: calc(1.875rem * var(--font-scale-mobile)) !important; /* ~2.53rem */
    line-height: var(--heading-line-height) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
  }

  /* 4x Extra Large text (Mobile top prominent greetings) */
  .text-4xl {
    font-size: calc(2.25rem * var(--font-scale-mobile)) !important; /* ~3.04rem */
    line-height: var(--heading-line-height) !important;
    letter-spacing: var(--letter-spacing-tight) !important;
  }
}

/* ==========================================================================
   4. AD BANNER & LAYOUT CONTAINER CUSTOMIZATIONS
   Ensures that reserved spaces for banners have elegant styling, proper
   transitions, and visual separators when populated.
   ========================================================================== */
#header-banner-container, #mid-banner-container {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#header-banner-container:hover, #mid-banner-container:hover {
  transform: translateY(-2px);
}