/* =========================================================
   Tatreez layer — authentic Palestinian embroidery motifs.
   Loaded after style.css; disable with 'tatreez_theme' => false in config.php
   ========================================================= */
:root {
    --tz-red: #2c5170;
    --tz-star: url(../img/tz-star.svg);
    --tz-cross: url(../img/tz-cross-star.svg);
    --tz-column: url(../img/tz-column.svg);
    --tz-band: url(../img/tz-band.svg);
}

/* Border band from the thobe chest panel (قبة) */
.tatreez-strip, .pattern-band {
    height: 18px;
    background: var(--tz-band) repeat-x center / 22.29px 18px;
}
.site-footer > .pattern-band { background-color: var(--sand); }

/* Section divider: a single star between two running stitches */
.stitch-divider {
    width: 170px; height: 22px;
    -webkit-mask: none; mask: none;
    background:
        var(--tz-star) center / 22px 22px no-repeat,
        repeating-linear-gradient(90deg, var(--tz-red) 0 6px, transparent 6px 10px) left center / 66px 2px no-repeat,
        repeating-linear-gradient(90deg, var(--tz-red) 0 6px, transparent 6px 10px) right center / 66px 2px no-repeat;
}
.reveal.in .stitch-divider { animation: tzDivider 1s .2s var(--ease) both; }
@keyframes tzDivider { from { background-size: 0 0, 0 2px, 0 2px; } to { background-size: 22px 22px, 66px 2px, 66px 2px; } }

/* Header pendant, hero medallion, intro badge: the Bethlehem star */
.brand-plaque::after { background: var(--tz-star) center / 22px no-repeat, var(--white); }
.hero-medallion span { background-image: var(--tz-star); }
.intro-badge img { width: 62%; }

/* Hero side panel: column of stars, like the thobe side panel (بنيقة) */
.hero-panel {
    width: 34px; inset-inline-end: -58px;
    background: var(--tz-column) repeat-y center top / 34px 34px;
    border-inline: 1px solid rgba(196, 138, 82, .45); border-radius: 0;
    box-shadow: none;
    animation-timing-function: steps(12, end);
}

/* Same medallion + star column beside every arched image */
.arch-panel {
    position: absolute; z-index: 1; top: calc(4% + 88px); width: 34px; height: 58%;
    background: var(--tz-column) repeat-y center top / 34px 34px;
    border-inline: 1px solid rgba(196, 138, 82, .45);
    clip-path: inset(0 0 100% 0);
}
.arch-medallion {
    position: absolute; z-index: 3; top: 4%;
    display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%;
    background: var(--white); box-shadow: var(--shadow);
    outline: 1.5px dashed rgba(224, 104, 29, .6); outline-offset: 5px;
    opacity: 0;
}
.arch-medallion span {
    width: 64%; height: 64%;
    background: var(--tz-star) center / contain no-repeat;
    animation: spin 60s linear infinite;
}
.arch-panel.arch-end { inset-inline-end: -58px; }
.arch-medallion.arch-end { inset-inline-end: -86px; }
.arch-panel.arch-start { inset-inline-start: -58px; }
.arch-medallion.arch-start { inset-inline-start: -86px; }
.about-media .arch-panel { height: 48%; }
.reveal.in .arch-panel { animation: stitchDown 2.4s .5s steps(12, end) both; }
.reveal.in .arch-medallion { animation: pop .8s .3s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
    .arch-panel { clip-path: none; }
    .arch-medallion { opacity: 1; }
}

/* Cross-stitch star watermarks */
.hero::after, .page-hero::after, .statement .container::before, .statement .container::after, .site-footer::before {
    content: ""; position: absolute; pointer-events: none;
    background: currentColor;
    -webkit-mask: var(--tz-cross) center / contain no-repeat;
            mask: var(--tz-cross) center / contain no-repeat;
}
.hero::after {
    width: 380px; aspect-ratio: 1; bottom: -120px; inset-inline-start: -110px;
    color: var(--teal-700); opacity: .06;
    animation: spin 160s linear infinite;
}
.page-hero::after {
    width: 300px; aspect-ratio: 1; top: 50%; margin-top: -150px; inset-inline-end: -70px;
    color: #fff; opacity: .08;
    animation: spin 160s linear infinite;
}
.site-footer { position: relative; isolation: isolate; }
.site-footer::before {
    z-index: -1; width: 340px; aspect-ratio: 1; bottom: -90px; inset-inline-end: -90px;
    color: #fff; opacity: .035;
}

