/*===============================================
  🌟 Global Variables (Light Mode Defaults)
===============================================*/
:root {
  --primary-color: #e42534; /* Main red */
  --secondary-color: #b11c28; /* Darker red */
  --footer-bg-color: #bc1d2a;
  --copyright-bg-color: #b11c28;
  --portfolio-caption-bg: rgba(228, 37, 52, 0.75);
  --hover-color: #dadada;
  --btn-focus-text: #e7e7e7;
  --btn-focus-bg: #b8212e;
  --btn-focus-border: #b8212e;
  --btn-shadow-color: rgba(160, 20, 28, 0.5);
  --btn-focus-shadow: rgba(173, 30, 30, 0.514);
  --social-icons-color: #313437;
  --social-icons-bg: #fff;
  --social-icons-border: #c8ced7;
  --bg-color: #ffffff; /* Light mode background */
  --text-color: #212529; /* Light mode text */
}

/*===============================================
  Fonts (Default)
===============================================*/
.handwritten {
      font-family: 'Indie Flower', cursive;
      font-size: 3rem;  /* adjust as needed */
      font-weight: 400;
      /* Optional extras:
         color: #000;
         letter-spacing: 1px;
         etc.
      */
}

/*===============================================
  🌞 Light Mode (Default)
===============================================*/
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Background Utilities */
.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

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

.copyright {
  background-color: var(--copyright-bg-color);
}

/* Portfolio Item Caption */
.portfolio .portfolio-item .portfolio-item-caption {
  background-color: var(--portfolio-caption-bg);
  border-radius: 4px;
}

/* Navbar */
#mainNav {
  background-color: #fff;
  transition: background-color 0.3s ease-in-out;
}

#mainNav .navbar-nav li.nav-item a.nav-link {
  color: var(--text-color);
}

#mainNav .navbar-nav li.nav-item a.nav-link:hover {
  color: var(--hover-color);
}

/* 
  ===============================================
    Buttons (Light Mode) – UPDATED
  ===============================================
*/
.btn-primary {
  background-color: var(--primary-color); /* #e42534 */
  border-color: var(--primary-color);     /* #e42534 */
  color: #fff;
  transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

/* Hover, Focus, Active, etc. all share the darker red + white text */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--secondary-color) !important; /* #b11c28 */
  border-color: var(--secondary-color) !important;     /* #b11c28 */
  color: #fff !important;
  transform: translateY(2px);
}

/* Keep the default Bootstrap focus ring shape, but color it #b11c28 */
.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(177, 28, 40, 0.5) !important;
  outline: 0 !important;
}

/* Contact Form */
#contact-form .form-control {
  border-radius: 0.25rem;
  padding: 0.75rem;
  border: 1px solid #ced4da;
}

#contact-form .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(228, 37, 52, 0.25);
}

/* Social Icons */
.social-icons i {
  font-size: 32px;
  display: inline-block;
  color: #757980;
  margin: 0 10px;
  width: 60px;
  height: 60px;
  border: 1px solid var(--social-icons-border);
  text-align: center;
  border-radius: 50%;
  line-height: 60px;
}

/*===============================================
  🌙 Dark Mode Overhaul
===============================================*/
body.dark-mode {
  --bg-color: #222; /* Dark grey for better contrast */
  --text-color: #e0e0e0; /* Light grey text */
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Navbar */
body.dark-mode #mainNav {
  background-color: #2b2b2b !important;
}

body.dark-mode .navbar-brand,
body.dark-mode .nav-link {
  color: #e0e0e0 !important;
}

body.dark-mode .nav-link:hover {
  color: #f2f2f2 !important;
}

/* Footer */
body.dark-mode .footer {
  background-color: #2b2b2b !important;
  color: #e0e0e0;
}

body.dark-mode .copyright {
  background-color: #1f1f1f !important;
}

/* Portfolio Captions */
body.dark-mode .portfolio-item-caption {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 
  ===============================================
    Buttons (Dark Mode)
  ===============================================
*/
body.dark-mode .btn-primary {
  background-color: var(--primary-color) !important; /* #e42534 */
  border-color: var(--primary-color) !important;
  color: #fff !important;
  transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:active,
body.dark-mode .btn-primary.active {
  background-color: var(--secondary-color) !important; /* #b11c28 */
  border-color: var(--secondary-color) !important;
  color: #fff !important;
  transform: translateY(2px);
}

/* Keep the default Bootstrap focus ring shape, but color it #b11c28 in dark mode */
body.dark-mode .btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(177, 28, 40, 0.5) !important;
  outline: 0 !important;
}

/* Contact Form */
body.dark-mode #contact-form .form-control {
  background-color: #333 !important;
  color: #ffffff !important;
  border: 1px solid var(--primary-color) !important;
}

body.dark-mode #contact-form .form-control::placeholder {
  color: #b3b3b3 !important;
}

body.dark-mode #contact-form .form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(212, 42, 42, 0.25) !important;
}

/* Modals */
body.dark-mode .modal-content {
  background-color: #2b2b2b !important;
  color: #e0e0e0 !important;
}

/* Social Icons */
body.dark-mode .social-icons i {
  color: #e0e0e0 !important;
  border: 1px solid #e0e0e0 !important;
}

body.dark-mode .social-icons i:hover {
  background-color: #e0e0e0 !important;
  color: var(--primary-color) !important;
}

/*-------------------------------------------
   Nav Link Colors
--------------------------------------------*/
/* Light Mode: non-active nav links should be white */
#mainNav .navbar-nav li.nav-item a.nav-link {
  color: #ffffff !important;
}

/* Both Modes: active nav link should be red */
#mainNav .navbar-nav li.nav-item a.nav-link.active {
  background: #e42534 !important;
}

/*-------------------------------------------
   Dark Mode: Override text-secondary and star-dark colors
--------------------------------------------*/
body.dark-mode .text-secondary,
body.dark-mode .star-dark {
  color: #e0e0e0 !important;
}

body.dark-mode hr.star-dark {
  border-color: #e0e0e0;
}

body.dark-mode hr.star-dark:after {
  color: #e0e0e0;
  background-color: #fff;
}

/* For extra specificity in dark mode for nav links */
body.dark-mode #mainNav .navbar-nav li.nav-item a.nav-link {
  color: #ffffff !important;
}
body.dark-mode #mainNav .navbar-nav li.nav-item a.nav-link.active {
  background: black !important;
}