/**
 * Theme CSS file
 *
 * Reorganized: rules are grouped into explicit sections with short
 * explanations. Property order inside rules is consistent for readability.
 *
 * @package miq-bildung
 */

/* ==========================================================================
   Variables
   - CSS custom properties used by utilities and layout helpers
   ========================================================================== */
:root {
  --g-content: calc((100vw - var(--w-content)) / 2);
  --g-content-safe: max(1rem, var(--g-content));
  --g-wide: calc((100vw - var(--w-wide)) / 2);
  --g-wide-safe: max(1rem, var(--g-wide));
  --pad: 1rem;
  --w-content: clamp(min(54rem, calc(100% - (2 * var(--pad)))), 92vw, 71rem);
  --w-wide: clamp(min(60rem, calc(100% - (2 * var(--pad)))), 96vw, 75rem);

  --default-text-color: var(--wp--preset--color--indigo-xona);
  --accent-color: var(--wp--preset--color--golden-dream);
  --accent-secondary-color: var(--wp--preset--color--business-yellow);
  --accent-text-color: var(---default-text-color);

  --menu-selected-link-color: var(--wp--preset--color--guardsman-red);
  --button-hover-color: var(--menu-selected-link-color);
  --button-border-color: var(--default-text-color);

  --button-bg-colored-color: var(--accent-color);
  --button-bg-colored-hover-color: var(--accent-secondary-color);
  --button-bg-colored-font-color: var(--accent-text-color);
}

/* ==========================================================================
   Utilities: Centered containers
   - `.container-wide` and `.container-content` center content and set widths
   ========================================================================== */
.container-content {
  margin-inline: auto;
  width: var(--w-content);
}
.container-wide {
  margin-inline: auto;
  width: var(--w-wide);
}

.block-full-width {
  min-width: 100%;
}

strong,
b {
  font-weight: 500;
}

.miq-vertical-card :last-child {
  margin-top: auto;
  margin-bottom: 0;
}

.miq-vertical-card {
  height: 100%;
}

.wp-block-query-pagination .page-numbers {
  padding: 0.1em 0.4em;
  border: 1px solid;
}

.wp-block-query-pagination .page-numbers:hover {
  border-color: var(--default-text-color);
  color: var(--menu-selected-link-color);
}

.wp-block-query-pagination .page-numbers.current {
  border-color: var(--default-text-color);
  background-color: var(--button-bg-colored-color);
  color: var(--button-bg-colored-font-color);
}

.wp-block-query-pagination .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots:hover {
  background-color: transparent;
  border: none;
}

p:not([class]) > a:not([class]),
p[role="document"] > a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--guardsman-red);
}

/** ==========================================================================
   Utilities: MIQ Accent Color
   - Utility class to set an accent color for components
   ========================================================================== */

body.miq-has-accent.miq-accent-golden-dream,
.miq-follow-accent .miq-has-accent.miq-accent-golden-dream {
  --accent-color: var(--wp--preset--color--golden-dream);
  --accent-secondary-color: var(--wp--preset--color--business-yellow);
  --accent-text-color: var(--wp--preset--color--indigo-xona);

  --menu-selected-link-color: var(--accent-color);
  --button-hover-color: var(--accent-color);

  --button-bg-colored-color: var(--accent-color);
  --button-bg-colored-hover-color: var(--accent-secondary-color);
  --button-bg-colored-font-color: var(--accent-text-color);
}

body.miq-has-accent.miq-accent-digital-red,
.miq-follow-accent .miq-has-accent.miq-accent-digital-red {
  --accent-color: var(--wp--preset--color--digital-red);
  --accent-secondary-color: var(--wp--preset--color--strong-red);
  --accent-text-color: var(--wp--preset--color--winter-snow);

  --menu-selected-link-color: var(--accent-color);
  --button-hover-color: var(--accent-color);

  --button-bg-colored-color: var(--accent-color);
  --button-bg-colored-hover-color: var(--accent-secondary-color);
  --button-bg-colored-font-color: var(--accent-text-color);
}

body.miq-has-accent.miq-accent-brandeis-blue,
.miq-follow-accent .miq-has-accent.miq-accent-brandeis-blue {
  --accent-color: var(--wp--preset--color--brandeis-blue);
  --accent-secondary-color: var(--wp--preset--color--perfect-blue);
  --accent-text-color: var(--wp--preset--color--newspaper);

  --menu-selected-link-color: var(--accent-color);
  --button-hover-color: var(--accent-color);

  --button-bg-colored-color: var(--accent-color);
  --button-bg-colored-hover-color: var(--accent-secondary-color);
  --button-bg-colored-font-color: var(--accent-text-color);
}

body.miq-has-accent.miq-accent-cadmium-orange-xona,
.miq-follow-accent .miq-has-accent.miq-accent-cadmium-orange-xona {
  --accent-color: var(--wp--preset--color--cadmium-orange-xona);
  --accent-secondary-color: var(--wp--preset--color--lava-orange);
  --accent-text-color: var(--wp--preset--color--winter-snow);

  --menu-selected-link-color: var(--accent-color);
  --button-hover-color: var(--accent-color);

  --button-bg-colored-color: var(--accent-color);
  --button-bg-colored-hover-color: var(--accent-secondary-color);
  --button-bg-colored-font-color: var(--accent-text-color);
}

