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

/* ── Font defaults (override Bricks Theme Styles & builder) ─────────────
 * Design tokens are injected in :root via design-tokens.json (see functions.php).
 * These rules override Bricks’ default typography so body/headings use token vars.
 * For per-element overrides in Bricks, set Typography > Font family to a Bricks
 * variable that references var(--font-family-body) or var(--font-family-heading).
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
.brx-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-base, 2rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-body, 1.4);
}

h1, h2, h3, h4, h5, h6,
.brx h1, .brx h2, .brx h3, .brx h4, .brx h5, .brx h6 {
  font-family: var(--font-family-heading);
}

input[type="checkbox"] +span > a {
  color: var(--color-link, #F99608);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── ZRM Text / Image 50:50 ─────────────────────────────────────────── */
.zrm-text-image {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.zrm-text-image > * {
  flex: 1;
  min-width: 0;
}

.zrm-text-image.image-right {
  flex-direction: row-reverse;
}

.zrm-text-image__image img {
  width: 100%;
  height: auto;
  display: block;
}

.brxe-text-link {
  text-underline-offset: 5px;
}


/* ── Random Form Styles ─────────────────────────────────────────── */
.fluentform .ff-el-group .ff-el-form-check-label {
  display: grid;
  align-items: start;
  gap: 8px;
  grid-template-columns: 18px 1fr;
}

.fluentform .ff-el-group .ff-el-form-check-label .ff-el-form-check-input {
  top: initial;
  margin: 5px 0 0 0;
}

/* ── Confirmation Modal (Fluent Forms success message) ───────────────── */
/*
 * No card wrapper in the HTML, so the card background is split between
 * __headline (top half) and __text (bottom half).
 * __background is an absolute overlay behind both.
 */
#fluentform_3_success {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

.confirmationmodal {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 1000;
}

.confirmationmodal__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.confirmationmodal__inner {
  position: relative;
  max-width: 866px;
  width: 100%;
  z-index: 1;
  padding: 64px;
  background-color: var(--color-background, #FFF7E4);
}

.confirmationmodal__headline,
.confirmationmodal__text {}

.confirmationmodal__headline {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2, 5.2rem);
  line-height: var(--line-height-heading, 1.3);
  font-weight: var(--font-weight-normal, 400);
  margin: 0 0 32px 0;
}

.confirmationmodal__text {
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-base, 2rem);
  line-height: var(--line-height-body, 1.4);
  font-weight: var(--font-weight-normal, 400);
  margin: 0;
}

/* ── Button styles (token-driven overrides for Bricks .bricks-button) ── */
.bricks-button {
  border-radius: var(--button-border-radius);
  padding: var(--button-padding-y) var(--button-padding-x);
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  transition: var(--button-transition);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* Primary */
.bricks-button.bricks-background-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}
.bricks-button.bricks-background-primary:hover {
  background-color: var(--button-primary-hover-bg);
}
.bricks-button.outline.bricks-color-primary {
  background-color: transparent;
  color: var(--button-primary-bg);
  border: 2px solid var(--button-primary-bg);
}
.bricks-button.outline.bricks-color-primary:hover {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
}

