﻿/* Tender and vacancy cards: grow with their content instead of a fixed 100px
   (on narrow screens the fixed height made cards overlap) */
#content .center .leftInner .tenderBox .simpleTender,
#content .center .leftInner .vacancyList .simpleVacancy {
    height: auto;
    min-height: 100px;
    padding-top: 15px;
    padding-bottom: 15px;
    row-gap: 10px;
}

/*header */
@media (max-width: 1630px) {
    .menuBox nav > ul > li a {
        font-size: 14px;
    }

    #header .logoSpace h1 {
        font-size: 15px;
    }
    /*    menu*/

}

@media (max-width: 1630px) {
    .menuBox nav div {
        right: 165px;
    }

    #content .center .leftInner .projectFilter input {
        width: 50%;
    }
    /*   ტერიტორიული ადმინისტრაციები inner pages */
    .firstAccardion .adminContact h4 {
        width: 100%;
    }

    #content .center .leftInner .tenderBox .simpleTender a.tenderMore,
    #content .center .leftInner .vacancyList .simpleVacancy a.vacancyMore {
        width: 120px;
    }
}

@media (max-width: 1300px) {
    /*    content*/
    #content .center {
        flex-direction: column;
    }

    #content .leftSide {
        width: 100%;
    }

    #content .rightSide {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }

        #content .rightSide .calendarBox {
            width: 49%;
            margin-bottom: 0;
        }

        #content .rightSide .protectedMap {
            width: 49%;
        }
    /*    links */
    #thirdyPart .thirdyOne .appLinks .appText h2, #thirdyPart .thirdyTwo .appLinks .appText h2 {
        font-size: 23px;
        width: 84%;
    }

    #thirdyPart .thirdyOne .appLinks .storeBlock {
        flex-direction: column;
    }
    /*    foooter ფუტერ ფუტერი */
    #footer .center .footerFirst {
        width: 25%;
    }

    #footer .center .footerSecond h2, #footer .center .footerThird h2 {
        font-size: 18px;
    }

    #footer .center .footerThird {
        width: 25%;
    }
    /*   inner content / შიდა გვერდები / innerContent / ინნერ */
    /*inner header menu*/
    #header.inner .menuBox nav {
        right: 100px;
        top: 25px;
    }

        #header.inner .menuBox nav div {
            right: 50px;
        }

    #header.inner nav div #nav-icon1 span {
        background-color: #818181;
    }

    #content.innerContent .center {
        flex-direction: row;
    }

        #content.innerContent .center .rightInner {
            width: 36%
        }

        #content.innerContent .center .leftInner {
            width: 62%;
        }
    /*    innerNEws სიახლეები შიდა გვერდი  */
    #content .leftInner .newsBox .simpleNews {
        width: 100%;
    }

    #content .center .leftInner .paragraph .imageBlock {
        width: 100%;
    }
    /*    deputy დირექტორის მოადგილეები*/
    #content .center .leftInner .deputyCard .simpleDeputy {
        width: 100%;
        margin-bottom: 20px;
    }
    /*    ტერიტორიული / directors */
    #content .center .leftInner .deputyCard.simpleThird {
        flex-wrap: wrap;
        justify-content: space-between;
    }

        #content .center .leftInner .deputyCard.simpleThird .simpleEmpl {
            width: 49%;
            margin-right: 0;
        }
    /*        projects პროექტები*/
    #content .center .leftInner .projectList .simpleProject {
        width: 100%;
    }
    /*    news  filter*/
    #content .center .leftInner .projectFilter input {
        width: 48%
    }

        #content .center .leftInner .projectFilter input:nth-child(3) {
            width: 100px;
            padding-left: 0;
        }

    #content .center .leftInner .projectFilter .datePick {
        width: 32%;
    }
    /*    სააგენტოს კონტაქტი agency contact */
    #content .center .leftInner .contactSpace {
        flex-wrap: wrap;
    }

        #content .center .leftInner .contactSpace .contactInfo {
            width: 100%;
            margin-right: 0;
            margin-bottom: 20px;
        }

        #content .center .leftInner .contactSpace .contactBox {
            width: 100%;
        }
}

