/* Import Montserrat from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

/***********************************************************************************************************   
    --> Global Controls <--  
***********************************************************************************************************/ 
    body {
        font-family: 'Montserrat', sans-serif;
        font-size: 17px; /* base size */
        line-height: 1.6; /* improve readability */
		position: relative;
    }

    header { 
        background-color: #213A57; 
        margin: 0; 
        padding: 0; 
    }    

    .logo-absolute {
    position: absolute;
    top: -10px;
    left: 25%;
    transform: none;
    max-width: 300px;
    z-index: 10;
    }

    /* Headings */ 
    h1 {
        font-family: 'Newake', sans-serif; 
        font-size: 1.8em !important; 
    }
    h2 {
        font-family: 'Newake', sans-serif; 
        font-size: 1.5em !important; 
    }
    h3 {
        font-family: 'Souvenir', serif; 
        font-size: 1.2em !important; 
    }

    h4 {
        font-family: 'Souvenir', serif; 
        font-size: 1em !important; 
    }

    h1.carousel-heading {
    color: #ffffff;
    font-size: clamp(1.1rem, 2vw + 0.5rem, 4em) !important;
    }

    h2.carousel-sub-heading {
    color: #FEC671;
    font-size: clamp(0.9rem, 1.5vw + 0.4rem, 2em) !important;
    }
    
/* Fade link control */ 
    .fade-link {
    transition: opacity 0.3s ease;  /* smooth fade */
    }

    .fade-link:hover {
    opacity: 0.7;                   /* fade effect on hover */
    }

/* Base rule for all body links except .special-links */
body a:not(.special-links) {
  text-decoration: none;            /* remove underline */
  color: #FEC671;               /* default link color */
  transition: color 0.3s ease;      /* smooth color fade */
}

