/**
 * Certo Vloeren - Site Design Upgrade
 * Version: 1.0.0
 *
 * CSS-only design improvements for the main site.
 * No HTML changes required. Uses overrides on existing classes.
 *
 * Colors (Certo branding):
 *   Primary CTA: #0473A9
 *   Teal:        #00A09A
 *   Navy:        #08506D
 *   Headings:    #424547
 *   Body:        #333333
 *   Off-white:   #f3f2f2
 */

/* ==========================================================================
   B. FEATURES SECTION
   ========================================================================== */

/* Features grid: proper card layout with gap */
.features .features-wrap {
  gap: 16px;
  justify-content: center;
}

.features .feature-item {
  background: #fff;
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 28px 24px;
  border-right: none !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  flex-basis: calc(33.333% - 16px) !important;
  margin: 0 !important;
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.features .feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

.features .feature-item .feature-icon {
  flex-basis: auto !important;
  margin-bottom: 16px;
}

.features .feature-item .feature-icon img {
  max-width: 52px;
  height: 52px;
  object-fit: contain;
}

.features .feature-item .feature-text {
  flex-basis: auto !important;
  padding-left: 0 !important;
  text-align: center;
  font-size: 0.9375rem;
  color: #424547;
  line-height: 1.5;
}

/* Responsive: 2 per row on tablet, 1 on mobile */
@media only screen and (max-width: 992px) {
  .features .feature-item {
    flex-basis: calc(50% - 16px) !important;
  }
}

@media only screen and (max-width: 640px) {
  .features .feature-item {
    flex-basis: 100% !important;
    flex-direction: row !important;
    text-align: left;
    align-items: center;
    padding: 20px;
  }

  .features .feature-item .feature-icon {
    margin-bottom: 0;
    margin-right: 16px;
    flex-shrink: 0;
  }

  .features .feature-item .feature-text {
    text-align: left;
  }
}


/* ==========================================================================
   C. PORTFOLIO CAROUSEL (modern arrows + hover effects)
   ========================================================================== */

/* --- Slick Arrow Override: round white circles with SVG chevrons --- */
.portfolio-slider .slick-prev,
.portfolio-slider .slick-next,
.video-slider .slick-prev,
.video-slider .slick-next {
  width: 44px !important;
  height: 44px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  z-index: 10 !important;
  opacity: 1 !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.portfolio-slider .slick-prev:hover,
.portfolio-slider .slick-next:hover,
.video-slider .slick-prev:hover,
.video-slider .slick-next:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transform: scale(1.05) !important;
}

/* Override Slick's default arrow characters with SVG chevrons */
.portfolio-slider .slick-prev:before,
.video-slider .slick-prev:before {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230473A9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: contain !important;
  margin: 0 auto !important;
  font-size: 0 !important;
  opacity: 1 !important;
}

.portfolio-slider .slick-next:before,
.video-slider .slick-next:before {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230473A9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center center !important;
  background-size: contain !important;
  margin: 0 auto !important;
  font-size: 0 !important;
  opacity: 1 !important;
}

/* Position arrows better */
.portfolio-slider .slick-prev,
.video-slider .slick-prev {
  left: 15px !important;
}

.portfolio-slider .slick-next,
.video-slider .slick-next {
  right: 15px !important;
}

/* Portfolio slider items */
.portfolio-slider-item {
  border-radius: 0;
  overflow: hidden;
}

.portfolio-slider-item .block-link {
  border-radius: 0;
  overflow: hidden;
}

.portfolio-tumbnail {
  transition: transform 0.4s ease;
}

.portfolio-slider-item:hover .portfolio-tumbnail {
  transform: scale(1.05);
}

/* Video slider items */
.video-slider-item {
  border-radius: 0;
  overflow: hidden;
}

.video-slider-item .block-link {
  border-radius: 0;
  overflow: hidden;
}

.video-poster {
  transition: transform 0.4s ease;
}

.video-slider-item:hover .video-poster {
  transform: scale(1.05);
}


/* ==========================================================================
   D. BUTTONS
   ========================================================================== */

.button {
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

.button.primary {
  background-color: #0473A9;
}

.button.primary:hover,
.button.primary:focus {
  background-color: #035e8a;
}

.button.outline-white {
  transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
}


/* ==========================================================================
   E. SECTION SPACING
   ========================================================================== */

.content-block {
  padding: 50px 0;
}

@media only screen and (min-width: 40.0625em) {
  .content-block {
    padding: 80px 0;
  }
}

section.products,
section.brands,
section.features,
section.portfolio_carousel,
section.cards_on_green_background,
section.cards_on_white_background,
section.fullwidth_banner {
  padding-top: 50px;
  padding-bottom: 50px;
}

.content-header-box {
  margin-bottom: 50px;
}


/* ==========================================================================
   F. HEADER
   ========================================================================== */

header[role="banner"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}

header[role="banner"].header-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}


/* ==========================================================================
   G. FOOTER
   ========================================================================== */

footer[role="contentinfo"] a {
  transition: color 0.3s ease;
}

footer[role="contentinfo"] a:hover {
  color: #0473A9;
}

footer[role="contentinfo"] .columns {
  margin-bottom: 20px;
}

.brands-list img {
  transition: opacity 0.3s ease;
}

.brands-list img:hover {
  opacity: 0.7;
}


/* ==========================================================================
   H. FULL-WIDTH BANNER
   ========================================================================== */

.fullwidth_banner {
  position: relative;
}

.fullwidth_banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.fullwidth_banner > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   I. TEXT + IMAGE BLOCKS
   ========================================================================== */

.text_block_image_left img,
.text_block_image_right img {
  border-radius: 0;
}


/* ==========================================================================
   J. HERO IMPROVEMENTS
   ========================================================================== */

/* Dark background so the loading state isn't a white flash */
.home-banner {
  position: relative;
  background-color: #1a1a1a !important;
}

/* Hero content: subtle fade-up on page load (CSS only, no JS dependency) */
.featured-content {
  animation: hero-content-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

@keyframes hero-content-in {
  from {
    opacity: 0;
    transform: translateY(-50%) translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}


/* ==========================================================================
   K. SCROLL REVEAL ANIMATIONS (CSS side)
   ========================================================================== */

/* Base reveal: fade up */
.site-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children (cards, features, portfolio items) */
.site-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-stagger.is-visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.site-stagger.is-visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
.site-stagger.is-visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 0.16s; }
.site-stagger.is-visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }
.site-stagger.is-visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
.site-stagger.is-visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }
.site-stagger.is-visible > *:nth-child(n+7) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }

