/**
 * kb-tt5-child base styles
 *
 * Layout:
 * - Mobile first
 * - < 1024px: sticky top bar with mobile navigation
 * - >= 1024px: 2-column layout with sticky sidebar
 */

/* =========================================================
   Root variables
   ========================================================= */

:root {
    --kb-sidebar-width: 320px;
    --kb-container-max: 1400px;
    --kb-gutter: clamp(16px, 3vw, 28px);

    /* Fallback if WP block gap variable is not present */
    --kb-block-gap: 1.2rem;

    /* Mobile header */
    --kb-mobile-header-height: 96px;
    --kb-mobile-logo-height: 88px;
    --kb-mobile-header-pad-y: 2px;
    --kb-mobile-header-pad-x: 12px;
    --kb-mobile-burger-icon-size: 32px;
    --kb-mobile-burger-hit-area: 52px;
    --kb-mobile-burger-reserved: 80px;

    /* Desktop navigation */
    --kb-desktop-nav-space-top: 48px;
    --kb-desktop-nav-space-left: 8px;
    --kb-desktop-nav-level1-gap: 16px;
    --kb-desktop-nav-font-size: 1.38rem;
    --kb-desktop-nav-font-weight: 300;

    /* Edge shadows */
    --kb-edge-shadow-width: 12px;
    --kb-edge-shadow-start: rgba(0, 0, 0, 0.35);
    --kb-edge-shadow-end: rgba(0, 0, 0, 0);

    /* Colors */
    --kb-sidebar-bg: #2b2b2b;
    --kb-content-bg: #f2f2f2;
}

/* Mobile/tablet: softer and thinner shadows */
@media (max-width: 1023px) {
    :root {
        --kb-edge-shadow-width: 8px;
        --kb-edge-shadow-start: rgba(0, 0, 0, 0.25);
        --kb-edge-shadow-end: rgba(0, 0, 0, 0);
    }
}

/* =========================================================
   Base layout
   ========================================================= */

.kb-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.kb-sidebar,
.kb-content {
    width: 100%;
    max-width: none;
    position: relative;
}

.kb-sidebar {
    padding: var(--kb-gutter);
    background: var(--kb-sidebar-bg);
    color: #ffffff;
}

.kb-content {
    padding: 0 !important;
    background: var(--kb-content-bg);
}

.kb-sidebar a {
    color: inherit;
}

/* =========================================================
   Content spacing cleanup
   ========================================================= */

/* Prevent first content block from pushing the layout down */
.kb-content.is-layout-flow > :first-child {
    margin-block-start: 0 !important;
}

.kb-content.is-layout-flow > :first-child > :first-child {
    margin-block-start: 0 !important;
}

/* Normalize top spacing inside content */
.kb-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.kb-content .wp-block-post-content > :where(*) {
    margin-top: 0;
    margin-block-start: 0;
}

.kb-content .wp-block-post-content > :where(* + *) {
    margin-top: var(--wp--style--block-gap, var(--kb-block-gap));
    margin-block-start: var(--wp--style--block-gap, var(--kb-block-gap));
}

/* Footer spacing cleanup */
.kb-content footer {
    margin-top: 0;
}

.kb-content footer :where(.is-layout-flow) > * + * {
    margin-block-start: 0;
}

.kb-content footer :where(.is-layout-flex) {
    gap: 0;
}

/* =========================================================
   Mobile / tablet shell and header
   ========================================================= */

