/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Description: Child theme for the Twenty Twenty-Two theme.
Author: Your Name
Template: twentytwentytwo
Version: 1.0.0
Text Domain: twentytwentytwo-child
*/

/*
 * Put custom CSS below this line.
 */

/* Prevent horizontal (X) scroll caused by full-width block margins */
html,
body{
    overflow-x: clip;
    font-family: 'Cinzel', Georgia, serif;
    background-color: #f8f7f3;
}

/* Extra safety for Samsung Internet / forced dark mode painting */
:root,
.wp-site-blocks,
body > .is-root-container{
    background-color: #f8f7f3 !important;
}
@supports not (overflow-x: clip){
    html,
    body{
        overflow-x: hidden;
    }
}

/* Ensure form controls inherit the same font */
button,
input,
select,
textarea{
    font-family: 'Cinzel', Georgia, serif;
}

/* Sticky header spacer (prevents content jump when header becomes fixed) */
:root{
    --serenity-sticky-header-h: 0px;
}
body.serenity-has-sticky-header{
    padding-top: var(--serenity-sticky-header-h);
}
.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
	padding-left: 0;
	padding-right: 0;
}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

/* Block theme: constrain alignwide blocks to 1200px */
.is-layout-constrained > .alignwide{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.is-layout-constrained, .wp-block-serenity-map-location{
    width: 100% !important;
    max-width: 100% !important;
}

/* Global: remove side margins from full-width blocks */
.alignfull{
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.wp-block-post-template{
    max-width: 1200px;
    width: 96%;
}
/* .restaurants.type-restaurants .entry-featured-image, */
.best_beach.type-best_beach .entry-featured-image,
.beautiful_village.type-beautiful_village .entry-featured-image{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    height: 80vh;
    position: relative;
    z-index: 1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* .restaurants.type-restaurants .entry-featured-image::before, */
.best_beach.type-best_beach .entry-featured-image::before,
.beautiful_village.type-beautiful_village .entry-featured-image::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0000001f;
}

/* .restaurants.type-restaurants .entry-header, */
.best_beach.type-best_beach .entry-header,
.beautiful_village.type-beautiful_village .entry-header{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding: 0;
    position: relative;
}

/* .restaurants.type-restaurants .entry-featured-image img, */
.best_beach.type-best_beach .entry-featured-image img,
.beautiful_village.type-beautiful_village .entry-featured-image img{
    width: 100%;
    height: 100%;
    visibility: hidden;
}
/* .restaurants.type-restaurants .entry-title, */
.best_beach.type-best_beach .entry-title,
.beautiful_village.type-beautiful_village .entry-title{
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: max-content;
    z-index: 5;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}

/* .restaurants.type-restaurants #food-location-content, */
.best_beach.type-best_beach #food-location-content,
.beautiful_village.type-beautiful_village #food-location-content{
    scroll-margin-top: 80px;
}

/* .restaurants.type-restaurants .food-location-scroll-down, */
.best_beach.type-best_beach .food-location-scroll-down,
.beautiful_village.type-beautiful_village .food-location-scroll-down{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.35);
    display: grid;
    place-items: center;
    text-decoration: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: foodLocationBounce 1.4s ease-in-out infinite;
}

/* .restaurants.type-restaurants .food-location-scroll-down:hover, */
.best_beach.type-best_beach .food-location-scroll-down:hover,
.beautiful_village.type-beautiful_village .food-location-scroll-down:hover{
    background: rgba(0,0,0,0.35);
}

/* .restaurants.type-restaurants .food-location-scroll-down:focus, */
/* .restaurants.type-restaurants .food-location-scroll-down:focus-visible, */
.best_beach.type-best_beach .food-location-scroll-down:focus,
.best_beach.type-best_beach .food-location-scroll-down:focus-visible,
.beautiful_village.type-beautiful_village .food-location-scroll-down:focus,
.beautiful_village.type-beautiful_village .food-location-scroll-down:focus-visible{
    outline: none;
}

/* .restaurants.type-restaurants .food-location-scroll-down__icon, */
.best_beach.type-best_beach .food-location-scroll-down__icon,
.beautiful_village.type-beautiful_village .food-location-scroll-down__icon{
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #ffffff;
    display: block;
    outline: none;

}

