/* 
  custom_styles.css
  -----------------------------------------
  Load this AFTER Bootstrap to override 
  the default Bootstrap styles. 
*/

/* -----------------------------------------
   1) Override Bootstrap's color variables
   -----------------------------------------
   Modern Bootstrap versions (v5+) use CSS variables
   for color assignments. By redefining them in :root,
   you can change default colors site-wide.
*/
:root {
    /* Primary color used by .btn-primary, some nav items, etc. */
    --bs-primary: #15353b; 
    --bs-primary-rgb: 21, 53, 59; /* For certain hover states, focus rings, etc. */
  
    /* Optional: override other brand colors if you like */
    --bs-secondary: #767676;
    --bs-danger: #dc3545;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
  
    /* You can override more if needed:
       --bs-success, --bs-warning, etc.
    */
  }
  
  /* -----------------------------------------
     2) Customize Buttons
     -----------------------------------------
     Even with variable overrides above, sometimes you
     want more granular control over specific states or 
     border colors, so you can override them directly.
  */
  .btn-primary {
    /* Use our new --bs-primary variable as the base color */
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }
  
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    /* Darken or lighten as you like */
    background-color: #0e2b31 !important;
    border-color: #0e2b31 !important;
  }
  
  /* Example: giving .btn-secondary your own custom style */
  .btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #fff !important;
  }
  .btn-secondary:hover {
    background-color: #5b5b5b !important;
    border-color: #5b5b5b !important;
  }
  .btn-mryellow {
    background-color: #F5A949 !important;
    color: #14353A !important;
    border-radius: 0%;
  }
  .btn-mryellow:hover {
    background-color: #f5cf9f !important;
    border-color: #f5cf9f !important;
    text-decoration: none;
  }
  /* -----------------------------------------
     3) Tweak "bg-dark" 
     -----------------------------------------
     If you want .bg-dark to use a custom color
     different from the default #212529:
  */
  .bg-dark {
    background-color: #14353A !important;
    color: #C9E5E9; /* Typically dark backgrounds use white text */
  }
  
  /* -----------------------------------------
     4) Style Nav Links
     -----------------------------------------
     Here’s how you can change default link colors,
     add hover transitions, etc.
  */
  .navbar-light .navbar-nav .nav-link {
    color: #14353A !important; /* Force white text on light nav if you have a dark bg */
    transition: color 0.2s ease-in-out;
  }
  .navbar-light .navbar-nav .nav-link:hover {
    color: #F5A949 !important; /* Yellow hover, for instance */
  }
  
  /* Example for a dark navbar .navbar-dark .nav-link:
     Adjust to suit your chosen scheme:
  */
  .navbar-dark .navbar-nav .nav-link {
    color: #ffffff !important;
  }
  .navbar-dark .navbar-nav .nav-link:hover {
    color: #ffeb3b !important;
  }
  
  /* -----------------------------------------
     5) Optional: Global Link Overrides
     -----------------------------------------
     If you want all links site-wide to share a new style:
  */
  a {
    text-decoration: underline;
    color: var(--bs-primary);
  }
  a:hover {
    color: #14353A;
    text-decoration: none;
    
  }

  .text-mryellow {
    color: #F5A949 !important;
  }
  .text-mrred {
    color: #EE624B !important;
  }
  .text-mrgreen {
    color: #14353A !important;
  }
  .text-mrteal {
    color: #C9E5E9 !important;
  }
  .text-mrgrey {
    color: #939598 !important;
  }
  .highlight {
    background-color: #F5A949; /* Light yellow highlight */
    padding: 0.1em 0.3em;       /* Optional: add some padding */
    
    
    border-radius: 3px;       /* Optional: slightly round the corners for a softer look */
  }
  .custom-footer {
    color: #14353A !important;
    background-color: #e9eaeb;
  }


  /* Custom styles for success messages */
.alert-success {
    background-color: #C9E5E9; 
    color: #14353A;           
    border: 1px solid #C9E5E9;
  }
  
  /* Custom styles for info messages */
  .alert-info {
    background-color: #e3f2fd; /* Light blue */
    color: #1565c0;           /* Dark blue */
    border: 1px solid #bbdefb;
  }
  
  /* Custom styles for warning messages */
  .alert-warning {
    background-color: #f5cf9f; /* Light yellow */
    color: #F5A949;           /* Dark orange */
    border: 1px solid #f5cf9f;
  }
  
  /* Custom styles for error messages */
  .alert-danger {
    background-color: #ffebee; /* Light red */
    color: #EE624B;           /* Dark red */
    border: 1px solid #ef9a9a;
  }
  
  /* Optional: Styling debug messages */
  .alert-debug {
    background-color: #eceff1; /* Light gray */
    color: #37474f;           /* Dark gray */
    border: 1px solid #cfd8dc;
  }