@charset "UTF-8";

/* ==========================================================
   Base Profile Styles (Theme-Agnostic)
   ----------------------------------------------------------
   Shared structure, spacing, layout, and component logic.
   All colors use variables from :root (per-theme overrides).
   ========================================================== */

/* Body */
body {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* Text Helpers */
.text-light { color: var(--bs-light) !important; }
.text-dark  { color: var(--bs-dark) !important; }

/* =============================
   NAVIGATION
   ============================= */
#mainNav {
    background-color: var(--bs-dark);
}
#mainNav .navbar-brand,
#mainNav .nav-link {
    color: var(--bs-light);
    text-decoration: none;
}
#mainNav .nav-link:hover { color: var(--bs-primary); }
#mainNav .nav-link:active,
#mainNav .nav-link:focus { color: var(--bs-accent); }
#mainNav .nav-link.active { color: var(--bs-light); }
#mainNav .navbar-nav > li.nav-item > a.nav-link.active {
    color: var(--bs-dark);
    background: var(--bs-light);
}
#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
    color: var(--bs-light);
    background: var(--bs-dark);
}

/* =============================
   MASTHEAD
   ============================= */
.masthead {
    padding-top: calc(6rem + 74px);
    padding-bottom: 6rem;
    background-color: var(--bs-primary);
    color: var(--bs-dark);
    text-align: center;
}
.masthead .masthead-heading {
    font-size: 2.75rem;
    line-height: 2.75rem;
    color: var(--bs-light);
}
.masthead .masthead-subheading { font-size: 1.25rem; }
.masthead .masthead-avatar {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
}
@media (min-width: 992px) {
    .masthead {
        padding-top: calc(6rem + 104px);
        padding-bottom: 6rem;
    }
    .masthead .masthead-heading {
        font-size: 4rem;
        line-height: 3.5rem;
    }
    .masthead .masthead-subheading { font-size: 1.5rem; }
}

/* =============================
   DIVIDER
   ============================= */
.divider-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: var(--bs-secondary);
    color: var(--bs-light);
    font-size: 1.75rem;
    border-top: 2px solid var(--bs-primary);
}
.divider-custom .divider-custom-icon {
    margin: 0 0.5rem;
    color: inherit;
    font-size: 1.75rem;
}
.divider-title {
    font-family: var(--font-heading, "Oleo Script", system-ui);
    font-weight: 700;
    margin: 0;
    text-transform: none;
    color: inherit;
}

/* =============================
   PORTFOLIO (Event Flyers)
   ============================= */
.portfolio .portfolio-item {
    cursor: pointer;
    position: relative;
    display: block;
    max-width: 25rem;
    border-radius: 0.5rem;
    overflow: hidden;
}
.portfolio .portfolio-item .portfolio-item-caption {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    background-color: rgba(var(--bs-primary-rgb, 26,188,156), 0.8);
}
.portfolio .portfolio-item .portfolio-item-caption:hover { opacity: 1; }
.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-light);
}

/* Portfolio modal */
.portfolio-modal .btn-close {
    color: var(--bs-primary);
    font-size: 2rem;
    padding: 1rem;
}
.portfolio-modal .portfolio-modal-title {
    font-size: 2.25rem;
    line-height: 2rem;
}
@media (min-width: 992px) {
    .portfolio-modal .portfolio-modal-title {
        font-size: 3rem;
        line-height: 2.5rem;
    }
}

/* =============================
   TABLES
   ============================= */
.table-dark {
    --bs-table-color: var(--bs-light);
    --bs-table-bg: var(--bs-primary);
    --bs-table-border-color: var(--bs-accent);
    --bs-table-striped-bg: var(--bs-secondary);
    --bs-table-striped-color: var(--bs-light);
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: var(--bs-light);
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: var(--bs-light);
}


/* =============================
   BUTTONS
   ============================= */

/* Remove underlines from all buttons */
.btn {
    text-decoration: none !important;
}

/* Normalize outline button hover (keep Bootstrap colors, remove underline) */
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-success {
    text-decoration: none !important;
}
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-success:hover {
    text-decoration: none !important;
}