@media (max-width: 1100px) {
    /*    global css*/
    .center {
        width: 92%;
    }
    /*    slider */
    #sliderSpace {
        height: 700px;
    }

    .homepageSlider-content {
        width: 70%;
    }

    slider filter {
    }

    #sliderSpace .sliderFilter {
        bottom: 20px;
    }

        #sliderSpace .sliderFilter .filterBox .justifyFilter {
            flex-wrap: wrap;
            width: 80%;
        }

        #sliderSpace .sliderFilter .filterBox {
            height: 100px;
            padding-left: 14px;
            padding-right: 14px;
            padding-top: 10px;
            padding-bottom: 10px;
            height: auto;
            border-radius: 4px;
        }

            /*#sliderSpace .sliderFilter .filterBox .justifyFilter .selectArea {
                width: 100%;
                margin-bottom: 10px;
            }

            #sliderSpace .sliderFilter .filterBox .justifyFilter .selectRegion {
                display: none;
            }

            #sliderSpace .sliderFilter .filterBox .justifyFilter .selectCategory {
                width: 100%;
            }*/

            #sliderSpace .sliderFilter .filterBox .justifyFilter .selectArea,
            #sliderSpace .sliderFilter .filterBox .justifyFilter .selectCategory,
            #sliderSpace .sliderFilter .filterBox .justifyFilter .selectRegion {
                width: 100%;
                margin-bottom: 10px;
            }

                #sliderSpace .sliderFilter .filterBox .justifyFilter .selectArea select,
                #sliderSpace .sliderFilter .filterBox .justifyFilter .selectCategory select,
                #sliderSpace .sliderFilter .filterBox .justifyFilter .selectRegion select {
                    height: 40px;
                }

            #sliderSpace .sliderFilter .filterBox .filterButton {
                width: 18%;
            }

                #sliderSpace .sliderFilter .filterBox .filterButton button {
                    background-color: rgba(225, 0, 27, 0.9);
                }

                #sliderSpace .sliderFilter .filterBox .filterButton button {
                    height: 90px;
                }

    .homepageSlider-content h2 {
        font-size: 40px;
        line-height: 44px;
        max-height: 130px;
    }
    /*                end of slider */
    /*    content */
    /*biodivercity */ /*kolkheti tree*/
    #secondPart .biodivercityBox {
        width: 49%;
        margin-bottom: 20px;
    }

        #secondPart .biodivercityBox .biodivercityText p {
            max-height: 95px;
        }

    #secondPart .kolkhetiBox {
        width: 49%;
    }

    #thirdyPart .thirdyOne .appLinks .appText h2, #thirdyPart .thirdyTwo .appLinks .appText h2 {
        font-size: 18px;
        line-height: 25px;
    }


    /*        footer */
    /* grows with the links; the bottom padding keeps room for the text (or, on phones, the contacts) placed at the bottom */
    #footer {
        align-items: start;
        padding-top: 20px;
        position: relative;
        height: auto;
        min-height: 320px;
        padding-bottom: 130px;
        box-sizing: border-box;
    }

        #footer .center .footerFirst {
            display: flex;
            position: absolute;
            bottom: 30px;
            width: 90%;
            max-width: inherit;
        }

            #footer .center .footerFirst h1 {
                margin-bottom: 4px;
            }

            #footer .center .footerFirst p {
                max-height: 68px;
                overflow: hidden;
            }

        #footer .center .footerSecond {
            width: 64%;
        }

        #footer .center .footerFirst p {
        }

        #footer .center .footerThird {
            width: 34%;
        }

        #footer .center .footerSecond .suggestLinks .suggestLeft {
            width: 48%;
        }

    #fourthPart .center h2 span:last-child {
        font-size: 25px;
    }
}

@media (max-width: 999px) {
    /*   inner content / შიდა გვერდები / innerContent / ინნერ */
    #content.innerContent .center {
        flex-direction: row;
    }

        #content.innerContent .center .rightInner {
            display: none;
        }

        #content.innerContent .center .leftInner {
            width: 96%;
        }
}

@media (max-width: 899px) {
    /*    links*/
    #thirdyPart .thirdyOne {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        /* optional: hide scrollbar */
        scrollbar-width: none;
        position: relative;
    }

        #thirdyPart .thirdyOne::-webkit-scrollbar {
            display: none;
        }

        #thirdyPart .thirdyOne .appLinks {
            flex: 0 0 auto;
            width: 45%;
            min-width: 240px;
            scroll-snap-align: start;
        }

    #thirdyPart .scrollHint {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 40px;
        color: rgba(0,0,0,0.3);
        pointer-events: none;
        animation: blink 1.5s infinite;
    }
    /*        inner content სახელმწიფო ნაკრძალები */
    #content .center .leftInner .areaInfo .areaImage h2 {
        font-size: 30px;
    }
}

