@charset "utf-8";
/* CSS Document */

body, html {
    height: 100%;
}

body {	
    overflow-x: hidden;
}

html {
	overflow-x: visible!important;
	scroll-behavior: smooth;
}

/*FONTS*/
.light-font{
font-family: pacaembu, sans-serif;
font-weight: 400;
font-style: normal;
}

.primary-font{
font-family: pacaembu, sans-serif;
font-weight: 600;
font-style: normal;
}

.bold-font{
font-family: pacaembu, sans-serif;
font-weight: 700;
font-style: normal;
}

.title-font{
font-family: oswald, sans-serif;
font-weight: 700;
font-style: normal;
}

.subtitle-font{
font-family: oswald, sans-serif;
font-weight: 500;
font-style: normal;
}


/*GENERAL RULES*/
.z-to-front{
	z-index: 900!important;
}

.z-to-back{
	z-index: -900!important;
}

.no-bullets{
	list-style-type:none!important;
}

.no-decoration{
	text-decoration: none!important;
}

.image-contain{
	object-fit: contain;
}

.image-cover{
	width: 100%;
    height: 100%;
    object-fit: cover;
}

.flip-pic{
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.border-white{
	border-style: solid none solid none;
	border-width: thin;
	border-color: #eaeef4!important;
}

.border-royalBlue{
	border-style: solid none solid none;
	border-width: thin;
	border-color: #1931ad!important;
}

.blueline-vertical{
	width: 3px!important;
	height: 60px!important;
	background-color: #1931ad!important;
	transform-origin: top center!important;
}

.blueline-Thin{
	height: 1px;
	background-color: #1931ad!important;
}

.whiteline-vertical{
	width: 3px!important;;
	height: 80px!important;;
	background-color: #ffffff!important;
	transform-origin: top center!important;;
}

.whiteline{
	height: 3px;
	background-color: #eae9e4!important;
}

.waypoint-vis{
	opacity: 0;
}


/*TEXT FORMATTING*/
 
.text-offwhite{
	color:#eae9e4!important;
}

.text-blue{
	color: #1931ad!important;
}

.text-lightblue{
	color: #6f84c9!important;
}

.text-midBlue{
	color: #1a2a84!important;
}

.text-darkblue{
	color: #141a35!important;
}

.xl-tracking{
	letter-spacing: 12px;
}

.lg-tracking{
	letter-spacing: 9px;
}

.med-tracking{
	letter-spacing: 6px;
} 

.sm-tracking{
	letter-spacing: 4px;
}

.xs-tracking{
	letter-spacing: 2px;
}

.xxs-tracking{
	letter-spacing: 1px;
}

.justify-text{
	text-align: justify;
  	text-justify: inter-word;
}


/*LINK AND HOVER EFFECTS*/

.text-link-overline{
	text-decoration: none;
}

.text-link-overline:hover{
	text-decoration-line: overline;
	text-decoration-color: #1931ad!important;
}

.text-link-opacity{
	opacity: 75%;
}

.text-link-opacity:hover{
	opacity: 100%;
}

.text-link-royalBlue{
	color: #1931ad!important;
	text-decoration: underline;
}

.text-link-royalBlue:hover{
	color: #1a2a84!important;
	text-decoration: none!important;
}

.text-link-white{
	text-decoration: none;
	color: white!important;
}

.text-link-white:hover{
	text-decoration: underline;
}



/*BACKGROUNDS*/
.offwhite-bgnd{
	background-color: #d9e4ff!important;
}

.white-bgnd{
	background-color: #ffffff!important;
}

.light-blue-bgnd{
	background-color: #6f84c9!important;
}

.mid-blue-bgnd{
	background-color: #1a2a84!important;
}
 
.royalBlue-bgnd{
	background-color: #1931ad!important;
}

.muted-blue-bgnd{
	background-color: #262b3f!important;
}

.dark-blue-bgnd {
    background-color: #0c1123 !important;
}

.dark-grey-bgnd {
    background-color: #0e1016 !important;
}

.contactBackgroundImg {
    position: relative;
}

.contactBackgroundImg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("images/backgrounds/area-rider-2-brightblue.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.8; 
    z-index: 0;
}

.calendarBackgroundImg {
    position: relative;
}

.calendarBackgroundImg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("images/backgrounds/arena-rider-brightblue.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.8; 
    z-index: 0;
}

.mainBackgroundImg {
    position: relative;
}

.mainBackgroundImg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("images/backgrounds/arena-dirt-brightblue.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.8; 
    z-index: 0;
}

#home {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#calendar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#bcas-logo {
    width: clamp(360px, 45vw, 620px);
    height: auto;
    fill: #ffffff;
    position: relative;
    z-index: 4;
}

.hero-terrain {
    width: 100%;
    line-height: 0;
    flex-shrink: 0;
    margin-top: clamp(-300px, -25vw, -150px);
    position: relative;
    z-index: 3;
}

.calendar-terrain {
    width: 100%;
    line-height: 0;
    flex-shrink: 0;
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: -80px;
}

.hero-terrain svg {
    display: block;
    width: 100%;
    height: clamp(180px, 35vw, 508px)!important;
}

