html {
    background-image: url(../img/background4.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    -webkit-background-size: cover !important;
    background-attachment: fixed !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    background-color: #E6E6E6;
    outline-style: none !important;
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* full viewport height */
}

main {
    flex: 1; /* pushes footer to bottom */
    padding-top: 70px; /* adjust to match the height of your menu area */
}


.uk-button-outlook {
    background-color: #F25022; /* Microsoft Outlook blue */
    color: #fff !important;
    border:1px solid transparent !important;
}

.uk-button-outlook:hover {
    background-color: #C13F1B; /* darker on hover */
    color: #fff;
}

@font-face {
    font-family: "Yukarimobile";
    src: url("../fonts/YUKARIMOBIL.eot");
    /* IE9 Compat Modes */
    src: url("./fonts/YUKARIMOBIL.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("../fonts/YUKARIMOBIL.otf") format("opentype"),
        /* Open Type Font */
        url("../fonts/YUKARIMOBIL.svg") format("svg"),
        /* Legacy iOS */
        url("../fonts/YUKARIMOBIL.woff") format("woff"),
        /* Modern Browsers */
        url("../fonts/YUKARIMOBIL.woff2") format("woff2");
    /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
#menu, #menu-mobile {
    
    color: #2E7DBB !important;
    border: none !important;
}

#menu-slide
{
    background-color: #2E7DBB;
    color: white !important;
    border: none !important;
}

.uk-nav-default
{
    font-size: 1.2rem !important;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1.2s ease-in forwards;
}

#socialMedia {
    color: white;
    background-color: rgba(40, 40, 40, 0.2);
 /*   display: inline-block;*/
   
}

#socialMediaText {
  /*  background-color: rgba(40, 40, 40, 0.4); /* slightly transparent grey */
    font-family: "Yukarimobile";
    display: inline-block;  
    font-size: 2rem;                 /* make background wrap text */
    padding: 4px 10px;                        /* space around text */
    border-radius: 6px;                       /* optional rounded corners */
    text-shadow: 2px 2px 2px rgba(40, 40, 40, 1);
    letter-spacing: 2px;
}

#socialMediaIcons a .uk-icon {
    vertical-align: middle;   /* align icons to the same middle baseline */
    position: relative;
    top: 2px;                  /* nudge down slightly to match others */
    
}
#socialMediaIcons a {
    margin-top: 10px !important; /* reset any UIkit margin */
    vertical-align: middle;
    
}

#blueboar {
    padding: 8px;
    font-size: 0.9rem;
    color: #2E7DBB;
    text-align: center;
}

#blueboar img {
    max-width: 180px;
}

#calendar-wrapper {
    display: flex;
    gap: 20px; /* space between columns */
    background: white;
    padding: 20px;
    flex-wrap: wrap; /* allows stacking on small screens */
}

.filter-box {
    flex: 1 1 300px; /* grow, shrink, min width */
    max-width: calc(33% - 10px);  /* optional for desktop */
    background: #fff;
    box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.20) !important; /* bigger & darker */
}

.calendar-box {
    flex: 2 1 600px; /* grow more than filter box */
    background: #fff;
    box-shadow: 0px 0px 12px 5px rgba(0,0,0,0.20) !important; /* bigger & darker */
    max-width: calc(67% - 10px);
}



  
.fc-event-title {
    white-space: normal;
    font-size: 0.8em;
    font-weight: 600;
    padding: 1.5%;
}

.event-details .label {
    display: inline-block;
    width: 95px;       /* adjust until it fits your longest label */
    font-weight: bold;
    text-align: right;
  }

.btn.active
{
    background-color: #2E7DBB  !important;
    
    border-color: #2E7DBB !important;
}

.btn:disabled{
    border-color: #256496 !important;
}

.fc .fc-list-event:hover td
{
    background-color: #2E7DBB  !important;
}

.btn-primary{
    background-color: #256496 !important;
    --bs-btn-border-color: #256496 !important;
}


#apple-link:hover {
    background-color: white;
    color: black;
    border: 1px solid black;
}

