/*
 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;
}

/* 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: gruen mit weisser Schrift (Variante P, 05.10.2026) ===
   Ersetzt die Bloecke CEO-NAV-UPDATE, CEO-FIX-3 und LOGO-CENTER-FIX.
   Das Layout kommt aus dem Bricks-Template "Header gruen", hier steht nur Farbe. */
#brx-header,
header#brx-header {
  background-color: #1F4645 !important;
  border-bottom: none !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}
#brx-header > div,
#brx-header .brxe-section,
#brx-header .brxe-container,
#brx-header .brxe-block {
  background-color: transparent !important;
  border-bottom: none !important;
}

/* Navigation */
#brx-header .bricks-nav-menu > li > a,
#brx-header .bricks-nav-menu > li > a * {
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  padding: 8px 12px !important;
  border-radius: 4px !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(255,255,255,0.14) !important;
  color: #FFFFFF !important;
}
#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; }
#brx-header .bricks-nav-menu > li.menu-item-has-children > a svg {
  width: 12px !important; height: 12px !important; flex-shrink: 0 !important;
}

/* Untermenue hell, damit der Text lesbar bleibt */
#brx-header .bricks-nav-menu .sub-menu {
  background-color: #F5F2ED !important;
  border: 1px solid #D4C4A8 !important;
  border-top: 3px solid #1F4645 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  min-width: 220px !important;
}
#brx-header .bricks-nav-menu .sub-menu li a,
#brx-header .bricks-nav-menu .sub-menu li a * {
  color: #264D4D !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
#brx-header .bricks-nav-menu .sub-menu li a:hover {
  background-color: rgba(51,102,102,0.08) !important;
  color: #336666 !important;
}

/* Letzter Menuepunkt als Kontakt-Button, Umriss statt Flaeche */
#brx-header .bricks-nav-menu > li:last-child > a {
  border: 1px solid rgba(255,255,255,0.75) !important;
  border-radius: 3px !important;
  padding: 9px 18px !important;
  margin-left: 10px !important;
  white-space: nowrap !important;
}
#brx-header .bricks-nav-menu > li:last-child > a:hover {
  background-color: #FFFFFF !important;
  color: #1F4645 !important;
}
#brx-header .brxe-button .bricks-button,
#brx-header a.bricks-button {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.75) !important;
  border-radius: 3px !important;
  padding: 10px 22px !important;
  white-space: nowrap;
}
#brx-header .brxe-button .bricks-button:hover,
#brx-header a.bricks-button:hover {
  background-color: #FFFFFF !important;
  color: #1F4645 !important;
}

/* Logo links in der Marke, nicht mittig */
#brx-header .brxe-logo { margin-left: 0 !important; margin-right: 14px !important; }
#brx-header .brxe-logo img,
#brx-header .brxe-logo svg {
  height: 72px !important; width: auto !important; display: block !important;
}

/* Mobiles Menue */
#brx-header .bricks-mobile-menu-wrapper { background-color: #1F4645 !important; }
#brx-header .bricks-mobile-menu > li > a,
#brx-header .bricks-mobile-menu > li > a *,
#brx-header .bricks-mobile-menu > li > .brx-submenu-toggle > a,
#brx-header .bricks-mobile-menu > li > .brx-submenu-toggle > button,
#brx-header .bricks-mobile-menu > li > .brx-submenu-toggle svg,
#brx-header .bricks-mobile-menu .sub-menu li a { color: #FFFFFF !important; }
#brx-header .bricks-mobile-menu .sub-menu {
  background-color: transparent !important; border: none !important; box-shadow: none !important;
}
@media (max-width: 991px) {
  #brx-header .brxe-logo img,
  #brx-header .brxe-logo svg { height: 52px !important; }
}


/* === 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; }