/* ========================================================================= */
/*                                                          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;
  /* Keep Bootstrap's 1.5 baseline */
}

/* 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 (fine) */
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;

  /* colours (deduplicated, semantic) */
  --site-blue: #95d4e4;         /* light blue */
  --site-yellow: #dae141;       /* yellow */
  --site-green: #21983a;        /* green */
  --site-white: #ffffff;

  --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 (optional) */
  --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 CSS                                 */
/* ========================================================================= */
body {
  background-color: var(--site-white) !important;
  background-image: linear-gradient(
    to right,
    var(--site-blue),
    var(--site-white),
    var(--site-white),
    var(--site-white),
    var(--site-white),
    var(--site-white),
    var(--site-yellow)
  ) !important;
  color: #444a52;
  margin: 0;
  padding: 0;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  font-size: 1rem;           /* 16px base */
  line-height: 1.5;          /* match Bootstrap */
}

/* ========================================================================= */
/* 																	Page Colours                             */
/* ========================================================================= */
.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; }

.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; /* 20% darker for hover */
  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; /* hover: #18798E darkened */
  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; /* hover: #5FB052 darkened */
  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; /* hover: #3A933E darkened */
  color: #fff !important;
}

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

/* ========================================================================= */
/* 																	                                         */
/* ========================================================================= */
.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;
}

/* Avoid float grid; prefer Bootstrap grid.
   If you need custom form widths, rename to prevent confusion. */
.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; }

/* Typography */
h1, h2, h3, h4, h5, h6 { font-weight: 500; font-family: var(--heading-font); color: var(--color-dark-green); }
h1 {
  /* Fluid size instead of gigantic pts; tweak as you like */
  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; }

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

/* Navbar palette
/* Dark navbar tweaks (Bootstrap 5.3 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);   /* your accent */
  --bs-navbar-brand-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255,255,255,.25);
}

/* Optional: clearer focus & active states */
.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 (independent of Bootstrap) */
.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; }

/* Cards & tables */
.card-img-top { border-top-left-radius: 0; border-top-right-radius: 0; }
tr { border-style: none; background-color: transparent !important; }

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

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%;
}

.stats-gradient-overlay {
    pointer-events: none;
    z-index: 1;
    /* Fade from transparent to darker dkblue at the bottom */
    background: linear-gradient(
        to bottom,
        rgba(24, 121, 142, 0) 0%,
        rgba(0, 67, 121, 0.9) 90%
    );
    /* Or, try 0.85 for a stronger effect */
    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;
}

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

.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;
}