/*
Theme Name: CSINW Accessible
Theme URI: https://csinw.ca/
Description: Bilingual, accessible child theme for Community Services for Independence North West.
Author: CSINW
Template: twentytwentyfive
Version: 1.0.0
Text Domain: csinw-accessible
*/

:root { --cs-navy:#152a52; --cs-blue:#164b78; --cs-red:#b72635; --cs-ink:#202936; --cs-muted:#536170; --cs-pale:#eef4f7; --cs-line:#d6e0e7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { color:var(--cs-ink); background:#fff; font-family:Arial,Helvetica,sans-serif; line-height:1.65; }
a { color:#07578b; text-underline-offset:.15em; }
a:hover { color:#a81d2c; }
:focus-visible { outline:3px solid #db583d!important; outline-offset:3px!important; }
.screen-reader-text:not(:focus):not(:active) { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.cs-site-header { background:#fff; border-bottom:1px solid var(--cs-line); position:relative; z-index:20; }
.cs-header-inner { max-width:1180px; margin:auto; padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.cs-brand { display:flex; align-items:center; gap:1rem; color:var(--cs-navy); text-decoration:none; min-width:0; }
.cs-brand img { width:145px; height:auto; display:block; }
.cs-brand-name { display:block; font-size:clamp(1rem,1.35vw,1.25rem); font-weight:800; line-height:1.25; max-width:430px; }
.cs-brand-tag { display:block; color:var(--cs-muted); font-size:.82rem; line-height:1.35; margin-top:.2rem; }
.cs-header-actions { display:flex; align-items:center; gap:1rem; }
.cs-language { display:flex; gap:.45rem; align-items:center; white-space:nowrap; font-size:.9rem; font-weight:700; }
.cs-language a { padding:.2rem .4rem; border-radius:3px; }
.cs-language .current { color:var(--cs-navy); text-decoration:none; border-bottom:3px solid var(--cs-red); }
.cs-menu-toggle { display:none; background:var(--cs-navy); color:#fff; border:0; padding:.65rem 1rem; border-radius:4px; font:inherit; font-weight:700; cursor:pointer; }
.cs-primary-nav { background:var(--cs-navy); }
.cs-primary-nav > .cs-nav-inner { max-width:1180px; margin:auto; padding:0 1.25rem; }
.cs-primary-nav ul { list-style:none; padding:0; margin:0; }
.cs-primary-nav > .cs-nav-inner > ul { display:flex; align-items:stretch; flex-wrap:wrap; }
.cs-primary-nav li { position:relative; }
.cs-primary-nav a { display:block; padding:.9rem .85rem; color:#fff; text-decoration:none; font-size:.93rem; font-weight:700; line-height:1.4; }
.cs-primary-nav a:hover,.cs-primary-nav a:focus-visible,.cs-primary-nav .current-menu-item>a { background:#2d5b84; color:#fff; }
.cs-primary-nav .sub-menu { display:none; position:absolute; top:100%; left:0; min-width:250px; max-width:300px; background:#1c426b; box-shadow:0 8px 20px #10223933; z-index:30; }
.cs-primary-nav li:hover>.sub-menu,.cs-primary-nav li:focus-within>.sub-menu { display:block; }
.cs-primary-nav .sub-menu .sub-menu { top:0; left:100%; }
.cs-primary-nav .sub-menu a { padding:.65rem .9rem; font-size:.88rem; }
.cs-hero { background:linear-gradient(115deg,#e8f1f5 0%,#f9fbfc 65%); border-bottom:1px solid var(--cs-line); }
.cs-hero-inner { max-width:1180px; margin:auto; padding:3.5rem 1.25rem; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:2rem; align-items:center; }
.cs-eyebrow { color:var(--cs-red); text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; font-weight:800; margin:0 0 .75rem; }
.cs-hero h1 { color:var(--cs-navy); font-size:clamp(2.2rem,4vw,3.8rem); line-height:1.1; letter-spacing:-.035em; margin:0 0 1rem; }
.cs-hero p { font-size:1.15rem; max-width:650px; margin:0 0 1.4rem; }
.cs-button { display:inline-block; background:var(--cs-red); color:#fff!important; padding:.75rem 1.2rem; border-radius:4px; font-weight:700; text-decoration:none; }
.cs-button:hover { background:#8e1b29; }
.cs-hero-art { background:#fff; border-radius:12px; box-shadow:0 12px 30px #15335118; padding:1.5rem; display:flex; align-items:center; justify-content:center; min-height:220px; }
.cs-hero-art img { display:block; width:100%; max-width:380px; height:auto; }
.cs-main { max-width:1050px; margin:auto; padding:2.5rem 1.25rem 4rem; }
.cs-main h1.wp-block-post-title { color:var(--cs-navy); font-size:clamp(2rem,3vw,3rem); line-height:1.2; margin:0 0 2rem; }
.cs-main .wp-block-post-content { max-width:100%; }
.cs-main .wp-block-post-content h2 { color:var(--cs-navy); font-size:clamp(1.5rem,2vw,2rem); margin-top:2rem; }
.cs-main .wp-block-post-content h3 { color:var(--cs-navy); }
.cs-main .wp-block-post-content p,.cs-main .wp-block-post-content li { font-size:1.06rem; line-height:1.7; }
.cs-main .wp-block-post-content img { max-width:100%; height:auto; }
.cs-main .wp-block-post-content a { text-decoration:underline; }
.home .cs-main .wp-block-post-content > .wp-block-image:first-child { display:none; }
.home .cs-main .wp-block-post-content > h2:first-of-type { margin-top:0; }
.cs-site-footer { background:var(--cs-navy); color:#fff; margin-top:2rem; }
.cs-footer-inner { max-width:1180px; margin:auto; padding:3rem 1.25rem 2rem; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.5rem; }
.cs-site-footer h2 { color:#fff; font-size:1.2rem; margin:0 0 .8rem; }
.cs-site-footer p { margin:.3rem 0; }
.cs-site-footer a { color:#fff; text-underline-offset:.2em; }
.cs-site-footer ul { list-style:none; padding:0; margin:0; }
.cs-site-footer li { margin:.35rem 0; }
.cs-footer-bottom { border-top:1px solid #ffffff44; padding:1rem 1.25rem; max-width:1180px; margin:auto; font-size:.85rem; }
@media(max-width:950px) { .cs-header-inner { flex-wrap:wrap; } .cs-menu-toggle { display:block; } .cs-primary-nav { display:none; } .cs-primary-nav.is-open { display:block; } .cs-primary-nav > .cs-nav-inner > ul { display:block; } .cs-primary-nav .sub-menu { display:block; position:static; max-width:none; min-width:0; box-shadow:none; margin-left:1rem; border-left:2px solid #ffffff77; } .cs-primary-nav .sub-menu .sub-menu { position:static; } .cs-primary-nav a { padding:.6rem .8rem; } }
@media(max-width:700px) { .cs-brand img { width:100px; } .cs-brand-tag { display:none; } .cs-header-actions { margin-left:auto; } .cs-hero-inner { grid-template-columns:1fr; padding:2.5rem 1.25rem; } .cs-hero-art { min-height:0; } .cs-footer-inner { grid-template-columns:1fr; gap:1.5rem; } .cs-main { padding-top:2rem; } }
#real-accessability:not(.open) > :not(#real-accessability-btn) { display:none!important; }
#real-accessability { width:240px; right:-240px; max-width:calc(100vw - 44px); }
#real-accessability [role="button"]:focus-visible,#real-accessability a:focus-visible { outline:3px solid #f26143!important; outline-offset:2px!important; }
#real-accessability button#real-accessability-btn { background:#063d8d; color:#fff; border:0; position:absolute; top:-1px; left:-42px; width:42px; height:42px; line-height:42px; text-align:center; cursor:pointer; padding:0; }
#real-accessability button#real-accessability-btn i { font-family:realaccessability; font-size:26px; font-style:normal; speak:none; }
#real-accessability button#real-accessability-btn i:before { content:"\e907"; }
#real-accessability button:focus-visible { outline:3px solid #f26143!important; outline-offset:2px!important; }
#real-accessability-player { padding:12px 8px; }
#real-accessability-player .cs-reader-title { display:block; margin-bottom:6px; }
#real-accessability-player button:not(#real-accessability-btn) { background:#164b78; color:#fff; border:0; border-radius:3px; padding:7px 9px; margin:3px 2px; font:inherit; line-height:1.25; cursor:pointer; }
#real-accessability-player button:disabled { background:#d5dbe0; color:#4b5563; cursor:not-allowed; }
#real-accessability-player #cs-reader-status:not(:empty) { display:block; padding:4px 7px; font-size:.85rem; line-height:1.35; }
#real-accessability-player .cs-reader-help { display:block; margin:6px 7px 0; color:#07578b; font-size:.85rem; line-height:1.35; text-decoration:underline; }
#real-accessability-player .cs-hosted-reader-label { font-size:.85rem; line-height:1.3; margin:10px 5px 5px; }
#real-accessability-player audio { display:block; width:100%; height:42px; }