@keyframes foodLocationBounce{
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

/* ---------- Header (classic templates) ---------- */
.serenity-header{
    /* Visible normally at page top */
    position: relative;
    /* Keep dropdown menus above hero covers / page content */
    z-index: 100001;
    isolation: isolate;
    background: #f8f7f3;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Block theme: remove side paddings (no transparent gaps) */
header.wp-block-template-part{
    position: relative;
    z-index: 100001;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent;
}

/* After scroll >= 250px (JS toggles this class) */
.serenity-header.serenity-header--sticky{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    transform: translateY(-110%);
    transition: transform 240ms ease, box-shadow 240ms ease;
    will-change: transform;
}

.serenity-header.serenity-header--sticky.serenity-header--sticky-visible{
    transform: translateY(0);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

/* Logged-in admin bar offset (only when fixed) */
.admin-bar .serenity-header.serenity-header--sticky{
    top: 32px;
}
@media screen and (max-width: 782px){
    .admin-bar .serenity-header.serenity-header--sticky{
        top: 46px;
    }
}

/* Block-template header: enforce logo height 120px */
.serenity-header .wp-block-site-logo img{
    max-height: 60px;
    width: auto;
    height: auto;
}

.serenity-header .wp-block-navigation__container{
    gap: 18px;
}

.serenity-header .wp-block-site-title{
    font-weight: 700;
    text-decoration: none;
    color: inherit;
}

.serenity-header .serenity-header__brand{
    gap: 12px;
}

/* Match dropdown + triangle behavior for the Navigation block output */
.serenity-header .wp-block-navigation__container > .wp-block-navigation-item{
    position: relative;
}

.serenity-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content{
    position: relative;
    padding-right: 18px;
}

.serenity-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after{
    content: '';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-35%) rotate(0deg);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    opacity: 0.8;
    transition: transform 160ms ease;
}

.serenity-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content::after,
.serenity-header .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content::after{
    transform: translateY(-35%) rotate(180deg);
}

.serenity-header .wp-block-navigation__submenu-container{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 10px;
    margin: 10px 0 0 0;
    list-style: none;
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
    z-index: 1000;
}

.serenity-header .wp-block-navigation__submenu-container::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

.serenity-header .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.serenity-header .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container{
    display: block;
}

/* Desktop: force dropdown behavior for Navigation block output.
   WP may keep the responsive container in `is-menu-open` on desktop which can
   make all submenu links visible unless we override it. */
@media (min-width: 901px){
    /* Strongly hide ALL submenus in desktop view */
    .serenity-header .wp-block-navigation__submenu-container{
        display: none !important;
    }

    /* Some configurations output nested ULs without the submenu-container class */
    .serenity-header .wp-block-navigation__container li ul{
        display: none !important;
    }

    /* Show submenu on hover/focus */
    .serenity-header .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
    .serenity-header .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container{
        display: block !important;
    }
    .serenity-header .wp-block-navigation__container li:hover > ul,
    .serenity-header .wp-block-navigation__container li:focus-within > ul{
        display: block !important;
    }

    /* If the responsive container is stuck open, keep dropdown behavior */
    .serenity-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
        display: none !important;
    }
    .serenity-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
    .serenity-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container{
        display: block !important;
    }
}

.serenity-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
}

.serenity-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
    background: rgba(0,0,0,0.05);
}

.serenity-header__inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.serenity-header__logo img{
    max-height: 60px;
    width: auto;
    height: auto;
    display: block;
}

.serenity-header__site-title{
    font-weight: 700;
    text-decoration: none;
    color: inherit;
}

.serenity-header__toggle{
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.serenity-header__toggle-lines{
    width: 18px;
    height: 2px;
    background: #111;
    position: relative;
    display: block;
    transition: background-color 180ms ease, transform 180ms ease;
}
.serenity-header__toggle-lines::before,
.serenity-header__toggle-lines::after{
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: #111;
    transition: transform 180ms ease, top 180ms ease, opacity 180ms ease;
    transform-origin: center;
}
.serenity-header__toggle-lines::before{ top: -6px; }
.serenity-header__toggle-lines::after{ top: 6px; }

/* Mobile menu button animation (hamburger -> X) */
@media (max-width: 900px){
    .serenity-header__toggle[aria-expanded="true"] .serenity-header__toggle-lines{
        background: transparent;
    }
    .serenity-header__toggle[aria-expanded="true"] .serenity-header__toggle-lines::before{
        top: 0;
        transform: rotate(45deg);
    }
    .serenity-header__toggle[aria-expanded="true"] .serenity-header__toggle-lines::after{
        top: 0;
        transform: rotate(-45deg);
    }

    @media (prefers-reduced-motion: reduce){
        .serenity-header__toggle-lines,
        .serenity-header__toggle-lines::before,
        .serenity-header__toggle-lines::after{
            transition: none;
        }
    }
}

.serenity-nav__menu{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    align-items: center;
}
.serenity-nav__menu > li{
    position: relative;
}
.serenity-nav__menu a{
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

/* Small triangle for items with submenu */
.serenity-nav__menu > li.menu-item-has-children > a{
    position: relative;
    padding-right: 18px;
}
.serenity-nav__menu > li.menu-item-has-children > a::after{
    content: '';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-35%) rotate(0deg);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    opacity: 0.8;
    transition: transform 160ms ease;
}
.serenity-nav__menu > li.menu-item-has-children:hover > a::after,
.serenity-nav__menu > li.menu-item-has-children:focus-within > a::after{
    transform: translateY(-35%) rotate(180deg);
}

/* Desktop dropdown (child pages hidden until hover) */
.serenity-nav__menu li ul{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px;
    margin: 0;
    list-style: none;
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
    z-index: 1000;
}

/* Hover "bridge" so submenu doesn't disappear while moving cursor down */
.serenity-nav__menu li ul::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}
.serenity-nav__menu li ul li{
    margin: 0;
}
.serenity-nav__menu li ul a{
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
}
.serenity-nav__menu li ul a:hover{
    background: rgba(0,0,0,0.05);
}
.serenity-nav__menu li:hover > ul,
.serenity-nav__menu li:focus-within > ul{
    display: block;
}

