/* Reeoka Activities - scoped component styles.
   Everything is namespaced under .rka-page so nothing leaks into the rest of the site.
   Colour and type come from Blocksy's own variables, so this follows the site brand. */
.rka-page{
--rka-accent:var(--theme-palette-color-1,#697861);
--rka-accent-dark:var(--theme-palette-color-2,#586750);
--rka-ink:var(--theme-headings-color,var(--theme-palette-color-4,#0E0D12));
--rka-ink-2:var(--theme-text-color,var(--theme-palette-color-3,#434F58));
--rka-line:var(--theme-palette-color-5,#EEEEEE);
--rka-surface:var(--theme-palette-color-8,#ffffff);
--rka-surface-2:var(--theme-palette-color-7,#f8f8f8);
--rka-radius:14px;
--rka-shadow:0 1px 2px rgba(14,13,18,.04),0 8px 24px rgba(14,13,18,.05);
}
.rka-page .wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
.rka-page .wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:20px}
.rka-page .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.rka-page .sec{padding:40px 0}
.rka-page .sec-alt{background:var(--rka-surface-2)}
.rka-page .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.rka-page .sec-head.center{justify-content:center;text-align:center}
.rka-page .eyebrow{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--rka-accent);font-weight:600}
.rka-page .crumbs{font-size:.84rem;color:var(--rka-ink-2);margin:0 0 14px}
.rka-page .crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rka-line)}
.rka-page .crumbs a:hover{color:var(--rka-accent);border-color:currentColor}

/* ---- single activity ---- */
.rka-page .act-head{padding-top:8px}
.rka-page .act-head .emoji{font-size:2.3rem;line-height:1;display:block;margin-bottom:8px}
.rka-page .act-hook{font-size:1.14rem;color:var(--rka-ink-2);max-width:62ch;margin:.4em 0 1.2em}
.rka-page .act-hero{margin:0 0 28px;border-radius:var(--rka-radius);overflow:hidden;background:var(--rka-surface-2)}
.rka-page .act-hero img{display:block;width:100%;height:auto}
.rka-page .statbar{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rka-line);border-radius:var(--rka-radius);background:var(--rka-surface);overflow:hidden;margin:0 0 26px}
.rka-page .statbar .s{flex:1 1 128px;padding:13px 16px;border-inline-end:1px solid var(--rka-line)}
.rka-page .statbar .s:last-child{border-inline-end:0}
.rka-page .statbar .s > span{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rka-ink-2);margin-bottom:3px}
.rka-page .statbar .s b{font-size:.97rem;color:var(--rka-ink);font-weight:600;display:flex;align-items:center;gap:6px;min-height:1.5em}
.rka-page .act-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
@media(max-width:860px){.rka-page .act-body{grid-template-columns:1fr}}
.rka-page .panel{background:var(--rka-surface);border:1px solid var(--rka-line);border-radius:var(--rka-radius);padding:22px 24px;margin:0 0 20px}
.rka-page .panel h2,.rka-page .panel h3{margin-top:0}
.rka-page .panel-accent{border-inline-start:3px solid var(--rka-accent)}
.rka-page .panel-warn{background:var(--rka-surface-2)}
.rka-page .side .panel{position:sticky;top:24px}
@media(max-width:860px){.rka-page .side .panel{position:static}}
/* ---- steps and checklists ---- */
.rka-page .steps{list-style:none;margin:0;padding:0;counter-reset:rkastep}
.rka-page .steps li{counter-increment:rkastep;position:relative;padding-inline-start:42px;margin:0 0 16px;line-height:1.62}
.rka-page .steps li::before{content:counter(rkastep);position:absolute;inset-inline-start:0;top:-1px;width:28px;height:28px;border-radius:50%;background:var(--rka-accent);color:#fff;font-size:.84rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.rka-page .checklist{list-style:none;margin:0;padding:0}
.rka-page .checklist li{position:relative;padding-inline-start:26px;margin:0 0 9px;line-height:1.55}
.rka-page .checklist li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--rka-accent)}
.rka-page .vary{margin:0 0 12px}
.rka-page .vary b{display:block;color:var(--rka-ink);font-size:.95rem;margin-bottom:2px}
.rka-page .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.rka-page .tag{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--rka-surface-2);border:1px solid var(--rka-line);font-size:.8rem;color:var(--rka-ink-2);text-decoration:none}
.rka-page a.tag:hover{border-color:var(--rka-accent);color:var(--rka-accent)}

/* ---- buttons ---- */
.rka-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 19px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:.93rem;cursor:pointer;text-decoration:none;transition:.16s}
.rka-page .btn-primary{background:var(--rka-accent);color:#fff}
.rka-page .btn-primary:hover{background:var(--rka-accent-dark);color:#fff}
.rka-page .btn-ghost{background:transparent;color:var(--rka-ink);border-color:var(--rka-line)}
.rka-page .btn-ghost:hover{border-color:var(--rka-accent);color:var(--rka-accent)}
.rka-page .btn-sm{padding:8px 14px;font-size:.86rem}
.rka-page .btn-block{display:flex;width:100%}
/* ---- activity cards and grid ---- */
.rka-page .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px}
.rka-page .card{background:var(--rka-surface);border:1px solid var(--rka-line);border-radius:var(--rka-radius);padding:18px;transition:.18s;display:flex;flex-direction:column}
.rka-page .card:hover{box-shadow:var(--rka-shadow);transform:translateY(-2px);border-color:transparent}
.rka-page .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.rka-page .card-pills{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.rka-page .card .emoji{font-size:1.65rem;line-height:1}
.rka-page .card h3{font-size:1.04rem;margin:0 0 6px;line-height:1.35}
.rka-page .card h3 a{color:var(--rka-ink);text-decoration:none}
.rka-page .card h3 a:hover{color:var(--rka-accent)}
.rka-page .card .hook{font-size:.89rem;color:var(--rka-ink-2);margin:0 0 14px;line-height:1.5;flex:1}
.rka-page .pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}
.rka-page .pill-time{background:var(--rka-surface-2);color:var(--rka-ink-2);border:1px solid var(--rka-line)}
.rka-page .pill-none{background:var(--rka-accent);color:#fff}
.rka-page .pill-all{background:var(--rka-surface-2);color:var(--rka-accent);border:1px solid var(--rka-accent);margin-bottom:9px}
.rka-page .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.76rem;color:var(--rka-ink-2);border-top:1px solid var(--rka-line);padding-top:11px}
.rka-page .meta .m{display:inline-flex;align-items:center;gap:5px}
.rka-page .dots,.rka-page .statbar .dots{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:3px;line-height:1;vertical-align:middle}
.rka-page .dot,.rka-page .statbar .dot{display:inline-block;flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--rka-line)}
.rka-page .dot.on{background:var(--rka-accent)}
.rka-page .card-img{border-radius:10px;overflow:hidden;margin:-18px -18px 14px}
.rka-page .card-img img{display:block;width:100%;height:auto}
/* ---- hub pages ---- */
.rka-page .hubintro{max-width:66ch}
.rka-page .hubintro p{color:var(--rka-ink-2);line-height:1.68}
.rka-page .linkgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:9px;margin:18px 0 0;padding:0}
.rka-page .linkgrid a{display:block;padding:12px 15px;border:1px solid var(--rka-line);border-radius:10px;background:var(--rka-surface);color:var(--rka-ink);text-decoration:none;font-size:.9rem;transition:.16s}
.rka-page .linkgrid a:hover{border-color:var(--rka-accent);color:var(--rka-accent);background:var(--rka-surface-2)}
.rka-page .results-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:26px 0 14px}
.rka-page .results-head h2{margin:0;font-size:1.18rem}
.rka-page .banner{background:var(--rka-surface-2);border:1px solid var(--rka-line);border-radius:var(--rka-radius);padding:15px 18px;color:var(--rka-ink-2);font-size:.92rem}
.rka-page .loading{color:var(--rka-ink-2);padding:26px 0}
.rka-page .note{font-size:.84rem;color:var(--rka-ink-2)}
.rka-page .toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}