.btn-primary {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover {
    color: #fff !important;
    background-color: var(--bs-link-hover-color) !important;
    border-color: var(--bs-link-hover-color) !important;
}

/* Secondary button */
.btn-secondary {
    --bs-btn-bg: var(--bs-secondary) !important;
    --bs-btn-border-color: var(--bs-secondary) !important;
    --bs-btn-color: #fff !important;

    color: #fff !important;
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}
.btn-secondary:hover {
    background-color: #02605c !important; /* darker teal */
    border-color: #02605c !important;
}

/* Dark button */
.btn-dark {
    --bs-btn-bg: var(--bs-dark) !important;
    --bs-btn-border-color: var(--bs-dark) !important;
    --bs-btn-color: #fff !important;

    color: #fff !important;
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}
.btn-dark:hover {
    background-color: var(--bs-accent, #c03) !important;
    border-color: var(--bs-dark) !important;
}

/* Outline light */
.btn-outline-light {
    --bs-btn-color: var(--bs-light) !important;
    --bs-btn-border-color: var(--bs-light) !important;
    --bs-btn-hover-color: var(--bs-dark) !important;
    --bs-btn-hover-bg: var(--bs-light) !important;

    color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
}
.btn-outline-light:hover {
    color: var(--bs-dark) !important;
    background-color: var(--bs-light) !important;
}

/* Outline dark */
.btn-outline-dark {
    --bs-btn-color: var(--bs-dark) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-color: var(--bs-light) !important;

    color: var(--bs-dark) !important;
    border-color: var(--bs-primary) !important;
}
.btn-outline-dark:hover {
    background-color: var(--bs-primary) !important;
    color: var(--bs-light) !important;
}

/* =============================
   PROFILE IMAGES
   ============================= */
.img-profile-pic-sm {
    max-height: 40px;
    border-radius: 50%;
}
.img-profile-pic-med { max-height: 75px; }
.img-profile-pic {
    max-height: 150px;
    border-radius: 25%;
}

/* =============================
   PAGE VIEWS
   ============================= */
.page-views {
    text-align: center;
    padding: 0.5rem;
    background-color: var(--bs-primary);
    color: var(--bs-light);
}
.page-views h1 {
    color: var(--bs-accent, var(--bs-primary));
    text-transform: none;
}

/* ===============================
alert overrides
=============================== */
/* =============================
   ALERTS (Bootstrap defaults, theme-proof)
   ============================= */
.alert-info {
    --bs-alert-color: #055160 !important;
    --bs-alert-bg: #cff4fc !important;
    --bs-alert-border-color: #b6effb !important;

    color: var(--bs-alert-color) !important;
    background-color: var(--bs-alert-bg) !important;
    border: 1px solid var(--bs-alert-border-color) !important;
    border-radius: 0.375rem;
}

.alert-warning {
    --bs-alert-color: #664d03 !important;
    --bs-alert-bg: #fff3cd !important;
    --bs-alert-border-color: #ffecb5 !important;

    color: var(--bs-alert-color) !important;
    background-color: var(--bs-alert-bg) !important;
    border: 1px solid var(--bs-alert-border-color) !important;
    border-radius: 0.375rem;
}

/* Links inside info alerts */
.alert-info a {
    color: #055160 !important;
    font-weight: 600;
    text-decoration: none !important;
}
.alert-info a:hover {
    color: #033f4a !important;
    text-decoration: none !important;
}

/* Ensure alert buttons keep their palette, not alert link color */
.alert .btn-primary,
.alert .btn-outline-primary,
.alert .btn-secondary,
.alert .btn-outline-secondary,
.alert .btn-dark,
.alert .btn-outline-dark,
.alert .btn-light,
.alert .btn-outline-light,
.alert .btn-danger,
.alert .btn-outline-danger,
.alert .btn-warning,
.alert .btn-outline-warning,
.alert .btn-info,
.alert .btn-outline-info,
.alert .btn-success,
.alert .btn-outline-success {
    color: inherit !important;       /* inherit from their .btn-* styles */
    text-decoration: none !important;
}

/* =============================
   FOOTER
   ============================= */
.footer {
    padding-top: 5rem;
    padding-bottom: 5rem;
    border-top: 5px groove var(--bs-dark);
    background-color: var(--bs-light);
    color: var(--bs-dark);
}

/* =============================
   BUTTONS (Theme-Agnostic Normalization)
   ============================= */

/* Remove underline globally (safety net) */
.btn,
.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none !important;
}

/* BRAND BUTTONS ------------------------- */

/* PRIMARY */
.btn-primary,
.btn-outline-primary {
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--bs-primary) !important;
    background-color: transparent !important;
    border-color: var(--bs-primary) !important;
}
.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* SECONDARY */
.btn-secondary,
.btn-outline-secondary {
    color: #fff !important;
}
.btn-outline-secondary {
    color: var(--bs-secondary) !important;
    background-color: transparent !important;
    border-color: var(--bs-secondary) !important;
}
.btn-outline-secondary:hover {
    color: #fff !important;
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

/* DARK */
.btn-dark,
.btn-outline-dark {
    color: #fff !important;
}
.btn-outline-dark {
    color: var(--bs-dark) !important;
    background-color: transparent !important;
    border-color: var(--bs-dark) !important;
}
.btn-outline-dark:hover {
    color: #fff !important;
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

/* LIGHT */
.btn-light,
.btn-outline-light {
    color: var(--bs-dark) !important;
}
.btn-outline-light {
    color: var(--bs-light) !important;
    background-color: transparent !important;
    border-color: var(--bs-light) !important;
}
.btn-outline-light:hover {
    color: var(--bs-dark) !important;
    background-color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
}

/* SEMANTIC BUTTONS --------------------- */
/* Keep Bootstrap defaults, normalize outlines only */

.btn-outline-danger {
    color: var(--bs-danger, #dc3545) !important;
    background-color: transparent !important;
    border-color: var(--bs-danger, #dc3545) !important;
}
.btn-outline-danger:hover {
    color: #fff !important;
    background-color: var(--bs-danger, #dc3545) !important;
    border-color: var(--bs-danger, #dc3545) !important;
}

.btn-outline-warning {
    color: var(--bs-warning, #ffc107) !important;
    background-color: transparent !important;
    border-color: var(--bs-warning, #ffc107) !important;
}
.btn-outline-warning:hover {
    color: #000 !important;
    background-color: var(--bs-warning, #ffc107) !important;
    border-color: var(--bs-warning, #ffc107) !important;
}

.btn-outline-info {
    color: var(--bs-info, #0dcaf0) !important;
    background-color: transparent !important;
    border-color: var(--bs-info, #0dcaf0) !important;
}
.btn-outline-info:hover {
    color: #000 !important;
    background-color: var(--bs-info, #0dcaf0) !important;
    border-color: var(--bs-info, #0dcaf0) !important;
}

.btn-outline-success {
    color: var(--bs-success, #198754) !important;
    background-color: transparent !important;
    border-color: var(--bs-success, #198754) !important;
}
.btn-outline-success:hover {
    color: #fff !important;
    background-color: var(--bs-success, #198754) !important;
    border-color: var(--bs-success, #198754) !important;
}


/* ALERT BUTTON FIX --------------------- */
/* Ensure outline buttons inside alerts keep normal behavior */

/* PRIMARY */
.alert .btn-outline-primary {
    color: var(--bs-primary) !important;
    background-color: transparent !important;
    border-color: var(--bs-primary) !important;
}
.alert .btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* SECONDARY */
.alert .btn-outline-secondary {
    color: var(--bs-secondary) !important;
    background-color: transparent !important;
    border-color: var(--bs-secondary) !important;
}
.alert .btn-outline-secondary:hover {
    color: #fff !important;
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

/* DARK */
.alert .btn-outline-dark {
    color: var(--bs-dark) !important;
    background-color: transparent !important;
    border-color: var(--bs-dark) !important;
}
.alert .btn-outline-dark:hover {
    color: #fff !important;
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

/* LIGHT */
.alert .btn-outline-light {
    color: var(--bs-light) !important;
    background-color: transparent !important;
    border-color: var(--bs-light) !important;
}
.alert .btn-outline-light:hover {
    color: var(--bs-dark) !important;
    background-color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
}

/* SEMANTIC OUTLINES */
.alert .btn-outline-danger {
    color: var(--bs-danger, #dc3545) !important;
    background-color: transparent !important;
    border-color: var(--bs-danger, #dc3545) !important;
}
.alert .btn-outline-danger:hover {
    color: #fff !important;
    background-color: var(--bs-danger, #dc3545) !important;
    border-color: var(--bs-danger, #dc3545) !important;
}

.alert .btn-outline-warning {
    color: var(--bs-warning, #ffc107) !important;
    background-color: transparent !important;
    border-color: var(--bs-warning, #ffc107) !important;
}
.alert .btn-outline-warning:hover {
    color: #000 !important;
    background-color: var(--bs-warning, #ffc107) !important;
    border-color: var(--bs-warning, #ffc107) !important;
}

.alert .btn-outline-info {
    color: var(--bs-info, #0dcaf0) !important;
    background-color: transparent !important;
    border-color: var(--bs-info, #0dcaf0) !important;
}
.alert .btn-outline-info:hover {
    color: #000 !important;
    background-color: var(--bs-info, #0dcaf0) !important;
    border-color: var(--bs-info, #0dcaf0) !important;
}

.alert .btn-outline-success {
    color: var(--bs-success, #198754) !important;
    background-color: transparent !important;
    border-color: var(--bs-success, #198754) !important;
}
.alert .btn-outline-success:hover {
    color: #fff !important;
    background-color: var(--bs-success, #198754) !important;
    border-color: var(--bs-success, #198754) !important;
}

/* Links inside dark sections */
.section-dark a {
    color: var(--bs-light) !important; /* white by default */
    text-decoration: underline;
}

.section-dark a:hover {
    color: var(--bs-light) !important; /* teal or theme color on hover */
    text-decoration: none;
}

/* =============================
   SECTIONS (Theme-Agnostic)
   ============================= */
.section-light {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    padding: 0; /* remove top & bottom padding */
        margin-bottom: 0; /* prevent stacking gaps */
}

.section-dark {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    padding: 0; /* remove top & bottom padding */
        margin-bottom: 0; /* prevent stacking gaps */
}


.section-content {
    margin-top: 1rem;
    margin-bottom: 1rem;
}