/* Carousel String Quartet
   Replaces the Concrete5 "default" theme (main.css + typography.css + block CSS).
   Desktop (>= 821px) reproduces the original 800px layout exactly.
   Everything mobile-specific is in the single media query at the end. */

:root {
  --bg: #e8e2da;
  --text: #000;
  --muted: #999;
  --red: #990000;
  --red-dark: #800000;
  --red-hover: #eb0909;
  --nav-border: #bbb;
  --page: 800px;
}

/* ---------- Base (typography.css) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/18px Arial, Helvetica, sans-serif;
}
img { border: 0; }
a { color: var(--red); cursor: pointer; }
a:hover { color: var(--red-hover); }
h1, h2, h3, h4, h5 { margin: 8px 0 4px; padding: 4px 0; font-weight: normal; }
h1 { font-size: 21px; line-height: 28px; color: var(--red); }
p { margin: 0 0 12px; padding: 0; }
.sp { height: 18px; margin-bottom: 12px; }  /* behaves exactly like the CMS's empty " " paragraphs */

/* ---------- Page frame ---------- */
.page { width: var(--page); margin: 0 auto; }

.site-header .logo { display: block; }
.site-header .logo img { display: block; width: 800px; height: 172px; }

.divider {
  height: 1px;
  padding-top: 12px;
  background: url(/assets/img/theme/nav_horizontal_divider.gif) no-repeat top;
  overflow: hidden;
}
.site-header .divider:first-of-type { margin-top: 43px; }
.site-nav { margin-bottom: 13px; }
.site-nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0 55px 0 0;
}
.site-nav li { margin-left: 16px; padding: 2px 0; font-size: 13px; }
.site-nav a, .site-nav a:hover { color: var(--muted); text-decoration: none; }
.site-nav a[aria-current="page"] {
  display: block;
  margin: -2px 0;
  padding: 2px 8px;
  border: 1px solid var(--nav-border);
}
.site-header { margin-bottom: 10px; }

main::after { content: ""; display: block; clear: both; }

.site-footer {
  clear: both;
  padding: 24px 0 16px;
  color: var(--muted);
  font-size: 10px;
}
.site-footer a { text-decoration: none; }
.site-footer .seo { float: right; }

/* ---------- Home: slideshow + red panel ---------- */
.slideshow { position: relative; height: 325px; overflow: hidden; }
.slideshow img {
  position: absolute; inset: 0;
  width: 100%; height: 325px;
  object-fit: none;               /* original used a centred, unscaled background */
  opacity: 0;
  transition: opacity 2s linear;
}
.slideshow img.is-active { opacity: 1; z-index: 2; }
.slideshow img.is-leaving { opacity: 0; transition-duration: 1.6s; z-index: 1; }

.intro-panel {
  background: url(/assets/img/theme/base.gif) repeat;
  padding: 30px 40px;
  color: #c0c0c0;
  text-align: justify;
}

/* ---------- Floated content images ---------- */
.about .anchor { min-height: 18px; }   /* the original held this float with a stray "." line */
.sample tr.gap td, .rep tr.gap td { height: 18px; }
.float-right { float: right; margin: 15px 20px; }
.float-left  { float: left;  margin: 10px 20px; }

blockquote { margin: 13px 40px; }
.quote-by { color: var(--red); }
.corporate .quote-by { color: var(--red-dark); }

/* ---------- Weddings sample programme ---------- */
.sample { display: flex; width: 800px; }
.sample table { width: 550px; border-collapse: collapse; }
.sample td { padding: 0; height: 18px; vertical-align: top; }
.sample td:first-child { width: 413px; }
.sample .hd td { color: var(--red); font-weight: bold; }
.sample .gap td { height: 18px; }
.sample td + td { font-weight: bold; }
.sample figure { flex: 0 0 250px; display: flex; align-items: center; justify-content: center; margin: 0; }
.sample figure img { display: block; margin-bottom: 18px; }  /* original sat 9px above true centre */

/* ---------- Accordions (FAQ + Repertoire) ---------- */
details.acc > summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding-left: 20px;
  background: url(/assets/img/accordion/down.png) no-repeat 2px 2px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc[open] > summary { background-image: url(/assets/img/accordion/up.png); }
details.acc > .acc-body { padding-left: 5px; }
/* Smooth open/close where supported (stands in for the old 500ms jQuery slide) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details.acc::details-content {
    height: 0; overflow: hidden;
    transition: height .5s ease, content-visibility .5s allow-discrete;
  }
  details.acc[open]::details-content { height: auto; }
}

.faq details.acc > summary,
.faq details.acc > .acc-body { margin-left: 20px; }
.faq .acc-body blockquote { margin-bottom: 0; }      /* old plugin fixed the panel height, */
.faq .acc-body blockquote p { margin-bottom: 0; }    /* so no gap showed below an answer  */
.faq details.acc:first-child { line-height: 1.5; }   /* CMS styled only the first item this way */

