/*
 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
*/
/* Bricks Builder specifics */
.brxe-button .bricks-button,
.brxe-button a.bricks-button {
  background-color: #336666 !important;
  color: #ffffff !important;
  border-radius: 4px;
}
.brxe-button .bricks-button:hover,
.brxe-button a.bricks-button:hover {
  background-color: #8A603C !important;
}

/* Nav */
#brx-header { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
#brx-header a { color: #3D3D3D; }
#brx-header a:hover { color: #336666; }

/* Footer */
#brx-footer { background-color: #336666; color: #ffffff; }
#brx-footer a { color: #FFCC66; }
#brx-footer a:hover { color: #ffffff; }

/* Utility classes for Philonatura */
.philo-bg-primary { background-color: #336666; color: #fff; }
.philo-bg-secondary { background-color: #8A603C; color: #fff; }
.philo-accent { color: #8A603C; }
.philo-highlight { background-color: #FFCC66; padding: 2px 6px; }

/* ===================================================
   Philonatura – Schema 1: Erde und Wald
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Vidaloka&family=Open+Sans:ital,wght@0,300;0,400;0,700;1,400&display=swap');

:root {
  /* Schema 1 – Erde und Wald */
  --philo-bg:           #F5F2ED;
  --philo-surface:      #E8E0D4;
  --philo-border:       #D4C4A8;
  --philo-warm:         #8A603C;
  --philo-primary:      #336666;
  --philo-primary-dark: #264D4D;
  --philo-text:         #1A2F2F;

  /* Bricks CSS variable overrides */
  --bricks-color-primary:   #336666;
  --bricks-color-secondary: #8A603C;
  --bricks-color-dark:      #1A2F2F;
  --bricks-color-light:     #F5F2ED;
}

/* === Base === */
html { background-color: #F5F2ED; }
body { font-family: 'Open Sans', sans-serif; color: #1A2F2F; background-color: #F5F2ED; }

h1, h2, .brxe-heading[data-tag="h1"], .brxe-heading[data-tag="h2"] {
  font-family: 'Vidaloka', serif;
  color: #336666;
}
h3, h4, h5, h6, .brxe-heading[data-tag="h3"] {
  font-family: 'Open Sans', sans-serif;
  color: #8A603C;
  font-weight: 700;
}
p { color: #1A2F2F; }

a { color: #336666; }
a:hover { color: #264D4D; }

/* === Buttons === */
.bricks-button,
.brxe-button .bricks-button,
.wp-block-button__link {
  background-color: #336666 !important;
  color: #F5F2ED !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  transition: background-color 0.2s ease;
}
.bricks-button:hover,
.brxe-button .bricks-button:hover {
  background-color: #264D4D !important;
}

/* === Header === */
#brx-header,
header#brx-header { background-color: #F5F2ED !important; border-bottom: 1px solid #D4C4A8; }
#brx-header nav a,
#brx-header .bricks-nav-menu > li > a { color: #1A2F2F !important; font-weight: 400; }
#brx-header nav a:hover,
#brx-header .bricks-nav-menu > li > a:hover { color: #336666 !important; }
#brx-header .bricks-nav-menu > li > a.active { color: #336666 !important; font-weight: 600; }

/* === Hero / sections === */
.brxe-section { background-color: transparent; }

/* === Footer === */
#brx-footer,
footer#brx-footer { background-color: #1A2F2F !important; color: #E8E0D4 !important; }
#brx-footer p, #brx-footer span { color: #E8E0D4 !important; }
#brx-footer a { color: #D4C4A8 !important; }
#brx-footer a:hover { color: #F5F2ED !important; }

/* === Surface cards / sections === */
.bg-surface { background-color: #E8E0D4 !important; }
.bg-primary  { background-color: #336666 !important; color: #F5F2ED !important; }
.bg-dark     { background-color: #1A2F2F !important; color: #E8E0D4 !important; }

/* CEO-NAV-UPDATE: Nav bold + hover + logo + header-light */

/* NAV: Größere/boldere Schrift + sichtbarer Hover */
#brx-header .bricks-nav-menu > li > a {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  transition: background-color 0.2s, color 0.2s !important;
  text-decoration: none !important;
}
#brx-header .bricks-nav-menu > li > a:hover,
#brx-header .bricks-nav-menu > li.current-menu-item > a,
#brx-header .bricks-nav-menu > li.current-menu-ancestor > a {
  background-color: rgba(0,0,0,0.08) !important;
  color: inherit !important;
}

/* LOGO: Größer + vertikal zentriert */
#brx-header .brxe-image img,
#brx-header .brxe-logo img,
#brx-header img[class*="logo"] {
  height: 62px !important;
  width: auto !important;
  object-fit: contain !important;
}
#brx-header .bricks-nav,
#brx-header .brx-nav-wrapper {
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
}
#brx-header .brxe-nav-nested,
#brx-header .bricks-nav-menu-wrapper {
  display: flex !important;
  align-items: center !important;
}

/* HEADER: Hell (light background) – background only, NO border-bottom on inner elements */
#brx-header > div,
#brx-header .brxe-section,
#brx-header .brxe-container,
#brx-header .brxe-block,
.brx-header {
  background-color: #F5F2ED !important;
  border-bottom: none !important;
}
/* Nav links dark on light background */
#brx-header .bricks-nav-menu > li > a,
#brx-header .bricks-nav-menu > li > a * {
  color: #264D4D !important;
}
#brx-header .bricks-nav-menu > li > a:hover {
  color: #336666 !important;
  background-color: rgba(51,102,102,0.08) !important;
}

/* NAV ALIGNMENT: Consistent horizontal alignment for items with and without dropdowns */
#brx-header .bricks-nav-menu > li {
  display: flex !important;
  align-items: center !important;
}
#brx-header .bricks-nav-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
/* Normalize dropdown indicator size so it doesn't break alignment */
#brx-header .bricks-nav-menu > li.menu-item-has-children > a svg,
#brx-header .bricks-nav-menu > li.menu-item-has-children > a .brxe-icon {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
}

/* DROPDOWN: Submenu styling */
#brx-header .bricks-nav-menu .sub-menu {
  background-color: #F5F2ED !important;
  border: 1px solid #D4C4A8 !important;
  border-top: 3px solid #336666 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  min-width: 200px !important;
}
#brx-header .bricks-nav-menu .sub-menu li a {
  color: #264D4D !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  display: block !important;
  transition: background-color 0.15s !important;
}
#brx-header .bricks-nav-menu .sub-menu li a:hover {
  background-color: rgba(51,102,102,0.08) !important;
  color: #336666 !important;
}

/* END-CEO-NAV-UPDATE */

/* CEO-FIX-3: Logo centering in header */

/* Root cause: [yeqbui] container holds the 30% logo but lacks justify-content:center */
/* Without this, the logo is left-aligned inside the full-width container */

/* Fallback: auto-margin centering */
#brx-header .brxe-logo {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Logo image: preserve proportions */
#brx-header .brxe-logo img,
#brx-header .brxe-logo svg {
  height: 60px !important;
  width: auto !important;
  display: block !important;
}
/* END-CEO-FIX-3 */

/* LOGO-CENTER-FIX */
/* Direct targeting of logo container and anchor from live HTML */
#brxe-yeqbui {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}
#brxe-cce5cf {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}
/* Fallback: any brxe-container in header containing a logo */
#brx-header .brxe-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
/* END-LOGO-CENTER-FIX */