/* ========================================================================= */
/* Custom CSS Reset                                                            */
/* ========================================================================= */
/* Safe base rules that don't fight Bootstrap */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body { height: 100%; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Media: don't force block for inline SVG icons */
img, picture, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}
svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Form controls inherit body font */
input, button, textarea, select { font: inherit; }

/* Scoped typography helpers for article content */
.prose :where(p) { margin-bottom: 1rem; }
.prose :where(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: .5rem; }


/* ========================================================================= */
/* Custom Variables                                                            */
/* ========================================================================= */
:root {
    /* Fonts - use exact Google Font names */
    --heading-font: "Source Sans 3", "Nunito", sans-serif;
    --head-font:    "Oswald", sans-serif;
    --nav-font:     "Paytone One", sans-serif;
    --para-font:    "Source Sans 3", "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    /* Brand colours */
    --site-blue:   #95d4e4;     /* light blue */
    --site-yellow: #dae141;     /* yellow */
    --site-green:  #21983a;     /* green */
    --site-white:  #ffffff;
    --site-bg:     #f4f6f5;     /* page background */

    --color-light-green: #2cccc4;
    --color-dark-green:  #000000;
    --color-white:       #ffffff;
    --border-color:      #1f1f1f;

    --nav-font-color:   var(--border-color);
    --nav-background:   var(--color-white);
    --page-color:       #333333;
    --header-bg-color:  rgba(255,255,255,.95);

    --blue:    #18798E;
    --dkblue:  #00617C;
    --green:   #5FB052;
    --dkgreen: #3A933E;

    --btn-bgcolor:    #333333;
    --btn-color:      #ffffff;
    --btn-border:     #666666;
    --btn-hover-bg:   #eaeaea;
    --btn-hover-color:#333333;

    --footer-color: #d6d6d6;
    --meta-heading: #464646;
    --meta-para:    #969696;

    /* Layout heights */
    --header:               5rem;
    --featured-header:      200px;
    --main:                 300px;
    --articles:             300px;
    --chairperson-wrapper:  300px;
    --footer:               1fr;
}


