/* KAPASITI R87 — Clean Mobile Convergence
   Goal: remove decorative title blocks and standardise the existing live portal
   to the approved clean mobile mockup without touching backend/API logic. */

:root{
 --r87-ink:#102b49;
 --r87-ink2:#214d78;
 --r87-teal:#59cbbc;
 --r87-bg:#f5f8fc;
 --r87-card:#fff;
 --r87-line:#dbe5ef;
 --r87-muted:#6c7f94;
 --r87-header:66px;
 --r87-dock:70px;
 --r87-radius:18px;
 --r87-shadow:0 8px 26px rgba(16,43,73,.055);
}

html{background:var(--r87-bg)}
body.r87-clean{
 margin:0!important;
 padding-top:var(--r87-header)!important;
 padding-bottom:calc(var(--r87-dock) + env(safe-area-inset-bottom))!important;
 background:var(--r87-bg)!important;
 color:var(--r87-ink);
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 -webkit-font-smoothing:antialiased;
 overflow-x:hidden!important;
}

body.r87-clean [data-r87-hidden="1"]{display:none!important}

/* NEW HEADER */
#r87Header{
 position:fixed;
 z-index:9000;
 top:0;left:0;right:0;
 height:var(--r87-header);
 display:flex;
 align-items:center;
 padding:0 14px;
 background:rgba(255,255,255,.97);
 backdrop-filter:blur(18px);
 border-bottom:1px solid #edf2f6;
}
#r87Header .brand{
 display:flex;
 align-items:center;
 gap:9px;
 color:var(--r87-ink);
 text-decoration:none;
 font-weight:900;
 letter-spacing:-.025em;
 font-size:20px;
}
#r87Header .brand img{width:40px;height:40px;display:block}
#r87Header .tools{margin-left:auto;display:flex;gap:7px}
#r87Header button,#r87Header a.tool{
 width:42px;height:42px;
 display:grid;place-items:center;
 border:1px solid var(--r87-line);
 background:#fff;
 color:var(--r87-ink);
 border-radius:13px;
 text-decoration:none;
 font-size:18px;
}

/* MOBILE DOCK */
#r87Dock{
 position:fixed;
 z-index:8900;
 left:0;right:0;bottom:0;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 background:rgba(255,255,255,.975);
 backdrop-filter:blur(18px);
 border-top:1px solid var(--r87-line);
 padding:7px 4px calc(7px + env(safe-area-inset-bottom));
 box-shadow:0 -7px 24px rgba(16,43,73,.05);
}
#r87Dock a{
 color:#6d8096;
 text-align:center;
 text-decoration:none;
 font-size:10px;
 font-weight:800;
 padding:3px 1px;
}
#r87Dock a b{
 display:block;
 font-size:20px;
 line-height:1;
 margin-bottom:4px;
 font-weight:600;
}
#r87Dock a.active{color:#225f94}

/* MORE DRAWER */
#r87Drawer{
 position:fixed;
 z-index:9500;
 inset:0;
 background:#f7f9fc;
 padding:calc(18px + env(safe-area-inset-top)) 18px 30px;
 transform:translateX(100%);
 transition:transform .2s ease;
 overflow:auto;
}
#r87Drawer.open{transform:none}
#r87Drawer .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
#r87Drawer .head h2{margin:0;font-size:30px;letter-spacing:-.04em}
#r87Drawer .head button{width:44px;height:44px;border:1px solid var(--r87-line);background:#fff;border-radius:13px;font-size:24px}
#r87Drawer .links a{
 display:block;
 padding:15px;
 margin:8px 0;
 background:#fff;
 border:1px solid var(--r87-line);
 border-radius:14px;
 color:var(--r87-ink);
 text-decoration:none;
 font-weight:850;
}

/* REMOVE VISUAL TITLE BLOCKS, BUT KEEP REAL CONTENT HEADLINES */
.r87-decorative-block{display:none!important}

