/* ==========================================================
   RAKOSPALOTAI EVANGELIKUS GYULEKEZET
   Joomla 5 / Cassiopeia
   FINAL CONSOLIDATED USER.CSS
   ========================================================== */

:root {
    --church-gold: #b39964;
    --church-black: #000000;
    --church-text: #333333;
    --church-grey: #f5f5f5;
    --church-border: #dddddd;
    --church-white: #ffffff;

    --church-width: 1116px;
}


/* ==========================================================
   GLOBAL
   ========================================================== */

body {
    margin: 0;

    background: var(--church-grey);
    color: var(--church-text);

    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
}


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

.container-header {
    position: relative;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--church-black) !important;
    background-image: none !important;

    box-shadow: none !important;
}


/* Disable unused Cassiopeia branding */
.navbar-brand {
    display: none !important;
}


/* Remove unused Cassiopeia header grid row */
@media (min-width: 769px) {

    .container-header > .grid-child:not(.container-nav) {
        display: none !important;

        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ==========================================================
   TOP CONTACT STRIP - CLEAN FIX
   ========================================================== */

/* Full-width grey strip */
.container-header .container-topbar {
    box-sizing: border-box !important;

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

    height: 42px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--church-grey) !important;

    border-bottom: 3px solid var(--church-gold) !important;
}


/* The custom module itself becomes our centred container */
.container-header .container-topbar > * {
    box-sizing: border-box !important;

    width: calc(100% - 30px) !important;
    max-width: var(--church-width) !important;

    height: 39px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;
}


/* Actual contact row */
.top-contact-bar {
    box-sizing: border-box !important;

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

    height: 39px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: space-between !important;

    color: var(--church-gold) !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    line-height: 24px !important;
}


/* LEFT: Facebook */
.top-contact-bar .top-left {
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
}


/* RIGHT: phone + email */
.top-contact-bar .top-right {
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;

    gap: 16px !important;

    color: var(--church-gold) !important;

    white-space: nowrap !important;
}


/* Contact links */
.top-contact-bar a {
    color: var(--church-gold) !important;
    text-decoration: none !important;
}


/* ==========================================================
   FACEBOOK ICON
   ========================================================== */

.top-facebook {
    display: inline-block !important;

    width: 20px !important;

    color: var(--church-gold) !important;

    font-size: 0 !important;

    text-decoration: none !important;
}


.top-facebook::before {
    content: "f";

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    line-height: 24px;

    color: var(--church-gold);

    opacity: 0.75;
}


/* ==========================================================
   LOGO + MENU ROW
   DOM confirmed:
   .container-nav
      ul.metismenu
      #mod-custom111
   ========================================================== */

.container-header .container-nav {
    box-sizing: border-box !important;

    width: calc(100% - 30px) !important;
    max-width: var(--church-width) !important;

    height: 90px !important;
    min-height: 90px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    background: var(--church-black) !important;
}


/* ==========================================================
   LOGO
   ========================================================== */

.container-header .container-nav #mod-custom111 {
    order: 1 !important;

    box-sizing: border-box !important;

    flex: 0 0 242px !important;

    width: 242px !important;
    min-width: 242px !important;

    height: 90px !important;
    min-height: 90px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    display: flex !important;
    align-items: center !important;

    background: var(--church-black) !important;
}


.container-header #mod-custom111 .church-title {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--church-gold) !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 24px !important;
}


.container-header #mod-custom111 .church-title a,
.container-header #mod-custom111 .church-title a:visited,
.container-header #mod-custom111 .church-title a:hover,
.container-header #mod-custom111 .church-title a:focus {
    color: var(--church-gold) !important;
    text-decoration: none !important;
}


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

.container-header .container-nav > ul.metismenu {
    order: 2 !important;

    flex: 0 0 auto !important;

    width: auto !important;

    height: 90px !important;
    min-height: 90px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    background: var(--church-gold) !important;
}


/* ==========================================================
   TOP LEVEL MENU ITEMS
   ========================================================== */

.container-header .metismenu > li.level-1 {
    position: relative !important;

    flex: 0 0 auto !important;

    width: auto !important;

    height: 90px !important;
    min-height: 90px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: stretch !important;

    background: var(--church-gold) !important;
}


.container-header .metismenu > li.level-1 + li.level-1 {
    border-left: 1px solid rgba(0, 0, 0, 0.13) !important;
}


