/* === Red Barn Media Group - Combined Optimized Styles - Colorado Air Solutions === */

/* === CSS Custom Properties === */
:root {
  /* Colors */
  --color-obsidian: #00050c;
  --color-white: #ffffff;
  --color-gold: #f0b243;
  --color-gold-hover: #f9b253;
  --color-blue: #1f4e8f;
  --color-deep-navy: #062235;
  --color-dark-slate-blue: #041a2b;
  --color-deep-charcoal: #03111e;
  --color-gray-666: #666;
  --color-gradient-bg: linear-gradient(90deg, rgba(5, 26, 51, 1) 0%, rgba(26, 26, 26, 1) 50%);
  
  /* Typography */
  --font-barlow: barlow, sans-serif;
  --font-inter: inter-variable, sans-serif;
  
  /* Layout */
  --hero-height: 650px;
  --hero-padding: 3rem;
  --transition-standard: 0.25s;
  --border-radius-standard: 0.65rem;
  --border-radius-large: 1rem;
  --border-radius-card: 1rem;
  --box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
}

/* === Base Styles === */
html, body {
  width: 100%;
  height: 100%;
}

body {
  color: var(--color-white);
  font-family: var(--font-inter);
  font-weight: 400;
  background-color: var(--color-obsidian);
}

/* === Typography === */
/* OPTIMIZED: Grouped all Barlow-based headings to set shared properties once. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.barlow-black, .barlow-bold, .barlow-semibold, .barlow-medium {
  font-family: var(--font-barlow);
  text-transform: uppercase;
}

/* OPTIMIZED: Set only the unique font-weight for each level. */
h1, .h1, .barlow-black         { font-weight: 900; }
h2, .h2, h3, .h3, .barlow-bold { font-weight: 700; }
h4, .h4, .barlow-semibold      { font-weight: 600; }
h5, .h5, h6, .h6, .barlow-medium { font-weight: 500; }

.inter { font-family: var(--font-inter); }
p,ul li,ol li,table { font-size: 0.85rem; font-weight: 300; }
.fs-8 { font-size: 0.65rem; }

/* === Menu Styles === */
.menu-container {
  background: var(--color-obsidian);
  margin-top: 0 !important; /* !important may be needed for specific overrides */
}

.menu-container.shrink-menu {
  border-bottom: 1px solid var(--color-obsidian);
}

.navbar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 5rem;
  transition: height var(--transition-standard);
}

.shrink-menu .navbar-nav {
  height: 4rem;
}

