/* ===================================================================
   General & Global Styles
   =================================================================== */

/* Custom Lead Paragraph */
.lead {
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
}

/* Custom Text Link Styling */
main .container a:not(.btn) {
  color: #199d4a;
  font-weight: 600;
  text-decoration: none;
}
main .container a:not(.btn):hover {
  color: #065bab;
  text-decoration: underline;
}

/* Interior Page Headings */
.container h2 {
  color: #199d4a;
}


/* ===================================================================
   Component Styles
   =================================================================== */

/* Top Bar & Footer */
.top-bar {
  background-color: #065bab;
}
footer.bg-dark {
  background-color: #065bab !important;
}

/* Buttons */
.btn-primary, .btn-secondary {
  background-color: #199d4a;
  border-color: #199d4a;
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover, .btn-secondary:focus {
  background-color: #065bab;
  border-color: #065bab;
  color: #fff;
}

/* Custom Dropdown Navigation */
.navbar .dropdown-menu {
  background-color: #065bab;
  border: none;
  border-radius: 0;
}
.navbar .dropdown-item {
  color: #fff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: #fff;
  background-color: #199d4a;
}

/* Social Icon Link Fix */
.social-icon {
  text-decoration: none !important;
  vertical-align: middle;
}

/* Custom Feature Boxes */
.feature-box {
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-left: 5px solid #199d4a;
}
.bordered-box {
  border: 1px solid #199d4a;
  padding: 1.5rem;
}


/* ===================================================================
   Hero & Carousel Styling (with Art Direction)
   =================================================================== */

/* --- Base Hero & Carousel Styles --- */
.carousel-item,
.page-hero {
  background-size: cover;
  background-position: center center;
  position: relative;
}
.carousel-item::before,
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
.carousel-caption.centered,
.page-hero .container {
  position: relative;
}
.carousel-caption.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
  right: auto;
  width: 80%;
  text-align: center;
}

/* --- Mobile-First Background Images --- */
/* Carousel Slides */
#slide1 { background-image: url('../images/carousel-mountainview-mobile.webp'); }
#slide2 { background-image: url('../images/carousel-sunset-mobile.webp'); }
#slide3 { background-image: url('../images/carousel-autumntrees-mobile.webp'); }
#slide4 { background-image: url('../images/carousel-rowboat-mobile.webp'); }

/* Interior Page Heroes */
#hero-about    { background-image: url('../images/hero-about-mobile.webp'); }
#hero-services { background-image: url('../images/hero-services-mobile.webp'); }
#hero-quote    { background-image: url('../images/hero-quote-mobile.webp'); }
#hero-contact  { background-image: url('../images/hero-contact-mobile.webp'); }
#hero-login    { background-image: url('../images/hero-login-mobile.webp'); }
/* You will also need to add IDs to the individual service page heroes */


/* ===================================================================
   Responsive Overrides
   =================================================================== */

/* --- Mobile First (< 768px) --- */
.carousel-item {
  aspect-ratio: 4 / 5; /* Match your 800x1000 image */
}
.page-hero {
  padding: 10rem 0;
}
.carousel-caption h1 {
  font-size: 2.2rem;
}
.carousel-caption .btn {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

/* --- Tablet (768px and up) --- */
@media (min-width: 768px) {
  .carousel-item {
    height: 50vh; /* A medium height for tablets */
  }
}

/* --- Desktop (992px and up) --- */
@media (min-width: 992px) {
  .carousel-item {
    height: 65vh; /* Taller height for desktop */
  }
  .page-hero {
    padding: 8rem 0;
    background-attachment: fixed; /* Parallax only on desktop */
  }
  
  /* Desktop Background Images */
  #slide1 { background-image: url('../images/carousel-mountainview.webp'); }
  #slide2 { background-image: url('../images/carousel-sunset.webp'); }
  #slide3 { background-image: url('../images/carousel-autumntrees.webp'); }
  #slide4 { background-image: url('../images/carousel-rowboat.webp'); }

  #hero-about    { background-image: url('../images/hero-about.webp'); }
  #hero-services { background-image: url('../images/hero-services.webp'); }
  #hero-quote    { background-image: url('../images/hero-quote.webp'); }
  #hero-contact  { background-image: url('../images/hero-contact.webp'); }
  #hero-login    { background-image: url('../images/hero-login.webp'); }
}

/* --- Mobile Nav Fix (1200px and down) --- */
@media (max-width: 1199.98px) {
  .navbar-collapse .navbar-nav .nav-item {
    text-align: center;
  }
}