/* ============================================================================
   rw-devnav.css - das Entwicklermenue auf /dev, ohne Fremdvorlage
   ----------------------------------------------------------------------------
   Gehoert zu:
     templates/Redweb/DEV/menu.html.twig   (Auszeichnung)
     public/js/rw-topnav.js                (Verhalten, geteilt mit der Kopfleiste)

   Das zweite Unify-Menue der Plattform. Es sass auf denselben Fremddateien wie
   die grosse Kopfleiste (hs.megamenurw.css, hamburgers.min.css, hs.megamenu.js,
   hs.hamburgers.js) und war der letzte Grund, warum die noch geladen wurden.

   Anders als die Kopfleiste ist es hell, sitzt in einem Bootstrap-container und
   klappt mehrstufig auf: bis zu drei Ebenen, die zweite und dritte oeffnen
   seitlich. Deshalb ein eigenes Blatt statt eines Zusatzes zu rw-topnav.css.
   Die Mechanik dagegen ist dieselbe und kommt aus rw-topnav.js.

   Alle Masse sind am alten Menue ausgemessen:

     Leiste          84,3px hoch (11,43 + 61,5 + 11,43), Grund weiss
     Innenkasten     Bootstrap .container: 1140px ab 1200px, 960 ab 992,
                     720 ab 768, 540 ab 576, sonst volle Breite, je 15px innen
     nav             Innenabstand 8px 16px
     Menuepunkt      Schrift 14,857px (0.92857rem), fett 600, Zeilenhoehe 1.6,
                     Innenabstand .5rem oben/unten, Aussenabstand 11,43px ab
                     992px und 17,14px ab 1200px, Farbe #0b185d
     Klappliste      22,86px unter dem Punkt, weiss, roter Deckel 2px,
                     Schatten 0 0 2px #ccc, Mindestbreite 220px
     Listenzeile     Innenabstand 3,43px 17,14px, Link darin 7,43px 8px
     Unterebene      seitlich, 2,29px nach oben versetzt (frueher g-mt-minus-2)
     Support-Knopf   Rahmen 1px #980a0a, Radius 4px, 11,43px 17,14px
   ========================================================================== */

.rwdev {
    --rwdev-rot: #980a0a;
    --rwdev-tinte: #0b185d;
    --rwdev-zeile: #292b2c;
    --rwdev-grund: #fff;
    --rwdev-linie: #eee;
    --rwdev-gruen: #008000;
    --rwdev-font: "Share Tech Mono", "Roboto Slab", ui-monospace, monospace;

    position: relative;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 101;
    font-family: var(--rwdev-font);
    font-size: 0.92857rem;      /* 14,857px, frueher .u-header */
    line-height: 1.6;
    color: var(--rwdev-tinte);
}

/* Eigene Breitenrechnung, damit kein fremdes Blatt noetig ist. */
.rwdev,
.rwdev *,
.rwdev *::before,
.rwdev *::after {
    box-sizing: border-box;
}

.rwdev__bar {
    background-color: var(--rwdev-grund);
    padding: 11.4286px 0;       /* frueher .g-py-10 */
    transition: .3s ease;
}

.rwdev__nav {
    position: relative;         /* Bezug fuer die Klapplisten der ersten Ebene */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 16px;
}

/* Der Innenkasten. Nicht Bootstraps .container aus dem Lehrbuch, sondern
   das, was in dieser Kopfleiste tatsaechlich herauskam: bis 991px laeuft er
   ueber die volle Breite und ohne Innenabstand, erst darueber greifen
   Hoechstbreite und die 15px. Nachgemessen bei 390, 576, 768, 1100 und 1440. */
.rwdev__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

@media (min-width: 992px) {
    .rwdev__inner {
        max-width: 960px;
        padding: 0 15px;
    }
}

@media (min-width: 1200px) {
    .rwdev__inner { max-width: 1140px; }
}

/* ------------------------------------------------------------------- Marke */

