/* ============================
     Whole Page CSS
============================ */

body{
    margin:0px;
    font-family: PT Sans;
}
div{
    box-sizing: border-box;
}
body a{
    text-decoration:none;
    color:var(--primary-ocean-blue);
}
h1{
    font-family:Walkway;
    font-weight:700;
    font-size:55px;
}
h2{
    font-size:30px;
}
.ocean{
    color:var(--primary-ocean-blue);
}
.teal{
    color:var(--primary-teal-blue);
}
p{
    font-size: 16pt;
}
.coreDiv{
    padding:20px 4%;
}
.tallHeroHolder{
    width:100%;
    min-height:900px;
    background-repeat: no-repeat;
    background-size:cover;
}
.heroHeader1{
    font-family: Walkway;
    font-weight:600;
    color:white;
    font-size:60pt;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px  1px 0 #000,
        1px  1px 0 #000;
}
.heroHeader1BG{
    display:inline-block;
    padding:10px;
    font-family: Walkway;
    font-weight:600;
    color:white;
    font-size:60pt;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px  1px 0 #000,
        1px  1px 0 #000;
    background-color:var(--fiftyPercent-ocean-blue);
    border-radius:5px;
}
.heroParagraph{
    font-family: PT Sans;
    font-weight:400;
    color:white;
    font-size:20pt;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px  1px 0 #000,
        1px  1px 0 #000;
}
.heroParagraphBG{
    display:inline-block;
    padding:8px;
    font-family: PT Sans;
    font-weight:400;
    color:white;
    font-size:20pt;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px  1px 0 #000,
        1px  1px 0 #000;
    background-color:var(--fiftyPercent-ocean-blue);
    border-radius:5px;
}
.standardButton{
    display:inline-block;
    margin-bottom:10px;
    background-color:var(--primary-royal-purple);
    border-radius:6px;
    color:white;
    text-transform:uppercase;
    font-size:16pt;
    padding:15px;
    box-shadow: 2px 2px 3px var(--primary-medium-gray);
    cursor:pointer;
}
.gradientButton{
    display:inline-block;
    margin-bottom:10px;    
    border-radius:6px;
    color:white;
    text-transform:uppercase;
    font-size:16pt;
    padding:15px;
    box-shadow: 2px 2px 3px var(--primary-medium-gray);
    cursor:pointer;
    background-image: linear-gradient(120deg, var(--primary-royal-purple) 0%, var(--primary-ocean-blue) 100%);
}
.gradientBar{
    height:3px;
    width:100%;
    background-image: linear-gradient(
        to right,
        var(--primary-ocean-blue),
        var(--accent-sky-blue),
        var(--accent-orchid),
        var(--accent-lavender-indigo),
        var(--accent-deep-violet),
        var(--primary-royal-purple)
        );
}

/* ============================
     Pennon Grid CSS
============================ */

