/* Non-blocking font swap for theme fonts (loaded after style.css) */
@font-face {
  font-family: "Euclid Circular A";
  src: url("../fonts/euclid-circular-a/EuclidCircularARegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Euclid Circular A";
  src: url("../fonts/euclid-circular-a/EuclidCircularAMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Euclid Circular A";
  src: url("../fonts/euclid-circular-a/EuclidCircularASemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Euclid Circular A";
  src: url("../fonts/euclid-circular-a/EuclidCircularABold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka/static/Fredoka-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka/static/Fredoka-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka/static/Fredoka-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka/static/Fredoka-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Hero background — prefer WebP when supported */
.curved-bg {
  background-image: url(/images/curve-right-1.png);
  background-image: image-set(
    url(/images/curve-right-1.webp) type("image/webp"),
    url(/images/curve-right-1.png) type("image/png")
  );
  background-repeat: no-repeat;
  background-position: right;
}

/* Bootstrap .container replacement for student/tutor app pages (no full Bootstrap needed) */
.theme-container,
.container {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .theme-container,
  .container { max-width: 540px; }
}
@media (min-width: 768px) {
  .theme-container,
  .container { max-width: 720px; }
}
@media (min-width: 992px) {
  .theme-container,
  .container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .theme-container,
  .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .theme-container,
  .container { max-width: 1320px; }
}

/* §8 — improve contrast on low-opacity theme text */
.td_opacity_6 { opacity: 0.82 !important; }
.td_opacity_7 { opacity: 0.88 !important; }
.td_opacity_8 { opacity: 0.92 !important; }
.td_opacity_9 { opacity: 0.95 !important; }

/* §6 — compositor-friendly animation hints */
.wow,
[class*="fadeIn"],
[class*="fadeInUp"],
[class*="fadeInLeft"],
[class*="fadeInRight"],
[class*="fadeInDown"] {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .wow,
  [class*="wow"],
  [class*="fadeIn"],
  .td_moving_box_wrap,
  .td_moving_box {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}