/* Normal top-level links */

.container-header .metismenu > li.level-1 > a {
    min-height: 90px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    display: flex !important;
    align-items: center !important;

    background: var(--church-gold) !important;
    color: var(--church-white) !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    line-height: normal !important;

    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    white-space: nowrap !important;
}


/* Dropdown/menu-heading buttons */

.container-header .metismenu > li.level-1 > button.mm-toggler {
    min-height: 90px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    display: flex !important;
    align-items: center !important;

    background: var(--church-gold) !important;
    color: var(--church-white) !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;

    letter-spacing: 1px !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
}


/* ==========================================================
   DESKTOP SUBMENU
   Hover opens
   Black background
   White text
   Gold hover
   ========================================================== */

@media (min-width: 769px) {

    .container-header .metismenu > li.deeper.parent > ul.mm-collapse {
        display: none !important;
        visibility: hidden !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: var(--church-black) !important;

        overflow: visible !important;
    }


    .container-header .metismenu > li.deeper.parent:hover > ul.mm-collapse,
    .container-header .metismenu > li.deeper.parent:focus-within > ul.mm-collapse {
        display: block !important;
        visibility: visible !important;

        position: absolute !important;

        top: 100% !important;
        left: 0 !important;

        width: auto !important;
        min-width: 220px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: var(--church-black) !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        overflow: visible !important;

        z-index: 9999 !important;
    }


    .container-header .metismenu ul.mm-collapse > li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background: var(--church-black) !important;

        border: 0 !important;
    }


    .container-header .metismenu ul.mm-collapse > li > a,
    .container-header .metismenu ul.mm-collapse > li > span {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 9px 15px !important;

        background: var(--church-black) !important;
        color: var(--church-white) !important;

        font-family: "Open Sans", sans-serif !important;
        font-size: 12px !important;
        font-weight: 300 !important;
        line-height: 20px !important;

        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;

        white-space: nowrap !important;
    }


    .container-header .metismenu ul.mm-collapse > li > a:hover,
    .container-header .metismenu ul.mm-collapse > li > a:focus {
        background: var(--church-black) !important;
        color: var(--church-gold) !important;
    }
}


/* ==========================================================
   HIDE BREADCRUMBS
   ========================================================== */

.mod-breadcrumbs__wrapper,
.breadcrumb {
    display: none !important;
}


/* ==========================================================
   CONTENT AREA
   Legacy-style grey surround
   ========================================================== */

.site-grid {
    box-sizing: border-box !important;

    width: calc(100% - 30px) !important;
    max-width: var(--church-width) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 70px !important;
    padding-bottom: 70px !important;

    background: transparent !important;
}


/* ==========================================================
   ARTICLE PANEL
   ========================================================== */

.container-component {
    box-sizing: border-box !important;

    background: var(--church-white) !important;

    border: 1px solid var(--church-border) !important;

    padding: 55px 30px 45px 30px !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}


/* ==========================================================
   ARTICLE TYPOGRAPHY
   ========================================================== */

.com-content-article p,
.item-page p {
    color: var(--church-text);

    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;

    margin-top: 0;
    margin-bottom: 10px;
}


/* Article title */

.com-content-article h1,
.item-page h1,
.page-header h1,
.com-content-article__title {
    margin-top: 0 !important;

    color: var(--church-text) !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 39.6px !important;

    text-decoration: none !important;
}


/* Give article title breathing room before body */

.com-content-article .page-header,
.item-page .page-header {
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;

    border-bottom: 1px solid #eeeeee !important;
}


.com-content-article .page-header h1,
.item-page .page-header h1 {
    margin-bottom: 0 !important;
}


/* If article title is emitted without page-header */

.com-content-article__title {
    margin-bottom: 28px !important;
}


/* ==========================================================
   CONTENT LINKS
   ========================================================== */

.site-grid a,
.com-content-article a,
.item-page a,
.com-content-category a {
    color: var(--church-gold) !important;
    text-decoration: none;
}


.site-grid a:hover,
.site-grid a:focus,
.com-content-article a:hover,
.com-content-article a:focus,
.item-page a:hover,
.item-page a:focus,
.com-content-category a:hover,
.com-content-category a:focus {
    color: var(--church-gold) !important;
    text-decoration: underline;
}


