/* ==========================================================================
   Iqra Learning School: WCAG 2.1 AA remediation (Rankwyre).

   Loaded last, after the Webflow stylesheet, so these rules win without
   needing !important except where Webflow's own selectors are more specific.

   Every colour was solved against the measured background, holding hue and
   saturation so the brand survives. Nothing here changes layout at the
   theme's own settings.
   ========================================================================== */

/* --- Visually hidden, still read aloud ---------------------------------- */
.rw-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --- 2.4.1 Bypass Blocks ------------------------------------------------
   42 pages repeat the same navbar. Without this a keyboard user tabs the
   whole menu on every page before reaching content. */
.rw-skip {
  position: absolute; left: 12px; top: -64px; z-index: 10000;
  background: #2c2f6b; color: #ffffff;
  padding: 12px 20px; border-radius: 6px;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  transition: top 160ms ease-out;
}
.rw-skip:focus,
.rw-skip:focus-visible { top: 12px; color: #ffffff; }
@media (prefers-reduced-motion: reduce) { .rw-skip { transition: none; } }

/* --- 2.4.7 Focus Visible ------------------------------------------------
   The hamburger is a <div> and the newsletter input had no focus style, so a
   keyboard user could not see where they were. One consistent ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.w-nav-button:focus-visible,
.menu-button:focus-visible {
  outline: 3px solid #2c2f6b !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}
/* On the dark navbar the ink ring disappears, so invert it there. */
.fixed-top a:focus-visible,
.fixed-top button:focus-visible,
.fixed-top [tabindex]:focus-visible,
.fixed-top .menu-button:focus-visible {
  outline-color: #ffffff !important;
}

/* --- 1.4.3 Contrast (Minimum) -------------------------------------------
   .xander-btn: #ffffff on #9197d4 measured 2.77:1 where 4.5:1 is required.
   #676fc4 holds the same hue (235deg) and saturation (44%) at 4.52:1. */
.xander-btn,
.xander-btn.outline {
  background-color: #676fc4 !important;
  color: #ffffff !important;
}

/* --- 1.4.10 Reflow ------------------------------------------------------
   The three contact cards sat 7px wider than a 320px viewport, forcing the
   whole page to scroll sideways. Let them shrink inside their padding. */
.cta-wrapper-2 { max-width: 100%; box-sizing: border-box; }
@media (max-width: 360px) {
  .cta-wrapper-2 { width: 100%; min-width: 0; }
}

/* The privacy page prints the school's email address as a link. At 359px it is
   a single unbreakable token, so it pushed the page to 379px wide at a 320px
   viewport and 757px at 200% zoom. Allowing a break inside it costs nothing at
   normal widths, because the break only happens when it would otherwise
   overflow. */
a { overflow-wrap: anywhere; }

/* --- Built by Rankwyre credit -------------------------------------------
   Measured, not assumed: .background-primary renders #ffffff and its own text
   is #262626. A first pass used a light grey here on the assumption that the
   footer band was dark, which scored 2.16:1. #595959 gives 7.0:1 on white and
   the link matches the footer's own ink at #262626. */
.rw-credit {
  display: flex; align-items: center; justify-content: center;
  gap: .55rem; flex-wrap: wrap;
  padding: 14px 16px 22px; margin: 0;
  font-size: 23px; line-height: 1.4; text-align: center;
  color: #595959;
}
.rw-credit__link {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; height: auto; padding: .5rem .35rem;
  color: #262626; font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transition: opacity 160ms ease-out;
}
.rw-credit__link:hover { opacity: .85; color: #262626; }
.rw-credit__mark { width: 149px; height: auto; display: block; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .rw-credit__link { transition: none; } }