body.miq-has-accent.miq-accent-full-green,
.miq-follow-accent .miq-has-accent.miq-accent-full-green {
  --accent-color: var(--wp--preset--color--full-green);
  --accent-secondary-color: var(--wp--preset--color--sporty-green);
  --accent-text-color: var(--wp--preset--color--indigo-xona);

  --menu-selected-link-color: var(--accent-secondary-color);
  --button-hover-color: var(--accent-color);

  --button-bg-colored-color: var(--accent-secondary-color);
  --button-bg-colored-hover-color: var(--accent-color);
  --button-bg-colored-font-color: var(--wp--preset--color--winter-snow);
}

body.miq-has-accent.miq-accent-pizazz,
.miq-follow-accent .miq-has-accent.miq-accent-pizazz {
  --accent-color: var(--wp--preset--color--pizazz);
  --accent-secondary-color: var(--wp--preset--color--fulvous);
  --accent-text-color: var(--wp--preset--color--winter-snow);

  --menu-selected-link-color: var(--accent-color);
  --button-hover-color: var(--accent-color);

  --button-bg-colored-color: var(--accent-color);
  --button-bg-colored-hover-color: var(--accent-secondary-color);
  --button-bg-colored-font-color: var(--accent-text-color);
}

body.miq-has-accent.miq-accent-boho-yellow,
.miq-follow-accent .miq-has-accent.miq-accent-boho-yellow {
  --accent-color: var(--wp--preset--color--boho-yellow);
  --accent-secondary-color: var(--wp--preset--color--eldorado);
  --accent-text-color: var(--wp--preset--color--indigo-xona);

  --menu-selected-link-color: var(--accent-secondary-color);
  --button-hover-color: var(--accent-color);

  --button-bg-colored-color: var(--accent-color);
  --button-bg-colored-hover-color: var(--accent-secondary-color);
  --button-bg-colored-font-color: var(--accent-text-color);
}

body.miq-has-accent.miq-accent-biscuit,
.miq-follow-accent .miq-has-accent.miq-accent-biscuit {
  --accent-color: var(--wp--preset--color--biscuit);
  --accent-secondary-color: var(--wp--preset--color--sandpaper);
  --accent-text-color: var(--wp--preset--color--indigo-xona);

  --menu-selected-link-color: var(--accent-secondary-color);
  --button-hover-color: var(--accent-color);

  --button-bg-colored-color: var(--accent-color);
  --button-bg-colored-hover-color: var(--accent-secondary-color);
  --button-bg-colored-font-color: var(--accent-text-color);
}

body.miq-has-accent.miq-accent-bermuda-bay,
.miq-follow-accent .miq-has-accent.miq-accent-bermuda-bay {
  --accent-color: var(--wp--preset--color--bermuda-bay);
  --accent-secondary-color: var(--wp--preset--color--poison-dart-frog);
  --accent-text-color: var(--wp--preset--color--winter-snow);

  --menu-selected-link-color: var(--accent-secondary-color);
  --button-hover-color: var(--accent-color);

  --button-bg-colored-color: var(--accent-color);
  --button-bg-colored-hover-color: var(--accent-secondary-color);
  --button-bg-colored-font-color: var(--accent-text-color);
}

/** ==========================================================================
   Utilities: MIQ Button
   - Custom button style used in various places
   ========================================================================== */
.miq-button {
  border-radius: 1em;

  padding: 0.2em var(--wp--preset--spacing--60);
  text-decoration: none;
}

.wp-element-button,
.miq-button {
  background-color: transparent;
  border: 1px solid var(--button-border-color);
}

.wp-element-button:hover,
.miq-button:hover {
  color: var(--button-hover-color);
}

.miq-button.miq-button-colored-border,
.wp-element-button.miq-button-colored-border {
  border-color: var(--accent-color);
}

.miq-button.miq-button-colored-border:hover,
.wp-element-button.miq-button-colored-border:hover {
  color: var(--accent-color);
}

.miq-button.miq-button-colored-background,
.wp-element-button.miq-button-colored-background {
  border-color: var(--button-bg-colored-color);
  background-color: var(--button-bg-colored-color);
  color: var(--button-bg-colored-font-color);
}

.miq-button.miq-button-colored-background:hover,
.wp-element-button.miq-button-colored-background:hover {
  border-color: var(--button-bg-colored-hover-color);
  background-color: var(--button-bg-colored-hover-color);
  color: var(--button-bg-colored-font-color);
}

.miq-button.miq-button-wide,
.wp-element-button.miq-button-wide,
.wp-block-button.miq-button-wide > a {
  padding-left: clamp(0.5em, 6.5vw, 6.5em);
  padding-right: clamp(0.5em, 6.5vw, 6.5em);
}

.miq-button.miq-button-same-width,
.wp-element-button.miq-button-same-width {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.wp-element-button.miq-button-block,
p.miq-button-block > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 2 / 1;
  box-sizing: border-box;
  background-color: var(--wp--preset--color--newspaper);
  border: none;
  border-radius: 1em;
}
.wp-element-button.miq-button-block:hover,
p.miq-button-block > a:hover {
  border: 1px solid var(--button-hover-color);
  color: var(--button-hover-color);
}

