/* =========================================================================
   Accessibility toolbar + the settings it switches on.
   Markup: partials/a11y.html. Behavior: js/a11y.js.
   ========================================================================= */

/* ---------- the pull-out tab and panel ---------- */
.a11y-tab { position: fixed; right: 0; bottom: 132px; z-index: 10001; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.95rem 0.7rem 0.8rem; border: 0; border-radius: 14px 0 0 14px; cursor: pointer; font-family: inherit; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; color: #04132b; background: linear-gradient(145deg, #ffc14d, #f8a309); box-shadow: -6px 8px 24px rgba(0, 0, 0, 0.35); transform: translateX(calc(100% - 52px)); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s; }
.a11y-tab svg { flex: none; width: 26px; height: 26px; }
.a11y-tab:hover, .a11y-tab:focus-visible, .a11y-tab[aria-expanded='true'] { transform: translateX(0); }
.a11y-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #04132b, -6px 8px 24px rgba(0, 0, 0, 0.35); }
@media (hover: none) { .a11y-tab { transform: translateX(calc(100% - 50px)); } }
@media (max-width: 1199px) { .a11y-tab { bottom: 96px; } }

.a11y-panel { position: fixed; right: 12px; bottom: 12px; z-index: 10002; display: flex; flex-direction: column; width: min(380px, calc(100vw - 24px)); max-height: min(720px, calc(100vh - 24px)); overflow: hidden; border-radius: 22px; color: #fff; background: #04132b; border: 1px solid rgba(248, 163, 9, 0.6); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); animation: a11y-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.a11y-panel[hidden] { display: none; }
@keyframes a11y-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.a11y-panel:focus { outline: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.1rem 0.5rem; }
.a11y-head h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; }
.a11y-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #fff; cursor: pointer; }
.a11y-close svg { width: 20px; height: 20px; } .a11y-close:hover { background: rgba(255, 255, 255, 0.14); }
.a11y-intro { margin: 0; padding: 0 1.1rem 0.7rem; font-size: 0.86rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.a11y-body { overflow-y: auto; padding: 0 1.1rem 0.4rem; -webkit-overflow-scrolling: touch; }
.a11y-group { padding: 0.8rem 0 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.a11y-group h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ffc14d; }
.a11y-group h3 svg { width: 20px; height: 20px; }
.a11y-note { margin: 0 0 0.5rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); }
.a11y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.a11y-btn, .a11y-seg button, .a11y-size button { min-height: 44px; padding: 0.55rem 0.7rem; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.07); color: #fff; font-family: inherit; font-size: 0.84rem; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.a11y-btn:hover, .a11y-seg button:hover, .a11y-size button:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.a11y-btn[aria-pressed='true'], .a11y-seg button[aria-pressed='true'] { background: #f8a309; border-color: #f8a309; color: #04132b; }
.a11y-btn[aria-pressed='true']::before { content: '\2713  '; font-weight: 900; }
.a11y-seg { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.82rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.a11y-size { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; text-align: center; font-size: 0.86rem; font-weight: 700; }
.a11y-size button { font-size: 1.05rem; }
.a11y-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 1.1rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; }
.a11y-foot a { color: #ffd36b; text-decoration: underline; text-underline-offset: 3px; }
.a11y-reset { min-height: 44px; padding: 0.5rem 1rem; border-radius: 999px; border: 1.5px solid #ffc14d; background: transparent; color: #ffd36b; font-family: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer; }
.a11y-reset:hover { background: #ffc14d; color: #04132b; }
.a11y-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) {
  .a11y-panel { right: 6px; left: 6px; bottom: 6px; width: auto; max-height: calc(100vh - 12px); border-radius: 18px; }
  .a11y-tab { padding: 0.6rem 0.7rem 0.6rem 0.65rem; }
}
.a11y-panel button:focus-visible, .a11y-panel a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- reading aid: the sentence being read aloud ---------- */
.a11y-reading { outline: 3px solid #f8a309 !important; outline-offset: 4px; background-color: rgba(248, 163, 9, 0.18) !important; border-radius: 4px; }

/* ---------- settings the buttons switch on (classes live on <html>) ---------- */
html { filter: var(--a11y-filter, none); }
html.a11y-size-1 { font-size: 112.5%; } html.a11y-size-2 { font-size: 125%; } html.a11y-size-3 { font-size: 143.75%; } html.a11y-size-4 { font-size: 162.5%; }
html.a11y-invert img, html.a11y-invert video, html.a11y-invert iframe, html.a11y-invert .a11y-keep { filter: invert(1) hue-rotate(180deg); }
html.a11y-links a:not(.btn):not(.a11y-tab) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; font-weight: 700; outline: 2px solid rgba(248, 163, 9, 0.9); outline-offset: 1px; border-radius: 2px; }
html.a11y-links .btn { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #000; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, 'Trebuchet MS', Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em; }
html.a11y-space body *:not(.a11y-ui):not(.a11y-ui *) { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
html.a11y-lines body *:not(.a11y-ui):not(.a11y-ui *) { line-height: 1.85 !important; }
html.a11y-lines p, html.a11y-space p { margin-bottom: 1.4em; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-still .kp-sparks, html.a11y-still .gx-spotlight, html.a11y-still .ian-beam, html.a11y-still .spark-burst, html.a11y-still .cel-confetti, html.a11y-still .bk-orb { display: none !important; }
html.a11y-still .fade-in-up { opacity: 1 !important; transform: none !important; }
html.a11y-still .mp-ticker-track, html.a11y-still .logo-marquee-track, html.a11y-still .kp-logo-track { transform: none !important; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 8.5-6.5 2L9 20 4 2z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }
html.a11y-cursor a, html.a11y-cursor a *, html.a11y-cursor button, html.a11y-cursor button *, html.a11y-cursor [role='button'] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5a1.6 1.6 0 013.2 0V9l1.2-.2a1.6 1.6 0 011.9 1.2l.2.3 1-.1a1.6 1.6 0 011.7 1.4l.1.5.8-.1a1.5 1.5 0 011.5 1.5V18c0 3-2 5-5 5h-3.5c-1.6 0-2.8-.7-3.7-1.9L4.3 15a1.6 1.6 0 012.4-2L9 15.4V2.5z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 14 3, pointer !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #f8a309 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px #000 !important; border-radius: 4px; }
.a11y-guide { position: fixed; left: 0; right: 0; top: 40%; z-index: 10000; height: 8px; pointer-events: none; background: #f8a309; border-block: 2px solid #000; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0); }
.a11y-guide[hidden], .a11y-mask[hidden] { display: none; }
.a11y-mask { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
.a11y-mask i { position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, 0.72); }
.a11y-mask i:first-child { top: 0; height: var(--mask-top, 38%); }
.a11y-mask i:last-child { bottom: 0; top: var(--mask-bottom, 52%); }

@media print { .a11y-ui { display: none !important; } }

/* ---------- color contrast on light backgrounds (WCAG AA) ----------
   The brand gold (#f8a309) is great on navy but only 2:1 on white. On light sections the same roles use a deeper gold. */
:is(.section-white, .section-soft, .bk-series-light, .kp-answer, .sp-faq, .in-todo, .in-path-head) .eyebrow { color: #9a5b00; }
:is(.section-white, .section-soft, .bk-series-light, .kp-answer, .sp-faq) :is(.bk-h2, h2, h3) em { color: #c27400; }
dt { color: #9a5b00; }
:is(.section-navy, .section-dark, .co-hero, .kp-hero, .hero) dt { color: var(--c-action-gold); }
.in-num, .fade-in-up.is-visible .in-num { color: #c27400; -webkit-text-stroke: 0; text-shadow: none; }
.in-author-k, .in-pn-prev > span, .in-pn-next > span, .in-cat-all, .md-file b, .md-contact b { color: #9a5b00; }

.kp-facts dt { color: #9a5b00; }
.in-path-head .bk-h2 em { color: #c27400; }
.co-event-n, .fade-in-up.is-visible .co-event-n { color: #74839a; -webkit-text-stroke: 0; }
.footer-col h2, .footer-locations h2 { font-family: inherit; font-size: 0.85rem; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-col h2 { color: #fff; margin: 0 0 var(--sp-2); }
.footer-locations h2 { margin: 0 0 0.6rem; font-size: 0.74rem; letter-spacing: 0.08em; color: #fff; }
.footer-col h2.footer-h4-next { margin-top: var(--sp-4); }

/* ---------- larger text: let things wrap instead of running off the screen ---------- */
html[class*='a11y-size-'] body { overflow-wrap: break-word; }
html[class*='a11y-size-'] :is(.btn, .tab-btn, .bk-link, .mm-watch) { white-space: normal; text-align: center; }
html[class*='a11y-size-'] :is(.hero-actions, .bk-hero-actions, .cel-tools, .au-acts, .md-acts, .gx-final-act) { flex-wrap: wrap; }
html[class*='a11y-size-'] .hero-actions .btn { flex: 1 1 auto; font-size: 0.85rem; padding: 0.7rem 1rem; }
/* On wide screens the desktop menu cannot hold larger text, so it switches to the same menu button phones use */
@media (min-width: 1200px) {
  html[class*='a11y-size-'] .primary-nav { display: none; }
  html[class*='a11y-size-'] .menu-toggle { display: inline-flex !important; }
  html[class*='a11y-size-'] .mobile-nav { display: block !important; }
  html[class*='a11y-size-'] .container:has(.mobile-nav) { display: revert; }
}
@media (max-width: 700px) {
  html[class*='a11y-size-'] :is(.kp-stats, .co-stars) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[class*='a11y-size-'] :is(.in-layout, .in-layout-list) { grid-template-columns: minmax(0, 1fr) !important; }
  html[class*='a11y-size-'] :is(.in-side, .in-cats, .in-side-book) { min-width: 0; max-width: 100%; }
  html[class*='a11y-size-'] .mobile-booking-bar .btn { font-size: 0.8rem; padding-inline: 0.5rem; }
}

/* ---------- phones: readable text, comfortable tap targets, nothing wider than the screen ---------- */
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 640px) {
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 auto; min-height: 44px; font-size: 0.8rem; padding: 0.7rem 1rem; white-space: normal; text-align: center; }
  :is(.sp-book-name, .kp-answer-badge, .bk-link, .in-cat-all, .in-card-tag, .bk-tag, .md-live, .sp-step-tag, .kp-move-tag, .sp-finder-label, .gx-aud b, .au-best b, .md-file b, .kp-chips li, .kp-facts dt, .kp-stats span, .co-stars span, .co-float, .rq-trust span, .kp-gap span, .bk-keynote span, .fx-ring b, .mp-checks a, .md-lower span, .ian-climb, .footer-locations h2, .footer-col h2) { font-size: max(12px, 0.75rem) !important; }
  .au-node b { font-size: 10px; }
}
@media (max-width: 420px) {
  main :is([class*='-grid'], [class$='grid'], .kp-stats, .md-pr-side, .mp-q-left, .co-stars) > * { min-width: 0; max-width: 100%; }
  .mobile-booking-bar .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.5rem; font-size: 0.78rem; white-space: nowrap; }
  .kp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* touch targets: footer and breadcrumb links get at least 24px of height */
.footer-col a, .footer-bottom a, .kp-crumbs a, .footer-locations a { display: inline-block; padding-block: 0.3rem; min-height: 24px; }
.footer-col ul > li + li { margin-top: 0.15rem; }
.footer-locations a { padding-block: 0.15rem; }
@media (max-width: 640px) {
  :is(.mp-prog-meta span, .mp-dl, .sc-period-n, .sc-tags em, .fp-lvl, .sc-pass-no, .sc-pass-stub span, .pe-tag, .in-card-flag, .sc-switch b, .ian-vl small, .sc-ticket-k, .sc-board-head, .pe-echo-cap b, .pe-hear-k, .pe-stage-bar span, .ian-spot-tag b, .ian-flow-label, .ian-venn small) { font-size: max(12px, 0.75rem) !important; }
}
@media (max-width: 420px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  .sp-checks { grid-template-columns: minmax(0, 1fr) !important; }
  .sp-checks li { min-width: 0; }
}
.bk-link, .in-cat-all { min-height: 24px; padding-block: 3px; }
@media (max-width: 420px) { .rq-trust { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .rq-trust li { min-width: 0; } .rq-trust span { overflow-wrap: anywhere; } }

/* planner intro script */
.mp-intro-notes { margin: 0 0 var(--sp-2); padding: 1rem 1.2rem; border-radius: 14px; background: #f7f9fc; border: 1px solid var(--border-hairline-light); border-left: 4px solid var(--c-action-gold); }
.mp-intro-notes h3 { margin: 0.6rem 0 0.4rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-executive-blue); }
.mp-intro-notes ul { margin: 0; padding-left: 1.2rem; list-style: disc; } .mp-intro-notes li { margin-bottom: 0.35rem; line-height: 1.5; color: var(--c-charcoal); }
.mp-intro-fill { margin: 0; font-weight: 700; color: var(--c-charcoal); }
.mp-intro .mp-bio-text p { margin: 0 0 0.55rem; font-size: 1.05rem; }
.mp-cue { display: inline-block; padding: 0 0.45em; border-radius: 6px; background: #ffe14d; color: #04132b; font-size: 0.78em; font-weight: 800; letter-spacing: 0.06em; vertical-align: 0.08em; }
.mp-fill { padding: 0 0.3em; border-radius: 4px; background: rgba(248, 163, 9, 0.28); color: #04132b; font-weight: 800; }

/* headshots gallery: wide card, transparent-photo checkerboard */
.mp-sub-note { margin: -0.4rem 0 var(--sp-2); color: var(--text-on-light-muted); max-width: 62ch; }
.mp-shot-wide { grid-column: span 2; display: flex; flex-direction: column; }
.mp-shot-wide .mp-shot-img { aspect-ratio: auto; flex: 1; min-height: 240px; }
.mp-shot-wide .mp-shot-img img { position: absolute; inset: 0; }
.mp-shot-img.is-cutout { background: #fff repeating-conic-gradient(#e4eaf3 0% 25%, #fff 0% 50%) 50% / 24px 24px; }
.mp-shot-img.is-cutout img { object-fit: contain; }
.mp-lb img[src*="cut-"] { background: #fff; }
@media (max-width: 900px) { .mp-shot-wide .mp-shot-img { aspect-ratio: 3 / 2; flex: none; } }

/* questionnaire: two download buttons side by side */
.mp-dl-pair { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.mp-dl-pair .btn { flex: 1 1 200px; justify-content: center; }

/* room layout chooser: the hidden attribute does not hide SVG groups by itself */
.mp-lay g[data-lay][hidden] { display: none; }