/* First the Cantabs RC specific colours/theme is set up. This is the events theme, so it's slightly
  different to the main website's theme. */

:root, [data-bs-theme=light] {
    --tabs-primary: #002147;
    --tabs-primary-dark: #001730;
    --tabs-primary-text: #FFFFFF;
    
    --tabs-secondary: #cccccc;
    --tabs-secondary-dark: #888888;
    --tabs-secondary-text: #;

    --tabs-highlight: #D4A017;
    --tabs-highlight-dark: #B8860B;
    --tabs-highlight-text: #212529;

    --tabs-bg-dark: #002147;
    --tabs-bg-light: #f0f0f0;
}

/* Now we customise Bootstrap's components to match our theme. These customisations are not
   exhaustive. We only customise the components that are currently being used, so this might need
   updating in future. */

.btn-secondary {
    --bs-btn-bg: var(--tabs-highlight);
    --bs-btn-border-color: var(--tabs-highlight-dark);

    --bs-btn-color: var(--tabs-highlight-text);
    --bs-btn-hover-color: var(--tabs-highlight-text);
    
    --bs-btn-hover-bg: var(--tabs-highlight-dark);
    --bs-btn-hover-border-color: var(--tabs-highlight-dark);
    
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

/* Finally, we add some specific customisation for the events page. The declarations in this section
   aim to go roughly in the same order as the elements will appear on the page.*/

body {
    background-color: var(--bs-light-bg-subtle);
}

.navbar {
    background-color: var(--tabs-primary) !important;
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--tabs-primary-text) !important;
}

.navbar .nav-link:hover,
.navbar .navbar-brand:hover {
    color: var(--tabs-highlight-dark) !important;
}

.navbar .nav-link.active {
    color: var(--tabs-highlight) !important;
    font-weight: bold;
}

.navbar-toggler {
    border-color: var(--tabs-primary-text);
}

.navbar-toggler-icon { /* Hamburger icon lines */
    color: var(--tabs-primary-text);
}

a:hover {
    color: var(--tabs-highlight);
}

.hero-section {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 20rem 1rem;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    color: var(--tabs-primary-text);
}


#content section {
    margin-bottom: 2rem;
}

#content section:last-child {
    margin-bottom: 0;
}

.hero-section::before {
    /* Overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 33, 71, 0.70); /* Main color with 70% opacity */
    z-index: 1;
}

.hero-section .container {
    /* Content on top of overlay */
    position: relative;
    z-index: 2;
}

.accordion-button p {
    margin: 0;
}

.section-title {
    text-align: center;
    margin-top: 0rem;
    margin-bottom: 2rem;
    font-weight: 500;
    font-size: 2.5rem;
}

footer {
   background-color: var(--tabs-primary);
   color: var(--tabs-primary-text);
   padding: 1rem 0;
   margin-top: 1.5rem;
}

footer p:last-child {
    margin-bottom: 0;
}