/* =========================================
   VOUSATA DAMA - HEADERS UNIFIED CSS
   load as LAST css file
   ========================================= */

:root {
    --hd-color-main: #111111;
    --hd-color-h2: rgba(157, 139, 99, 1);
    --hd-color-sub: #1f1f1f;
    --hd-color-footer: #c7c7c7;

    --h1-size: clamp(28px, 3vw, 36px);
    --h2-size: clamp(24px, 2.3vw, 30px);
    --h3-size: clamp(18px, 1.45vw, 21px);
    --h4-size: clamp(17px, 1.3vw, 19px);

    --hd-line: 1.25;
    --hd-space-bottom: 0.8em;
}

/* =========================================
   1) HERO FIXED HEADINGS
   pouzi v bannery:
   h1.hero-title-fixed
   h2.hero-subtitle-fixed
   ========================================= */

html body h1.hero-title-fixed {
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.85) !important;
    font-size: clamp(38px, 6vw, 60px) !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 1.15 !important;
    margin: 0 0 12px 0 !important;
    /* white-space: nowrap !important; */
    display: block !important;
}

html body h2.hero-subtitle-fixed {
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.85) !important;
    font-size: clamp(18px, 2.2vw, 30px) !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: block !important;
}

@media (max-width: 600px) {
    html body h1.hero-title-fixed {
        font-size: clamp(30px, 9vw, 48px) !important;
    }

    html body h2.hero-subtitle-fixed {
        font-size: clamp(16px, 4.8vw, 22px) !important;
        padding: 0 10px !important;
    }
}

/* =========================================
   2) GLOBAL STANDARD H1-H4
   okrem hero fixed tried
   ========================================= */

html body h1:not(.hero-title-fixed),
html body .h1:not(.hero-title-fixed),
html body h2:not(.hero-subtitle-fixed),
html body .h2:not(.hero-subtitle-fixed),
html body h3,
html body .h3,
html body h4,
html body .h4 {
    margin-top: 0 !important;
    margin-bottom: var(--hd-space-bottom) !important;
    line-height: var(--hd-line) !important;
    letter-spacing: normal !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-transform: none !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* H1 global */
html body h1:not(.hero-title-fixed),
html body .h1:not(.hero-title-fixed) {
    display: block !important;
    font-size: var(--h1-size) !important;
    font-weight: 700 !important;
    color: var(--hd-color-main) !important;
    text-align: left !important;
}

/* H2 global */
html body h2:not(.hero-subtitle-fixed),
html body .h2:not(.hero-subtitle-fixed) {
    display: block !important;
    font-size: var(--h2-size) !important;
    font-weight: 700 !important;
    color: var(--hd-color-h2) !important;
    text-align: left !important;
}

/* H3 global */
html body h3,
html body .h3 {
    display: block !important;
    font-size: var(--h3-size) !important;
    font-weight: 500 !important;
    color: var(--hd-color-sub) !important;
    text-align: left !important;
}

/* H4 global */
html body h4,
html body .h4 {
    display: block !important;
    font-size: var(--h4-size) !important;
    font-weight: 500 !important;
    color: var(--hd-color-sub) !important;
    text-align: left !important;
}

/* =========================================
   3) FORCE LEFT ALIGN FOR COMMON WRAPPERS
   ========================================= */

html body header h1:not(.hero-title-fixed),
html body header h2:not(.hero-subtitle-fixed),
html body header h3,
html body header h4,
html body section h1:not(.hero-title-fixed),
html body section h2:not(.hero-subtitle-fixed),
html body section h3,
html body section h4,
html body article h1:not(.hero-title-fixed),
html body article h2:not(.hero-subtitle-fixed),
html body article h3,
html body article h4,
html body main h1:not(.hero-title-fixed),
html body main h2:not(.hero-subtitle-fixed),
html body main h3,
html body main h4,
html body .container h1:not(.hero-title-fixed),
html body .container h2:not(.hero-subtitle-fixed),
html body .container h3,
html body .container h4,
html body .row h1:not(.hero-title-fixed),
html body .row h2:not(.hero-subtitle-fixed),
html body .row h3,
html body .row h4,
html body .col h1:not(.hero-title-fixed),
html body .col h2:not(.hero-subtitle-fixed),
html body .col h3,
html body .col h4,
html body [class*="col-"] h1:not(.hero-title-fixed),
html body [class*="col-"] h2:not(.hero-subtitle-fixed),
html body [class*="col-"] h3,
html body [class*="col-"] h4 {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* ak parent centruje text alebo flex obsah */
html body .text-center h1:not(.hero-title-fixed),
html body .text-center h2:not(.hero-subtitle-fixed),
html body .text-center h3,
html body .text-center h4,
html body [style*="text-align: center"] h1:not(.hero-title-fixed),
html body [style*="text-align:center"] h1:not(.hero-title-fixed),
html body [style*="text-align: center"] h2:not(.hero-subtitle-fixed),
html body [style*="text-align:center"] h2:not(.hero-subtitle-fixed),
html body [style*="text-align: center"] h3,
html body [style*="text-align:center"] h3,
html body [style*="text-align: center"] h4,
html body [style*="text-align:center"] h4 {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* =========================================
   4) LEGACY CLASSES
   ========================================= */

/* H2 typu <h2 class="header"><span>...</span></h2> */
html body h2.header:not(.hero-subtitle-fixed),
html body .header h2:not(.hero-subtitle-fixed),
html body h2.header span,
html body .header span {
    color: var(--hd-color-h2) !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

/* wrapper .header */
html body .header {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* header-line */
html body .header-line {
    text-align: left !important;
}

/* bootstrap display-4 */
html body h1.display-4:not(.hero-title-fixed) {
    display: block !important;
    font-size: var(--h1-size) !important;
    font-weight: 700 !important;
    color: var(--hd-color-main) !important;
    text-align: left !important;
}

/* =========================================
   5) MAIN CONTENT FIX
   ========================================= */

html body #main-content h1:not(.hero-title-fixed),
html body #main-content h2:not(.hero-subtitle-fixed),
html body #main-content h3,
html body #main-content h4 {
    display: block !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* H2 v obsahu ostavaju zlate */
html body #main-content h2:not(.hero-subtitle-fixed),
html body #main-content section h2:not(.hero-subtitle-fixed),
html body #main-content .container h2:not(.hero-subtitle-fixed),
html body #main-content .row h2:not(.hero-subtitle-fixed) {
    color: var(--hd-color-h2) !important;
    text-align: left !important;
}

/* H3 v obsahu tmave, nie zlate */
html body #main-content h3,
html body #main-content .row.mt-4 h3,
html body #main-content .col-md-4 h3,
html body #main-content .text-center h3,
html body #main-content .text-center h3.mb-4 {
    color: var(--hd-color-sub) !important;
    font-weight: 500 !important;
    text-align: left !important;
}

/* ak h2/h3 zdedili flex centrovanie */
html body #main-content h2,
html body #main-content h3,
html body #main-content section h2,
html body #main-content section h3,
html body #main-content .container h2,
html body #main-content .container h3 {
    display: block !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* =========================================
   6) FOOTER FIX
   ========================================= */

html body footer h3,
html body #footer h3,
html body .footer-section h3,
html body .footer-col h3 {
    color: var(--hd-color-footer) !important;
    text-align: left !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    display: block !important;
}

/* footer text */
html body footer,
html body footer span,
html body footer a,
html body footer li,
html body footer div,
html body #footer,
html body #footer span,
html body #footer a,
html body #footer li,
html body #footer div {
    color: #eaeaea;
}

