/* =============================================================================
WPS 2026 SHARED COMPONENTS (design-system component layer)
Loaded LAST on every page (homepage and inner pages) by functions.php, after
typography.css. Shared components from the web-team master live here once, so
every page gets the same behaviour. Colours, radii and type come from the site
tokens and typography.css; never set raw values for a role here.
============================================================================= */
/* ---- Countdown widget (.fab-reg) ----
≥761px: a compact card fixed in the top-right corner, below the nav: days left,
"days to go" and a Register pill. ≤760px: the full-width bottom bar (unchanged). */
@media (min-width:761px){
.fab-reg,.fab-reg.is-closed{
top:92px;right:20px;bottom:auto;left:auto;width:132px;min-width:0;
flex-direction:column;align-items:center;gap:0;
padding:14px 12px 12px;border:0;border-radius:18px;
background:var(--wps-brand,#023689);box-shadow:0 16px 36px rgba(2,54,137,.32);
transform:none!important} /* the widget script scales the card; keep it steady */
.fab-reg:hover{transform:translateY(-2px)!important;box-shadow:0 20px 42px rgba(20,18,70,.38)}
.fab-reg::before,.fab-reg::after,.fab-reg__head{display:none}
.fab-reg__body,.fab-reg__body-in{display:contents}
.fab-reg__num{margin:0;font-size:34px;font-weight:800;line-height:1;color:#fff}
.fab-reg__lbl{margin:6px 0 10px;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.62)}
.fab-reg__go{width:100%;margin:0;padding:9px 10px;font-size:13px;font-weight:800;background:#fff;color:var(--wps-brand,#023689)}
.fab-reg__go:hover{background:#E8F0FB;color:var(--wps-brand,#023689)}
html[data-theme="dark"] .fab-reg{background:var(--wps-brand,#023689);border:1px solid rgba(255,255,255,.14)}
html[dir="rtl"] .fab-reg,html[dir="rtl"] .fab-reg.is-closed{right:auto;left:20px}
}
/* ---- Chat bubble: keep clear of the phone bottom bar on every page ---- */
@media (max-width:760px){
#chatFab,.chat-fab-global{bottom:74px!important}
}
/* ---- Page title header (.page-title) ----
Plain one-colour H1 on the page background, no photo hero, no badge, no intro.
Web-team master: FAQs #1, and Contact Us "same as the FAQs page".
Type comes from typography.css (inner H1). Top padding clears the fixed nav. */
.page-title{padding:clamp(140px,13vw,190px) 0 44px;background:transparent}
.page-title__wrap{width:min(100% - 48px,var(--shell,1240px));margin-inline:auto}
.page-title h1{margin:0;color:var(--ink,#16213A)}
.page-title h1 em{font-style:normal;color:inherit} /* one colour by rule */
html[data-theme="dark"] .page-title h1{color:#fff}
@media (max-width:760px){.page-title{padding-top:118px}.page-title__wrap{width:min(100% - 32px,var(--shell,1240px))}}
.page-title + .faq-approved{padding-top:20px} /* 44 + 20 = the same 64px title gap as Contact (its #quick has 20px) */
/* ---- Accordion (.acc on ) ----
Shared by FAQs and Venue (web-team master Venue #20 "same accordion as FAQs").
Closed: hairline border. Open: brand-blue border + soft shadow, chevron flips.
Question text uses the H5 role (.t-h5 on the summary text). */
.acc{background:var(--surface,#fff);border:1px solid var(--brd,#E0E9F4);border-radius:var(--r-md,20px);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.acc:hover{border-color:var(--card-brd-hi,rgba(0,157,217,.55))}
.acc[open]{border-color:var(--card-brd-hi,rgba(0,157,217,.55));box-shadow:0 12px 32px rgba(2,54,137,.1)}
.acc>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;cursor:pointer;color:var(--ink,#16213A)}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:focus-visible{outline:3px solid var(--wps-light,#009DD9);outline-offset:3px}
.acc[open]>summary{color:var(--wps-dark,#023689)}
html[data-theme="dark"] .acc{border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .acc[open]{border-color:var(--card-brd-hi,rgba(0,157,217,.55));box-shadow:0 12px 32px rgba(0,0,0,.35)}
html[data-theme="dark"] .acc>summary,html[data-theme="dark"] .acc[open]>summary{color:#fff}
/* Parts for pages that build the accordion from scratch (FAQs keeps its own
chevron and answer classes). .acc-grid = two columns whose rows line up; opening
an item grows only its own row (Venue #20). One column on phones. */
.acc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;align-items:start}
.acc__chev{flex:none;width:9px;height:9px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.acc[open] .acc__chev{margin-top:4px;transform:rotate(225deg)}
.acc__a{padding:0 22px 20px;color:var(--w55,#5A6B85)}
.acc__a>:first-child{margin-top:0}.acc__a>:last-child{margin-bottom:0}
.acc__a p{margin:10px 0 0}.acc__a ul{margin:10px 0 0;padding-inline-start:18px}
.acc__a a{color:var(--wps-light,#009DD9);text-decoration:underline;text-underline-offset:3px}
html[data-theme="dark"] .acc__a{color:rgba(255,255,255,.7)}
@media (max-width:760px){.acc-grid{grid-template-columns:1fr}}
/* ---- Icon tile (.tile__ic, base.css) on the radius scale: 15px → 14px ---- */
.tile__ic{border-radius:14px}
/* ---- Pass cards (.pass, homepage + Registration) on the radius scale: 24px → r-lg ---- */
.pass,.registration-passes .pass{border-radius:var(--r-lg,28px)}
/* ---- Dark panels on phones (wps.css sets 26px): keep them on r-lg ---- */
@media (max-width:760px){.stats__panel,.white-panel,.awards__panel{border-radius:var(--r-lg,28px)}}
/* ---- Filter chips (.fchip) ----
One row of topic chips over a list (Speakers, Knowledge Hub). The row never wraps; chips
that don't fit go into a "More topics" dropdown. No counts in chips. Pressed = wps-dark. */
.fchip{flex:none;display:inline-flex;align-items:center;padding:9px 16px;border:1px solid var(--brd,#E0E9F4);border-radius:999px;background:var(--glass,rgba(255,255,255,.72));color:var(--w,#16213A);font:inherit;font-size:var(--t-card-size,13.5px);font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.fchip:hover{border-color:var(--card-brd-hi,rgba(0,157,217,.55))}
.fchip[aria-pressed="true"]{background:var(--wps-dark,#023689);border-color:var(--wps-dark,#023689);color:#fff}
.fchip:focus-visible{outline:3px solid var(--wps-light,#009DD9);outline-offset:2px}
.fchip[hidden]{display:none}
/* ---- Pager (.pager) ----
"← Previous · 1 2 3 … 9 · Next →" under a paged list. Current page filled navy;
Previous/Next disabled at the ends; hidden when everything fits on one page. */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:34px}
.pager[hidden]{display:none}
.pager__nums{display:flex;align-items:center;gap:6px}
.pager button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--brd,#E0E9F4);border-radius:999px;background:var(--glass,rgba(255,255,255,.72));color:var(--w,#16213A);font:inherit;font-weight:700;cursor:pointer;transition:border-color .2s,background .2s}
.pager button:hover:not([disabled]){border-color:var(--card-brd-hi,rgba(0,157,217,.55))}
.pager button[aria-current="page"]{background:var(--wps-dark,#023689);border-color:var(--wps-dark,#023689);color:#fff}
.pager button[disabled]{opacity:.4;cursor:default}
.pager__gap{min-width:20px;text-align:center;color:var(--w55,#5A6B85)}
@media (max-width:480px){.pager__step{padding:0 12px}.pager button{min-width:38px;height:38px}}
/* ---- Chip row with "More topics" ([data-chip-row], chip-row.js) ---- */
[data-chip-row]{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow:hidden;min-width:0;flex:1 1 auto}
[data-chip-row] .gal__f span{display:none} /* no counts in chips */
.chiprow__more{flex:none}
.chiprow__more[hidden]{display:none}
.chiprow__more select{padding:9px 16px;border:1px solid var(--brd,#E0E9F4);border-radius:999px;background:var(--glass-hi,rgba(255,255,255,.92));color:var(--w,#16213A)}
/* ---- Article header (reports, publications, press releases: main.art) ----
Web-team master, Knowledge Hub p.182: plain page background, the breadcrumb as a small
text line, one meta line (topic · credit · date), cover capped so the text starts on the
first screen at 1280 × 800, and a title at a readable measure. */
main.art::before{display:none}
main.art .art__crumbs{padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:8px;font-size:var(--t-card-size,13.5px);color:var(--w55,#5A6B85)}
main.art .art__crumbs a,main.art .art__crumbHome{padding:0;background:none;color:var(--w55,#5A6B85);text-decoration:none}
.art__crumbs a:hover{color:var(--w,#16213A);text-decoration:underline;text-underline-offset:3px}
.art__crumbIcon{display:none}
.art__crumbSep{width:auto;height:auto;background:none;-webkit-mask:none;mask:none}
.art__crumbSep::before{content:"›";color:var(--w40,#7C8BA3)}
.art__crumbCurrent{color:var(--w,#16213A)}
main.art .art__t{max-width:36ch;color:var(--w,#16213A)}
.art__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.art__meta>*+*::before{content:"·";margin-inline-end:14px;color:var(--w40,#7C8BA3)}
.art__meta>.art__pub::before,.art__meta>.rpt__topic::before{content:none}
.art__meta>.rpt__topic{align-self:center}
main.art .art__cover{height:auto;max-height:320px;border-radius:var(--r-lg,28px);overflow:hidden}
main.art .art__cover img{display:block;width:100%;height:320px;max-height:320px;object-fit:cover}
.art__pn{display:none}
.report-dl-modal .modal__card{max-width:620px;max-height:calc(100vh - 40px);overflow-y:auto}
/* ---- Media Centre gallery card: the Newsletters card pattern (p.194-195) ----
Clean image on top; label, title and action in the white body. Nothing over the image. */
.mc__grid .mc--gallery{display:flex;flex-direction:column;align-items:stretch;padding:0;text-align:start;background:#fff;border:1px solid var(--card-brd,rgba(0,157,217,.32));border-radius:var(--r-md,20px);color:var(--ink,#16213A);overflow:hidden;cursor:pointer}
.mc__grid .mc--gallery:hover{border-color:var(--card-brd-hi,rgba(0,157,217,.55))}
.mc__grid .mc--gallery .insight-card__media{position:relative;inset:auto;display:block;aspect-ratio:16/10;overflow:hidden}
.mc__grid .mc--gallery .insight-card__media::before,.mc__grid .mc--gallery .insight-card__media::after,.mc__grid .mc--gallery::before,.mc__grid .mc--gallery::after{display:none}
.mc__grid .mc--gallery .insight-card__media img{width:100%;height:100%;object-fit:cover}
.mc__grid .mc--gallery .insight-card__copy{position:static;display:grid;gap:8px;padding:20px 22px;background:none;color:var(--ink,#16213A)}
.mc__grid .mc--gallery .insight-card__copy>span:first-child{color:var(--teal-ink,#1C6F62);font-size:var(--t-eyebrow-size,11px);font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.mc__grid .mc--gallery .insight-card__copy b{color:var(--ink,#16213A);font-size:var(--t-h4-size,16.5px);line-height:var(--t-h4-lh,1.05)}
.mc__grid .mc--gallery .insight-card__act{margin-top:6px}
.mc__grid .mc--gallery .insight-card__act,.mc__grid .mc--gallery .insight-card__act>span{color:var(--wps-dark);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;opacity:1}
[data-theme="dark"] .mc__grid .mc--gallery{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#fff}
[data-theme="dark"] .mc__grid .mc--gallery:hover{border-color:rgba(127,211,242,.45)}
[data-theme="dark"] .mc__grid .mc--gallery .insight-card__copy,[data-theme="dark"] .mc__grid .mc--gallery .insight-card__copy b{color:#fff}
[data-theme="dark"] .mc__grid .mc--gallery .insight-card__copy>span:first-child{color:#7FD3F2}
[data-theme="dark"] .mc__grid .mc--gallery .insight-card__act,[data-theme="dark"] .mc__grid .mc--gallery .insight-card__act>span{color:#7FD3F2}
.mc__grid .mc--gallery .insight-card__act{display:inline-flex;align-items:center;gap:7px;padding-top:0}
.mc__grid .mc--gallery .insight-card__act svg{flex:none;width:15px;height:15px}
@media (max-width:600px){#mcGalleryCollections{min-width:0;max-width:100%;flex:1 1 100%}#mcGalleryCollections .gal__filters{max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}#mcGalleryCollections .gal__filters::-webkit-scrollbar{display:none}#mcGalleryCollections .gal__f{flex:none}}
/* Year and category filters on one line (p.195 #2) */
.mc__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.mc__bar .mc__gallery-seg{margin:0}
.mc__bar .mc__gallery-seg[hidden]{display:none}
/* Chip rows that scroll sideways on phones ([data-chip-scroll]) */
[data-chip-row].is-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
[data-chip-row].is-scroll::-webkit-scrollbar{display:none}
/* ---- Legal pages on phones: sticky "Jump to section" (site dropdown with search) ---- */
@media (max-width:760px){
.legal-page .legal__side{position:sticky;top:64px;z-index:30;background:var(--bg,#F7FAFD)}
.legal-page .legal__jump .wsel,.legal-page .legal__jump .wsel__btn{width:100%!important}
}
html[data-theme="dark"] .legal-page .legal__jump{background:var(--bg,#07061A)}
.legal-page .legal__jump select{border-radius:999px} /* trigger copies this: pill like the other dropdowns */
/* ---- Menu: flyout inside a dropdown (Programme › Side events and workshops, master p.84) ----
Same surface as .nvi__dd (shell.css); the list scrolls inside itself when there are many events. */
.nvi__sub{position:relative}
.nvi__dd .nvi__subT{display:flex;align-items:center;justify-content:space-between;gap:18px}
.nvi__subT b{font-weight:400;opacity:.7}
.nvi__fly{position:absolute;left:calc(100% + 8px);top:-8px;min-width:250px;max-height:min(62vh,440px);overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:14px;background:rgba(10,9,32,.94);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 18px 42px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateX(6px);transition:opacity .2s var(--ease,ease),transform .2s var(--ease,ease),visibility .2s}
.nvi__fly::before{content:"";position:absolute;top:0;bottom:0;left:-14px;width:14px}
.nvi__sub:hover>.nvi__fly,.nvi__sub:focus-within>.nvi__fly{opacity:1;visibility:visible;transform:none}
.nvi__fly a.is-all{font-weight:700;color:#fff}
.nav.is-stuck .nvi__fly{background:rgba(255,255,255,.96);border-color:#D7E2F0;box-shadow:0 18px 42px rgba(20,71,156,.14)}
.nav.is-stuck .nvi__fly a.is-all{color:var(--ink,#16213A)}
html[data-theme="dark"] .nav.is-stuck .nvi__fly{background:rgba(10,9,32,.94);border-color:rgba(255,255,255,.12);box-shadow:0 18px 42px rgba(0,0,0,.45)}
html[data-theme="dark"] .nav.is-stuck .nvi__fly a.is-all{color:#fff}
[dir="rtl"] .nvi__fly{left:auto;right:calc(100% + 8px);transform:translateX(-6px)}
[dir="rtl"] .nvi__fly::before{left:auto;right:-14px}
/* Phone menu: the flyout becomes a second level that expands in place */
.mobile-menu .mm-sub summary{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--brd);color:var(--ink);font-size:17px;font-weight:700;list-style:none;cursor:pointer}
.mobile-menu .mm-sub summary::-webkit-details-marker{display:none}
.mobile-menu .mm-sub summary::after{content:"+";font-weight:400;color:var(--w40)}
.mobile-menu .mm-sub[open] summary::after{content:"−"}
html[data-theme="dark"] .mobile-menu .mm-sub summary{color:#fff}
.mobile-menu .mm-sub__list a{padding-inline-start:16px;font-size:15px}
.mobile-menu .mm-sub__list a.is-all{font-weight:700}
/* ---- Dialogs: the global reset zeroes