.rep table { width: 748px; border-collapse: collapse; }
.rep table.one-col { width: 440px; }
.rep td { padding: 0; height: 18px; vertical-align: top; }
.rep td:first-child { width: 440px; }
.rep td + td { font-weight: bold; }
.rep .hd td { color: var(--red); }
.pdf-link img { vertical-align: middle; margin: 10px; }

/* ---------- Gallery ---------- */
.gallery { display: flex; width: 800px; }
.gallery .col { display: flex; flex-direction: column; align-items: center; width: 266px; }
.gallery a { display: block; margin: 8px; }
.gallery .wide { width: 250px; height: 81px; }
.gallery .tall { width: 184px; height: 250px; }

/* Lightbox (replaces jQuery Lightbox2 with the same look) */
.lb { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; flex-direction: column; background: rgba(0,0,0,.8); }
.lb.is-open { display: flex; }
.lb-frame { position: relative; background: #fff; border-radius: 4px; padding: 4px; line-height: 0; }
.lb-frame img { display: block; max-width: 90vw; max-height: 80vh; border-radius: 3px; }
.lb-prev, .lb-next { position: absolute; top: 0; height: 100%; width: 34%; border: 0; background: transparent no-repeat; cursor: pointer; opacity: 0; transition: opacity .6s; }
.lb-prev { left: 0;  background-image: url(/assets/img/lightbox/prev.png); background-position: left 48%; }
.lb-next { right: 0; background-image: url(/assets/img/lightbox/next.png); background-position: right 48%; width: 64%; }
.lb-prev:hover, .lb-next:hover, .lb-prev:focus-visible, .lb-next:focus-visible { opacity: 1; }
.lb-meta { display: flex; justify-content: space-between; align-items: center; width: var(--lb-w, 300px); padding-top: 5px; color: #ccc; font: 12px/1.1 Arial, Helvetica, sans-serif; }
.lb-close { width: 30px; height: 30px; border: 0; background: url(/assets/img/lightbox/close.png) no-repeat top right; opacity: .7; cursor: pointer; }
.lb-close:hover { opacity: 1; }

/* ---------- Hear Us Play ---------- */
.hear { display: flow-root; }           /* stops the h1 margin collapsing, as the old layout table did */
.track iframe { display: block; width: 100%; height: 166px; border: 0; }
.track-credit {
  font: 100 10px/18px Interstate, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Garuda, Verdana, Tahoma, sans-serif;
  color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track-credit a { color: #ccc; text-decoration: none; }
.banner { display: block; }

/* ---------- Contact ---------- */
.tally { zoom: .7; }

/* =========================================================
   Mobile & small tablets — layout only, same look and copy
   ========================================================= */
@media (max-width: 820px) {
  .page { width: auto; padding: 0 16px; }
  img { max-width: 100%; height: auto; }
  .nbsp-run { display: none; }         /* desktop-only manual line breaks */
  h1 { overflow-wrap: anywhere; }

  .site-header .logo img { width: 100%; height: auto; }
  .site-header .divider:first-of-type { margin-top: 12px; }
  .site-nav { margin-bottom: 10px; }
  .site-nav ul { flex-wrap: wrap; justify-content: center; padding: 0; gap: 6px 0; }
  .site-nav li { margin: 0 8px; padding: 4px 0; font-size: 15px; }

  .slideshow { height: auto; aspect-ratio: 800 / 325; }
  .slideshow img { height: 100%; object-fit: cover; }
  .intro-panel { padding: 20px 16px; text-align: left; }
  .intro-panel br { display: none; }

  .float-right, .float-left { float: none; display: block; margin: 12px auto; }
  blockquote { margin: 13px 0 13px 16px; }

  .sample { flex-direction: column; width: auto; }
  .sample table { width: 100%; }
  .sample td:first-child { width: 62%; padding-right: 8px; }
  .sample figure { margin-top: 18px; }

  .rep table { width: 100%; }
  .rep td:first-child { width: 60%; padding-right: 8px; }
  .faq details.acc > summary, .faq details.acc > .acc-body { margin-left: 0; }
  .faq blockquote { margin-right: 0; }

  .gallery { width: auto; flex-wrap: wrap; justify-content: center; }
  .gallery .col { width: auto; flex: 1 1 250px; }
  .gallery .wide, .gallery .tall { width: auto; height: auto; }

  .tally { zoom: 1; }

  .site-footer .seo { float: none; display: block; margin-bottom: 6px; }
}