/* ==========================================================
   LINKED ARTICLE/BLOG HEADINGS
   Keep titles dark, not gold
   ========================================================== */

.com-content-article__title a,
.page-header h1 a,
.page-header h2 a,
.items-leading h2 a,
.items-row h2 a,
.blog-item h2 a,
.article-title a {
    color: var(--church-text) !important;
    text-decoration: none !important;
}


.com-content-article__title a:hover,
.page-header h1 a:hover,
.page-header h2 a:hover,
.items-leading h2 a:hover,
.items-row h2 a:hover,
.blog-item h2 a:hover,
.article-title a:hover {
    color: var(--church-text) !important;
    text-decoration: none !important;
}


/* ==========================================================
   HIREK CATEGORY LIST
   ========================================================== */

.category-list a,
.com-content-category a {
    color: var(--church-gold) !important;

    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;

    text-decoration: none !important;
}

/* ==========================================================
   HIREK / CATEGORY BLOG ARTICLE DIVIDERS
   ========================================================== */

.blog-items .blog-item,
.com-content-category-blog .blog-item {
    position: relative;

    margin-bottom: 30px !important;
    padding-bottom: 30px !important;

    border-bottom: 1px solid #dddddd !important;
}


/* Remove divider after final article */

.blog-items .blog-item:last-child,
.com-content-category-blog .blog-item:last-child {
    margin-bottom: 0 !important;

    border-bottom: 0 !important;
}

/* ==========================================================
   PAGINATION
   ========================================================== */

.pagination .page-link,
.pagination li > a,
.pagination li > span {
    background: var(--church-white);

    color: var(--church-black) !important;

    border: 1px solid var(--church-border);

    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}


.pagination .active .page-link,
.pagination li.active > a,
.pagination li.active > span,
.page-item.active .page-link {
    background: var(--church-gold) !important;

    border-color: var(--church-gold) !important;

    color: var(--church-white) !important;

    border-radius: 4px;
}


/* ==========================================================
   FOOTER
   EXACT 24PX GOLD STRIP
   ========================================================== */

.container-footer,
footer.container-footer {
    box-sizing: border-box !important;

    width: 100% !important;

    height: 24px !important;
    min-height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--church-gold) !important;
    background-image: none !important;

    color: var(--church-white) !important;
}


/* Footer inner container */

.container-footer .grid-child {
    box-sizing: border-box !important;

    width: calc(100% - 30px) !important;
    max-width: var(--church-width) !important;

    height: 24px !important;
    min-height: 24px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    color: var(--church-white) !important;
}


/* Footer modules */

.container-footer .mod-custom,
.container-footer .mod-footer {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    color: var(--church-white) !important;

    line-height: 24px !important;
}


/* Footer text */

.container-footer p {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--church-white) !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    line-height: 24px !important;

    text-align: center !important;
}


.container-footer a,
.container-footer a:visited,
.container-footer a:hover,
.container-footer a:focus {
    color: var(--church-white) !important;
    text-decoration: none !important;
}


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

@media (max-width: 768px) {

    .container-header .container-topbar,
    .top-contact-bar,
    .container-header .container-nav,
    .site-grid {
        width: calc(100% - 30px) !important;
        max-width: none !important;
    }


    .top-contact-bar {
        height: auto !important;

        flex-wrap: wrap !important;

        gap: 4px 15px;
    }


    .container-header .container-nav {
        height: auto !important;
        min-height: auto !important;

        flex-direction: column !important;
        flex-wrap: wrap !important;
    }


    /* Logo first */

    .container-header .container-nav #mod-custom111 {
        order: 1 !important;

        flex: 1 1 auto !important;

        width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: auto !important;

        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }


    /* Menu second */

    .container-header .container-nav > ul.metismenu {
        order: 2 !important;

        width: 100% !important;

        height: auto !important;
        min-height: auto !important;

        flex-direction: column !important;
    }


    .container-header .metismenu > li.level-1,
    .container-header .metismenu > li.level-1 > a,
    .container-header .metismenu > li.level-1 > button.mm-toggler {
        height: auto !important;
        min-height: auto !important;
    }


    .container-header .metismenu > li.level-1 > a,
    .container-header .metismenu > li.level-1 > button.mm-toggler {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }


    .site-grid {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }


    .container-component {
        padding: 30px 20px !important;
    }
}