/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-animated-variable-text-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== *//* common styles for both menu systems */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: oblique 0deg 10deg;
  font-display: swap;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  src: url(/webfonts/roboto-flex_5.0.14_latin-full-normal.woff2) format('woff2-variations');
  unicode-range: U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD;
}

@keyframes higher {
  0% {
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 600, "GRAD" -100;
  }

  100% {
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 750, "GRAD" 150;
  }
}

@keyframes lower {
  0% {
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 750, "GRAD" 150;
  }

  100% {
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 600, "GRAD" -100;
  }
}/* styles for the horizontal menu */
@media only screen and (min-width: 901px) {
  #holder {
      text-align: center;
      text-transform: uppercase;
  }

  #holder input, #holder label {
      display: none;
  }

  #holder .pad {
      display: none;
  }

  #holder ul {
      padding: 0;
      margin: 0;
      list-style: none;
  }

  #holder #hz li {
      white-space: nowrap;
      text-align: left;
      line-height: 30px;
      transition: 0.25s;
      /* background: #fff; */
      /* background: rgb(249, 233, 179); */
      background: lemonchiffon;
  }

  #holder #hz > li {
      display: inline-flex;
  }

  #holder #hz li.pad {
      display: none;
  }

  #holder #hz li a {
      padding: 0 25px;
      font-family: "Roboto Flex Variable", arial, sans-serif;
      font-size: 18px;
      line-height: 30px;
      color: #000;
      text-decoration: none;
      display: block;
      box-sizing: border-box;
      font-variation-settings: 'slnt' 0, 'wdth' 50, 'GRAD' -100, 'YTUC' 600;
  }

  #holder #hz div li a {
      font-size: 15px;
      font-variation-settings: 'slnt' 0, 'wdth' 50, 'GRAD' -100, 'YTUC' 600;
  }

  #holder #hz div li a {
      font-size: 15px;
      font-variation-settings: 'slnt' 0, 'wdth' 50, 'GRAD' -100, 'YTUC' 600;
  }

  #holder #hz li:hover > a {
      animation: higher 0.5s forwards;
  }

  #holder #hz li:not(:has(:hover)) > a {
      animation: lower 0.5s forwards;
  }

  #holder #hz li:hover {
      /* background: #fff; */
      /* background: rgb(249, 233, 179); */
      background: lemonchiffon;
  }

  #holder #hz li:hover > span {
      border-color: #000 #000 #0000 #0000;
  }

  #holder #hz div {
      display: grid;
      grid-template-rows: 0fr;
      overflow: hidden;
      transition: grid-template-rows 0.5s;
      /* background: #fff; */
      /* background: rgb(249, 233, 179); */
      background: lemonchiffon;
      position: absolute;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      z-index: 100;
  }

  #holder #hz div > ul {
      min-height: 0;
      align-self: end;
      padding: 0;
      margin: 0;
  }

  #holder #hz li {
      position: relative;
  }

  #holder #hz div.down {
      top: 30px;
      left: 0;
  }

  #holder #hz div.rght {
      top: 0;
      left: 100%;
  }

  #holder #hz div.lft {
      top: 0;
      right: 100%;
  }

  #holder #hz li:hover > div {
      grid-template-rows: 1fr;
  }

  #holder #hz div:hover {
      overflow: visible;
  }

  #holder #hz li span {
      display: block;
      width: 4px;
      height: 4px;
      border: 2px solid #000;
      border-color: #000 #000 #0000 #0000;
      transform: rotate(45deg);
      position: absolute;
      right: 8px;
      top: 11px;
      transition: transform 0.5s;
      z-index: 100;
  }

  #holder #hz ul.lft li span {
      right: auto;
      left: 8px;
      transform: rotate(-135deg);
  }

  #holder #hz > li:hover > span {
      transform: rotate(135deg);
  }

/* Wolsey */
.logo1 {
    max-height: 150px;
}

