/* CLEAR Projects home page, styled on clearuk.org. Loaded after chrome.css (fonts, accessibility panel, focus styles). */
:root{
  --ck-purple:#3d2b96;--ck-purple-d:#2e2073;--ck-pink:#c03d73;--ck-teal:#4294af;--ck-mint:#73dcb2;--ck-yellow:#efbb57;--ck-orange:#ef8836;
  --ck-lav:#ebe9f9;--ck-mintbg:#ecfdf5;--ck-ink:#1f2433;--ck-body:#3b4254;--ck-slate:#566583;--ck-grey:#6b7285;
}
html[data-contrast="high"]{--ck-body:#000;--ck-ink:#000;--ck-slate:#000;--ck-lav:#fff;--ck-mintbg:#fff}
body.ck{background:#fff;color:var(--ck-body);font-family:var(--font)}
.ck h1,.ck h2,.ck h3{color:var(--ck-ink);letter-spacing:-.01em}
.ck-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* helpline bar */
.ck-help{background:#347d97;color:#fff;font-weight:500;font-size:1rem}
.ck-help .ck-wrap{padding-top:12px;padding-bottom:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ck-help a{color:#fff;text-decoration:none;font-weight:600}
.ck-help a:hover{text-decoration:underline}

/* header */
.ck-head{background:#fff;border-bottom:1px solid #eceaf3;position:sticky;top:0;z-index:30}
.ck-head .ck-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:96px}
.ck-logo img{display:block;height:58px;width:auto}
.ck-headbtns{display:flex;gap:12px;align-items:center}
.ck-round{width:56px;height:56px;border-radius:50%;border:0;background:var(--ck-purple);color:#fff;display:grid;place-items:center;cursor:pointer;text-decoration:none}
.ck-round:hover{background:var(--ck-purple-d)}
.ck-round svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round}
.ck-menulabel{font-weight:600;color:var(--ck-purple);margin-right:4px}

/* menu (full screen, like clearuk.org) */
.ck-menu{position:fixed;inset:0;z-index:70;background:#fff;overflow:auto}
.ck-menu .top{display:flex;justify-content:flex-end;border-bottom:1px solid #eceaf3;padding:18px 24px}
.ck-close{width:52px;height:52px;border:0;background:none;cursor:pointer;color:var(--ck-slate);display:grid;place-items:center;border-radius:12px}
.ck-close svg{width:30px;height:30px;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ck-menu .body{max-width:720px;margin:0 auto;padding:28px 24px 60px}
.ck-menu .lbl{font-size:.9rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ck-grey);margin:18px 0 10px}
.ck-menu ul{list-style:none;margin:0;padding:0}
.ck-menu .main a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-size:1.6rem;font-weight:700;color:var(--ck-slate);text-decoration:none;border-radius:12px}
.ck-menu .main a:hover{background:var(--ck-lav);color:var(--ck-purple)}
.ck-menu .main a svg{width:26px;height:26px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ck-menu .main li:nth-child(1) svg{stroke:var(--ck-pink)}
.ck-menu .main li:nth-child(2) svg{stroke:var(--ck-teal)}
.ck-menu .main li:nth-child(3) svg{stroke:var(--ck-orange)}
.ck-menu .main li:nth-child(4) svg{stroke:#6a5cf0}
.ck-menu .res{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:0 16px}
.ck-menu .res a{font-size:1.35rem;font-weight:500;color:var(--ck-slate);text-decoration:none;padding:6px 0}
.ck-menu .res a:hover{color:var(--ck-purple);text-decoration:underline}
.ck-sq{display:inline-block;width:12px;height:12px;background:var(--ck-pink)}

/* hero */
.ck-hero{background:var(--ck-purple);color:#fff;overflow:hidden}
.ck-hero .ck-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:80px}
.ck-hero .eyebrow{font-size:.95rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-mint);margin:0 0 14px}
.ck-hero h1{color:#fff;font-size:clamp(2.3rem,5.2vw,3.8rem);line-height:1.08;font-weight:700;margin:0 0 20px}
.ck-hero p{font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.65;color:#fff;margin:0 0 32px;max-width:32em}
.ck-hero .btns{display:flex;flex-wrap:wrap;gap:14px}
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 1.15rem var(--font);text-decoration:none;border-radius:8px;padding:16px 30px;min-height:56px;border:2px solid transparent;cursor:pointer;transition:background .15s,transform .15s}
.ck-btn:hover{transform:translateY(-1px)}
.ck-btn.pink{background:var(--ck-pink);color:#fff}
.ck-btn.pink:hover{background:#a8305f}
.ck-btn.ghost{background:transparent;color:#fff;border-color:#ffffffb3}
.ck-btn.ghost:hover{background:#ffffff1a}
.ck-btn.purple{background:var(--ck-purple);color:#fff}
.ck-btn.purple:hover{background:var(--ck-purple-d)}
.ck-bubbles{width:100%;max-width:380px;justify-self:center}
.ck-bubbles svg{width:100%;height:auto;display:block}

/* lavender card section */
.ck-lav{background:var(--ck-lav);padding:72px 0}
.ck-sechead{text-align:center;max-width:44em;margin:0 auto 40px}
.ck-sechead h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:0 0 12px}
.ck-sechead p{font-size:1.15rem;line-height:1.7;margin:0}
.ck-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.ck-card{background:#fff;border-radius:36px;padding:44px 36px 40px;text-align:center;box-shadow:0 2px 10px #3d2b960f;display:flex;flex-direction:column;align-items:center}
.ck-circle{width:136px;height:136px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px}
.ck-circle svg{width:60px;height:60px;fill:#fff}
.ck-card h3{font-size:1.9rem;font-weight:600;margin:0 0 14px}
.ck-card p{font-size:1.15rem;line-height:1.75;margin:0 0 26px;flex:1}
.ck-card.small{padding:36px 30px}
.ck-card.small .ck-circle{width:104px;height:104px}.ck-card.small .ck-circle svg{width:46px;height:46px}
.ck-card.small h3{font-size:1.5rem}
.c-pink .ck-circle{background:var(--ck-pink)}.c-pink h3{color:var(--ck-pink)}
.c-teal .ck-circle{background:var(--ck-teal)}.c-teal h3{color:var(--ck-teal)}
.c-orange .ck-circle{background:var(--ck-orange)}.c-orange h3{color:#c8641a}
.c-purple .ck-circle{background:var(--ck-purple)}.c-purple h3{color:var(--ck-purple)}
.c-green .ck-circle{background:#1f9d78}.c-green h3{color:#0a7a5c}
.ck-textlink{font-weight:600;font-size:1.1rem;color:var(--ck-purple);text-underline-offset:4px}

/* mint section: topics people can talk about */
.ck-mint{padding:72px 0}
.ck-mintbox{background:var(--ck-mintbg);border-radius:36px;padding:48px 40px}
.ck-mintbox>h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:0 0 14px}
.ck-mintbox>p{font-size:1.15rem;line-height:1.75;margin:0 0 32px;max-width:44em}
.ck-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 2px 10px #0a7a5c12}
.ck-topic{padding:34px 28px;text-align:center;border-bottom:1px solid #eef3f1;border-right:1px solid #eef3f1;text-decoration:none;color:var(--ck-body);display:flex;flex-direction:column;align-items:center;transition:background .15s}
.ck-topic:hover{background:#f7fffb}
.ck-topic .t{font-size:.95rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin:0 0 18px}
.ck-speech{width:104px;height:104px;margin:0 0 18px}
.ck-topic p{margin:0 0 12px;font-size:1.05rem;line-height:1.6}
.ck-topic .go{margin-top:auto;font-weight:600;color:var(--ck-purple);text-decoration:underline;text-underline-offset:4px}
.ck-topic:last-child{border-right:0}

/* footer */
.ck-foot{background:var(--ck-purple);color:#fff}
.ck-foot .ck-wrap{padding-top:48px;padding-bottom:40px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start}
.ck-foot img{height:44px;width:auto;background:#fff;border-radius:10px;padding:8px 12px}
.ck-foot p{margin:14px 0 0;color:#e4e0f7;line-height:1.7}
.ck-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ck-foot a{color:#fff;text-underline-offset:4px}
.ck-foot .base{border-top:1px solid #ffffff2e;grid-column:1/-1;padding-top:20px;font-size:.92rem;color:#d6d0f3}

/* floating buttons */
.ck-top{position:fixed;right:24px;bottom:110px;z-index:50;display:inline-flex;align-items:center;gap:10px;background:var(--ck-purple);color:#fff;border:0;border-radius:8px;padding:14px 22px;font:500 1.1rem var(--font);cursor:pointer;box-shadow:0 8px 24px #3d2b9640}
.ck-top svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ck-a11yfab{position:fixed;right:24px;bottom:24px;z-index:50;width:68px;height:68px;border-radius:50%;background:#fff;border:6px solid var(--ck-purple);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px #3d2b9633}
.ck-a11yfab svg{width:40px;height:40px;fill:var(--ck-purple)}
.a11y{top:auto;bottom:104px}

@media (max-width:900px){
  .ck-hero .ck-wrap{grid-template-columns:minmax(0,1fr);padding-top:48px;padding-bottom:56px;gap:36px}
  .ck-bubbles{max-width:280px;order:-1}
  .ck-cards{grid-template-columns:1fr}
  .ck-topics{grid-template-columns:1fr}
  .ck-topic{border-right:0}
  .ck-foot .ck-wrap{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ck-wrap{padding:0 20px}
  .ck-head .ck-wrap{min-height:84px}
  .ck-logo img{height:46px}
  .ck-menulabel{display:none}
  .ck-lav,.ck-mint{padding:48px 0}
  .ck-mintbox{padding:36px 22px;border-radius:28px}
  .ck-card{padding:36px 24px;border-radius:30px}
  .ck-card h3{font-size:1.65rem}
  .ck-btn{width:100%}
  .ck-top{right:16px;bottom:100px;padding:12px 18px}
  .ck-a11yfab{right:16px;bottom:16px;width:62px;height:62px}
}
@media print{.ck-help,.ck-top,.ck-a11yfab,.ck-headbtns{display:none!important}}

/* resources list: pink squares between items, a plain list on phones */
.ck-menu .res li{display:flex;align-items:center;gap:18px}
.ck-menu .res li+li::before{content:"";width:12px;height:12px;background:var(--ck-pink);flex:none}
@media (max-width:600px){.ck-menu .res{flex-direction:column;align-items:flex-start;gap:2px}.ck-menu .res li+li::before{display:none}}
/* topics: centre the last row */
.ck-topics{display:flex;flex-wrap:wrap;justify-content:center}
.ck-topic{flex:0 0 33.333%}
@media (max-width:900px){.ck-topic{flex-basis:100%}.ck-bubbles{max-width:180px}}

/* outlined button, for secondary actions */
.ck-btn.line{background:#fff;color:var(--ck-purple);border-color:var(--ck-purple)}
.ck-btn.line:hover{background:var(--ck-lav)}

/* ---------------------------------------------------------------- the main tabs (laptops), as on clearuk.org
   Logo on top, then a row of tabs: Home, each project (with a dropdown of its pages) and About CLEAR. Each tab has a small coloured
   marker: a triangle when it has a dropdown, a square when it is a plain link. On phones and tablets the Menu button does this job. */
.ck-nav{display:none}
.mk{display:inline-block;vertical-align:middle;flex:none}
.mk.sq{width:9px;height:9px;background:var(--mk)}
.mk.tri{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--mk);transition:transform .15s}
@media (min-width:1024px){
  .ck-head{position:relative}
  .ck-head .ck-headrow{min-height:84px}
  .ck-headbtns{display:none}
  .ck-nav{display:block;border-top:1px solid #eceaf3}
  .ck-tabs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 34px;align-items:stretch}
  .ck-tab{position:relative;display:flex;align-items:center;gap:6px}
  .ck-tablink{display:flex;align-items:center;gap:10px;padding:14px 0 13px;font:600 1.1rem var(--font);color:#4b4559;text-decoration:none;border-bottom:4px solid transparent;margin-bottom:-1px}
  .ck-tablink:hover{color:var(--ck-purple)}
  .ck-tab.on>.ck-tablink,.ck-tablink[aria-current]{color:var(--ck-purple);border-bottom-color:var(--mk,var(--ck-purple))}
  .ck-tab:first-child.on>.ck-tablink{border-bottom-color:var(--ck-purple)}
  .ck-tablink .ext{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;opacity:.7}
  .ck-tabtog{display:grid;place-items:center;width:28px;height:28px;margin-left:-2px;border:0;background:none;border-radius:8px;cursor:pointer;padding:0}
  .ck-tabtog:hover,.ck-tabtog[aria-expanded="true"]{background:var(--ck-lav)}
  .ck-tabtog[aria-expanded="true"] .mk.tri,.ck-tab.has-sub:hover .mk.tri{transform:rotate(180deg)}
  .ck-tabtog:focus-visible,.ck-tablink:focus-visible{outline:3px solid var(--ck-purple);outline-offset:2px}
  /* the dropdown: opens on hover, keyboard focus or a click on the triangle */
  .ck-sub{position:absolute;left:-14px;top:100%;z-index:40;min-width:250px;margin:0;padding:12px 0 0;list-style:none}
  .ck-sub::before{content:"";position:absolute;inset:12px 0 0;background:#fff;border-radius:16px;box-shadow:0 14px 40px #3d2b9633;border-top:4px solid var(--mk);z-index:-1}
  .ck-sub{display:none}
  .ck-tab.has-sub:hover>.ck-sub,.ck-tab.has-sub:focus-within>.ck-sub,.ck-sub.open{display:block}
  .ck-sub li:first-child{padding-top:8px}.ck-sub li:last-child{padding-bottom:8px}
  .ck-sub a{display:block;padding:9px 18px;font:500 1rem var(--font);color:var(--ck-ink);text-decoration:none;white-space:nowrap}
  .ck-sub a:hover,.ck-sub a:focus-visible{background:var(--ck-lav);color:var(--ck-purple);outline:none}
}
/* the phone menu: the same items, each project with its pages underneath */
.ck-menu .main .grp>a{display:flex}
.ck-menu .main .grp{border-left:5px solid var(--mk);padding-left:12px;margin:6px 0}
.ck-menu .main .grp.on>a{color:var(--ck-purple)}
.ck-headtests{display:none}
@media (min-width:1024px){
  .ck-headtests{display:flex;gap:10px;margin-left:auto}
  .ck-testlink{display:inline-flex;align-items:center;gap:8px;padding:8px 10px 8px 16px;border-radius:999px;border:1px solid #e3dff0;color:var(--ck-slate);font-weight:600;text-decoration:none}
  .ck-testlink:hover{border-color:#f0c860;background:#fffaeb}
  .ck-testlink .ck-testtag{margin:0;font-size:.68rem;padding:2px 8px}
  .sl-app .ck-headtests,.cv-app .ck-headtests{display:none}   /* the slim one-row headers have no room */
}
.ck-testtag{display:inline-block;vertical-align:middle;margin-left:10px;padding:3px 10px;border-radius:999px;background:#fff4d6;color:#7a4b00;border:1px solid #f0c860;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ck-menu .main .sub{list-style:none;margin:0 0 6px;padding:0}
.ck-menu .main .sub a{display:block;padding:7px 0;font-size:1.02rem;font-weight:500;color:var(--ck-body);text-decoration:none}
.ck-menu .main .sub a:hover{color:var(--ck-purple);text-decoration:underline}
/* the full-window game pages and CLEAR Voice (sl-app, cv-app): a slimmer tab row, so the page keeps more of a laptop screen */
@media (min-width:1024px){
  .sl-app .ck-head .ck-headrow,.cv-app .ck-head .ck-headrow{min-height:56px}
  .sl-app .ck-tablink,.cv-app .ck-tablink{padding:8px 0 7px;font-size:.98rem}
  .sl-app .ck-tabs,.cv-app .ck-tabs{gap:4px 26px}
  /* the game pages keep their accessibility button in the header; only the Menu button goes */
  .sl-app .ck-headbtns{display:flex;margin-left:auto}
  .sl-app .ck-headbtns .ck-menulabel,.sl-app #ckMenuBtn{display:none}
}
/* on wide screens the game pages put the tabs on the logo's row, so the game keeps as much height as possible */
@media (min-width:1280px){
  .sl-app .ck-head,.cv-app .ck-head{display:flex;align-items:center;gap:24px;padding:0 max(24px,calc((100% - 1152px) / 2))}
  .sl-app .ck-head .ck-wrap,.cv-app .ck-head .ck-wrap{max-width:none;margin:0;padding:0;width:auto}
  .sl-app .ck-head .ck-headrow,.cv-app .ck-head .ck-headrow{display:contents}
  .sl-app .ck-logo,.cv-app .ck-logo{order:1;flex:none}
  .sl-app .ck-nav,.cv-app .ck-nav{order:2;flex:1;min-width:0;border-top:0}
  .sl-app .ck-headbtns{order:3;flex:none}
  .sl-app .ck-tabs,.cv-app .ck-tabs{justify-content:flex-end;flex-wrap:nowrap;gap:0 24px}
  .sl-app .ck-tablink,.cv-app .ck-tablink{padding:17px 0 13px;white-space:nowrap}
}
/* six tabs on one row only just fit a 1280-1440px laptop: a little closer together and smaller there */
@media (min-width:1280px) and (max-width:1439px){
  .sl-app .ck-tabs,.cv-app .ck-tabs{gap:0 15px}
  .sl-app .ck-tablink,.cv-app .ck-tablink{font-size:.92rem;gap:7px}
}

/* Very narrow phones: long words in the hero heading ("neighbourhoods") must not push the hero wider than the screen */
@media (max-width:380px){.ck-hero h1{font-size:2rem;overflow-wrap:break-word}}

/* The version stamp (filled in by tools/build_site.py), small in the footer's last line, to check a push has gone live */
.ck-foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}
.ck-foot .ver{font-size:.78rem;opacity:.75;font-variant-numeric:tabular-nums;white-space:nowrap}

/* hero trust line (Voice and Awareness Card): short reassurances with mint dots */
.ck-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0!important;font-size:1rem!important;color:#dcd6f7!important}
.ck-trust span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ck-mint);margin-right:8px}
/* the accessibility panel scrolls if it is taller than the screen (it now includes reading voice and speed) */
.a11y{max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);overflow-y:auto;overscroll-behavior:contain}