@media (max-width: 750px) {
    #content .leftSide .contentBox .simpleNews, #content .leftInner .newsBox .simpleNews {
        width: 100%;
    }
    /*search*/

    #header .socialBlock {
        top: 300px;
    }
    /*    slider */
    .homepageSlider-content h2 {
        font-size: 32px;
        line-height: 35px;
        max-height: 135px;
    }
    /*    slider */
    #sliderSpace .sliderFilter .filterBox {
        display: flex;
        flex-direction: column;
    }

        /*#sliderSpace .sliderFilter .filterBox .justifyFilter .selectCategory {
                display: none;
            }*/

        #sliderSpace .sliderFilter .filterBox .justifyFilter {
            width: 100%;
        }

        #sliderSpace .sliderFilter .filterBox .filterButton {
            width: 100%;
        }

            #sliderSpace .sliderFilter .filterBox .filterButton button {
                width: 100%;
                height: 32px;
                font-size: 14px;
            }
    /*    content */ /*news*/
    #content {
        margin-bottom: 20px;
    }

        #content h2 {
            font-size: 20px;
        }

        #content .leftSide .contentBox .simpleNews:nth-child(4), #content .leftSide .contentBox .simpleNews:nth-child(3) {
            display: none;
        }
        /*    calendar */
        #content .rightSide {
            flex-direction: column;
        }

            #content .rightSide .calendarBox {
                width: 100%;
                margin-bottom: 20px;
            }

            #content .rightSide .protectedMap {
                width: 100%;
            }
    /*   carrousel gallery */
    #fourthPart .center h2 span:first-child {
        display: none;
    }
    /*        biodivercity kolkheti*/

    #secondPart .center {
        flex-direction: column;
    }

    #secondPart .biodivercityBox {
        width: 100%;
        margin-bottom: 20px;
    }

        #secondPart .biodivercityBox .biodivercityText p {
            max-height: 95px;
        }

    #secondPart .kolkhetiBox {
        width: 100%;
    }

    #secondPart .kolkhetiBox {
        margin-bottom: 20px;
    }
    /*      end of kolkheti  */
    #fourthPart .center h2 span:last-child {
        font-size: 20px;
    }
    /*   footer*/
    #footer .center .footerSecond {
        width: 100%;
    }

    #footer .center .footerThird {
        width: 94%;
        position: absolute;
        bottom: 30px;
    }

        #footer .center .footerThird .suggestLinks {
            display: flex;
            justify-content: space-between;
        }

        #footer .center .footerSecond h2, #footer .center .footerThird h2 {
            font-size: 14px;
            margin-bottom: 10px;
        }

        #footer .center .footerThird .suggestLinks h4 {
            width: 42%;
        }

    #footer .center .footerFirst {
        display: none;
    }

    #footer .center .footerThird .suggestLinks h4:nth-child(3) {
        text-indent: -9999px;
        background: none;
        width: 60px;
    }
    /*        ტენდერები */
    #content .center .leftInner .tenderBox .simpleTender .tenderInfo, #content .center .leftInner .vacancyList .vacancyInfo {
        width: 100%;
    }

    #content .center .leftInner .tenderBox .simpleTender .tenderTime, #content .center .leftInner .vacancyList .vacancyTime {
        width: calc(100% - 130px);
    }
    /* "See more" sits next to the date: 120px wide, smaller height */
    #content .center .leftInner .tenderBox .simpleTender a.tenderMore,
    #content .center .leftInner .vacancyList .simpleVacancy a.vacancyMore {
        width: 120px;
        height: 38px;
    }

    /* long titles may use more than two lines on phones */
    #content .center .leftInner .tenderBox .simpleTender .tenderInfo h4 {
        max-height: none;
    }

    #footer .center .footerThird .suggestLinks h4:nth-child(3) a {
        background: none;
    }
    /*       შიდა გვერდები     inner content */
    #content.innerContent .center .leftInner {
        width: 90%
    }

    #content .center .leftInner .publicBox .publicInput .publicSplit input {
        width: 100%;
    }

    #content .center .leftInner .publicBox .publicInput .publicSplit .forPersonalMail {
        width: 100%;
        margin-bottom: 20px;
    }

    #content .center .leftInner .publicBox .publicInput .publicSplit.marginBtm input:first-child {
        margin-bottom: 20px;
    }

    #content .center .leftInner .publicBox .publicInput .publicSplit .forUploadFile {
        width: 100%;
    }
    /*        filter ფილტრი inner news */
    #content .center .leftInner .projectFilter {
        flex-wrap: wrap;
        height: 140px;
    }

        #content .center .leftInner .projectFilter input {
            width: 100%;
        }

        #content .center .leftInner .projectFilter .datePick {
            width: calc(100% - 110px);
        }
    /*            საჯარო ინფორმაცია / publicinformation */
    #content .center .leftInner .viewLink.aInside {
        height: 120px;
    }

        #content .center .leftInner .viewLink.aInside .simpleView {
            display: flex;
            flex-wrap: wrap;
            height: 100%;
            align-items: center;
        }

            #content .center .leftInner .viewLink.aInside .simpleView h4 {
                width: 100%;
                height: 17px;
                margin-left: 0;
            }

    /*pagination start*/
    #content .center .leftInner .pagination {
        gap: 6px;
    }

        #content .center .leftInner .pagination .pageLink {
            min-width: 36px;
            height: 36px;
            padding: 0 10px;
            font-size: 13px;
        }

            #content .center .leftInner .pagination .pageLink.prevNext {
                padding: 0 14px;
                font-size: 12px;
            }


    /*pagination end*/

}