.miq-hero-link {
  text-decoration: underline;
  font-weight: 500;
  color: var(--button-bg-colored-color);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.miq-hero-link:hover {
  text-decoration: underline;
  color: var(--button-bg-colored-hover-color);
}

.miq-hero-link::after {
  content: "";
  flex-shrink: 0;
  width: 2.8em;
  height: 2.8em;
  background-color: var(--default-text-color);
  -webkit-mask-image: url("../icons/right-arrow.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../icons/right-arrow.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: margin-left 0.3s;
}

.miq-hero-link:hover::after {
  margin-left: 1em;
}

@media (max-width: 37.5em) {
  .miq-hero-link::after {
    display: none;
  }
}

.miq-image-70-px {
  max-width: 4.375rem;
  max-height: 4.375rem;
}

.miq-image-80-px {
  max-width: 5rem;
  max-height: 5rem;
}

/* ==========================================================================
   Progress Steps
   - Styles used by the progress steps in courses pages
   ========================================================================== */
.progress-steps {
  display: grid;
  gap: clamp(1em, 2vw, 2em) !important;

  --progres-step-polygon: polygon(
    0 0,
    calc(100% - 2.5em) 0,
    100% 50%,
    calc(100% - 2.5em) 100%,
    0 100%,
    1em 50%
  );

  --progres-first-step-polygon: polygon(
    0 0,
    calc(100% - 2.5em) 0,
    100% 50%,
    calc(100% - 2.5em) 100%,
    0 100%,
    0 0
  );
}
.progress-steps .step {
  padding: 1px 1.5px;
  text-align: center;
  background-color: currentColor;
  clip-path: var(--progres-step-polygon);
}
.progress-steps .step .step-inner {
  padding: 0.5em 1em;
  text-align: center;
  background-color: var(--wp--preset--color--winter-snow);
  clip-path: var(--progres-step-polygon);
}
.progress-steps .step:first-child {
  padding-left: 1px;
  clip-path: var(--progres-first-step-polygon);
}
.progress-steps .step:first-child .step-inner {
  clip-path: var(--progres-first-step-polygon);
}

/* ==========================================================================
   Top Bar
   - Styles used by the top-bar template part and small helpers
   ========================================================================== */
.site-header {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 999999;
  width: 100%;
}

.top-bar {
  background-color: var(--accent-color);
  color: var(--accent-text-color);
}
.top-bar a {
  color: var(--accent-text-color);
}

.top-bar-item {
  padding: 0.6em 1.1em;
  font-weight: 600;
}

.top-bar-item.hide-on-mobile {
  overflow: hidden;
  white-space: nowrap;
}

.top-bar-item.top-bar-main-item {
  padding-left: var(--g-wide-safe);
  padding-right: clamp(1em, 5vw, 3.5em) !important;
  background-color: var(--accent-secondary-color);
}

/* Top-bar: tablet adjustments */
@media (max-width: 64em) {
  .top-bar-item.hide-on-mobile {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 1.5rem;
  }
}

/* Top-bar: mobile hide */
@media (max-width: 37.5em) {
  .top-bar-item.hide-on-mobile {
    display: none !important;
  }
}

/* ==========================================================================
   Navigation / Menu
   - Main navigation bar, submenu grid and responsive hamburger tweaks
   ========================================================================== */
.navigation-menu-wrapper {
  background-color: var(--wp--preset--color--newspaper);
}
.navigation-menu {
  align-items: center;
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: 6.625rem;
}

/* Logo sizing: keep image sharp and proportional */
.navigation-menu .wp-block-site-logo img {
  height: auto;
  transform: translateZ(0); /* iOS Safari anti-blur */
  width: clamp(6rem, 9vw, 9rem);
}

.navigation-menu .wp-block-navigation .current-menu-item > a,
.navigation-menu .wp-block-navigation .current-menu-ancestor > a {
  color: var(--menu-selected-link-color);
}

/* Submenu container: two-column grid on wide screens */
.navigation-menu
  .wp-block-navigation-item
  > .wp-block-navigation__submenu-container {
  border: none;
  border-radius: 0 0 1em 1em;
  display: grid;
  gap: 1rem 2rem; /* row gap / column gap */
  padding: 2.3em 1.25rem 1.25rem 1.25rem;
  grid-template-columns: repeat(2, minmax(13rem, 1fr));
  transform: translateX(35%);
  text-wrap: nowrap;
}

/* Submenu container: one-column grid when there is only one child */
.navigation-menu
  .wp-block-navigation-item
  > .wp-block-navigation__submenu-container:has(> li:only-child) {
  grid-template-columns: 1fr;
}

/* Submenu container: left shifting to righ if it is the last item in the menu */
.navigation-menu
  .wp-block-navigation-item:last-child
  > .wp-block-navigation__submenu-container {
  transform: translateX(5%);
}

/* Submenu item cells styling */
.navigation-menu
  .wp-block-navigation-item
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item {
  background-color: var(--wp--preset--color--winter-snow);
  border-radius: 1em;
  margin: 0; /* WP sometimes adds margins */
}

/* Submenu responsive: stack into single column */
@media (max-width: 75em) {
  .navigation-menu
    .wp-block-navigation-item
    > .wp-block-navigation__submenu-container {
    grid-template-columns: 1fr;
    transform: none;
  }
}

/* Theme variant: change submenu background / text for specific background color */
.navigation-menu-wrapper
  .navigation-menu
  .wp-block-navigation-item
  > .wp-block-navigation__submenu-container,
.navigation-menu-wrapper
  .navigation-menu
  .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--newspaper);
  color: var(--default-text-color);
}

/* Positioning context for responsive hamburger */
.navigation-menu .wp-block-navigation {
  position: relative;
  width: 100%;
}

/* Place hamburger on the far right */
.navigation-menu .wp-block-navigation__responsive-container-open {
  inset-inline-end: 0; /* right */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3em;
  height: 2.5em;
  z-index: 5;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='6' width='16' height='1.5'/%3E%3Crect x='4' y='11.25' width='16' height='1.5'/%3E%3Crect x='4' y='16.5' width='16' height='1.5'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: mask-image;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.navigation-menu .wp-block-navigation__responsive-container-open svg {
  display: none;
}

/* ==========================================================================
   Bar Icons
   - Small icon system used in top-bar, footer and other compact places
   - Uses pseudo-elements so markup stays semantic
   ========================================================================== */
/* Icons that behave like text color (currentColor) using SVG masks */

.bar-icon {
  align-items: center;
  display: flex;
  gap: 0.4em;
  color: currentColor;
}

/* Shared icon box for both pseudo-element hosts */
.bar-icon::before,
.bar-icon > a::before {
  content: "";
  flex-shrink: 0;
  display: inline-block;

  /* This is what gets tinted */
  background-color: currentColor;

  /* Mask setup (use SVG as the alpha mask) */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: contain;
}

/* When the item contains a link, the link hosts the icon for accessible focus */
.bar-icon:has(> a)::before {
  content: none;
}

.bar-icon > a {
  align-items: center;
  display: flex;
  gap: 0.4em;
}

/* Named icons: set the mask-image instead of background-image */
.bar-icon.icon-email::before,
.bar-icon.icon-email > a::before {
  -webkit-mask-image: url("../icons/email.svg");
  mask-image: url("../icons/email.svg");
}

.bar-icon.icon-facebook::before,
.bar-icon.icon-facebook > a::before {
  -webkit-mask-image: url("../icons/facebook.svg");
  mask-image: url("../icons/facebook.svg");
}

.bar-icon.icon-instagram::before,
.bar-icon.icon-instagram > a::before {
  -webkit-mask-image: url("../icons/instagram.svg");
  mask-image: url("../icons/instagram.svg");
}

.bar-icon.icon-phone::before,
.bar-icon.icon-phone > a::before {
  -webkit-mask-image: url("../icons/phone.svg");
  mask-image: url("../icons/phone.svg");
}

.bar-icon.icon-pin::before,
.bar-icon.icon-pin > a::before {
  -webkit-mask-image: url("../icons/pin.svg");
  mask-image: url("../icons/pin.svg");
}

.bar-icon.icon-watch::before,
.bar-icon.icon-watch > a::before {
  -webkit-mask-image: url("../icons/watch.svg");
  mask-image: url("../icons/watch.svg");
}

.bar-icon.icon-youtube::before,
.bar-icon.icon-youtube > a::before {
  -webkit-mask-image: url("../icons/youtube.svg");
  mask-image: url("../icons/youtube.svg");
}

.bar-icon::before,
.bar-icon > a::before {
  height: 1.875em;
  width: 2.875em;
}

/* ==========================================================================
   Footer / Bottom Grid
   - Simple responsive grid for footer columns (1–3 columns)
   ========================================================================== */
.footer {
  background-color: var(--accent-color);
}

.bottom-grid {
  max-width: var(--wp--style--global--wide-size);
  padding-top: var(--wp--preset--spacing--70);
  padding-right: 0;
  padding-bottom: var(--wp--preset--spacing--70);
  padding-left: 0;
}

.bottom-grid .bottom-grid-cell {
  padding-top: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--30);
}

.bottom-grid,
.bottom-grid a {
  color: var(--accent-text-color);
  border-color: var(--accent-text-color);
}

.bottom-grid .wp-block-button a:hover {
  color: var(--wp--preset--color--guardsman-red);
}

/*
  WordPress Block Theme (v3) override-safe responsive grids
  --------------------------------------------------------
  Problem:
  - WP may output a generated selector like:
      .wp-container-core-group-is-layout-xxxx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  - That selector can override a simple `.grid { ... }` rule.

  Strategy:
  - Use a utility class on the same element (e.g. `class="grid grid--max-3"`)
  - Increase specificity by targeting elements that WP marks as layout grids:
      .is-layout-grid.grid
    which beats `.wp-container-...` in many cases.
  - Also include a fallback for when WP changes internals:
      .grid.grid
    (duplicated class = higher specificity, still readable)
  - Avoid variables inside @media (Chrome limitation) — but variables *in properties* are fine.
*/

/* Base utility */
.grid {
  --grid-cols: 1; /* mobile-first */
  --grid-gap: 0rem;
  display: grid;
  gap: var(--grid-gap);
  justify-content: center;
  margin-inline: auto;

  /* Set the desired columns via a variable */
  --grid-template: repeat(var(--grid-cols), minmax(0, 1fr));

  --grid-cols-one-less: calc(var(--grid-cols) - 1);
  --grid-wider-first: minmax(0, 1.1fr)
    repeat(var(--grid-cols-one-less), minmax(0, 1fr));
  --grid-wider-last: repeat(var(--grid-cols-one-less), minmax(0, 1fr))
    minmax(0, 1.1fr);
}

.grid--wider-first {
  --grid-template: var(--grid-wider-first);
}

.grid--wider-last {
  --grid-template: var(--grid-wider-last);
}

/*
  The actual override:
  - We redeclare grid-template-columns with higher specificity
  - Prefer `.is-layout-grid.grid` because WP adds `.is-layout-grid` to grid layout blocks.
  - Also provide `.grid.grid` as a generic "specificity bump" fallback (future-proof-ish).
*/
.grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid,
.grid.wp-block-group-is-layout-grid.wp-block-group-is-layout-grid.wp-block-group-is-layout-grid.wp-block-group-is-layout-grid,
.grid {
  grid-template-columns: var(--grid-template);
}

/* Optional gap helpers */
.grid--gap-sm {
  --grid-gap: 0.5rem;
}
.grid--gap-md {
  --grid-gap: 1rem;
}
.grid--gap-lg {
  --grid-gap: 1.5rem;
}

.grid--left-swap {
  order: 2;
}

.grid--right-swap {
  order: 1;
}

/*
  Rem breakpoints (no CSS vars in @media — Chrome)
  18.75rem = 300px, 37.5rem = 600px, 60rem = 960px, 75rem = 1200px (at 16px root)
*/

/* < 300px: Reset to normal template when only 1 column */
@media (max-width: 37.49rem) {
  .grid--wider-first,
  .grid--wider-last {
    --grid-template: repeat(1, minmax(0, 1fr));
  }
}

/** >= 300px: allow 2 columns if max = 5 */
@media (min-width: 18.75rem) {
  .grid--max-2 {
    --grid-cols: 1;
  }

  .grid--max-5 {
    --grid-cols: 2;
  }
}

/* >= 600px: allow 2 columns if max >= 2 */
@media (min-width: 37.5rem) {
  .grid--max-2,
  .grid--max-3,
  .grid--max-4 {
    --grid-cols: 2;
  }
  .grid--max-5 {
    --grid-cols: 3;
  }

  .grid--max-2 > .grid--left-swap {
    order: 1;
  }

  .grid--max-2 > .grid--right-swap {
    order: 2;
  }
}

/* >= 960px: allow 3 columns if max = 3 */
@media (min-width: 60rem) {
  .grid--max-3 {
    --grid-cols: 3;
  }
}

/* >= 1200px: allow full columns if max >= 4 */
@media (min-width: 75rem) {
  .grid--max-4 {
    --grid-cols: 4;
  }
  .grid--max-5 {
    --grid-cols: 5;
  }
}

/** * ==========================================================================
 * Special Icon Buttons
 * - Small icon buttons for social media links
 * ========================================================================== */
.miq-icon .wp-element-button {
  border: none;
}

/* size + remove default button padding */
.miq-icon .wp-block-button__link {
  width: 2em;
  height: 2em;
  padding: 0;
  background: transparent;
  color: currentColor;
  vertical-align: middle;
}

.miq-icon .wp-block-button__link[href="#"] {
  pointer-events: none;
  cursor: text;
}

/* draw icon (generic) */
.miq-icon .wp-block-button__link::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

/* icon mapping */
.miq-icon .icon-instagram {
  --icon: url("../icons/instagram.svg");
}
.miq-icon .icon-facebook {
  --icon: url("../icons/facebook.svg");
}
.miq-icon .icon-youtube {
  --icon: url("../icons/youtube.svg");
}
.miq-icon .icon-focus {
  --icon: url("../icons/focus.svg");
}
.miq-icon .icon-certificate {
  --icon: url("../icons/certificate.svg");
}
.miq-icon .icon-graduation {
  --icon: url("../icons/graduation.svg");
}
.miq-icon .icon-social-care {
  --icon: url("../icons/social-care.svg");
}
.miq-icon .icon-phone {
  --icon: url("../icons/phone.svg");
}
.miq-icon .icon-email {
  --icon: url("../icons/email.svg");
}
.miq-icon .icon-pin {
  --icon: url("../icons/pin.svg");
}
.miq-icon .icon-watch {
  --icon: url("../icons/watch.svg");
}
.miq-icon .icon-gear {
  --icon: url("../icons/gear.svg");
}
.miq-icon .icon-helping {
  --icon: url("../icons/helping.svg");
}
.miq-icon .icon-job-interview {
  --icon: url("../icons/job-interview.svg");
}
.miq-icon .icon-review {
  --icon: url("../icons/review.svg");
}
.miq-icon .icon-technical-support {
  --icon: url("../icons/technical-support.svg");
}
.miq-icon .icon-toolbox {
  --icon: url("../icons/toolbox.svg");
}
.miq-icon .icon-checklist {
  --icon: url("../icons/checklist.svg");
}
.miq-icon .icon-checkmark {
  --icon: url("../icons/checkmark.svg");
}
.miq-icon .icon-communication {
  --icon: url("../icons/communication.svg");
}
.miq-icon .icon-conversation {
  --icon: url("../icons/conversation.svg");
}
.miq-icon .icon-proposal {
  --icon: url("../icons/proposal.svg");
}

/* hide label (sr-only) */
.miq-icon .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/** * ==========================================================================
 * Home Hero Block
 * - Styles for the custom "Home Hero" block
 * ========================================================================== */

/* spacing for the whole section */
.home-hero {
  margin-top: var(--wp--preset--spacing--80);
  margin-bottom: var(--wp--preset--spacing--80);
}

.home-hero .grid {
  gap: var(--wp--preset--spacing--30);
}

.home-hero .home-hero-card {
  border: 1px solid;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  padding-top: var(--wp--preset--spacing--20);
  padding-right: var(--wp--preset--spacing--20);
  padding-bottom: var(--wp--preset--spacing--40);
  padding-left: var(--wp--preset--spacing--20);
}

.home-hero .home-hero-card .wp-block-post-featured-image {
  height: auto;
  width: 80%;
}

/* Consume it everywhere */
.home-hero .miq-has-accent .home-hero-card {
  border-color: var(--accent-color);
}

.home-hero .miq-has-accent .wp-block-read-more:hover {
  color: var(--menu-selected-link-color);
}

/** * ==========================================================================
 * Middle Navigator Block
 * - Styles for the middle navigator block
 * ========================================================================== */
.middle-navigator {
  margin-top: var(--wp--preset--spacing--70);
  margin-bottom: var(--wp--preset--spacing--70);
  padding-top: var(--wp--preset--spacing--70);
  padding-bottom: var(--wp--preset--spacing--70);
  background-color: var(--wp--preset--color--newspaper);
}
.middle-navigator .middle-navigator-card {
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
}
.middle-navigator .middle-navigator-card img {
  max-height: 9.625rem;
  width: auto;
}
.middle-navigator .miq-has-accent a:hover {
  color: var(--menu-selected-link-color);
}

/** * ==========================================================================
 * Red Tick Lists
 * - Lists with red tick icons as bullet points
 * ========================================================================== */
.has-red-tick {
  list-style: none;
  padding-left: 1.5em;
}

.has-red-tick li {
  position: relative;
}

.has-red-tick li::before {
  content: "";
  position: absolute;
  left: -1.5em;
  top: 0.35em;
  width: 1em;
  height: 1em;
  background-color: var(--wp--preset--color--guardsman-red);

  -webkit-mask: url("../icons/tick.svg") no-repeat center / contain;
  mask: url("../icons/tick.svg") no-repeat center / contain;
}

/** * ==========================================================================
 * Funding Disclaimer Box
 * - Styles for the funding disclaimer box
 * ========================================================================== */

.funding-disclaimer-wrapper p {
  font-weight: 300;
  font-style: normal;
}

.funding-disclaimer,
.funding-disclaimer.is-layout-grid {
  gap: 0.5em;
  border: 1px solid currentColor;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  padding: 2em 1em;
}

.funding-disclaimer .external-link {
  overflow: hidden;
}

.external-link .wp-element-button {
  border: none;
  padding: 0.5em;
}

.external-link .wp-element-button img {
  width: auto;
  max-height: 4.6em;
  max-width: 12em;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/** * ==========================================================================
 * Info Schedule Location Block
 * - Styles for the custom "Info Schedule Location" block
 * ========================================================================== */

.miq-info-wrapper {
  margin-top: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--50);
}

.miq-info-wrapper .miq-info-grid {
  border: 1px solid;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

.miq-info-wrapper .miq-info-row {
  padding-top: var(--wp--preset--spacing--60);
  padding-right: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);
  padding-left: var(--wp--preset--spacing--60);
}

.miq-info-wrapper .miq-info-text {
  row-gap: 0;
}

.miq-info-wrapper .miq-info-body {
  margin-bottom: 1em;
}

/** * ==========================================================================
 * About Us Block
 * - Styles for the custom "About Us" block
 * ========================================================================== */
.miq-about-us {
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);
}

.miq-about-us .miq-about-us-inner {
  font-style: normal;
  font-weight: 300;
}

/* Text spacing */
.miq-about-us .miq-about-us-text {
  padding: var(--wp--preset--spacing--50);
}

/* Bottom section */
.miq-four-option-block {
  width: 80%;
}
.miq-four-option-block .miq-four-option-item .miq-icon {
  color: var(--menu-selected-link-color);
}
.miq-four-option-block .miq-four-option-item .miq-four-option-item-heading {
  font-style: normal;
  font-weight: 600;
}

/** * ==========================================================================
 * Core Values Block
 * - Styles for the custom "Core Values" block
 * ========================================================================== */
.miq-core-values {
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);
  font-style: normal;
  font-weight: 200;
}
.miq-core-values p strong {
  color: var(--menu-selected-link-color);
  font-weight: 400;
  font-size: 1.5em;
}
.miq-core-values img {
  max-height: 11.25rem;
  width: auto;
}

/** * ==========================================================================
 * Finding Us Block
 * - Styles for the custom "Finding Us" block
 * ========================================================================== */
.miq-finding-us {
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);
}
.miq-finding-us .miq-finding-us-card {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  padding-top: var(--wp--preset--spacing--50);
  padding-right: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
  padding-left: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--newspaper);
}
.miq-finding-us .miq-finding-us-card .miq-icon {
  color: var(--menu-selected-link-color);
  font-size: 1.5625em;
}
.miq-finding-us .google-map iframe {
  min-height: 31em;
  width: var(--w-content);
  border: 0;
  border-radius: 1rem;
  display: inherit;
}
.miq-finding-us .google-map .embed-placeholder {
  min-height: 31em;
  width: var(--w-content);
  border-radius: 1rem;
}

/** * ==========================================================================
 * Flyer Card STyles
 * - Styles for the flyer card
 * ========================================================================== */
.miq-flyer-card {
  border: 1px solid currentColor;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  gap: 0 !important;
}

