/* === Red Barn Media Group - Custom Styles - J.C.'s Heating and Air === */

/* =============================================
   TABLE OF CONTENTS
   =============================================
   1. Hero Section Styles
   2. Content Block Styles
   3. Component Styles
      3.1 FAQ Accordion
      3.2 Contact Form
      3.3 Service Section
   4. Utility Classes
   5. Media Queries
   ============================================= */

/* ==============================================
   1. HERO SECTION STYLES
   ============================================== */
.dutch-hero-intro {
  margin-top: 138px;
  width: 100%;
  height: 750px;
  background: url(../img/dutch-intro-hero-2000-800.webp);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 0;
}

.dutch-hero-intro.sub {
  margin-top: 138px;
  width: 100%;
  height: 750px;
  background: url(../img/dutch-intro-hero-2000-800.webp);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 0;
}

/* Hero Typography */
.dutch-hero-intro h1 {
  font-size: 4.5rem;
  line-height: 1.2;
  font-family: Sen, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.dutch-hero-intro h2 {
  font-size: 1.75rem;
  font-family: Sen, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.dutch-hero-intro.sub-page h1 {
  font-size: 3.5rem;
  line-height: 1;
  font-family: Sen, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.dutch-hero-intro.sub h1 {
  font-size: 3.5rem;
  font-family: Sen, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.dutch-hero-intro.sub h2 {
  font-size: 1.5rem;
  font-family: Sen, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Hero Responsive Visibility */
.medium-intro-section {
  display: none;
}

.large-intro-section {
  display: block;
}

/* ==============================================
   2. CONTENT BLOCK STYLES
   ============================================== */
/* Water Heater Block */
.dutch-water-heater-block {
  position: relative;
  overflow: hidden;
}

.water-heater-bg {
  background: url('/img/dutch-water-heater-block-2000-762.svg') left center no-repeat;
  background-size: cover;
  min-height: 600px;
  position: relative;
  padding: 3rem 0;
}

/* Maintenance Block */
.dutch-maintenance-block {
  background-image: url('/img/dutch-maintenance-banner-left-1036-772.svg');
  background-size: cover;
  background-position: center;
  min-height: 600px;
}

/* Financing Block */
.dutch-financing-block {
  background-image: url('/img/dutch-financing-block-500.svg');
  background-size: cover;
  background-position: center;
  min-height: 400px;
  padding: 3rem;
}

/* Trust Block */
.dutch-trust-block {
  background-image: url('/img/dutch-why-choose-block-2000-500.svg');
  background-size: cover;
  background-position: center;
  min-height: 500px;
}

/* Service Area Block */
.dutch-service-area-block {
  background-image: url('/img/dutch-service-area-bg-2000.webp');
  background-size: cover;
  background-position: center;
  min-height: 631px;
}

/* Footer Background */
.burgundy-topographic {
  background-image: url('/img/dutch-footer-svg.svg');
  background-size: cover;
  background-position: center;
}

/* ==============================================
   3. COMPONENT STYLES
   ============================================== */
   
/* --- 3.1 FAQ Accordion --- */
.dutch-faq-block .accordion-button:not(.collapsed) {
  background-color: #33060d;
  color: white;
}

.dutch-faq-block .accordion-button:not(.collapsed)::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");
}

.dutch-faq-block .accordion-button:not(.collapsed):focus,
.dutch-faq-block .accordion-button:not(.collapsed):hover {
  color: white;
  box-shadow: 0 0 0 0.25rem rgba(51, 6, 13, 0.25);
}

/* --- 3.2 Contact Form --- */
@media (min-width: 1200px) {
  #contactFormWrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top-right-radius: 0rem!important;
    border-bottom-right-radius: 0rem!important;
  }
}

@media (max-width: 1199px) {
  #contactFormWrapper {
    position: static;
    max-width: 400px;
    margin: auto;
    z-index: 10;
  }
  .hero-contact-card {
    border-radius: 1.5rem;
  }
}

@media (max-width: 767px) {
  #contactFormWrapper {
    max-width: 325px;
  }
}

/* --- 3.3 Service Section --- */
.dutch-services {
  position: relative;
  padding: 2rem 0;
}

.gradient-border-top {
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255,0,17,0.2), rgba(255,0,17,1), rgba(255,0,17,0.2));
}

.gradient-border-bottom {
  height: 3px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255,0,17,0.2), rgba(255,0,17,1), rgba(255,0,17,0.2));
}

