/* www.danmagaymusic.com/teaching/ - our rules over a Claude Design export.
   EVERY ELEMENT IN AN EXPORT CARRIES ITS OWN inline style="", so an unmarked rule here loses silently. Anything
   that has to win says !important and says why, and the computed value is asserted in a browser afterwards -
   "the rule is in the served stylesheet" and "the rule applies to the element" are different claims. */

/* ── focus, which the export does not style at all ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #14267B !important; outline-offset: 3px !important;
}

/* ── reduced motion ──
   The ornaments need their own line for the reason the trio site proved the hard way: prepare-teaching.js writes
   each period as `[data-orn="N"]{animation-duration:..!important}`, which at (0,1,0) beats a bare `*` however late
   the `*` rule appears. `animation:none` rather than a .001ms cycle, because a collapsed cycle lands every element
   on its FINAL keyframe and a final keyframe is sometimes opacity:0 - which removes content from the page for the
   one person who asked for less movement, not more. */
@media (prefers-reduced-motion: reduce) {
  * { animation-timeline: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  [data-orn] { animation: none !important; }
}

/* ── the press, which a phone has instead of a hover ──
   Silence between a tap and the network reads as "it didn't register". 94 elements in this export carry their own
   inline `transition`, so an unmarked rule loses to every one of them. */
button:active, a:active, [data-tier]:active, [data-slot]:active, [data-mode]:active, [data-book-this]:active {
  transform: scale(.97) !important; transition: transform .16s cubic-bezier(.22,1,.36,1) !important;
}
@media (hover: hover) and (pointer: fine) {
  button:hover, [data-tier]:hover, [data-slot]:hover, [data-mode]:hover { filter: brightness(1.06); }
}

/* ── the selected state, which React used to own ── */
[data-tier][aria-pressed="true"], [data-mode][aria-pressed="true"], [data-slot][aria-pressed="true"] {
  background: #14267B !important; border-color: #14267B !important; color: #F7F3EA !important;
}

/* ── the honeypot. Never display:none - some bots skip what a browser would not render ── */
[data-hp] { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── 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(20px, 6vw, 96px) + env(safe-area-inset-left)) !important;
  padding-right: calc(clamp(20px, 6vw, 96px) + env(safe-area-inset-right)) !important;
}
section, header, footer {
  padding-left: calc(clamp(20px, 6vw, 96px) + env(safe-area-inset-left)) !important;
  padding-right: calc(clamp(20px, 6vw, 96px) + env(safe-area-inset-right)) !important;
}

/* ── thumbs ──
   Keyed on (pointer: coarse) as well as width, because an iPhone in landscape is an 844px viewport - past every
   mobile breakpoint and still a thumb on glass. The credit line is exempt by name: it is a house lockup pinned to
   11.5px and it is not a control. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  button, select, input:not([type="hidden"]):not([type="checkbox"]), textarea, a[href]:not(.pkc) {
    min-height: 44px !important;
  }
  input[type="checkbox"] { width: 24px !important; height: 24px !important; }
  [data-slot], [data-tier], [data-mode] { padding: 12px 18px !important; }
}

/* A grid track with a fixed pixel floor cannot shrink below it, so on a 320px phone it hangs past the edge - and
   an export ships no media queries at all to catch that. Collapsing to a single column below 420px is the fix, and
   it is SCOPED TO A NARROW WIDTH on purpose.
   THE FIRST VERSION OF THIS BLOCK ALSO CARRIED `[style*="minmax("] { grid-template-columns: inherit }` AT EVERY
   WIDTH, which is not a fix, it is a demolition: `inherit` takes the PARENT's track list, so every grid in the
   export whose inline style mentions minmax silently became whatever its container happened to be. At 1440 it put
   the first testimonial in a column one word wide and squeezed the whole booking form into a strip down the left
   of its section. Every probe was green - nothing overflowed, nothing 404'd, no console error - and it was
   obvious in the first full-page screenshot. That is the argument for looking, in one line. */
@media (max-width: 420px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* The status line the form writes to, and the error state. */
[data-status] { color: #14267B; }
[data-status][data-state="error"] { color: #A3231C; }
[data-status][data-state="sent"] { color: #1C6B3A; font-weight: 500; }

/* ── the header, composed for a phone ──
   Measured at 320 before this block: 375px of chrome on a 568px screen - the cross-links band over four lines and
   the nav wrapping into itself - before one word of the page. An export has no mobile composition; narrow widths
   are whatever flexbox did.
   Nothing is deleted. The cross-links keep their labels and drop only the descriptive tail prepare-teaching.js
   wrapped for them, and the two in-page nav anchors stand down where the page is a single scroll and the hero
   already offers Book a lesson. A wider window gets the design back exactly as drawn. */
@media (max-width: 520px) {
  [data-tail] { display: none !important; }
  [data-nav-section] { display: none !important; }
  nav { padding-top: calc(10px + env(safe-area-inset-top)) !important; padding-bottom: 10px !important; }
}

/* THE STRIP IS ONE ROW ON A PHONE, and the thing making it three was the rule two blocks up: `min-height: 44px`
   on every link is right for a control and wrong for a dense cross-site strip, because four 44px items wrapping
   is a 124px band before the page starts. Measured at 320: 297px of chrome above the headline on a 568px screen.
   The touch target is kept - each link is still 44px tall - by making the row FIT instead of wrap: 9px type and an
   8px gap put all four in 262px of the 288px available, so the band costs 44px once rather than 44px three times.
   That is the pairing rule from the home page's own mobile pass, which cost a round there too: a touch-size rule
   and the layout that absorbs it belong in the same block, or growing the targets makes the header worse. */
@media (max-width: 520px) {
  [data-crosslinks] {
    gap: 8px !important; padding: 0 12px !important; flex-wrap: nowrap !important;
    font-size: 9px !important; letter-spacing: .1em !important; white-space: nowrap !important;
  }
  [data-crosslinks] > * { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
}

/* ── the footer's contact row, found by the full responsive matrix ──
   `display:flex; gap:22px; no wrap` held email + Facebook + the two band links in one row - 473px of content in a
   280px slot at 320px, so the page scrolled sideways by up to 173px. Wrapping is the whole fix; nothing here is
   deleted, and above 520px the row is unchanged. */
@media (max-width: 520px) {
  [data-footer-contact] { flex-wrap: wrap !important; gap: 10px 16px !important; row-gap: 8px !important; }
}