/**
 * @file
 * Use this CSS file to override components CSS rules
 */

/* ==========================================================================
   Header & Footer – Brand Grey (#333F48 / --color-brand-body)
   Override hardcoded colors in layout.css, fixed-header.css, and other
   component CSS that use region--black-background / region--dark-colored-background.
   ========================================================================== */

/* Static header – override layout.css .region--black-background (#1d1d1d) */
.header-container .header.region--black-background,
.header-container .header.region--dark-colored-background {
  background-color: var(--color-brand-body);
}

/* Fixed/sticky header on scroll – override fixed-header.css hardcoded rgba */
.onscroll .header.js-fixed.region--black-background,
.onscroll .header.js-fixed.region--dark-colored-background,
.onscroll .region--dark-colored-background .header.js-fixed,
.onscroll .region--black-background .header.js-fixed {
  background-color: rgba(51, 63, 72, 0.95);  /* --color-brand-body with opacity */
}

/* Footer – override layout.css region colors and any hardcoded values */
#footer-bottom,
#footer-bottom.region--black-background,
#footer-bottom.region--dark-colored-background,
#subfooter-top,
#subfooter-top.region--black-background,
#subfooter-top.region--dark-colored-background,
.footer.region--black-background,
.footer.region--dark-colored-background {
  background-color: var(--color-brand-body);
}

/* ==========================================================================
   Header Top Highlighted – Collapse when only tracking scripts are present.
   The region renders its wrapper even when blocks output only <script> tags.
   This removes all visual space while keeping scripts functional.
   ========================================================================== */
.header-top-highlighted {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}
.header-top-highlighted__container {
  padding: 0 !important;
}
.header-top-highlighted__section,
.header-top-highlighted__section .block {
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   Header – Flexbox override for all screen sizes.
   Replaces the rigid Bootstrap 3 col-md-4/8 (two-column) or col-md-4/6/2
   (three-column) split with flex layout: logo auto-sizes to content, nav
   fills remaining space. Works for both 2-column and 3-column layouts.
   ========================================================================== */
.header__container > .row {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
}
.header__container > .row > div {
  float: none !important;    /* override Bootstrap 3 float grid */
  width: auto !important;    /* override col-md-* percentage widths */
  flex: 0 0 auto;
}
/* Logo column: auto-size to content */
.header__container > .row > div:first-child {
  flex: 0 0 auto;
}
/* Nav column (always 2nd): fill remaining space */
.header__container > .row > div:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;              /* allow flex shrinking past content size */
}
/* If a 3rd column exists, pin it right (doesn't affect 2-column layouts) */
.header__container > .row > div:nth-child(3) {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ==========================================================================
   Main Nav – Horizontal single-line, right-aligned.
   ========================================================================== */
#superfish-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
#superfish-main > li > a,
#superfish-main > li > span {
  white-space: nowrap;
}

blockquote {
    padding: 0 0 0 50px;
    font-size: var(--font-size-lg);
    margin: 40px 0 10px;
}

blockquote::before {
    font-family: 'montserrat', 'helvetica', 'arial', sans-serif;
    left: 0px;
    line-height: .75;
}

.iframe-container,
.iframe-container iframe {
    width: 100%;
    height: 100%;
    
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

/* ==========================================================================
   DOWNLOAD BUTTONS - Resources View (Product Downloads Accordion)
   ========================================================================== */

/* Grid layout for the view */
.view-resources .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 20px 0;
}

/* Each card/button */
.view-resources .views-row {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  padding-left: 70px; /* Space for icon */
  min-height: 80px;
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.view-resources .views-row:hover {
  border-color: var(--color-brand-blue);
  background: #f8fafc;
  box-shadow: 0 4px 12px rgba(var(--color-brand-blue-rgb), 0.15);
  transform: translateY(-2px);
}

/* Document icon (::before pseudo-element) */
.view-resources .views-row::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: #dc3545;
  border-radius: 8px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15l3 3 3-3'/%3E%3C/svg%3E");
  mask-size: 24px;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='M9 15l3 3 3-3'/%3E%3C/svg%3E");
  -webkit-mask-size: 24px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Title field - visible */
.view-resources .views-row .views-field-title {
  order: 1;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
  color: var(--color-brand-blue);
  line-height: var(--line-height-snug);
  margin-bottom: 6px;
}

.view-resources .views-row .views-field-title a {
  color: inherit;
  text-decoration: none;
  pointer-events: none; /* Disabled - we use the file link instead */
}

/* Document type field - visible */
.view-resources .views-row .views-field-field-document-type {
  order: 2;
  font-size: var(--font-size-base);
  color: #666;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Teaser Media field - hide visuals, but use the file link */
.view-resources .views-row .views-field-field-media-1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  overflow: hidden;
}

/* Hide all the visual content inside teaser media */
.view-resources .views-row .views-field-field-media-1 .field-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.view-resources .views-row .views-field-field-media-1 .media,
.view-resources .views-row .views-field-field-media-1 .contextual-region {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent !important;
}

/* Hide all fields and visual elements inside media */
.view-resources .views-row .views-field-field-media-1 .field,
.view-resources .views-row .views-field-field-media-1 img,
.view-resources .views-row .views-field-field-media-1 .media__content,
.view-resources .views-row .views-field-field-media-1 .contextual {
  visibility: hidden;
}

/* BUT make the actual file link visible and cover the whole card */
.view-resources .views-row .views-field-field-media-1 .file a,
.view-resources .views-row .views-field-field-media-1 a[href*="/files/"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100;
  visibility: visible !important;
  opacity: 0; /* Invisible but clickable */
  cursor: pointer;
  font-size: 0;
  text-indent: -9999px;
}

/* Download Buttons Responsive */
@media (max-width: 768px) {
  .view-resources .view-content {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   DOCUMENT TYPE ICONS (Color variations based on class)
   To use: Add row class in View settings: {{ field_document_type|clean_class }}
   ========================================================================== */

.view-resources .views-row.tech-specs::before {
  background-color: #0891b2;
}

.view-resources .views-row.installation-guide::before {
  background-color: #059669;
}

.view-resources .views-row.warranty::before {
  background-color: #d97706;
}

.view-resources .views-row.plan-view::before {
  background-color: #4f46e5;
}

.view-resources .views-row.comparison-chart::before {
  background-color: #7c3aed;
}

.view-resources .views-row.maintenance-checklist::before {
  background-color: #0d9488;
}

.view-resources .views-row.brochure::before {
  background-color: #ea580c;
}

/* ==========================================================================
   FOOTER - Equal 5-Column Flexbox Layout
   Overrides Bootstrap grid for balanced, symmetrical footer columns
   ========================================================================== */

/* Main footer row - convert to flexbox */
.footer .footer__container > .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px; /* Maintain Bootstrap-like gutters */
}

/* All direct column children - equal width */
.footer .footer__container > .row > [class*="col-"] {
  flex: 1 1 20%; /* Equal 5 columns (100% / 5 = 20%) */
  max-width: 20%;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Hide the clearfix divs that Bootstrap uses for row breaks */
.footer .footer__container > .row > .clearfix {
  display: none;
}

/* Tablet - 3 columns on first row, 2 on second */
@media (max-width: 992px) {
  .footer .footer__container > .row > [class*="col-"] {
    flex: 1 1 33.333%;
    max-width: 33.333%;
    margin-bottom: 30px;
  }
}

/* Mobile - stack to full width */
@media (max-width: 576px) {
  .footer .footer__container > .row > [class*="col-"] {
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 25px;
  }
}