/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================
   FARKALUX — Base & Animation Setup
   ========================================== */

/* ==========================================
   Hover & Interaction Styles
   ========================================== */

/* --- Header Nav Links --- */
.site-header__nav .bricks-nav-menu {
  position: relative;
}

.site-header__nav,
.site-header__inner,
.site-header {
  overflow: visible !important;
}

.site-header__nav .bricks-nav-menu > li > a {
  transition: color 0.3s ease;
}

.site-header__nav .bricks-nav-menu > li > a:hover {
  color: var(--primary);
}

/* Items with submenus: the <a> is inside .brx-submenu-toggle, not direct child of <li> */
.site-header__nav .bricks-nav-menu > li.menu-item-has-children:hover > .brx-submenu-toggle > a {
  color: var(--primary);
}

/* --- Dropdown Arrow Animation (all levels) --- */
.site-header__nav .bricks-nav-menu .brx-submenu-toggle > button {
  transition: color 0.3s ease;
}

.site-header__nav .bricks-nav-menu .brx-submenu-toggle > button svg {
  transition: transform 0.3s ease;
}

/* Top-level: no arrow animation (Leistungen stays as-is) */

/* Top-level: arrow turns red on hover too */
.site-header__nav .bricks-nav-menu > li.menu-item-has-children:hover > .brx-submenu-toggle > button {
  color: var(--primary);
}

/* Dropdown category headers: rotate arrow to point right on hover */
.site-header__nav .sub-menu li.menu-item-has-children:hover > .brx-submenu-toggle > button svg {
  transform: rotate(-90deg);
}

/* Dropdown category headers: text color on hover */
.site-header__nav .sub-menu li.menu-item-has-children:hover > .brx-submenu-toggle > a {
  color: var(--primary) !important;
}

/* Dropdown category headers: arrow color on hover */
.site-header__nav .sub-menu li.menu-item-has-children:hover > .brx-submenu-toggle > button {
  color: var(--primary) !important;
}

/* --- Dropdown layout: align arrows to right edge --- */
.site-header__nav .sub-menu > li > .brx-submenu-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Give category column a consistent min-width so arrows line up */
.site-header__nav .bricks-nav-menu > li > .sub-menu > li {
  min-width: 240px;
}

/* --- Sub-sub-menu items: red on hover --- */
.site-header__nav .sub-menu .sub-menu > li > a:hover {
  color: var(--primary) !important;
}

.nav-indicator {
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  background: var(--primary);
  pointer-events: none;
  will-change: transform, width;
  z-index: 10;
}

/* --- Hero Buttons --- */
.hero__cta.bricks-button {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.hero__cta.bricks-button:hover {
  transform: translateY(-2px);
  background-color: hsla(358, 76%, 50%, 0.9) !important;
  color: #ffffff !important;
}

.hero__cta--secondary.bricks-button {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.hero__cta--secondary.bricks-button:hover {
  transform: translateY(-2px);
  background-color: hsla(358, 76%, 50%, 0.9) !important;
  color: #ffffff !important;
  border-color: hsla(358, 76%, 50%, 0.9) !important;
}

/* --- Leistungen Cards --- */
.leistungen__card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.leistungen__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-l);
}

/* --- Mehr erfahren Links (arrow via ::after) --- */
.leistungen__card-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.leistungen__card-link a::after {
  content: "→";
  display: inline-block;
  transition: transform 0.3s ease;
}

.leistungen__card-link a:hover {
  color: var(--dark) !important;
}

.leistungen__card-link a:hover::after {
  transform: translateX(4px);
}

/* --- Vorteile Icon Boxes --- */
.vorteile__icon-box {
  transition: border-color 0.3s ease;
}

.vorteile__icon-box:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* --- Gallery (CSS Grid, natural image sizes, staggered middle) --- */
.gallery__inner {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  align-items: start;
  width: 100%;
  max-width: var(--max-screen-width, 1400px);
  margin: 0 auto;
}

.gallery__item {
  overflow: hidden;
  position: relative;
}

/* Middle item: offset down for staggered look (portrait source dictates height) */
.gallery__item--offset {
  margin-top: var(--space-xl);
}

.gallery__item .gallery__image,
.gallery__item .gallery__image img,
img.gallery__image {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.5s ease, transform 0.5s ease;
}

.gallery__item:hover .gallery__image,
.gallery__item:hover img.gallery__image,
.gallery__item:hover .gallery__image img {
  filter: grayscale(0);
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .gallery__inner {
    grid-template-columns: 1fr !important;
  }
  .gallery__item--offset {
    margin-top: 0;
  }
}

