/*
Theme Name: FlexiBlog Child
Template: flexiblog
*/
@import url('../flexiblog/style.css');

/* Apply background to HTML - this is working */
html {
    background-image: url('https://hallodogil.de/wp-content/uploads/2026/04/tomoko-uji-eriuKJwcdjI-unsplash-scaled.jpg') !important;
    background-size: cover !important;
    background-position: center 0 !important;
    background-repeat: no-repeat !important;
    background-color: #d4dfe8 !important;
    min-height: 100vh !important;
}

body {
    background: transparent !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure content wrapper is positioned */
.wp-site-blocks {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Much more transparent content areas with minimal blur */
header.wp-block-template-part,
main.wp-block-group,
footer.wp-block-template-part {
    background-color: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* Sticky header with smooth transitions */
header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    margin: 0 !important;
    transition: background-color 0.4s ease, padding 0.4s ease !important;
}

/* Targeted transitions on header children — NOT a wildcard */
header.wp-block-template-part .wp-block-site-logo img {
    transition: all 0.4s ease !important;
}
header.wp-block-template-part .wp-block-site-title {
    transition: font-size 0.4s ease, line-height 0.4s ease !important;
}
header.wp-block-template-part .wp-block-site-tagline {
    transition: font-size 0.4s ease, line-height 0.4s ease !important;
}

/* Stronger opacity when scrolled */
header.wp-block-template-part.scrolled {
    background-color: rgba(255, 255, 255, 1.0) !important;
}

/* Reduce header padding when scrolled */
header.wp-block-template-part.scrolled .wp-block-group {
    padding-top: 5.6px !important;
    padding-bottom: 5.6px !important;
}

/* Scale down logo when scrolled */
header.wp-block-template-part.scrolled .wp-block-site-logo img {
    max-width: 32px !important;
    width: 32px !important;
    height: auto !important;
}

/* Scale down title and tagline when scrolled */
header.wp-block-template-part.scrolled .wp-block-site-title {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
}

header.wp-block-template-part.scrolled .wp-block-site-tagline {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
}

/* Remove margins and keep content full width */
footer.wp-block-template-part {
    margin: 0 !important;
}

main.wp-block-group {
    margin: 0 !important;
}

/* Hide navigation menu everywhere */
.wp-block-navigation {
    display: none !important;
}

/* Force post-template to be a proper grid */
.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

/* Fix featured image container height and aspect ratio */
.wp-block-post-template .wp-block-post-featured-image {
    display: block !important;
    aspect-ratio: 21/9 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}

.wp-block-post-template .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Smooth colour transition on index/blog/archive post title links */
.wp-block-post-template .wp-block-post-title a {
    transition: color 0.2s ease !important;
}

/* Trigger title hover colour when the post thumbnail is hovered */
.wp-block-post-template li.img-hovered .wp-block-post-title a {
    color: var(--wp--preset--color--hovercolor) !important;
}

/* ============================================================
   HOME PAGE INTRO AREA — font sizes
   ============================================================ */
.home main .wp-block-heading.has-medium-font-size {
    font-size: 28px !important;
}

.home main p.has-medium-font-size {
    font-size: 18px !important;
}

/* ============================================================
   SINGLE POST PAGE: constrain content to 920px, centered
   ============================================================ */
.single main.wp-block-group > * {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.single main.wp-block-group .wp-block-post-featured-image {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    aspect-ratio: 21/9 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

.single main.wp-block-group .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.single .hallodogil-post-meta-row {
    margin-top: 12px !important;
}
.single .wp-block-post-featured-image {
    margin-top: 12px !important;
}

.hallodogil-post-meta-row {
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    font-size: 0.875rem !important;
    color: #888 !important;
}

.hallodogil-post-meta-row .wp-block-post-date,
.hallodogil-post-meta-row .wp-block-post-terms {
    color: #888 !important;
    font-size: 0.875rem !important;
}

.hallodogil-post-meta-row .wp-block-post-date a,
.hallodogil-post-meta-row .wp-block-post-terms a {
    color: #888 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.hallodogil-post-meta-row .wp-block-post-terms a:hover {
    color: var(--wp--preset--color--hovercolor) !important;
}

.hallodogil-meta-pipe {
    color: #bbb !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    user-select: none !important;
}

/* ========================================================================
   LOCATION PIN — post sub-header
   ======================================================================== */

.hallodogil-location-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.875rem;
    color: #888;
    margin-bottom: -28px;
    margin-top: -20px;
    padding-bottom: 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hallodogil-location-pin:hover {
    color: var(--wp--preset--color--hovercolor);
}

.hallodogil-location-pin svg {
    flex-shrink: 0;
}

/* Style first post as featured */
.home .wp-block-post-template > :first-child {
    grid-column: 1 / -1 !important;
    padding: 40px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
}

.home .wp-block-post-template > :first-child .wp-block-post-title {
    font-size: 32px !important;
}

.home .wp-block-post-template > :nth-child(n+2) {
    padding: 20px !important;
}

.blog .wp-block-post-template > :nth-child(n+1) {
    padding: 20px !important;
}

body.archive main.wp-block-group > .wp-block-template-part .wp-block-post-template > li {
    padding: 20px !important;
}

/* Search results — same padding as archive */
body.search .wp-block-post-template > li {
    padding: 20px !important;
}

body.paged .home .wp-block-post-template > :first-child {
    grid-column: auto !important;
    padding: 20px !important;
    margin-bottom: 0 !important;
}

body.paged .home .wp-block-post-template > :first-child .wp-block-post-title {
    font-size: 24px !important;
}

.wp-block-query-pagination {
    padding: 20px !important;
}

.wp-block-query-pagination a,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    padding: 20px !important;
}

.single .wp-block-post-content {
    background-color: white !important;
    padding: 30px !important;
    border-radius: 0 !important;
}

.hallodogil-similar-posts {
    background: transparent !important;
    padding: 20px !important;
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hallodogil-similar-header {
    align-items: center !important;
}

.hallodogil-similar-nav {
    display: flex;
    gap: 8px;
}

.hallodogil-similar-nav button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.hallodogil-similar-nav button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 1);
}

.hallodogil-similar-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.hallodogil-similar-nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #333;
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* ========================================================================
   SIMILAR POSTS SLIDER
   ======================================================================== */

.hallodogil-similar-slider {
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
}

.hallodogil-similar-slider .wp-block-query,
.hallodogil-similar-slider .wp-block-group {
    width: 100% !important;
}

.hallodogil-similar-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    transition: transform 0.4s ease !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
    grid-auto-columns: unset !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hallodogil-similar-card {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    row-gap: 6px !important;
}

.hallodogil-similar-title a {
    transition: color 0.2s ease !important;
}

.hallodogil-similar-card.img-hovered .hallodogil-similar-title a {
    color: var(--wp--preset--color--hovercolor) !important;
}

.hallodogil-similar-posts .wp-block-post-template {
    align-items: start !important;
}

.hallodogil-similar-posts .wp-block-post-featured-image {
    align-self: start !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

.hallodogil-similar-meta {
    width: 100% !important;
}

.hallodogil-similar-meta .wp-block-post-terms {
    text-align: right !important;
    margin-left: auto !important;
}

.hallodogil-similar-meta .wp-block-post-terms a {
    transition: color 0.2s ease !important;
}

.hallodogil-similar-meta .wp-block-post-terms a:hover {
    color: var(--wp--preset--color--hovercolor) !important;
}

/* ========================================================================
   BACK TO TOP BUTTON
   ======================================================================== */

.hallodogil-back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.hallodogil-back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.hallodogil-back-to-top:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.hallodogil-back-to-top svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #333;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Mobile-specific padding adjustments */
@media (max-width: 768px) {
    header.wp-block-template-part,
    footer.wp-block-template-part {
        padding: 12px 16px !important;
        margin: 0 !important;
    }

    header.wp-block-template-part.scrolled {
        padding: 8.4px 12px !important;
    }

    main.wp-block-group {
        margin: 0 !important;
        padding: 16px !important;
        border-radius: 0 !important;
    }

    header.wp-block-template-part > .wp-block-group,
    main.wp-block-group > .wp-block-group,
    footer.wp-block-template-part > .wp-block-group {
        padding: 0 !important;
        margin: 0 !important;
    }

    .wp-block-post-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .single .wp-block-post-content {
        padding: 20px !important;
    }

    header.wp-block-template-part .wp-block-group {
        flex-wrap: nowrap !important;
    }

    header.wp-block-template-part .wp-block-group > .wp-block-group {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    header.wp-block-template-part .wp-block-site-logo {
        flex-shrink: 0 !important;
    }

    header.wp-block-template-part .wp-block-site-logo img {
        max-width: 48px !important;
        width: 48px !important;
        height: auto !important;
    }

    header.wp-block-template-part.scrolled .wp-block-site-logo img {
        max-width: 32px !important;
        width: 32px !important;
    }

    header.wp-block-template-part .wp-block-site-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }

    header.wp-block-template-part .wp-block-site-tagline {
        white-space: normal !important;
        overflow: visible !important;
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }

    .wp-block-post {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }

    .home .wp-block-post-template > :first-child {
        grid-column: 1 !important;
        border-radius: 0 !important;
    }

    .single main.wp-block-group > *,
    .single main.wp-block-group .wp-block-post-featured-image {
        max-width: 100% !important;
    }

    .hallodogil-back-to-top {
        bottom: 20px;
        right: 16px;
        width: 38px;
        height: 38px;
    }

    @media (max-width: 480px) {
        header.wp-block-template-part .wp-block-site-title {
            font-size: 1.2rem !important;
        }

        header.wp-block-template-part .wp-block-site-tagline {
            font-size: 0.85rem !important;
        }

        header.wp-block-template-part.scrolled .wp-block-site-title {
            font-size: 1rem !important;
        }

        header.wp-block-template-part.scrolled .wp-block-site-tagline {
            font-size: 0.7rem !important;
        }
    }
}

/* Post thumbnail zoom on hover */
.home .wp-block-post-featured-image,
.blog .wp-block-post-featured-image,
.archive .wp-block-post-featured-image,
.search .wp-block-post-featured-image {
    border-radius: 10px !important;
    overflow: hidden !important;
}

.home .wp-block-post-featured-image img,
.blog .wp-block-post-featured-image img,
.archive .wp-block-post-featured-image img,
.search .wp-block-post-featured-image img {
    transition: transform 0.4s ease !important;
}

.home .wp-block-post-featured-image:hover img,
.blog .wp-block-post-featured-image:hover img,
.archive .wp-block-post-featured-image:hover img,
.search .wp-block-post-featured-image:hover img {
    transform: scale(1.05);
}

.hallodogil-similar-posts .wp-block-post-featured-image img {
    transition: transform 0.4s ease !important;
}

.hallodogil-similar-posts .wp-block-post-featured-image:hover img {
    transform: scale(1.05);
}

/* Tag chip styling */
.wp-block-post-terms.taxonomy-post_tag a,
.single .wp-block-post-terms.taxonomy-post_tag a,
main .wp-block-post-terms.taxonomy-post_tag a {
    display: inline-block !important;
    background-color: #e3e3e3 !important;
    color: #333 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin: 4px 6px 4px 0 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: background-color 0.3s ease !important;
}

.wp-block-post-terms.taxonomy-post_tag a:hover,
.single .wp-block-post-terms.taxonomy-post_tag a:hover,
main .wp-block-post-terms.taxonomy-post_tag a:hover {
    background-color: #d0d0d0 !important;
}

.wp-block-post-terms.taxonomy-post_tag .wp-block-post-terms__separator {
    display: none !important;
}