.rwdev__brand {
    display: inline-flex;
    align-items: center;
    margin-right: 16px;
    padding: 4px 0;
    font-size: 20px;
    line-height: 1.6;           /* 32px: haelt den Markenkasten auf 40px, wie gemessen */
    color: var(--rwdev-tinte);
    text-decoration: none;
    white-space: nowrap;
}

.rwdev__brand:hover,
.rwdev__brand:focus {
    color: var(--rwdev-tinte);
    text-decoration: none;
}

.rwdev__brand img {
    width: 32px;
    height: auto;
    display: block;
}

.rwdev__brand-text {
    margin-left: 6px;
    font-size: 11.4286px;       /* frueher <font size="-2"> */
    color: var(--rwdev-gruen);
}

/* --------------------------------------------------------------- Hamburger */

/* Der Knopf steht im Quelltext VOR der Marke, soll aber rechts aussen
   sitzen. Frueher loeste das .g-pos-abs .g-right-0, hier dasselbe: aus dem
   Fluss genommen und an den rechten Rand der nav gehaengt. */
.rwdev__burger {
    display: none;
    position: absolute;
    right: 16px;
    top: 6px;                   /* an der Markenzeile, NICHT mittig: sonst
                                   rutscht er mit, sobald die Liste aufklappt */
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.rwdev__burger-box {
    position: relative;
    display: block;
    width: 40px;
    height: 24px;
}

.rwdev__burger-bar,
.rwdev__burger-bar::before,
.rwdev__burger-bar::after {
    position: absolute;
    left: 0;
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background-color: var(--rwdev-tinte);
    transition: transform .15s ease, background-color .15s ease;
}

.rwdev__burger-bar { top: 10px; }
.rwdev__burger-bar::before,
.rwdev__burger-bar::after { content: ""; }
.rwdev__burger-bar::before { top: -10px; }
.rwdev__burger-bar::after { top: 10px; }

.rwdev__burger[aria-expanded="true"] .rwdev__burger-bar { background-color: transparent; }
.rwdev__burger[aria-expanded="true"] .rwdev__burger-bar::before { top: 0; transform: rotate(45deg); }
.rwdev__burger[aria-expanded="true"] .rwdev__burger-bar::after  { top: 0; transform: rotate(-45deg); }

/* -------------------------------------------------------------- Menueliste */

.rwdev__collapse {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    padding-top: 5.7143px;      /* frueher .g-pt-5--lg */
}

@media (min-width: 992px) {
    .rwdev__collapse { margin-right: 45.7143px; }   /* frueher .g-mr-40--lg */
}

.rwdev__list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 0 auto;         /* frueher .ml-auto */
    padding: 0;
    list-style: none;
    font-weight: 600;
    text-transform: uppercase;
}

.rwdev__item {
    position: relative;         /* die Klappliste haengt am Punkt */
    margin: 0 11.4286px;        /* frueher .g-mx-10--lg */
}

@media (min-width: 1200px) {
    .rwdev__item { margin: 0 17.1429px; }           /* frueher .g-mx-15--xl */
}

.rwdev__link {
    display: block;
    padding: .5rem 0;           /* frueher .g-py-7 */
    color: var(--rwdev-tinte);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.rwdev__link:hover,
.rwdev__link:focus {
    color: var(--rwdev-rot);
    text-decoration: none;
}

.rwdev__caret {
    font-size: 0.78571rem;      /* frueher .g-font-size-11 */
    margin-left: .5rem;         /* frueher .g-ml-7 */
}

/* ------------------------------------------------------------- Klapplisten */

.rwdev__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    margin: 22.8571px 0 0;      /* frueher .g-mt-20 */
    padding: 0;
    min-width: 220px;           /* frueher .g-min-width-220 */
    list-style: none;
    background: var(--rwdev-grund);
    border-top: 2px solid var(--rwdev-rot);
    box-shadow: 0 0 2px #ccc;
    font-weight: 400;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease;
}

.rwdev__item.is-open > .rwdev__menu,
.rwdev__row.is-open > .rwdev__menu {
    visibility: visible;
    opacity: 1;
}