.pennonGrid{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.pennonGrid > .pennon{
    flex: 1 1 300px;
}
.pennon{
    background-color:var(--primary-light-gray);
    background-repeat:no-repeat;
    background-size: cover;
    border-radius:15px;
    margin-top:30px;
    text-align: center;
    color:black;
    padding:0px 20px 20px 20px;
}
.pennonButton{
    color:white;
    font-size:16pt;
    background-color:var(--primary-ocean-blue);
    border-radius:4px;
    padding:10px;
    box-shadow: 2px 2px 3px var(--primary-medium-gray);
    text-transform: uppercase;
}
.pennon p{
    font-size:20px;
}
.pennon h1{
    color:var(--primary-royal-purple);
    font-weight:900;
    text-transform: uppercase;
    font-size:26px;
    margin:10px;
    letter-spacing:0.05em;
}
.pennonIconHolder{
    position:relative;
    top:-30px;
    text-align: center;
    display:flex;
    justify-content: center;
}
.pennonIcon{
    width:150px;
    height:150px;
    font-size:120px;
    text-align:center;
}
.leftJustifiedPennons p{
    text-align: left;
}


/* ============================
     Header CSS
============================ */
@media (max-width: 1000px) {
    .pariTopMenuImage,.pariTopMenuDesc{
        display: none;
    }
}
#pariTopBanner{

}
#pariTopBannerLogoHolder{
    padding:20px;
    padding-bottom:0px;
}
#pariTopBannerLogoHolder img{
    width:200px;
}
#pariTopMenuHolder{
    width:100%;
}
#pariTopMenuHolder::after{
    content:"";
    display:block;
    clear:both;
}
#pariTopMenu summary{
    cursor:pointer;
}
#pariTopMenu{
    float:right;
    overflow:hidden;
    list-style-type: none;
    margin-bottom: 0px;
    margin-right:50px;
}
.pariTopMenuButton{
    padding-right:30px;
    float:left;
}
.pariTopMenuButton summary{
    font-family: PT Sans;
    text-transform: uppercase;
    font-size: 18px;
    padding-bottom:10px;
}
.pariTopMenuButton a{
    display:block;
    color:black;
    text-decoration: none;
    font-family: PT Sans;
    text-transform: uppercase;
    font-size: 18px;
    padding-bottom:10px;
}
.pariTopMenuButton a:hover{
    color:#94308E;
}
.pariTopSubMenu{
    position:absolute;
    width:100%;
    margin:auto;
    left:0px;
    background-color:#DFDFDF;
    padding-left:30px;
    box-sizing: border-box;
    box-shadow: 8px 0px 16px 0px rgba(0,0,0,0.2);
    z-index:100;
}
.pariTopMenuText{
    width:66%;
    float:left;
    padding:20px;
}
.pariTopMenuTitle{
    color:#1596B9;
    font-size: 24pt;
    font-weight:bold;
    font-family:PT Sans;
    text-transform: uppercase;
}
.pariTopMenuDesc{
    color:#94308E;
    font-size:30px;
    font-family: "Walkway";
    font-weight:bold;
    margin-top:8px;
    margin-bottom:8px;
}
.pariTopMenuLinks{

}
.pariTopMenuLinkColumn{
    float:left;
    padding:8px;
}
.pariTopMenuLinkList{
    list-style-type: none;
    font-family: PT Sans;
    font-size:16px;
}
.pariTopMenuLinkItem{
    padding:0px;
}
.pariTopMenuLinkItem a{
    text-decoration: none;
    color:#023B54;
    padding:0px;
}
.pariTopMenuImage{
    margin-top: 20px;
    margin-right:15px;
    height:300px;
    float:right;
    width:30%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
}
.pariTopMenuImage img{
    margin-top:15px;
    max-height: 270px;
}
.pariTopMenuButton summary::marker{
    color:var(--primary-ocean-blue);
}
#pariUnderMenuHolder{

}
#pariUnderMenu{
    float:right;
    overflow:hidden;
    list-style-type: none;
    margin-bottom: 0px;
    margin-right:50px;
}
.pariUnderMenuButton{
    padding-right:30px;
    float:left;
    display:block;
    color:black;
    text-decoration: none;
    font-family: PT Sans;
    text-transform: uppercase;
    font-size: 18px;
    padding-bottom:10px;
}
.pariUnderMenuButton:first-child{
    font-weight:bold;
}
.pariUnderMenuButton a{
    text-decoration:none;
    color:var(--primary-midnight-blue);
}

/* ============================
     Footer CSS
============================ */
#pariFooter {
    background: #EEEEEE;
    padding: 40px 20px;
    font-family: PT Sans;
    width:100%;
}

/* Shared row styling */
.footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 0px;
}

.footer-row-top {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Left block: flexible */
.footer-top-section:first-child {
    flex: 1 1 300px;
}

/* Right block: no flex-grow, pushed to the right */
.footer-top-section:last-child {
    flex: 0 1 300px;  /* do NOT grow */
    margin-left: auto;
    text-align: left;
}

.footer-row-bottom .footer-bottom-section {
    flex: 1 1 150px;
    min-width: 150px;
    max-width: 165px;
}
.footer-bottom-section {
    padding: 10px;
}

.footer-title {
    font-family: PT Sans;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--primary-royal-purple);
    margin-bottom: 10px;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 1px;
}
.footer-links a {
    text-decoration: none;    
    font-family: PT Sans;
    font-size: 15px;
}
.footer-links li:nth-child(even) a{
    color:var(--primary-teal-blue);
}
.footer-links li:nth-child(odd) a{
    color: var(--primary-midnight-blue);
}

