/* ===============================================
 * TYPOGRAPHY.CSS
 * Centralized typography system for the site.
 * Manages 4 font sizes (L, M, S, XS) across
 * PC, iPad (H/V), and iPhone (H/V).
 * =============================================== */

/* -----------------------------------------------
 * 1. FONT SIZE VARIABLE DEFINITIONS
 * ----------------------------------------------- */

:root {
  /* Default for PC */
  --font-size-l: 32px;
  --font-size-m: 20px;
  --font-size-s: 16px;
  --font-size-xs: 11px;
}

/* iPad Landscape */
@media (max-width: 1366px) and (orientation: landscape) {
  :root {
    --font-size-l: 28px;
    --font-size-m: 18px;
    --font-size-s: 14px;
    --font-size-xs: 10px;
  }
}

/* iPad Portrait */
@media (max-width: 1024px) and (orientation: portrait) {
  :root {
    --font-size-l: 30px;
    --font-size-m: 19px;
    --font-size-s: 15px;
    --font-size-xs: 11px;
  }
}

/* iPhone Landscape */
@media (max-width: 932px) and (orientation: landscape) {
  :root {
    --font-size-l: 22px;
    --font-size-m: 16px;
    --font-size-s: 13px;
    --font-size-xs: 9px;
  }
}

/* iPhone Portrait */
@media (max-width: 430px) and (orientation: portrait) {
  :root {
    --font-size-l: 24px;
    --font-size-m: 17px;
    --font-size-s: 14px;
    --font-size-xs: 10px;
  }
}

/* -----------------------------------------------
 * 2. UTILITY CLASSES
 * Applies the variables to elements.
 * !important is used to override scattered inline
 * and file-based styles.
 * ----------------------------------------------- */

.text-l {
  font-size: var(--font-size-l) !important;
  line-height: 1.3 !important;
}

.text-m {
  font-size: var(--font-size-m) !important;
  line-height: 1.4 !important;
}

.text-s {
  font-size: var(--font-size-s) !important;
  line-height: 1.7 !important;
}

.text-xs {
  font-size: var(--font-size-xs) !important;
  line-height: 1.5 !important;
}


/* -----------------------------------------------
 * 3. TRANSFORM:SCALE COMPENSATION
 * Counteracts scaling on specific sections for
 * iPad views to maintain font readability.
 * ----------------------------------------------- */

/* iPad Landscape: #faq-slide is scaled to 0.70 */
@media (orientation: landscape) and (min-width: 600px) and (max-width: 1400px) {
  #faq-slide .text-l { font-size: calc(var(--font-size-l) / 0.70) !important; }
  #faq-slide .text-m { font-size: calc(var(--font-size-m) / 0.70) !important; }
  #faq-slide .text-s { font-size: calc(var(--font-size-s) / 0.70) !important; }
  #faq-slide .text-xs { font-size: calc(var(--font-size-xs) / 0.70) !important; }
}

/* iPad Portrait: #faq-slide is scaled to 0.78 */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1400px) {
  #faq-slide .text-l { font-size: calc(var(--font-size-l) / 0.78) !important; }
  #faq-slide .text-m { font-size: calc(var(--font-size-m) / 0.78) !important; }
  #faq-slide .text-s { font-size: calc(var(--font-size-s) / 0.78) !important; }
  #faq-slide .text-xs { font-size: calc(var(--font-size-xs) / 0.78) !important; }
}

/* -----------------------------------------------
 * 4. LAYOUT FIXES (minimal, non-visual)
 * ----------------------------------------------- */

:root {
  --ju-header-h: 0px;
}

/* Specs/materials panel: avoid sticky header overlap and reduce dead space. */
#specs.scroll-panel {
  padding-top: calc(var(--ju-header-h, 0px) + clamp(12px, 2vw, 24px)) !important;
  padding-bottom: clamp(24px, 4vw, 56px) !important;
}