/* Zweite und dritte Ebene: seitlich statt darunter, und ohne den grossen
   Abstand nach oben. Die 2,29px heben den roten Deckel auf die Zeilenmitte. */
.rwdev__menu .rwdev__menu {
    top: 0;
    left: 100%;
    margin: -2.2857px 0 0;      /* frueher .g-mt-minus-2 */
}

/* Zweispaltige Klapplisten (frueher .u-dropdown-col-2). Der haarfeine
   Strich zwischen den Spalten und der Spalt von 1px sind ausgemessen. */
.rwdev__menu--2 {
    columns: 2;
    column-gap: 1px;
    column-rule: 1px solid #f7f7f7;
}

.rwdev__row {
    position: relative;         /* Bezug fuer die naechste Ebene */
    min-width: 200px;           /* kam frueher aus Bootstraps .dropdown-item */
    padding: 3.42864px 17.1429px;
    color: var(--rwdev-zeile);
    break-inside: avoid;
}

/* Die Zeile hellt beim Ueberfahren auf, ebenfalls aus .dropdown-item. */
.rwdev__row:hover,
.rwdev__row:focus-within {
    background: rgba(0, 0, 0, .03);
}

.rwdev__row > a {
    display: block;
    padding: 7.42856px 8px;
    color: var(--rwdev-tinte);
    text-decoration: none;
}

.rwdev__row > a:hover,
.rwdev__row > a:focus {
    color: var(--rwdev-rot);
    text-decoration: none;
}

.rwdev__trenner {
    height: 1px;
    margin: 8px 0;
    background: var(--rwdev-linie);
}

/* Das kleine Schild ("New", "vip") hinter einem Eintrag. */
.rwdev__label {
    display: inline-block;
    position: relative;
    top: -0.07143rem;
    margin-left: 0.35714rem;
    padding: 0.21429rem 0.58rem;
    border-radius: 3px;
    background-color: #c9594f;
    color: #fff;
    font-size: 0.71429rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* ---------------------------------------------------------- Support-Knopf */

.rwdev__support-box {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    padding-left: 34.2857px;    /* frueher .g-pl-30 */
}

@media (min-width: 992px) {
    .rwdev__support-box { padding-left: 0; }         /* frueher .g-pl-0--lg */
}

.rwdev__support {
    display: inline-block;
    padding: 11.4286px 17.1429px;
    border: 1px solid var(--rwdev-rot);
    border-radius: 4px;
    background-color: transparent;
    color: var(--rwdev-rot);
    font-size: 0.92857rem;
    line-height: 1.25;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}

.rwdev__support:hover,
.rwdev__support:focus {
    color: #fff;
    background-color: var(--rwdev-rot);
    text-decoration: none;
}

/* Auf dem Smartphone war der Knopf schon vorher weg (hidden-xs-down). */
@media (max-width: 575.98px) {
    .rwdev__support-box { display: none; }
}

/* --------------------------------------------------- Smartphone / Tablet */

/* Dieselbe Grenze wie bei der Kopfleiste: bis 991,98px eingeklappt. */
@media (max-width: 991.98px) {
    .rwdev__burger { display: block; }

    .rwdev__collapse {
        display: none;
        order: 10;
        flex: 0 0 100%;
        width: 100%;
        padding-top: 11.4286px;
    }

    .rwdev__collapse.is-open { display: block; }

    .rwdev__list {
        display: block;
        width: 100%;
        margin: 0;
    }

    .rwdev__item { margin: 0; }

    /* Eingeklappt gibt es kein Ueberfahren: die Ebenen ruecken einfach ein,
       statt seitlich aufzuklappen. Sonst waeren sie ausserhalb des Bildes. */
    .rwdev__menu,
    .rwdev__menu .rwdev__menu {
        position: static;
        min-width: 0;
        margin: 0 0 0 16px;
        border-top: 0;
        box-shadow: none;
        display: none;
        columns: auto;
    }

    .rwdev__item.is-open > .rwdev__menu,
    .rwdev__row.is-open > .rwdev__menu {
        display: block;
    }

    .rwdev__menu--2 { min-width: 0; }
}