/* Navigation Links */
/* OPTIMIZED: Increased specificity with .menu-container to avoid !important. */
.menu-container .navbar-light .navbar-nav .nav-link {
  color: var(--color-obsidian);
  font-family: var(--font-barlow);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.menu-container .navbar-light .navbar-nav .nav-link.phone {
  color: #2b6dbc;
}

.menu-container .navbar-light .navbar-nav .nav-link:is(:hover, :active, :focus) {
  color: #2b6dbc;
}

/* Dropdown Styles */
.nav-item .dropdown-item {
  color: var(--color-obsidian);
  font-family: var(--font-barlow);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* OPTIMIZED: Removed !important, as specificity should be sufficient. */
.nav-item .dropdown-item:is(:focus, :hover) {
  background-color: #eee;
  border-radius: 0.25rem;
}

.dropdown-item:active {
  color: var(--color-gold) !important; /* !important likely needed to override Bootstrap's :active state */
  background-color: #eee !important;
}

.dropdown-toggle::after,
.dropend .dropdown-item::after,
.dropstart .dropdown-toggle::before {
  display: none !important; /* !important is okay here for utility-like behavior */
}

.navbar-expand-xl .navbar-nav .dropdown-menu {
  background: #fff;
  border: 0;
  box-shadow: var(--box-shadow-dropdown);
  padding: 0.5rem;
}

.navbar-expand-xl .navbar-nav .dropdown-menu.main-dropdown {
  top: 2rem;
  padding: 1rem 0.5rem 0.5rem;
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
  transition: top var(--transition-standard);
}

.navbar-expand-xl .navbar-nav .dropdown-menu.sub-dropdown {
  border-radius: var(--border-radius-large);
}

/* Logo Styles */
.menu-container .container-fluid.cas-logo-row {
  transition: all var(--transition-standard);
}

.cas-logo-desktop {
  position: absolute;
  width: 200px;
  height: 100px;
  top: -4rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: all var(--transition-standard);
}

.shrink-menu .cas-logo-desktop {
  width: 150px;
  height: 75px;
  top: -3rem;
}

/* Menu Layout */
.cas-menu-top-row, .cas-menu-padding {
  padding: 0 7.5rem;
  transition: padding var(--transition-standard); /* OPTIMIZED: Placed transition on parent */
}

.cas-menu-top-row .cas-menu-top-col {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition: padding var(--transition-standard);
}

.shrink-menu .cas-menu-top-row .cas-menu-top-col {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.cas-menu-top-row .cas-menu-top-col p {
  font-family: var(--font-barlow);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 0;
}

.nav-fill .nav-item .dropdown-item {
  text-align: left !important;
  color: var(--color-blue);
}

/* === Home Hero Styles === */
.cas-hero-intro {
  margin-top: 125px;
  background: url(../img/cas-hero-2000-650.webp) center bottom/cover;
  width: 100%;
  height: var(--hero-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cas-hero-intro-form-top-margin { margin-top: -12rem; }
.cas-hero-intro h1 { font-size: 4rem; line-height: 1; }
.cas-hero-intro h2 { font-size: 1.125rem; font-weight: 500; }
.cas-hero-intro-form-field { font-size: 1rem; }

/* === Navigation Pills Styles === */
.nav-pills .nav-link.CAS-nav-link-selector {
  color: var(--color-gold);
  background: transparent;
  border: solid 1px var(--color-gold);
  border-radius: var(--border-radius-standard);
  padding: 1rem 2rem;
  font-family: var(--font-barlow);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
}
.nav-pills .nav-link.CAS-nav-link-selector:hover,
.nav-pills .nav-link.active.CAS-nav-link-selector {
  color: var(--color-deep-charcoal);
  background: var(--color-gold-hover);
  border-color: var(--color-gold-hover);
}
svg.CAS-rollover-icon {
  fill: var(--color-gold);
  width: 50px;
  height: 50px;
  margin-bottom:0.5rem;
  transition: fill var(--transition-standard);
}
svg.CAS-rollover-icon.MOB-MOD {
  width: 75px;
}
.nav-pills .nav-link:is(:hover, .active) svg.CAS-rollover-icon {
  fill: var(--color-obsidian);
}

/* === Banner Styles === */
/* OPTIMIZED: Base styles are defined once, outside media queries. */
.cas-banner-skyline {
  background: url(../img/cas-banner-skyline-2000.webp) center center/cover;
  width: 100%;
  height: 646px;
  mask-image: linear-gradient(transparent, #000, transparent);
}

/* === Button Styles === */
.btn {
  /* OPTIMIZED: Removed !important from padding. Specificity of modifiers should be enough. */
  padding: 0.65rem 1.75rem;
  font-family: var(--font-barlow);
  font-weight: 700;
  border-radius: var(--border-radius-standard);
  text-transform: uppercase;
}

.btn.btn-menu { padding: 0.75rem 0.85rem; font-size: 0.85rem; }
.btn.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn.btn-xl { padding: 1.25rem 1.75rem; font-size: 1.5rem; }

.btn-warning {
  color: var(--color-obsidian);
  background: var(--color-gold);
  border-color: var(--color-gold);
}
.btn-warning:is(:hover, :active, :focus) {
  color: var(--color-obsidian);
  background: var(--color-gold-hover);
  border-color: var(--color-gold-hover);
}
.btn-outline-warning {
  color: var(--color-gold);
  background: transparent;
  border-color: var(--color-gold);
}
.btn-outline-warning:is(:hover, :active, :focus) {
  color: var(--color-obsidian);
  background: var(--color-gold-hover);
  border-color: var(--color-gold-hover);
}
.btn-anti-flex { align-self: flex-start; }

/* === Color Utility Classes === */
/* NOTE: !important is generally acceptable for utility classes to ensure they override component styles. */
.text-gold { color: var(--color-gold) !important; }
.bg-gold { background-color: var(--color-gold) !important; }
.border-gold { border-color: var(--color-gold) !important; }

.cas-border-shift { border-left: 1px solid var(--color-gold); border-right: 1px solid var(--color-gold); }

.text-deep-navy { color: var(--color-deep-navy) !important; }
.bg-deep-navy { background-color: var(--color-deep-navy) !important; }

.text-dark-slate-blue { color: var(--color-dark-slate-blue) !important; }
.bg-dark-slate-blue { background-color: var(--color-dark-slate-blue) !important; }

.text-deep-charcoal { color: var(--color-deep-charcoal) !important; }
.bg-deep-charcoal { background-color: var(--color-deep-charcoal) !important; }

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

.text-666 { color: var(--color-gray-666) !important; }

/* === Component Styles === */
.img-fluid { margin-bottom: 2rem; }

ul.list-group,ol.list-group, .card,.table-responsive,table.table-bordered {
  background: var(--color-gradient-bg);
  border: 1px solid var(--color-gold);
  border-radius: var(--border-radius-card) !important; /* Keep !important if overriding BS component children */
  margin-bottom: 1.5rem;
  color: var(--color-white);
}

ul.list-group li.list-group-item,ol.list-group li.list-group-item,table.table.table-bordered thead tr th,table.table.table-bordered tbody tr td {
  background: transparent !important;
  border-color: var(--color-gold);
  color: var(--color-white);
}

.accordion {
  background: transparent;
  border: none;
  color: var(--color-white);
}
.accordion-item, .accordion-header, .accordion-button {
  background: transparent;
  border: none;
  color: var(--color-white);
}
.accordion-item {
  border-bottom: 0.25px solid var(--color-gold);
}
.accordion-button { font-size: 0.9rem; }
.accordion-body { font-size: 0.8rem; }

/* OPTIMIZED: Grouped accordion radius resets */
.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button,
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion-button:not(.collapsed) {
  color: var(--color-gold-hover);
  box-shadow: none;
  background: transparent;
}
.accordion-button::after {
  display: none !important;
}

/* === Utility Classes === */
strong, em, u {
  font-weight: inherit !important;
  font-style: inherit !important;
  text-decoration: inherit !important;
}
a { text-decoration: none; }
.dashed { border-style: dashed !important; }

/* === Sub Page Stlyes === */
.cas-sub-page-image-wrapper {
  background: var(--color-blue);
  width: 100%;
  background-size: cover;
  border-radius: var(--border-radius-standard);
}
.cas-sub-page-image-wrapper.air-conditioner {
  background-image: url(../img/cas-sub-page-image-wrapper-AC-01.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cas-sub-page-image-wrapper.air-conditioner-2 {
  background-image: url(../img/cas-sub-page-image-wrapper-AC-02.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cas-sub-page-image-wrapper.furnace {
  background-image: url(../img/cas-sub-page-image-wrapper-FU-01.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cas-sub-page-image-wrapper.mini-split {
  background-image: url(../img/cas-sub-page-image-wrapper-MS-01.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cas-sub-page-image-wrapper.package-unit {
  background-image: url(../img/cas-sub-page-image-wrapper-PU-01.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cas-sub-page-image-wrapper.air-quality {
  background-image: url(../img/cas-sub-page-image-wrapper-AQ-01.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cas-sub-page-image-wrapper.tank {
  background-image: url(../img/cas-sub-page-image-wrapper-PU-01.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cas-sub-page-image-wrapper.tankless {
  background-image: url(../img/cas-sub-page-image-wrapper-PU-01.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* === Footer Styles === */
footer h6 {
  color: var(--color-obsidian);
  font-weight: 700;
  margin-bottom: 1rem;
}
footer p { margin-bottom: 0.25rem; }
footer p a {
  color: var(--color-obsidian);
  font-family: var(--font-barlow);
  font-weight: 500;
}
footer p a:is(:hover, :active, :focus) {
  color: var(--color-blue);
}

/* === Media Queries === */
/* OPTIMIZED: Each media query now only contains the styles that need to change at that breakpoint. */
@media (max-width: 1400px) {
  .cas-menu-top-row, .cas-menu-padding { padding: 0 5rem; }
  .navbar-light .navbar-nav .nav-link { font-size: 0.85rem; }
  
  .cas-hero-intro { background-image: url(../img/cas-hero-1400-650.webp); }
  .cas-hero-intro-form-top-margin { margin-top: -7rem; }

  .cas-banner-skyline {
    background-image: url(../img/cas-banner-skyline-1400.webp);
    height: 452px;
  }
}

@media (max-width: 1200px) {
  .cas-menu-top-row .cas-menu-top-col { padding-block: 0.5rem; }
  .shrink-menu .cas-menu-top-row .cas-menu-top-col { padding-block: 0.35rem; }

  .navbar-nav, .shrink-menu .navbar-nav { height: fit-content; }
  .navbar-nav { width: auto; }
  
  .navbar { height: 80px; transition: height var(--transition-standard); }
  .shrink-menu .navbar { height: 65px; }
  
  .cas-logo {
    position: absolute;
    background: url(../img/cas-logo.svg);
    width: 150px;
    height: 75px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 2.5rem;
    transition: all var(--transition-standard);
    z-index: 10;
  }
  .shrink-menu .cas-logo {width: 120px; height: 60px; top: 2.125rem;}
  
  .nav-fill .nav-item, .nav-fill > .nav-link { flex: 1 1 auto; text-align: left; }
  .rotate-at-mobile { transform: rotate(90deg); }
  .navbar-light .navbar-nav .nav-link { font-size: 1.25rem; }
  
  .cas-hero-intro { margin-top: 117px; background-image: url(../img/cas-hero-1200-650.webp); }
  .cas-hero-intro h1 { font-size: 3.5rem; }
  .cas-hero-intro h2 { font-size: 1.25rem; }

  .cas-banner-skyline {
    background-image: url(../img/cas-banner-skyline-1200.webp);
    height: 388px;
  }
}

@media (max-width: 991px) {
  .cas-menu-top-row, .cas-menu-padding { padding: 0 3.5rem; }
  .navbar-light .navbar-nav .nav-link { font-size: 1.35rem; color: #000714 !important; } /* !important kept for specificity against inline/js styles */
  
  .cas-hero-intro { background-image: url(../img/cas-hero-991-650.webp); height: fit-content; }
  .cas-hero-intro-form-top-margin { margin-top: 0; }
  .cas-hero-intro .container { padding-block: var(--hero-padding); }
  .cas-hero-intro h1 { font-size: 3rem; }
  .cas-hero-intro h2 { font-size: 1rem; }
  .cas-hero-intro-form-field { font-size: 0.85rem; }

  .cas-border-shift { border-inline: none; border-block: 1px solid var(--color-gold); }

  .cas-banner-skyline {
    background-image: url(../img/cas-banner-skyline-991.webp);
    height: 320px;
  }
}

@media (max-width: 767px) {
  .cas-logo {width: 120px; height: 60px; top: 3rem;}
  .shrink-menu .cas-logo { width: 100px; height: 50px; top: 2.5rem; }
  
  .cas-hero-intro { background-image: url(../img/cas-hero-svg.svg); height: fit-content; }
  .cas-hero-intro .container { padding-block: var(--hero-padding); }
  .cas-hero-intro h1 { font-size: 2.5rem; }

  .cas-banner-skyline {
    background-image: url(../img/cas-banner-skyline-767.webp);
    height: 248px;
  }
}

@media (max-width: 576px) {
  /*.cas-logo { width: 85px; height: 43px; top: 0.5rem; }
  .shrink-menu .cas-logo { width: 75px; height: 38px; top: 0.5rem; }*/
  
  .cas-hero-intro h1 { font-size: 2.25rem; }
  .cas-hero-intro h2 { font-size: 0.85rem; }

  .cas-banner-skyline {
    background-image: url(../img/cas-banner-skyline-576.webp);
    height: 186px;
  }
}

@media (max-width: 450px) {
  .cas-hero-intro h1 { font-size: 2rem; }
  .cas-banner-skyline { display: none; }
}