.fc-toolbar-title
{
    font-size: 1.2rem !important;
}

.hide-event {
    display: none !important;
}

#ics-link:hover
{
    font-weight: 600;
    color: black !important;
    
}

#aboutUS {
    width: 100%;

}

#aboutUS b {
    font-size: 1.3em;

}

.calendar-button {
    flex-shrink: 0;
    max-width: 250px;
  }

#aboutUS-text {
    width: 90%;
    text-shadow: 2px 2px 2px rgba(40, 40, 40, 1);
    color: white;
    background-color: rgba(20, 20, 20, 0.2);
    text-align: justify;
    font-size: 1.5em;
}

#signature {
    float: right;
    font-family: "Yukarimobile";
    letter-spacing: 3px;
    font-size: 2.2em;
}

.uk-switch {
    appearance: none;
    width: 40px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    position: relative;
    outline: none;
    cursor: pointer;
    transition: background 0.3s ease;
}
.uk-switch:checked {
    background: #1e87f0;
}
.uk-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.uk-switch:checked::before {
    transform: translateX(20px);
}


.modal-label
{
  font-weight: 700;
}

.step {
    background: #fff;                /* white background */
    padding: 2rem;                    /* space inside */              /* rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* subtle shadow */
    max-width: 700px;                 /* limit width for readability */
    margin: 0 auto 2rem auto;         /* center horizontally + bottom space */
  }
  
  /* Apply consistent height and alignment to Step 2 buttons */
.step[data-step="2"] .uk-button {
    height: 44px; /* or match your tallest button */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    padding: 0 12px; /* horizontal padding only */
    white-space: nowrap;
  }
  
  /* Optional: icon spacing */
  .step[data-step="2"] .uk-button i {
    margin-right: 6px;
  }


@keyframes fadeIn {
    to {
        opacity: 1
    }
}

/* Optional: make social section more mobile-friendly */
@media (max-width: 640px) {
    #socialMedia {
        width: auto;              /* let it shrink naturally */
        padding: 10px;
    }
    #socialMediaText {
        font-size: 1.8rem;         /* smaller text on mobile */
    }
    .links-img-div img {
        max-width: 100%;
        height: auto;
    }

    #calendar-wrapper{
        padding:0px !important;
    }

    #calendar-wrapper > div {
        padding-left: 45px !important;
    }
    .step {
        padding: 1.5rem; /* slightly less padding on small screens */
      }

      .fc .fc-toolbar-title
      {
        margin-bottom: 8px;
      }

     
        #copyBtn,
        #redirectBtn,
        #prevBtn {
          margin-bottom: 8px;
        }
      
    
      .fc-header-toolbar {
        display: flex;
        flex-direction: column;
       
      }
    
      .fc-toolbar-chunk:first-child {
        order: 2; /* Move title to top */
        margin-bottom: 8px;
      }
    
      .fc-toolbar-chunk:last-child {
        order: 3;
       
      }

 

    #socialMediaIcons a .uk-icon {
        width: 24px;
        height: 24px;
    }
    #links-wrapper p {
        font-size: 0.9rem;
    }
    #links-wrapper {
        padding-left: 15px;
        padding-right: 15px;
      }
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    #calendar-wrapper {
        flex-direction: column;
    }
    .filter-box,
    .calendar-box {
        max-width: 100%;
    }


    
      #filter-container > div > div:first-child {
        margin-bottom: 8px;
        flex-wrap: wrap;
      }
    
      #filter-container label {
        font-size: 1rem;
      }
    
    

      

}



@media (min-width: 1024px) {
    /* Increase padding for the whole block */
    #socialMedia {
        padding: 40px !important; /* bigger rectangle */
    }



    #socialMediaIcons > a > svg {
        width: 50px;   /* adjust until happy */
        height: 50px;
    }

    /* Increase text size */
    #socialMediaText {
        font-size: 2.5rem; /* bigger label */
        font-weight: bold; /* optional for emphasis */
    }
    #links-wrapper {
        padding-left: 15px;
        padding-right: 15px;
      }
      
}