/* =========================================================
   USER.CSS for Cassiopeia template. Changes made to add
   the fuertedogs stylesheet

   Changes made by  : P.W. Verkerk
   Version          : 1.0
   Modification date: 13-09-2026
   ========================================================= */

:root {
    --body-color: #0b4fa4;
}

body {
    color: #0b4fa4;
}

.container-header {
  background: linear-gradient(to right, #fff, #59ade9);
}

.footer {
  background: linear-gradient(to right, #fff, #59ade9);
  color: #063b70;
}

/* =========================================================
   MAIN MENU
   ========================================================= */

.metismenu.mod-menu .metismenu-item > a {
    color: #063b70;
    font-weight: 500;
    text-decoration: none;
}

.metismenu.mod-menu .metismenu-item > a:hover,
.metismenu.mod-menu .metismenu-item > a:focus {
    color: #0b4fa4;
    text-decoration: none;
}

/* Cassiopeia menu hover underline */

.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li.active > a::after {
    background: #0b4fa4;
    height: 4px;
    border-radius: 2px;
}

/* =========================================================
   MOBILE HAMBURGER MENU
   ========================================================= */

.container-header .navbar-toggler {
    color: #063b70 !important;
    border-color: #063b70 !important;
}

.container-header .navbar-toggler:hover,
.container-header .navbar-toggler:focus {
    color: #0b4fa4 !important;
    border-color: #0b4fa4 !important;
}


/* =====================================================
   Dog photo directory
   Joomla 5 / Cassiopeia
   ===================================================== */

/* -----------------------------------------------------
   Gallery
   ----------------------------------------------------- */

.dog-grid {
    width: 100% !important;
    max-width: 920px;

    margin: 2rem auto !important;

    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 12px !important;

    table-layout: fixed;
}


/* -----------------------------------------------------
   Individual cells
   ----------------------------------------------------- */

.dog-grid td {
    background-color: #dde8ff !important;

    border: 1px solid #c5d5ee !important;
    border-radius: 10px;

    padding: 14px 10px !important;

    text-align: center !important;
    vertical-align: top;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* -----------------------------------------------------
   Hover effect
   ----------------------------------------------------- */

.dog-grid td:hover {
    background-color: #e7efff !important;

    transform: translateY(-3px);

    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.15);
}


/* -----------------------------------------------------
   Images
   ----------------------------------------------------- */

.dog-grid img {
    display: block !important;

    width: 128px !important;
    height: 160px !important;

    max-width: 100% !important;

    object-fit: cover;

    margin: 0 auto 10px !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 5px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}


/* -----------------------------------------------------
   Paragraphs
   ----------------------------------------------------- */

.dog-grid p {
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/* Hide empty paragraphs */

.dog-grid p:empty {
    display: none !important;
}


/* -----------------------------------------------------
   Dog names
   ----------------------------------------------------- */

.dog-grid td p:last-child {
    margin: 8px 0 0 0 !important;
    padding: 0 !important;

    font-size: 1rem;
    line-height: 1.3;

    font-weight: 600;

    color: #26384d;

    text-align: center !important;
}


/* -----------------------------------------------------
   Tablet and mobile
   Convert the old 4-column table into a 3-column grid
   ----------------------------------------------------- */

@media (max-width: 700px) {

    /*
     * Stop behaving like a conventional table.
     * The rows become transparent containers and
     * the cells become grid items.
     */

    .dog-grid {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 1.5rem auto !important;

        border: 0 !important;
        border-spacing: 0 !important;
        border-collapse: collapse !important;
    }

    .dog-grid tbody {
        display: grid !important;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 8px;
    }

    /*
     * The original <tr> elements no longer define
     * the layout. Their <td> children flow directly
     * into the 3-column grid.
     */

    .dog-grid tr {
        display: contents !important;
    }

    .dog-grid td {
        width: auto !important;

        box-sizing: border-box;

        padding: 8px 4px !important;

        border-radius: 9px;

        min-width: 0;
    }

    /*
     * Slightly smaller photos so three cards fit
     * comfortably on a phone.
     */

    .dog-grid img {
        width: 100px !important;
        height: 125px !important;

        max-width: 100% !important;
    }

    .dog-grid td p:last-child {
        font-size: 0.9rem;
        line-height: 1.25;
    }
}


/* -----------------------------------------------------
   Very narrow phones
   ----------------------------------------------------- */

@media (max-width: 360px) {

    .dog-grid tbody {
        gap: 6px;
    }

    .dog-grid td {
        padding: 7px 3px !important;
    }

    .dog-grid img {
        width: 90px !important;
        height: 113px !important;
    }

    .dog-grid td p:last-child {
        font-size: 0.85rem;
    }

}


/* =========================================================
   ARTICLE LIST BULLETS — SITE-WIDE incl. FOOTER
   Replaces old list-style-image: url(../images/li.png)
   with a pure CSS circle (color-matched, no image needed)
   ========================================================= */

main ul:not(.pagination):not(.mod-menu):not(.metismenu):not(.com-content-blog__links),
.footer ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

main ul:not(.pagination):not(.mod-menu):not(.metismenu):not(.com-content-blog__links) li,
.footer ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 2px;
    line-height: 1.3;
}

main ul:not(.pagination):not(.mod-menu):not(.metismenu):not(.com-content-blog__links) li::before,
.footer ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 9px;
    height: 9px;
    background-color: #e4e49b;
    border-radius: 50%;
    transform: translateY(-50%);
}

/* =========================================================
   NIEUWS - FIX HORIZONTALE OVERFLOW PAGINANAVIGATIE
   Alleen op menu-items 129, 130 en 131
   Mobiele schermen
   ========================================================= */

@media (max-width: 767px) {

    body:is(.itemid-129, .itemid-130, .itemid-131)
    .com-content-category-blog__navigation,
    body:is(.itemid-129, .itemid-130, .itemid-131)
    .com-content-category-blog__pagination,
    body:is(.itemid-129, .itemid-130, .itemid-131)
    .pagination__wrapper {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: clip;
    }

    body:is(.itemid-129, .itemid-130, .itemid-131)
    .pagination {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        gap: 2px;
    }

    body:is(.itemid-129, .itemid-130, .itemid-131)
    .pagination .page-link {
        padding: 0.375rem 0.5rem;
    }
}

/* =========================================================
   HAPPY END - RESPONSIVE ARTIKELINHOUD
   Alleen menu-item 129 op mobiele schermen
   ========================================================= */

@media (max-width: 767px) {

    body.itemid-129 .com-content-article__body,
    body.itemid-129 .com-content-article__body p,
    body.itemid-129 .com-content-article__body div {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    body.itemid-129 .com-content-article__body [style*="width"],
    body.itemid-129 .com-content-article__body p[style*="width"] {
        width: auto !important;
        max-width: 100% !important;
    }

    body.itemid-129 .com-content-article__body img {
        display: block;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =========================================================
   MENU-ITEM 129 - AFBEELDINGEN BEPERKEN TOT 160 PX HOOG
   Desktop en mobiel
   ========================================================= */

body.itemid-129 img {
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Mobiele weergave oude nieuwsartikelen */
@media (max-width: 767px) {

    body.itemid-130 .com-content-category-blog__item .item-content p {
        max-width: 100% !important;
        min-width: 0 !important;
        width: auto !important;
        box-sizing: border-box;
    }

    body.itemid-130 .com-content-category-blog__item .item-content img {
        display: block;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        box-sizing: border-box;
    }

}