/*
 * Changes on top of the Reactor CSS. Kept separate so the original stays untouched.
 *
 * 1. Every page has exactly one H1. The old front page used an H3 for the hero
 *    title; it is an H1 now, styled exactly like the H3 was.
 * 2. Artists and Contact / Booking: their first heading is the H1 now (same look,
 *    .section-title styles it). News had no heading at all; it gets one in the
 *    site's section-title style.
 * 3. Aligned images and blocks in the content – see the section at the end.
 * 4. The mobile menu toggle is a <button> (was a <div>) – reset to look as before,
 *    with a 44 px tap target around the same glyph.
 * 5. Header logo width – see the section at the end.
 */
.hero .hero-text h1 {
  font-weight: 500;
  font-size: 1.1em;
  line-height: 1.5;
  margin: 1em 0;
}
.hero .hero-text h1 span { position: relative; }
.hero .hero-text h1 span::after {
  content: "";
  width: 105%;
  height: 4px;
  background: #A20014;
  position: absolute;
  bottom: -10px;
  right: -4px;
}
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.news-title-wrap {
  width: 1280px;
  max-width: 96%;
  margin: 0 auto;
}
.news-title-wrap .section-title { margin: 1.25em 0.5em 0.75em; }
.news-title-wrap + #inner-content #main { padding-top: 0; }

/*
 * 3. The contact form is Fluent Forms now (was Gravity Forms). Same look as the old labels and fields.
 */
.contact-form .fluentform .ff-el-input--label label {
  font-family: "Ubuntu", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.846em;
  font-weight: 700;
  line-height: 2.09em;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #444;
  border-left: 3px solid #A20014;
  padding: 0.1em 0 0.1em 1em;
}
.contact-form .fluentform .ff-el-is-required.asterisk-right label:after { color: #A20014; }
.contact-form .fluentform .ff-el-form-control {
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.contact-form .fluentform .ff-btn-submit {
  background: #f3f3f3;
  color: #222;
  border: 1px solid #888;
  border-radius: 2px;
  padding: 0.35em 0.9em;
  font-size: 0.85em;
}
@media (max-width: 480px) {
  .contact-form .fluentform .ff-el-input--label label { border-left: none; padding: 0; }
}

/*
 * 3. Aligned images and other aligned blocks in the content.
 *    Reactor makes every direct child of .entry-content a centred column
 *    (width 92%, max 700px). The old block editor wrapped images:
 *    <div class="wp-block-image"><figure class="alignright"> – the div was the
 *    column and the figure floated inside it. Today's markup is
 *    <figure class="wp-block-image alignright"> as the direct child, so the
 *    float escaped the column and landed at the far edge of the page.
 *    Floats are now placed at the column's edges (--col-gap = the space beside
 *    the column), at most half the column wide, with the text wrapping round them.
 *    Only direct children are touched; the old wrapped markup already works.
 */
body.single .entry-content,
body.page .entry-content {
  --col: min(92%, 700px);
  --col-gap: calc((100% - var(--col)) / 2);
}
body.single .entry-content > .alignright,
body.page .entry-content > .alignright {
  float: right;
  width: auto;
  max-width: calc(var(--col) / 2);
  margin: 0.4em var(--col-gap) 1.5em 2em;
}
body.single .entry-content > .alignleft,
body.page .entry-content > .alignleft {
  float: left;
  width: auto;
  max-width: calc(var(--col) / 2);
  margin: 0.4em 2em 1.5em var(--col-gap);
}
body.single .entry-content > .aligncenter,
body.page .entry-content > .aligncenter {
  float: none;
  width: fit-content;
  max-width: var(--col);
  margin: 1.5em auto;
}
body.single .entry-content > .aligncenter img,
body.page .entry-content > .aligncenter img {
  margin: 0 auto;
}
/* A heading, quote or rule after a float starts below it, as on the old site. */
body.single .entry-content > :is(h2, h3, h4, blockquote, hr, .wp-block-quote, .wp-block-separator),
body.page .entry-content > :is(h2, h3, h4, blockquote, hr, .wp-block-quote, .wp-block-separator) {
  clear: both;
}
/* Captions left-aligned, as on the old site (WordPress's image block centres them). */
body.single .entry-content figure figcaption,
body.page .entry-content figure figcaption {
  text-align: left;
}
/* Phones: no floats – the image sits in the column above the text. */
@media (max-width: 600px) {
  body.single .entry-content > .alignright,
  body.page .entry-content > .alignright,
  body.single .entry-content > .alignleft,
  body.page .entry-content > .alignleft {
    float: none;
    max-width: var(--col);
    margin: 1em auto 1.5em;
  }
}

/* 4. Mobile menu toggle as a button: no button chrome, same glyph position. */
#main-menu-toggle {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
@media (max-width: 899px) {
  #main-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    /* The 44 px box is centred on where the 1.5em glyph box sat. */
    top: calc(1.1em - (44px - 1.5em) / 2);
    right: calc(1em - (44px - 1.5em) / 2);
  }
  #main-menu-toggle.menu-visible .collapse { display: block; }
}
#main-menu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 5. The header logo has width/height attributes (space reserved while loading);
 *    the CSS sets the height, so the width follows the aspect ratio. */
#site-header-inner .logo a .header-logo { width: auto; }