.logo2 {
    display: none;
  }

}/* styles for the vertical menu */
@media only screen and (max-width: 900px) {
  #holder {
      margin-left: 10px;
      position: absolute;
      top: 0;
      left: -60px;
      width: 50px;
      text-transform: uppercase;
  }

  #holder #menu {
      width: 20px;
  }

  #holder #menu div {
      display: grid;
      grid-template-rows: 0fr;
      overflow: hidden;
      transition: grid-template-rows 0.5s;
      width: 300px;
      /* background: rgb(249, 233, 179); */
      background: lemonchiffon;
  }

  #holder #menu > li > div {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  #holder #menu div > ul {
      min-height: 0;
      align-self: end;
      padding: 0;
      margin: 0;
  }

  #holder #menu div > ul ul {
      margin: 0 0 0 20px;
  }

  #holder #menu li:has(:checked) > div {
      grid-template-rows: 1fr;
      transition: grid-template-rows 0.5s;
  }

  #holder #mXX {
      position: absolute;
      left: -100vw;
  }

  #holder ul {
      list-style: none;
  }

  #holder li {
      z-index: 1000;
      width: 50px;
      position: relative;
      padding: 0;
      margin: 0;
  }

  #holder li li {
      width: 300px;
  }

  #holder li li li {
      width: 280px;
  }

  #holder li li li li {
      width: 260px;
  }

  #holder li li li li li {
      width: 240px;
  }

  #holder li a {
      text-decoration: none;
      color: #000;
      font-family: "Roboto Flex Variable", arial, sans-serif;
      /* font-family: 'Times New Roman', Times, serif; */
      font-size: 18px;
      line-height: 30px;
      padding: 0 25px;
      transition: 0.5s;
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 600, "GRAD" -100;
  }

  #holder .down a {
      font-size: 16px;
  }

  #holder > ul > li > span {
      display: inline-block;
      width: 50px;
      height: 40px;
      position: relative;
      left: 20px;
      /* top: 20px; */
  }

  #holder li li > a + span {
      display: inline-block;
      width: 20px;
      height: 20px;
      position: absolute;
      right: 25px;
  }

  #holder li li > span input {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
  }

  #holder li li > span label {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      cursor: pointer;
      width: 20px;
      height: 20px;
  }

  #holder li li > span label::before {
      content: "";
      display: block;
      width: 20px;
      height: 2px;
      background: #000;
      position: absolute;
      left: 0;
      top: 9px;
  }

  #holder li li > span label::after {
      content: "";
      display: block;
      width: 2px;
      height: 20px;
      background: #000;
      position: absolute;
      left: 9px;
      top: 0;
      transition: 0.5s;
  }

  #holder #menu li:has(:checked) > a {
      animation: higher 0.5s forwards;
  }

  #holder #menu li:not(:has(:checked)) > a {
      animation: lower 0.5s forwards;
  }

  #holder #menu li a:hover {
      animation: higher 0.75s forwards;
  }

  #holder #menu li input {
      -webkit-appearance: none;
      appearance: none;
      display: block;
      width: 20px;
      height: 20px;
      border: 0;
      padding: 0;
      margin: 0;
      border-radius: 0;
      cursor: pointer;
  }

  #holder #menu li:has(:checked) > span label {
      z-index: 20;
  }

  #holder #menu li:has(:checked) > span label::after {
      height: 2px;
      top: 9px;
  }

  #holder #menu li span.topLevel {
      margin-bottom: 10px;
  }

  #holder #menu li span.topLevel input {
      width: 34px;
      height: 30px;
      position: relative;
      z-index: 10;
  }

  #holder #menu li span.topLevel label {
      width: 34px;
      height: 30px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 5;
      box-sizing: border-box;
      border: 4px solid #000;
      border-width: 4px 0;
      cursor: pointer;
      transition: border 0.5s;
  }

  #holder #menu li span.topLevel label::before, #holder #menu li span.topLevel label::after {
      content: "";
      width: 34px;
      height: 4px;
      position: absolute;
      left: 0;
      top: 9px;
      background: #000;
      transition: 0.5s;
  }

  #holder #menu li:has(:checked) span.topLevel label::before {
      transform: rotate(45deg);
  }

  #holder #menu li:has(:checked) span.topLevel label::after {
      transform: rotate(-45deg);
  }

  #holder #menu li:has(:checked) span.topLevel label {
      border-color: #0000;
  }

  #holder #menu li:has(:checked) span.topLevel input {
      display: none;
  }

  /* Wolsey */
  .logo1 {
    display: none;
  }

  .logo2 {
    /* border: solid 3px green; */
    max-height: 150px;
    min-width: 75px;
    width: 75%;
    /* padding-left: 40px; */
    padding-top: 5px;
  }

}

@media only screen and (max-width: 400px) {
    /* Wolsey */
    #holder #menu li span.topLevel label {
        width: 25px;
        height: 26px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 5;
        box-sizing: border-box;
        border: 4px solid #000;
        border-width: 4px 0;
        cursor: pointer;
        transition: border 0.5s;
    }

    #holder #menu li span.topLevel label::before, #holder #menu li span.topLevel label::after {
        content: "";
        width: 25px;
        height: 4px;
        position: absolute;
        left: 0;
        top: 7px;
        background: #000;
        transition: 0.5s;
    }

}
html {
	height: 100%;
}

