/*!
Theme Name: MIJOY’S Promise
Author: MIJOY’s Promise
Description: Custom branding styles for the MIJOY's Promise website, including Bootstrap 5 overrides.
Version: 1.9.1
*/

/*--------------------------------------------------------------
>>> MIJOY'S PROMISE BRANDING & BOOTSTRAP OVERRIDES
--------------------------------------------------------------*/

:root {
	--color-navy: #001f3f;
	--color-gold: #D4AF37;
	--color-white: #FFFFFF;
	--color-text-dark: #333333;

	--bs-primary: var(--color-navy);
	--bs-primary-rgb: 0, 31, 63;

	--bs-secondary: var(--color-gold);
	--bs-secondary-rgb: 212, 175, 55;

	--bs-dark: var(--color-navy);
	--bs-dark-rgb: 0, 31, 63;

	--bs-warning: var(--color-gold);
	--bs-warning-rgb: 212, 175, 55;
}

/*
 * ===================================================================
 * Base Styles
 * ===================================================================
*/
body {
	font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Teko', sans-serif;
    font-weight: 700;
	color: var(--color-navy);
}

/*
 * ===================================================================
 * Bootstrap Component Overrides
 * ===================================================================
*/

/* --- Buttons --- */
.btn-primary {
	--bs-btn-color: var(--color-white);
	--bs-btn-hover-color: var(--color-white);
	--bs-btn-active-color: var(--color-white);
}

.btn-secondary {
	--bs-btn-color: var(--color-navy) !important;
	--bs-btn-bg: var(--color-gold) !important;
	--bs-btn-border-color: var(--color-gold) !important;
	--bs-btn-hover-color: var(--color-navy) !important;
	--bs-btn-hover-bg: #E0BB50 !important;
	--bs-btn-hover-border-color: #E0BB50 !important;
	--bs-btn-active-color: var(--color-navy) !important;
	--bs-btn-active-bg: #C8A230 !important;
	--bs-btn-active-border-color: #C8A230 !important;
}


/* --- Alerts --- */
.alert-warning {
    background-color: var(--color-gold);
    background-image: linear-gradient(170deg, #fff8e1 0%, var(--color-gold) 90%);
    border-color: #C8A230 !important;
    border-width: 1px;
    border-style: solid;
}

.alert-warning .alert-heading,
.alert-warning li {
    color: #665116 !important;
}

.alert-warning .alert-heading i,
.alert-warning li i {
    color: inherit !important;
}

.alert-warning li .text-success {
    color: #198754 !important;
}


/* --- Text & Background Colors --- */
.bg-primary, .bg-dark {
	color: var(--color-white) !important;
}

.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 {
    color: var(--color-white) !important;
}

/* --- Tab Navigation Styles --- */
.nav-pills .nav-link {
    color: var(--color-navy);
    background-color: var(--color-white);
    border: 1px solid var(--color-navy);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
    color: var(--color-white) !important;
    background-color: var(--color-navy) !important;
    border-color: var(--color-navy) !important;
    box-shadow: none;
    transform: translateY(1px);
}

.nav-pills .nav-item {
    margin: 0 0.5rem 0.5rem 0.5rem;
}

/* --- Tab Fade Transition --- */
.tab-content .tab-pane.fade {
    transition: opacity 0.15s linear;
}

.tab-content .tab-pane.fade.show {
    transition: opacity 0.4s ease-in-out;
}

/*
 * ===================================================================
 * Global Layout Resets
 * ===================================================================
*/
html, body {
    overflow-x: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#page, .site, #wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/*
 * ===================================================================
 * Custom Gold Button
 * ===================================================================
*/
.btn-gold {
    background-color: #D4AF37 !important;
    color: #001f3f !important;
    border-color: #D4AF37 !important;
    font-weight: bold;
}

.btn-gold:hover {
    background-color: #c8a230 !important;
    border-color: #c8a230 !important;
    color: #001f3f !important;
}

/*
 * ===================================================================
 * Custom Form Card Styling
 * ===================================================================
*/
.form-card {
    border: 2px solid var(--bs-secondary);
}
.form-card .card-header {
    background-color: var(--bs-primary);
}
.form-card .card-header h3 {
    color: var(--bs-secondary);
}
.form-control:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}

/*
 * ===================================================================
 * Sticky Sidebar (Blog & Archive)
 * ===================================================================
*/
body.home #page,
body.home #content,
body.home .site-content,
body.home #primary,
body.archive #page,
body.archive #content,
body.archive .site-content,
body.archive #primary {
    overflow: visible !important;
}
.sticky-top {
    top: 2rem;
}