/* Service icon cards */
.service-icon-card {
  width: 220px;
  padding: 1rem;
  background-color: rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.service-icon-card .card-body {
  color: #ff0011;
}

.service-icon-card.active {
  background-color: #fff;
}

.service-icon-card.active .card-body {
  color: #c72c1e;
}

.service-icon-card:hover {
  background-color: rgba(255,255,255,0.2);
}

.service-icon-card.active:hover {
  background-color: #fff;
}

/* Service content panels */
.service-content {
  display: none;
}

.service-content.active {
  display: block;
}

.service-content .card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ==============================================
   4. UTILITY CLASSES
   ============================================== */
.bg-danger-gradient {
  background: linear-gradient(to right, #5e0915, red);
}

.dutch-panel-gradient {
  background: linear-gradient(to bottom, #ff0000 0%, #5e0915 90%);
  color: white;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 1px !important;
}

/* Responsive utilities */
@media (max-width: 767px) {
  /* Remove Bootstrap gx-5 gutter spacing on mobile */
  .gx-5-reset {
    --bs-gutter-x: 0 !important;
  }
  
  .row.gx-5 {
    --bs-gutter-x: .5rem !important;  /* Reduced spacing instead of default gx-5 */
  }
}

/* ==============================================
   5. MEDIA QUERIES
   ============================================== */
/* Large Desktop (up to 2000px) */
@media (max-width: 2000px) {
  /* Hero Styles */
  .dutch-hero-intro {
    background: url(../img/dutch-intro-hero-2000-800.webp);
    background-size: cover;
  }
}

/* Medium Desktop (up to 1600px) */
@media (max-width: 1600px) {
  /* Hero Styles */
  .dutch-hero-intro {
    background: url(../img/dutch-intro-hero-1600-800.webp);
    background-size: cover;
  }
  .dutch-hero-intro h1,
  .dutch-hero-intro.sub-page h1 {
    font-size: 4.2rem;
    line-height: 1.1;
  }
  .dutch-hero-intro h2,
  .dutch-hero-intro.sub-page h2 {
    font-size: 1.5rem;
  }
}

/* Hero Section Responsive Breakpoint */
@media (max-width: 1300px) {
  .medium-intro-section {
    display: block;
  }
  .large-intro-section {
    display: none;
  }
}

/* Small Desktop/Large Tablet (up to 1200px) */
@media (max-width: 1200px) {
  /* Hero Styles */
  .dutch-hero-intro {
    background: url(../img/dutch-intro-hero-1400-750.webp);
    background-size: cover;
  }
  .dutch-hero-intro h1,
  .dutch-hero-intro.sub-page h1 {
    font-size: 3rem;
  }
  .dutch-hero-intro h2,
  .dutch-hero-intro.sub-page h2 {
    font-size: 1.25rem;
  }

  /* Content Blocks */
  .water-heater-bg {
    background: url('/img/dutch-water-heater-block-1200-762.webp') center center no-repeat;
    background-size: cover;
    min-height: 600px;
    position: relative;
    padding: 3rem 0;
  }
  
  /* Contact Form */
  #contactFormWrapper {
    position: static;
    max-width: 400px;
    margin: auto;
    z-index: 10;
  }
  .hero-contact-card {
    border-radius: 1.5rem;
  }
}

/* Tablet (up to 991px) */
@media (max-width: 991px) {
  /* Hero Styles */
  .dutch-hero-intro {
    margin-top: 7.25rem;
    background: url(../img/dutch-intro-hero-991-700.webp);
    background-size: cover;
    padding-top: 6rem;
    padding-bottom: 6rem;
    height: fit-content!important;
  }
  .dutch-hero-intro.sub {
    height: fit-content;
  }

  /* Service Area */
  .dutch-service-area-block {
    background-image: url('/img/dutch-service-area-bg-767.webp');
    background-size: cover;
    background-position: right;
    min-height: fit-content;
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  /* Hero Styles */
  .dutch-hero-intro,
  .dutch-hero-intro.sub {
    margin-top: 7.25rem;
    background: #5E0915;
    background: linear-gradient(162deg, rgba(94, 9, 21, 1) 37%, rgba(139, 21, 56, 1) 75%, rgba(255, 0, 0, 1) 99%);
    background-size: cover;
    padding-bottom: 4rem;
    padding-top: 4rem;
    height: fit-content;
  }
  
  .dutch-hero-intro h1,
  .dutch-hero-intro.sub h1 {
    font-size: 2.55rem;
  }
  
  .dutch-hero-intro h2,
  .dutch-hero-intro.sub h2 {
    font-size: 1.5rem;
  }
  
  .hero-text-wrapper {
    text-align: center;
  }
  
  /* Contact Form */
  #contactFormWrapper {
    position: static;
    max-width: 320px!important;
    margin: auto;
    z-index: 10;
    border-radius: 1.5rem;
  }
  
  /* Content Blocks */
  .water-heater-bg {
    background: var(--bs-light) !important;
    background-image: none !important;
    min-height: fit-content;
    position: relative;
    padding: 3rem 0;
  }
  
  /* Financing Block */
  .dutch-financing-block {
    background-image: url('/img/dutch-financing-block-500.svg');
    background-size: cover;
    background-position: center;
    min-height: fit-content;
    padding: 1rem;
  }
  
  /* Trust Block */
  .dutch-trust-block {
    background-image: url('/img/dutch-why-choose-block-2000-500.svg');
    background-size: cover;
    background-position: center;
    min-height: fit-content;
  }
}

/* Small Mobile (up to 576px) */
@media (max-width: 576px) {
  /* Service Area */
  .dutch-service-area-block {
    background-image: url('/img/dutch-service-area-bg-450.webp');
    background-size: cover;
    background-position: center;
    min-height: 500px;
  }
}

/* Extra Small Mobile (up to 450px) */
@media (max-width: 450px) {
  /* Extra small screen styles can be added here */
}