/* COLORS

MAIN

Creamy Yellow (#F5D695) – Matches the playhouse's main exterior.
Warm Beige (#F6D796) – A subtle variant for backgrounds.
Deep Red (#A12C2C) – Inspired by the "Playhouse" sign.
Burnt Orange (#E67232) – Matches the trim and accent details.
Sky Blue (#72A8E4) – Inspired by the clear blue sky in the image.
Charcoal Black (#1E1E1E) – For contrast and readability.

BUTTONS

Golden Yellow (#D9A441) – Complements the Burnt Orange and Deep Red, adding warmth and vibrancy.
Darker Shade (Tap/Active): #B7832E
Slate Blue (#5A7FA0) – A muted, slightly darker companion to Sky Blue, adding a sophisticated touch.
Darker Shade (Tap/Active): #466380
Rich Burgundy (#7A1E1E) – A deeper variation of Deep Red, adding richness and contrast.
Darker Shade (Tap/Active): #5C1717
Primary Yellow for Buttons:
Amber Gold (#E1B866) – A rich, warm yellow that pairs well with Burnt Orange and Deep Red while staying distinct from Golden Yellow.
Darker Shade for Button Tap/Active State:
Deep Mustard (#C99A4E) – A slightly muted, earthy yellow that ensures good contrast while keeping the warm, classic feel.
Primary Yellow for Buttons:
Honey Gold (#BF8F42) – A deep, rich golden-yellow that blends well with your Amber Gold (#E1B866) and Burnt Orange (#E67232).
Darker Shade for Button Tap/Active State:
Bronze Ochre (#9F7335) – A deeper, earthy yellow-brown that ensures contrast and a classic, refined look.
 
*/

/* Play colors */



/* Base font size */
html {
    font-size: 16px; /* Default browser setting (1rem = 16px) */
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Merriweather', serif;
  font-size: 1rem;
  line-height: 1.6;
  background: linear-gradient(-45deg, #f6d796, #f8e1b3, #ebc378, #d9a441, #ebd3a0);
  background-size: 600% 600%;
  animation: gradientFlow 20s ease infinite;
}


@keyframes gradientFlow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Cinzel', serif;
    margin: 0.5em 0; /* Adjust this value as needed */
    padding: 0;
}
h1 { font-size: 2.5rem; /* 40px */ }
h2 { font-size: 2rem; /* 32px */ }
h3 { font-size: 1.75rem; /* 28px */ }
h4 { font-size: 1.5rem; /* 24px */ }
h5 { font-size: 1.25rem; /* 20px */ }
h6 { font-size: 1rem; /* 16px */ }

/* Pseudo Headings */
.heading3, .heading4, .heading5, .heading6 {
	font-family: 'Cinzel', serif;
    margin: 0.5em 0; /* Adjust this value as needed */
    padding: 0;
	font-weight: 800;
}
.heading3 { font-size: 1.75rem; /* 28px */ }
.heading4 { font-size: 1.5rem; /* 24px */ }
.heading5 { font-size: 1.25rem; /* 20px */ }
.heading6 { font-size: 1rem; /* 16px */ }

.large-text {
    font-size: 1.5rem;
}

.small-text {
    font-size: 0.875rem; /* 14px */
}
.smaller-text {
    font-size: 0.5rem; /* 14px */
}
.smallest-text {
    font-size: 0.375rem; /* 14px */
}

.underlined {
  text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 2em 0;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.header {
	position: sticky;
	top: 0;
	background: #A12C2C;
	color: white;
	text-align: left;
	padding: 15px;
	z-index: 1000;
}

.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 20px;
}
.footer {
	grid-column: span 3;
	background: #A12C2C;
	color: white;
	text-align: center;
	padding: 15px;
}

/* HEADER STYLES */
.menu-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

/* LOGO STYLING */
.logo {
    height: 60px;
}

/* NAV MENU (DESKTOP) */
.nav-menu {
    flex: 1;
    display: flex;
    justify-content: center;
}

.menu {
    display: flex;
    list-style: none;
    gap: 30px;
    padding: 0;
    margin: 0;
}