.footer-links a:hover {
    color: var(--primary-ocean-blue);
}

/* ============================
     Calendar CSS
============================ */

#calendarHolder{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    padding: 20px;
    background-color:var(--primary-light-gray);
}
.calendarItem{
    color:white;
    max-width:300px;
    flex:1 1 300px;
    box-sizing:border-box;
    background-color:var(--primary-midnight-blue);
    border-radius:8px;
    box-shadow: 4px 4px 8px var(--primary-medium-gray);
}
.calendarImageHolder{
    width:100%;
    height:200px;
    background-size: cover;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}
.calendarText{
    padding:12px;
}
.calendarItemTitle{
    font-family:Walkway;
    font-size:20pt;
    font-weight:bold;
}
.calendarItemSubtitle{
    font-family:Walkway;
    font-size:16pt;
    font-weight:bold;
}
.calendarItemButton{
    text-transform:uppercase;
    font-size:14pt;
    letter-spacing: 0.03em;
    display:inline-block;
    color:white;
    padding:8px 12px;
    margin-top:16px;
    background-color:var(--primary-royal-purple);
    border-radius:4px;
    box-shadow: 2px 2px 3px var(--primary-medium-gray);
}
.calendarItemDate{
    font-weight:bold;
    margin-top:10px;
}
.calendarItemTime{
    margin-bottom:10px;
}



/* ============================
     Banner CSS
============================ */
.twoPartBanner {
    display: flex;
    flex-wrap: wrap;
    text-align:center;
    justify-content: center;   /* center the pair horizontally */
    align-items: center;        /* center them vertically */
}

.twoPartBanner-left {
    width: 125px;
    height: 125px;
    flex: 0 0 125px;            /* prevents shrinking or growing */
}

.twoPartBanner-right {
    max-width: 800px;
    padding:20px;
    flex: 1 1 auto;             /* allows it to shrink/grow but not exceed max */
}

.fiftyFiftyBanner{
    display: flex;
    flex-wrap: wrap;
}
.fiftyFiftyBanner > .fiftyFiftyDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 50%;
}
@media (max-width: 850px) {
    .fiftyFiftyBanner > .fiftyFiftyDiv {
        flex: 1 1 100%;         /* each half takes full width */
        min-height:600px;
    }
}

/* ============================
     Table CSS
============================ */
.infoTable{
    
}
.infoTable td,th{
    padding:4px 8px;
}
.hoursTable{
    background-color:var(--primary-light-gray);
    border-collapse:separate;
    border-spacing:4px 3px;
    margin: 0 auto;
    min-width:75%;
}
.hoursTable td,th{
    background-color:white;
}
.hoursTable td{
    padding:2px 8px;
}
.hoursTable td[colspan]{
    text-align: center;
}

/* ============================
     Timeline Table CSS
============================ */