/* Hover state */
body a:not(.special-links):hover {
  color: #F89537;               /* hover color */
}
/***********************************************************************************************************
    --> Site colors <-- 
***********************************************************************************************************/ 

    .pri-light { background-color: #F7E8D5D1; }
    .pri-dark{ background-color: #213A57; }
    .pri-gold{ background-color: #8A7500; }
    .sec-green{ background-color: #00A189; }
    .sec-gold{ background-color: #FEC671; }
    .logo-orange{ background-color: #F89537; }
    .logo-red{ background-color: #F1604D; }

/***********************************************************************************************************
    -->  Navigation 
***********************************************************************************************************/

    /************************************************
            --> Primary 
    ***********************************************/

    /* Base style for special nav links */
    .navbar .nav-link.special-link {
    color: #F7E8D5D1;
    transition: all 0.3s ease; /* smooth hover effect */
    }

    /* Hover state */
    .navbar .nav-link.special-link:hover {
    color: #213A57;             /* text turns white */
    background-color: #F7E8D5D1;  /* background switches to your brand color */
    }

    /* Active/current page state */
    .navbar .nav-link.special-link.active,
    .navbar .nav-link.special-link:focus {
    color: #FEC671;
    font-weight: bold;
    }

    /************************************************
            --> Footer
    ***********************************************/

    footer .nav-link.special-link {
    color: #F7E8D5D1;
    transition: all 0.3s ease; /* smooth hover effect */
    }

    /* Hover state */
    footer .nav-link.special-link:hover {
    color: #213A57;             /* text turns white */
    background-color: #F7E8D5D1;  /* background switches to your brand color */
    }

    /* Active/current page state */
    footer .nav-link.special-link.active,
    footer .nav-link.special-link:focus {
    color: #FEC671;
    font-weight: bold;
    }

/**********************************************************************************************************
    -->  Footer 
**********************************************************************************************************/
    .bg-pri-foot { background-color: #213A57; color: #F7E8D5D1 !important; }


/**********************************************************************************************************
    --> Front Page Controls <-- 
***********************************************************************************************************/

    /*
        -->  Main Carousel 
    */

        /* Remove margins/padding between header and primary carousel */
        #carouselSection {
        margin: 0;
        padding: 0;
        }
        #mainCarousel img {
        display: block;
        }

        #mainCarousel,
        #mainCarousel .carousel-item,
        #mainCarousel .carousel-item img {
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 770; /* maintain optimized ratio */
        }

        #mainCarousel .carousel-item img {
        object-fit: cover;
        width: 100%;
        }

        /* Custom caption positioning, Main carousel 
        .custom-caption {
        top: 50px;
        right: 90px;
        text-align: right;
        color: #F7E8D5D1;
        }
        */

        /* Center carousel captions */
        .carousel-caption.custom-caption {
        position: absolute;
        top: 50%;               /* push down halfway */
        left: 50%;              /* push right halfway */
        transform: translate(-50%, -50%); /* center both axes */
        text-align: center;     /* center text inside */
        color: black;            /* ensure readability */
        width: 80%;             /* optional: limit width */
        }        
		
		.carousel-caption.custom-caption-alt
		{
			color: #fff; 
		}

    /* Event carousel boxes */
        .box {
        position: relative;
        overflow: hidden;
        border-radius: 6px; /* optional rounded corners */
        }

        .box img {
        width: 100%;
        height: auto;
        display: block;
        }

        /* Overlay effect */
        .overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: #213A57; /* solid overlay color */
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0; /* hidden by default */
        transition: opacity 0.3s ease;
        }

        .overlay-content {
        text-align: center;
        color: #fff; /* adjust for contrast */
        }

        .box:hover .overlay {
        opacity: 1; /* reveal overlay on hover */
        }

        /* Carousel controls outside edges */
        #boxCarousel .carousel-control-prev,
        #boxCarousel .carousel-control-next {
        width: 5%;
        top: 50%;
        transform: translateY(-50%);
        }

        #boxCarousel .carousel-control-prev {
        left: -60px; /* push outside left */
        }

        #boxCarousel .carousel-control-next {
        right: -60px; /* push outside right */
        }

        /* Carousel controls outside edges */
        #boxCarousel .carousel-control-prev,
        #boxCarousel .carousel-control-next {
        width: 5%;
        top: 50%;
        transform: translateY(-50%);
        }

        #boxCarousel .carousel-control-prev {
        left: -60px; /* push outside left */
        }

        #boxCarousel .carousel-control-next {
        right: -60px; /* push outside right */
        }

        .custom-arrow {
            font-size: 2rem;
            color: #000; /* or #fff depending on your background */
        }

		.carousel-control-pause {
			position: absolute;
			bottom: 15px;          /* distance from bottom */
			right: 15px;           /* distance from right */
			z-index: 9999;         /* above all carousel elements */
			
			background: rgba(0,0,0,0.65);  /* accessible contrast */
			color: #fff;
			border: none;
			padding: 8px 14px;
			border-radius: 4px;
			font-size: 0.9rem;
			cursor: pointer;

			/* optional: subtle fade */
			transition: background 0.2s ease;
		}

		.carousel-control-pause:hover {
			background: rgba(0,0,0,0.85);
		}


        /* Temp backgrounds for the box carousel */ 
        .bg-red { background-color: #e74c3c; }
        .bg-green { background-color: #27ae60; }
        .bg-blue { background-color: #3498db; }
        .bg-purple { background-color: #9b59b6; }
        .bg-orange { background-color: #e67e22; }
        .bg-teal { background-color: #1abc9c; }

        /* Only apply vertical padding to the secondary events carousel */
        #boxCarousel .carousel-item {
        padding: 40px 0;
        }

        /* Front page spacer */ 
        .spacer-md-lg {
            display: block;
        }

        /* Special quote images */
        .leftquote 
        {
            max-height:40px; margin-bottom: 55px;
        }
        .rightquote 
        {
            max-height:40px; margin-top:55px;
        }


/**********************************************************************************************************
    --> Venue -> Partners Section <-- 
***********************************************************************************************************/

    #partners {
        background-color: #13130D;   /* full section background */
        padding: 2rem 1rem;
        color: #fff;                 /* text contrast */
    }

    .partners-container {
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
    }

    .partners-logos {
        display: flex;
        flex-wrap: wrap;             /* allow wrapping */
        justify-content: center;     /* center horizontally */
        align-items: center;         /* vertical alignment */
        gap: 2rem;                   /* spacing between logos */
        margin: 2rem 0;
    }

    .partner-logo {
        max-height: 100px;           /* normalize height */
        object-fit: contain;         /* keep aspect ratio */
        display: block;
        transition: transform 0.3s ease;
    }

    .partner-logo:hover {
        transform: scale(1.05);      /* subtle hover zoom */
    }

    .carousel-wrapper {
        position: relative;
    }

    #venueInfoBtn {
        padding: 0.4rem 0.65rem;
        font-size: 1.1rem;
        border-radius: 10%;
        opacity: 1;
    }

    #venueInfoBtn:hover {
        opacity: .5;
    }

/***********************************************************************************************************
    --> Custom Fonts <--
***********************************************************************************************************/

@font-face {
  font-family: 'Newake';
  src: url('../assets/fonts/NewakeFont_Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Souvenir';
  src: url('../assets/fonts/Souvenir-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Souvenir';
  src: url('../assets/fonts/Souvenir-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}    

/***********************************************************************************************************
    --> Responsive Controls <--  
***********************************************************************************************************/

/* controlling mobile positioning for carousel caption */
@media (max-width: 767.98px) {
  .carousel-caption.custom-caption {
    top: 3%;               /* move near top */
    left: 50%;
    transform: translateX(-50%); /* remove vertical centering */
    text-align: center;
  }
  .mission-text {
    width: 90%;          /* wider text block */
    left: 50%;           /* keep centered */
    transform: translateX(-50%); /* remove vertical centering */
    top: 10%;            /* move higher if needed */
    padding: 1rem;       /* optional: tighten padding */
  }

  .mission-text p {
    font-size: 1rem;     /* readable mobile size */
    line-height: 1.4;    /* improve readability */
  }}

/* Smaller screens */
@media (max-width: 576px) {
    body {
        font-size: 17px;
    } 
    .spacer-md-lg {
        display: none;
    }
    .logo-absolute, .logo-fixed {
        display: none;
    }
    .custom-caption {
        position: static;
        margin: 10px auto;
        text-align: center;
        color: #fff;
    }
    .custom-caption h1 {
        font-size: 1.2rem;
    }
    .custom-caption h2 {
        font-size: 1rem;
    }
    .custom-caption a {
        display: inline-block;
        margin-top: 8px;
        font-size: 0.9rem;
    }
    .overlay-content p {
        font-size: 0.85rem;
    }
    .overlay-content a {
        font-size: 0.8rem;
        display: inline-block;
        margin-top: 6px;
    }

    /* Box carousel controls for small screens */
    #boxCarousel .carousel-control-prev {
        left: -25px; /* keep arrows visible on small screens */
    }
    #boxCarousel .carousel-control-next {
        right: -25px;
    }
}

/* Medium screens (tablets) */
@media (min-width: 577px) and (max-width: 991px) {
    body {
        font-size: 16px;
    }
    /* Box carousel controls for tablets */
    #boxCarousel .carousel-control-prev {
        left: -40px;
    }
    #boxCarousel .carousel-control-next {
        right: -40px;
    }
}

/* Large screens (desktops) */
@media (min-width: 992px) {
    body {
        font-size: 20px;
    }
    .spacer-md-lg {
        height: 4rem; /* larger spacing for lg */
    }   
    .custom-caption {
        top: 30px;
        right: 40px;
        text-align: center;
        font-size: 1rem;
    }
    .custom-caption h1 {
        font-size: 1.5rem;
    }
    .custom-caption h2 {
        font-size: 1.2rem;
    }
    .overlay-content p {
        font-size: 0.95rem;
    }
    .overlay-content a {
        font-size: 0.9rem;
    }

    /* Box carousel controls for desktops */
    #boxCarousel .carousel-control-prev {
        left: -60px; /* push arrows further out on desktops */
    }
    #boxCarousel .carousel-control-next {
        right: -60px;
    }
}