/* --- FullCalendar Theming --- */
:root {
    --fc-border-color: #eaeef4;
    --fc-button-bg-color: #1931ad; 
    --fc-button-border-color: #1931ad;
    --fc-button-hover-bg-color: #1a2a84; 
    --fc-button-hover-border-color: #1a2a84;
    --fc-button-active-bg-color: #141a35; 
    --fc-button-active-border-color: #141a35;
    --fc-today-bg-color: #e7f4ff;
}

#calendar-widget {
    font-family: 'pacaembu', sans-serif; /* Your .primary-font */
}

.calendar-legend {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    padding: 10px;
    font-family: sans-serif;
    font-size: 14px;
    justify-content: flex-start;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px; 
    display: inline-block;
}

.legend-color.approved {
    background-color: #7bb4ff;
    border: 1px solid #141a35; 
}

.legend-color.pending {
    background-color: #fff671;      
    border: 1px solid #262b3f; 
}

.legend-color.closed {
    background-color: #c4c4c47a;
    border: 1px solid #141a35; 
}
.legend-color.open {
    background-color: #28a745;
    border: 1px solid #141a35; 
}

.legend-label {
    color: #0b162d; 
    font-weight: 500;
}

.fc .fc-toolbar-title {
    font-family: 'oswald', sans-serif;
    font-weight: 700;
    color: #0b162d;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Day Numbers */
.fc .fc-daygrid-day-number {
    font-family: 'pacaembu', sans-serif;
    font-weight: 600;
    color: #0b162d;
    padding: 8px;
}

.fc-event-approved {
    background-color: #7bb4ff!important;
    color: #141a35!important;
    border: none!important;
    text-wrap: auto;
}
.fc-event-pending {
    background-color: #fff671!important;
    color: #141a35!important;
    border: none!important;
    text-wrap: auto;
}
.fc-event-closed {
    background-color: #c4c4c47a!important;
    color: #141a35!important;
    border: none!important;
    text-wrap: auto;
}
.fc-event-open {
    background-color: #28a745!important;
    color: #141a35!important;
    border: none!important;
    text-wrap: auto;
}
.fc-h-event .fc-event-main {
    color: #141a35!important;
}
.fc-daygrid-block-event .fc-event-time {
    font-weight: default!important;
}

.fc-col-header-cell-cushion {
    font-family: 'pacaembu', sans-serif;
    font-weight: 600;
    color: #141a35;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fc-list-day-text {
    font-family: 'pacaembu', sans-serif;
    font-weight: 600;
    color: #141a35;
    padding: 8px 0;
}

.fc-list-day-side-text {
    font-family: 'pacaembu', sans-serif;
    font-weight: 600;
    color: #1931ad;
    padding: 8px 0;
}

.fc .fc-highlight {
    background-color: rgba(26, 146, 226, 0.1);
}

/* The "Booked" Event Style */
.fc-event {
    border-radius: 4px !important;
    padding: 2px 5px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* --- Time Slot Picker Styling --- */
#timeSlotContainer .btn-time {
    font-family: 'pacaembu', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    border: 2px solid #6f84c9; 
    color: #141a35;
    background: transparent;
    transition: all 0.2s ease;
}

#timeSlotContainer .btn-time:hover:not(.disabled) {
    border-color: #1931ad;
    color: #1931ad;
}

#timeSlotContainer .time-slot-active {
    background-color: #141a35 !important;
    border-color: #141a35 !important;
    color: #ffffff !important; 
}

#timeSlotContainer .disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: #ffffff;
}

.fc-event-pending:hover {
    background-color: #fff671!important;
}

.fc-event-approved:hover {
    background-color: #7bb4ff!important;
}
.fc-event-closed:hover {
    background-color: #c4c4c47a!important;
}
.fc-event-open:hover {
    background-color: #28a745!important;
}


.fc .fc-button-primary:disabled {
    background-color: #e7f4ff!important;
    border-color: #e7f4ff!important;
    color: #1931ad!important;
}

/* Make sure content inside sits above the pseudo-element */
.mainBackgroundImg > * {
    position: relative;
    z-index: 1;
}

/* Mobile Responsive - Phone Screens */
@media (max-width: 768px) {
    .hero-terrain {
        margin-top: clamp(-200px, -30vw, -80px)!important;
    }
    
    .hero-terrain svg {
        height: clamp(200px, 50vw, 400px)!important;
    }
}


/*NAVIGATION*/
#nav {
    background-color: transparent !important;
    transition: background-color 200ms linear;
}

#nav.scrolled {
    background-color: #1931ad !important;
}

.nav-color {
    background-color: transparent;
    transition: background-color 200ms linear;
}

.nav-color.scrolled {
    background-color: #1931ad!important;
}

.menu-hover{
	border-top-style: solid!important;
	border-top-color: transparent!important;
	border-top-width: medium!important;
	color: white!important;
}

.menu-hover:hover{
	border-top-style: solid;
	border-top-color: white!important;
	border-top-width: medium;
	color: white!important;
}

.logo img{
	height: 4.3vmax;
}