/* ---- prose ---- */
.rka-page .prose{max-width:68ch;line-height:1.72}
.rka-page .prose h2{margin-top:1.8em}
.rka-page .prose img{border-radius:var(--rka-radius)}
.rka-page .prose blockquote{border-inline-start:3px solid var(--rka-accent);padding-inline-start:18px;margin-inline-start:0;color:var(--rka-ink-2);font-style:italic}

@media print{
.rka-page .toolbar,.rka-page .no-print,.rka-page .side{display:none!important}
.rka-page .act-body{grid-template-columns:1fr}
.rka-page .panel{break-inside:avoid;box-shadow:none}
}
/* Legacy variable names still referenced by inline styles in the templates and app.js.
   Mapped onto the Reeoka tokens so nothing falls back to an undefined value. */
.rka-page{
--ink:var(--rka-ink);
--ink-2:var(--rka-ink-2);
--muted:var(--rka-ink-2);
--primary:var(--rka-accent);
--primary-ink:#fff;
--accent:var(--rka-accent);
--border:var(--rka-line);
--border-2:var(--rka-line);
--surface:var(--rka-surface);
--surface-2:var(--rka-surface-2);
--bg:var(--rka-surface);
--radius:var(--rka-radius);
--radius-lg:20px;
--pill:999px;
--shadow:var(--rka-shadow);
--wrap:1180px;
}