/* ========================================================================= */
/* Social Media Icon Colours                                                   */
/* ========================================================================= */
/* Requires Font Awesome to be loaded */
.fa-facebook, .fa-facebook-square   { color: #3b5998; }
.fa-twitter, .fa-twitter-square     { color: #00aced; }
.fa-google-plus, .fa-google-plus-square { color: #dd4b39; }
.fa-youtube, .fa-youtube-play, .fa-youtube-square { color: #bb0000; }
.fa-tumblr, .fa-tumblr-square       { color: #32506d; }
.fa-vine                            { color: #00bf8f; }
.fa-flickr                          { color: #ff0084; }
.fa-vimeo-square                    { color: #aad450; }
.fa-pinterest, .fa-pinterest-square { color: #cb2027; }
.fa-linkedin, .fa-linkedin-square   { color: #007bb6; }
.fa-instagram                       { color: #517fa4; }
.fa-spotify                         { color: #1ED760; }


/* ========================================================================= */
/* Page Body                                                                   */
/* ========================================================================= */
body {
    background-color: var(--site-bg) !important;
    background-image: none !important;
    color: #444a52;
    margin: 0;
    padding: 0;
    display: block;
    font-size: 1rem;
    line-height: 1.5;
}


/* ========================================================================= */
/* Brand Colour Utilities                                                      */
/* ========================================================================= */
.bg-brand-blue    { background-color: var(--blue)    !important; }
.bg-brand-dkblue  { background-color: var(--dkblue)  !important; }
.bg-brand-green   { background-color: var(--green)   !important; }
.bg-brand-dkgreen { background-color: var(--dkgreen) !important; }

.text-brand-blue    { color: var(--blue)    !important; }
.text-brand-dkblue  { color: var(--dkblue)  !important; }
.text-brand-green   { color: var(--green)   !important; }
.text-brand-dkgreen { color: var(--dkgreen) !important; }

.bg-brand-dkblue-gradient {
    background: linear-gradient(
        to bottom,
        #18798E 0%,
        #004379 100%
    ) !important;
}

.admin-page { background-color: var(--site-white) !important; }


/* ========================================================================= */
/* Brand Buttons                                                               */
/* ========================================================================= */
.btn-brand-dkblue {
    background-color: var(--dkblue) !important;
    color: #fff !important;
    border: none;
}
.btn-brand-dkblue:hover,
.btn-brand-dkblue:focus {
    background-color: #00325c !important;
    color: #fff !important;
}

.btn-brand-blue {
    background-color: var(--blue) !important;
    color: #fff !important;
    border: none;
}
.btn-brand-blue:hover,
.btn-brand-blue:focus {
    background-color: #126376 !important;
    color: #fff !important;
}

.btn-brand-green {
    background-color: var(--green) !important;
    color: #fff !important;
    border: none;
}
.btn-brand-green:hover,
.btn-brand-green:focus {
    background-color: #44923e !important;
    color: #fff !important;
}

.btn-brand-dkgreen {
    background-color: var(--dkgreen) !important;
    color: #fff !important;
    border: none;
}
.btn-brand-dkgreen:hover,
.btn-brand-dkgreen:focus {
    background-color: #2b6c2e !important;
    color: #fff !important;
}


/* ========================================================================= */
/* Typography                                                                  */
/* ========================================================================= */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    font-family: var(--heading-font);
    color: var(--color-dark-green);
}
h1 {
    font-size: clamp(2rem, 4vw + 1rem, 4rem);
}

p {
    color: var(--color-dark-green);
    font-family: var(--para-font);
    font-size: 1rem;
    line-height: 1.6;
}

.small-p { font-size: 0.875rem; line-height: 1.35; }

/* Page header title (banner component) */
.page-title {
    font-family: var(--head-font);
    color: var(--dkblue);
    display: inline-block;
}


/* ========================================================================= */
/* Images & Layout Helpers                                                     */
/* ========================================================================= */
.image-shadow {
    border: 1px solid var(--border-color);
    filter: drop-shadow(5px 5px 10px var(--color-dark-green));
}

.image-circular {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}
.image-circular img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.align-right { display: flex; flex-direction: column; align-items: flex-end; }

/* Legacy float form columns - prefer Bootstrap grid where possible */
.form-col-25 { float: left; width: 25%; margin-top: 6px; }
.form-col-75 { float: left; width: 75%; margin-top: 6px; }
.form-row::after { content: ""; display: table; clear: both; }


/* ========================================================================= */
/* Cards & Tables                                                              */
/* ========================================================================= */
.card-img-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Equal height cards with pinned footer */
.card.h-100 {
    display: flex;
    flex-direction: column;
}
.card.h-100 .card-body {
    flex: 1 1 auto;
}
.card.h-100 .card-footer {
    margin-top: auto;
}

tr { border-style: none; background-color: transparent !important; }


/* ========================================================================= */
/* Stats Gradient Overlay                                                      */
/* ========================================================================= */
.stats-gradient-overlay {
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(24, 121, 142, 0) 0%,
        rgba(0, 67, 121, 0.9) 90%
    );
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
.bg-brand-dkblue .container,
.bg-brand-dkblue .row,
.bg-brand-dkblue .col-6,
.bg-brand-dkblue .col-md-3 {
    position: relative;
    z-index: 2;
}


/* ========================================================================= */
/* Tag Input (Admin)                                                           */
/* ========================================================================= */
label[for="tags"] {
    display: block !important;
    margin-bottom: 0.5rem;
}
.bootstrap-tagsinput {
    display: block !important;
    width: 100% !important;
    min-height: 38px;
    box-sizing: border-box;
    margin-top: 0 !important;
}
.bootstrap-tagsinput .tag {
    background: #0d6efd;
    color: #fff;
    border-radius: 3px;
    padding: 2px 8px;
    margin-right: 3px;
    margin-bottom: 2px;
    display: inline-block;
    font-size: 90%;
}


/* ========================================================================= */
/* Venue Prose (Venue detail pages)                                            */
/* ========================================================================= */
.venue-prose h2 { margin-top: 1.75rem; font-size: 1.4rem; }
.venue-prose h3 { margin-top: 1.25rem; font-size: 1.15rem; }
.venue-prose p  { line-height: 1.7; margin-bottom: 1rem; }
.venue-prose ul { padding-left: 1.2rem; }
.venue-prose li { margin-bottom: .4rem; }
.venue-prose img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
    margin: 1rem 0;
}
.venue-prose blockquote {
    background: rgba(0,0,0,.04);
    padding: .75rem 1rem;
    border-left: 4px solid rgba(0,0,0,.2);
    border-radius: .5rem;
}
.venue-thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
}
.venue-thumb-placeholder {
    width: 100%;
    height: 140px;
    background: rgba(0,0,0,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,.4);
    font-size: .9rem;
}


/* ========================================================================= */
/* Navbar                                                                      */
/* ========================================================================= */
/* Bootstrap 5.3 dark navbar variables */
.navbar.navbar-dark.bg-dark {
    --bs-navbar-color: rgba(255,255,255,.8);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: var(--site-yellow);
    --bs-navbar-brand-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255,255,255,.25);
}

.navbar-dark .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--site-yellow);
    outline-offset: 2px;
}
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--site-yellow);
}

/* Admin nav links */
.admin-nav-link       { color: var(--site-yellow); text-decoration: none; }
.admin-nav-link.active { color: var(--site-blue);  text-decoration: none; }
.admin-nav-link:hover  { color: var(--site-blue);  text-decoration: none; }

/* Navbar spacer - compensates for fixed-top navbar */
.navbar-spacer { height: 60px; }

/* Login button */
.btn-navbar-login {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 20px;
    padding: 0.25rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
.btn-navbar-login:hover {
    background-color: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
}

/* Dropdown menu */
.navbar .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid rgba(0, 97, 124, 0.2);
    border-radius: 8px;
    padding: 0.5rem 0;
    min-width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.navbar .dropdown-menu .dropdown-item {
    color: #333333;
    padding: 0.4rem 1.25rem;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: var(--blue);
    color: #ffffff;
}
.navbar .dropdown-menu .dropdown-divider {
    border-color: rgba(0, 97, 124, 0.15);
    margin: 0.25rem 0;
    opacity: 1;
}
.navbar .dropdown-menu .btn-link {
    color: #333333 !important;
    font-size: 0.9rem;
}
.navbar .dropdown-menu .btn-link:hover {
    color: var(--blue) !important;
}


/* ========================================================================= */
/* Hero Carousel                                                               */
/* ========================================================================= */
.hero-section {
    min-height: 60vh;
    background-color: var(--dkblue);
}
.hero-bg-image {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    min-height: 60vh;
    max-height: 90vh;
    z-index: 1;
}

/* Dark overlay - guarantees text readability on any image */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.3) 60%,
        rgba(0,0,0,0.1) 100%
    );
    z-index: 2;
}
.hero-content { position: relative; z-index: 3; }
.hero-row     { min-height: 60vh; }

.hero-title {
    font-family: var(--head-font);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255,255,255,0.92);
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    max-width: 540px;
}
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Hero buttons */
.btn-hero-primary {
    background-color: var(--blue);
    color: #ffffff;
    border: 2px solid var(--blue);
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-hero-primary:hover {
    background-color: var(--dkblue);
    border-color: var(--dkblue);
    color: #ffffff;
}

.btn-hero-youtube {
    background-color: #ff0000;
    color: #ffffff;
    border: 2px solid #ff0000;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-hero-youtube:hover {
    background-color: #cc0000;
    border-color: #cc0000;
    color: #ffffff;
}


/* ========================================================================= */
/* Sidebar Widgets                                                             */
/* ========================================================================= */
aside .card {
    margin-bottom: 1rem;
}
aside .card:first-child {
    margin-top: 1rem;
}

/* Inner cards within widgets */
aside .card .card {
    margin-bottom: 0.5rem !important;
}
aside .card .card:last-child {
    margin-bottom: 0 !important;
}

/* Widget body padding */
aside .card .card-body {
    padding: 1rem;
}

/* Gap overrides for flex containers */
aside .d-flex.flex-column.gap-2 {
    gap: 0.5rem !important;
}

/* Widget header icons */
.widget-icon-tags       { color: #2cccc4; }  /* teal/cyan    */
.widget-icon-popular    { color: #f5a623; }  /* warm orange  */
.widget-icon-comments   { color: #64b5f6; }  /* light blue   */
.widget-icon-matches    { color: #66bb6a; }  /* green        */
.widget-icon-newsletter { color: #ffffff; }  /* white        */
.widget-icon-social     { color: #f48fb1; }  /* pink/coral   */

/* Widget titles */
.widget-title {
    font-family: var(--head-font);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0;
}

/* Sidebar buttons */
.btn-widget-join {
    background-color: rgba(255,255,255,0.15);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    transition: all 0.2s ease;
}
.btn-widget-join:hover {
    background-color: rgba(255,255,255,0.25);
    color: #ffffff;
    border-color: rgba(255,255,255,0.6);
}

.btn-widget-subscribe {
    background-color: var(--blue);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.btn-widget-subscribe:hover {
    background-color: var(--dkblue);
    color: #ffffff;
}


/* ========================================================================= */
/* Article Page Typography                                                     */
/* ========================================================================= */
article h2 {
    font-family: var(--head-font);
    color: var(--dkblue);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(0, 97, 124, 0.15);
}
article h3 {
    font-family: var(--head-font);
    color: var(--blue);
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
article p {
    font-family: var(--para-font);
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 1.25rem;
}
article strong { color: var(--dkblue); }
article ul,
article ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}
article li {
    line-height: 1.8;
    margin-bottom: 0.4rem;
    color: #333333;
}

/* Article meta - author line */
.article-meta {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

/* Back to Articles button */
.btn-back {
    background-color: transparent;
    color: var(--dkblue);
    border: 1px solid var(--dkblue);
    border-radius: 4px;
    padding: 0.4rem 1.25rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
.btn-back:hover {
    background-color: var(--dkblue);
    color: #ffffff;
}


/* ========================================================================= */
/* Footer                                                                      */
/* ========================================================================= */
.page-footer { background-color: var(--footer-color); color: #111; }

.footer-heading {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.75rem;
}
.footer-link {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.35rem;
    transition: color 0.2s ease;
}
.footer-link:hover { color: #ffffff; }

.footer-social     { min-width: 140px; }
.footer-social-link {
    color: rgba(255,255,255,0.75);
    transition: color 0.2s ease;
}
.footer-social-link:hover         { color: #ffffff; }
.footer-social-link span          { color: rgba(255,255,255,0.75); }
.footer-social-link:hover span    { color: #ffffff; }

.footer-logo {
    opacity: 0.9;
    transition: opacity 0.2s ease;
}
.footer-logo:hover { opacity: 1; }

.footer-tagline {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    font-style: italic;
}