/* Secondary */
.bricks-button.bricks-background-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}
.bricks-button.bricks-background-secondary:hover {
  background-color: var(--button-secondary-hover-bg);
}
.bricks-button.outline.bricks-color-secondary {
  background-color: transparent;
  color: var(--button-secondary-bg);
  border: 2px solid var(--button-secondary-bg);
}
.bricks-button.outline.bricks-color-secondary:hover {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

/* Light */
.bricks-button.bricks-background-light {
  background-color: var(--button-light-bg);
  color: var(--button-light-text);
}
.bricks-button.bricks-background-light:hover {
  background-color: var(--button-light-hover-bg);
}
.bricks-button.outline.bricks-color-light {
  background-color: transparent;
  color: var(--button-light-text);
  border: 2px solid var(--button-light-bg);
}
.bricks-button.outline.bricks-color-light:hover {
  background-color: var(--button-light-bg);
}

/* Dark */
.bricks-button.bricks-background-dark {
  background-color: var(--button-dark-bg);
  color: var(--button-dark-text);
}
.bricks-button.bricks-background-dark:hover {
  background-color: var(--button-dark-hover-bg);
}
.bricks-button.outline.bricks-color-dark {
  background-color: transparent;
  color: var(--button-dark-bg);
  border: 2px solid var(--button-dark-bg);
}
.bricks-button.outline.bricks-color-dark:hover {
  background-color: var(--button-dark-bg);
  color: var(--button-dark-text);
}

/* Muted */
.bricks-button.bricks-background-muted {
  background-color: var(--button-muted-bg);
  color: var(--button-muted-text);
}
.bricks-button.bricks-background-muted:hover {
  background-color: var(--button-muted-hover-bg);
}
.bricks-button.outline.bricks-color-muted {
  background-color: transparent;
  color: var(--button-muted-bg);
  border: 2px solid var(--button-muted-bg);
}
.bricks-button.outline.bricks-color-muted:hover {
  background-color: var(--button-muted-bg);
  color: var(--button-muted-text);
}

/* Info */
.bricks-button.bricks-background-info {
  background-color: var(--button-info-bg);
  color: var(--button-info-text);
}
.bricks-button.bricks-background-info:hover {
  background-color: var(--button-info-hover-bg);
}
.bricks-button.outline.bricks-color-info {
  background-color: transparent;
  color: var(--button-info-bg);
  border: 2px solid var(--button-info-bg);
}
.bricks-button.outline.bricks-color-info:hover {
  background-color: var(--button-info-bg);
  color: var(--button-info-text);
}

/* Success */
.bricks-button.bricks-background-success {
  background-color: var(--button-success-bg);
  color: var(--button-success-text);
}
.bricks-button.bricks-background-success:hover {
  background-color: var(--button-success-hover-bg);
}
.bricks-button.outline.bricks-color-success {
  background-color: transparent;
  color: var(--button-success-bg);
  border: 2px solid var(--button-success-bg);
}
.bricks-button.outline.bricks-color-success:hover {
  background-color: var(--button-success-bg);
  color: var(--button-success-text);
}

/* Warning */
.bricks-button.bricks-background-warning {
  background-color: var(--button-warning-bg);
  color: var(--button-warning-text);
}
.bricks-button.bricks-background-warning:hover {
  background-color: var(--button-warning-hover-bg);
}
.bricks-button.outline.bricks-color-warning {
  background-color: transparent;
  color: var(--button-warning-bg);
  border: 2px solid var(--button-warning-bg);
}
.bricks-button.outline.bricks-color-warning:hover {
  background-color: var(--button-warning-bg);
  color: var(--button-warning-text);
}

/* Danger */
.bricks-button.bricks-background-danger {
  background-color: var(--button-danger-bg);
  color: var(--button-danger-text);
}
.bricks-button.bricks-background-danger:hover {
  background-color: var(--button-danger-hover-bg);
}
.bricks-button.outline.bricks-color-danger {
  background-color: transparent;
  color: var(--button-danger-bg);
  border: 2px solid var(--button-danger-bg);
}
.bricks-button.outline.bricks-color-danger:hover {
  background-color: var(--button-danger-bg);
  color: var(--button-danger-text);
}

/* ── Footer ─────────────────────────────────────────────────────────────
 * Layout-only styles for the Bricks footer template (karlsberg-footer).
 * Colors come from design tokens; the decorative star is a background
 * image positioned bottom-right. Section padding is handled in Bricks.
 */
.kb-footer {
  position: relative;
  overflow: hidden;
  color: var(--color-neutral-0, #fefefe);
  background-color: var(--color-primary-200, #00417d);
  background-image:
    url('assets/img/karlsberg-star.svg'),
    url('assets/img/karlsberg_paper_texture.png');
  background-repeat: no-repeat, repeat;
  background-position: right -4rem bottom -2rem, 0 0;
  background-size: clamp(280px, 32vw, 520px) auto, 600px 600px;
  background-blend-mode: normal, multiply;
}

.kb-footer a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.kb-footer a:hover,
.kb-footer a:focus-visible {
  opacity: 0.75;
}

/* Outer grid: social on the left fills the row, the main menu hugs the
   right edge of the footer and expands leftward as more columns are added.
   The decor column from earlier versions is hidden defensively so legacy
   imports of karlsberg-footer.bricks.json keep working without edits. */
.kb-footer__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: var(--spacing-2xl, 3rem);
  align-items: start;
}

.kb-footer__col-decor {
  display: none;
}

.kb-footer__col-social .kb-footer__heading {
  margin: 0 0 var(--spacing-md, 1rem);
  font-family: var(--font-family-heading, inherit);
  font-size: var(--font-size-h4, 2.4rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-heading, 1.3);
  color: var(--color-primary-0, #dfcabb);
}

/* Main footer menu: render the WP nav menu (footer_main) as a horizontal
   row of right-aligned columns. Each top-level <li> becomes a column with
   the parent <a> as heading and the .sub-menu as a vertical list below.

   Why so much specificity + !important? Bricks ships its own nav-menu
   CSS (e.g. `display: flex; width: 100%` on every <a>, `margin: 0 0 0 30px`
   on every top-level <li>, `display: none !important` on closed sub-menus)
   that we have to beat with both higher specificity AND !important. The
   leading `.kb-footer` anchor + `.menu-item` step give us 0,4,0+ vs.
   Bricks' 0,2,2 / 0,4,0 selectors, which is enough to win.            */

.kb-footer .kb-footer__menu-main .bricks-nav-menu {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-footer .kb-footer__menu-main .bricks-nav-menu > .menu-item {
  margin: 0 !important;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 120px;
}

/* Heading style for top-level items. Bricks wraps the <a> of items WITH
   children in <div class="brx-submenu-toggle">…</div> for the dropdown
   caret, so we have to target both the direct case (item without children)
   and the wrapped case. Otherwise level-1 items with submenus would lose
   their heading look — or, worse, disappear if .brx-submenu-toggle itself
   is hidden. */
.kb-footer .kb-footer__menu-main .bricks-nav-menu > .menu-item > a,
.kb-footer .kb-footer__menu-main .bricks-nav-menu > .menu-item > .brx-submenu-toggle > a {
  display: block !important;
  width: auto !important;
  margin: 0 0 var(--spacing-lg, 1.5rem) !important;
  padding: 0 !important;
  font-family: var(--font-family-heading, inherit);
  font-size: var(--font-size-h4, 2.4rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-heading, 1.3);
  color: var(--color-primary-0, #dfcabb);
  pointer-events: none;
  cursor: default;
}

/* Neutralise the toggle wrapper so it doesn't add layout of its own —
   it exists only to host the caret button (hidden below). */
.kb-footer .kb-footer__menu-main .bricks-nav-menu > .menu-item > .brx-submenu-toggle {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
}

.kb-footer .kb-footer__menu-main .bricks-nav-menu .menu-item .sub-menu {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  white-space: normal !important;
  line-height: inherit !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: var(--spacing-md, 1rem);
  list-style: none;
}

.kb-footer .kb-footer__menu-main .bricks-nav-menu .sub-menu > li {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  list-style: none;
}

.kb-footer .kb-footer__menu-main .bricks-nav-menu .sub-menu > li > a {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-family-body, inherit);
  font-size: var(--font-size-text-sm, 1.6rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-body, 1.4);
  color: inherit;
}

/* Hide Bricks' caret button + svg and the mobile-menu hamburger toggle.
   We must NOT hide .brx-submenu-toggle itself — that <div> wraps the
   top-level <a> for items that have a submenu, so hiding it would
   hide the level-1 link as well. Only the inner <button>/<svg> need
   to go. */
.kb-footer .kb-footer__menu-main .brx-submenu-toggle > button,
.kb-footer .kb-footer__menu-main .menu-item-icon,
.kb-footer .kb-footer__menu-main .bricks-mobile-menu-toggle {
  display: none !important;
}

.kb-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--spacing-lg, 1.5rem);
  margin-top: var(--spacing-3xl, 4rem);
}

/* Footer nav menus should always render as plain expanded lists. This
   safeguards already-imported Bricks templates where the Nav Menu element
   might still have a mobile breakpoint saved and would otherwise replace
   the normal nav with Bricks' burger/offcanvas wrapper. */
.kb-footer .kb-footer__menu-main .bricks-nav-menu-wrapper,
.kb-footer .kb-footer__menu-legal .bricks-nav-menu-wrapper {
  display: block !important;
  visibility: visible !important;
}

.kb-footer .kb-footer__menu-main .bricks-mobile-menu-toggle,
.kb-footer .kb-footer__menu-main .bricks-mobile-menu-wrapper,
.kb-footer .kb-footer__menu-main .bricks-mobile-menu-overlay,
.kb-footer .kb-footer__menu-legal .bricks-mobile-menu-toggle,
.kb-footer .kb-footer__menu-legal .bricks-mobile-menu-wrapper,
.kb-footer .kb-footer__menu-legal .bricks-mobile-menu-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.kb-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 1.5rem);
}

