/* ====================================================================
   Disney Parks hub — block styles. Source of truth: #/view-hub in
   mockups/disney-parks-microsite.html (locked 8 June 2026). Scoped under
   .mmdp-hub, with the same token block + anchor/button armour as the
   wait-times component.
   ==================================================================== */

.mmdp-hub{
	--bg:#0C0E13;--surface:#14171F;--surface-2:#1A1E28;--surface-3:#222736;
	--line:rgba(255,255,255,0.08);--line-2:rgba(255,255,255,0.14);
	--text:var(--mmdp-text,#F5F5F7);--muted:#A6AAB4;--dim:#7E8695; /* lifted from #6B7080 for AA at micro sizes (July 2026 audit) */
	--ok:var(--mmdp-success,#34D399);--closed:var(--mmdp-error,#F87171);
	--ac:var(--mmdp-brand,#3EB5F5);--ac-glow:rgba(62,181,245,0.30);
	--park-mk:var(--mmdp-accent-magic-kingdom,#5BA3E6);--park-ep:var(--mmdp-accent-epcot,#A78BFA);
	--park-hs:var(--mmdp-accent-hollywood-studios,#EF8354);--park-ak:var(--mmdp-accent-animal-kingdom,#34D399);
	--w-lo:#34D399;--w-md:#FBBF24;--w-hi:#FB923C;--w-pk:#EF4444;
	--f-ui:'Poppins',system-ui,sans-serif;--f-display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
	--f-body:'Inter',system-ui,sans-serif;--f-mono:'JetBrains Mono',ui-monospace,monospace;
	--radius:14px;--radius-sm:10px;--maxw:1280px;
	font-family:var(--f-body);color:var(--text)
}
.mmdp-hub *,.mmdp-hub *::before,.mmdp-hub *::after{box-sizing:border-box}
/* anchor + button armour (Elementor/theme override defence — all states) */
div.mmdp-hub a,header.mmdp-hub a,div.mmdp-hub a:hover,header.mmdp-hub a:hover,
div.mmdp-hub a:focus,header.mmdp-hub a:focus{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;text-decoration:none}
div.mmdp-hub button,div.mmdp-hub button:hover,div.mmdp-hub button:focus,div.mmdp-hub button:active{
	-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;box-shadow:none;text-shadow:none;outline:none;color:inherit;font:inherit;padding:0;margin:0}
.mmdp-hub h1,.mmdp-hub h2,.mmdp-hub h3{margin:0}
.mmdp-hub .hub-wrap{max-width:var(--mmdp-maxw,1280px);margin:0 auto;padding:0 24px}

/* section scaffold */
.mmdp-hub.hub-block{display:block;padding:54px 0}
/* v0.27 motion (hub lock consciously reopened for this): hub sections settle in
   on scroll. Editor-safe pattern — .io-wait is only ever added by hub.js just
   before observing, so no-JS/crawlers/editor never see hidden content. */
@keyframes mmdpHubRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mmdp-hub.hub-block.io-wait{opacity:0}
.mmdp-hub.hub-block.io-in{animation:mmdpHubRise .55s cubic-bezier(.2,.7,.2,1) both}

/* "Right now" strip — [mm_hub_now] (v0.27, the one new hub element): one quiet
   server-rendered line in the existing token language; clock ticks client-side,
   the wait segment updates with the live refresh. */
.mmdp-hub.hub-now{display:block;padding:12px 0 0}
.mmdp-hub .hub-now-in{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 18px}
.mmdp-hub .hub-now-i{display:inline-flex;align-items:baseline;gap:7px;min-width:0}
.mmdp-hub .hub-now-lab{font-family:var(--f-mono);font-weight:600;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mmdp-hub .hub-now-val{font-family:var(--f-mono);font-weight:600;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38ch}
.mmdp-hub .hub-now .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(52,211,153,.5);animation:mmdpPulse 2.2s infinite;flex:none;align-self:center}
@media(max-width:640px){.mmdp-hub .hub-now-in{border-radius:14px;padding:10px 14px}.mmdp-hub .hub-now-val{max-width:24ch}}
.mmdp-hub .hub-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.mmdp-hub .hub-sec-head h2{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,3vw,32px);letter-spacing:-.015em}
.mmdp-hub .hub-sec-link{font-family:var(--f-ui);font-size:13px;font-weight:500;color:var(--ac);white-space:nowrap}
.mmdp-hub .hub-sec-link:hover{color:#5BC4F7}
.mmdp-hub .hub-disco{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ac);margin-bottom:8px}
.mmdp-hub .hub-btn{font-family:var(--f-ui);font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:999px;background:var(--ac);color:#06121c;white-space:nowrap;transition:filter .2s,transform .2s;display:inline-block}
@media(hover:hover){.mmdp-hub .hub-btn:hover{filter:brightness(1.08);transform:translateY(-1px);color:#06121c}}
.mmdp-hub .hub-btn:active{transform:scale(.98);filter:brightness(.96)}
@keyframes mmdpPulse{70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* 1. HERO */
.mmdp-hub.hub-hero{position:relative;overflow:visible;padding:80px 0 64px;background:var(--bg);display:block}
/* full-bleed blueprint grid behind the hero (matches wait-times hero) */
.mmdp-hub.hub-hero::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;z-index:0;
	background-image:linear-gradient(rgba(62,181,245,var(--mmdp-grid,.07)) 1px,transparent 1px),linear-gradient(90deg,rgba(62,181,245,var(--mmdp-grid,.07)) 1px,transparent 1px);
	background-size:36px 36px;
	-webkit-mask-image:radial-gradient(120% 115% at 50% 0%,#000,transparent 80%);mask-image:radial-gradient(120% 115% at 50% 0%,#000,transparent 80%)}
.mmdp-hub .hub-hero-clip{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.mmdp-hub .hub-aurora{position:absolute;inset:-20% -10% auto -10%;height:520px;z-index:0;
	background:radial-gradient(42% 60% at 28% 30%,var(--ac-glow),transparent 70%),radial-gradient(38% 55% at 70% 22%,rgba(62,181,245,.20),transparent 72%),radial-gradient(46% 60% at 52% 64%,rgba(62,181,245,.10),transparent 72%);
	filter:blur(22px);animation:mmdpDrift 18s ease-in-out infinite alternate}
@keyframes mmdpDrift{0%{transform:translate3d(-3%,0,0) scale(1)}100%{transform:translate3d(4%,2%,0) scale(1.08)}}
.mmdp-hub.hub-hero .hub-wrap{position:relative;z-index:1}
.mmdp-hub .hub-h1{font-family:var(--f-display);font-weight:600;font-size:clamp(40px,6vw,72px);line-height:.98;letter-spacing:-.02em;max-width:16ch;margin-bottom:18px}
.mmdp-hub .hub-h1 em{font-style:italic;color:var(--ac)}
.mmdp-hub .hub-lede{font-size:18px;color:var(--muted);max-width:60ch;line-height:1.6;margin:0}
.mmdp-hub .hub-search{margin-top:24px;display:flex;align-items:center;gap:10px;max-width:520px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:9px 18px}
.mmdp-hub .hub-search svg{width:17px;height:17px;color:var(--muted);flex:none}
/* Button armour: Elementor force-styles bare <button>s (blue bg/box-shadow on hover/focus). Pin our own surface across every state so the only hover change is our accent border. */
.mmdp-hub button.hub-search,
.mmdp-hub button.hub-search:hover,
.mmdp-hub button.hub-search:focus,
.mmdp-hub button.hub-search:focus-visible,
.mmdp-hub button.hub-search:active{cursor:pointer;text-align:left;background:var(--surface)!important;color:inherit!important;box-shadow:none!important;outline:none!important;-webkit-appearance:none;appearance:none}
.mmdp-hub button.hub-search:hover,
.mmdp-hub button.hub-search:focus-visible{border-color:var(--ac)!important}
.mmdp-hub .hub-search-ph{flex:1;min-width:0;color:var(--dim);font-family:var(--f-ui);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* search overlay (appended to <body>) */
.hub-search-ov{position:fixed;inset:0;z-index:100000;display:none;background:rgba(6,8,12,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12vh 20px 20px}
.hub-search-ov.open{display:block;animation:mmdpQfade .2s ease}
.hub-search-ov .hub-sr-box{max-width:640px;margin:0 auto}
.hub-search-ov .hub-sr-form{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:14px 18px}
.hub-search-ov .hub-sr-form svg{width:20px;height:20px;color:var(--muted);flex:none}
.hub-search-ov .hub-sr-input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font-family:var(--f-ui);font-size:17px}
.hub-search-ov .hub-sr-input::placeholder{color:var(--dim)}
/* padding+negative margin = 44px hit target with zero layout shift (R1 touch floor) */
.hub-search-ov .hub-sr-close{background:none;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;flex:none;padding:10px;margin:-10px -8px -10px 0}
.hub-search-ov .hub-sr-close:hover{color:var(--text)}
.hub-search-ov .hub-sr-results{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-top:10px;overflow:hidden;max-height:60vh;overflow-y:auto}
.hub-search-ov .hub-sr-head{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:14px 18px 6px}
.hub-search-ov .hub-sr-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-top:1px solid var(--line);text-decoration:none}
.hub-search-ov .hub-sr-item:first-of-type{border-top:0}
@media(hover:hover){.hub-search-ov .hub-sr-item:hover{background:var(--surface-2)}}
.hub-search-ov .hub-sr-item:active{background:var(--surface-2)}
.hub-search-ov .hub-sr-nm{font-family:var(--f-ui);font-size:15px;font-weight:500;color:var(--text)}
.hub-search-ov .hub-sr-ty{font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.hub-search-ov .hub-sr-empty{padding:18px;color:var(--muted);font-size:14px}
@media(max-width:560px){.hub-search-ov{padding:8vh 14px 14px}.hub-search-ov .hub-sr-input{font-size:16px}}

/* 2. LIVE WAITS */
.mmdp-hub .hub-live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mmdp-hub .hub-live-card{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--lc,var(--ac));border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:13px}
.mmdp-hub .hub-live-card.mk{--lc:var(--park-mk)}.mmdp-hub .hub-live-card.ep{--lc:var(--park-ep)}.mmdp-hub .hub-live-card.hs{--lc:var(--park-hs)}.mmdp-hub .hub-live-card.ak{--lc:var(--park-ak)}
.mmdp-hub .hub-live-card h3{font-family:var(--f-ui);font-weight:600;font-size:18px;color:var(--lc);display:flex;align-items:center;gap:9px}
.mmdp-hub .hub-live-card h3 .d{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:mmdpPulse 2.2s infinite}
.mmdp-hub .lc-stat{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted)}
.mmdp-hub .lc-stat b{font-family:var(--f-ui);font-weight:700;font-size:19px;color:var(--text)}
.mmdp-hub .lc-stat.avg b{color:var(--lc)}
.mmdp-hub .lc-div{height:1px;background:var(--line);margin:3px 0}
.mmdp-hub .lc-h{font-family:var(--f-mono);font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} /* mono labels carry the settled 600 weight (R3) */
.mmdp-hub .lc-row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--muted);padding:4px 0}
.mmdp-hub .lc-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmdp-hub .lc-row b{font-family:var(--f-ui);font-weight:600;color:var(--text);white-space:nowrap}
.mmdp-hub .lc-foot{font-family:var(--f-mono);font-weight:600;font-size:11px;color:var(--dim);margin-top:auto;padding-top:4px}
.mmdp-hub .lc-closed{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--closed);font-weight:500}
.mmdp-hub .lc-closed .d{width:8px;height:8px;border-radius:50%;background:var(--closed)}
.mmdp-hub .hub-live-card.hide{display:none}
.mmdp-hub .hub-live-filter{margin-bottom:18px;display:none}
.mmdp-hub .hub-lfm-lab{display:block;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.mmdp-hub .hub-lfm-wrap{position:relative}
/* full armour across states — Elementor styles bare <select>s too (R1) */
.mmdp-hub .hub-lfm-select,.mmdp-hub .hub-lfm-select:hover,.mmdp-hub .hub-lfm-select:focus,.mmdp-hub .hub-lfm-select:active{
	width:100%;appearance:none!important;-webkit-appearance:none!important;background:var(--surface-2)!important;color:var(--text)!important;
	border:1px solid var(--line-2)!important;border-radius:12px!important;padding:13px 42px 13px 15px!important;margin:0!important;
	font:500 15px/1.3 var(--f-ui)!important;letter-spacing:normal!important;text-transform:none!important;
	box-shadow:none!important;text-shadow:none!important;cursor:pointer}
.mmdp-hub .hub-lfm-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
/* .hub-atpark rules removed (R2): no shortcode emits that block — dead CSS. */

/* 3. PICK YOUR PARK */
.mmdp-hub .hub-park-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mmdp-hub .hub-park-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;display:flex;align-items:flex-end;isolation:isolate;z-index:1;transition:border-color .3s,box-shadow .3s,transform .3s}
@media(hover:hover){.mmdp-hub .hub-park-card:hover{transform:translateY(-4px);border-color:var(--pc);box-shadow:0 16px 40px rgba(0,0,0,.5)}}
.mmdp-hub .hub-park-card:active{transform:scale(.99);border-color:var(--pc)}
.mmdp-hub .hub-park-card .media{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,var(--pc-2,#1a2030),#0a0e16);background-size:cover;background-position:center;transition:transform .6s}
.mmdp-hub .hub-park-card .media img.hub-pc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;border:0}
@media(hover:hover){.mmdp-hub .hub-park-card:hover .media{transform:scale(1.04)}}
.mmdp-hub .hub-park-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,13,.05),rgba(8,9,13,.55) 50%,rgba(8,9,13,.95))}
.mmdp-hub .hub-park-card.mk{--pc:var(--park-mk)}.mmdp-hub .hub-park-card.ep{--pc:var(--park-ep)}.mmdp-hub .hub-park-card.hs{--pc:var(--park-hs)}.mmdp-hub .hub-park-card.ak{--pc:var(--park-ak)}
.mmdp-hub .hub-pc-body{padding:18px;position:relative;z-index:2}
/* explicit white (not relying on inherit through the <a>, which Elementor
   recolours) → hover to the park accent, matching the mock */
.mmdp-hub .hub-park-card .hub-pc-name{display:block;font-family:var(--f-ui);font-weight:700;font-size:20px;line-height:1.1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6);transition:color .2s}
@media(hover:hover){.mmdp-hub .hub-park-card:hover .hub-pc-name{color:var(--pc)}}
.mmdp-hub .hub-park-card .sub{display:block;font-family:var(--f-mono);font-weight:600;font-size:11px;letter-spacing:.03em;color:rgba(255,255,255,.74);margin-top:7px}
.mmdp-hub .hub-pc-wait{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;font-weight:600;color:#fff;background:rgba(8,9,13,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 10px}
.mmdp-hub .hub-pc-wait .d{width:6px;height:6px;border-radius:50%;background:var(--pc)}
.mmdp-hub .hub-pc-wait.closed{color:rgba(255,255,255,.7)}
.mmdp-hub .hub-pc-wait.closed .d{background:var(--closed)} /* red dot when closed, matching the live-waits closed colour (George, 15 June) */

/* 4. BROWSE BY TYPE */
.mmdp-hub .hub-browse6{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mmdp-hub .hub-b6-card{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;transition:border-color .2s,transform .2s}
@media(hover:hover){.mmdp-hub .hub-b6-card:hover{border-color:var(--ac);transform:translateY(-3px)}}
.mmdp-hub .hub-b6-card:active{transform:scale(.99);border-color:var(--ac)}
.mmdp-hub .hub-b6-emoji{font-size:26px;line-height:1}
.mmdp-hub .hub-b6-card .hub-b6-t{font-family:var(--f-ui);font-weight:600;font-size:16px;color:var(--text)}
.mmdp-hub .hub-b6-card .hub-b6-d{font-size:13px;color:var(--muted);line-height:1.45}

/* 5. LATEST (carousel) */
.mmdp-hub .hub-sec-head h2.oneline{white-space:nowrap}
.mmdp-hub .hub-swim{position:relative}
.mmdp-hub .hub-rail{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:16px;padding-bottom:6px}
.mmdp-hub .hub-rail::-webkit-scrollbar{display:none}
.mmdp-hub .hub-card{flex:0 0 300px;max-width:84vw;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s,border-color .25s,background .25s;display:flex;flex-direction:column}
@media(hover:hover){.mmdp-hub .hub-card:hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--surface-2)}}
.mmdp-hub .hub-card:active{transform:scale(.99);background:var(--surface-2)}
.mmdp-hub .hub-thumb{height:142px;background:linear-gradient(135deg,#1a2030,#0a0e16);background-size:cover;background-position:center}
.mmdp-hub .hub-cbody{padding:15px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.mmdp-hub .hub-card .hub-fmt{font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ac)}
.mmdp-hub .hub-card .hub-card-t{font-family:var(--f-ui);font-weight:600;font-size:16.5px;line-height:1.25;color:var(--text)}
.mmdp-hub .hub-swim-fade{position:absolute;top:0;bottom:0;width:72px;pointer-events:none;z-index:3;opacity:0;transition:opacity .25s} /* 60→72px: the settled fade width (R3) */
.mmdp-hub .hub-swim-fade.l{left:0;background:linear-gradient(90deg,var(--bg) 12%,transparent)}
.mmdp-hub .hub-swim-fade.r{right:0;background:linear-gradient(270deg,var(--bg) 12%,transparent)}
.mmdp-hub .hub-swim.can-left .hub-swim-fade.l{opacity:1}
.mmdp-hub .hub-swim.can-right .hub-swim-fade.r{opacity:1}

/* 6. QUIZ CTA + inline quiz */
/* gradient pinned across states (sits above the button armour) so hover
   doesn't flash the theme's link/button colour */
/* white-space:normal !important on EVERY quiz button — Elementor force-sets
   white-space:nowrap on bare <button>s, which stopped the CTA heading and the
   option labels wrapping → text clipped at the right edge and the whole block
   overflowed the viewport on mobile (the "cut off halfway through park" bug). */
.mmdp-hub .hub-quizcta,.mmdp-hub .hub-quizcta:hover,.mmdp-hub .hub-quizcta:focus,.mmdp-hub .hub-quizcta:focus-visible,.mmdp-hub .hub-quizcta:active{
	position:relative;overflow:hidden;width:100%;max-width:100%;text-align:left;white-space:normal!important;
	background:linear-gradient(120deg,rgba(62,181,245,.14),rgba(62,181,245,.05))!important;
	border:1px solid var(--line-2);border-radius:var(--radius);padding:32px 36px;box-shadow:none!important;outline:none!important;-webkit-appearance:none;appearance:none;
	display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;cursor:pointer}
.mmdp-hub .hub-quizcta:hover,.mmdp-hub .hub-quizcta:focus-visible{border-color:var(--ac)!important}
.mmdp-hub .hub-quizcta>span:first-child{flex:1 1 auto;min-width:0}
.mmdp-hub .hub-quizcta .qc-ic{display:block;font-family:var(--f-mono);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin-bottom:8px}
.mmdp-hub .hub-quizcta .qc-h{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(23px,3vw,31px);line-height:1.05;max-width:24ch;color:var(--text);white-space:normal!important;overflow-wrap:anywhere}
/* opened panel: neutral grey surface (not blue), clear gap below the CTA */
.mmdp-hub .hub-quiz-panel{position:relative;margin-top:16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:34px 36px;animation:mmdpQfade .3s ease;overflow:hidden}
@keyframes mmdpQfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Plain × aligned to the page — Elementor was painting it as a solid blue button. Armour it to a transparent, borderless icon across every state. */
.mmdp-hub .hub-quiz-x,.mmdp-hub .hub-quiz-x:hover,.mmdp-hub .hub-quiz-x:focus,.mmdp-hub .hub-quiz-x:focus-visible,.mmdp-hub .hub-quiz-x:active{
	position:absolute;top:6px;right:8px;font-size:24px;line-height:1;color:var(--muted);
	background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important;-webkit-appearance:none;appearance:none;padding:12px;cursor:pointer}
	/* padding 12px (was 4) = 48px hit target; top/right adjusted so the × glyph hasn't moved (R1 touch floor) */
.mmdp-hub .hub-quiz-x:hover{color:var(--text)!important}
.mmdp-hub .hub-quiz-prog{height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-bottom:18px;max-width:520px}
.mmdp-hub .hub-quiz-prog i{display:block;height:100%;background:var(--ac);border-radius:999px;transition:width .3s}
.mmdp-hub .hub-quiz-step{font-family:var(--f-mono);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.mmdp-hub .hub-quiz-q{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2.6vw,26px);line-height:1.15;margin-bottom:18px;color:var(--text);overflow-wrap:anywhere;max-width:100%}
.mmdp-hub .hub-quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:min(680px,100%)}
/* Options: armour bg/white-space/height across all states so Elementor can't
   force nowrap (clipping) or recolour them, and so wrapped labels of different
   lengths can't overlap (height:auto + grid stretch keeps rows aligned). */
.mmdp-hub .hub-quiz-opt,.mmdp-hub .hub-quiz-opt:focus,.mmdp-hub .hub-quiz-opt:focus-visible,.mmdp-hub .hub-quiz-opt:active{
	min-width:0;height:auto;min-height:0;white-space:normal!important;overflow-wrap:anywhere;
	text-align:left;font-family:var(--f-ui);font-size:14.5px;font-weight:500;line-height:1.35;color:var(--text)!important;
	background:var(--surface)!important;border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;
	box-shadow:none!important;outline:none!important;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .18s,background .18s,color .18s,transform .18s}
@media(hover:hover){.mmdp-hub .hub-quiz-opt:hover{border-color:var(--ac)!important;background:var(--surface-2)!important;color:var(--text)!important;transform:translateY(-1px)}} /* colour pinned on hover too — Elementor could flash it (R1); lift gated to hover devices (R3) */
.mmdp-hub .hub-quiz-opt:active{background:var(--surface-3)!important;border-color:var(--ac)!important;transform:scale(.995)}
/* Result name is WHITE for clarity (George, 15 June). Park accent moved to the eyebrow only, so the park still "reads" without tinting the heading low-contrast. */
.mmdp-hub .hub-quiz-result .qc-ic{display:block;font-family:var(--f-mono);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin-bottom:8px}
.mmdp-hub .hub-quiz-result.mk .qc-ic{color:var(--park-mk)}.mmdp-hub .hub-quiz-result.ep .qc-ic{color:var(--park-ep)}.mmdp-hub .hub-quiz-result.hs .qc-ic{color:var(--park-hs)}.mmdp-hub .hub-quiz-result.ak .qc-ic{color:var(--park-ak)}
.mmdp-hub .hub-quiz-result h3{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,3.4vw,34px);line-height:1.05;margin-bottom:10px;color:#fff}
/* result reveal (R4 fold): after a ten-question investment the result earns a
   moment — the bar sweeps to 100% (hub.js), then eyebrow → name → blurb →
   actions stagger in. Reduced-motion users get the instant swap (gated in the
   reduced-motion block below). */
@keyframes mmdpQrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mmdp-hub .hub-quiz-result>*{animation:mmdpQrise .5s cubic-bezier(.2,.7,.2,1) both}
.mmdp-hub .hub-quiz-result>h3{animation-delay:.08s}
.mmdp-hub .hub-quiz-result>p{animation-delay:.16s}
.mmdp-hub .hub-quiz-result>.hub-quiz-actions{animation-delay:.26s}
.mmdp-hub .hub-quiz-result p{color:var(--muted);font-size:15px;line-height:1.6;max-width:60ch;margin-bottom:20px;white-space:normal!important;overflow-wrap:anywhere}
.mmdp-hub .hub-quiz-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* Retake = ghost (transparent) button. Elementor was painting it solid blue with
   white text (its default button style) — pin a transparent background + our own
   text/border across every state so the only hover change is ours. */
.mmdp-hub .hub-quiz-ghost,.mmdp-hub .hub-quiz-ghost:focus,.mmdp-hub .hub-quiz-ghost:focus-visible,.mmdp-hub .hub-quiz-ghost:active{
	font-family:var(--f-ui);font-size:14px;font-weight:500;white-space:normal!important;color:var(--muted)!important;
	background:transparent!important;border:1px solid var(--line-2);border-radius:999px;padding:12px 22px;
	box-shadow:none!important;outline:none!important;-webkit-appearance:none;appearance:none;cursor:pointer}
.mmdp-hub .hub-quiz-ghost:hover{color:#fff!important;border-color:#fff!important;background:transparent!important}
@media(max-width:560px){.mmdp-hub .hub-quiz-opts{grid-template-columns:1fr}.mmdp-hub .hub-quiz-panel{padding:26px 20px}}

/* 7. FAQ */
.mmdp-hub .hub-faq details{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;background:var(--surface);overflow:hidden}
.mmdp-hub .hub-faq summary{padding:17px 20px;cursor:pointer;font-family:var(--f-ui);font-weight:500;font-size:15.5px;color:var(--text);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.mmdp-hub .hub-faq summary::-webkit-details-marker{display:none}
.mmdp-hub .hub-faq summary::after{content:"+";font-family:var(--f-mono);color:var(--ac);font-size:18px;transition:transform .2s}
.mmdp-hub .hub-faq details[open] summary::after{transform:rotate(45deg)}
.mmdp-hub .hub-faq-a{padding:0 20px 18px;color:var(--muted);font-size:15px;max-width:74ch;line-height:1.6}
/* FAQ animated open (R4 fold) — same interpolate-size enhancement as the park FAQ */
@supports (interpolate-size:allow-keywords){
	.mmdp-hub .hub-faq details{interpolate-size:allow-keywords}
	.mmdp-hub .hub-faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .28s cubic-bezier(.2,.7,.2,1),content-visibility .28s allow-discrete}
	.mmdp-hub .hub-faq details[open]::details-content{block-size:auto}
	@media(prefers-reduced-motion:reduce){.mmdp-hub .hub-faq details::details-content{transition:none}}
}

/* responsive — desktop grid → tablet → mobile (single, landscape, swipe) */
@media(max-width:1040px){.mmdp-hub .hub-browse6{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
	.mmdp-hub .hub-live-grid{grid-template-columns:1fr 1fr}
	.mmdp-hub .hub-live-filter{display:block}
}
@media(max-width:768px){
	.mmdp-hub.hub-block{padding:40px 0}
	.mmdp-hub .hub-browse6{grid-template-columns:1fr}
	/* pick-your-park: full-width landscape cards stacked (George's mobile spec).
	   Use min-height, not aspect-ratio — aspect-ratio on these flex cards was
	   collapsing the last card and overlapping the next section (13 Jun). */
	.mmdp-hub .hub-park-row{grid-template-columns:1fr;gap:14px}
	.mmdp-hub .hub-park-card{aspect-ratio:auto;min-height:200px;height:auto}
	.mmdp-hub .hub-park-card .hub-pc-name{font-size:22px}
	/* quiz: one column, tighter padding so nothing clips */
	.mmdp-hub .hub-quizcta,.mmdp-hub .hub-quizcta:hover,.mmdp-hub .hub-quizcta:focus,.mmdp-hub .hub-quizcta:active{padding:24px 20px}
	.mmdp-hub .hub-quiz-panel{padding:24px 18px}
	.mmdp-hub .hub-quiz-opts{grid-template-columns:1fr}
}
@media(max-width:640px){
	.mmdp-hub.hub-hero{padding:48px 0 40px}
	.mmdp-hub .hub-h1{font-size:clamp(30px,9vw,40px)}
	.mmdp-hub .hub-lede{font-size:15px;line-height:1.55}
	.mmdp-hub .hub-search{padding:9px 14px}
	.mmdp-hub .hub-search input[type=search]{font-size:13px}
	.mmdp-hub .hub-live-grid{grid-template-columns:1fr}
	.mmdp-hub .hub-sec-head{flex-wrap:wrap;gap:6px}
	.mmdp-hub .hub-sec-head h2,.mmdp-hub .hub-sec-head h2.oneline{font-size:21px;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
	.mmdp-hub .hub-aurora{animation:none}
	.mmdp-hub .hub-live-card h3 .d{animation:none}
	/* R3 gaps: quiz/search fades + hover lifts sit still under reduced motion */
	.mmdp-hub .hub-quiz-panel,.hub-search-ov.open,.mmdp-hub .hub-quiz-result>*{animation:none!important}
	.mmdp-hub .hub-park-card,.mmdp-hub .hub-park-card .media,.mmdp-hub .hub-card,.mmdp-hub .hub-b6-card,.mmdp-hub .hub-btn,.mmdp-hub .hub-quiz-opt{transition:none}
	/* v0.27: scroll reveals sit still too (JS also skips; belt & braces) */
	.mmdp-hub.hub-block.io-wait{opacity:1}
	.mmdp-hub.hub-block.io-in{animation:none}
	.mmdp-hub .hub-now .live-dot{animation:none}
}

/* ---------------- keyboard focus (R1 — the one true critical) ----------------
   The hub predates the park.css chip ring (confirmed drift) — this is the same
   design-system focus standard. Armoured components listed explicitly so this
   rule lands later at equal specificity and beats box-shadow:none!important.
   :focus-visible only — zero change for mouse users. */
.mmdp-hub a:focus-visible,
.mmdp-hub button:focus-visible,
.mmdp-hub summary:focus-visible,
.mmdp-hub .hub-lfm-select:focus-visible,
.mmdp-hub button.hub-search:focus-visible,
.mmdp-hub .hub-quizcta:focus-visible,
.mmdp-hub .hub-quiz-x:focus-visible,
.mmdp-hub .hub-quiz-opt:focus-visible,
.mmdp-hub .hub-quiz-ghost:focus-visible,
.mmdp-hub.hub-search-ov .hub-sr-input:focus-visible,
.mmdp-hub.hub-search-ov .hub-sr-close:focus-visible,
.mmdp-hub.hub-search-ov .hub-sr-item:focus-visible{
	outline:none!important;
	box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 70%,transparent)!important}
/* park cards / quiz CTA keep their border-radius under the ring */
.mmdp-hub .hub-park-card:focus-visible{border-color:var(--ac)!important}

/* ====================================================================
   HOVER MOTION STANDARD (v0.30.0)
   An audit of every :hover rule in this file found a set that change colour,
   background or border with NO transition declared, so those properties
   snapped instantly while neighbouring properties animated. That mismatch is
   what reads as "jolty". One curve, two durations, applied consistently.
   Colour-only changes get the fast duration; anything that moves gets the
   standard one. These sit last in the file so they win on cascade order at
   equal specificity, which is deliberate — do not re-order.
   ==================================================================== */
.mmdp-hub{--mm-ease:cubic-bezier(.22,.7,.28,1);--mm-t:.22s;--mm-t-fast:.13s}

/* colour-only */
.mmdp-hub .hub-sec-link,
.mmdp-hub .hub-quiz-x,
.hub-search-ov .hub-sr-close{
	transition:color var(--mm-t-fast) var(--mm-ease)}

/* chrome that changes fill or edge */
.mmdp-hub button.hub-search,
.mmdp-hub .hub-lfm-select,
.mmdp-hub .hub-quizcta,
.mmdp-hub .hub-quiz-ghost,
.hub-search-ov .hub-sr-item{
	transition:background var(--mm-t-fast) var(--mm-ease),color var(--mm-t-fast) var(--mm-ease),border-color var(--mm-t-fast) var(--mm-ease)}

/* things that move: named properties + a real ease-out, replacing the default `ease` */
.mmdp-hub .hub-card,
.mmdp-hub .hub-park-card,
.mmdp-hub .hub-b6-card,
.mmdp-hub .hub-quiz-opt,
.mmdp-hub .hub-btn{
	transition:transform var(--mm-t) var(--mm-ease),border-color var(--mm-t) var(--mm-ease),background var(--mm-t) var(--mm-ease),box-shadow var(--mm-t) var(--mm-ease),color var(--mm-t-fast) var(--mm-ease)}

@media (prefers-reduced-motion:reduce){
	.mmdp-hub .hub-card,.mmdp-hub .hub-park-card,.mmdp-hub .hub-b6-card,.mmdp-hub .hub-quiz-opt,.mmdp-hub .hub-btn{
		transition:border-color var(--mm-t-fast) linear,background var(--mm-t-fast) linear,color var(--mm-t-fast) linear}
	/* the lifts are !important in their own rules, so cancelling needs to be too */
	.mmdp-hub .hub-card:hover,.mmdp-hub .hub-b6-card:hover,.mmdp-hub .hub-quiz-opt:hover,.mmdp-hub .hub-btn:hover{transform:none!important}
}