/* Slide from left (text_block_image_left) */
.site-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right (text_block_image_right) */
.site-reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up (CTA, fullwidth banner) */
.site-reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.site-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Content header underline grow */
.content-header-box .content-header::after {
  width: 0;
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.is-visible .content-header-box .content-header::after,
.site-reveal.is-visible .content-header::after {
  width: 100px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-reveal,
  .site-reveal-left,
  .site-reveal-right,
  .site-reveal-scale,
  .site-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .featured-content {
    opacity: 1 !important;
    animation: none !important;
  }

  .content-header-box .content-header::after {
    width: 100px !important;
    transition: none !important;
  }

  .card-item,
  .feature-item,
  .portfolio-tumbnail,
  .video-poster,
  .brands-list img {
    transition: none !important;
  }

  .card-item:hover,
  .feature-item:hover {
    transform: none !important;
  }
}


/* ==========================================================================
   L. CONTENT HEADERS
   ========================================================================== */

.content-header-box {
  padding-bottom: 10px;
}


/* ==========================================================================
   MOBILE PORTFOLIO: Compact 2-column grid
   ========================================================================== */

.portfolio-compact-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 20px !important;
}

.portfolio-compact-grid .portfolio-slider-item {
  flex: 0 0 calc(50% - 7px);
  max-width: calc(50% - 7px);
  margin: 0 !important;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.portfolio-compact-grid .portfolio-slider-item .block-link {
  margin-bottom: 0;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Remove the teal hover overlay bar */
.portfolio-compact-grid .portfolio-slider-item .block-link::after {
  display: none;
}

.portfolio-compact-grid .portfolio-slider-item .portfolio-tumbnail {
  height: 120px;
  flex-shrink: 0;
}

.portfolio-compact-grid .portfolio-slider-item .block-link-title {
  font-family: Panton, sans-serif;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  top: auto;
  margin-top: 0;
  transform: none;
  padding: 8px 8px;
  background: #fff;
  color: #424547;
  text-align: center;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-height: 36px;
}

/* More space between grid and the button below */
.portfolio_carousel .portfolio-compact-grid + .row,
.portfolio_carousel .portfolio-compact-grid ~ .row {
  margin-top: 28px !important;
}