body {
	height: 100%;
	font-family: "Anaheim", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height: 1.58823529;
	margin: 0;
	display: flex;
	flex-direction: column;
	background-color: rgb(248, 246, 241);
	color: rgb(50, 50, 50);
}

header {
	/* background-color: rgb(249, 233, 179); */
	background-color: lemonchiffon;
}

p.redbox {
	width:420px;
	padding:5px;
	border:2px solid;
	margin:5px;
	margin-left:auto;
	margin-right:auto;
	background-color:#ffdddd27;
	color:red;

}

a:hover {
	background-color: #ccf;
}

a.no_hover{
 background-color: transparent;
}

.banner_image_container {
	background-color: lemonchiffon;
	display: flex;
	justify-content: center;
	align-items: center;
}

.banner_image_container img {
	max-width: 100%;
	height: auto;
	margin-bottom: 1rem;
}

.box {
	display: flex;
	align-items: center;
	justify-content: center;
}

.box main {
	display: flex;
	height: fit-content;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 0 25px 25px;
	flex-grow: 1;
	max-width: 1280px;
	margin: 5px;
}

.box .content {
	text-align: center;
}

.box_office {
	font-size: 1.5em;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.concert_text {
	display: flex;
	flex-direction: column;
	margin: 5px;
	align-items: center;
	justify-content: center;
}

.address {
	padding-bottom: 0.5rem;
}

.address_line {
	font-size: 0.9rem;
}

.artists {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;

}

.artist {
	flex: 1 1 100px;
	text-align: center;
	line-height: 0.9rem;
}

.artist img {
	border: solid 1px black;
}

.artist p {
	font-style: italic;
}

.social_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 10px;
	max-width: 500px;
	text-align: center;
}

.social {
	display: flex;
	flex-direction: row;
}

.social a {
	margin: 5px;
}

.social img {
	width: 45px;
	height: 45px;
}

.our_next_concert {
	font-size: 2rem;
	color: #006;
}

h1 {
	font-size: 2.5rem;
	color: #006;
	font-weight: 400;
	margin-block-end: 0;
}

.poster {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding-bottom: 0.5em;
}

.poster img {
	max-width: 100%;
	height: auto;
	flex: 1 1 auto;
	object-fit: cover;

}

.concert {
	border: 1px solid silver;
	background-color: rgb(240, 239, 239);
	padding-bottom: 0.5rem;
	max-width: 3250px;
	min-width: 325px;
}

.concert ul {
	font-size: 1.2rem;
	list-style: none;
	font-weight: 600;
	padding-left: 0;
}

.concert li {
	color: black;

	font-size: 1rem;
}

.concert_item {
	line-height: 1.2rem;
	text-align: center;
	align-self: center;
	padding-left: 1rem;
	padding-right: 1rem;
}

.concert_date {
	color: rgb(38, 77, 171);
	font-size: 1.2rem;
	font-weight: 600;
	padding-top: 0.7rem;
}

.concert_venue a {
	color: rgb(0, 13, 128);
	text-decoration: underline;
}

.concert_person {
	font-style: italic;
	font-size: 0.9rem;
	color: #033;
}

.concert_info_heading {
	font-weight: 900;
	padding-top: 0;
}

.concert_info {
	font-weight: 600;
}

.composer {
	color: #366;
	font-weight: bolder;
	align-self: center;
	border-width: 1px;
	text-align: center;
	margin-block-start: 0.5rem;
}

.composer.additional {
	font-weight: 600;
}

figcaption {
	font-weight: bold;
}

/* TODO: rework concert_* as children of .work */
.work {
	color: #366;
	display: flex;
	flex-direction: column;
}

.work.remark {
	text-align: center;
}

.work h4 {
	margin-block-start: 0.5em;
	margin-block-end: 0;
}

.work.movement {
	font-style: italic;
}

a .composer {
	text-decoration: underline;
}

.blurb {
	text-align: center;
	min-width: 100%;
}

.blurb h3 h2 h1 {
	margin-bottom: 0;
}

.tickets a {
	color: green;
	text-decoration: underline;
}

.ticket_row {
	color: blue;
	text-align: center;
}

hr {
	width: 75%;
}

hr.short {
	width: 10%
}