.kb-footer__brand img {
  display: block;
  max-width: 200px;
  height: auto;
}

.kb-footer__menu-legal .bricks-nav-menu,
.kb-footer__menu-legal > ul,
.kb-footer__menu-legal .menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-text-xs, 1.4rem);
}

.kb-footer__menu-legal li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-footer__copy {
  font-size: var(--font-size-text-xs, 1.4rem);
  opacity: 0.85;
  margin: 0;
}

@media (max-width: 991px) {
  .kb-footer__grid {
    grid-template-columns: 1fr;
  }
  .kb-footer .kb-footer__menu-main .bricks-nav-menu {
    justify-content: flex-start;
  }
}

/* ── Mobile portrait ─────────────────────────────────────────────────
 * Reorder:
 *   1) Karlsberg logo
 *   2) "Folge Karlsberg auf" + Social icons
 *   3) Main category menu (stacked vertically)
 *   4) Copyright
 *   5) Legal menu
 *
 * Trick: the two wrapper rows (.kb-footer__grid, .kb-footer__bottom)
 * and the brand sub-wrapper (.kb-footer__brand) all become display:contents
 * so the actual content blocks (col-social, col-main, logo, legal, copy)
 * promote to direct flex children of the footer container. Then plain
 * `order` puts them in the requested sequence.
 */
