/*
 * WordPress-only additions to the design CSS (assets/css is copied unchanged from the design and preview).
 * Only what the preview never needed because it had placeholders: real photos and maps, sponsor logos, notes on
 * performance rows, the status notice above a performance list, and the announcement bar.
 */

/* Real headshots fill the 4:5 frame (the design's silhouette/initials remain the fallback). */
.headshot.has-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Venue map image in the design's map area, with the OpenStreetMap credit. */
.venue .map.has-img{position:relative; padding:0; margin:0; min-height:300px; overflow:hidden; display:block}
.venue .map.has-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.venue .map .map-credit{position:absolute; right:0; bottom:0; padding:3px 8px; font-size:12px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--oo-ink); background:rgba(244,244,243,.85)}
.venue.venue-nomap{grid-template-columns:1fr}
@media (max-width:760px){ .venue .map.has-img{min-height:200px} }

/* Sponsor logos sit where the wordmarks do. */
.sponsor .sponsor-logo{max-width:180px; max-height:72px; width:auto; height:auto; object-fit:contain}

/* A performance's own note (postponed, cancelled, rescheduled). */
.perf .p-note{margin:6px 0 0; color:var(--muted)}

/* Status notice above the performance list of a postponed or cancelled production. */
.perf-notice{margin:0 0 24px}

/* Announcement bar: a slim band above the header (decision 2026-10-26), in the stage palette. */
.announce{background:var(--oo-umber); color:var(--oo-paper); border-bottom:1px solid rgba(182,157,111,.35)}
.announce-inner{max-width:1360px; margin:0 auto; padding:10px 32px; display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; justify-content:center; text-align:center; font-size:15px; line-height:1.4}
.announce p{margin:0}
.announce a{color:var(--oo-gold); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.announce a:hover{color:var(--oo-paper)}
@media (max-width:760px){ .announce-inner{padding:8px 16px; font-size:14px} }
/* Important (cancellations, postponements, schedule changes): the design's red, white text. */
.announce.announce-important{background:var(--oo-red); border-bottom-color:var(--oo-red-dk); font-weight:600}
.announce.announce-important a{color:#fff}
.announce.announce-important a:hover{color:var(--oo-warm)}

/* Homepage promotion block: the Support band layout; without an image the text is centred on its own. */
.give.promo-noimg{grid-template-columns:1fr}
.give.promo-noimg .give-text{margin:0 auto; align-items:center; text-align:center}

/* Page text written in the editor (policies and other plain pages): headings and lists in the design's type. */
.prose h2,.prose h3,.prose h4{font-family:var(--fh,var(--fh-d)); font-weight:var(--hw,600); color:var(--fg); text-wrap:balance; letter-spacing:-.005em}
.prose h2{font-size:calc(clamp(24px,2.2vw,28px) * var(--hs,1)); line-height:1.18; margin:1.6em 0 .5em}
.prose h3{font-size:calc(21px * var(--hs,1)); line-height:1.25}
.prose > :first-child{margin-top:0}
.prose ul,.prose ol{margin:1em 0; padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.35em}
.prose li::marker{color:var(--accent)}
.prose blockquote{margin:1.2em 0; padding-left:1em; border-left:2px solid var(--accent); font-style:italic}
.prose p + ul,.prose p + ol,.prose ul + p,.prose ol + p{margin-top:1em}

/* A form that is not connected yet (Phase 4.4a): the card keeps its place in the layout. */
.form-pending{justify-content:center; min-height:200px; text-align:center}

/* Gift box: One-time / Monthly split the full width (the design CSS left an empty strip beside them). */
.givebox .seg{display:grid; grid-template-columns:1fr 1fr}
.givebox .seg button{width:100%}

/* An embedded donation form (Embed destinations) in place of the gift box. */
.give-embed .give-frame{display:block; width:100%; border:0; background:#fff}

/* ---------- Fluent Forms in the design's form style (Phase 4.4b). Scoped to .oo75-ff (the site's form spots). ---------- */
.oo75-ff .frm-fluent-form fieldset{display:flex; flex-wrap:wrap; gap:20px 16px; border:0; padding:0; margin:0; min-width:0}
.oo75-ff .ff-el-group{flex:1 1 100%; display:flex; flex-direction:column; gap:8px; min-width:0; margin:0}
.oo75-ff .ff-el-group.oo75-half{flex:1 1 calc(50% - 8px)}
@media (max-width:640px){ .oo75-ff .ff-el-group.oo75-half{flex-basis:100%} }
.oo75-ff .ff-el-input--label{margin:0; padding:0}
.oo75-ff .ff-el-input--label label{font-size:16px; font-weight:600; color:var(--fg); margin:0; letter-spacing:0; text-transform:none; display:inline}
.oo75-ff .ff-el-input--label.ff-el-is-required.asterisk-right label::after{content:" *"; color:var(--oo-red); margin:0}
.t-umber .oo75-ff .ff-el-input--label.ff-el-is-required.asterisk-right label::after{color:#e07a6e}
.oo75-ff .ff-el-form-control{width:100%; min-height:48px; padding:10px 14px; background:var(--field-bg); color:var(--fg); border:1px solid var(--oo-field-bd); border-radius:var(--r); font:inherit; font-size:17px; line-height:1.4; box-shadow:none}
.oo75-ff textarea.ff-el-form-control{min-height:132px; resize:vertical}
.oo75-ff .ff-el-form-control::placeholder{color:var(--muted); opacity:1}
.oo75-ff .ff-el-form-control:hover{border-color:var(--fg)}
.oo75-ff .ff-el-form-control:focus{border-color:var(--fg); outline:3px solid var(--focus); outline-offset:1px; box-shadow:none}
.oo75-ff .ff-el-is-error .ff-el-form-control{border-color:var(--oo-red); border-width:2px}
.t-umber .oo75-ff .ff-el-is-error .ff-el-form-control{border-color:#e07a6e}
.oo75-ff .ff-el-help-message{font-size:15px; color:var(--muted); font-style:normal; margin:0}
.oo75-ff .error.text-danger,.oo75-ff .ff-el-is-error .text-danger{color:var(--oo-red); font-size:15px; margin:4px 0 0}
.t-umber .oo75-ff .error.text-danger{color:#e07a6e}
/* Checkboxes and radios: the design's .check rows, side by side. */
.oo75-ff .ff-el-input--content:has(> .ff-el-form-check){display:flex; flex-wrap:wrap; gap:0 28px}
.oo75-ff .ff-el-form-check{margin:0}
.oo75-ff .ff-el-form-check-label{display:flex; align-items:center; gap:12px; min-height:44px; font-size:17px; font-weight:400; color:var(--fg); cursor:pointer; margin:0}
.oo75-ff .ff-el-form-check-input{width:22px; height:22px; margin:0; accent-color:var(--oo-red); flex:none}
.oo75-ff .oo75-check .ff-el-input--label{display:none}
/* Submit row. */
.oo75-ff .ff_submit_btn_wrapper{flex:1 1 100%; margin:4px 0 0}
.oo75-ff .ff-btn.btn{border-radius:var(--r); font:inherit; font-weight:600; line-height:1.2}
.oo75-ff .ff-message-success{border:0; box-shadow:none; padding:0; margin:0; background:transparent; color:var(--fg); font-size:18px}
.oo75-ff .ff-el-turnstile{min-height:65px}
/* Header cart: WooCommerce swaps this slot after "Add to cart"; it lays out as if it were not there. */
.oo75-cart-slot{display:contents}