/* ======================================================
   METRYKI WOŁYŃ - WARIANT A ARCHIWUM
   Joomla 5 / Cassiopeia
   ====================================================== */

:root {

    --wolyn-brown: #6b4a34;
    --wolyn-brown-dark: #4a3121;
    --wolyn-brown-light: #9b6d45;

    --wolyn-paper: #f8f4ea;
    --wolyn-paper-dark: #efe7d8;
    --wolyn-paper-border: #d9ccb3;

    --wolyn-shadow: 0 3px 12px rgba(0,0,0,.08);
}

/* ======================================================
   BODY
   ====================================================== */

body {

    background: #f4efe3;

    color: #2c2925;

    font-family: Georgia, "Times New Roman", serif;

    line-height: 1.7;
}

/* ======================================================
   HEADER
   ====================================================== */

.header {

    background:
        linear-gradient(
            to bottom,
            #f2ebdc,
            #e5d9c3
        );

    border-bottom: 4px solid var(--wolyn-brown);

    box-shadow: var(--wolyn-shadow);
}

/* ======================================================
   TYTUŁ STRONY
   ====================================================== */

.navbar-brand,
.navbar-brand a,
.brand-text {

    font-family: Georgia, serif !important;

    color: var(--wolyn-brown) !important;

    font-size: 2.6rem !important;

    font-weight: 700 !important;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-shadow:
        1px 1px 0 #fff,
        2px 2px 3px rgba(0,0,0,.08);
}

.site-description,
.brand-description {

    font-style: italic;

    color: #8b6a4c;

    font-size: 1rem;
}

/* ======================================================
   MODUŁY
   ====================================================== */

.card,
.moduletable {

    background: var(--wolyn-paper);

    border: 1px solid var(--wolyn-paper-border);

    border-radius: 10px;

    overflow: hidden;

    box-shadow: var(--wolyn-shadow);
}

.sidebar-left .card {

    margin-bottom: 15px;
}

/* ======================================================
   NAGŁÓWKI MODUŁÓW
   ====================================================== */

.card-header,
.moduletable h3 {

    background:
        linear-gradient(
            to right,
            #65422f,
            #8a6241
        );

    color: white;

    margin: 0;

    padding: 12px 16px;

    font-size: 1.05rem;

    font-weight: 600;
}

/* ======================================================
   MENU ARCHIWUM
   ====================================================== */

.sidebar-left .mod-menu {

    list-style: none;

    margin: 0 !important;

    padding: 10px !important;
}

.sidebar-left .mod-menu > li {

    margin: 0 !important;

    padding: 0 !important;
}

/* ======================================================
   POZYCJA MENU
   ====================================================== */

.sidebar-left .mod-menu > li > a {

    display: block !important;

    padding: 12px 14px !important;

    margin: 0 !important;

    background: #fbf8f2;

    color: var(--wolyn-brown) !important;

    text-decoration: none !important;

    font-weight: 600;

    border-left: 5px solid var(--wolyn-brown);

    border-top: 1px solid #e2d8c6;

    border-right: 1px solid #e2d8c6;

    border-bottom: 1px solid #e2d8c6;

    transition: all .2s ease;
}

/* Linia pomiędzy pozycjami */

.sidebar-left .mod-menu > li + li > a {

    border-top: none;
}

/* ======================================================
   HOVER
   ====================================================== */

.sidebar-left .mod-menu > li > a:hover {

    background: #efe4cf;

    border-left-color: #9b6d45;

    padding-left: 18px !important;
}

/* ======================================================
   AKTYWNA POZYCJA
   ====================================================== */

.sidebar-left .mod-menu .active > a,
.sidebar-left .mod-menu .current > a {

    background:
        linear-gradient(
            to right,
            #7a553c,
            #5b3d2a
        );

    color: white !important;

    border-left-color: #2f1f15;
}

/* ======================================================
   SUBMENU
   ====================================================== */

.sidebar-left .mod-menu .nav-child {

    margin: 0;

    padding: 0;

    list-style: none;
}

.sidebar-left .mod-menu .nav-child a {

    padding-left: 30px !important;

    font-size: .95rem;

    border-left-width: 3px;
}

/* ======================================================
   TREŚĆ ARTYKUŁÓW
   ====================================================== */

.item-content,
.com-content-article {

    background: rgba(255,255,255,.40);

    border: 1px solid var(--wolyn-paper-border);

    border-radius: 12px;

    padding: 30px;

    box-shadow: var(--wolyn-shadow);
}

/* ======================================================
   NAGŁÓWKI TREŚCI
   ====================================================== */

h1 {

    color: var(--wolyn-brown);

    font-size: 2.5rem;

    text-align: center;

    border-bottom: 2px solid #cdb998;

    padding-bottom: 10px;

    margin-bottom: 30px;
}

h2 {

    color: var(--wolyn-brown);

    margin-top: 35px;
}

h3 {

    color: #7f5b3e;
}

/* ======================================================
   LINKI
   ====================================================== */

a {

    color: var(--wolyn-brown);

    transition: .2s;
}

a:hover {

    color: var(--wolyn-brown-light);
}

/* ======================================================
   BREADCRUMB
   ====================================================== */

.breadcrumb {

    background: #f8f3e8;

    border: 1px solid #e0d3bc;

    border-radius: 6px;
}

/* ======================================================
   PRZYCISKI
   ====================================================== */

.btn-primary {

    background: var(--wolyn-brown);

    border-color: var(--wolyn-brown);
}

.btn-primary:hover {

    background: var(--wolyn-brown-light);

    border-color: var(--wolyn-brown-light);
}

/* ======================================================
   STOPKA
   ====================================================== */

.footer {

    margin-top: 50px;

    background:
        linear-gradient(
            to bottom,
            #4a3121,
            #2b1c13
        );

    color: #e7d9bf;

    padding: 30px 0;
}

.footer a {

    color: #f3e7d6;
}

.footer a:hover {

    color: white;
}

/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width: 768px) {

    .navbar-brand,
    .navbar-brand a {

        font-size: 1.9rem !important;

        letter-spacing: 1px;
    }

    h1 {

        font-size: 2rem;
    }
}