/*
 * ===================================================================
 * Blog Meta/Footer Link Styles
 * ===================================================================
*/
.entry-footer .tags-links .badge a,
.entry-footer .tags-links .badge a:link,
.entry-footer .tags-links .badge a:visited,
.entry-footer .tags-links .badge a:hover,
.entry-footer .tags-links .badge a:focus {
color: #D4AF37 !important;
text-decoration: none !important;
}
.entry-meta .categories-links a.badge,
.entry-meta .categories-links a.badge:hover,
.entry-footer .tags-links a.badge,
.entry-footer .tags-links a.badge:hover {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/*
 * ===================================================================
 * Custom Footer Link Colors
 * ===================================================================
*/
#footer .nav a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
#footer .nav a:hover,
#footer .nav a:focus {
    color: #FFFFFF;
    text-decoration: underline;
}
#footer .nav li a.active {
    color: var(--color-gold) !important;
    font-weight: bold;
}

/*
 * ===================================================================
 * Branded Accordion Styles
 * ===================================================================
*/
.accordion .accordion-item {
  border-color: var(--color-navy);
  margin-bottom: 5px;
}
.accordion .accordion-button {
  background-color: var(--color-navy);
  color: var(--color-white);
  font-family: 'Teko', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  transition: all 0.2s ease-in-out;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}
.accordion .accordion-button:not(.collapsed),
.accordion .accordion-button:hover {
  background-color: var(--color-gold);
  color: var(--color-navy);
  box-shadow: none;
}
.accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transition: all 0.2s ease-in-out;
}
.accordion .accordion-button:not(.collapsed)::after,
.accordion .accordion-button:hover::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23001f3f'%3e%3path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3C/svg%3e");
}
.accordion .accordion-button:focus {
  box-shadow: none;
  border-color: inherit;
}
.accordion .accordion-body {
  background-color: #fdfdfd;
  font-size: 1.2rem !important;
  line-height: 1.6 !important;
  padding: 1.5rem 1.75rem !important;
}
.accordion .accordion-body p,
.accordion .accordion-body ul,
.accordion .accordion-body ol {
  margin-bottom: 1.25rem !important;
}
.accordion .accordion-body p:last-child,
.accordion .accordion-body ul:last-child,
.accordion .accordion-body ol:last-child {
  margin-bottom: 0 !important;
}
.accordion .accordion-body li {
  margin-bottom: 0.5rem !important;
}

/*
 * ===================================================================
 * Ultimate Member Plugin Styles
 * ===================================================================
*/

.um, .um-form, .um-profile-body {
  font-family: 'Roboto', sans-serif !important;
}
.um-profile-name,
.um-profile-name a,
.um-directory .um-form h3,
.um-form h3,
.um-page-title {
  font-family: 'Teko', sans-serif !important;
  color: var(--color-navy) !important;
  font-weight: 700 !important;
}

html body .um-form .um-field-label {
  font-family: 'Teko', sans-serif !important;
  color: var(--color-navy) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
  padding-bottom: 0 !important;
}
.um-form input[type=text]:focus,
.um-form input[type=email]:focus,
.um-form input[type=password]:focus,
.um-form input[type=search]:focus,
.um-form input[type=tel]:focus,
.um-form input[type=url]:focus,
.um-form input[type=number]:focus,
.um-form select:focus,
.um-form textarea:focus {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25) !important;
}
.um-form .um-field-description {
  margin-top: 0.5rem !important;
  font-size: 0.95rem !important;
  display: block;
}

body .um .um-profile-nav .mijoy-profile-link {
  display: flex !important;
  align-items: center !important;
  color: var(--color-navy) !important;
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-navy) !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.25rem !important;
  margin: 0 0.25rem 0.5rem 0.25rem !important;
  padding: 0.75rem 1.5rem !important;
  text-decoration: none !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: bold !important;
}

body .um .um-profile-nav .mijoy-profile-link.active,
body .um .um-profile-nav .mijoy-profile-link:hover {
  color: var(--color-white) !important;
  background-color: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
  box-shadow: none !important;
}

.um-profile-nav,
.um-profile-nav-item {
  background: transparent !important;
  border: none !important;
}
.mijoy-profile-link i {
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  line-height: 1 !important;
}
.mijoy-profile-link .title {
  line-height: 1 !important;
}

