@import '/templates/parafia2025/css/opensans.css';

/* Kolory */
:root {
    --main-background-color: #fdfaef;
    --header-background-color: #f4eed8;
    --main-text-color: #222;
    --header-color: #008282; /* Kolor bazowy */
    --headings-color: #066666;
    --light-text-color: #708c8c;
    --line-border-color: #a3cccc;
    --table-border-color: #cccccc;
}

/* Style podstawowe */
* {
    box-sizing: border-box;
}

body {
    font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
    color: var(--main-text-color);
    background-color: var(--main-background-color);
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 28px;
    color: var(--headings-color);
}

h2 {
    color: var(--headings-color);
    font-weight: 600;
    margin: 20px 0 0 0;
}

a {
    color: #066666;
}
a:hover, a:active, a:focus {
	color: #d16014;
}

dl, dd {
    margin: 0;
}

ol, ul {
    padding-left: 24px;
}

ol li, ul li {
	margin: 6px 0;
}

th {
    padding: 4px;
    text-align: left;
}

hr {
    height: 1px;
    background-color: var(--line-border-color);
    border: none;
}

/* Skip link - https://dequeuniversity.com/rules/axe/4.10/skip-link */
a.skip {
    position: absolute;
    left: -9999px;
    top: 6px;
    z-index: 999;
    padding: 8px;
    background-color: #f3f1e5;
    color: #333333;
}

a.skip:focus {
    left: 50%;
    transform: translateX(-50%);
}

/* Nagłówek strony */
header {
    text-align: center;
    padding: 0;
    background-color: var(--header-background-color);
}
header img {
    width: 100%;
    max-width: 1000px;
    vertical-align: middle;
}

/* Główne menu */
nav.mainmenu {
    padding: 0;
}
nav.mainmenu div.mainmenuhead {
    font-weight: 600;
}
nav.mainmenu ul {
    padding: 8px 16px;
    margin: 0;
    list-style: none;
    background-color: #fbf7e8;
}
nav.mainmenu ul li {
    padding: 2px 0;
	margin: 0;
}
nav.mainmenu ul li ul {
    padding: 0;
    border: none;
    font-size: 100%;
}
nav.mainmenu ul li ul li {
    padding: 2px 10px;
}
nav.mainmenu li a {
    display: block;
    padding: 4px 0;
    text-decoration-color: var(--line-border-color);
}
nav.mainmenu li.current > a {
    font-weight: bold;
    text-decoration: none;
}

@media (max-width: 999px) {
    nav.mainmenu {
        position: relative;
        overflow: visible;
    }
    nav.mainmenu div.mainmenuhead {
        /* A może tu trzeba po prostu zrobić float: right ??? */
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        padding: 6px 32px 6px 12px;
        color: var(--main-background-color);
        background-color: var(--header-color);
        background-image: url(/templates/parafia2025/images/menu.svg);
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position: 60px 6px;
        cursor: pointer;
    }
    nav.mainmenu ul {
        border-bottom: 1px solid var(--header-color);
    }
    nav.mainmenu ul > li {
        padding-bottom: 3px;
        border-bottom: 1px solid var(--table-border-color);
    }
    nav.mainmenu ul > li:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
    nav.mainmenu li > a {
        text-decoration: none;
    }
    nav.mainmenu div._menu {
        height: 0;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.75s;
    }
    nav.mainmenu div._menu.onscreen {
        height: auto;
        visibility: visible;
        opacity: 1;
    }
}

@media (min-width: 1000px) {
    nav.mainmenu {
        position: absolute;
        left: calc(50vw - 500px);
        width: 200px;
    }
    nav.mainmenu div.mainmenuhead {
        font-size: 1.5em;
        color: var(--headings-color);
        background-color: var(--header-background-color);
        margin: 12px 0 0 0;
        padding: 0 0 3px 12px;
        border: 1px solid var(--line-border-color);
        border-bottom: none;
    }
    nav.mainmenu ul {
        font-size: 90%;
        border: 1px solid var(--line-border-color);
    }
}

/* Główny obszar z treścią */
main {
    padding: 0 16px;
    overflow: auto; /* Necessary to avoid margin collapse */
}

@media (min-width: 1000px) {
    main {
        margin-left: calc(50vw - 300px);
        width: 800px;
    }
}

/* Ścieżka (breadcrumbs) */
#pathway ol {
    font-size: 92%;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-border-color);
    margin: 0;
}