@media (max-width: 900px){
    .serenity-header__toggle{ display: inline-flex; }
    .serenity-nav{ display: none; }
    .serenity-nav.is-open{
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding: 12px 16px 18px;
    }
    .serenity-nav__menu{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Mobile: show included pages in the list */
    .serenity-nav__menu li ul{
        display: block;
        position: static;
        min-width: 0;
        border: 0;
        border-radius: 0;
        padding: 6px 0 0 16px;
        box-shadow: none;
        background: transparent;
    }
    .serenity-nav__menu li ul a{
        padding: 6px 0;
        border-radius: 0;
        font-weight: 500;
    }

    /* Mobile: keep triangle rotated (submenu always visible) */
    .serenity-nav__menu > li.menu-item-has-children > a::after{
        transform: translateY(-35%) rotate(180deg);
    }
}

/* ---------- Page template: Hero Thumbnail (Featured Image) ---------- */
.serenity-hero-cover{
    position: relative;
}

.serenity-hero-cover .wp-block-cover__inner-container{
    position: relative;
}

.serenity-hero-title{
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    font-weight: 500;
    font-size: 4rem;
    color: #ffffff;
    text-shadow: 0 0 10px #000000bf;
}

#serenity-page-content{
    scroll-margin-top: 80px;
}

.wp-block-cover.alignfull.serenity-hero-cover{
    margin-top: 0;
}

/* Mobile: hero cover min height */
@media (max-width: 900px){
    .wp-block-cover.serenity-hero-cover,
    .serenity-hero-cover{
        min-height: 50vh !important;
    }
}