/* Statement: the quote framed between two embroidered stars */
.statement .container { position: relative; }
.statement .container::before, .statement .container::after {
    top: 50%; width: 150px; aspect-ratio: 1; margin-top: -75px;
    color: var(--tz-red); opacity: .14;
}
.statement .container::before { inset-inline-start: -170px; }
.statement .container::after { inset-inline-end: -170px; }

/* Vision / mission cards: a faint star stitched into the corner */
.vm-card::after {
    content: ""; position: absolute; z-index: -1; bottom: -26px; inset-inline-end: -26px; width: 110px; height: 110px;
    background: var(--tz-star) center / contain no-repeat;
    opacity: .07; transition: opacity .4s, transform .8s var(--ease);
}
.vm-card:hover::after { opacity: .13; transform: rotate(45deg); }

/* Area cards: a star is stitched into the corner on hover */
.area-card::before {
    content: ""; position: absolute; top: 14px; inset-inline-end: 14px; width: 26px; height: 26px;
    background: var(--tz-star) center / contain no-repeat;
    opacity: 0; transform: scale(.4) rotate(-90deg);
    transition: opacity .35s, transform .5s var(--ease);
}
.area-card:hover::before { opacity: .9; transform: none; }

/* Donate box: an embroidered ribbon along its edge */
.donate-box { padding-inline-end: calc(clamp(2rem, 4vw, 3.25rem) + 44px); }
.donate-box::before {
    inset-block: 0; inset-inline-end: 26px; width: 34px;
    background: var(--tz-column) repeat-y center top / 34px 34px, var(--white);
    -webkit-mask: none; mask: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}

@media (max-width: 1320px) {
    .arch-panel { width: 24px; top: calc(4% + 60px); background-size: 24px 24px; }
    .arch-medallion { width: 60px; height: 60px; outline-offset: 3px; }
    .arch-panel.arch-end { inset-inline-end: -36px; }
    .arch-medallion.arch-end { inset-inline-end: -54px; }
    .arch-panel.arch-start { inset-inline-start: -36px; }
    .arch-medallion.arch-start { inset-inline-start: -54px; }
}
@media (max-width: 960px) {
    .has-arch-start { margin-inline-start: 36px; }
    .has-arch-end { margin-inline-end: 36px; }
    .arch-panel { width: 20px; top: calc(4% + 54px); background-size: 20px 20px; }
    .arch-medallion { width: 56px; height: 56px; }
    .arch-panel.arch-end { inset-inline-end: -31px; }
    .arch-medallion.arch-end { inset-inline-end: -49px; }
    .arch-panel.arch-start { inset-inline-start: -31px; }
    .arch-medallion.arch-start { inset-inline-start: -49px; }
}
@media (max-width: 1240px) {
    .statement .container::before, .statement .container::after { display: none; }
}
@media (max-width: 960px) {
    .hero-panel { width: 24px; inset-inline-end: -36px; background-size: 24px 24px; }
}
@media (max-width: 640px) {
    .tatreez-strip, .pattern-band { height: 14px; background-size: 17.33px 14px; }
    .hero-panel { width: 20px; inset-inline-end: -31px; background-size: 20px 20px; }
    .hero::after { width: 240px; bottom: -80px; inset-inline-start: -80px; }
    .page-hero::after { width: 200px; margin-top: -100px; inset-inline-end: -60px; }
    .donate-box { padding-inline-end: clamp(2rem, 4vw, 3.25rem); padding-top: calc(clamp(2rem, 4vw, 3.25rem) + 30px); }
    .donate-box::before {
        inset-block: 0 auto; inset-inline: 0; width: auto; height: 26px;
        background: var(--tz-band) repeat-x center / 21.67px 17.5px, var(--white);
    }
}