/*
 * Zillertal.net Joomla template foundation
 * Parent: Cassiopeia
 * Purpose: preserve J51 module positions while modernising the layout.
 */

:root {
    --zt-container: 1440px;
    --zt-gutter: clamp(16px, 3vw, 40px);
    --zt-grid-gap: clamp(12px, 1.6vw, 24px);
    --zt-section-gap: clamp(24px, 4vw, 64px);
    --zt-sidebar-width: minmax(220px, 0.8fr);
    --zt-content-width: minmax(0, 3fr);
}

* { box-sizing: border-box; }

.zt-site {
    margin: 0;
    min-width: 0;
}

.zt-container {
    width: min(100% - (2 * var(--zt-gutter)), var(--zt-container));
    margin-inline: auto;
}

/* Header */
.zt-header {
    position: relative;
    z-index: 100;
    background: #fff;
}

.zt-header--sticky {
    position: sticky;
    top: 0;
}

.zt-header-meta,
.zt-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.zt-header-meta {
    min-height: 32px;
    font-size: .875rem;
}

.zt-header-main {
    min-height: 82px;
}

.zt-brand {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
}

.zt-brand img {
    display: block;
    width: auto;
    max-width: min(280px, 50vw);
    max-height: 64px;
}

.zt-brand-title {
    font-size: clamp(1.4rem, 2.5vw, 2.4rem);
    line-height: 1;
    font-weight: 700;
}

.zt-site-description { font-size: .75rem; }
.zt-navigation { margin-left: auto; min-width: 0; }
.zt-search { flex: 0 0 auto; }

/* Full-width hero/showcase */
.zt-showcase-full {
    width: 100%;
    overflow: clip;
}

.zt-showcase-full > * { margin: 0; }


/* Optional full-width wrapper for Showcase-1.
 * Keeps the legacy .wrapper960 class as a compatibility alias while
 * deliberately overriding its constrained width when enabled in backend. */
#container_showcase1_modules > .zt-container-full {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* Universal J51-style row */
.zt-module-row {
    display: grid;
    grid-template-columns: repeat(var(--zt-columns, 1), minmax(0, 1fr));
    gap: var(--zt-grid-gap);
    width: 100%;
    margin-block: var(--zt-section-gap);
}

.zt-module-cell,
.zt-module-cell > *,
.zt-module-cell .card {
    min-width: 0;
}

/* Let adjacent modules naturally fill equal height where their own markup permits. */
.zt-module-cell > .moduletable,
.zt-module-cell > .card {
    height: 100%;
}

/* Content area with legacy left/right side columns. */
.zt-content-layout {
    display: grid;
    align-items: start;
    gap: var(--zt-grid-gap);
    margin-block: var(--zt-section-gap);
}

.zt-content-layout--single { grid-template-columns: minmax(0, 1fr); }
.zt-content-layout--left   { grid-template-columns: var(--zt-sidebar-width) var(--zt-content-width); }
.zt-content-layout--right  { grid-template-columns: var(--zt-content-width) var(--zt-sidebar-width); }
.zt-content-layout--both   { grid-template-columns: var(--zt-sidebar-width) var(--zt-content-width) var(--zt-sidebar-width); }

.zt-component-area,
.zt-sidebar { min-width: 0; }

.zt-module-stack {
    display: grid;
    gap: var(--zt-grid-gap);
}

.zt-content-modules {
    margin-block: 0 var(--zt-grid-gap);
}

.zt-content-modules--bottom {
    margin-block: var(--zt-grid-gap) 0;
}

.zt-breadcrumb { margin-block: 1rem; }
.zt-cassiopeia-row { margin-block: var(--zt-section-gap); }

/* Footer foundation */
.zt-footer {
    margin-top: var(--zt-section-gap);
    padding-block: clamp(32px, 5vw, 72px);
}

.zt-footer-row + .zt-footer-row { margin-top: 1rem; }

.zt-footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Tablet: every a-f row becomes two columns, independent of which letters are occupied. */
@media (max-width: 1024px) {
    .zt-module-row.zt-cols-1 { grid-template-columns: minmax(0, 1fr); }
    .zt-module-row.zt-cols-2,
    .zt-module-row.zt-cols-3,
    .zt-module-row.zt-cols-4,
    .zt-module-row.zt-cols-5,
    .zt-module-row.zt-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .zt-content-layout--both,
    .zt-content-layout--left,
    .zt-content-layout--right {
        grid-template-columns: minmax(0, 1fr);
    }

    .zt-sidebar--left  { order: 1; }
    .zt-component-area { order: 2; }
    .zt-sidebar--right { order: 3; }
}

