/*
Theme Name: Treat of Joy (Inspiro Blocks PRO Child)
Theme URI: https://treatofjoy.com
Template: inspiro-blocks
Description: Custom child theme for treatofjoy.com based on Inspiro Blocks PRO. Adds a fixed transparent header that darkens on scroll, portfolio grid gaps, service-card hover reveal, and full-page section scrolling on the homepage. Source of truth: D:\Treat of Joy\Web\theme\
Author: Radu & Laura (built with Claude Code)
Version: 2.1.2
Text Domain: inspiro-blocks-child
*/

/* =========================================================
   Fixed site header — transparent at top, dark on scroll
   ========================================================= */
.toj-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background-color: transparent;
    transition: background-color .35s ease;
}

/* readability scrim while at the top of the page */
.toj-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(16, 16, 16, .6), rgba(16, 16, 16, 0));
    opacity: 1;
    transition: opacity .35s ease;
    pointer-events: none;
}

/* inner pages keep the classic behavior: full-width dark blurred bar
   on scroll. It lives on a pseudo-element because backdrop-filter on
   the header itself would clip the mobile menu overlay */
body:not(.home) .toj-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(16, 16, 16, .85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

body:not(.home) .toj-header.is-scrolled::after {
    opacity: 1;
}

.toj-header > * {
    position: relative;
    z-index: 1;
}

.toj-header.is-scrolled::before {
    opacity: 0;
}

/* homepage only: at the top a full horizontal menu, no burger.
   once scrolled the horizontal menu disappears and only a burger
   button (plus the logo) stays visible */
.toj-header .toj-nav-burger {
    display: none;
}

body.home .toj-header.is-scrolled .toj-nav-full {
    display: none;
}

body.home .toj-header.is-scrolled .toj-nav-burger {
    display: flex;
}

/* the burger button itself is the only semi-transparent element */
.toj-header .toj-nav-burger .wp-block-navigation__responsive-container-open {
    background-color: rgba(16, 16, 16, .85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
}

.toj-header .toj-nav-burger .wp-block-navigation__responsive-container-open svg {
    width: 26px;
    height: 26px;
}

/* full-screen overlay menu (burger click): vertical items, large text */
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content {
    font-size: 2rem;
    line-height: 1.6;
}

@media (min-width: 1025px) {
    .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content {
        font-size: 2.5rem;
    }
}

body.admin-bar .toj-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

/* logo: hidden while the header is transparent at the top,
   fades in together with the dark scrolled bar on inner pages.
   On the homepage the logo stays hidden throughout, since the
   scrolled state is also when the hamburger button takes over */
.toj-header .toj-logo {
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}

body:not(.home) .toj-header.is-scrolled .toj-logo {
    opacity: 1;
    visibility: visible;
}

.toj-header .toj-logo img {
    max-height: 48px;
    width: auto;
}

.toj-header .wp-block-navigation a:hover {
    color: var(--wp--preset--color--primary);
}

/* the fixed bar collapses its wrapper, so push content below it —
   except when the page starts with a full cover (hero image/video) */
.wp-site-blocks > header.site-header + :is(main, div, section) {
    padding-top: 110px;
}

.wp-site-blocks > header.site-header + :is(main, div, section):has(> .wp-block-cover:first-child),
.wp-site-blocks > header.site-header + :is(main, div, section):has(> .wp-block-post-content > .wp-block-cover:first-child) {
    padding-top: 0;
}

/* =========================================================
   Typography — body text echoes the hero quote (Inter, light),
   larger than the theme default (16px) but below quote size
   ========================================================= */
.wp-site-blocks > :not(header):not(footer) p:not([class*="font-size"]):not([style*="font-size"]):not(.has-primary-color) {
    font-family: var(--wp--preset--font-family--inter);
    font-size: 20px;
    font-weight: 200;
    line-height: 1.6;
}

/* =========================================================
   Portfolio grid — gaps between items + filter on dark bg
   ========================================================= */
.wpzoom-blocks_portfolio-block.layout-grid .wpzoom-blocks_portfolio-block_items-list {
    gap: 24px;
}

#portfolio .wpzoom-blocks_portfolio-block_filter ul li a {
    color: #fff !important;
}

#portfolio .wpzoom-blocks_portfolio-block_filter ul li a:hover,
#portfolio .wpzoom-blocks_portfolio-block_filter ul li.current-cat a {
    color: var(--wp--preset--color--primary) !important;
}

/* =========================================================
   Service cards — on hover show the photo: dim and text fade out
   ========================================================= */
.toj-service-cards .wp-block-cover__background,
.toj-service-cards .wp-block-cover__inner-container {
    transition: opacity .4s ease;
}

.toj-service-cards .wp-block-cover:hover .wp-block-cover__background,
.toj-service-cards .wp-block-cover:hover .wp-block-cover__inner-container {
    opacity: 0;
}

/* =========================================================
   Homepage — full-page section-by-section scrolling (desktop)
   ========================================================= */
@media (min-width: 1025px) {
    /* proximity keeps natural scroll momentum and eases into the
       nearest section instead of hard-paging */
    html:has(body.home) {
        scroll-snap-type: y proximity;
        scroll-behavior: smooth;
    }

    body.home .wp-site-blocks > * {
        scroll-snap-align: start;
    }

    body.home .wp-site-blocks > header {
        scroll-snap-align: none;
    }

    /* the page bottom is a valid resting point, so the footer
       no longer snaps back to the contact section */
    body.home .wp-site-blocks > footer {
        scroll-snap-align: end;
    }

    /* each section fills the screen, content vertically centered */
    body.home .wp-site-blocks > :not(header):not(footer) {
        box-sizing: border-box;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* flex children shrink-to-fit and drift to the middle; force them
       back to full width so constrained sections stay left-aligned */
    body.home .wp-site-blocks > :not(header):not(footer) > * {
        width: 100%;
    }
}