@media (max-width: 550px) {

    #content .center .leftInner .deputyCard.simpleThird {
        flex-wrap: wrap;
        justify-content: space-between;
    }

        #content .center .leftInner .deputyCard.simpleThird .simpleEmpl {
            width: 100%;
            margin-right: 0;
        }
}

@media (max-width: 500px) {
    #header .logoSpace h1 {
        display: none;
    }
    /*    footer */
    #footer .center .footerThird .suggestLinks h4 {
        width: 60%;
    }

        #footer .center .footerThird .suggestLinks h4:nth-child(2) a {
            background: none;
        }

        #footer .center .footerThird .suggestLinks h4:nth-child(2) {
            text-indent: -9999px;
            background: none;
            width: 60px;
        }
    /*            სახელმწიფო ნაკრძლაები*/
    #content .center .leftInner .areaInfo .areaImage {
        display: none;
    }

    #content .center .leftInner .areaInfo button {
        left: 26%;
    }

    #content .center .leftInner .areaList .simpleArea {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        min-height: 100px;
        padding: 16px 12px;
        gap: 8px;
    }

        #content .center .leftInner .areaList .simpleArea h2 {
            width: 100%;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 1.3;
            justify-content: center;
            text-align: center;
        }

            #content .center .leftInner .areaList .simpleArea h2:empty {
                display: none;
            }

        #content .center .leftInner .areaList .simpleArea button {
            height: 32px;
        }
    /*            საჯარო ინფორმაცია / publicinformation */
    #content .center .leftInner .viewLink.aInside {
        height: 120px;
    }

        #content .center .leftInner .viewLink.aInside .simpleView {
            display: flex;
            flex-wrap: wrap;
            height: 100%;
            align-items: center;
            width: 100%;
        }

            #content .center .leftInner .viewLink.aInside .simpleView h4 {
                width: 100%;
                height: 34px;
                line-height: 17px;
                margin-left: 0;
            }

        #content .center .leftInner .viewLink.aInside time {
            display: none;
        }
}

@media (max-width: 450px) {
    /*    slider */
    #sliderSpace {
        height: 500px;
    }

    .homepageSlider-content h2 {
        font-size: 20px;
        line-height: 23px;
        max-height: 69px;
        margin-bottom: 10px;
    }

    .homepageSlider-content p {
        font-size: 13px;
        line-height: 15px;
        max-height: 60px;
    }

    .homepageSlider-btn {
        width: 160px;
        height: 36px;
        margin: 0;
        font-size: 14px;
        background: rgba(225, 0, 27, 0.6) url(../images/bioarrow.png) no-repeat center right 15px;
        padding-left: 10px;
        border-radius: 6px;
    }

    #sliderSpace .sliderFilter {
        display: none;
    }
}

/* =========================================================
   Publications accordion: category badge + title side by side,
   the title wraps in its own column instead of under the badge.
   (kept at the end of the file so it wins over earlier accordion rules)
   ========================================================= */