.menu-item {
    position: relative;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    color: white;
}

.menu-item span.item {
	font-size: 160%;
}

.menu-item:hover .submenu {
    display: block;
}

.menu-item.show > .submenu {
    display: block;
}


/* DROPDOWN MENU */
/* Style for dropdown menu items */
.submenu {
    display: none;
    position: absolute;
    background: white;
    top: 100%;
    left: 0;
    min-width: 200px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    list-style: none;
    padding: 0;
    z-index: 1000;
}

/* Ensure each <li> fills the space */
.submenu li {
    width: 100%;
    padding: 0; /* Remove extra padding from <li> */
    text-align: left;
    transition: background 0.3s ease-in-out;
    position: relative;
}

/* Make the <a> element fill the entire <li> */
.submenu li a {
    display: block;
    width: 100%;
    padding: 12px 15px; /* Ensures vertical and horizontal fill */
    color: #A12C2C; /* Deep Red */
    text-decoration: none;
}

/* Make the background fill the entire li on hover */
.submenu li:hover {
    background: #F5D695; /* Creamy Yellow */
}

/* Ensure the text color stays within the boundary */
.submenu li:hover a {
    color: #283B6D; /* Blue */
}

/* MOBILE OVERLAY MENU */

/* HAMBURGER MENU BUTTON */
.menu-button {
    position: fixed;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
    z-index: 200;
}

/* FULL-SCREEN OVERLAY MENU */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #7A1E1E; /* Rich Burgundy */
    color: white;
    text-align: center;
    z-index: 300;
    padding-top: 60px;
    overflow: hidden; /* Prevents entire page from scrolling */
}

/* SCROLLABLE MENU CONTENT */
.overlay-nav {
    max-height: 80vh; /* Limit height to avoid covering the close button */
    overflow-y: auto; /* Enables vertical scrolling */
    padding-bottom: 20px;
}

/* STYLE SCROLLBAR (Optional, for Webkit browsers) */
.overlay-nav::-webkit-scrollbar {
    width: 8px;
}

.overlay-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

.overlay-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
}

