/* ==========================================================================
   Manchester Pathways brand palette
   --------------------------------------------------------------------------
   The Escul theme drives ~510 rules off --theme-color / --theme-color2, so the
   whole site recolours from this one block. Loaded after style.css.

   The purple is sampled straight off the client's logo artwork — #6A3192 is
   the solid-ink mode across the wordmark, not an eyeballed match. It clears
   8.5:1 on white, so it is safe for body text as well as accents.

   The mark is single-ink, so there is no second brand colour to draw on. The
   secondary is a lifted tint of the same hue, for the places the theme paints
   an accent on a dark ground (the hero headline, mainly) where the brand
   purple itself would sit at 1.6:1 and disappear.
   ========================================================================== */

:root {
  --theme-color: #6A3192;   /* brand purple — links, icons, button wipe, bg-theme blocks */
  --theme-color2: #C9A6E9;  /* lifted tint  — accents that land on dark grounds          */

  /* Deeper and lighter steps of the same hue, for gradients and card accents. */
  --brand-purple-deep: #4A1F6B;
  --brand-purple-mid: #8B5FB5;
  --brand-purple-bright: #B07FD9;
  --brand-purple-pale: #E7DCF2;

  /* Panel tints, re-derived from the purple (they shipped as teal mint and
     a demo lavender). */
  --smoke-color2: #F4EFFA;
  --smoke-color3: #EFE7F7;

  /* The theme's dark neutrals are navy — they read as a different brand next
     to a purple bottom bar. Shifted onto the same hue. White clears 16:1 on
     the footer, and the muted 68% white the theme uses there clears 7.7:1. */
  --black-color2: #1A0B26;
  --black-color3: #2B1740;

  /* The remaining theme neutrals lean blue (body text at hue 215, hairlines at
     208). Barely visible on their own, but next to a purple accent the page
     reads faintly cold. Same lightness, hue moved onto the brand — the body
     colour actually gains contrast doing it, 6.1:1 to 6.9:1. */
  --body-color: #5F5670;
  --th-border-color: #DFD8E6;
  --light-color: #F1EAFA;
  --smoke-color5: #F7F4FB;
}

/* The theme ships three teal literals and six amber ones. They all sit in
   components this site does not render (hero-3, hero-6, img-box3, why-wrap6,
   why-wrap10, process-img-box2, price-card, cta-wrap4), but they are covered
   here so a later section pulled from the template cannot reintroduce them. */
.hero-thumb3-1 .thumb:before,
.price-card .price-card-title-wrap:after,
.hero-6 .hero-bg-shape6-5:after {
  background: linear-gradient(131.88deg, var(--brand-purple-bright) 0%, var(--theme-color) 100%);
}
.process-img-box2:before { background: var(--theme-color); }
.hero-6:before,
.why-wrap6:after,
.why-wrap10 .why-card10:nth-child(1):after { background: var(--theme-color2); }
.img-box3 .img1:after { border-color: var(--theme-color2); }
.cta-wrap4 .cta-link { color: var(--theme-color2); }

/* ==========================================================================
   Preloader
   The mark carries the load state: a pale ghost of the monogram with the brand
   ink wiping across it, which is the theme's own .loader idea moved off text
   and onto the logo. The ink fills left to right, then empties the same way,
   so the loop has no jump at the seam.
   ========================================================================== */

.preloader .mp-monogram {
  display: block;
  width: auto;
  height: 132px;
  margin: 0 auto;
}

.mp-monogram__ghost { fill: var(--brand-purple-pale); }

.mp-monogram__ink {
  fill: var(--theme-color);
  clip-path: inset(0 100% 0 0);
  animation: mp-monogram-fill 2.2s ease-in-out infinite;
}

@keyframes mp-monogram-fill {
  0%   { clip-path: inset(0 100% 0 0); }
  50%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* Readers who ask for less motion get the finished mark, not a frozen half-fill. */
@media (prefers-reduced-motion: reduce) {
  .mp-monogram__ink {
    clip-path: none;
    animation: none;
  }
}

/* ==========================================================================
   Header fit
   Escul's demo nav runs seven short labels; this site's are longer
   ("Why Choose Us", "News & Events"), and logo + nav + action group overflowed
   the bar onto three rows at every desktop width. The header — and only the
   header — takes the wider container the theme already defines, and the nav
   comes down a point with tighter item spacing. Measured to fit with room to
   spare at 1200, 1366 and 1920.
   ========================================================================== */

@media (min-width: 1200px) {
  .sticky-wrapper > .container {
    max-width: 1296px;
  }
  .main-menu > ul > li {
    margin: 0 7px;
  }
  .main-menu > ul > li > a {
    font-size: 13px;
  }
}

/* ==========================================================================
   Logo
   The client's artwork, cut to transparency and composed into a horizontal
   lockup (see partials/logo.blade.php). Size lives here rather than at each
   call site so header, drawer, side panel and footer stay in step.
   ========================================================================== */

/* The theme sets `img:not([draggable]) { height: auto }` at (0,1,1), so the
   selector needs the element to win — a bare .mp-logo loses by one. */
img.mp-logo {
  display: block;
  width: auto;
  height: 46px;
}

/* The footer sits on a dark field with room around it, so the mark carries a
   little more presence there than in the header bar. */
.footer-wrapper img.mp-logo { height: 54px; }

/* The theme scopes its own light body colour inside the footer
   (`.footer-default { --body-color: #D3DBE2 }`), which is a cool grey and the
   one place the old palette still showed through. Same lightness, brand hue —
   10.7:1 on the footer ground. */
.footer-default { --body-color: #D8CFE2; }

/* Slider dots carry a literal `rgba(211, 219, 226, .5)` hairline — the last
   cool grey the theme paints on these pages. */
.swiper-pagination-bullets .swiper-pagination-bullet {
  border-color: rgba(223, 216, 230, 0.5);
}

/* Team photographs. The theme leaves these at object-fit: fill, which is fine
   while the artwork happens to match the card's 0.814 aspect — but a future
   headshot at any other ratio would stretch rather than crop. */
.team-card .box-img img {
  object-fit: cover;
  object-position: center top;
}

/* Campus cards carry a country photograph where the theme puts a glyph. The
   circle keeps its size, shape and purple ground; only the fill changes — so
   the photo opts out of the brightness(99) that turns a glyph white, and
   covers the circle instead of sitting inside it. The hover pair is listed
   too, because the theme drops the filter again on hover. */
.feature-card .box-icon.has-photo {
  padding: 0;
  overflow: hidden;
}
.feature-card .box-icon.has-photo img,
.feature-card:hover .box-icon.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-filter: none;
          filter: none;
}

/* Hero headline column. The template's 74px suits its own three short lines
   ("Empowering / Students for a / Brighter Future"); Manchester's copy is
   longer and ran straight under the photo. The S-curve mask is narrowest
   exactly at the headline's band — measured, the clear column is ~40vw, and
   about 585px once the container stops growing past 1500px. So the title is
   capped to that column and sized to fit inside it. Only from 992px up: below
   that the photo drops under the copy and the mask is removed, so the theme's
   own ladder is right. */
@media (min-width: 992px) {
  .hero-style1 .hero-title {
    max-width: min(585px, 40vw);
    font-size: clamp(34px, 3.7vw, 56px);
  }
}