.um-profile-cover {
  background-color: var(--color-navy) !important;
}
.um-profile-cover .um-profile-name {
  color: var(--color-white) !important;
}

.um-profile-note i {
  display: none !important;
}

/*
 * ===================================================================
 * Mobile Navbar
 * ===================================================================
*/
@media (max-width: 767.98px) {
    .navbar-collapse {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    .navbar-collapse.show {
         display: flex !important;
    }

    .navbar-collapse .mobile-search-first {
        display: block !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        margin-bottom: 0.5rem !important;
        margin-left: 0 !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-collapse .mobile-search-first svg {
        vertical-align: middle;
    }

    .navbar-collapse .navbar-nav {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .navbar-collapse .navbar-nav .nav-item {
         width: 100% !important;
    }

    .navbar-collapse .navbar-nav .nav-link {
        display: block !important;
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .navbar-collapse .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }
}

/*
 * ===================================================================
 * Mobile Navbar Scroll Fix
 * ===================================================================
*/
.navbar-collapse {
    overflow-y: auto;
    max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

/*
 * ===================================================================
 * Navbar Dropdown
 * ===================================================================
*/
.navbar .dropdown-menu {
    background-color: var(--color-navy);
    border: 1px solid var(--color-gold);
    border-radius: 0.25rem;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.75);
    padding: 0.75rem 1.25rem;
    transition: all 0.15s ease-in-out;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item.active {
    color: var(--color-white);
    background-color: #002b55;
}

.navbar .dropdown-menu .dropdown-divider {
    border-top: 1px solid rgba(212, 175, 55, 0.4);
    margin: 0;
}

/*
 * ===================================================================
 * Mobile Chore List (Modal Triggers)
 * ===================================================================
*/
#mobile-chore-triggers .list-group-item {
    color: var(--color-navy, #001f3f);
    background-color: #f8f9fa;
    border: 1px solid var(--color-navy, #001f3f);
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

/* Mobile Chore List Hover/Focus */
#mobile-chore-triggers .list-group-item:hover,
#mobile-chore-triggers .list-group-item:focus {
    color: var(--color-white, #FFFFFF) !important;
    background-color: var(--color-navy, #001f3f) !important;
    border-color: var(--color-navy, #001f3f) !important;
    box-shadow: none;
    transform: translateY(1px);
}

/*
 * ===================================================================
 * Modal Scroll Fade Indicator
 * ===================================================================
*/
.modal-dialog-scrollable .modal-content {
    position: relative;
}

.modal-dialog-scrollable .modal-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px; 
    background: linear-gradient(to top, 
        rgba(255, 255, 255, 1) 20%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none; 
    border-bottom-left-radius: var(--bs-modal-border-radius);
    border-bottom-right-radius: var(--bs-modal-border-radius);
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

/* Hide Modal Fade (JS) */
.modal-dialog-scrollable .modal-content.fade-is-hidden::after {
    opacity: 0;
}

/*
 * ===================================================================
 * Branded Modal Scrollbar
 * ===================================================================
*/
.modal-dialog-scrollable .modal-body {
    scrollbar-width: auto; 
    scrollbar-color: var(--color-gold, #D4AF37) #e9ecef;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
    width: 1rem;
    background-color: #e9ecef;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--color-gold, #D4AF37);
    border-radius: 10px;
    border: 3px solid #e9ecef; 
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: #C8A230;
}

.modal-header.bg-primary .text-white {
     color: #FFFFFF !important;
}

/*
 * ===================================================================
 * JavaScript-Controlled Body Scroll Locks
 * ===================================================================
*/

/* This class is for MODALS. It locks the body. */
.body-scroll-locked {
    position: fixed !important;
    width: 100%;
}

/* This class is for the MOBILE NAV. It's a simpler lock. */
.nav-is-open {
    overflow: hidden;
}

/* Bootstrap's default. We leave it for modals. */
body.modal-open {
    overflow: hidden;
}

/*
 * ===================================================================
 * Force Ultimate Member Account Button Branding (All Tabs)
 * ===================================================================
*/

/* General target for UM submit inputs and buttons within the account form */
.um-account .um-form input[type="submit"],
.um-account .um-form button[type="submit"] {
    background-color: #D4AF37 !important; /* Gold */
    color: #001f3f !important;           /* Navy */
    border-color: #D4AF37 !important;
    font-weight: bold !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 0.25rem !important; /* Adjust if needed */
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

/* Hover/Focus states */
.um-account .um-form input[type="submit"]:hover,
.um-account .um-form input[type="submit"]:focus,
.um-account .um-form button[type="submit"]:hover,
.um-account .um-form button[type="submit"]:focus {
    background-color: #C8A230 !important; /* Darker Gold */
    border-color: #C8A230 !important;
    color: #001f3f !important;
    box-shadow: none !important;
}

/* Target radio buttons using accent-color */
.um-account .um-form input[type="radio"] {
    accent-color: #D4AF37; /* Gold */
}

/*
 * ===================================================================
 * Ultimate Member Account Button & Form Branding
 * ===================================================================
*/

/* --- 1. General Button Styling (GOLD BUTTONS) --- */
/* Target MOST submit buttons within the UM account form (Update Account, Change Password) */
/* EXCLUDES buttons within the Privacy/Data Request sections (see rule below) */
.um-account .um-form .um-field-type_submit input[type="submit"],
.um-account .um-form button[type="submit"].um-button {
    background-color: var(--color-gold) !important; /* Brand Gold BG */
    color: var(--color-navy) !important;           /* Brand Navy Text */
    border-color: var(--color-gold) !important;    /* Match BG Color */
    font-weight: bold !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 0.25rem !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

/* Hover/Focus for GOLD buttons */
.um-account .um-form .um-field-type_submit input[type="submit"]:hover,
.um-account .um-form .um-field-type_submit input[type="submit"]:focus,
.um-account .um-form button[type="submit"].um-button:hover,
.um-account .um-form button[type="submit"].um-button:focus {
    background-color: #C8A230 !important; /* Darker gold for hover */
    border-color: #C8A230 !important;
    color: var(--color-navy) !important;
    box-shadow: none !important;
}

/* --- 2. Data Request/Privacy Button Styling (NAVY BUTTONS) --- */
/* Target ONLY submit buttons within the Privacy tab (Request Data, Erase Data) */
/* This rule is MORE specific, so it overrides the general gold rule above */
.um-account .um-account-tab-privacy .um-field-type_submit input[type="submit"],
.um-account .um-account-tab-privacy button[type="submit"].um-button,
.um-account .um-request-data-button input[type="submit"], /* Add potential specific class */
.um-account .um-erase-data-button input[type="submit"]  /* Add potential specific class */ {
    background-color: var(--color-navy) !important; /* Brand NAVY BG */
    color: var(--color-white) !important;           /* WHITE Text */
    border-color: var(--color-navy) !important;    /* Match NAVY BG Color */
    /* Inherit padding, radius, transition etc. from general rule if needed */
}

/* Hover/Focus for NAVY buttons */
.um-account .um-account-tab-privacy .um-field-type_submit input[type="submit"]:hover,
.um-account .um-account-tab-privacy .um-field-type_submit input[type="submit"]:focus,
.um-account .um-account-tab-privacy button[type="submit"].um-button:hover,
.um-account .um-account-tab-privacy button[type="submit"].um-button:focus,
.um-account .um-request-data-button input[type="submit"]:hover,
.um-account .um-request-data-button input[type="submit"]:focus,
.um-account .um-erase-data-button input[type="submit"]:hover,
.um-account .um-erase-data-button input[type="submit"]:focus {
    background-color: #001122 !important; /* Darker navy for hover */
    border-color: #001122 !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
}

/* --- 3. Radio Button Styling (GOLD - Simplified Attempt) --- */
/* Force accent-color - BEST CHANCE for modern browsers */
.um-account .um-form input[type="radio"] {
    accent-color: var(--color-gold) !important;
}

/* --- 4. Delete Account Button (Ensure Gold) --- */
/* Delete buttons might get special styling; force gold */
.um-account .um-account-tab-delete .um-field-type_submit input[type="submit"],
.um-account .um-account-tab-delete button[type="submit"].um-button {
    background-color: var(--color-gold) !important;
    color: var(--color-navy) !important;
    border-color: var(--color-gold) !important;
}

.um-account .um-account-tab-delete .um-field-type_submit input[type="submit"]:hover,
.um-account .um-account-tab-delete .um-field-type_submit input[type="submit"]:focus,
.um-account .um-account-tab-delete button[type="submit"].um-button:hover,
.um-account .um-account-tab-delete button[type="submit"].um-button:focus {
     background-color: #C8A230 !important;
     border-color: #C8A230 !important;
     color: var(--color-navy) !important;
}