/* ---- finder wizard + planner, ported from the original sheet and scoped ---- */
@keyframes rka-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Finder wizard */
.wizard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.rka-page .wiz-bar{height:5px;background:var(--surface-2)}.rka-page .wiz-bar i{display:block;height:100%;background:var(--primary);transition:width .3s ease;width:25%}.rka-page .wiz-body{padding:clamp(20px,4vw,34px)}.rka-page .wiz-step{display:none}.rka-page .wiz-step.active{display:block;animation:rka-fade .25s ease}.rka-page .wiz-count{font-size:.82rem;color:var(--muted);font-weight:700;margin-bottom:6px}.rka-page .wiz-q{font-family:var(--display);font-size:clamp(1.35rem,3vw,1.75rem);margin:0 0 6px}.rka-page .wiz-sub{color:var(--muted);font-size:.95rem;margin:0 0 22px}.rka-page .wiz-foot{display:flex;gap:10px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap}.rka-page .wiz-foot .spacer{margin-inline-start:auto}.rka-page .opts{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.rka-page .opts.two{grid-template-columns:1fr 1fr}.rka-page .opts.three{grid-template-columns:repeat(3,1fr)}}.rka-page .opt{display:flex;flex-direction:column;gap:3px;text-align:start;padding:15px 17px;border:2px solid var(--border);background:var(--surface);border-radius:15px;cursor:pointer;font-family:inherit;font-size:.98rem;font-weight:700;color:var(--ink);transition:border-color .12s,background .12s}.rka-page .opt small{font-weight:500;color:var(--muted);font-size:.83rem}.rka-page .opt:hover{border-color:var(--border-2)}.rka-page .opt[aria-pressed=true]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}.rka-page .opt[aria-pressed=true] small{color:var(--primary)}.rka-page .kid{border:1px solid var(--border);border-radius:15px;padding:15px;margin-bottom:11px;background:var(--surface-2)}.rka-page .kid-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.rka-page .kid-head b{font-size:.95rem}.rka-page .linkbtn{background:none;border:0;color:var(--secondary);font-weight:700;cursor:pointer;font-size:.85rem;font-family:inherit;padding:4px}.rka-page .field{margin-bottom:12px}.rka-page .field label{display:block;font-size:.84rem;font-weight:700;color:var(--ink-2);margin-bottom:6px}.rka-page .agerow{display:flex;align-items:center;gap:12px}.rka-page input[type=range]{flex:1;accent-color:var(--primary);height:26px}.rka-page .agebadge{background:var(--primary);color:#fff;border-radius:var(--pill);padding:5px 13px;font-weight:800;font-size:.86rem;min-width:74px;text-align:center}.rka-page .seg{display:flex;gap:6px;flex-wrap:wrap}.rka-page .seg button{flex:1;min-width:78px;padding:9px 10px;border:2px solid var(--border);background:var(--surface);border-radius:11px;font-weight:700;font-size:.86rem;cursor:pointer;font-family:inherit;color:var(--ink-2)}.rka-page .seg button[aria-pressed=true]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}.rka-page .note{font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.5}/* Planner */
.rka-page .week{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.rka-page .week{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.rka-page .week{grid-template-columns:repeat(4,1fr)}}.rka-page .day{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px}.rka-page .day h3{font-size:1rem;margin:0 0 11px;padding-bottom:9px;border-bottom:1px solid var(--border)}.rka-page .slot{margin-bottom:11px}.rka-page .slot-label{font-size:.71rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}.rka-page .slot-card{background:var(--surface-2);border-radius:11px;padding:10px 11px;font-size:.87rem;line-height:1.4;min-height:52px;display:flex;align-items:center;gap:8px}.rka-page .slot-card a{color:var(--ink);text-decoration:none;font-weight:600}.rka-page .slot-card a:hover{color:var(--primary)}.rka-page .slot-card.empty{color:var(--muted);font-style:italic;border:1px dashed var(--border-2);background:transparent}.rka-page .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}

/* ---- related product block ---- */
.rka-page .rka-promo{border:1px solid var(--rka-line);border-radius:var(--rka-radius);background:var(--rka-surface-2);padding:18px 20px;margin:26px 0}
.rka-page .rka-promo-label{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--rka-ink-2);font-weight:700;margin:0 0 12px}
.rka-page .rka-promo-in{display:flex;gap:18px;align-items:flex-start}
.rka-page .rka-promo-img{flex:0 0 108px;border-radius:10px;overflow:hidden;display:block}
.rka-page .rka-promo-img img{display:block;width:100%;height:auto;border-radius:10px}
.rka-page .rka-promo-txt{flex:1;min-width:0}
.rka-page .rka-promo-txt h3{margin:0 0 6px;font-size:1.03rem;line-height:1.35}
.rka-page .rka-promo-txt h3 a{color:var(--rka-ink);text-decoration:none}
.rka-page .rka-promo-txt h3 a:hover{color:var(--rka-accent)}
.rka-page .rka-promo-txt p{margin:0 0 10px;font-size:.9rem;color:var(--rka-ink-2);line-height:1.55}
.rka-page .rka-promo-price{font-weight:700;color:var(--rka-ink)}
.rka-page .rka-promo-price del{opacity:.55;font-weight:400}
@media(max-width:560px){.rka-page .rka-promo-in{flex-direction:column}.rka-page .rka-promo-img{flex:0 0 auto;max-width:150px}}
/* ---- browse page header: readable measure on the left, finder prompt on the right ---- */
.rka-page .browse-head{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start}
@media(max-width:900px){.rka-page .browse-head{grid-template-columns:1fr;gap:22px}}
.rka-page .browse-head-txt h1{margin-top:0}
.rka-page .browse-head-txt p{max-width:62ch;color:var(--rka-ink-2);font-size:1.02rem;line-height:1.66;margin-bottom:0}
.rka-page .browse-head-cta{background:var(--rka-surface-2);border:1px solid var(--rka-line);border-radius:var(--rka-radius);padding:20px 22px}
.rka-page .browse-head-cta h2{margin:0 0 8px;font-size:1.05rem;line-height:1.3}
.rka-page .browse-head-cta p{margin:0 0 15px;font-size:.89rem;color:var(--rka-ink-2);line-height:1.55}