:root {
    --header-h: 5rem;
    /* WordPress sets --wp-admin--admin-bar--height on the body when the toolbar is shown. */
    --shufra-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}
@media (min-width: 1024px) {
    :root {
        --header-h: 6rem;
    }
}

/* Toolbar visible: offset fixed header, mobile panels, and remove the html margin strip above the hero. */
body.admin-bar {
    --shufra-admin-bar: var(--wp-admin--admin-bar--height, 32px);
}

body.admin-bar .site-header--fixed {
    top: var(--shufra-admin-bar);
}

body.admin-bar .shufra-landing-hero {
    margin-top: calc(-1 * var(--shufra-admin-bar));
}

.shufra-fixed-below-header {
    top: var(--header-h);
}

body.admin-bar .shufra-fixed-below-header {
    top: calc(var(--shufra-admin-bar) + var(--header-h));
}

.header-btn {
    background-image: linear-gradient(300deg, #905e16, #c19758);
    background-size: 160% 160%;
    background-position: 0% 50%;
    transition:
        background-position 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease,
        filter 220ms ease;
    will-change: background-position, transform, box-shadow, filter;
}

.header-btn:hover {
    background-position: 100% 50%;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(144, 94, 22, 0.28);
    filter: brightness(1.03) saturate(1.06);
}

.header-btn:active {
    transform: translateY(0);
}

.mobile-phone-btn {
    display: block;
}

.section-sep {
    width: min(340px, 78vw);
    height: auto;
    margin: 0.25rem auto 2rem;
    opacity: 0.95;
}

.section-sep-right {
    margin-right: 0;
    margin-left: auto;
}

.about-box {
    border: 0.5px solid rgba(193, 151, 88, 0.75);
    box-shadow:
        0 14px 34px rgba(43, 52, 61, 0.12),
        0 2px 10px rgba(43, 52, 61, 0.08);
}

.about-bg {
    background-image: linear-gradient(358deg, #fffaee 30%, #ffffff);
}

.contact-card {
    background: #905e1626;
    border: 4px solid rgba(193, 151, 88, 0.55);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.20),
        0 8px 18px rgba(0, 0, 0, 0.10);
}

/* Hash scroll target: clear fixed header (and mobile bottom bar) — uses --header-h from main.js + admin bar. */
#contact-card {
    scroll-margin-top: calc(var(--shufra-admin-bar) + var(--header-h) + 0.75rem);
    scroll-margin-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    #contact-card {
        scroll-margin-bottom: 1.5rem;
    }
}

.contact-input {
    background: rgba(250, 250, 248, 0.92);
}

.contact-bg-depth {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(900px 520px at 82% 12%, rgba(207, 170, 105, 0.22) 0%, rgba(207, 170, 105, 0.00) 62%),
        radial-gradient(760px 480px at 18% 92%, rgba(248, 245, 240, 0.10) 0%, rgba(248, 245, 240, 0.00) 68%),
        radial-gradient(520px 380px at 50% 45%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.00) 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 22%),
        linear-gradient(180deg, rgba(18, 22, 27, 0.0) 0%, rgba(18, 22, 27, 0.25) 100%),
        #2b343d;
}

.contact-bg-depth::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.00) 32%),
        radial-gradient(1200px 520px at 50% 110%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.00) 60%);
    opacity: 0.9;
}

.contact-bg-depth::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, rgba(255, 255, 255, 0) 1.6px);
    background-size: 18px 18px;
    opacity: 0.10;
    mix-blend-mode: overlay;
}

details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

body {
    background-color: #fafaf8;
}

.packages-card {
    padding: 0.4rem;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    background-image:
        radial-gradient(120% 80% at 20% 10%, rgba(255, 245, 210, 0.95) 0%, rgba(255, 245, 210, 0) 55%),
        radial-gradient(100% 70% at 85% 85%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(
            33deg,
            #6d4b16 0%,
            #b67a1c 12%,
            #f4d08a 28%,
            #c98b2c 45%,
            #ffe7b3 62%,
            #b87818 78%,
            #8a5a14 100%
        );
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.hero-image-frame {
    background:
        radial-gradient(120% 80% at 20% 10%, rgba(255, 245, 210, 0.95) 0%, rgba(255, 245, 210, 0) 55%),
        radial-gradient(100% 70% at 85% 85%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(33deg,
            #6d4b16 0%,
            #b67a1c 12%,
            #f4d08a 28%,
            #c98b2c 45%,
            #ffe7b3 62%,
            #b87818 78%,
            #8a5a14 100%
        );
    padding: 6px;
    border-radius: 1.5rem;
    display: inline-flex;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.site-logo-wrap {
    top: 10px;
    transition: top 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: top;
}
.site-header.shrunk .site-logo-wrap {
    top: 5px;
}

.site-logo {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 320ms cubic-bezier(.2,.8,.2,1), height 320ms cubic-bezier(.2,.8,.2,1), padding 320ms cubic-bezier(.2,.8,.2,1), transform 320ms cubic-bezier(.2,.8,.2,1);
    will-change: width, height, padding;
}
@media (min-width: 768px) {
    .site-logo {
        width: 11rem;
        height: 11rem;
    }
}
.site-logo.shrunk {
    width: 5rem !important;
    height: 5rem !important;
}

.site-header,
.site-header-inner {
    transition: height 320ms cubic-bezier(.2,.8,.2,1);
    will-change: height;
}
.site-header-inner {
    height: 5rem;
}
.site-header.shrunk .site-header-inner {
    height: 4rem;
}
@media (min-width: 1024px) {
    .site-header-inner {
        height: 6rem;
    }
}

.hero-media {
    top: var(--header-h);
    height: calc(100% - var(--header-h));
    transition: top 320ms cubic-bezier(0.2, 0.8, 0.2, 1), height 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: top, height;
}

@media (max-width: 1023px) {
    #hero.hero-mobile-bg.has-mobile-bg {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media (min-width: 1024px) {
    #hero {
        height: 100vh;
    }
    #hero .hero-foreground-image {
        max-height: calc(100vh - var(--header-h) - 8rem);
        width: auto;
        transition: max-height 320ms cubic-bezier(.2,.8,.2,1);
        will-change: max-height;
    }
}

/* Section scroll-in: assets/css/scroll-reveal.css (enqueued after shufra-main; media must be "all"). */

/* Mobile drawer: stagger links + CTA after panel slides */
.shufra-mobile-menu-panel nav > a {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
    transition:
        opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(1) {
    transition-delay: 0.08s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(2) {
    transition-delay: 0.14s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(3) {
    transition-delay: 0.2s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(4) {
    transition-delay: 0.26s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(5) {
    transition-delay: 0.32s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(6) {
    transition-delay: 0.38s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(7) {
    transition-delay: 0.44s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(8) {
    transition-delay: 0.5s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(9) {
    transition-delay: 0.56s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(10) {
    transition-delay: 0.62s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(11) {
    transition-delay: 0.68s;
}
.shufra-mobile-menu-panel.shufra-mobile-menu-open nav > a:nth-child(12) {
    transition-delay: 0.74s;
}
@media (prefers-reduced-motion: reduce) {
    .shufra-mobile-menu-panel nav > a {
        opacity: 1;
        transform: none;
        transition: none;
    }
}