/* --- Leistungen Card Icons (BEM modifier on .leistungen__card-icon element) --- */
.leistungen__card-icon {
  position: relative;
  flex-shrink: 0;
}

.leistungen__card-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
  mix-blend-mode: multiply;
}

.leistungen__card:hover .leistungen__card-icon::before {
  transform: scale(1.1);
}

.leistungen__card-icon--fenster::before        { background-image: url('https://manfred8.wwinterface.eu/wp-content/uploads/2026/04/1_fenster_n.jpg'); }
.leistungen__card-icon--haustueren::before     { background-image: url('https://manfred8.wwinterface.eu/wp-content/uploads/2026/04/2_tueren_n.jpg'); }
.leistungen__card-icon--fenstertausch::before  { background-image: url('https://manfred8.wwinterface.eu/wp-content/uploads/2026/04/1_fenster_n.jpg'); }
.leistungen__card-icon--sonnenschutz::before   { background-image: url('https://manfred8.wwinterface.eu/wp-content/uploads/2026/04/5_sonnenschutz_n.jpg'); }
.leistungen__card-icon--wintergaerten::before  { background-image: url('https://manfred8.wwinterface.eu/wp-content/uploads/2026/04/3_wintergaerten_n.jpg'); }

/* Mobile: stack icon above body on small screens */
@media (max-width: 478px) {
  .leistungen__card {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* --- CTA Button --- */
.cta__button,
.cta__button.bricks-button {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.cta__button:hover,
.cta__button.bricks-button:hover {
  transform: translateY(-2px) !important;
  background-color: hsla(358, 76%, 50%, 0.9) !important;
  color: #ffffff !important;
}

/* --- Footer Nav Links --- */
.site-footer__menu .bricks-nav-menu > li > a {
  transition: color 0.3s ease;
}

.site-footer__menu .bricks-nav-menu > li > a:hover {
  color: var(--primary) !important;
}


/* ==========================================
   Mobile Nav Fixes
   ========================================== */

/* Mobile: align all toggle arrows to the right edge */
.bricks-nav-menu-wrapper .brx-submenu-toggle {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* Prevent arrow button from shrinking or wrapping */
.bricks-nav-menu-wrapper .brx-submenu-toggle > button {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Mobile: text can truncate but arrow stays visible */
.bricks-nav-menu-wrapper .brx-submenu-toggle > a {
  flex: 1 1 auto;
  min-width: 0;
}

/* Mobile: smooth color transitions on ALL nav links + buttons */
.bricks-nav-menu-wrapper li > a,
.bricks-nav-menu-wrapper li > .brx-submenu-toggle > a,
.bricks-nav-menu-wrapper li > .brx-submenu-toggle > button {
  transition: color 0.3s ease;
}

/* Mobile: hover/active red color on all menu links */
.bricks-nav-menu-wrapper .sub-menu li > a:hover,
.bricks-nav-menu-wrapper .sub-menu li > a:active {
  color: var(--primary) !important;
}

/* Mobile: category header text + arrow red on hover/active */
.bricks-nav-menu-wrapper .sub-menu li.menu-item-has-children:hover > .brx-submenu-toggle > a,
.bricks-nav-menu-wrapper .sub-menu li.menu-item-has-children:hover > .brx-submenu-toggle > button {
  color: var(--primary) !important;
}

/* Mobile: sub-category arrow rotate to point right on hover */
.bricks-nav-menu-wrapper .sub-menu li.menu-item-has-children:hover > .brx-submenu-toggle > button svg {
  transform: rotate(-90deg);
}

/* Mobile: arrow transition */
.bricks-nav-menu-wrapper .brx-submenu-toggle > button svg {
  transition: transform 0.3s ease;
}


/* ==========================================
   Blog Grid & Post Styles
   ========================================== */

/* Blog card hover */
.blog-grid__card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-grid__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-l);
}

/* Blog card image zoom on hover */
.blog-grid__image {
  transition: transform 0.5s ease;
}

.blog-grid__card:hover .blog-grid__image {
  transform: scale(1.03);
}

/* Weiterlesen link with arrow */
.blog-grid__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-grid__link a::after {
  content: "\2192";
  display: inline-block;
  transition: transform 0.3s ease;
}

.blog-grid__link a:hover::after {
  transform: translateX(4px);
}


/* --- Single Post: force Open Sans on all post elements --- */
.post-hero__title,
.post-content__body,
.post-content__body p,
.post-content__body li,
.post-content__body blockquote,
.post-nav {
  font-family: "Open Sans", sans-serif;
}