/**
 * Mara Vital – Category Icon Navigation Bar
 * Datei: wp-content/themes/DEIN-CHILD-THEME/inc/mara-icon-nav.css
 *
 * BEM-Klassen, keine !important, kein Inline-Stil.
 * Vollständig responsive. Desktop: ausgeblendet (optional einblendbar).
 */

/* ─── Variablen ─────────────────────────────────────────────────────────── */
:root {
	--mara-nav-bg:		     #ffffff;
    --mara-nav-border:		 #e8ebe2;
    --mara-nav-icon-bg:      #274967;
    --mara-nav-icon-color:   #ffffff;
    --mara-nav-label-color:  #3a3a3a;
    --mara-nav-active-bg:    #274967;
    --mara-nav-active-border:#6a9a2e;
    --mara-nav-active-color: #9dbedb;
    --mara-nav-hover-bg:     #9dbedb;
    --mara-nav-font-size:     11px;
    --mara-nav-icon-size:     30px;
    --mara-nav-height:        62px;
}

/* ─── Container ─────────────────────────────────────────────────────────── */
.mara-icon-nav {
    display:          block;
    width:            100%;
    background:       var(--mara-nav-bg);
    border-bottom:    1px solid var(--mara-nav-border);
    /* Sticky unterhalb des Headers */
    position:         sticky;
    top: 			  70px;
    z-index:          100;
    box-shadow:       0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ─── Liste ─────────────────────────────────────────────────────────────── */
.mara-icon-nav__list {
    display:          flex;
    align-items:      stretch;
    justify-content:  space-around;
    list-style:       none;
    margin:           0;
    padding:          0;
    height:           var(--mara-nav-height);
    /* Scrollbar nur wenn nötig (sehr schmale Screens) */
    overflow-x:       auto;
    overflow-y:       hidden;
    scrollbar-width:  none;          /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
}

.mara-icon-nav__list::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
}

/* ─── Einzelnes Item ────────────────────────────────────────────────────── */
.mara-icon-nav__item {
    flex:             1 0 0;
    min-width:        0;
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

/* ─── Link ──────────────────────────────────────────────────────────────── */
.mara-icon-nav__link {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              4px;
    width:            100%;
    height:           100%;
    padding:          6px 4px;
    text-decoration:  none;
    border-radius:    0;
    transition:       background 0.15s ease;
    position:         relative;
}

.mara-icon-nav__link:hover {
    background:       var(--mara-nav-hover-bg);
    text-decoration:  none;
}

/* Aktiver Zustand: unterer Balken statt Border-Box */
.mara-icon-nav__item--active .mara-icon-nav__link::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             20%;
    right:            20%;
    height:           2.5px;
    background:       var(--mara-nav-active-color);
    border-radius:    2px 2px 0 0;
}

/* ─── Icon-Kreis ────────────────────────────────────────────────────────── */
.mara-icon-nav__icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            var(--mara-nav-icon-size);
    height:           var(--mara-nav-icon-size);
    border-radius:    50%;
    background:       var(--mara-nav-icon-bg);
    color:            var(--mara-nav-icon-color);
    flex-shrink:      0;
    transition:       background 0.15s ease, color 0.15s ease;
}

.mara-icon-nav__icon svg {
    width:            18px;
    height:           18px;
    display:          block;
}

.mara-icon-nav__link:hover .mara-icon-nav__icon {
    background:       var(--mara-nav-active-bg);
}

.mara-icon-nav__item--active .mara-icon-nav__icon {
    background:       var(--mara-nav-active-bg);
    color:            var(--mara-nav-active-color);
}

/* ─── Label ─────────────────────────────────────────────────────────────── */
.mara-icon-nav__label {
    font-size:        var(--mara-nav-font-size);
    font-weight:      500;
    color:            var(--mara-nav-label-color);
    text-align:       center;
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
    max-width:        100%;
    line-height:      1.2;
    transition:       color 0.15s ease;
}

.mara-icon-nav__link:hover .mara-icon-nav__label {
    color:            var(--mara-nav-active-color);
}

.mara-icon-nav__item--active .mara-icon-nav__label {
    color:            var(--mara-nav-active-color);
    font-weight:      600;
}

/* ─── Desktop: Standardmässig ausblenden ────────────────────────────────── */
/* → Entferne diesen Block wenn du die Bar auch auf Desktop willst           */
@media ( min-width: 768px ) {
    .mara-icon-nav {
        display: none;
    }
}

/* ─── Desktop-Variante (optional aktivieren) ────────────────────────────── */
/*
@media ( min-width: 768px ) {
    .mara-icon-nav {
        display: block;
    }
    .mara-icon-nav__list {
        max-width:     900px;
        margin:        0 auto;
        justify-content: center;
        gap:           8px;
        height:        72px;
    }
    .mara-icon-nav__item {
        flex:          0 0 auto;
        width:         120px;
    }
    :root {
        --mara-nav-icon-size:  36px;
        --mara-nav-font-size:  12px;
    }
}
*/