#content .center .leftInner button.accordion h4 {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

    #content .center .leftInner button.accordion h4 .accartionTitle {
        flex-shrink: 0; /* the badge never gets squeezed */
        margin-right: 0; /* spacing comes from gap */
    }

    #content .center .leftInner button.accordion h4 .accordionName {
        flex: 1;
        min-width: 0;
        line-height: 1.3;
    }

/* very small phones: badge above the title */
@media (max-width: 420px) {
    #content .center .leftInner button.accordion h4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* "See more" link in area-style lists: smaller on phones (same as the old button) */
@media (max-width: 500px) {
    #content .center .leftInner .areaList .simpleArea a.areaMore {
        height: 32px;
    }
}

/* Header with the ☰ menu (screens up to 1300px): logo on the left; language,
   search and the ☰ button on the right, all on one line, the menu drops down
   under the button. The accessibility widget's bigger font sizes use the same
   layout on wider screens (.a11y-compact-nav in accessibility.css). */
@media (max-width: 1300px) {
    #header .menuBox {
        order: 1;
        align-self: center;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        margin-left: 12px;
        position: relative;
    }

        #header .menuBox nav { /* inner pages wrap the menu in a second nav */
            display: block;
            width: auto;
            height: auto;
            min-height: 0;
            margin: 0;
            position: static;
        }

    /* a round button like the search button next to it: grey lines on light grey */
    #header nav.mainMenu > div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        position: static;
        border-radius: 50%;
        background-color: #F8F8F8;
        box-shadow: rgba(0, 0, 0, 0.03) 0 6px 24px 0, rgba(0, 0, 0, 0.04) 0 0 0 1px;
    }

        #header nav.mainMenu > div .bars {
            display: block;
            height: auto;
        }

        #header nav.mainMenu > div #nav-icon1 {
            display: block;
            width: 22px;
            height: 12px;
            margin: 0;
        }

            #header nav.mainMenu > div #nav-icon1 span {
                background-color: #818181;
            }

    #header .logoSpace {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
    }

    #header .langSearch {
        margin-left: auto;
    }

    #header nav.mainMenu > ul {
        width: max-content;
        min-width: 300px;
        max-width: 85vw;
        top: calc(100% + 10px);
        right: 0;
        left: auto;
    }

        #header nav.mainMenu > ul > li {
            align-items: stretch;
        }

            #header nav.mainMenu > ul > li > a,
            #header nav.mainMenu > ul ul li a {
                text-align: left;
            }
}

/* Header on tablets and phones */
@media (max-width: 999px) {
    /* The "test mode" notice is a red strip above the header instead of
       floating over it, where it covered the language, search and menu buttons */
    .testMode {
        position: relative;
        background-color: #CB0C24;
    }

    /* On the home page the header then follows the strip, still laid over the slider */
    #header:not(.inner) {
        position: relative;
    }

    #header:not(.inner) + #sliderSpace {
        margin-top: -100px;
    }

    /* Search opens as a bar under the header, the full width of the page,
       rather than stretching over the logo and the other buttons. The
       search button stays where it is. */
    #header .center {
        position: relative;
    }

    #header .langSearch {
        position: static;
    }

    #header .searchBox {
        width: auto;
    }

    .sb-search {
        position: static;
        flex-shrink: 0;
    }

        .sb-search.open {
            width: 48px;
            overflow: visible;
            border-radius: 28px;
        }

            .sb-search.open .sb-form {
                position: absolute;
                top: calc(100% + 6px);
                left: 0;
                right: 0;
                width: auto;
                padding: 6px 6px 6px 12px;
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
                z-index: 9999;
            }
}

/* Home page slider on tablets and phones: its text starts under the header
   and the slider grows when a long title or description needs more room,
   instead of the text running up behind the logo. The slides are stacked in
   one grid cell, so the slider is as tall as its longest slide. */
@media (max-width: 1100px) {
    #sliderSpace {
        height: auto;
        min-height: 700px;
    }

    .homepageSlider-track {
        display: grid;
        height: auto;
    }

    .homepageSlider-slide {
        position: relative;
        grid-area: 1 / 1;
        height: auto;
        align-items: stretch;
    }

    .sliderCenter {
        height: auto;
        padding-top: 120px;
    }
}

/* Phones: the area filter is hidden, so the slider text sits lower */
@media (max-width: 450px) {
    #sliderSpace {
        min-height: 500px;
    }

    .sliderCenter {
        padding-bottom: 40px;
    }
}