/* Convert the old dark title hero into clean editorial content */
.r87-flatten-hero{
 background:transparent!important;
 color:var(--r87-ink)!important;
 border:0!important;
 box-shadow:none!important;
 min-height:0!important;
 height:auto!important;
 padding:18px 20px 30px!important;
 margin:0!important;
 border-radius:0!important;
}
.r87-flatten-hero *{color:inherit}
.r87-flatten-hero p{color:var(--r87-muted)!important}
.r87-flatten-hero h1,
.r87-flatten-hero h2{
 color:var(--r87-ink)!important;
 font-size:clamp(36px,10vw,56px)!important;
 line-height:1!important;
 letter-spacing:-.055em!important;
 margin:8px 0 18px!important;
}

/* Clean page typography */
body.r87-clean main,
body.r87-clean [role="main"]{
 max-width:1180px;
 margin-left:auto!important;
 margin-right:auto!important;
}
body.r87-clean h1,
body.r87-clean h2,
body.r87-clean h3{
 letter-spacing:-.035em;
}
body.r87-clean p{color:var(--r87-muted)}
body.r87-clean .eyebrow,
body.r87-clean .kicker,
body.r87-clean [class*="eyebrow"],
body.r87-clean [class*="kicker"]{
 color:#429f93!important;
 text-transform:uppercase;
 font-weight:900;
 letter-spacing:.12em;
}

/* Cards */
body.r87-clean .card,
body.r87-clean .panel,
body.r87-clean [class*="program-card"],
body.r87-clean [class*="programme-card"]{
 background:#fff!important;
 border:1px solid var(--r87-line)!important;
 border-radius:var(--r87-radius)!important;
 box-shadow:var(--r87-shadow)!important;
}

/* Forms */
body.r87-clean input,
body.r87-clean select,
body.r87-clean textarea{
 font:inherit;
 font-size:16px!important;
 border:1px solid var(--r87-line)!important;
 border-radius:14px!important;
 background:#fff!important;
 color:var(--r87-ink)!important;
 min-height:46px;
}
body.r87-clean button,
body.r87-clean .btn,
body.r87-clean [role="button"]{
 min-height:44px;
 border-radius:13px;
 touch-action:manipulation;
}

/* Compact public navigation actions */
.r87-compact-top-actions{display:none!important}

/* Programme cards/list on mobile */
body.r87-clean .r87-program-row{
 display:grid!important;
 grid-template-columns:auto minmax(0,1fr) auto!important;
 gap:12px!important;
 align-items:center!important;
 min-height:86px!important;
 padding:13px!important;
 background:#fff!important;
 border:1px solid var(--r87-line)!important;
 border-radius:16px!important;
 box-shadow:var(--r87-shadow)!important;
}
body.r87-clean .r87-program-row h1,
body.r87-clean .r87-program-row h2,
body.r87-clean .r87-program-row h3{
 font-size:16px!important;
 line-height:1.15!important;
 margin:0!important;
}
body.r87-clean .r87-program-row p{font-size:12px!important;margin:4px 0 0!important}
body.r87-clean .r87-program-row .price,
body.r87-clean .r87-program-row [class*="price"]{
 font-size:17px!important;
 font-weight:900!important;
 color:var(--r87-ink)!important;
}

/* Tables converge to cards on phone */
@media(max-width:760px){
 body.r87-clean{--r87-header:62px;--r87-dock:68px}
 body.r87-clean main,
 body.r87-clean [role="main"]{width:100%!important;max-width:100%!important}
 body.r87-clean h1{font-size:clamp(34px,10vw,48px);line-height:1.02}
 body.r87-clean h2{font-size:clamp(28px,8vw,40px);line-height:1.04}
 body.r87-clean table.r87-stack thead{display:none}
 body.r87-clean table.r87-stack,
 body.r87-clean table.r87-stack tbody,
 body.r87-clean table.r87-stack tr,
 body.r87-clean table.r87-stack td{display:block;width:100%}
 body.r87-clean table.r87-stack tr{
   background:#fff;
   border:1px solid var(--r87-line);
   border-radius:15px;
   padding:10px;
   margin:9px 0;
 }
 body.r87-clean table.r87-stack td{border:0!important;padding:5px 8px!important}
}

/* Tablet / desktop */
@media(min-width:761px){
 body.r87-clean{padding-bottom:0!important}
 #r87Dock{display:none}
 #r87Header{padding:0 24px}
 #r87Header .brand{font-size:22px}
}