/* =========================================================
   C-Note Music Philly · Design E · contact.css
   FAQ, booking form, contact card, dusk footer
   ========================================================= */

/* ---------- FAQ ---------- */
.faq { background: linear-gradient(180deg, #eeeaf8, #ebe5f6); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 100px); align-items: start; }
.faq-intro { position: sticky; top: 120px; }
.faq-intro .display { margin-bottom: 22px; }
.faq-intro a { font-weight: 600; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border-radius: 24px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.85); transition: background .6s, box-shadow .8s var(--ease); }
.faq-item.is-open { background: rgba(255,255,255,.86); box-shadow: var(--shadow-sm); }
.faq-item h3 { margin: 0; font-size: inherit; }
.faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border: 0; border-radius: 24px; background: none; text-align: left; font: 500 clamp(1.25rem, 1.8vw, 1.5rem)/1.25 var(--serif); color: var(--ink); }
.faq-q:hover { color: var(--plum); }
.faq-a p { margin: 0; padding: 0 24px 24px; color: var(--ink-2); }
html:not(.js) .faq-q .plus { display: none; }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-intro { position: static; }
}
@media (max-width: 600px) {
  .faq-q { padding: 18px 18px; }
  .faq-a p { padding: 0 18px 20px; }
}

/* ---------- book ---------- */
.book { background: linear-gradient(180deg, #ebe5f6 0%, #e3d8f3 55%, #d8c9ef 100%); }
.book-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px; align-items: start; }
.form-card { padding: clamp(24px, 4vw, 48px); border-radius: var(--r-lg); }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.field { display: grid; gap: 8px; margin: 0 0 20px; min-width: 0; }
.field > label, .levels-pick legend { font: 600 .86rem/1.3 var(--sans); color: var(--ink); letter-spacing: .01em; }
.req { color: var(--rose); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: 15px 18px; border-radius: 16px; border: 1px solid rgba(75,46,111,.24);
  background: rgba(255,255,255,.85); color: var(--ink); font-size: 1rem; line-height: 1.4;
  transition: border-color .4s, box-shadow .5s var(--ease), background .4s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: #7a7089; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(75,46,111,.4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--plum-2); background: #fff; box-shadow: 0 0 0 4px rgba(109,74,147,.2); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 46px; background: rgba(255,255,255,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b2e6f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center; }
.field [aria-invalid="true"] { border-color: #9b2c4f; box-shadow: 0 0 0 4px rgba(155,44,79,.14); }
.error { margin: 0; font: 600 .88rem/1.35 var(--sans); color: #9b2c4f; }
.levels-pick { border: 0; padding: 0; }
.levels-pick legend { padding: 0; margin-bottom: 10px; }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-row label { position: relative; }
.pick-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-row span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid rgba(75,46,111,.24); background: rgba(255,255,255,.8); font: 500 .93rem/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: background .4s, color .4s, border-color .4s; }
.pick-row span:hover { border-color: var(--plum-2); }
.pick-row input:checked + span { background: var(--plum); border-color: var(--plum); color: #fff; }
.pick-row input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 3px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.form-actions .fine-print { flex: 1 1 220px; margin: 0; }
.form-note { margin-top: 20px; padding: 20px 22px; border-radius: 20px; background: linear-gradient(135deg, rgba(214,240,230,.95), rgba(255,255,255,.9)); border: 1px solid rgba(255,255,255,.95); color: var(--ink); }
.form-note:empty { display: none; }
.form-note strong { display: block; margin-bottom: 4px; font: 600 1.45rem/1.2 var(--serif); }
.form-note p { margin: 0; }
.contact-card { padding: clamp(26px, 3.5vw, 36px); border-radius: var(--r-lg); }
.contact-card h3 { font-size: 2rem; margin-bottom: 10px; }
.contact-card > p { color: var(--muted); }
.contact-line { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 0; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
.contact-line > span:last-child { min-width: 0; overflow-wrap: break-word; font-weight: 600; }
a[href^="tel:"] { white-space: nowrap; }
.contact-line small { display: block; font: 600 .7rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
a.contact-line:hover > span:last-child { color: var(--plum); }
.ci { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--peach), var(--lav)); color: var(--plum); }
.ci svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pay { padding-top: 16px; border-top: 1px solid var(--hair); }
.pay-title { margin: 0 0 10px; font: 600 .7rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pay ul { display: flex; flex-wrap: wrap; gap: 6px; }
.pay li { padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.8); border: 1px solid var(--hair); font: 600 .82rem/1.1 var(--sans); color: var(--ink-2); }
.checked-note { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font: 500 .9rem/1.4 var(--sans); color: var(--ink-2); }
@media (max-width: 980px) { .book-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .row-2 { grid-template-columns: minmax(0, 1fr); }
  .form-actions .btn { width: 100%; }
}

/* ---------- footer: dusk ---------- */
.site-footer {
  position: relative; overflow: hidden; color: #e9e2f5; padding: clamp(150px, 18vw, 230px) 0 34px;
  background: linear-gradient(180deg, #d8c9ef 0, #7a64a3 90px, #3a2a5c 210px, #231a37 100%);
}
.footer-glow { position: absolute; left: 50%; top: 150px; width: min(1100px, 140vw); height: 520px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(248,195,211,.22), rgba(248,195,211,0) 70%); }
.site-footer .container { position: relative; }
.play-on {
  margin: 0; text-align: center; font: italic 500 clamp(4.6rem, 16vw, 13.5rem)/.95 var(--serif); letter-spacing: -.02em;
  background: linear-gradient(100deg, #ffd9c4 5%, #f8c3d3 38%, #d9ccf5 70%, #c9f0e2 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .08em .06em;
}
.footer-tag { margin: 8px 0 clamp(56px, 8vw, 90px); text-align: center; font: 500 .8rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #cfc4e4; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: 36px; padding-top: 40px; border-top: 1px solid rgba(233,226,245,.16); }
.footer-grid h2 { margin-bottom: 14px; font: 600 .72rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #cfc4e4; }
.footer-grid .footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 600 1.6rem/1 var(--serif); color: #fff; }
.footer-grid p { color: #cfc4e4; font-size: .96rem; }
.footer-grid ul li { margin-bottom: 8px; }
.site-footer a { color: #f3eefb; text-decoration: none; border-bottom: 1px solid rgba(243,238,251,.25); transition: border-color .4s, color .4s; }
.site-footer a:hover { color: #ffd9c4; border-color: #ffd9c4; }
.site-footer :focus-visible { outline-color: #ffd9c4; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(233,226,245,.16); font-size: .88rem; color: #bfb3d6; }
.footer-bottom p { margin: 0; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }