/* assets/css/header.menu.css — icon + menu-left links in Roboto Mono (no @import) */

:root{
  /* Icon knobs */
  --menu-icon-size: 18px;
  --menu-icon-thickness: 2px;
  --menu-icon-gap: 6px;

  /* Typography knobs */
  --menu-link-font: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --menu-link-size: 0.88rem;
  --menu-link-weight: 200;
  --menu-link-line: 1.3;
  --menu-link-underline-offset: 3px;
  --menu-link-color: #7fffd4;      /* Beispiel: Aquamarine */
  --menu-link-hover: #ffffff;      /* Hover-Farbe */
}

/* === Icon layout === */
.site-header .menu-toggle{
  display: inline-flex;
  align-items: center;
  gap: var(--menu-icon-gap);
}

/* SVG icon box */
.site-header .menu-toggle .plusx{
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
  display: inline-block;
  vertical-align: -2px;
  margin: 0;
  transition: transform .28s ease-in-out;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Bars use currentColor so they match the button text color */
.site-header .menu-toggle .plusx .bar{ fill: currentColor; }

/* Rotate 45deg on open to become an × */
.site-header .menu-toggle.is-open .plusx,
.site-header .menu-toggle .plusx.is-open{ transform: rotate(45deg); }

/* Precise bar thickness */
.site-header .menu-toggle .plusx .bar.h{ height: var(--menu-icon-thickness); }
.site-header .menu-toggle .plusx .bar.v{ width: var(--menu-icon-thickness); }

/* === Menu Typography rules === */
/* Keep the Info title (h4) in your existing heading font (from base.css) — do not override it here */
.drop .menu-left h4{ /* intentionally no font-family override */ }

/* Left column links: use Roboto Mono */
.drop .menu-left a{
  display: inline;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit;
  text-decoration: none;
  font-family: var(--menu-link-font);
  font-size: var(--menu-link-size);
  font-weight: var(--menu-link-weight);
  line-height: 1.6;
  color: var(--menu-link-color);
}

/* Abstand zwischen Links (ohne die Klickfläche zu verbreitern) */
.drop .menu-left a + a{
  margin-left: 0;           /* falls du side-by-side willst, hier anpassen */
}

/* Zeilenumbruch + vertikaler Abstand NACH jedem Link (nicht klickbar) */
.drop .menu-left a::after{
  content: "";
  display: block;            /* macht einen echten Umbruch */
  height: 8px;               /* Abstand zwischen den Links (anpassen) */
}

.drop .menu-left a:hover{
  color: var(--menu-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Menü-Form: Roboto Mono */
.drop .menu-right .menu-form input,
.drop .menu-right .menu-form textarea,
.drop .menu-right .menu-form select {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 200;   /* falls du knackiger willst: 500 */
  font-style: normal;
  font-size: 0.88rem; /* anpassen nach Geschmack */
}

.drop .menu-right .menu-form button{
  border:1px solid  #9a9a9a;
  background:transparent;
  padding: 6px 8px 6px 8px;
  color: #7fffd4;      /* Beispiel: Aquamarine */
}

.drop .menu-right .menu-form button:hover{
  border:1px solid  #9a9a9a;
  background:transparent;
  color: #FFFFFF;
}


/* Optional: Hover/Focus (monospace bleibt) */
.drop .menu-right .menu-form input:focus,
.drop .menu-right .menu-form textarea:focus,
.drop .menu-right .menu-form select:focus,
.drop .menu-right .menu-form button:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* Responsive: unter 900 px einspaltig */
@media (max-width: 900px){
  .drop .drop-grid{ grid-template-columns: 1fr; }
}

/* === Menü-Mitte (identisch zu menu-left) === */

/* Überschrift LEGAL: gleiche Headline-Font wie Info (NICHT Roboto Mono) */
.drop .menu-center h4{
  margin: 0 0 14px 0;
  color: inherit;
  /* keine font-family hier -> bleibt Headline-Font aus base.css */
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 0.98rem;
}

/* Links in der Mitte: Roboto Mono wie links */
.drop .menu-center a{
  display: inline;                 /* nur Text klick-/hoverbar */
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.6;
  color: var(--menu-link-color, inherit);
  text-decoration: none;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 0.88rem;              /* wie menu-left */
}

/* Untereinander stapeln, aber nur Text ist klickbar */
.drop .menu-center a::after{
  content: "";
  display: block;                  /* Zeilenumbruch + Abstand */
  height: 8px;                     /* vertikaler Abstand zwischen Links */
}

/* Hover nur am Text */
.drop .menu-center a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--menu-link-hover, inherit);
  text-decoration-color: currentColor;
}

/* Falls du Farben definiert hast, gelten sie auch für menu-center */