/* ============================================================
   Creative Sage: WordPress and Breakdance glue.
   Printed last (after main.css and pages.css, which are the static
   site's CSS unchanged). Each rule says what it undoes or adds.
   ============================================================ */

/* 1. Breakdance's global CSS sets body colours and fonts and gives
      h1-h6 its own colour, family and size. Restore the static site:
      headings inherit colour and family from their section (dark
      sections stay light), browser default sizes for any heading our
      classes do not size. */
html body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
}
body :is(h1, h2, h3, h4, h5, h6) { color: inherit; font-family: inherit; }
body h1 { font-size: 2em; }
body h2 { font-size: 1.5em; }
body h3 { font-size: 1.17em; }
body h4 { font-size: 1em; }
body h5 { font-size: .83em; }
body h6 { font-size: .67em; }

/* 2. Breakdance wraps our shortcode output in its own elements
      (template wrapper, Shortcode element, maybe a Section). They take
      no box: the header then sticks to the page as on the static site,
      and sections run full width. .cs-page wraps every [cs_page]
      output; #bde-main is Breakdance's <main>. */
body :not(#bde-main):has(.site-header):not(:has(#bde-main)),
body :not(#bde-main):has(.site-footer):not(:has(#bde-main)),
#bde-main :has(.cs-page) {
  display: contents;
}

/* 3. Sticky header clears the WordPress admin bar for logged-in users
      (the variable is unset, so 0px, for visitors). */
.site-header { top: var(--wp-admin--admin-bar--height, 0px); }

/* 4. One skip link: ours (header template, targets #bde-main). */
.bde-skip-link { display: none !important; }

/* 5. Gallery cards are links to each piece's page now; keep the
      static look (no underline, no link colour). */
a.art-card,
a.art-card:hover { text-decoration: none; color: inherit; }

/* 6. Classes list: "Ongoing" and "Now" in the date box for sessions
      that have started, and the optional session description. */
.event-date--chip {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px;
}
.event-date--chip .day { font-size: 1.3rem; font-style: italic; line-height: 1.15; }
.event-body .event-desc { margin: 0 0 12px; max-width: 60ch; white-space: pre-line; }

/* 7. Lightbox: the "View this piece on its own page" link keeps its
      own width inside the column of actions. */
.lightbox-actions .text-link { align-self: flex-start; }

/* 8. Form controls: Breakdance's normalize.min.css sets line-height 1.15 on
      button, input, optgroup, select and textarea; the live site has no
      normalize, so they keep the browser's normal. html :is() has
      specificity 0,0,2: above that element rule, below every class rule
      (the textarea's own 1.6 and the lightbox close button's stay). */
html :is(button, input, optgroup, select, textarea) { line-height: normal; }

/* 9. Lightbox description: gallery.js prints it as one paragraph; keep
      Diane's line and paragraph breaks, as on the piece's own page. */
.lightbox-info .desc { white-space: pre-line; }