/* Accessibility widget + cookie-consent styles, standalone.
   Loaded only by the sub-site pages (playup / kidsup-edu / kidsup-courses),
   which have their own inline CSS and do NOT load style.css.
   Colors are hard-coded on purpose: those pages define --purple/--gold/--navy
   with different values, so referencing them here would corrupt their design. */

/* ACCESSIBILITY WIDGET */
.a11y-fab{position:fixed;bottom:20px;right:20px;z-index:9999;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#E91E8C,#6A0DAD);color:white;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(106,13,173,0.35);transition:transform 0.2s}
.a11y-fab:hover{transform:scale(1.08)}
.a11y-fab:focus{outline:3px solid #FFD700;outline-offset:3px}
.a11y-panel{position:fixed;bottom:88px;right:20px;z-index:9999;width:min(92vw,340px);max-height:80vh;overflow-y:auto;background:white;border-radius:18px;padding:1rem;box-shadow:0 12px 40px rgba(13,33,55,0.25);border:2px solid #E91E8C;font-family:'Heebo',sans-serif;color:#0D2137}
.a11y-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.8rem;padding-bottom:0.6rem;border-bottom:1px solid #eee}
.a11y-panel-head h2{font-family:'Fredoka One',cursive;font-size:1.1rem;color:#6A0DAD;margin:0}
.a11y-close{background:transparent;border:none;cursor:pointer;color:#0D2137;padding:4px;border-radius:6px}
.a11y-close:hover{background:#f3f3f3}
.a11y-font-box{border:1px solid #eee;border-radius:12px;padding:0.7rem;margin-bottom:0.7rem}
.a11y-font-row{display:flex;justify-content:space-between;align-items:center;font-size:0.9rem;margin-bottom:0.5rem;font-weight:600}
.a11y-font-row span{display:flex;align-items:center;gap:0.3rem}
.a11y-font-row strong{color:#E91E8C}
.a11y-font-ctrls{display:flex;gap:0.4rem;justify-content:space-between}
.a11y-font-ctrls button{flex:1;padding:0.5rem;border-radius:8px;border:1.5px solid #E91E8C;background:white;color:#E91E8C;font-family:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-size:0.8rem}
.a11y-font-ctrls button:hover{background:#E91E8C;color:white}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem}
.a11y-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;padding:0.55rem 0.3rem;border-radius:10px;border:1.5px solid #e5e5e5;background:white;color:#0D2137;font-family:inherit;font-size:0.72rem;font-weight:600;cursor:pointer;transition:all 0.15s;text-align:center;line-height:1.15;min-height:64px}
.a11y-toggle:hover{border-color:#E91E8C}
.a11y-toggle.active{background:linear-gradient(135deg,#E91E8C,#6A0DAD);border-color:#6A0DAD;color:white}
.a11y-reset{margin-top:0.7rem;width:100%;padding:0.6rem;border-radius:10px;border:none;background:linear-gradient(135deg,#FF6B35,#E91E8C);color:white;font-family:inherit;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.4rem;font-size:0.9rem;transition:transform 0.15s}
.a11y-reset:hover{transform:translateY(-1px)}
.a11y-note{margin-top:0.7rem;font-size:0.72rem;line-height:1.5;color:#666;text-align:center}

/* A11Y MODES */
:root{--a11y-font-scale:1}
html.a11y-contrast-high body,html.a11y-contrast-high body *{background:#000 !important;color:#fff !important;border-color:#fff !important}
html.a11y-contrast-high a,html.a11y-contrast-high a *{color:#FFD700 !important}
html.a11y-contrast-inverted{filter:invert(1) hue-rotate(180deg)}
html.a11y-contrast-inverted img,html.a11y-contrast-inverted video{filter:invert(1) hue-rotate(180deg)}
html.a11y-grayscale{filter:grayscale(1)}
html.a11y-highlight-links a{background:#FFD700 !important;color:#000 !important;padding:1px 4px;border-radius:3px}
html.a11y-underline-links a{text-decoration:underline !important}
html.a11y-readable-font,html.a11y-readable-font *{font-family:Arial,Helvetica,sans-serif !important}
html.a11y-big-cursor,html.a11y-big-cursor *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='black' stroke='white' stroke-width='1.5'><path d='M3 2l7 18 2-8 8-2z'/></svg>") 0 0,auto !important}
html.a11y-stop-animations *,html.a11y-stop-animations *::before,html.a11y-stop-animations *::after{animation:none !important;transition:none !important}
body{font-size:calc(1rem * var(--a11y-font-scale,1))}

@media(max-width:768px){
  .a11y-fab{width:48px;height:48px;bottom:14px;right:14px}
  .a11y-panel{bottom:72px;right:10px;left:10px;width:auto;max-width:none}
}