/* Clean Hands. Layout patterns follow the GOV.UK Design System (MIT); font and brand are our own. */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;700&family=Noto+Sans+Gurmukhi:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,500,1,0&display=swap");
:root{
  --text:#0b0c0c; --secondary:#505a5f; --link:#1d70b8; --link-hover:#003078; --visited:#4c2c92;
  --focus:#ffdd00; --border:#b1b4b6; --light:#f3f2f1; --brand:#2e8b57; --brand-dark:#1f6b45;
  --button:#2a8152; --button-shadow:#123f28;
  --clean:#0b6c8a; --cook:#b14206; --chill:#1f4fd0; --apart:#b3261e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--light)}
body{font-family:"Atkinson Hyperlegible Next","Noto Sans Gurmukhi",Arial,sans-serif;color:var(--text);background:#fff;font-size:1.1875rem;line-height:1.3157;-webkit-font-smoothing:antialiased}
.ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;white-space:nowrap;direction:ltr;font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 48}

/* links and focus */
a{color:var(--link);text-decoration:underline;text-decoration-thickness:max(1px,.0625rem);text-underline-offset:.1578em}
a:hover{color:var(--link-hover);text-decoration-thickness:max(3px,.1875rem)}
a:visited{color:var(--visited)}
a:focus,a:focus-visible{outline:3px solid transparent;color:var(--text)!important;background:var(--focus);box-shadow:0 -2px var(--focus),0 4px var(--text);text-decoration:none}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:static;width:auto;height:auto;clip-path:none;display:block;padding:.6rem 1rem;text-decoration:underline}

.width{max-width:960px;margin:0 15px}
@media(min-width:40.0625em){.width{margin:0 30px}}
@media(min-width:1020px){.width{margin:0 auto}}