.miq-flyer-card-column {
  padding: 0.7em;
  min-height: 15rem;
}

.miq-flyer-card .miq-flyer-card-column img {
  height: 15rem;
  max-width: 7.4375rem;
}

.miq-flyer-card-actual {
  border-radius: 0.5em;
  font-size: var(--wp--preset--font-size--xs);
  background-color: var(--wp--preset--color--cadmium-orange-xona);
  color: var(--wp--preset--color--winter-snow);
  padding: 0.1em 1em;
}

.miq-flyer-card-button {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

ul.miq-flyer-grid {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fit,
    minmax(24rem, max-content)
  ) !important;
  justify-content: center;
  gap: 1rem;
}

ul.miq-flyer-grid > li {
  margin-block-start: 0;
}

.previous-training-card {
  border-radius: 1em;
  padding-top: var(--wp--preset--spacing--40);
  padding-right: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--40);
  padding-left: var(--wp--preset--spacing--60);
}

/** * ==========================================================================
 * Front Page Styles
 * - Styles for the front-page
 * ========================================================================== */
.miq-front-page {
  margin-top: var(--wp--preset--spacing--80);
}
.miq-front-page .miq-courses {
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
}

.miq-front-page .miq-courses .miq-course {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
}

.miq-front-page .miq-courses .miq-course .wp-block-heading {
  font-style: normal;
  font-weight: 500;
}

.miq-front-page .miq-courses .miq-course .wp-block-post-content {
  font-style: normal;
  font-weight: 300;
}

.miq-front-page .miq-courses .miq-course .wp-block-image img {
  border-top-left-radius: 1.5em;
  border-top-right-radius: 1.5em;
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
}

.front-page-course-children .wp-block-post-content,
.front-page-course-children .wp-block-post-content p {
  padding: 0;
  margin: 0;
  font-weight: 300;
}

.front-page-course-children .wp-block-post-template {
  list-style: disc;
  padding-left: 1.5em; /* restore marker space */
  margin-left: 0;
}

.front-page-course-children .wp-block-post {
  margin-block-start: 0;
}

/** * ==========================================================================
 * MIQ Course Pages Styles
 * - Styles for courses pages
 * ========================================================================== */
/* Left Column */
.miq-course-page-hero__left-col {
  padding-right: var(--wp--preset--spacing--70);
}

.miq-course-page-hero-page__content {
  font-style: normal;
  font-weight: 400;
}

.miq-course-page-hero-page__content-wrapper {
  font-style: normal;
  font-weight: 300;
}

/* Progress Steps */
.progress-steps {
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);
}

.miq-course-page__child-card {
  border: 1px solid currentColor;
  border-radius: 1em;
  min-height: 100%;
}

.miq-course-page__child-card .wp-block-post-featured-image img {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

.miq-course-page__child-title,
.miq-course-page__child-content {
  padding-left: var(--wp--preset--spacing--30);
  padding-right: var(--wp--preset--spacing--30);
}

.miq-course-page__child-signup {
  padding-right: var(--wp--preset--spacing--30);
  padding-left: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--50);
}

.miq-weitere-kurs-page .miq-course-page__child-card {
  padding-top: 10rem;
  position: relative;
}

.miq-weitere-kurs-page .miq-course-page__child-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("../images/CourseBackground.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.7;
  z-index: 0;
  border-radius: 1em;
}

