/* =====================================================
   UMAB - Theme for PMB 8.1.1.4
   Universite Abdelhamid Ibn Badis - Mostaganem
   ===================================================== */

:root {
    --umab-green: #123B35;
    --umab-emerald: #176B52;
    --umab-light: #F1F5F3;
    --umab-white: #FFFFFF;
    --umab-text: #263832;
    --umab-muted: #64746D;
    --umab-border: #DCE7E1;
    --umab-shadow: 0 5px 20px rgba(18, 59, 53, .08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--umab-light);
    color: var(--umab-text);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    line-height: 1.6;
}

a {
    color: var(--umab-emerald);
    text-decoration: none;
}

a:hover {
    color: var(--umab-green);
}

/* Main page */
#container {
    width: min(1200px, 96%);
    max-width: 1200px;
    margin: 25px auto;
    background: var(--umab-white);
    border-radius: 16px;
    box-shadow: var(--umab-shadow);
    overflow: hidden;
}

#main {
    width: 100%;
    margin: 0 auto;
}

#main_hors_footer {
    padding: 20px 28px;
}

/* Institutional header */
#main_header {
    min-height: 145px;
    padding: 22px 30px;
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--umab-white);
    border-bottom: 4px solid var(--umab-emerald);
}

#main_header::before {
    content: "";
    display: block;
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    background: url("images/logo-umab.png") center / contain no-repeat;
}

#main_header h1 {
    flex: 1;
    margin: 0;
    color: var(--umab-green) !important;
    font-size: clamp(19px, 2.4vw, 29px) !important;
    font-weight: 700 !important;
    line-height: 1.7;
    text-align: center !important;
}

/* Welcome banner */
#intro_message {
    margin: 22px 0;
    padding: 20px 24px;
    color: var(--umab-white);
    background: linear-gradient(120deg, var(--umab-green), var(--umab-emerald));
    border-radius: 12px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

/* Navigation */
#intro_bibli {
    margin: 18px 0;
}

#menuDeroulant {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--umab-green);
    border-radius: 10px;
}

#menuDeroulant li {
    position: relative;
    list-style: none;
}

#menuDeroulant > li > a {
    display: block;
    padding: 11px 15px;
    color: #fff;
    border-radius: 7px;
    font-weight: 600;
    transition: background .2s ease;
}

#menuDeroulant > li > a:hover {
    background: var(--umab-emerald);
    color: #fff;
}

#menuDeroulant .sousMenu {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--umab-border);
    border-radius: 9px;
    box-shadow: var(--umab-shadow);
}

#menuDeroulant li:hover > .sousMenu,
#menuDeroulant li:focus-within > .sousMenu {
    display: block;
}

#menuDeroulant .sousMenu a {
    display: block;
    padding: 9px 12px;
    color: var(--umab-text);
    border-radius: 6px;
    white-space: normal;
}

#menuDeroulant .sousMenu a:hover {
    background: var(--umab-light);
    color: var(--umab-emerald);
}

/* Search */
#search {
    margin: 25px 0;
    padding: 24px;
    background: var(--umab-light);
    border: 1px solid var(--umab-border);
    border-radius: 13px;
}

#search h2,
#search h3 {
    color: var(--umab-green);
}

#search input[type="text"],
#search input[type="search"],
#search select {
    min-height: 44px;
    max-width: 100%;
    padding: 10px 13px;
    border: 1px solid #C8D8CF;
    border-radius: 7px;
    font-size: 15px;
}

#search input[type="submit"],
#search button {
    min-height: 44px;
    padding: 10px 22px;
    color: #fff;
    background: var(--umab-emerald);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 600;
}

#search input[type="submit"]:hover,
#search button:hover {
    background: var(--umab-green);
}

.search_tabs {
    margin-bottom: 15px;
}

/* General sections */
#categories,
#location,
#etageres,
#infopages {
    margin: 25px 0;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--umab-border);
    border-radius: 12px;
}

#categories h2,
#location h2,
#etageres h2,
#infopages h2 {
    color: var(--umab-green);
    border-bottom: 2px solid var(--umab-border);
    padding-bottom: 10px;
}

/* Dewey categories and shelves */
#categories-container,
#location-container,
#etagere-container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

#categories-container > *,
#location-container > *,
#etagere-container > * {
    border-radius: 9px;
}

#categories a,
#location a,
#etageres a {
    color: var(--umab-emerald);
}

#categories a:hover,
#location a:hover,
#etageres a:hover {
    color: var(--umab-green);
    text-decoration: underline;
}

/* Shelves */
.etagere {
    padding: 15px;
    background: var(--umab-light);
    border: 1px solid var(--umab-border);
    border-radius: 10px;
}

#etagere-titre {
    color: var(--umab-green);
    font-weight: 700;
}

#etagere-comment {
    color: var(--umab-muted);
}

/* Footer */
#footer {
    margin-top: 30px;
    padding: 28px;
    color: #EAF3EE;
    background: var(--umab-green);
    text-align: center;
}

#footer a {
    color: #fff;
}

#footer a:hover {
    text-decoration: underline;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 700px) {
    #container {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    #main_header {
        flex-direction: column;
        gap: 10px;
        padding: 18px 12px;
    }

    #main_header::before {
        flex-basis: 75px;
        width: 75px;
        height: 75px;
    }

    #main_header h1 {
        font-size: 19px !important;
    }

    #main_hors_footer {
        padding: 12px;
    }

    #menuDeroulant {
        align-items: stretch;
        flex-direction: column;
    }

    #menuDeroulant > li > a {
        text-align: center;
    }

    #menuDeroulant .sousMenu {
        position: static;
        width: 100%;
        box-shadow: none;
    }

    #search {
        padding: 15px;
    }
}

/* =====================================================
   UMAB - Organisation de la page d'accueil
   ===================================================== */

#container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "navigation"
        "content"
        "accessibility";
    gap: 0;
}

/* En-tête institutionnel */
#main {
    display: contents;
}

#main_header {
    grid-area: header;
}

/* Menu principal */
#intro {
    grid-area: navigation;
    display: block;
    width: 100%;
    padding: 0 28px;
    margin: 0;
    background: #fff;
}

#intro_bibli {
    margin: 0;
}

#intro_bibli h3 {
    display: none;
}

#menuDeroulant {
    margin: 12px 0 18px;
}

/* Contenu du catalogue et pied de page */
#main_hors_footer {
    grid-area: content;
    width: 100%;
}

/* Bandeau d'accessibilité */
#bandeau {
    grid-area: accessibility;
}

/* Adaptation mobile */
@media (max-width: 700px) {
    #intro {
        padding: 0 12px;
    }
}


#menuDeroulant {
    background: #123B35 !important;
}