/* ---------- Full width page template ---------- */
body.page-template-template-fullwidth-php .serenity-fullwidth,
body.page-template-template-fullwidth-php .serenity-fullwidth__content{
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Remove theme-style outer paddings / widths for common blocks */
body.page-template-template-fullwidth-php .serenity-fullwidth__content > *{
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

body.page-template-template-fullwidth-php .serenity-fullwidth__content .alignwide,
body.page-template-template-fullwidth-php .serenity-fullwidth__content .alignfull{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* ---------- Utility: container for blocks ---------- */
.serenity-container{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ---------- Footer ---------- */
.serenity-footer{
    margin-top: 40px;
    padding: 40px 16px;
    background: #f8f7f3;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.serenity-footer__inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.serenity-footer__logo img,
.serenity-footer .wp-block-site-logo img{
    max-height: 60px;
    width: auto;
    height: auto;
    display: block;
}

/* If a custom logo exists, hide site name/title */
body.wp-custom-logo .wp-block-site-title,
body.wp-custom-logo .serenity-header__site-title,
body.wp-custom-logo .serenity-footer__site-title{
    display: none !important;
}

.serenity-footer__menu,
.serenity-footer__nav .wp-block-navigation__container{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.serenity-footer__menu a,
.serenity-footer__nav a{
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

/* Footer: contact + social */
.serenity-footer__contact{
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}
.serenity-footer__contact-title{
    font-weight: 700;
}
.serenity-footer__contact-text{
    font-weight: 500;
}
.serenity-footer__social{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.serenity-footer__social-link{
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.serenity-footer__social-link:hover{
    background: rgba(0,0,0,0.04);
}

/* ---------- Block utility: 2 columns (image background + text) ---------- */
.wp-block-columns.serenity-two-col-media{
    align-items: stretch;
    gap: 0;
}

.wp-block-columns.serenity-two-col-media > .wp-block-column{
    padding: 0;
}

/* Use a Cover block inside the left column for background image */
.wp-block-columns.serenity-two-col-media .serenity-two-col-media__cover.wp-block-cover{
    min-height: 320px;
    height: 100%;
}
.wp-site-blocks{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.has-text-align-center{
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 782px){
    .wp-block-columns.serenity-two-col-media .serenity-two-col-media__cover.wp-block-cover{
        min-height: 460px;
    }
}

/* Optional padding for the text column */
.wp-block-columns.serenity-two-col-media .serenity-two-col-media__content{
    padding: 28px 22px;
}

@media (min-width: 782px){
    .wp-block-columns.serenity-two-col-media .serenity-two-col-media__content{
        padding: 56px 44px;
    }
}

/* ---------- Block: Three column text (wrapper container) ---------- */
.serenity-three-col-text__wrapper{
    max-width: 100%;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* ---------- Block: Three column text (mobile sizing + centering) ---------- */
@media (max-width: 900px){
    .serenity-three-col-text__grid{
        width: 95%;
        max-width: 95vw;
        margin-left: auto;
        margin-right: auto;
        justify-items: stretch;
    }

    .serenity-three-col-text__card{
        max-width: 100%;
        text-align: center;
    }
}

/* Three column text: remove border radius (all inner blocks/elements) */
.serenity-three-col-text__wrapper,
.serenity-three-col-text__wrapper *{
    border-radius: 0 !important;
}

/* ---------- Block: Image slider (mobile portrait height) ---------- */
@media (max-width: 900px) and (orientation: portrait){
    .serenity-slider__slide{
        height: 65vh;
    }
    .serenity-slider__title {
        font-size: 4rem;
        top: 22vh;
    }
}

/* ---------- Archives: grid layout (posts + CPTs) ---------- */
body.archive .wp-block-post-template,
body.blog .wp-block-post-template,
body.search .wp-block-post-template{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}
body.archive .wp-block-post-template > li,
body.blog .wp-block-post-template > li,
body.search .wp-block-post-template > li{
    margin: 0;
    cursor: pointer;
    position: relative;
    height: 250px;
    overflow: hidden;
    background: #111;
    display: block;
}

/* Archive card image: full cover background */
body.archive .wp-block-post-template .wp-block-post-featured-image,
body.blog .wp-block-post-template .wp-block-post-featured-image,
body.search .wp-block-post-template .wp-block-post-featured-image{
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
    line-height: 0;
    background-size: cover;
    background-position: center center;
}
body.archive .wp-block-post-template .wp-block-post-featured-image img,
body.blog .wp-block-post-template .wp-block-post-featured-image img,
body.search .wp-block-post-template .wp-block-post-featured-image img{
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    object-position: center center;
    max-width: none !important;
}

/* If a theme/plugin uses background-image on the link instead of <img> */
body.archive .wp-block-post-template > li .wp-block-post-featured-image a,
body.blog .wp-block-post-template > li .wp-block-post-featured-image a,
body.search .wp-block-post-template > li .wp-block-post-featured-image a{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}

/* Dark overlay for readability */
body.archive .wp-block-post-template > li::after,
body.blog .wp-block-post-template > li::after,
body.search .wp-block-post-template > li::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.10));
    z-index: 1;
    pointer-events: none;
}

body.archive .wp-block-post-template .wp-block-post-title,
body.blog .wp-block-post-template .wp-block-post-title,
body.search .wp-block-post-template .wp-block-post-title{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    margin: 0;
    text-align: center;
}

body.archive .wp-block-post-template .wp-block-post-title a,
body.blog .wp-block-post-template .wp-block-post-title a,
body.search .wp-block-post-template .wp-block-post-title a{
    color: #fff !important;
    text-decoration: none;
    display: inline-block;
    text-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

/* Make any title/featured-image links fill card area (optional, improves tapping) */
body.archive .wp-block-post-template > li .wp-block-post-featured-image a,
body.blog .wp-block-post-template > li .wp-block-post-featured-image a,
body.search .wp-block-post-template > li .wp-block-post-featured-image a{
    display: block;
    width: 100%;
    height: 100%;
}

/* Archives: hide post excerpt block */
body.archive .wp-block-post-excerpt,
body.blog .wp-block-post-excerpt,
body.search .wp-block-post-excerpt{
    display: none !important;
}

/* Archives: hide post date/time block */
body.archive .wp-block-post-date,
body.blog .wp-block-post-date,
body.search .wp-block-post-date{
    display: none !important;
}

@media (max-width: 900px){
    body.archive .wp-block-post-template,
    body.blog .wp-block-post-template,
    body.search .wp-block-post-template{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 600px){
    /* Smaller post titles on small screens */
    .wp-block-post-title{
        font-size: 1.8rem;
        line-height: 1.2;
    }
}

/* ==========================================
   Scroll: fade-in animation
   - Auto-applied by /assets/js/scroll-fade.js
   - Opt out per element: add `data-no-fade` or class `no-fade`
   ========================================== */
.serenity-fade{
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 600ms ease, transform 600ms ease;
    will-change: opacity, transform;
}

.serenity-fade.serenity-fade--in{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce){
    .serenity-fade{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }
}