/**
 * Sitewide responsive + fluid desktop UI scale
 * Reference design width: 1440px (100% browser zoom on build machine)
 *
 * Breakpoints (approx):
 *  - phone:   ≤600
 *  - tablet:  ≤980
 *  - small desktop: ≤1100
 *  - large:   ≥1400
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --ui-scale: 1;
  --sfl-page-gutter: clamp(0.85rem, 2.5vw, 1.35rem);
  --sfl-container-max: 1200px;
}

/* ===== Global overflow + media ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
canvas,
svg,
iframe,
embed,
object,
audio {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Keep fixed-height brand marks readable */
.sfl-logo img,
.sfl-footer .sfl-logo-light img {
  width: auto;
  height: auto;
  max-height: 52px;
  max-width: min(280px, 58vw);
  object-fit: contain;
}

.sfl-container,
.sfl-nav .sfl-container,
.sfl-footer .sfl-container {
  width: min(var(--sfl-container-max), calc(100% - (var(--sfl-page-gutter) * 2)));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Grid/flex children must be allowed to shrink (prevents overflow) */
.sfl-home,
.sfl-dashboard,
.sfl-scourse,
.sfl-checkout,
.sfl-page,
.sfl-scourse-layout,
.sfl-scourse-main,
.sfl-scourse-primary,
.sfl-scourse-secondary,
.sfl-scourse-grammar-grid,
.sfl-scourse-reading-grid,
.sfl-scourse-vocab-grid,
.sfl-scourse-split,
.sfl-dashboard .dashboard-main-content,
.sfl-dashboard .dashboard-tab-content {
  min-width: 0;
  max-width: 100%;
}

/* ===== Desktop / laptop fluid scale (not phones/tablets) ===== */
@media (min-width: 981px) {
  html {
    /* Smaller laptops (~1280) ~0.89; 1440 = 1; large screens up to 1.35 */
    --ui-scale: clamp(0.88, calc(100vw / 1440px), 1.35);
  }

  @supports (zoom: 1) {
    html {
      zoom: var(--ui-scale);
    }
  }

  /* Fallback when zoom is unavailable (rare modern browsers) */
  @supports not (zoom: 1) {
    body {
      transform: scale(var(--ui-scale));
      transform-origin: top center;
      width: calc(100% / var(--ui-scale));
      margin-left: auto;
      margin-right: auto;
    }
  }
}

@media (max-width: 980px) {
  html {
    --ui-scale: 1;
  }

  @supports (zoom: 1) {
    html {
      zoom: 1;
    }
  }
}

/* ===== Shared ≤1100 tweaks ===== */
@media (max-width: 1100px) {
  .sfl-nav-inner {
    min-height: 68px;
  }
}

/* ===== Tablet / phone base ===== */
@media (max-width: 980px) {
  body {
    overflow-x: clip;
  }

  .sfl-nav-inner {
    min-height: 64px;
    gap: 0.75rem;
  }

  .sfl-logo img,
  .sfl-footer .sfl-logo-light img {
    max-height: 44px;
  }

  /* Prefer stacking over sideways scroll for dense toolbars */
  .sfl-scourse-steps,
  .sfl-scourse-mod-head,
  .sfl-scourse-foot {
    max-width: 100%;
  }
}

/* ===== Phone ===== */
@media (max-width: 600px) {
  :root {
    --sfl-page-gutter: 0.85rem;
  }

  .sfl-nav-inner {
    min-height: 60px;
  }

  .sfl-nav-links a,
  .sfl-nav-welcome,
  .sfl-nav-cta-inmenu {
    font-size: 0.92rem;
  }

  /* Full-width only inside the open mobile menu — not the bar CTA */
  .sfl-nav-links .sfl-nav-cta,
  .sfl-nav-cta-inmenu {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .sfl-nav-cta-bar {
    width: auto;
  }

  .sfl-logo img,
  .sfl-footer .sfl-logo-light img {
    max-height: 40px;
    max-width: min(160px, 40vw);
  }
}

@supports (height: 100dvh) {
  @media (min-width: 981px) {
    .custom-student-dashboard-vertical.sfl-dashboard {
      height: calc(100dvh - 72px) !important;
      max-height: calc(100dvh - 72px) !important;
    }
  }
}