footer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-self: center;
	max-width: 1280px;
	width: 100%;
	padding: 1em;
}


.footer_row {
	display: flex;
	justify-content: center;
	max-width: 1280px;
	width: 100%;
}

.footer_item {
	max-width: 300px;
	flex: 1 1 100px;
	text-align: center;
}

.footer_item a {
	color: gray;
	text-decoration: underline;
}

.foot_text_row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* justify-content: center; */
	justify-content: space-around;
	max-width: 1280px;
	width: 100%;
}

.foot_text {
	padding-left: 1rem;
	padding-right: 1rem;
}

.foot_text_centre {
	border: 1px green solid;
}

.container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	padding: 1rem;
}

h2 {
	margin-bottom: 10px;
}

.season_title {
	margin-bottom: 0;
}

a.season_title:hover {
	background-color:transparent;
}

li.committee {
	line-height: 1.2rem;
	list-style-type: none;
}

ul.committee {
	list-style-position: inside;
	padding-left: 0;

}

.is-active a {
	color: red;
	font-weight: bold;
}

.headshot {
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

.about {
	display: flex;
	flex-direction: column;
}

#info {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height:75px;
}

.rehearsal-date {
	font-weight: 700;
}

.rehearsal-venue {
	font-weight: 600;
}
.rehearsal-time {
	text-align: right;
	padding-right: 1rem;
	align-self: center;
}

.rehearsal-detail {
	text-align: left;
}

.rehearsal-schedule {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}

.rehearsal-table {
	margin: 0 5px;
	flex: 1;
	max-width: 75%;
	min-width: 75%;
}

.rehearsal-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.rehearsal-row-even {
	background-color: rgb(224, 224, 224);
}

.rehearsal-row:first-child {

	flex: 0 1 50%;
	min-width: 50%;
}

.rehearsal-row:nth-child(2) {
	flex: 0 1 50%;
	align-self: flex-end; /* Align to bottom of cell */
}

.diary-reminder {
	color: red;
	font-weight: 500;
}


.concert_holder {
	align-items: center;
}

.work_holder {
	display: flex;
	flex-direction: row;
	max-width: 500px;
	justify-content: space-between;
	line-height: 1.2rem;
	padding-left: 1rem;
	align-items: center;

}

.work_holder_odd {
	background-color: rgb(245, 239, 239);
}

.work_holder_even {
	background-color: rgb(226, 225, 225);
}


.work_date_holder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 1rem;
}

.concert_work {
	border: 3px blue solid;
}


.work_title {
	font-weight: 700;
	text-align: left;
}

.friends {
	color: rgb(28, 63, 240);
	border: 1px solid #006;
	border-radius: 1rem;
	background-color: rgb(218, 233, 243);
	font-size: 1.7rem;
}

.concert_nav {
	font-size: 1.5rem;
}

.past_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.past_container a {
	padding: 2px;
	margin: 2px;
}

.past_container .concert {
	padding: 2px;
	margin: 2px 5px;
}

/* Styles for legal pages */
.legal {
	font-family: sans-serif;
	font-size: 12px;
	text-align: left;
}

hr.legal {
	width: 100%;
}

h1.legal {
	font-size: 24px;
	color: #369;
}

h2.legal {
	font-size: 16px;
	color: #69c;
}

h3.legal {
	font-size: 14px;
	color: #3cf;
}

p.legal {
	color: #333;
}

ol.legal {
  list-style-type: lower-roman;
}

li.legal {
	color: #333;
}
a.legal {
	color: #00c;
}


.legal a:hover {
	background-color: #ccf;
}

.small.legal {
	font-size: 10px;
	color: #999;
}

/* End styles for legal pages */

.composer-container {
  position: relative;
  max-height: 80vh;       /* example: scrollable container */
  overflow-y: auto;       /* enables scrolling */
  border: 1px solid #ccc;
}

/* Sticky nav inside the container */
.alphabet-nav {
  position: sticky;
  top: 0;                 /* sticks to top of container */
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  background: #fff;
  border-bottom: 1px solid #ccc;
	box-shadow: inset;
	border-radius: 1rem;
  z-index: 100;
}

/* Flex layout for composers */
.composer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
	padding-top: 2rem;
	justify-content: center;

}
.sub {
	padding-top: 0;
}
/* Ensure anchors aren’t hidden behind nav */
.composer-group {
  scroll-margin-top: 3rem; /* matches nav height */

}


.repertoire_holder {
	display: flex;
	flex-direction: column;
	justify-content: center;
}