/* language bar */
.langbar{background:var(--light);border-bottom:1px solid var(--border);font-size:1rem}
.langbar .width{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;min-height:2.6rem}
.langbar .ms{font-size:1.25rem;color:var(--secondary)}
.langbar ul{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.langbar a{display:inline-block;padding:.3rem 0}
.langbar a[aria-current]{font-weight:700;color:var(--text);text-decoration:none}
.langbar [lang=ur]{font-family:"Noto Nastaliq Urdu";line-height:1.7}

/* header */
.header{background:var(--brand);color:#fff;border-bottom:10px solid var(--brand-dark)}
.header .width{display:flex;align-items:center;min-height:3.6rem;padding:.6rem 0}
.header .logo{display:inline-flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font-weight:700;font-size:1.5rem;line-height:1}
.header .logo:visited{color:#fff}
.header .logo:hover{text-decoration:underline;text-decoration-thickness:3px;color:#fff}
.header .logo .ms{font-size:2.1rem}

/* service navigation */
.service{border-bottom:1px solid var(--border);background:#fff}
.service ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 1.6rem;margin:0}
.service a{display:inline-block;padding:.8rem 0 .65rem;font-weight:700;text-decoration:none;border-bottom:5px solid transparent}
.service a:hover{text-decoration:underline}
.service a[aria-current]{border-bottom-color:var(--link)}
.service a:visited{color:var(--link)}

/* phase banner */
.phase{border-bottom:1px solid var(--border);padding:.6rem 0;font-size:1rem}
.phase p{display:flex;gap:.6rem;align-items:baseline;margin:0}
.tag{display:inline-block;background:#bbd4ea;color:#0c2d4a;font-weight:700;padding:.15rem .5rem;font-size:.95rem;flex:none}

/* main */
main{padding:2rem 0 3rem;display:block}
@media(min-width:40.0625em){main{padding:3rem 0 4rem}}
h1{font-size:2rem;line-height:1.09;font-weight:700;margin-bottom:1.6rem}
@media(min-width:40.0625em){h1{font-size:3rem;line-height:1.04}}
h2{font-size:1.5rem;line-height:1.1;font-weight:700;margin:2.4rem 0 1rem}
@media(min-width:40.0625em){h2{font-size:2.25rem}}
h3{font-size:1.125rem;line-height:1.15;font-weight:700;margin:1.6rem 0 .6rem}
@media(min-width:40.0625em){h3{font-size:1.5rem}}
p,ul,ol,table{margin-bottom:1.2rem}
.lead{font-size:1.3rem;line-height:1.25}
@media(min-width:40.0625em){.lead{font-size:1.5rem}}
.hint{color:var(--secondary)}
.small{font-size:1rem}
ul.bullets{padding-inline-start:1.25rem}ul.bullets li{margin-bottom:.4rem}
ol.numbered{padding-inline-start:1.5rem}ol.numbered li{margin-bottom:.6rem;padding-inline-start:.3rem}
.measure{max-width:40em}

/* button */
.button{display:inline-flex;align-items:center;gap:.5rem;background:var(--button);color:#fff!important;font-weight:700;font-size:1.1875rem;line-height:1.2;padding:.5rem .8rem .45rem;border:2px solid transparent;box-shadow:0 2px 0 var(--button-shadow);text-decoration:none;margin-bottom:1.6rem}
.button:hover{background:#22744a;text-decoration:none}
.button:focus{background:var(--focus)!important;color:var(--text)!important;box-shadow:0 2px 0 var(--text)}
.button.start{font-size:1.5rem;padding:.6rem 1rem .55rem}
.button .ms{font-size:1.6rem}
[dir=rtl] .button .ms{transform:scaleX(-1)}

/* inset text, warning */
.inset{border-inline-start:10px solid var(--border);padding:1rem 1.2rem;margin:1.6rem 0}
.inset p:last-child{margin:0}
.warning{display:flex;gap:1rem;align-items:flex-start;margin:1.6rem 0}
.warning .icon{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--text);color:#fff;display:grid;place-items:center;font-size:1.5rem;font-weight:700;line-height:1}
.warning b{display:block}
.warning p{margin:0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:1.6rem;margin-bottom:1.6rem;list-style:none}
.steps li{border-top:5px solid var(--c);padding-top:.8rem}
.steps .ms{font-size:2.6rem;color:var(--c);display:block;margin-bottom:.4rem}
.steps svg{display:block;margin-bottom:.4rem}
.steps h3{margin:.2rem 0 .3rem;color:var(--c)}
.steps p{margin:0}

/* levels */
.levels{border-top:1px solid var(--border);margin-bottom:2rem}
.level{border-bottom:1px solid var(--border);padding:1.2rem 0}
.level .caption{display:block;color:var(--secondary);font-size:1rem;margin-bottom:.3rem}
.level h3{margin:0 0 .4rem}
.level p{margin-bottom:.6rem}
.langs{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:0}
.langs a{font-weight:700}
.langs [lang=ur]{font-family:"Noto Nastaliq Urdu";line-height:1.8}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1.6rem;margin:1.2rem 0 1.6rem}
.stat{border-top:1px solid var(--border);padding-top:.8rem}
.stat b{display:block;font-size:2.4rem;line-height:1;margin-bottom:.4rem}
.stat p{margin:0}
.stat .small{color:var(--secondary);margin-top:.4rem;display:block}

/* tables */
table{width:100%;border-collapse:collapse}
th,td{text-align:start;vertical-align:top;padding:.65rem 1.2rem .65rem 0;border-bottom:1px solid var(--border)}
[dir=rtl] th,[dir=rtl] td{padding:.65rem 0 .65rem 1.2rem}
th{font-weight:700}

/* allergen list */
.allergens{list-style:none;border-top:1px solid var(--border)}
.allergens li{border-bottom:1px solid var(--border);padding:.9rem 0;padding-inline-start:3rem;position:relative}
.allergens li .n{position:absolute;inset-inline-start:0;top:.85rem;width:2rem;height:2rem;border-radius:50%;background:var(--apart);color:#fff;font-weight:700;display:grid;place-items:center;font-size:1rem;line-height:1}
.allergens b{display:block}
.allergens span.d{color:var(--secondary)}

/* two thirds layout */
.grid{display:grid;gap:0 2rem}
@media(min-width:40.0625em){.grid{grid-template-columns:2fr 1fr}}
.related{border-top:3px solid var(--brand);padding-top:.6rem;align-self:start;margin-top:.4rem}
.related h2{font-size:1.5rem;margin:0 0 .8rem}
.related ul{list-style:none;margin:0}.related li{margin-bottom:.6rem}

/* footer */
.footer{background:var(--light);border-top:1px solid var(--border);padding:2rem 0 1.6rem;font-size:1rem}
.footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-bottom:1.2rem}
.footer a,.footer a:visited{color:var(--text)}
.footer .meta{border-top:1px solid var(--border);padding-top:1.2rem}
.footer .meta p{margin:0 0 .6rem;max-width:44em}

/* scripts */
body.l-ur{font-family:"Atkinson Hyperlegible Next","Noto Nastaliq Urdu",serif;line-height:2}
body.l-ur h1,body.l-ur h2,body.l-ur h3,body.l-ur .lead{line-height:1.8}
body.l-pa{line-height:1.6}

/* secondary button + native speaker call */
.button.secondary{background:var(--light);color:var(--text)!important;box-shadow:0 2px 0 #929191}
.button.secondary:hover{background:#dbdad9}
.button.secondary .ms{color:var(--brand)}
.native{margin-top:-.4rem}