/* maincatalog design on top of Cassiopeia (loaded last as template.user) */

/* ---- base ---- */
body.site-maincatalog {
    --bs-body-color: #4b4a4a;
    --bs-body-bg: #f5f4f4;
    --bs-body-font-family: Arial, Helvetica, sans-serif;
    --bs-body-font-size: 12px;
    --bs-body-line-height: 19px;
    --cassiopeia-color-link: #4b4a4a;
    --cassiopeia-color-hover: #727771;
    margin: 0;
    color: #4b4a4a;
    background-color: #f5f4f4;
    font: normal 12px/19px Arial, Helvetica, sans-serif;
}

.site-maincatalog img {
    border: 0;
}

.site-maincatalog a {
    color: #4b4a4a;
}

.site-maincatalog a:hover,
.site-maincatalog a:focus {
    color: #727771;
    text-decoration: underline;
}

/* ---- page frame ---- */
.mc-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

.mc-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 164px;
    background: url(../images/headerbg.png) no-repeat transparent;
}

.mc-logo {
    margin-top: 51px;
    margin-inline-start: 18px;
}

.mc-logo img {
    max-width: 100%;
    height: auto;
}

.mc-topmenu {
    margin-top: 35px;
    padding-inline-end: 15px;
}

.mc-topmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.mc-topmenu li {
    color: #727771;
}

.mc-topmenu a {
    font-size: 12px;
    font-weight: bold;
    color: #727771;
    text-decoration: none;
}

.mc-content {
    padding: 44px 26px;
    background: url(../images/contbg.png) repeat-x transparent;
}

/* ---- footer ---- */
.mc-footer {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 40px;
    padding-bottom: 30px;
}

.mc-footerlogo {
    flex: 0 0 192px;
    height: 41px;
    background: url(../images/footerlogo.png) no-repeat transparent;
}

.mc-footercontent {
    flex: 1 1 auto;
    min-height: 31px;
    margin-top: 10px;
    padding-top: 7px;
    padding-inline-start: 20px;
    font-size: 9px;
    background: url(../images/footbg.png) repeat-x transparent;
}

.mc-footercontent p {
    margin: 0;
    padding: 0;
    color: #4b4a4a;
}

.mc-footercontent a {
    color: #4b4a4a;
}

/* ---- home page: featured catalogs (2 x 2 tiles) ----
 * Article order -> colour is kept from the Joomla 3 layout:
 * 1 orange, 2 blue, 3 green, 4 brown (columns flow downwards).
 */
.blog-featured {
    min-height: 481px;
}

.blog-featured .blog-items:not(.items-leading) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 0 20px;
    column-count: initial;
}

.blog-featured .blog-item {
    min-height: 300px;
    margin-inline-end: 5px;
    padding-top: 0;
    padding-inline-start: 10px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
}

.blog-featured .blog-item img {
    padding-inline-end: 16px;
}

.blog-featured .blog-item ul {
    width: 88%;
}

.blog-featured .blog-item li {
    padding-bottom: 4px;
    font-size: 11px;
    font-weight: bold;
}

.blog-featured .blog-item .footblog {
    position: relative;
    top: -5px;
    width: 88%;
    font-size: 10px;
    font-weight: bold;
}

.blog-featured .blog-item h2 {
    margin: 0 0 9px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    padding-top: 11px;
    padding-inline-start: 20px;
    background: no-repeat 0 14px transparent;
}

.blog-featured .blog-item h2 a {
    color: inherit;
    text-decoration: none;
}

.blog-featured .blog-item:nth-child(4n+1) {
    background-image: url(../images/bg1.png);
}

.blog-featured .blog-item:nth-child(4n+1) h2 {
    color: #fca704;
    background-image: url(../images/h11.png);
}

.blog-featured .blog-item:nth-child(4n+2) {
    background-image: url(../images/bg3.png);
}

.blog-featured .blog-item:nth-child(4n+2) h2 {
    color: #2c319d;
    background-image: url(../images/h13.png);
}

.blog-featured .blog-item:nth-child(4n+3) {
    background-image: url(../images/bg2.png);
}

.blog-featured .blog-item:nth-child(4n+3) h2 {
    color: #459d2c;
    background-image: url(../images/h12.png);
}

.blog-featured .blog-item:nth-child(4n+4) {
    background-image: url(../images/bg4.png);
}

.blog-featured .blog-item:nth-child(4n+4) h2 {
    color: #927846;
    background-image: url(../images/h14.png);
}

/* ---- small screens ---- */
@media (max-width: 767.98px) {
    .mc-header {
        background-size: cover;
    }

    .mc-topmenu {
        width: 100%;
        margin-top: 1rem;
        padding-inline: 18px;
    }

    .mc-content {
        padding: 24px 16px;
    }

    .blog-featured .blog-items:not(.items-leading) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .mc-footer {
        flex-direction: column;
    }

    .mc-footerlogo {
        flex-basis: 41px;
        width: 192px;
    }

    .mc-footercontent {
        width: 100%;
    }
}