@charset "utf-8";

/* ===================================================================
   Nightshift accessibility preferences — v2
   =================================================================== */

html.a11y-large-text {
  font-size: 125%;
}

/* Let accessibility-driven text growth win over the one-screen hero design. */
html.a11y-large-text .hero {
  height: auto !important;
}

/* Reading-friendly mode changes everyday reading/UI text while leaving the
   Nightshift script logo and display-heading typefaces intact. Verdana is
   deliberately system-available, so the option adds no font download or
   layout flash and remains useful offline/installed as a web app. */
html.a11y-reading-font
  :where(
    body,
    p,
    li,
    dd,
    dt,
    label,
    input,
    textarea,
    select,
    button,
    .hero-copy,
    .section-lead,
    .section-intro,
    .page-note,
    .contact-dir,
    .button,
    .small,
    .youtube-link,
    .nav > a,
    .social-btn,
    .gig-details,
    .gig-dir,
    .past-year-btn,
    .upcoming-more-btn,
    .gig-loc,
    .gig-time,
    .next-gig-loc,
    .next-gig-time
  ) {
  font-family: Verdana, Tahoma, Arial, sans-serif !important;
}

/* Give longer reading copy a little more separation, but leave hero copy out
   of the spacing override so the fixed-height mobile/Home Screen hero keeps
   its established geometry. */
html.a11y-reading-font
  :where(
    main p:not(.hero-copy),
    main li,
    main dd,
    main dt,
    .section-lead,
    .section-intro,
    .page-note
  ) {
  line-height: 1.62 !important;
  letter-spacing: 0.012em !important;
  word-spacing: 0.05em;
}

html.a11y-high-contrast {
  --text: #ffffff;
  --muted: #f4f0f5;
  --line: rgba(255, 255, 255, 0.62);
  --violet: #ead1ff;
  --blue: #f2e7ff;
}

html.a11y-high-contrast body,
html.a11y-high-contrast footer {
  background-color: #050407;
}

html.a11y-high-contrast
  :where(
    .hero-copy,
    .location,
    .youtube-link,
    .panel,
    .testimonial,
    .footer-cta,
    .next-gig,
    .gig-row,
    .page-note,
    .a11y-setting
  ) {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background-color: #09070d !important;
}

html.a11y-high-contrast :where(.hero-copy, .page-hero .hero-copy, p, li) {
  color: #ffffff;
}

html.a11y-high-contrast .hero h1,
html.a11y-high-contrast .page-hero h1,
html.a11y-high-contrast .section-head h2 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

html.a11y-high-contrast .a11y-dialog {
  border-color: rgba(255, 255, 255, 0.72);
  background: #050407;
}

html.a11y-high-contrast .a11y-setting-description {
  color: #f1edf3;
}

