@charset "UTF-8";
/*!
 * Bootswatch v5.3.8 (https://bootswatch.com)
 * Theme: simplex
 * Copyright 2012-2025 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/
/*!
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)

 */

:root {
  --mf-blue: #02cdea; /*blue light logo heading and title */
  --mf-darkblue: #0063b0; /*blue dark optional */
  --mf-gray: #636663; /* gray font */
  --mf-lightbk: #f6f7eb; /* light background */
  --mf-orange: #fe8e00; /* light background */
}


a {
  text-decoration: none;
  color: var(--mf-blue);
  font-weight: 400;
}
a:hover {
  color: var(--mf-gray);

}
.mobile-container {
    max-width: 420px; /* A typical phone width */
    margin: 0 auto;
    min-height: 100vh;
    background-color: #f6f7eb;
    box-shadow: 0 0 20px rgba(0,0,0,0.1); /* Add a subtle shadow */
}

.navbar-brand{
  color: white !important;
  letter-spacing: 2px;
  font-size: 1.2em;

}
.nav-school {
    background-color: #02cdea;
    border: none !important; /* Removes all borders */
    padding: 0;
}

.navbar-toggler{
    border: none !important; /* Removes all borders */

}
.navbar-toggler:focus {
  /* This removes the default browser outline */
  outline: none;

  /* This specifically targets the box-shadow Bootstrap adds for focus */
  box-shadow: none;

  /* If you want to ensure the border is also explicitly gone */
  border-color: transparent;
}
.main{
  padding: 15px;
  text-align: center;  

}

.nav-link{
  font-family: "Rubik", sans-serif;  
  font-weight: 400;
  color:  var(--mf-lightbk) !important;
  padding: 0.1rem !important;
  letter-spacing: 1px;
}

.nav-link:hover {
  color: var(--mf-darkblue) !important;     /* Ensure text color is readable */
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  font-family: "Rubik", sans-serif;  
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--mf-gray);
}
h1{
  font-size: 1.5em;
  letter-spacing: 1px;
}
h2{
  font-size: 1.1em;
  letter-spacing: 1px;
}


.bluebox-h1 {
  background-color: var(--mf-blue);
  color: var(--mf-lightbk); 
  padding: 8px 12px;
  font-size: 1.4em;
  font-weight: 400;
}

.bluebox-h2:hover {
  /* You can use a hexadecimal value or another Bootstrap variable */
  color: #ffffff !important; /* Bootstrap Success Green */
}


.bluebox-h2 {
  background-color: var(--mf-blue);
  color: var(--mf-lightbk); 
  padding: 8px 12px;
  font-size: 1.1em;
  font-weight: 400;
}

.bluebox-h3 {
  background-color: var(--mf-blue);
  color: var(--mf-lightbk); 
  padding: 6px 10px;
  font-size: 0.8em;
  font-weight: 400;
}

.bluebox-h4 {
  background-color: var(--mf-blue);
  color: var(--mf-lightbk); 
  padding: 6px 10px;
  font-size: 1em;
  font-weight: 400;
}
p {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem; 
  line-height: 1.8; /* Good vertical spacing for body text */
  font-weight: 200;

}

.donwarrow{
  vertical-align: 7%;
  font-size: 1.6rem;
  padding-left: 12px;
}
strong {
  font-weight: 400;

}


.textblock{
  font-family: 'Rubik', sans-serif;
  font-size: 1rem; 
  line-height: 1.8; /* Good vertical spacing for body text */
  font-weight: 200;  
  width: 90%;
  text-align: center;  
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--mf-gray);;
}

.day{
  font-family: 'Rubik', sans-serif;
  font-size: 1rem; 
  line-height: 1.8; /* Good vertical spacing for body text */
  font-weight: 200;  
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--mf-gray);
  text-align: left;  

}

.date{
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem; 
  font-weight: 400;  
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
  padding-bottom: 0px;
  color: var(--mf-gray);
}


.summary{
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem; 
  font-weight: 200;  
  margin-left: auto;
  margin-right: auto;
  padding-top: 2px;
  padding-bottom: 10px;
  color: var(--mf-gray);
}

.register-btn-sm {
  /* Text */
  color: var(--mf-lightbk); /* White text for visibility on blue background */
  font-size: 0.8rem; 
  
  /* Background & Border */
  background-color: var(--mf-orange); /* Example Blue Background */
  
  /* Spacing and Display */
  padding: 2px 10px;
  cursor: pointer;
  display: inline-block; /* Essential for block properties like padding to work well */
  transition: all 0.3s ease; /* Smooth transition for the hover effect */
  border-radius: 5%;
  margin-top: 10px;
}

.reg{
  font-family: 'Rubik', sans-serif;
  font-size: 1rem; 
  line-height: 1.8; /* Good vertical spacing for body text */
  font-weight: 200;  
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  color: var(--mf-gray);
  text-align: left !important;  

}
.payment{
  font-family: 'Rubik', sans-serif;
  font-size: 1rem; 
  font-weight: 200;  
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
  color: var(--mf-gray);

}

q {
  /* First level quotes: Double Angle Brackets (for example) */
  /* Second level quotes (nested): Single Quotes */
  quotes: "‘" "’";
font-family: "Times New Roman", Times, serif;
font-style: italic;
  color: #6a6a6a;
  font-size: 1.2rem; 
  line-height: 1.4; /* Good vertical spacing for body text */


}
.event {
    position: relative;
    text-align: center;
    color: white;
}