/* footer kontakty nalavo */
html body #footer .footer-col,
html body #footer .footer-col *,
html body #footer .contact-data,
html body #footer .contact-data *,
html body #footer .phone-link,
html body #footer .phone-info-wrapper,
html body #footer .list-unstyled,
html body #footer .list-unstyled li {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* =========================================
   7) RESPONSIVE
   ========================================= */

@media (max-width: 767.98px) {
    :root {
        --hd-space-bottom: 0.65em;
    }

    html body h1:not(.hero-title-fixed),
    html body h2:not(.hero-subtitle-fixed),
    html body h3,
    html body h4 {
        line-height: 1.2 !important;
    }
}

@media (min-width: 1400px) {
    :root {
        --h1-size: 36px;
        --h2-size: 30px;
        --h3-size: 21px;
        --h4-size: 19px;
    }
}


#main-content h3 i {
    display: inline-block !important;
    margin-right: 8px;
    font-style: normal;
    color: inherit !important;
}


/* =========================================
   FONT AWESOME FIX
   ========================================= */

#main-content h3 i.fa,
#main-content h3 i.fa-solid,
#main-content h3 i.fas,
#main-content h3 i[class^="fa-"],
#main-content h3 i[class*=" fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
    line-height: 1 !important;
    margin-right: 8px;
    color: inherit !important;
}


/* =========================================
   EXCEPTIONS - centered headings where needed
   ========================================= */

/* 1) ikonky hore */
.pictogram-container,
.pictogram-container h3 {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

.pictogram-container h3 {
    display: block !important;
    margin-top: 10px !important;
}

/* ak chces aj ikonku presne na stred */
.pictogram-container .vd_icons {
    display: block;
    margin: 0 auto 10px auto;
}

/* 2) slider apartmany */
.group-page-item-slider .tile-header,
.group-page-item-slider .tile-header h3,
.group-page-item-slider .text-container,
.group-page-item-slider .box-link-container {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

.group-page-item-slider .tile-header h3 {
    display: block !important;
    margin-bottom: 12px !important;
}

.group-page-item-slider .box-link-container .button-outline {
    display: inline-block;
    text-align: center !important;
}

/* =========================================
   PICTOGRAMS - force center
   ========================================= */

.pictogram-tiles .pictogram-container {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.pictogram-tiles .pictogram-container h3 {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.pictogram-tiles .pictogram-container .vd_icons {
    display: block !important;
    margin: 0 auto 10px auto !important;
}