/* PrintNotch Seasons — decoration only. Nothing here should ever sit in front of a
   button or a link: every piece is pointer-events:none and hidden from screen readers. */

:root { --pns-accent: #2563eb; }

/* ─── Banner ─── */
.pns-banner {
    position: relative; z-index: 1001; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 20px; background: var(--pns-accent); color: #fff; text-align: center;
    font-size: .88rem; font-weight: 600; line-height: 1.4; letter-spacing: .01em;
}
.pns-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.pns-banner a:hover { opacity: .88; color: #fff; }
.pns-preview-flag { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: .76rem; font-style: normal; font-weight: 700; }

/* ─── Falling effect ─── */
.pns-fall { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9998; pointer-events: none; }

/* ─── Product card badge ─── */
.pns-cards .pn-card-gallery { position: relative; }
.pns-cards .pn-card-gallery::after {
    position: absolute; top: 8px; right: 8px; z-index: 4; pointer-events: none;
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
    font-size: 17px; line-height: 1;
}
.pns-cards .pn-card-badge { background: var(--pns-accent) !important; color: #fff !important; }

/* ─── Header decorations ───
   Drawn on the header itself, so they hang under it and travel with it when it
   sticks to the top of the screen. ::before is used because the theme already
   uses ::after for the header's scroll shadow. */
.pns-on .pn-header, .pns-on .site-header, .pns-on header.site-header { overflow: visible; }
.pns-on .pn-header::before, .pns-on .site-header::before {
    content: none; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2;
}

/* String lights */
.pns-deco-lights .pn-header::before, .pns-deco-lights .site-header::before {
    content: ""; top: 100%; height: 18px;
    background:
        radial-gradient(circle at 14px 11px, #fbbf24 0 4px, transparent 5px),
        radial-gradient(circle at 46px 14px, #ef4444 0 4px, transparent 5px),
        radial-gradient(circle at 78px 11px, #22c55e 0 4px, transparent 5px),
        radial-gradient(circle at 110px 14px, #38bdf8 0 4px, transparent 5px),
        repeating-linear-gradient(90deg, rgba(15,23,42,.35) 0 2px, transparent 2px 32px) 0 5px / 128px 2px repeat-x;
    background-repeat: repeat-x; background-size: 128px 18px;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, .5));
}

/* Cobwebs in the top corners */
.pns-deco-cobweb .pn-header::before, .pns-deco-cobweb .site-header::before {
    content: ""; top: 0; bottom: 0; opacity: .45;
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    background-size: 68px 68px, 68px 68px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%230f172a' stroke-width='2.5'%3E%3Cpath d='M0 0 L100 55 M0 0 L55 100 M0 0 L85 85 M0 0 L28 100 M0 0 L100 28'/%3E%3Cpath d='M24 0 Q15 15 0 24 M48 0 Q30 30 0 48 M72 0 Q45 45 0 72 M96 0 Q60 60 0 96'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%230f172a' stroke-width='2.5' transform='translate(100,0) scale(-1,1)'%3E%3Cpath d='M0 0 L100 55 M0 0 L55 100 M0 0 L85 85 M0 0 L28 100 M0 0 L100 28'/%3E%3Cpath d='M24 0 Q15 15 0 24 M48 0 Q30 30 0 48 M72 0 Q45 45 0 72 M96 0 Q60 60 0 96'/%3E%3C/g%3E%3C/svg%3E");
}

/* Snow along the bottom edge of the header */
.pns-deco-snowcap .pn-header::before, .pns-deco-snowcap .site-header::before {
    content: ""; top: 100%; height: 13px; margin-top: -4px;
    background: radial-gradient(circle at 10px 0, #fff 0 10px, transparent 11px) repeat-x;
    background-size: 20px 13px;
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, .14));
}

/* Bunting */
.pns-deco-bunting .pn-header::before, .pns-deco-bunting .site-header::before {
    content: ""; top: 100%; height: 20px; opacity: .92;
    background:
        linear-gradient(135deg, var(--pns-accent) 50%, transparent 50%) 0 0 / 26px 20px repeat-x,
        linear-gradient(225deg, var(--pns-accent) 50%, transparent 50%) 13px 0 / 26px 20px repeat-x;
}

/* People who ask for less motion get the colours and the badge, not the falling. */
@media (prefers-reduced-motion: reduce) {
    .pns-fall { display: none; }
}

@media (max-width: 768px) {
    .pns-banner { font-size: .82rem; padding: 8px 14px; }
    .pns-deco-cobweb .pn-header::before, .pns-deco-cobweb .site-header::before { background-size: 46px 46px, 46px 46px; }
    .pns-cards .pn-card-gallery::after { width: 28px; height: 28px; font-size: 14px; top: 6px; right: 6px; }
}

@media print {
    .pns-banner, .pns-fall { display: none !important; }
    .pns-on .pn-header::before, .pns-on .site-header::before { content: none !important; }
}