/*Home Page CSS */
:root { 
    --bs-body-bg: #d6d6d6;      /* Light mode background */
    --bs-body-color: #171717;   /* Light mode text */
    /* Dark mode overrides are placed outside :root */
    /*default font*/
    --bs-body-font-family: "Lato", sans-serif;
    /*default sans-serif font (all headings)  */
    --bs-font-sans-serif: "Lato", sans-serif;
    --transition-speed: 0.4s; /*to ease in the light/dark mode */
}
/* Dark mode overrides placed outside :root*/
[data-bs-theme="dark"] {
  --bs-body-bg: #121212;
  --bs-body-color: #e0e0e0;
}
html {
    font-size: 18px;
    scroll-padding-top: 80px; /*height of the top navbar*/
    transition: /*to ease in the light/dark mode */
    background-color var(--transition-speed) ease,
    color var(--transition-speed) ease,
    border-color var(--transition-speed) ease,
    background var(--transition-speed) ease;
}
body {
    scroll-padding-top: 90px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    }
/* Optional: smooth transitions for common elements */
body, .card, .navbar, .dropdown-menu, .btn, .text-bg-light, .text-bg-dark {
  transition:
    background-color var(--transition-speed) ease,
    color var(--transition-speed) ease,
    border-color var(--transition-speed) ease,
    box-shadow var(--transition-speed) ease;
}
* {
    box-sizing: border-box;
    border: none;
}
/* Default: Light mode */
main a:link {
  color:  #A51C30 !important;
  text-decoration: none !important;
  background-color: transparent;
  font-weight: 400;
}
/* Dark mode override */
[data-bs-theme="dark"] main a:link {
  color: #E14C62 !important;
}
main a:visited {
  color: #188C7A !important;
  background-color: transparent;
  text-decoration: none;
}
/* Dark mode override */
[data-bs-theme="dark"] main a:visited {
  color: #1CA590 !important;
}
main a:hover, 
main a:active {
  color: #75002F !important;
  background-color: transparent !important;
}
/*TEXT STYLING */
.hidden {display:none;}
.no-decoration {text-decoration: none !important;}
.display-4, .display-5  {
    font-family: "Lato", serif;
    letter-spacing: -1.5px;
}
h2, h3 {
    letter-spacing: -0.5px;
    }
h2 {
    margin-bottom: 20px;
}
/*CHARACTER STYLING */
.bold {
    font-weight: 700;
    }
.emphasis {
    font-style: italic;
}
[data-bs-theme="dark"] .redletter {
  color: #fa9908;
  text-shadow: 2px 3px 3px rgb(0, 0, 0);
}
[data-bs-theme="light"] .redletter  {
  color: rgb(196, 1, 1);
}
[data-bs-theme="dark"] .highlight {
    color: rgb(254, 255, 209);
    background-color: rgba(114, 5, 5, 0.711);
}
[data-bs-theme="light"] .highlight {
    color: rgb(114, 5, 5);
    background-color: rgb(254, 255, 209);
}
.smallcaps {
    font-size: 1.1rem;
    font-style: regular;
    font-variant: all-small-caps;
    line-height: 1.6rem;
    line-height: var(--paraquote-line-height);
}
.dropcap {
    font-size: 3.9rem;
    float: left;
    position: relative;
    top: -2px;
    line-height: 1;
    text-decoration: underline rgba(216, 7, 0, 0.95);
    margin-bottom: 0rem;
    padding: 0 6px 12px 0;
}
/*Font-awesome colors*/
.text-bg-primary {
  color:  white !important;
  background-color: #A51C30ff !important;
}
/*LOGO*/
/* Container to stack both images */
.logo-wrapper {
  position: relative;
  width: 400px;      /* match your logo width */
  aspect-ratio: 1 / 1;
}
/* Base styling for both logos */
.logo-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease-in-out;
}
/* Light logo visible by default */
.logo-main {
  opacity: 1;
  z-index: 2;
}
/* Dark logo hidden by default */
.logo-dark {
  opacity: 0;
  z-index: 1;
}
/* When DARK theme is active */
[data-bs-theme="dark"] .logo-main {
  opacity: 0;
}
[data-bs-theme="dark"] .logo-dark {
  opacity: 1;
}
/* Responsive Design */
@media (max-width: 540px) {
.logo-wrapper {
  width: 90%; 
  aspect-ratio: 1 / 1;
} 
.logo-wrapper img {
  width: 100%;
  height: auto;
}
}
/*logo watermark*/
/* .logo-watermark {
    display: none;
    position: absolute;
    top: 55%;
    left: 80%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: auto;
    z-index: 100; 
} */
/* Responsive Design */
/* @media (min-width: 1350px) {
.logo-watermark {
  display: block;
} 
} */


/*----- Hero Button ---------*/
.hero-button {
    display: block;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; 
    height: fit-content;
    width: fit-content;
    background-color: rgba(0,0,0,0.6);
    z-index: 100; 
}
.hero-button-text {
    font-family: "PT Sans Narrow", sans-serif; 
    font-size: 20px;
    line-height: 1;
    font-weight: 300; 
    font-style: normal;
    color: white;
    /* text-shadow: 2px 1px 5px black; */
    padding: 8px 12px 8px 12px;
    margin-bottom: 0px;
}
.hero-button:hover {
    background-color: rgba(223, 223, 223, 0.9);
}
.hero-button:hover .hero-button-text {
    color: #DC143C;
}

/* Responsive Design */
@media (min-width: 540px) {
.hero-button {
  display: none;
} 
}