@media (max-width: 1023px) {
    .kb-shell {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .kb-sidebar {
        position: sticky;
        top: 0;
        z-index: 100;

        height: var(--kb-mobile-header-height);
        max-height: var(--kb-mobile-header-height);

        display: flex;
        align-items: center;
        gap: 12px;

        padding: var(--kb-mobile-header-pad-y) var(--kb-mobile-header-pad-x);
        padding-right: var(--kb-mobile-burger-reserved);

        overflow-x: hidden;
        overflow-y: visible;
    }

    .kb-sidebar > .wp-block-group,
    .kb-sidebar > .wp-block-template-part > .wp-block-group {
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        gap: 12px;
    }

    .kb-sidebar .wp-block-site-logo {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin: 0;
    }

    .kb-sidebar .wp-block-site-logo img {
        display: block;
        width: auto;
        height: var(--kb-mobile-logo-height);
        max-width: none;
    }

    .kb-sidebar .kb-nav-wrap--desktop {
        display: none !important;
    }

    .kb-sidebar .kb-nav-wrap--mobile .wp-block-navigation,
    .kb-sidebar .wp-block-navigation {
        flex: 1 1 auto;
        min-width: 0;
        position: static !important;
    }

    /* Mobile burger button */
    .kb-sidebar .kb-nav-wrap--mobile .wp-block-navigation__responsive-container-open,
    .kb-sidebar .wp-block-navigation__responsive-container-open {
        position: absolute !important;
        top: 50% !important;
        right: var(--kb-mobile-header-pad-x) !important;
        transform: translateY(-50%) !important;
        z-index: 200 !important;

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

        width: 96px !important;
        height: var(--kb-mobile-burger-hit-area) !important;
        margin: 0 !important;
        padding: 0 0 0 0px !important;
    }

    .kb-sidebar .kb-nav-wrap--mobile .wp-block-navigation__responsive-container-open::before,
    .kb-sidebar .wp-block-navigation__responsive-container-open::before {
        content: "Menü";
        position: absolute;
        right: 34px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.7rem;
        line-height: 1;
        letter-spacing: 0.02em;
        color: #ffffff;
        opacity: 0.85;
        white-space: nowrap;
        pointer-events: none;
    }

    .kb-sidebar .kb-nav-wrap--mobile .wp-block-navigation__responsive-container-open svg,
    .kb-sidebar .wp-block-navigation__responsive-container-open svg {
        width: var(--kb-mobile-burger-icon-size) !important;
        height: var(--kb-mobile-burger-icon-size) !important;
        margin-left: auto;
    }

    /* Content column grows, footer pushed to bottom on short pages */
    .kb-content {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .kb-content .wp-block-post-content,
    .kb-content .wp-block-query {
        flex: 1 1 auto;
        min-height: 0;
    }

    .kb-content > footer {
        margin-top: auto;
    }
}

/* =========================================================
   Mobile navigation behavior
   ========================================================= */

@media (max-width: 1023px) {
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center;
    }

    /* Do not show backlink inside sticky mobile header */
    .kb-sidebar .kb-backlink {
        display: none !important;
    }

    /* Hide inline menu by default on mobile/tablet */
    .wp-block-navigation .wp-block-navigation__container {
        display: none !important;
    }

    /* Show responsive menu when WP marks it as open */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
    .wp-block-navigation.has-modal-open .wp-block-navigation__responsive-container .wp-block-navigation__container,
    .wp-block-navigation__responsive-container[aria-hidden="false"] .wp-block-navigation__container {
        display: block !important;
    }

    /* Scrollable overlay menu */
    .wp-block-navigation__responsive-container-content {
        max-height: 100vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile level-1 items */
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
        display: inline-block;
        margin-top: 12px;
        margin-bottom: 0;
        font-size: 1.3rem;
        font-weight: inherit;
    }

    /* Mobile submenu item spacing */
    .kb-sidebar nav.kb-nav ul.wp-block-navigation__submenu-container
    > li.wp-block-navigation-item
    > a.wp-block-navigation-item__content {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 6px;
    }
}

/* =========================================================
   Desktop navigation
   ========================================================= */

@media (min-width: 1024px) {
    .kb-sidebar .kb-nav-wrap--mobile {
        display: none !important;
    }

    .kb-sidebar .kb-nav-wrap--desktop {
        display: block !important;
        margin-top: var(--kb-desktop-nav-space-top);
        padding-left: var(--kb-desktop-nav-space-left);
    }

    .kb-sidebar nav.kb-nav {
        margin-top: var(--kb-desktop-nav-space-top);
        padding-left: var(--kb-desktop-nav-space-left);
        font-family: var(--wp--preset--font-family--manrope, inherit);
        font-size: var(--kb-desktop-nav-font-size);
        font-weight: var(--kb-desktop-nav-font-weight);
    }

    .kb-sidebar nav.kb-nav .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    .kb-sidebar nav.kb-nav .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: var(--kb-desktop-nav-level1-gap) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .kb-sidebar nav.kb-nav .wp-block-navigation-item {
        margin: 0;
    }

    .kb-sidebar .wp-block-navigation .wp-block-navigation-item {
        position: relative;
    }

    .kb-sidebar nav.kb-nav .wp-block-navigation-item__content {
        display: inline-block;
        text-decoration: none;
        font: inherit;
    }

    /* Desktop submenu spacing */
    .kb-sidebar nav.kb-nav ul.wp-block-navigation__submenu-container
    > li.wp-block-navigation-item
    > a.wp-block-navigation-item__content {
        margin-top: 12px;
        margin-bottom: 6px;
    }

    /* Desktop submenu overlay position */
    .kb-sidebar .wp-block-navigation ul.wp-block-navigation__submenu-container {
        position: absolute !important;
        top: 28px !important;
        left: 20px !important;
        width: 240px !important;
        z-index: 1000 !important;
    }

    .kb-sidebar .wp-block-navigation ul.wp-block-navigation__submenu-container
    > li.wp-block-navigation-item
    > a.wp-block-navigation-item__content {
        display: block;
        width: 100%;
        padding: 0 12px;
        font-size: 0.95em;
        text-decoration: none;
    }

    /* Generic WP fallback */
    nav.wp-block-navigation > ul.wp-block-navigation__container {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* =========================================================
   Desktop shell/frame
   ========================================================= */

@media (min-width: 768px) {
    .kb-shell {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

@media (min-width: 1024px) {
    .kb-shell {
        display: grid;
        grid-template-columns: var(--kb-sidebar-width) minmax(0, var(--kb-container-max));
        align-items: stretch;
        gap: 0;

        max-width: calc(var(--kb-sidebar-width) + var(--kb-container-max));
        min-height: 100vh;
        margin-left: auto;
        margin-right: auto;

        padding-top: 0;
        padding-bottom: 0;
    }

    .kb-shell > .kb-sidebar {
        position: sticky;
        top: 0;
        z-index: 1;

        height: 100vh;
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .kb-shell > .kb-content {
        z-index: 1;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 0;
    }

    .kb-shell > .kb-content > .wp-block-post-content,
    .kb-shell > .kb-content > .wp-block-query {
        flex: 1 0 auto;
        min-height: 0;
    }

    .kb-shell > .kb-content > footer,
    .kb-shell > .kb-content > .wp-block-template-part {
        margin-top: auto;
    }
}

/* =========================================================
   Edge shadows
   ========================================================= */

@media (max-width: 1023px) {
    .kb-sidebar::before,
    .kb-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: var(--kb-edge-shadow-width);
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to right, var(--kb-edge-shadow-start), var(--kb-edge-shadow-end));
    }

    .kb-sidebar::after,
    .kb-content::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: var(--kb-edge-shadow-width);
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to left, var(--kb-edge-shadow-start), var(--kb-edge-shadow-end));
    }
}

@media (min-width: 1024px) {
    .kb-shell > .kb-sidebar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: var(--kb-edge-shadow-width);
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to right, var(--kb-edge-shadow-start), var(--kb-edge-shadow-end));
    }

    .kb-shell > .kb-content::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: var(--kb-edge-shadow-width);
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to left, var(--kb-edge-shadow-start), var(--kb-edge-shadow-end));
    }
}