.timelineTable{
    width:100%;
    border-collapse: collapse;
    margin-bottom:30px;
    margin-top:50px;
}
.timelineTableBody{

}
.timelineTableBody tr:nth-child(even){
    height:30px;
}
.timelineTableBody td:nth-child(2){
    width:10px;
}
.timelineTableBody hr{
    border:none;
    width:10px;
    height:2px;
    background-color:var(--primary-ocean-blue);
    margin:0px;
}
.timelineTableBody td:first-child{
    width:125px;
    background-image: linear-gradient(
        to right,
        white 0px,
        white 62px,
        var(--primary-ocean-blue) 62px,
        var(--primary-ocean-blue) 64px,
        white 64px,
        white 100%
        );
}
.timelineTableYearDiv{
    width:125px;
    height:125px;
    display:flex;
    border-radius:100%;
    border:2px solid var(--primary-ocean-blue);
    color:var(--primary-royal-purple);
    font-size:40px;
    font-weight:bold;
    justify-content: center;
    align-items: center;
    background-color:white;
}
.timelineTableBody td:last-child h1{
    color:var(--primary-teal-blue);
    font-size:28pt;
    font-family: Walkway;
    margin-top:5px;
}
.timelineTableBody td:last-child p{
    color:black;
    font-size:16pt;
    font-family: PT Sans;
}
.timelineTableBody td:last-child div{
    display:inline-block;
    padding:6px 12px;
    border:2px solid var(--primary-ocean-blue);
}
.timelineVerticalBar{
    width:2px;
    background-color:var(--primary-ocean-blue);
    margin:auto;
    height:30px;
}
.timelineTableBody tr:first-child td:first-child{
    background-image:
        linear-gradient(white, white), /* top white bar */
        linear-gradient(
        to right,
        white 0px,
        white 62px,
        var(--primary-ocean-blue) 62px,
        var(--primary-ocean-blue) 64px,
        white 64px,
        white 100%
        );
    background-size:
        100% 8px,   /* height of the white bar */
        100% calc(100% - 8px);
    background-position:
        top,
        0 8px;
    background-repeat: no-repeat;
}
.timelineTableBody tr:last-child td:first-child{
    background-image:
        linear-gradient(white, white),
        linear-gradient(
        to right,
        white 0px,
        white 62px,
        var(--primary-ocean-blue) 62px,
        var(--primary-ocean-blue) 64px,
        white 64px,
        white 100%
        );
    background-size:
        100% 50%,
        100% 50%;
    background-position:
        bottom,  
        top;
    background-repeat: no-repeat;
}

/* ============================
     Menu Details/Summary CSS
============================ */

.programsMenuDetails summary{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    cursor:pointer;
    text-transform: uppercase;
}

.programsMenuDetails details{
    padding:10px;
}

.programsMenuDetails details:nth-child(odd){
    background-color:white;
}

.programsMenuDetails .sum-left {
    flex: 1 1 auto;
    color: var(--primary-ocean-blue);
    font-size:24px;
    font-weight:bold;
}

.programsMenuDetails .sum-right{
    flex: 0 0 auto;
    color: var(--primary-royal-purple);
    font-size:18px;    
    font-weight:bold;
}

.ages{
    color:var(--accent-bright-green);
    font-size:16px;
    font-weight:bold;
}

.programsMenuDetails .accent{
    color:var(--accent-sky-blue);
    font-style:italic;
    font-weight:bold;
}

/* ============================
 Three Background Slideshow CSS
============================ */

.bg-slideshow{
    position:relative;
    overflow:hidden;
}
/* Three stacked layers */
.bg-slideshow::before,
.bg-slideshow::after,
.bg-slideshow div {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: bgSlideshowFade 15s infinite;
}

/* Layer 1 */
.bg-slideshow div {
  background-image: var(--img1);
  animation-delay: 0s;
  opacity:1;
}

/* Layer 2 */
.bg-slideshow::before {
  background-image: var(--img2);
  animation-delay: 5s;
}

/* Layer 3 */
.bg-slideshow::after {
  background-image: var(--img3);
  animation-delay: 10s;
}

@keyframes bgSlideshowFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}


/* ============================
Dynamic Background Slideshow CSS
============================ */

.dynamicSlideshow {
  position: relative;
  overflow: hidden;

  /* Count slides automatically */
  --count: calc(var(--slide-count, 1));
}

/* Each slide */
.dynamicSlideshow > div {
  height:100%;
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  opacity: 0;

  /* Total cycle = duration × number of slides */
  animation: dynamicSlideshowFader calc(var(--duration) * var(--count)) linear infinite;

  /* Delay = index × duration */
  animation-delay: calc(var(--i) * var(--duration));
}

/* Fade animation */
@keyframes dynamicSlideshowFader {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  25%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}