/**
 * BlueRack — performance-fixes.css
 * Merge into main.css or load async after it.
 * Contains only rules verified as used across the site.
 */

/* ── 1. Body font: swap prevents FOIT on slow connections ── */
@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Skip-to-content (keyboard accessibility) ─────────── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  padding: 0.75rem 1.5rem;
  background: var(--blue);
  color: #fff !important;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
}

/* ── 3. Focus-visible — keyboard ring, no mouse ring ─────── */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── 4. FAQ toggle button focus ring ─────────────────────── */
.toggle-title[role="button"] {
  cursor: pointer;
  user-select: none;
}
.toggle-title[role="button"]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 5. Headings in rem (replaces px values in main.css) ─── */
h1 { font-size: 3.75rem;  line-height: 1.1; }
h2 { font-size: 3rem;     line-height: 1.1; }
h3 { font-size: 1.875rem; line-height: 1.2; }
h4 { font-size: 1.625rem; line-height: 1.3; }
h5 { font-size: 1.5rem;   line-height: 1.3; }
h6 { font-size: 1.375rem; line-height: 1.4; }
.font-76      { font-size: 4.75rem;  line-height: 1.05; }
.second_heading { font-size: 3rem;   line-height: 1.15; font-weight: 700; }

@media (max-width: 768px) {
  h1             { font-size: 2.25rem; }
  h2             { font-size: 1.875rem; }
  h3             { font-size: 1.5rem; }
  .font-76       { font-size: 2.75rem !important; line-height: 1.1 !important; }
  .second_heading { font-size: 2rem; line-height: 1.2; }
}

/* ── 6. Prevent CLS: images always have intrinsic size ───── */
img {
  max-width: 100%;
  height: auto;
}

/* ── 7. Preheader layout ──────────────────────────────────── */
.preheader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* ── 8. content-visibility: defer off-screen section paint ─ */
section:not(.hero):not(.hero-bws):not(#main-content) {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* ── 9. Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .marquee .marquee_item {
    animation: none;
    position: static;
    display: inline-block;
  }
}

/* ── 10. Print styles ─────────────────────────────────────── */
@media print {
  .sticky,
  .mobile-menu,
  .submenu,
  .mega-menu-container,
  .preheader,
  #openMenuBtn,
  .btn-dark,
  .social-icon {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }
  a[href^="#"]::after,
  a[href^="tel:"]::after,
  a[href^="https://wa.me"]::after {
    content: "";
  }
  .hero,
  .hero-bws {
    padding-top: 2rem !important;
    min-height: auto !important;
  }
}