@media (max-width: 640px) {
  .kb-footer__container,
  .kb-footer > .brxe-block {
    display: flex !important;
    flex-direction: column !important;
    row-gap: var(--spacing-3xl, 4rem);
  }

  .kb-footer__grid,
  .kb-footer__bottom,
  .kb-footer__brand {
    display: contents;
  }

  .kb-footer__logo,
  .kb-footer__brand > .brxe-image {
    order: 1;
  }
  .kb-footer__col-social { order: 2; }
  .kb-footer__col-main   { order: 3; }
  .kb-footer__copy       { order: 4; }
  .kb-footer__menu-legal {
    order: 5;
    /* Legal sits directly under the copyright with just 8px breathing
       room — cancel the container's row-gap with a matching negative
       margin so the visible distance becomes 8px instead of the global
       footer gap (--spacing-3xl). */
    margin-top: calc(8px - var(--spacing-3xl, 4rem));
  }

  /* Main menu: vertical stack of category columns */
  .kb-footer .kb-footer__menu-main .bricks-nav-menu {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--spacing-2xl, 3rem);
  }

  /* Star decoration stays prominent in the lower half */
  .kb-footer {
    background-size: clamp(220px, 70vw, 400px) auto, 600px 600px;
    background-position: right -2rem bottom 6rem, 0 0;
  }
}