/* space.danmagaymusic.com - composition layer over the Claude Design export (Cosmos).
   EVERY RULE NEEDS !important: the export puts an inline style="" on essentially every element, and an inline
   declaration beats any stylesheet rule that is not marked. Assert the COMPUTED value in a browser afterwards. */

[hidden] { display: none !important; }
[data-pending] { opacity: .5 !important; cursor: default !important; }

/* Press feedback: silence between a tap and a response reads as "it did not register". The property list keeps
   what these controls already animate and adds a fast transform. */
a, button, [role="button"] {
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), background .25s, color .25s, border-color .25s, box-shadow .3s !important;
}
a:active, button:active, [role="button"]:active { transform: scale(.97) !important; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #6FE3FF !important; outline-offset: 3px !important;
}

/* Reduced motion. The export's own rule shortens durations, but scroll-driven animations (animation-timeline:
   view()) ignore duration entirely - they would still move with the scrollbar. Detaching the timeline makes them
   settle at their end state, so nothing is left invisible. */
@media (prefers-reduced-motion: reduce) {
  * { animation-timeline: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ── safe areas (viewport-fit=cover) ── ADD the inset to the design's padding; never replace it. ── */
nav {
  padding-top: calc(14px + env(safe-area-inset-top)) !important;
  padding-left: calc(clamp(16px, 3.5vw, 48px) + env(safe-area-inset-left)) !important;
  padding-right: calc(clamp(16px, 3.5vw, 48px) + env(safe-area-inset-right)) !important;
}
[data-hero], main > section, main[data-prose] {
  padding-left: calc(clamp(16px, 3.5vw, 48px) + env(safe-area-inset-left)) !important;
  padding-right: calc(clamp(16px, 3.5vw, 48px) + env(safe-area-inset-right)) !important;
}
/* The bands section carries its horizontal padding on its inner grid, not on the section. */
#bands { padding-left: env(safe-area-inset-left) !important; padding-right: env(safe-area-inset-right) !important; }
[data-footer] {
  padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  padding-left: calc(clamp(16px, 3.5vw, 48px) + env(safe-area-inset-left)) !important;
  padding-right: calc(clamp(16px, 3.5vw, 48px) + env(safe-area-inset-right)) !important;
}

/* ── phones and touch ────────────────────────────────────────────────────────────── */
@media (max-width: 820px), (pointer: coarse) {
  [data-nav-cta], [data-nav-link], [data-row] a, [data-chip], [data-toggle], #presenters a, #tour a,
  [data-hero] a, #dates a, #listen a, #press a, [data-footer] a, [data-booking-send] {
    min-height: 44px !important; display: inline-flex !important; align-items: center !important;
  }
  [data-booking-form] input, [data-booking-form] select { min-height: 44px !important; }
  main p a { padding-block: 11px !important; }
}

/* A seven-link nav wrapped onto three rows on a phone. Below 760px the section links go and the wordmark and the
   one conversion control stay - the hero already offers "Next show" and "Listen". */
@media (max-width: 760px) {
  [data-nav-link] { display: none !important; }
  [data-nav-cta] { padding: 0 18px !important; }
}

/* The dates grid is three columns that cannot fit a phone: date and CTA stack beside the details. */
@media (max-width: 560px) {
  [data-row] { grid-template-columns: 1fr !important; gap: 6px !important; }
  [data-row] > :last-child { justify-self: start !important; }
}

/* A tap must not leave a link coloured as if hovered. */
@media (hover: none), (pointer: coarse) { a:hover { color: inherit !important; } }

/* In-page jumps land BELOW the sticky nav. "Next show", "Listen" and "Claim the next stop" are anchors, and the nav is
   sticky - measured 73px tall at 390 on 15 Sep 2026 - so a section's eyebrow and heading arrived hidden under it. */
main section[id], header[id] { scroll-margin-top: calc(84px + env(safe-area-inset-top)) !important; }

/* THE NAV WRAPPED TO TWO ROWS ON A TABLET. Seven section links plus Book Dan need more than 768px: mobile-audit
   measured 152px of chrome at 768 (73 at 414, 91 at 1024), 15 Sep 2026. A desktop nav folding into two rows is exactly
   what the brief rules out, so the phone treatment - wordmark and the one conversion control - holds up to 1023px. */
@media (max-width: 1023px) {
  [data-nav-link] { display: none !important; }
}

/* "What happens to it", the privacy link under Send inquiry, measured 41px tall with the booking form open at 320,
   390, 414 and 768 upward - 11px of padding on a 19px line. 12.5px each side is 44. The same fault, and the same fix,
   as DM in the PM. */
@media (max-width: 820px), (pointer: coarse) {
  [data-booking-form] p a { padding-block: 12.5px !important; display: inline-block !important; }
}

/* Booking form sends in the page (prepare.js 6-send). The honeypot is off-screen, not display:none - some bots skip
   hidden fields. The status line is the only feedback a visitor gets. */
[data-hp] { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
[data-booking-status] { margin: 14px 0 0 !important; min-height: 1.4em; font-family: Archivo, sans-serif !important; font-size: 14px !important; letter-spacing: .02em; color: rgba(237,233,247,.78) !important; }
[data-booking-status][data-state="sent"] { color: #6FE3FF !important; }
[data-booking-status][data-state="error"] { color: #FF9AB8 !important; }
[data-booking-send]:disabled { opacity: .6; cursor: progress; }