/* =========================================================
   Simple Photo Feed
   ========================================================= */

.kb-content .spf_container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.kb-content .spf_container .spf_item {
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kb-content .spf_container .spf_item:hover,
.kb-content .spf_container .spf_item:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.kb-content .spf_container img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* =========================================================
   Global button styles
   ========================================================= */

.wp-block-button__link,
.wp-element-button {
    background-color: #810D01;
    color: #ffffff;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: rgba(129, 13, 1, 0.70);
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(129, 13, 1, 0.35);
}

.is-style-kb-secondary .wp-block-button__link,
.is-style-kb-secondary .wp-element-button {
    background-color: rgba(255, 255, 255, 0.30);
    color: #ffffff;
}

.is-style-kb-secondary .wp-block-button__link:hover,
.is-style-kb-secondary .wp-element-button:hover {
    background-color: rgba(255, 255, 255, 0.50);
}

.is-style-kb-secondary .wp-block-button__link:focus-visible,
.is-style-kb-secondary .wp-element-button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

/* =========================================================
   Backlink
   ========================================================= */

.kb-backlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 36px;
    margin-bottom: 24px;
    padding: 6px 8px;

    color: rgba(240, 116, 7, 0.50);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.1;
    text-decoration: none;
}

.kb-sidebar a.kb-backlink,
.kb-sidebar a.kb-backlink:visited {
    color: rgba(240, 116, 7, 0.50);
}

.kb-sidebar a.kb-backlink {
    font-family: var(--wp--preset--font-family--manrope, inherit);
    font-weight: 400;
    text-decoration: none;
}

.kb-backlink:hover,
.kb-sidebar a.kb-backlink:hover {
    color: rgba(240, 116, 7, 0.99);
}

.kb-backlink:focus-visible {
    outline: 3px solid rgba(240, 116, 7, 0.45);
    outline-offset: 3px;
}

.kb-backlink__icon {
    position: relative;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
}

.kb-backlink__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1px;

    width: 8px;
    height: 8px;

    border-left: 2px solid rgb(240, 116, 7);
    border-bottom: 2px solid rgb(240, 116, 7);
    transform: translateY(-50%) rotate(45deg);
}

.kb-sidebar a.kb-backlink .kb-backlink__icon::before {
    border-left-color: rgba(240, 116, 7, 0.50);
    border-bottom-color: rgba(240, 116, 7, 0.50);
}

@media (max-width: 1023px) {
    .kb-sidebar .kb-backlink {
        display: inline-flex !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 6px 8px;

        font-size: 0.78rem;
        line-height: 1.1;
        max-width: 38vw;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 150;
    }

    .kb-sidebar .kb-backlink__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kb-sidebar .kb-backlink__icon {
        width: 10px;
        height: 10px;
    }

    .kb-sidebar .kb-backlink__icon::before {
        width: 8px;
        height: 8px;
        border-left-width: 2px;
        border-bottom-width: 2px;
    }
}

.footerlink a {
    text-decoration:none;
}

.footerlink a:hover {
    text-decoration:underline;
}

.oben-ausrichten {
    align-items: flex-start;
}