/*
  Surya International School - brand layer
  Loaded after main.css. Holds only rules ADDED for the rebrand; pure colour
  value swaps live in main.css itself (see _rebrand/02_palette.py).
*/

:root {
  --surya-red: #C40807;
  --surya-brown: #504A3E;
  --surya-dark: #2C2621;
}

/* ---------------------------------------------------------------------------
   Logo sizing.
   The Kidza logos were 143x47 SVGs and the theme relied on their intrinsic
   size - there was no CSS for .header-logo at all. The Surya lockup is a
   502x188 PNG (2x for retina), so it needs explicit heights or it blows the
   header open and pushes the nav onto a second row.
--------------------------------------------------------------------------- */
.header-logo img,
.offcanvas__logo img,
.contact-head img,
.coming-soon-logo img {
  height: 48px;
  width: auto;
  max-width: 100%;
  display: block;
}

.single-footer-widget .widget-head img {
  height: 52px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 575px) {
  .header-logo img,
  .offcanvas__logo img {
    height: 38px;
  }
  .single-footer-widget .widget-head img {
    height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Faculty cards.
   Names and designations come from the CBSE mandatory public disclosure, so
   each card carries a qualification line under the role.
--------------------------------------------------------------------------- */
.team-content .qual,
.team-content p .qual {
  display: block;
  font-size: 13px;
  font-weight: 500;
  opacity: .72;
  margin-top: 2px;
}

/* Faculty avatars.
   The theme's stock portraits were 270px wide and the cards relied on that
   intrinsic size - its own `width:100%` rule for these images sits inside a
   max-width media query, so at desktop widths nothing constrains them. The
   avatars are generated at 540x720 for retina, so they must be sized here or
   they overflow the card and only the first initial stays visible. */
img[src*="/team/faculty/"] {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* ---------------------------------------------------------------------------
   Page-transition loader.
   Replaces the theme's K-I-D-Z-A letter animation. The ring keeps the theme's
   existing spin; the mark sits still at its centre and breathes gently.
--------------------------------------------------------------------------- */
.preloader .animation-preloader .surya-loader {
  position: relative;
  width: 9em;
  height: 9em;
  margin: 0 auto 2.1em auto;
}

/* the theme sizes and spaces .spinner itself; the wrapper owns that now */
.preloader .animation-preloader .surya-loader .spinner {
  width: 100%;
  height: 100%;
  margin: 0;
  border-color: rgba(196, 8, 7, .15);
  border-top-color: var(--surya-red);
}

.preloader .animation-preloader .surya-loader .surya-loader-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  height: auto;
  transform: translate(-50%, -50%);
  animation: surya-loader-breathe 1.8s ease-in-out infinite;
}

@keyframes surya-loader-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(.9); }
}

.preloader .animation-preloader .surya-loader-word {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 2.6em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--surya-red);
  user-select: none;
}

.preloader .animation-preloader .surya-loader-word span {
  display: block;
  margin-top: .5em;
  font-size: .28em;
  font-weight: 600;
  letter-spacing: .32em;
  color: var(--surya-brown);
}

@media (max-width: 767px) {
  .preloader .animation-preloader .surya-loader {
    width: 7em;
    height: 7em;
    margin-bottom: 1.3em;
  }
  .preloader .animation-preloader .surya-loader-word {
    font-size: 1.7em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader .animation-preloader .surya-loader .spinner,
  .preloader .animation-preloader .surya-loader .surya-loader-mark {
    animation: none;
  }
}

/* pass 15: result bars */
@keyframes surya-load-100 { from { width: 0; } to { width: 100%; } }
@keyframes surya-load-80 { from { width: 0; } to { width: 80%; } }
.progress-wrap .pro-items .ber-box .progress .progress-value.surya-100 { animation-name: surya-load-100; }
.progress-wrap .pro-items .ber-box .progress .progress-value.surya-80 { animation-name: surya-load-80; }