#pathway ol li {
    /* Ścieżka wyświetlana poziomo */
    display: inline;
    background: none;
    padding: 0;
}

#pathway a {
    text-decoration-color: var(--line-border-color);
}

#pathway ol li.mod-breadcrumbs__divider {
    display: none;
}

#pathway ol li.mod-breadcrumbs__item {
    margin-left: 0;
    padding-right: 26px;
    background-image: url(/templates/parafia2025/images/arrow.png);
    background-repeat: no-repeat;
    background-position: top 7px right 11px;
}

#pathway ol li.active {
    background: none;
}

@media (max-width: 999px) {
    /* Rezerwacja miejsca na menu po prawej stronie */
    #pathway ol::before {
        content: '';
        float: right;
        width: 72px;
        height: 16px;
        /* background-color: red; */
    }
}

/* Style modułów takie same jak artykułów */
div.moduletable h3 {
    color: var(--headings-color);
    padding-bottom: 6px;
    margin: 20px 0 0 0;
    border-bottom: 1px solid var(--line-border-color);
    font-size: 1.5em;
    font-weight: 600;
}

/* Msze */
.moduletable.msze h3 {
    margin: 12px 0 12px 0;
}
.moduletable.msze ul {
    margin: 0;
    padding: 0;
}
.moduletable.msze li {
    display: inline-block;
    margin-right: 20px;
    vertical-align: top;
}

/* Ogłoszenia na głównej stronie */
.moduletable.ogloszenia ul {
    padding-left: 0;
    list-style: none;
}

/* Nagłówki artykułów/elementów bloga */
div.blog-item h2 {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-border-color);
}
div.blog-item h2 a {
    text-decoration: none;
    color: var(--headings-color);
}

dt.article-info-term {
    display: none;
}
dl.article-info {
    margin-top: 6px;
}
dd.published {
    padding: 1px 3px 3px 22px;
    color: var(--light-text-color);
    background: url(/templates/parafia2025/images/calendar.png) no-repeat 0 4px;
    font-style: italic;
    font-size: 90%;
}

/* Strona z jednym artykułem - tak samo jak elementy bloga */
div.com-content-article h1 {
    color: var(--headings-color);
    border-bottom: 1px solid var(--line-border-color);
    /* Tak samo jak h2 */
    font-size: 1.5em;
    font-weight: 600;
    margin: 20px 0 0 0;
}

/* Ukryj nawigację na stronie */
nav.pagenavigation {
    display: none;
}

/* Stopka */
footer {
    padding: 1em 1em;
    color: #666;
    font-style: italic;
    font-size: 90%;
}
footer div.footer1 {
    border-top: 1px solid var(--line-border-color);
    padding: 0.75em 0 0.25em 0;
}

@media (min-width: 1000px) {
    footer {
        margin-left: calc(50vw - 300px);
        width: 800px;
    }
}

/* Ramka dla tabelek w artykulach */
table.article-std {
	border-spacing: 0;
	border-collapse: collapse;
}

table.article-std td {
	border: 1px solid var(--table-border-color);
	padding: 4px;
	vertical-align: top;
}

/* Galeria */
@media (max-width: 999px) {
    ul.sigFreeClassic li.sigFreeThumb {
        margin: 2px;
        padding: 2px;
        border: 1px solid var(--table-border-color);
    }
}
@media (min-width: 1000px) {
    ul.sigFreeClassic li.sigFreeThumb {
        margin: 4px;
        padding: 4px;
        border: 1px solid var(--table-border-color);
    }
}

/* Wstawki - spis tresci (contenttoc) */
table.contenttoc {
    margin: 0 0 12px 12px;
    padding: 0;
    width: 35%;
    float: right;
}

table.contenttoc a {
    text-decoration: none;
}

table.contenttoc td {
    padding: 4px 0 4px 6px;
}

table.contenttoc th {
    padding: 0 0 4px 6px;
    border-bottom: 1px solid var(--table-border-color);
    /* text-indent: 5px; */
}

/* Sekcja - więcej artykułów */
div.com-content-blog__links-more {
    font-weight: bold;
    color: var(--headings-color);
    margin-top: 36px;
    padding-top: 12px;
    border-top: 1px solid var(--line-border-color);
}

/* Drukowanie */
@media print {
    nav.mainmenu {
        display: none !important;
    }
}