.miq-weitere-kurs-page .miq-course-page__child-card::after {
  content: "";
  position: absolute;
  top: 9rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  z-index: 1;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

.miq-weitere-kurs-page .miq-course-page__child-card > * {
  position: relative;
  z-index: 2;
}

.miq-weitere-kurs-page .miq-course-page__child-card p {
  margin-block-start: 0;
}

/* Kinderbeaufsichtigung Page Styles */

.kinderbeaufsichtigung-details-wrapper {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
}

.kinderbeaufsichtigung-intro {
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
}

.kinderbeaufsichtigung-intro-image img {
  border-radius: 1em;
}

.kinderbeaufsichtigung-tom-jerry-inner {
  border: 1px solid;
  border-radius: 1em;
  padding: var(--wp--preset--spacing--50);
  max-width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.kinderbeaufsichtigung-tom-jerry-icon {
  flex: 0 0 7em;
}

.kinderbeaufsichtigung-tom-jerry-text {
  font-style: normal;
  font-weight: 300;
}

.kinderbeaufsichtigung-card {
  border: 1px solid;
  border-radius: 1em;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  gap: var(--wp--preset--spacing--20);
}

.kinderbeaufsichtigung-card-icon {
  flex: 0 0 3.13em;
}

.kinderbeaufsichtigung-card-text {
  font-style: normal;
  font-weight: 300;
}

.kinderbeaufsichtigung-content-section {
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
}

.kinderbeaufsichtigung-content-image img {
  border-radius: 1em;
}

.kinderbeaufsichtigung-certificate {
  flex: 0 0 10em;
}

@media (max-width: 37.5rem) {
  .kinderbeaufsichtigung-tom-jerry-inner {
    padding: var(--wp--preset--spacing--20);
    max-width: 100%;
    flex-direction: column;
  }
  .kinderbeaufsichtigung-tom-jerry-icon {
    max-width: 7em;
  }
  .kinderbeaufsichtigung-card-text,
  .kinderbeaufsichtigung-tom-jerry-icon {
    flex: none;
  }
}

/* MIQ Coaching Page - Extracted Styles */

/* Details Grid Spacing */
.miq-coaching-page__details-grid {
  gap: var(--wp--preset--spacing--70);
}

/* Rounded Images */
.miq-coaching-page__rounded-image img {
  border-radius: 1em;
}

/* Options Section */
.miq-coaching-page__options {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
}

/* Four Option Item Spacing */
.miq-four-option-item {
  gap: var(--wp--preset--spacing--20);
}

/* Modules Intro Grid Spacing */
.miq-coaching-page__modules-intro-grid {
  gap: var(--wp--preset--spacing--70);
}

/* Module Card Styles */
.miq-coaching-page__module-card {
  border: 1px solid;
  border-radius: 1em;
  padding: var(--wp--preset--spacing--50);
}

/* Module Title Styles */
.miq-coaching-page__module-title {
  font-style: normal;
  font-weight: 500;
}

/* Module Description Styles */
.miq-coaching-page__module-description {
  font-style: normal;
  font-weight: 300;
}

body.cookie-consent-active {
  overflow: hidden;
}

.cookie-consent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  background: rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  align-items: flex-start !important;
  -webkit-overflow-scrolling: touch;
  justify-content: center;
  padding: 1rem;
  flex-wrap: nowrap;
}

.cookie-consent-dialog {
  max-width: var(--w-content);
  margin: 5vh 5vw !important;
  border-radius: 1em;
  background-color: var(--wp--preset--color--winter-snow);
}

.cookie-consent-top {
  padding-top: var(--wp--preset--spacing--50);
  padding-right: var(--wp--preset--spacing--50);
  padding-left: var(--wp--preset--spacing--50);
}

.cookie-consent-middle {
  padding: var(--wp--preset--spacing--50);
  background-color: var(--wp--preset--color--newspaper);
}

.cookie-consent-bottom {
  padding-right: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
  padding-left: var(--wp--preset--spacing--50);
}

.cookie-consent-bottom .wp-block-buttons {
  margin-top: var(--wp--preset--spacing--40);
}

.embed-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--wp--preset--color--winter-snow);
  border: 1px dashed;
  padding-top: var(--wp--preset--spacing--50);
  padding-right: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--50);
  padding-left: var(--wp--preset--spacing--50);
}

.embed-placeholder__icon {
  font-size: 1.5rem;
}

.cookie-consent-show-settings {
  cursor: pointer;
}

.wp-block-accordion .wp-block-accordion-item {
  border-bottom: 1px solid currentColor;
}

.wp-block-accordion
  .wp-block-accordion-item
  .wp-block-accordion-heading:is(h3) {
  font-size: var(--wp--preset--font-size--xl);
}

.wp-block-accordion .wp-block-accordion-item .wp-block-accordion-heading * {
  text-decoration: none;
}

.wp-block-accordion
  .wp-block-accordion-item
  .wp-block-accordion-heading
  .wp-block-accordion-heading__toggle-icon {
  visibility: hidden;
}

.wp-block-accordion
  .wp-block-accordion-item
  .wp-block-accordion-heading
  .wp-block-accordion-heading__toggle-icon::before {
  content: "";
  visibility: visible;
  width: 1.5em;
  height: 1.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23D32F2F' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.wp-block-accordion
  .wp-block-accordion-item.is-open
  .wp-block-accordion-heading__toggle-title {
  color: var(--wp--preset--color--guardsman-red);
}

.wp-block-accordion
  .wp-block-accordion-item.is-open
  .wp-block-accordion-heading__toggle-icon {
  transform: none;
}

.wp-block-accordion
  .wp-block-accordion-item.is-open
  .wp-block-accordion-heading__toggle-icon::before {
  transform: rotate(180deg);
}

/* Kurskarte Template Part Styles */
.miq-course-program-card {
  min-width: 21.5rem;
  border: 1px solid currentColor;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  padding-top: var(--wp--preset--spacing--20);
  padding-right: var(--wp--preset--spacing--20);
  padding-bottom: var(--wp--preset--spacing--20);
  padding-left: var(--wp--preset--spacing--20);
}

.miq-course-program-card .wp-block-accordion .wp-block-accordion-item.is-open {
  border-bottom: none;
}

.miq-course-program-card h4.wp-block-heading {
  font-style: normal;
  font-weight: 600;
}

.miq-course-program-card
  .wp-block-accordion
  .wp-block-accordion-item
  h3.wp-block-accordion-heading {
  font-style: normal;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--md-plus);
}

.miq-course-program-card .wp-block-accordion-panel .card-modules {
  border: 1px solid var(--wp--preset--color--elephant);
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  padding-top: var(--wp--preset--spacing--40);
  padding-right: var(--wp--preset--spacing--20);
  padding-bottom: var(--wp--preset--spacing--40);
  padding-left: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--md);
}

.miq-course-program-card .green-text {
  color: var(--wp--preset--color--sporty-green);
}


/** * ==========================================================================
 * Expired Course Indicator
 * - Styles for indicating expired courses
 * ========================================================================== */
.wp-block-group.is-expired {
  outline: 2px dashed #cc1818;
  opacity: 0.65;
  position: relative;
}

.wp-block-group.is-expired::before {
  content: attr(data-miq-expired-label);
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #cc1818;
  background: rgba(204, 24, 24, 0.1);
}