/* Mobile: classic J51 behaviour – modules stack underneath each other. */
@media (max-width: 640px) {
    .zt-module-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .zt-header-main {
        min-height: 68px;
        flex-wrap: wrap;
    }

    .zt-navigation {
        width: 100%;
        order: 3;
    }

    .zt-footer-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Template-controlled design tokens */
body.zt-site { background: var(--zt-body-bg, #fff); }
.zt-header { background-color: var(--zt-header-bg, #fff); color: var(--zt-header-color, #222); }
.zt-footer { background-color: var(--zt-footer-bg, #18352b); color: var(--zt-footer-color, #fff); }

/* Lightweight scroll reveal. JS only toggles .is-visible. */
html[data-zt-reveal]:not([data-zt-reveal="none"]) [data-zt-reveal] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: var(--zt-reveal-duration, 700ms);
    transition-timing-function: cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--zt-reveal-delay, 0ms);
    will-change: opacity, transform;
}
html[data-zt-reveal="fade-up"] [data-zt-reveal] { transform: translateY(var(--zt-reveal-distance, 24px)); }
html[data-zt-reveal="soft-scale"] [data-zt-reveal] { transform: scale(.975); }
html[data-zt-reveal] [data-zt-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html[data-zt-reveal] [data-zt-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* v0.6: per-section visual controls from the Joomla template style.
   Background images are intentionally simple: center / cover / no-repeat. */
#container_header,
#container_showcase_modules,
#container_showcase1_modules,
#container_top1_modules,
#container_top2_modules,
#container_top3_modules,
#container_main,
#container_bottom1_modules,
#container_bottom2_modules,
#container_bottom3_modules,
#container_base1_modules,
#container_base2_modules,
#container_footer {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#container_header {
    background-color: var(--zt-header-bg, #fff);
    background-image: var(--zt-header-image, none);
    color: var(--zt-header-color, #222);
    padding-top: var(--zt-header-pt, 0);
    padding-bottom: var(--zt-header-pb, 0);
}
#container_showcase_modules {
    background-color: var(--zt-showcase-bg, transparent);
    background-image: var(--zt-showcase-image, none);
    color: var(--zt-showcase-color, #fff);
    padding-top: var(--zt-showcase-pt, 0);
    padding-bottom: var(--zt-showcase-pb, 0);
}
#container_showcase1_modules {
    background-color: var(--zt-showcase1-bg, #fff);
    background-image: var(--zt-showcase1-image, none);
    color: var(--zt-showcase1-color, #222);
    padding-top: var(--zt-showcase1-pt, 0);
    padding-bottom: var(--zt-showcase1-pb, 0);
}
#container_top1_modules {
    background-color: var(--zt-top1-bg, #fff);
    background-image: var(--zt-top1-image, none);
    color: var(--zt-top1-color, #222);
    padding-top: var(--zt-top1-pt, 0);
    padding-bottom: var(--zt-top1-pb, 0);
}
#container_top2_modules {
    background-color: var(--zt-top2-bg, #fff);
    background-image: var(--zt-top2-image, none);
    color: var(--zt-top2-color, #222);
    padding-top: var(--zt-top2-pt, 0);
    padding-bottom: var(--zt-top2-pb, 0);
}
#container_top3_modules {
    background-color: var(--zt-top3-bg, #fff);
    background-image: var(--zt-top3-image, none);
    color: var(--zt-top3-color, #222);
    padding-top: var(--zt-top3-pt, 0);
    padding-bottom: var(--zt-top3-pb, 0);
}
#container_main {
    background-color: var(--zt-component-bg, #fff);
    background-image: var(--zt-component-image, none);
    color: var(--zt-component-color, #222);
    padding-top: var(--zt-component-pt, 0);
    padding-bottom: var(--zt-component-pb, 0);
}
#container_bottom1_modules {
    background-color: var(--zt-bottom1-bg, #fff);
    background-image: var(--zt-bottom1-image, none);
    color: var(--zt-bottom1-color, #222);
    padding-top: var(--zt-bottom1-pt, 0);
    padding-bottom: var(--zt-bottom1-pb, 0);
}
#container_bottom2_modules {
    background-color: var(--zt-bottom2-bg, #fff);
    background-image: var(--zt-bottom2-image, none);
    color: var(--zt-bottom2-color, #222);
    padding-top: var(--zt-bottom2-pt, 0);
    padding-bottom: var(--zt-bottom2-pb, 0);
}
#container_bottom3_modules {
    background-color: var(--zt-bottom3-bg, #fff);
    background-image: var(--zt-bottom3-image, none);
    color: var(--zt-bottom3-color, #222);
    padding-top: var(--zt-bottom3-pt, 0);
    padding-bottom: var(--zt-bottom3-pb, 0);
}
#container_base1_modules {
    background-color: var(--zt-base1-bg, #fff);
    background-image: var(--zt-base1-image, none);
    color: var(--zt-base1-color, #222);
    padding-top: var(--zt-base1-pt, 0);
    padding-bottom: var(--zt-base1-pb, 0);
}
#container_base2_modules {
    background-color: var(--zt-base2-bg, #fff);
    background-image: var(--zt-base2-image, none);
    color: var(--zt-base2-color, #222);
    padding-top: var(--zt-base2-pt, 0);
    padding-bottom: var(--zt-base2-pb, 0);
}
#container_footer {
    background-color: var(--zt-footer-bg, #18352b);
    background-image: var(--zt-footer-image, none);
    color: var(--zt-footer-color, #fff);
    padding-top: var(--zt-footer-pt, clamp(32px, 5vw, 72px));
    padding-bottom: var(--zt-footer-pb, clamp(32px, 5vw, 72px));
}

/* v0.5: header, hornav and back-to-top fixes */
html { scroll-behavior: smooth; }

/* Sticky must live on the OUTER header wrapper. A sticky child is otherwise
   constrained by .outside_header and cannot remain sticky while the page scrolls. */
.outside_header {
    position: relative;
    z-index: 1000;
}
.outside_header.zt-header--sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.outside_header.zt-header--sticky .zt-header {
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* Do not rely on Cassiopeia's .container-header selectors: hornav is a legacy
   J51 position and therefore receives its own neutral menu layout. */
#hornav-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
}
#hornav-nav .mod-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(.7rem, 1.6vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
#hornav-nav .mod-menu > li {
    position: relative;
    margin: 0;
}
#hornav-nav .mod-menu > li > a,
#hornav-nav .mod-menu > li > span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}
#hornav-nav .mod-menu__sub,
#hornav-nav .mod-menu > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1010;
    display: none;
    min-width: 220px;
    margin: 0;
    padding: .65rem;
    list-style: none;
    background: var(--zt-header-bg, #fff);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
#hornav-nav .mod-menu li:hover > .mod-menu__sub,
#hornav-nav .mod-menu li:focus-within > .mod-menu__sub,
#hornav-nav .mod-menu li:hover > ul,
#hornav-nav .mod-menu li:focus-within > ul {
    display: block;
}
#hornav-nav .mod-menu__sub a,
#hornav-nav .mod-menu > li > ul a {
    display: block;
    padding: .5rem .65rem;
    color: inherit;
    text-decoration: none;
}

/* Back to top */
.back-to-top-link {
    position: fixed;
    right: clamp(16px, 2.5vw, 36px);
    bottom: clamp(16px, 2.5vw, 36px);
    z-index: 1200;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 999px;
    background: var(--zt-primary, #18352b);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top-link.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top-link:hover,
.back-to-top-link:focus-visible {
    color: #fff;
    transform: translateY(-2px);
}
.back-to-top-link .back-to-top,
.back-to-top-link svg {
    display: block;
    width: 24px;
    height: 24px;
}
.back-to-top-link svg { fill: currentColor; }

@media (max-width: 640px) {
    #hornav-nav {
        width: 100%;
        margin-left: 0;
    }
    #hornav-nav .mod-menu {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    #hornav-nav .mod-menu__sub,
    #hornav-nav .mod-menu > li > ul {
        position: static;
        box-shadow: none;
        padding-left: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .back-to-top-link { transition: none; }
}


/* v0.7: Direct Joomla menu selection (no Menu module required) */
#hornav-nav .mod-menu__item.active > a,
#hornav-nav .mod-menu__item.current > a {
    color: var(--zt-accent, currentColor);
}
#hornav-nav .mod-menu__heading {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.zt-footer-menu {
    margin-left: auto;
}
.zt-footer-menu__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.zt-footer-menu__list li {
    margin: 0;
}
.zt-footer-menu__list a,
.zt-footer-menu__list .mod-menu__heading {
    color: inherit;
    text-decoration: none;
}
.zt-footer-menu__list a:hover,
.zt-footer-menu__list a:focus-visible,
.zt-footer-menu__list .active > a {
    text-decoration: underline;
    text-underline-offset: .2em;
}
.zt-footer-menu__list .mod-menu__sub {
    display: none;
}
@media (max-width: 640px) {
    .zt-footer-menu { margin-left: 0; }
    .zt-footer-menu__list { justify-content: flex-start; }
}


/* v0.8: direct menu layout + seamless Base-2 -> Footer transition */

/* Base-2 must meet the footer without the generic section gap in between. */
#container_base2_modules .zt-module-row,
#container_base2_modules .block_holder_margin {
    margin-bottom: 0;
}

#container_footer.zt-footer {
    margin-top: 0;
}

/* Direct Hornav menu: keep the first level horizontal on desktop. The
   zt-direct-menu class is emitted only by the template's direct menu renderer,
   so these rules do not affect normal Joomla Menu modules elsewhere. */
#hornav-nav > ul.zt-direct-menu,
#hornav-nav > ul.mod-menu.zt-direct-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: clamp(.7rem, 1.6vw, 1.5rem) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#hornav-nav > ul.zt-direct-menu > li {
    display: block !important;
    flex: 0 0 auto !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Direct footer menu: horizontal with a separator between first-level items. */
.zt-footer-menu > ul.zt-footer-menu__list,
.zt-footer-menu > ul.mod-menu.zt-footer-menu__list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.zt-footer-menu > ul.zt-footer-menu__list > li {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.zt-footer-menu > ul.zt-footer-menu__list > li + li::before {
    content: "|";
    display: inline-block;
    margin-inline: .65rem;
    opacity: .55;
}

.zt-footer-menu > ul.zt-footer-menu__list > li > a,
.zt-footer-menu > ul.zt-footer-menu__list > li > .mod-menu__heading {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* The footer is intended as a compact service menu; child levels are not
   rendered visually there. Hornav child levels retain the dropdown behaviour. */
.zt-footer-menu > ul.zt-footer-menu__list .mod-menu__sub {
    display: none !important;
}

@media (max-width: 640px) {
    /* Hornav keeps the existing mobile stacked treatment. */
    #hornav-nav > ul.zt-direct-menu,
    #hornav-nav > ul.mod-menu.zt-direct-menu {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Footer stays horizontal and simply wraps to another line when needed. */
    .zt-footer-menu > ul.zt-footer-menu__list,
    .zt-footer-menu > ul.mod-menu.zt-footer-menu__list {
        flex-direction: row !important;
        justify-content: flex-start !important;
    }
}


/* v0.8.3: SVG logo, seamless hero/breadcrumb and transparent overlay header */

/* SVGs selected through Joomla's media field are normal <img> elements here.
   Give the logo an explicit usable box even when the SVG itself has no width/height. */
#logo.zt-brand-wrap,
.zt-brand {
    min-width: 0;
}
.zt-brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(320px, 50vw);
    max-height: 64px;
    object-fit: contain;
}

/* A common Custom HTML hero is <p><img ...></p>. Browser/Bootstrap paragraph
   margins otherwise create the white stripe visible above/below the image. */
#container_showcase_modules,
#container_showcase_modules .module,
#container_showcase_modules .module_surround,
#container_showcase_modules .module_content,
#container_showcase1_modules .module,
#container_showcase1_modules .module_surround,
#container_showcase1_modules .module_content {
    margin-top: 0;
    margin-bottom: 0;
}
#container_showcase_modules .module_content > p:only-child,
#container_showcase1_modules .module_content > p:only-child,
#container_showcase_modules figure:only-child,
#container_showcase1_modules figure:only-child {
    margin: 0;
}
#container_showcase_modules img,
#container_showcase1_modules img {
    display: block;
}

/* Breadcrumb should begin immediately after the preceding visual area. The
   breadcrumb itself may still have its own internal padding/background. */
#container_main > .wrapper960.zt-container,
#container_main #main {
    margin-top: 0;
    padding-top: 0;
}
#container_main .zt-breadcrumb {
    margin-top: 0 !important;
}
#container_main .zt-breadcrumb > .breadcrumb,
#container_main .zt-breadcrumb .mod-breadcrumbs {
    margin-top: 0 !important;
}

/* Optional transparent-menu mode: take the fixed header out of normal flow so
   the Showcase/Hero starts at y=0 and therefore runs behind the header. */
.outside_header.zt-header--sticky.zt-header--overlay {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    z-index: 1000;
}
.outside_header.zt-header--sticky.zt-header--overlay #container_header {
    background-color: var(--zt-header-bg, rgba(255,255,255,0));
}

/* Do not reserve artificial space below a fixed/overlay header. */
.outside_header.zt-header--sticky,
.outside_header.zt-header--sticky + #container_showcase_modules,
.outside_header.zt-header--sticky + #container_showcase1_modules {
    margin-bottom: 0;
}


/* v0.8.5: SVG logo hard sizing.
   Some SVG files do not contain intrinsic width/height. With width:auto + height:auto
   the browser can therefore calculate 0x0. Give the image a real box and let
   object-fit preserve the SVG artwork inside it. */
#logo.zt-brand-wrap {
    flex: 0 0 auto;
}
#logo.zt-brand-wrap > .zt-brand {
    display: inline-flex;
    width: var(--zt-logo-width, 280px);
    min-width: var(--zt-logo-width, 280px);
    min-height: var(--zt-logo-height, 64px);
}
#logo.zt-brand-wrap > .zt-brand > img {
    display: block !important;
    width: var(--zt-logo-width, 280px) !important;
    height: var(--zt-logo-height, 64px) !important;
    max-width: min(var(--zt-logo-width, 280px), 50vw) !important;
    max-height: var(--zt-logo-height, 64px) !important;
    object-fit: contain;
    object-position: left center;
}