.active{
	border-top-style: solid!important;
	border-top-color: white!important;
	border-top-width: medium!important;
	color: white!important;
}

.booking-button{
	border: none;
	background-color: #d9e4ff!important;
	color: #1931ad!important;
	border-radius: 3px;
}

.booking-button:hover{
	background-color: #adbbd8!important;
	color: #1931ad!important;
}

.booking-button-mobile {
    background-color:  #d9e4ff!important;
    color: #1931ad!important;
    border: none;
    border-radius: 3px;
    letter-spacing: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 150ms ease;
	padding-left: 0px;
}

.booking-button-mobile:hover {
   background-color: #adbbd8!important;
   color: #1931ad!important;
}

.bookingActive{
	background-color:#2e4ccc!important;
	color: white!important;
}

.border-lightblue{
	border-style: solid;
	border-width: medium;
	border-color: #eaeffd!important;
}

/* Navbar clamp sizing */
.navbar-nav .nav-link {
    font-size: clamp(0.65rem, 1vw, 0.875rem);
}

#navbooking div {
    font-size: clamp(0.65rem, 1vw, 0.875rem);
}

.logo img {
    height: clamp(1.8rem, 3.5vw, 4.3rem);
}

/*BUTTONS*/
.btn-height{
	height: 30px;
}

.royalBlue-solid-button{
	border: none;
	background-color: #1931ad!important;
	border-radius: 3px;
}

.royalBlue-solid-button:hover{
	background-color: #2e4ccc!important;
	color: #eae9e4!important;
}

.lightblue-solid-button{
	background-color: #6f84c9!important;
	color: #eae9e4!important;
}

.lightblue-solid-button:hover{
	background-color: #9baad3!important;
	color: #eae9e4!important;
}

.brightBlue-solid-button{
	border: none;
	background-color: #2e4ccc!important;
	border-radius: 3px;	
    color: #eae9e4!important;
}

.brightBlue-solid-button:hover{
	background-color: #1a2a84!important;
	color: #eae9e4!important;
}

.large-curved-edges{
	border-radius: 20px;
}

.curved-edges{
	border-radius: 10px;
}

.small-curved-edges{
	border-radius: 5px;
}

/*OTHER CLASSES*/

.slick-prev:before {
	color: #6f84c9!important;
}
.slick-next:before {
	color: #6f84c9!important;
}

.slick-dots li button::before {
    font-size: 16px;
    color: #e6e6e6!important;
    opacity: 0.7;
	padding-top: 8px;
  }

.slick-dots li.slick-active button::before {
    color: #e6e6e6!important;
    opacity: 1;
	padding-top: 8px;
  }

.title-minibox {
    width: 7px;
    height: 100%;
    min-height: 27px;
}

.header-clampsizing {
    font-size: clamp(4rem, 9vw, 3.5rem);
}

.footer-logo-wrap {
    top: 0;
    left: 20px;
    transform: translateY(-50%);
    z-index: 10;
}

.footer-logo-img {
    height: clamp(90px, 8vw, 90px);
    width: auto;
}

/* Form focus styling */
.form-control:focus, input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #1931ad !important;
    box-shadow: 0 0 0 0.25rem rgba(29, 26, 226, 0.15) !important;
}

.form-control:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none;
    border-color: #1931ad !important;
    box-shadow: 0 0 0 0.35rem rgba(29, 26, 226, 0.2) !important;
}

/*MEDIA QUERIES*/

@media (max-width: 991.98px) {

    /* Remove the top border active state on mobile */
    .navbar-nav .nav-link.active {
        border-top-color: transparent !important;
		color: #141a35 !important;
    }

    /* Make nav items full width */
    .navbar-nav .nav-item {
        width: 100%;
    }

    /* Active link becomes flex so ::after can grow beside the text */
    .navbar-nav .nav-link.active {
        display: flex !important;
        align-items: center;
        padding-right: 0 !important;
    }

    /* Dark brown block that fills space to the right of the word */
    .navbar-nav .nav-link.active::after {
        content: '';
        flex: 1;
        height: 1.5em;
        background-color: #141a35;
        margin-left: 12px;
    }
}

/* Mobile Specific Fixes for FullCalendar */
@media (max-width: 768px) {
    /* 1. Scale down the title and stack buttons if needed */
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 10px;
    }

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

    /* 2. Shrink day headers (SUN -> S) to prevent overlapping */
    .fc .fc-col-header-cell-cushion {
        font-size: 0.7rem;
        padding: 2px !important;
    }

    /* 3. Fix the overlapping events in the grid */
    .fc-daygrid-event {
        white-space: normal !important; /* Allow text to wrap */
        font-size: 0.65rem !important;
        padding: 1px 2px !important;
        line-height: 1;
        margin-bottom: 1px !important;
    }

    /* Hide the dot/bullet on mobile to save horizontal space */
    .fc-daygrid-event-dot {
        display: none !important;
    }

    /* 4. Make the calendar container scrollable if it gets too tight */
    .fc .fc-view-harness {
        min-height: 400px;
    }
    
    /* Adjust button sizes for thumbs */
    .fc .fc-button {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
}