/**
 * Mamma Rosa site frontend - phase 13a.
 *
 * Home page (hero, category carousel, storia, gallery, CTA band), the
 * "all categories" grid and the global footer. Ported 1:1 from the approved
 * mockup-shop.html v2 (NO checkered borders). All colors/fonts come from the
 * --po-* design variables with the same fallbacks as pizza-menu.css.
 *
 * Class prefix: pos- (Pizza Ordering Site). The .pos-full helper breaks
 * sections out of boxed theme content to true full width.
 *
 * @since 2.17.0
 */

.pos-home, .pos-footer, .pos-allcats {
    --c-tomato: var(--po-primary, #c5341f);
    --c-tomato-dark: var(--po-price, #a52817);
    --c-basil: var(--po-secondary, #2f5d3a);
    --c-basil-deep: #24452c;
    --c-gold: var(--po-accent, #e0a528);
    --c-cream: var(--po-bg, #fbf3e4);
    --c-cream-2: #f6ecd8;
    --c-card: var(--po-card-bg, #fffdf8);
    --c-ink: var(--po-text, #2b1d16);
    --c-muted: var(--po-text-muted, #6b5746);
    --c-line: var(--po-border, #e6d6ba);
    --f-head: var(--po-font-heading, "Playfair Display", Georgia, serif);
    --f-body: var(--po-font-body, "Outfit", system-ui, sans-serif);
    --f-hand: "Caveat", cursive;
    --maxw: var(--po-menu-max, 1180px);
    font-family: var(--f-body);
    color: var(--c-ink);
}

/* Break out of boxed theme content to true full width. */
.pos-full {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.pos-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 22px;
}

/* ---------- Shared decorations ---------- */
.pos-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    font-size: 11.5px;
    letter-spacing: .4em;
    text-transform: uppercase;
    font-weight: 700;
}

.pos-eyebrow svg { width: 30px; height: 14px; }

.pos-hand {
    font-family: var(--f-hand);
    transform: rotate(-2deg);
    display: inline-block;
}

/* ---------- HOME HERO ---------- */
.pos-hero {
    background:
        radial-gradient(1100px 600px at 78% 40%, rgba(70,30,12,0), rgba(16,9,5,.55) 70%),
        linear-gradient(100deg, #16100b 0 44%, rgba(22,16,11,.35) 60%, rgba(22,16,11,.15)),
        var(--pos-hero-img, none) right center/cover no-repeat,
        #16100b;
    color: #fff;
    min-height: 540px;
    display: flex;
    align-items: center;
}

.pos-hero .pos-wrap { width: 100%; padding-top: 64px; padding-bottom: 64px; }
.pos-hero .pos-eyebrow { justify-content: flex-start; color: var(--c-gold); }

.pos-hero h1 {
    font-family: var(--f-head) !important;
    font-weight: 800;
    font-size: clamp(44px, 6.5vw, 74px);
    margin: 10px 0 6px;
    color: #fff !important;
    line-height: 1.05;
}

.pos-hero-tag {
    display: inline-flex;
    color: var(--c-tomato);
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-size: 13.5px;
    border-bottom: 2px solid var(--c-tomato);
    padding-bottom: 8px;
    margin-bottom: 18px;
}

.pos-hero .pos-lead {
    color: #eadfcd;
    font-weight: 300;
    font-size: 16.5px;
    max-width: 430px;
    line-height: 1.65;
}

.pos-btns { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

.pos-btn {
    display: inline-block;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 14px 26px;
    border-radius: 10px;
    transition: filter .2s;
}

.pos-btn.solid { background: var(--c-tomato); color: #fff !important; }
.pos-btn.solid:hover { filter: brightness(.92); color: #fff !important; }
.pos-btn.outline { border: 1.5px solid #cdb89c; color: #f4ead8 !important; }
.pos-btn.outline:hover { border-color: #fff; color: #fff !important; }

.pos-hero-foot { display: flex; align-items: center; gap: 13px; margin-top: 46px; color: #d8c8ad; }
.pos-hero-foot svg { width: 42px; height: 42px; stroke: #cdb89c; fill: none; }
.pos-hero-foot b { display: block; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: #cdb89c; }
.pos-hero-foot i { font-style: italic; font-size: 13.5px; }

/* ---------- CATEGORY CAROUSEL ---------- */
.pos-cats { background: var(--c-cream); padding: 62px 0 56px; }
.pos-cats .pos-eyebrow { color: var(--c-gold); }

.pos-cats h2 {
    font-family: var(--f-head) !important;
    font-weight: 800;
    font-size: clamp(30px, 4vw, 42px);
    text-align: center;
    margin: 8px 0 0;
    color: var(--c-ink) !important;
}

.pos-knot { display: flex; justify-content: center; margin-top: 8px; }
.pos-knot svg { width: 120px; height: 16px; }

.pos-cats-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--maxw);
    margin: 26px auto 0;
    padding: 0 22px 26px;
}

.pos-arrows { display: flex; gap: 8px; }

.pos-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--c-line);
    background: var(--c-card);
    color: var(--c-basil);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-arrow:hover { border-color: var(--c-basil); background: #eef3ea; }
.pos-arrow:disabled { opacity: .35; cursor: default; }

.pos-see-all {
    color: var(--c-tomato) !important;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.pos-see-all:hover { text-decoration: underline !important; }

.pos-cats-viewport { overflow: hidden; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.pos-cats-track { display: flex; gap: 18px; transition: transform .45s cubic-bezier(.22,.8,.3,1); }

/* ---------- CATEGORY CARD (carousel + all-categories grid) ---------- */
.pos-cat-card {
    flex: 0 0 calc(25% - 13.5px);
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(120,90,60,.07);
    text-align: center;
}

@media (max-width: 980px) { .pos-cat-card { flex-basis: calc(50% - 9px); } }

.pos-cat-img {
    height: 170px;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-cat-img.is-dummy svg { width: 72px; height: 72px; opacity: .95; }

.pos-cat-badge {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--c-card);
    margin: -31px auto 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -3px 8px rgba(120,90,60,.08);
}

.pos-cat-badge svg { width: 30px; height: 30px; }

.pos-cat-body { padding: 10px 18px 22px; }

.pos-cat-body h3 {
    font-family: var(--f-head) !important;
    font-weight: 700;
    font-size: 17.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-ink) !important;
    margin: 0;
}

.pos-cat-body p {
    color: var(--c-muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 8px 0 14px;
    min-height: 40px;
}

.pos-cat-link {
    color: var(--c-tomato) !important;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.pos-cat-link:hover { text-decoration: underline !important; }

/* All-categories grid (shortcode) */
.pos-allcats {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 40px 22px 64px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

@media (max-width: 980px) { .pos-allcats { grid-template-columns: repeat(2, 1fr); } }
.pos-allcats .pos-cat-card { flex: none; }

/* ---------- STORIA ---------- */
.pos-storia { background: var(--c-cream-2); padding: 68px 0; }

.pos-storia .pos-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 46px;
    align-items: center;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 22px;
}

@media (max-width: 900px) { .pos-storia .pos-grid { grid-template-columns: 1fr; } }

.pos-storia .pos-eyebrow { justify-content: flex-start; color: var(--c-basil); }

.pos-storia h2 {
    font-family: var(--f-head) !important;
    font-weight: 800;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.12;
    margin: 12px 0 18px;
    color: var(--c-ink) !important;
}

.pos-storia h2 em { font-style: normal; color: var(--c-tomato); }

.pos-storia p {
    color: #4d3c2e;
    line-height: 1.7;
    font-size: 15px;
    margin-bottom: 14px;
    max-width: 480px;
}

.pos-sign { font-family: var(--f-hand); font-size: 30px; color: var(--c-basil); margin-top: 10px; }
.pos-since { font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--c-tomato); font-weight: 700; margin-top: 2px; }

.pos-storia-img { position: relative; }

.pos-storia-img .pos-ph {
    border-radius: 18px;
    height: 420px;
    background-position: center;
    background-size: cover;
    border: 1px solid var(--c-line);
}

.pos-stamp {
    position: absolute;
    left: -30px;
    bottom: 42px;
    width: 116px;
    height: 116px;
    border: 2.5px solid var(--c-basil);
    border-radius: 50%;
    background: rgba(251,243,228,.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-9deg);
    color: var(--c-basil);
    gap: 2px;
    font-weight: 700;
}

.pos-stamp b { font-size: 15px; letter-spacing: .1em; }
.pos-stamp svg { width: 26px; height: 13px; }

@media (max-width: 900px) { .pos-stamp { left: 8px; } }

/* ---------- GALLERY STRIP ---------- */
.pos-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.pos-gallery div { height: 205px; background-position: center; background-size: cover; }
@media (max-width: 900px) { .pos-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---------- CTA BAND ---------- */
.pos-cta-band { background: var(--c-cream); padding: 54px 0; }

.pos-cta-box {
    background:
        linear-gradient(95deg, var(--c-basil-deep) 0 55%, rgba(36,69,44,.78) 72%, rgba(36,69,44,.45)),
        var(--pos-cta-img, none) right center/cover no-repeat,
        var(--c-basil-deep);
    border-radius: 20px;
    padding: 42px 46px;
    color: #fff;
    position: relative;
    overflow: hidden;
    outline: 1px solid rgba(255,255,255,.25);
    outline-offset: -10px;
}

.pos-cta-box h2 {
    font-family: var(--f-head) !important;
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 36px);
    color: #fff !important;
    margin: 0;
}

.pos-cta-box p { color: #dcead9; font-weight: 300; margin: 8px 0 22px; max-width: 430px; }
.pos-cta-box .pos-btn.ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff !important; margin-left: 10px; }
.pos-cta-box .pos-btn.ghost:hover { border-color: #fff; }

.pos-cta-stamp {
    position: absolute;
    top: 32px;
    right: 44px;
    width: 102px;
    height: 102px;
    border: 2px dashed rgba(255,255,255,.85);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(8deg);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-align: center;
    gap: 3px;
}

.pos-cta-stamp .hrt { color: #ff9d8a; font-size: 15px; }
@media (max-width: 760px) { .pos-cta-stamp { display: none; } }

/* ---------- FOOTER ---------- */
.pos-footer {
    background: var(--c-cream-2, #f6ecd8);
    border-top: 1px solid var(--c-line);
    padding: 52px 0 0;
}

.pos-footer .pos-cols {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 22px 38px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
    gap: 34px;
}

@media (max-width: 900px) { .pos-footer .pos-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pos-footer .pos-cols { grid-template-columns: 1fr; } }

.pos-footer h4 {
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--c-basil) !important;
    margin: 0 0 16px;
    font-weight: 800;
    font-family: var(--f-body) !important;
}

.pos-flogo { font-family: var(--f-head); font-weight: 800; font-size: 23px; color: var(--c-basil); }
.pos-flogo small {
    display: block;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: .35em;
    color: var(--c-tomato);
    text-transform: uppercase;
}

.pos-fdesc { color: var(--c-muted); font-size: 13px; line-height: 1.6; margin: 12px 0 16px; max-width: 230px; }

.pos-soc { display: flex; gap: 9px; }

.pos-soc a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-ink);
    color: #f6ecd8 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.pos-soc a:hover { background: var(--c-tomato); }
.pos-soc svg { width: 15px; height: 15px; fill: currentColor; }

.pos-frow {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    color: #4d3c2e;
    font-size: 13.5px;
    margin-bottom: 11px;
    line-height: 1.45;
}

.pos-frow svg { flex: 0 0 16px; width: 16px; height: 16px; stroke: var(--c-tomato); fill: none; margin-top: 2px; }

.pos-hours { width: 100%; font-size: 13.5px; color: #4d3c2e; border-collapse: collapse; }
.pos-hours td { padding: 4px 0; border-bottom: 1px dashed var(--c-line); }
.pos-hours td:last-child { text-align: right; font-weight: 600; }

.pos-fhand { font-family: var(--f-hand); color: var(--c-tomato); font-size: 20px; margin-top: 12px; display: inline-block; transform: rotate(-2deg); }

.pos-news p { color: var(--c-muted); font-size: 13px; line-height: 1.6; margin: 0 0 13px; }
.pos-nl { display: flex; gap: 7px; }

.pos-nl input {
    flex: 1;
    border: 1.5px solid var(--c-line);
    border-radius: 10px;
    background: #fff;
    padding: 11px 12px;
    font-family: var(--f-body);
    font-size: 13px;
    color: var(--c-ink);
}

.pos-nl button {
    border: none;
    background: var(--c-tomato);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 0 16px;
    cursor: pointer;
    font-family: var(--f-body);
}

.pos-nl-thanks {
    margin-top: 10px;
    background: #eef3ea;
    border: 1px solid #d4e0cd;
    color: var(--c-basil);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
}

.pos-footer .pos-bottom {
    border-top: 1px solid var(--c-line);
    padding: 16px 22px;
    text-align: center;
    color: #a78f74;
    font-size: 12px;
}

/* Hide the theme's own footer when ours is active. */
body.pos-replace-footer .site-footer,
body.pos-replace-footer #colophon {
    display: none !important;
}