.top-left {
  color: var(--mf-gray);
  font-family: 'Rubik', sans-serif;
  font-size: 0.5rem;     
  font-weight: 400;  
  position: absolute;
  top: 1px;
  left: 1px;
  letter-spacing: 1px;
}






   .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr); 
            gap: 1px; 
        }

        .day-cell {
            padding-top: 200%; 
            position: relative;
            overflow: hidden;
            background-color: #eeeeee;
        }
        
        .photo-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex; 
            flex-direction: column; 
            gap: 1px; 
            background-color: #eeeeee; 
        }

        .image-link {
            width: 100%;
            height: 50%;
            display: block; 
            line-height: 0; 
            overflow: hidden;
        }

        .cell-image {
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 0.3s ease-in-out;
        }

        /* Container for the day number and text overlay */
        .cell-content-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10; 
            padding: 4px;
            display: flex;
            flex-direction: column;
            justify-content: space-between; 
            color: var(--mf-gray);
            
            /* === THE CRITICAL FIX === */
            pointer-events: none; /* Allows mouse clicks to pass through to the links below */
        }

        .day-number {
            font-size: 0.8rem; 
            font-weight: 400;
            line-height: 1;
            align-self: flex-end; 
        }
        
        .event-text {
            font-size: 0.5rem;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.7);
            width: 100%;
            margin-bottom: 0;
            letter-spacing: 0.15em;
            font-weight: 400;
            padding: 1px;
            color: var(--mf-lightbk);
            
            /* Since we set pointer-events: none on the parent overlay, we must
               re-enable pointer events ONLY for the text block if you want 
               it to be separately clickable, BUT since we want the IMAGES 
               to be clickable, we leave the text block as is. */
        }
        
        .day-cell:hover .cell-image {
            transform: scale(1.03);
        }




/* 2. Insert the opening quote before the content */
q:before {
  content: open-quote;
  margin-right: 0.1em;


}

/* 3. Insert the closing quote after the content */
q:after {
  content: close-quote;
}
.rubik-test {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-size: 1em;

  font-style: normal;
}



.btn-custom-blue {
  color: var(--mf-darkblue);
  background-color: var(--mf-lightbk); 
  border: 4px solid var(--mf-darkblue);   /* Black Border (2px thick) */

}

/* Define the hover/active states for better user experience */
.btn-custom-blue:hover,
.btn-custom-blue:focus,
.btn-custom-blue:active {
  color: var(--mf-lightbk); /* White text for visibility on blue background */

  background-color: var(--mf-darkblue); 
  border-color: var(--mf-darkblue); 

}


.register-btn {
  /* Text */
  color: var(--mf-lightbk); /* White text for visibility on blue background */
  
  /* Background & Border */
  background-color: var(--mf-orange); /* Example Blue Background */
  
  /* Spacing and Display */
  padding: 5px 10px;
  cursor: pointer;
  display: inline-block; /* Essential for block properties like padding to work well */
  transition: all 0.3s ease; /* Smooth transition for the hover effect */
  border-radius: 5%;
}

/* --- Hover State --- */
.register-btn:hover {
  /* Background & Border Change */
  background-color: var(--mf-orange); /* Change background to White on hover */
  color: var(--mf-lightbk); /* White text for visibility on blue background */
  
  /* Text Change */
}

.register-btn-sm:hover {
  /* Background & Border Change */
  background-color: var(--mf-orange); /* Change background to White on hover */
  color: var(--mf-lightbk); /* White text for visibility on blue background */
  
  /* Text Change */
}
ul.day-bullet {
  list-style-type: none; 
  padding-left: 20px; 

  font-family: 'Rubik', sans-serif;
  font-size: 1rem; 
  font-weight: 200;  
  color: var(--mf-gray);
  text-align: left;  

}

ul.day-bullet li {
  list-style-type: none;
  position: relative;
  padding-left: 15px; 
  line-height: 1.5; /* Good for alignment */
  padding-bottom: 5px;

}

ul.day-bullet li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em; /* Adjust this value for vertical alignment */
  
  background-image: url('star.JPG');
  background-repeat: no-repeat;
  background-size: 10px 10px; 
  
  width: 10px; 
  height: 10px;
}

.monthly-themes{
  font-family: 'Rubik', sans-serif;
  font-size: 1rem; 
  line-height: 1.8; /* Good vertical spacing for body text */
  font-weight: 200;  
  width: 90%;
  text-align: center;  
  margin-left: auto;
  margin-right: auto;
  color: var(--mf-gray);
}

/* Targets the button inside all accordion headers */
.accordion-header .accordion-button {
  background-color: var(--mf-lightbk); 
  color: var(--mf-gray);
}

/* Targets the button when it is collapsed (closed) */
.accordion-header .accordion-button.collapsed {
  background-color: var(--mf-lightbk); 
}

/* Targets the button when it is NOT collapsed (open) */
.accordion-header .accordion-button:not(.collapsed) {
  background-color: var(--mf-blue); 
  color:  white;
}

.curriculum {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem; 
  line-height: 1.8; /* Good vertical spacing for body text */
  font-weight: 200;  
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--mf-gray);
  text-align: left;  

}



.curriculum thead th {

  border-bottom: 0.5px solid var(--mf-gray); !important;  /* Example: Bootstrap's Danger Red */
}
.curriculum th{
  font-weight: 400;  
  text-align: left;
}

.curriculum td{
   text-align: left;
}




.curriculum thead th {
  border-color: var(--mf-gray) !important; /* Example: Bootstrap's 'info' blue */
}



.orange-alert {
  /* Set your custom background color */
  background-color: var(--mf-orange);
  
  /* You should also set the border and text color for consistency */
  color: white; 
}

.orange-alert h6{
  text-transform: uppercase;
  font-weight: 400;

   color: white; 
}

.orange-alert p{
  font-size: 1rem; 
}