/* CLOSE BUTTON */
.close-button {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 28px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

/* OVERLAY NAVIGATION */
.overlay-nav ul {
    list-style: none;
    padding: 0;
}

.overlay-nav .menu-heading {
    font-size: 22px;
    font-weight: bold;
    padding: 15px 0 5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* MENU LINKS */
.overlay-nav li {
    padding: 10px;
}

.overlay-nav li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

.overlay-nav li a:hover {
    text-decoration: underline;
}

/* SEARCH */

.header-search {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.header-search input {
  padding: 0.4em 0.6em;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.header-search button {
  background: #A12C2C;
  color: white;
  border: none;
  padding: 0.4em 0.6em;
  border-radius: 5px;
  cursor: pointer;
}


/* PAGE LAYOUT */

.box {
	display: grid;
	grid-template-columns: 1fr; /* Default to a single column */
	gap: 10px;
	background: white;
	padding: 15px;
	box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
	text-align: center;
	/* align-items: center; */
}
/* .box img { */
	/* margin:auto; */
/* } */
.greeting {
	padding: 6px;
	grid-column: span 3;
	background: #E67232;
	color: white;
}
.sub-greeting {
	padding: 6px;
	grid-column: span 3;
	background: #5A7FA0;
	color: white;
	margin-top: 10px;
}
.sub-sub-greeting {
	padding: 6px;
	grid-column: span 3;
	background: #7A1E1E;
	color: white;
	margin-top: 10px;
}
.sub-sub-sub-greeting {
	padding: 6px;
	grid-column: span 3;
	background: #E67232;
	color: white;
	margin-top: 10px;
}
.box-span-1 {
	grid-column: span 1;
	grid-template-rows: auto 1fr auto;
}
.box-span-2 {
	grid-column: span 2;
}
.box-span-3 {
	grid-column: span 3;
}

.box-span-1 h2, 
.box-span-2 h2,
.box-span-3 h2 {
  align-self: start;
}

.box-span-1 .button {
  align-self: end;
}

.box-top {
  align-self: start;
}

.box-middle {
  align-self: center;
}

.box-bottom {
  align-self: end;
}

.box-span-1 img, 
.box-span-2 img,
.box-span-3 img {
	width: 100%;
	height: auto;
	border-radius: 12px;        /* rounds the corners */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* adds shadow */
}

.box-narrow {
  background: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

.content-narrow {
  width: 80%;
  margin: 0 auto;
}

.box-span-3 .grid-3x3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  justify-content: center;
  align-content: center;
}

.box-span-3 .grid-3x3 .grid-3x3-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  background-color: #A12C2C;
  border: 1px solid white;
}

.box-span-3 .grid-3x3 .grid-3x3-cell img {
  max-width: 100%;
  height: auto;
  display: block;
}

.left-right {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  align-items: start;
  text-align: left;
}

.left img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.left, .right {
	padding:4px;
}

.orange-bg {
	background-color: #E67232;
	color: white;
}
.red-bg {
	background-color: #A12C2C;
	color: white;
}
.blue-bg {
	background-color: #72A8E4;
	color: white;
}

.slate-bg {
	background-color: #5A7FA0;
	color: white;
}


@media (max-width: 768px) {
  .left-right {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .left, .right {
    text-align: left;
  }
  .box-narrow {
	max-width:100%;
	}
}

.left-right-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.left-flow {
  flex: 0 0 auto;
  max-width: 100%;
  width: 100%;
}

.left-flow img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.right-flow {
  flex: 1 1 300px;
  min-width: 200px;
}

/* WELCOME GUIDE FAQ */

.wg-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wg-faq-question {
  display: flex;
  align-items: center;
  width: 100%;
  background: #f6f6f6;
  border: none;
  padding: 15px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s;
}

.wg-faq-question:hover {
  background: #e8e8e8;
}

.wg-faq-question .icon {
  margin-right: 10px;
  font-size: 2em;
}

.wg-faq-answer {
  display: none;
  background: #fff;
  padding: 15px;
  border-left: 4px solid #ccc;
  border-radius: 0 0 6px 6px;
  font-size: 0.95rem;
}

.wg-faq-item.active .wg-faq-answer {
  display: block;
}

/* BOX OFFICE FAQ */

.bo-faq {
  font-family: 'Segoe UI', sans-serif;
  text-align: left;
}

.bo-faq-item {
  border-top: 1px solid #ccc;
}

.bo-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1em;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #003366;
}

.bo-faq-answer {
  display: none;
  padding: 0 1em 1em 2em;
  background: #f9f9f9;
  color: #333;
}

.bo-faq-answer p, .bo-faq-answer ul, .bo-faq-answer li {
  margin: 0.4em 0.2em;
  padding: 0;
  text-align: left;
}

.main-list {
  padding-left: 0;
}

.main-list li::before {
  /* content: "⮞"; */
  color: #003366;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.sub-list {
  padding-left: 1.5em;
}
.sub-list li::before {
  /* content: "⮚"; */
  color: #E67232;
  display: inline-block;
  width: 1em;
  margin-left: 0em;
}

.bo-faq-item.open .bo-faq-answer {
  display: block;
}

.toggle-icon {
  font-weight: bold;
  font-size: 1.3em;
  color: #A12C2C;
  transition: transform 0.3s ease;
}

.bo-faq-item.open .toggle-icon {
  content: "-";
  transform: rotate(90deg);
}

/* CALENDAR */

    .calendar-container {
      max-width: 900px;
      margin: 20px auto;
      background: white;
      padding: 15px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .calendar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .calendar-header h2 {
      margin: 0;
      font-size: 1.5em;
    }
    .calendar-header-two {
      display: none;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .calendar-header-two h2 {
      margin: 0;
      font-size: 1.5em;
    }
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 1px;
      background: #ccc;
    }
    .calendar-day-name,
    .calendar-day {
      background: #fefefe;
      padding: 8px;
      min-height: 100px;
      box-sizing: border-box;
      border: 1px solid #eee;
    }
	.calendar-day.today {
	  background-color: #ffeeba;
	  border: 2px solid #e0a800;
	}

    .calendar-day-name {
      background: #eee;
      text-align: center;
      font-weight: bold;
    }
    .calendar-day .day-number {
      font-weight: bold;
      margin-bottom: 5px;
    }
    .calendar-day .event {
      background: #7E2323;
      color: white;
      padding: 2px 4px;
      margin-bottom: 3px;
      border-radius: 3px;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .calendar-day .open {
      background: #E67232;
	}
    .calendar-day .pre-show {
      background: #C99A4E;
	}
    .calendar-day .nei {
      background: #D84AAE;
	}    
	.calendar-day .season-announce {
      background: #2F69C8;
	}
    .calendar-day .event a {
      color: white;
	}
    @media screen and (max-width: 768px) {
		.calendar-header-two {
			display: flex;
		}
      .calendar-grid {
        grid-template-columns: 1fr;
      }
      .calendar-day-name {
        display: none;
      }
	  	.no-calendar-data {
		display: none;
	}
	

    }

    .calendar-nav {
      background: none;
      border: none;
      font-size: 1.2em;
      cursor: pointer;
    }

/* CALENDAR FUNCTION */

.cal-box {
	padding: 10px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cal-item {
	background-color: #F5D695; /* Creamy yellow from your palette */
	padding: 10px 12px;
	border-left: 4px solid #A12C2C; /* Deep red for emphasis */
	border-radius: 4px;
	transition: background-color 0.3s;
}

.cal-item a {
	text-decoration: none;
	color: #1E1E1E; /* Charcoal black for readability */
	font-weight: 500;
	display: block;
}

.cal-item:hover {
	background-color: #F6D796; /* Slightly lighter beige on hover */
}

.cal-item.637 {
	border-left-color: #E67232; /* Burnt orange */
}
.cal-item.638 {
	border-left-color: #72A8E4; /* Sky blue */
}


/* SEASON */

.season-nav {
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	margin: 30px 0; 
	font-family: 'Playfair Display', serif; 
	font-size: 1.1em; 
	text-transform: uppercase; 
	letter-spacing: 1px;
	color: #A12C2C;
}

/* .banner-row { */
    /* grid-column: span 1;  /* Make the row span all three columns of the parent container */ */
    /* display: grid; */
    /* grid-template-columns: 1fr;  /* Two equal columns */ */
    /* gap: 10px;  /* Space between the two boxes */ */
	/* box-shadow: 0px 4px 6px rgba(0,0,0,0.1); */
	/* border: 2px solid var(--play-row-inner-box-border); */
	/* padding: 6px; */
/* } */

/* .play-row { */
    /* grid-column: span 3;  /* Make the row span all three columns of the parent container */ */
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr;  /* Two equal columns */ */
    /* gap: 10px;  /* Space between the two boxes */ */
	/* box-shadow: 0px 4px 6px rgba(0,0,0,0.1); */
	/* border: 2px solid var(--play-row-inner-box-border); */
	/* padding: 6px; */
/* } */

/* .inner-box { */
	/* padding: 6px; */
	/* grid-column: span 1; */
	/* background: var(--inner-box-background); */
	/* color: white; */
	/* border: 2px solid var(--play-row-inner-box-border); */
/* } */


.play-row {
	grid-column: span 3;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
	border: 2px solid var(--play-row-inner-box-border);
	padding: 6px;
}

/* All inner-boxes default to single-column */
.inner-box {
	padding: 6px;
	background: var(--inner-box-background);
	color: white;
	border: 2px solid var(--play-row-inner-box-border);
	grid-column: span 1; /* Default: full width */
}
@media (min-width: 768px) {
	.play-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		grid-column: span 3;
	}

	.play-row .inner-box {
		grid-column: span 2; /* default to full width */
	}

	/* First two (Banner/Cast + Details) side by side */
	.play-row .inner-box:nth-child(1),
	.play-row .inner-box:nth-child(2) {
		grid-column: span 1;
	}

	/* If exactly 2 more (total = 4), make those side-by-side */
	.play-row .inner-box:nth-child(3):nth-last-child(2),
	.play-row .inner-box:nth-child(4):nth-last-child(1) {
		grid-column: span 2;
	}

	/* If 3+ additional boxes, all from 5th onward go full width */
	.play-row .inner-box:nth-child(n+5) {
		grid-column: span 2;
	}
}

.banner-box {
	padding: 6px;
	grid-column: span 1;
	background: var(--inner-box-background);
	color: white;
	border: 2px solid var(--play-row-inner-box-border);
}
.play-row .inner-box h3, h4 {
    text-align: center;
    width: 100%;
    margin: 0 auto; /* Ensures full alignment */
}
.play-row .inner-box img {
    max-width: 100%; /* Prevents the image from exceeding the container width */
    max-height: 100%; /* Prevents the image from exceeding the container height */
    height: auto; /* Maintains aspect ratio */
    width: auto; /* Ensures the image does not stretch */
    display: block; /* Removes extra spacing */
    object-fit: contain; /* Ensures the whole image fits inside */
}
.banner-row .banner-box img {
    max-width: 100%; /* Prevents the image from exceeding the container width */
    max-height: 100%; /* Prevents the image from exceeding the container height */
    height: auto; /* Maintains aspect ratio */
    width: auto; /* Ensures the image does not stretch */
    display: block; /* Removes extra spacing */
    object-fit: contain; /* Ensures the whole image fits inside */
}
.play-row .inner-box .season-show h4, 
.play-row .inner-box .announce h4, 
.play-row .inner-box .cast-crew h4, 
.play-row .inner-box .show-info h4, 
.play-row .inner-box .tickets-info h4
{
	text-align: center;
	align-items: center;
}

ul.no-bullets {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

.season-show a,
.announce a,
.cast-crew a,
.show-info a {
	color: white;
}

.season-show a:hover,
.announce a:hover,
.show-info a:hover {
	color: #aaa;
}

/* For playhouse pic on home page */

.playhouse-pic {
    width: 100%; /* Adjust based on layout */
    height: auto; /* Or set a specific height */
    max-width: 800px; /* Optional: keeps it from exceeding its original size */
    overflow: hidden; /* Ensures the image does not break out */
	margin-right: 10px;
}

.playhouse-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* for Google Maps iframe */

.box iframe,
.box-span-1 iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
	min-height: 300px;
}

.text-justify {
	text-align:left;
}

/* Rounded edges and drop shadow for select images */

img.enhance {
	border-radius: 12px;        /* rounds the corners */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* adds shadow */
}

/* For play boxes */

.season-show {
    background: var(--cast-crew-background); 
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    margin-top: 20px;
}
.announce {
    background: var(--cast-crew-background); 
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.event-type {
    background: var(--cast-crew-background); 
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.cast-crew {
    background: var(--cast-crew-background); 
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.show-info {
    background: var(--show-info-background); 
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    margin-top: 20px;
}

/* add rounded edges to boxes */
.add-rounded-edges { 
  padding: 12px 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 10px;
}

.tickets-info, .tickets-info-mini {
    background: var(--tickets-info-background); 
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ticket-table {
    width: 100%;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    background: var(--ticket-table-background); 
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    box-sizing: border-box;
}


.ticket-row {
    display: contents; /* Makes individual cells align properly */
}

.ticket-row div {
    text-align: center;
    background: var(--ticket-row-div-background); 
    padding: 10px;
    font-weight: bold;
    border-radius: 6px;
	line-height: 1.2;
}

div.ticket-header {
	background-color: var(--ticket-header-div-background);
}

.ticket-link {
    display: block;
    padding: 10px;
    background: var(--ticket-link-background); 
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.ticket-link:hover {
    background: var(--ticket-link-hover-background); 
}
.ticket-button {
	display: grid;
	grid-template-columns: 1fr; /* Default to a single column */
	margin-top:10px;
}

.more-details {
    background: var(--tickets-info-background); 
    color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.more-details-button {
	display: grid;
	grid-template-columns: 1fr; /* Default to a single column */
	margin-top:10px;
}

.director {
	font-size:1.4rem;
}

/* SEARCH PAGE STYLING */

.search-results h2 {
  border-bottom: 2px solid #A12C2C;
  padding-bottom: 0.2em;
  margin-top: 2em;
}

.search-hit {
  margin-bottom: 1.5em;
}

.search-hit h3 {
  margin: 0.2em 0 0.2em 0;
  font-size: 1.2em;
}

.search-hit p {
  font-style: italic;
  color: #444;
  margin: 0.3em 0 0;
}

mark {
  background-color: #E67232;
  color: white;
  padding: 0 2px;
  border-radius: 2px;
}

/* PERSON PAGE STYLING */

.headshot {
  float: left;
  margin: 0 20px 20px 0;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.person-bio {
  line-height: 1.5;
  font-size: 1.1em;
  margin-top: 0;
  text-align: left;
}

.person-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  grid-column: 1 / -1;
}

.headshot-wrapper {
  flex: 0 0 auto;
}

.bio-wrapper {
  flex: 1 1 300px;
  min-width: 200px;
}

@media (max-width: 600px) {
  .person-intro {
    flex-direction: column;
    align-items: center;
  }

  .bio-wrapper {
    width: 100%;
  }

  .person-bio {
    text-align: left;
  }
}

.play-list {
  list-style-type: none;
  padding: 0;
}

.play-list li {
  margin-bottom: 1.5em;
  display: flex;
  align-items: flex-start;
}

.play-list img.enhance {
  width: 120px;
  margin-right: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.play-list a {
  font-size: 1.1em;
  font-weight: bold;
  color: #a12c2c;
  text-decoration: none;
}

.event-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  grid-column: 1 / -1;
}


.event-card {
  width: 300px;
  margin: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
  background: #fff;
}

.about-us-card {
	max-width: 150px;
}
.about-us-title {
	font-weight:800;
	min-height: 3em;
}
.about-us-name {
	min-height: 3em;
}


.event-card img {
  max-width: 100%;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.event-card h4 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.1rem;
  color:black !important;
}

.event-card small {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
}

.event-card big {
  display: block;
  font-size: 1.2rem;
  color: #a12c2c;
  margin-top: 0.5rem;
}

@media (max-width: 600px) {
  .event-card {
    flex: 1 1 100%;
	margin: 0.5rem;
  }
}

/* General button styling */
.button {
	display: inline-block;
	padding: 12px 20px;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 6px; /* Rounded edges */
	transition: background 0.3s ease, transform 0.2s ease;
	cursor: pointer;
	border: none;
}
/* Super Buy Button (Any) */
.super-button {
	font-size: 2.5rem;
}

/* Buy Button (Red) */
.button-buy {
	background-color: #A12C2C; /* Deep Red */
	color: white;
}
.button-buy:hover {
	background-color: #8B2424; /* Darker Red */
}

/* Information Button (Burnt Orange) */
.button-info {
	background-color: #E67232; /* Burnt Orange */
	color: white;
}
.button-info:hover {
	background-color: #C95E28; /* Darker Burnt Orange */
}

/* Email Button (Sky Blue) */
.button-email {
	background-color: #72A8E4; /* Sky Blue */
	color: white;
}
.button-email:hover {
	background-color: #5D92C4; /* Darker Blue */
}
/* Information Button 2 (Honey Gold) */
.button-info2 {
	background-color: #BF8F42; 
	color: white;
}
.button-info2:hover {
	background-color: #9F7335;
}
/* Information Button 3 (Plum) */
.button-info3 {
	background-color: #8E3179;
	color: white;
}
.button-info3:hover {
	background-color: #250A1D; 
}
/* Information Button 4 (Rich Burgundy) */
.button-info4 {
	background-color: #7A1E1E;
	color: white;
}
.button-info4:hover {
	background-color: #5C1717; 
}
/* Map Button (Slate Blue) */
.button-map {
	background-color: #5A7FA0; /* Sky Blue */
	color: white;
}
.button-map:hover {
	background-color: #466380; /* Darker Blue */
}
/* Action Button (Rich Burgundy) */
.button-action {
	background-color: #7A1E1E;
	color: white;
}
.button-action:hover {
	background-color: #5C1717; 
}
/* Info Button (Deep Blue) */
.button-info5 {
	background-color: #2055B8; /* Deep Blue */
	color: white;
}
.button-info5:hover {
	background-color: #0A204D; /* Darker Blue */
}

.button-ticket {
	background-color: var(--ticket-link-background);
	color:white;
}
.button-ticket:hover {
    background-color: var(--ticket-link-hover-background); 
}

/* event page galleries */

.gallery-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
	justify-content: center;
}

.thumb {
	height: 225px; /* width: 150px; */
	text-align: center;
}

.thumb img {
	max-width: 100%;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.caption {
	font-size: 0.8rem;
	margin-top: 4px;
	color: white;
	font-weight: 600;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.thumb-img {
  max-width: 150px;
  height: auto;
  cursor: pointer;
  border: 1px solid #ccc;
  box-shadow: 0 0 0 4px white;
  background: #fff;
  transition: transform 0.2s;
}
.thumb-img:hover {
  transform: scale(1.05);
}

a img:hover {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}

/* Carousel */

.carousel-container {
    position: relative;
    width: 98%; /* Adjust as needed */
    height: auto; /* Ensures square */
    overflow: hidden;
    border-radius: 10px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-item {
    min-width: 100%; /* Ensures each item takes full carousel width */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Stack image & caption */
}

.carousel img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* Enforce square shape */
    object-fit: cover;
}

.carousel-caption {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
    max-width: 90%;
}

.nav-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
	z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

/* Pause autoplay when hovering */
.carousel-container:hover {
	animation-play-state: paused;
}

/* Link formatting */

.box a {
    color: #A12C2C; /* Deep Red */
    text-decoration: none; /* Optional: Removes underline */
}
.box a:hover {
    color: #8B2424; /* Slightly darker red on hover */
    text-decoration: underline; /* Optional: Adds underline on hover */
}
.footer a {
    color: white;
    text-decoration: none;
}
.footer a:hover {
    color: #F5D695; /* Creamy Yellow on hover for contrast */
    text-decoration: underline;
}
/* Ensure button links are always white and never underlined */
.button, .button a {
    color: white !important;
    text-decoration: none !important;
}

.button a:hover {
    color: white !important;
    text-decoration: none !important;
}

h2 a, h3 a, h4 a, h5 a {
	color: white !important;
}
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
	color: white !important;
}

.decade-nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.decade-nav-list {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.decade-nav a, .decade-nav-list a {
  font-weight: bold;
  font-size: 1.05rem;
  color: #A12C2C;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.decade-nav a:hover, .decade-nav-list a:hover {
  background-color: #F6D796;
  color: #1E1E1E;
}

.season-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* space between columns */
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  background-color: #fff;
}

.nav-slot {
  flex: 1;
  display: flex;
  justify-content: center;
}

.center-slot {
  flex: 0;
}

.season-nav-link {
  color: #A12C2C;
  text-decoration: none;
  font-weight: 700;
  background-color: #F6D796;
  padding: 6px 14px;
  border-radius: 6px;
  transition: background-color 0.2s ease-in-out;
}

.season-nav-link:hover {
  background-color: #E67232;
  color: #1E1E1E;
}

/* Cast Crew */

.section-header {
  color: #A12C2C;
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 0.75em;
}

.cast-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cast-member {
  margin-bottom: 0.5em;
}

.cast-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 0;
  border-radius: 8px;
  transition: background-color 0.2s, opacity 0.2s;
}

.cast-link:hover {
  background-color: rgba(0, 0, 0, 0.15); /* dark overlay */
  opacity: 1;
}

.cast-avatar {
  width: 48px;
  height: auto;
  /* height: 48px; */
  border-radius: 15%;
  background-color: #444;
  text-align: center;
  line-height: 48px;
  font-size: 1.5em;
  color: white;
  margin-right: 1em;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.cast-details .cast-role {
  font-weight: bold;
  font-size: 1.1em;
}

.cast-details .cast-actor {
  font-size: 0.95em;
  color: white;
}

.cast-details .cast-actor-alt {
  font-size: 0.95em;
  color: black;
}




/* anything 350px or less */
.tickets-info-mini {
	display:none;
}

/* Popup Modal */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #F5D695;
  color: #A12C2C;
  max-width: 500px;
  width: 90%;
  padding: 24px;
  border-radius: 16px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  animation: popupFadeIn 0.3s ease-out;
  font-family: 'Helvetica Neue', sans-serif;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #A12C2C;
}

.modal-content h2 {
  margin-top: 0;
  font-size: 1.5em;
  color: #A12C2C;
}

@keyframes popupFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


/*Desktop screen */
@media (min-width: 769px) {
    .menu-button {
        display: none;
    }
}

/* Mobile screen */
@media (max-width: 768px) {
	body {
		font-size:0.9rem;
	}
	h1 { font-size: 2rem; }
	h2 { font-size: 1.8rem; }
	h3 { font-size: 1.5rem; }
	h4 { font-size: 1.25rem; }
	h5 { font-size: 1rem; }
	h6 { font-size: 1rem; }

	.large-text {
		font-size: 1.2rem;
	}

	.small-text {
		font-size: 0.75rem; /* 14px */
	}
	.smaller-text {
		font-size: 0.375rem; /* 14px */
	}
	.smallest-text {
		font-size: 0.3rem; /* 14px */
	}
    .container {
        display: block;
    }
	
	.box {
		margin-bottom:10px;
        align-items: center;
	}

    .box-span-2, .box-span-3, .greeting, .sub-greeting, .sub-sub-greeting, .sub-sub-greeting {
        grid-column: span 1;
    }
	
	.play-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        padding: 10px; /* Ensures alignment with other elements */
        gap: 10px; /* Adds spacing between inner-boxes */
        box-sizing: border-box;
        margin-bottom: 10px; /* Ensures spacing between stacked boxes */
    }

    .inner-box {
        width: 100% !important;
        max-width: 100%; /* Ensures it matches other boxes */
        padding: 10px; /* Adds spacing inside */
        margin-bottom: 10px; /* Ensures spacing between stacked boxes */
        box-sizing: border-box;
    }

    .banner-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        padding: 10px; /* Ensures alignment with other elements */
        gap: 10px; /* Adds spacing between inner-boxes */
        box-sizing: border-box;
        margin-bottom: 10px; /* Ensures spacing between stacked boxes */
    }

    .banner-box {
        width: 100% !important;
        max-width: 100%; /* Ensures it matches other boxes */
        padding: 10px; /* Adds spacing inside */
        margin-bottom: 10px; /* Ensures spacing between stacked boxes */
        box-sizing: border-box;
		align-items: center;
    }

    .playhouse-pic {
        width: 100% !important; /* Forces it to match other elements */
        max-width: 100% !important; /* Ensures uniformity */
        padding: 10px; /* Keeps it aligned with other boxes */
        box-sizing: border-box;
    }

    .playhouse-pic img {
        width: 100%;
        height: auto;
        display: block;
    }
    .ticket-table {
        gap: 2px;
    }
    .ticket-link, .browse-tickets {
        font-size: 1.1rem;
        padding: 15px;
    }
	
    .nav-menu {
        display: none;
    }
	.nav-slot {
		font-size: 0.9rem;
	}
	.hide-me-on-mobile {
		display:none;
	}
}

@media (max-width: 490px) {
    .ticket-row div {
        padding: 1px;
		font-family: "Yanone Kaffeesatz", sans-serif;
        font-size: 1rem;
    }
}

@media (max-width: 350px) {
	.tickets-info {
		display:none;
	}
	.tickets-info-mini {
		display:grid;
	}
}