/* FONT SETUP */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');

body {
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
  background-color: #fdfdfd;
}

/* BANNER IMAGE */
.responsive-banner {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* NAVIGATION handled by Tailwind */

/* COLUMN LAYOUTS */
#leftcolumnwrap, #rightcontentwrap, #contentwrap {
  display: flex;
  justify-content: center;
  padding: 0 0.5rem 0 0.5rem;
}

#leftcolumn, #rightcontent, #content {
  max-width: 900px;
  width: 100%;
}

/*
#slideshowcontentwrap {
  display: flex;
  justify-content: center;
  padding: 0px; 
}

#slideshowcontent {
  max-width: 600px;
  width: 100%;
}
*/

/* HEADINGS */
#rightcontent h1,
#rightcontent h2,
#content h2 {
  color: #222;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

#rightcontent h1 {
  font-size: 2rem;
  color: #ba0000;
  border-bottom: 2px solid #ba0000;
  padding-bottom: 0.2rem;
}

#rightcontent h2,
#content h2 {
  font-size: 1.5rem;
  color: #444;
}

/* PARAGRAPHS & TEXT */
#rightcontent, #content {
  font-size: 1rem;
  padding: 0 1rem;
}

#rightcontent p,
#content p {
  margin-bottom: 0.5rem;
}

#contentwrap,
#content {
  width: 100%;
  display: block; /* optional, to reset */
}

a {
  color: #d97706;           /* Bright amber/golden tone */
  font-weight: bold;        /* Make the link stand out */
  text-decoration: underline; /* Keeps it clearly a link */
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  color: #b45309;           /* Darker amber on hover */
  text-decoration: none;    /* Optional: clean hover look */
}

/* COLUMN LAYOUTS */
#centralcontentwrap {
display: flex;
  justify-content: center;
  padding: 0rem;
 /*display: flex;
  justify-content: center;    
  align-items: center;       
  padding: 0.5rem;
  width: 100%;
  box-sizing: border-box;*/
}

#centralcontent {
max-width: 1200px;
  width: 100%;
  padding: 0rem;
/* width: 100%;
  max-width: 700px;  /*        /* Set max width of slideshow */
}


/* PANEL IMAGES */
.panel {
  opacity: 1;
  transition: opacity 0.3s ease;
  margin: 10px 10px 10px 0;
}

.panel:hover {
  opacity: 0.7;
}

/* LOGO BAR */
#logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
}

/* FOOTER */
#footerwrap {
  background-color: #111;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}

#footer span {
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
}

#footer p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}



/* Events List */
#events {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}

#events ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

#events li {
  margin-bottom: 20px;
  transition: transform 0.2s ease, background 0.3s;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  padding: 20px;
  flex: 1 1 100%;
  max-width: 100%;
}


#events li:hover {
  background: #f0f0f0;
  transform: translateY(-3px);
}

.eventsection h3 {
  font-size: 1.2rem;
  color: #222;
  margin-bottom: 8px;
  font-weight: bold;
}

.eventsection p {
  font-size: 0.95rem;
  color: #444;
}

.eventname {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.eventtime, .eventprice {
  display: inline-block;
  margin-right: 10px;
  font-weight: bold;
  color: #555;
}

.eventprice {
display: block;
}

/* TABS SECTION */
#tabs {
  margin-top: 2rem;
  font-family: 'Josefin Sans', sans-serif;
}

#tabs ul {
  display: flex;
  gap: 1rem;
  padding-left: 0;
  list-style: none;
  border-bottom: 2px solid #ccc;
  margin-bottom: 1rem;
}

#tabs ul li a {
  display: block;
  padding: 0.5rem 1rem;
  background: #e7e7e7;
  border-radius: 4px 4px 0 0;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

#tabs ul li a:hover,
#tabs ul li.ui-tabs-active a {
  background: #005fa3;   /* Darker blue */
  color: #fff;
}

#tabs > div {
  background: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 0 0 8px 8px;
}

#tabs img {
border: 1px;
padding: 1rem;
display: block;
}




/* ===== Reset & Base Styles ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Josefin Sans', sans-serif;
  background-color: #fdfdfd;
  color: #333;
 /* padding: 20px;*/
  line-height: 1.6;
}



/* ===== Links ===== */
a {
  color: #0077cc;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}


/* ====== this is start of accordion styling ========*/

.accordion {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .accordion summary {
    background-color: #0077cc;
    color: #fff;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 1.1rem;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .accordion summary:hover {
    background-color: #005fa3;
  }

  .accordion table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    
  }

  .accordion th {
	background-color: #e0e0e0; /* light grey */
    color: #000; /* black text */
    padding: 10px;
    text-align: left;
  }

  .accordion td {
    padding: 10px;
    border-top: 1px solid #eee;
    
  }

  .accordion p {
    margin: 15px 0;
    padding: 0 16px;
    font-style: italic;
  }
  
  /* ====== this is end of accordion styling ========*/
  
  
  /* ====== this is start of accordionparty styling ========*/

.accordionparty {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .accordionparty summary {
    background-color: #0077cc;
    color: #fff;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 1.1rem;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .accordionparty summary:hover {
    background-color: #005fa3;
  }
  
  .accordionparty div {
	
  }

  .accordionparty p {
    margin: 15px 0;
    padding: 0 16px;
  }
  
  /* ====== this is end of accordion styling ========*/
  
    /* ====== Gallery Styling ========*/
  #horcontentwrap {
	float:left;
	width:100%;
	margin-top:5px;
	overflow:auto;
	white-space: nowrap;
	border-radius: 10px;
    border: 2px solid #ebebeb;
}

#horcontent {
    background: #FFFFFF;
    margin: 5px;
    display:inline;
}

 /* ====== this is start of accordionevent styling ========*/

.accordionevents {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .accordionevents summary {
    background-color: #0077cc;
    color: #fff;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 1.1rem;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .accordionevents summary:hover {
    background-color: #005fa3;
  }
  
  .accordionevents img {
	padding: 1rem;
	display: block;
	margin: 10px 0;
  max-width: 100%;
  height: auto;
  }

  .accordionevents p {
    margin: 15px 0;
    padding: 0 16px;
  }
  
  .accordionevents ul {
  margin-top: 10px;
  padding-left: 20px;
  list-style: disc;
}
  
  /* ====== this is end of accordion styling ========*/

   /* ====== start of Gallery ========*/
  
  .gallery-section {
  padding: 2em 0;
  /*background: #f9f9f9;*/
  /*text-align: center;*/
}

.gallery-section header {
  margin-bottom: 1em;
}

.gallery-section a {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.gallery-section a:hover {
  transform: scale(1);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 1em;
  max-width: 1000px;
  margin: 0 auto;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
 /* ====== end of gallery ========*/