html.a11y-underline-links main a:not(.button):not(.youtube-link),
html.a11y-underline-links footer a:not(.social-btn) {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

html.a11y-reduce-motion {
  scroll-behavior: auto !important;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html.a11y-reduce-motion .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Simplify decorative imagery and translucent surfaces without hiding media. */
html.a11y-simplify-backgrounds :where(.hero, .page-hero) {
  background-image: none !important;
  background-color: #120b20 !important;
}

html.a11y-simplify-backgrounds .hero::before,
html.a11y-simplify-backgrounds .hero::after,
html.a11y-simplify-backgrounds .page-hero::before,
html.a11y-simplify-backgrounds .page-hero::after {
  display: none !important;
}

html.a11y-simplify-backgrounds .logo .star,
html.a11y-simplify-backgrounds .logo .moon {
  display: none !important;
}

html.a11y-simplify-backgrounds
  :where(
    .hero-copy,
    .location,
    .youtube-link,
    .panel,
    .testimonial,
    .footer-cta,
    .next-gig,
    .gig-row,
    .page-note
  ) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: #130e1b !important;
}

/* Entry point ------------------------------------------------------- */
.a11y-trigger {
  font: inherit;
  cursor: pointer;
}

.a11y-floating-trigger {
  position: fixed;
  z-index: 80;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(223, 178, 255, 0.42);
  border-radius: 50%;
  background: rgba(16, 11, 24, 0.94);
  color: #ead3ff;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.a11y-floating-trigger:hover,
.a11y-floating-trigger:focus-visible {
  border-color: rgba(234, 211, 255, 0.82);
  background: #291e3b;
  color: #fff;
  transform: translateY(-2px);
}

.a11y-floating-trigger > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.a11y-floating-trigger .a11y-entry-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

html.a11y-simplify-backgrounds .a11y-floating-trigger {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #130e1b;
}

@media (max-width: 600px) {
  .a11y-floating-trigger {
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-color: rgba(223, 178, 255, 0.34);
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .a11y-floating-trigger .a11y-entry-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  .a11y-floating-trigger:hover {
    transform: none;
  }

  .a11y-floating-trigger:active {
    transform: scale(0.94);
  }
}

@media (forced-colors: active) {
  .a11y-floating-trigger {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
}

/* Settings dialog --------------------------------------------------- */
body.a11y-panel-open {
  overflow: hidden;
}

.a11y-dialog {
  width: min(calc(100% - 36px), 560px);
  max-width: 560px;
  max-height: calc(100vh - 48px);
  max-height: min(760px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  border: 1px solid rgba(223, 178, 255, 0.28);
  border-radius: 22px;
  background: #100b18;
  color: #f7f3ed;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.a11y-dialog::backdrop {
  background: rgba(4, 3, 8, 0.76);
}

.a11y-sheet {
  max-height: calc(100vh - 48px);
  max-height: min(760px, calc(100dvh - 48px));
  padding: 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.a11y-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.a11y-dialog-head > div {
  min-width: 0;
}

.a11y-sheet {
  overflow-wrap: anywhere;
}

.a11y-kicker {
  margin: 0 0 6px;
  color: #dfb2ff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.a11y-dialog h2 {
  margin: 0;
  color: #fff;
  font:
    750 clamp(1.25rem, 4vw, 1.5rem)/1.25 "Manrope",
    Arial,
    sans-serif;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* The dialog title receives focus when the sheet opens so screen readers
   announce the panel context. It is not interactive, so suppress WebKit's
   default blue focus ring while leaving every real control visibly focusable. */
.a11y-dialog h2:focus {
  outline: none;
}

.a11y-intro {
  max-width: 42ch;
  margin: 14px 0 18px;
  color: #c8c1ca;
  font-size: 0.92rem;
  line-height: 1.5;
}

.a11y-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(223, 178, 255, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.a11y-settings-list {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.a11y-setting {
  min-height: 70px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(223, 178, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
  cursor: pointer;
}

.a11y-setting-copy {
  min-width: 0;
  flex: 1 1 9rem;
}

.a11y-setting-title {
  display: block;
  color: #fff;
  font-size: 0.96rem;
  font-weight: 750;
  line-height: 1.3;
  cursor: pointer;
}

.a11y-setting-description {
  display: block;
  margin: 3px 0 0;
  color: #bdb6c2;
  font-size: 0.78rem;
  line-height: 1.4;
}

.a11y-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 48px;
  height: 44px;
  flex: 0 0 48px;
  position: relative;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

/* Keep the familiar track while giving the actual input a 44px hit area. */
.a11y-switch::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  border: 1px solid #8d8592;
  border-radius: 999px;
  background: #2a2430;
  transition:
    background 0.16s ease,
    border-color 0.16s ease;
}

.a11y-switch::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
  transition: transform 0.16s ease;
}

.a11y-switch:checked::before {
  border-color: #ead3ff;
  background: #965bcf;
}

.a11y-switch:checked::after {
  transform: translateX(20px);
}

.a11y-switch:disabled {
  opacity: 0.76;
  cursor: default;
}

.a11y-system-note {
  color: #dfb2ff !important;
}

.a11y-switch:focus-visible,
.a11y-close:focus-visible,
.a11y-reset:focus-visible,
.a11y-done:focus-visible,
.a11y-trigger:focus-visible {
  outline: 3px solid #ead3ff;
  outline-offset: 3px;
}

.a11y-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.a11y-reset,
.a11y-done {
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 10px;
  font:
    750 0.9375rem/1.4 "Manrope",
    Arial,
    sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.a11y-reset {
  border: 1px solid rgba(223, 178, 255, 0.3);
  background: transparent;
  color: #f1eaf3;
}

.a11y-done {
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: #c6a0e8;
  color: #12081f;
}

.a11y-close:hover,
.a11y-close:focus-visible,
.a11y-reset:hover,
.a11y-reset:focus-visible {
  border-color: rgba(223, 178, 255, 0.5);
  background: rgba(183, 140, 255, 0.1);
}

.a11y-done:hover,
.a11y-done:focus-visible {
  background: #d7b8f1;
}

/* Custom switches need explicit system colours: otherwise forced-colour
   displays paint both the thumb and track Canvas, hiding the switch state. */
@media (forced-colors: active) {
  .a11y-switch::before,
  .a11y-switch::after {
    forced-color-adjust: none;
    box-shadow: none;
  }
  .a11y-switch::before {
    background: Canvas;
    border-color: ButtonText;
  }
  .a11y-switch::after {
    background: ButtonText;
  }
  .a11y-switch:checked::before {
    background: Highlight;
    border-color: Highlight;
  }
  .a11y-switch:checked::after {
    background: HighlightText;
  }
  .a11y-switch:disabled {
    opacity: 1;
  }
  .a11y-switch:disabled::before {
    border-color: GrayText;
  }
  .a11y-switch:focus-visible {
    outline-color: Highlight;
  }
}

@media (max-width: 600px) {
  .a11y-dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - max(14px, env(safe-area-inset-top, 0px)));
    max-height: calc(100dvh - max(14px, env(safe-area-inset-top, 0px)));
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
  }

  .a11y-sheet {
    max-height: calc(100vh - max(14px, env(safe-area-inset-top, 0px)));
    max-height: calc(100dvh - max(14px, env(safe-area-inset-top, 0px)));
    padding-top: 22px;
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
  }

  .a11y-setting {
    min-height: 72px;
  }
}

/* Honour the device setting from first render, independently of JavaScript. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

.a11y-entry-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.a11y-trigger:focus-visible {
  outline: 2px solid #dfb2ff;
  outline-offset: 3px;
}
.a11y-setting-control {
  display: grid;
  justify-items: center;
  flex: 0 0 48px;
}
.a11y-switch-state {
  color: #c8c1ca;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.25;
}
.a11y-setting:has(input:checked) {
  border-color: #9672b5;
  background: rgba(198, 160, 232, 0.075);
}
.a11y-setting:has(input:focus-visible) {
  border-color: #ead3ff;
}
.a11y-setting:has(input:disabled) {
  cursor: default;
}
.a11y-setting-control:has(input:checked) .a11y-switch-state {
  color: #ead3ff;
}
.a11y-status {
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #dfbaff;
}
.a11y-status:empty {
  display: none;
}