/*
Theme Name: SBC Sweet Stall
Theme URI: https://sbcsite.com/
Description: The SBC Sweet Stall look (maroon, gold and cream; Playfair Display and Poppins) for WordPress + WooCommerce. Child of Twenty Twenty-Five. The homepage is ordinary blocks in Pages → Home; the menu, specials and hours come from the SBC Shop plugin.
Author: SBC Sweet Stall
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: sbc-theme
*/

/* ============ Tokens ============ */
:root {
	--maroon: #5a1426;
	--maroon-dark: #3d0c19;
	--gold: #c9973a;
	--gold-light: #e8c77a;
	--cream: #fbf5ec;
	--sand: #f3e7d5;
	--ink: #2b1a14;
	--muted: #7a6558;
	--white: #fff;
	--wa: #15803d;
	--wa-dark: #166534;
	--gold-text: #8a5f1c;
	--radius: 16px;
	--shadow: 0 6px 24px rgba(61, 12, 25, .10);
	--shadow-lg: 0 14px 40px rgba(61, 12, 25, .18);
	--font-head: "Playfair Display", Georgia, serif;
	--font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--header-h: 60px;
	--top: var(--wp-admin--admin-bar--height, 0px);
}
@media (min-width: 860px) { :root { --header-h: 72px; } }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--top)); -webkit-text-size-adjust: 100%; }
body { background: var(--cream); }
img { max-width: 100%; height: auto; }
.wp-site-blocks { padding-top: 0; padding-bottom: 0; }
.wp-site-blocks > * { margin-block-start: 0 !important; }
.sbc-home > .wp-block-post-content > * { margin-block: 0 !important; }
.muted { color: var(--muted); font-size: .9rem; }
.center { text-align: center; }
a:focus-visible, button:focus-visible, .wp-element-button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 2px; }

.eyebrow {
	font-size: .75rem !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gold-text);
	margin-bottom: .5rem;
}

/* ============ Buttons ============ */
.wp-element-button, .wp-block-button__link, .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; border-radius: 999px; text-decoration: none; cursor: pointer;
	transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.wp-block-button__link:hover, .btn:hover { transform: translateY(-1px); }
.btn { padding: .8rem 1.5rem; background: var(--maroon); color: var(--white) !important; font-weight: 600; border: 0; }
.btn:hover { background: var(--maroon-dark); }
.btn-small { min-height: 44px; padding: .5rem 1.2rem; font-size: .9rem; }
.wp-block-button.is-style-gold .wp-block-button__link,
.btn-gold {
	background: linear-gradient(135deg, var(--gold-light), var(--gold));
	color: var(--maroon-dark);
}
.wp-block-button.is-style-gold .wp-block-button__link:hover, .btn-gold:hover { background: var(--gold-light); color: var(--maroon-dark); }

/* ============ Header ============ */
header.wp-block-template-part { display: contents; }
.festive-banner {
	background: linear-gradient(90deg, transparent, rgba(232, 199, 122, .12), transparent), var(--maroon-dark);
	border-bottom: 1px solid rgba(232, 199, 122, .35);
	color: var(--gold-light);
	padding-top: 8px; padding-bottom: 8px;
	text-align: center;
}
.festive-banner p {
	margin: 0 auto;
	font-size: clamp(.72rem, 3.3vw, .82rem);
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.4;
}
.festive-banner p::before {
	content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px;
	background: url("assets/diya.svg") center / contain no-repeat;
}
.festive-banner a, .banner-link {
	position: relative; margin-left: 8px; color: var(--white); text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .4); white-space: nowrap;
}
.festive-banner a:hover { border-color: var(--white); color: var(--white); }
.festive-banner a::before { content: ""; position: absolute; inset: -12px -8px; }
@media (max-width: 420px) { .festive-banner a { display: none; } }

.site-header {
	position: sticky; top: var(--top); z-index: 50;
	background: rgba(90, 20, 38, .97);
	color: var(--white);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}
.header-inner { min-height: var(--header-h); gap: 8px; }
.brand { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem !important; margin: 0; color: var(--gold-light); line-height: 1.2; }
.brand a { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; color: var(--gold-light); text-decoration: none; }
.brand span { color: var(--white); font-weight: 600; }
.header-right { gap: 4px; }

.site-nav { font-size: .95rem; font-weight: 500; }
.site-nav .wp-block-navigation-item__content { color: var(--white); text-decoration: none; padding: 8px 10px !important; }
.site-nav .wp-block-navigation-item__content:hover { color: var(--gold-light); }
.site-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; justify-content: center; align-items: center; color: var(--white); }
.site-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--maroon) !important; padding: 24px 16px; }
.site-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; }
.site-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-top: 1px solid rgba(255, 255, 255, .1); }
.site-nav .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 14px 4px !important; font-size: 1.1rem; }
.site-nav .wp-block-navigation__responsive-container-close { color: var(--white); }
/* Hamburger up to 859px (WordPress switches at 600px; five links don't fit before 860px). */
@media (min-width: 600px) and (max-width: 859px) {
	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

.sbc-hdr-cart {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; color: var(--white) !important; text-decoration: none; border-radius: 50%;
}
.sbc-hdr-cart:hover { background: rgba(255, 255, 255, .1); }
.sbc-hdr-count {
	position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 999px; background: var(--gold-light); color: var(--maroon-dark);
	font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.sbc-hdr-count.is-empty { display: none; }
.header-right p { margin: 0; }

/* ============ Hero ============ */
.hero {
	position: relative; overflow: hidden;
	min-height: calc(100vh - var(--header-h) - var(--top) - 36px);
	display: flex; flex-direction: column; justify-content: flex-end;
	padding-top: 48px; padding-bottom: 56px;
	color: var(--white);
	background: var(--maroon-dark);
}
@supports (min-height: 100svh) { .hero { min-height: calc(100svh - var(--header-h) - var(--top) - 36px); } }
@media (min-width: 860px) { .hero { justify-content: center; } }
.hero > .hero-bg { position: absolute; inset: 0; margin: 0 !important; max-width: none !important; z-index: 0; }
.hero > .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(61, 12, 25, .15) 0%, rgba(61, 12, 25, .55) 45%, rgba(30, 6, 12, .92) 100%);
}
.hero > .hero-content { position: relative; z-index: 2; text-align: center; }
.hero-content::before {
	content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 10px;
	background: url("assets/diya.svg") center / contain no-repeat;
	filter: drop-shadow(0 0 14px rgba(244, 185, 66, .65));
}
.hero .eyebrow { color: var(--gold-light); }
.hero h1 { color: var(--white); font-size: clamp(2.4rem, 11vw, 4.5rem); margin-bottom: .25em; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.hero .tagline { font-size: clamp(1.05rem, 4.5vw, 1.35rem); max-width: 32ch !important; margin: 0 auto 1.5rem !important; color: #fbeedd; }
.hero .hero-note { margin-top: 1rem; font-size: .85rem; color: #f0dcc4; }

/* ============ Sections ============ */
.section { padding-top: 64px; padding-bottom: 64px; }
@media (min-width: 860px) { .section { padding-top: 88px; padding-bottom: 88px; } }
.section-head { text-align: center; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); margin-bottom: .5em; }
.section-head h2::after {
	content: ""; display: block; width: 132px; height: 14px; margin: 14px auto 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='14' viewBox='0 0 132 14'%3E%3Cg fill='%23c9973a'%3E%3Crect x='0' y='6.5' width='48' height='1' opacity='.7'/%3E%3Crect x='84' y='6.5' width='48' height='1' opacity='.7'/%3E%3Cpath d='M66 0.5l6.5 6.5-6.5 6.5-6.5-6.5z'/%3E%3Cpath d='M66 4l3 3-3 3-3-3z' fill='%23fbf5ec'/%3E%3Ccircle cx='54' cy='7' r='2'/%3E%3Ccircle cx='78' cy='7' r='2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.how .section-head h2::after { filter: brightness(1.25); }
.section-sub { color: var(--muted); max-width: 46ch !important; margin: 0 auto !important; }
.section-sub strong { color: var(--maroon); }

/* Rangoli decorations */
.specials, .how { position: relative; overflow: hidden; }
.specials > *, .how > * { position: relative; z-index: 1; }
.specials::before, .specials::after, .how::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	width: 280px; height: 280px; opacity: .14;
	background: url("assets/rangoli.svg") center / contain no-repeat;
	animation: sbc-spin 140s linear infinite;
}
.specials::before { top: -110px; left: -110px; }
.specials::after { bottom: -110px; right: -110px; animation-direction: reverse; }
.how::before { width: 340px; height: 340px; top: -120px; right: -140px; opacity: .09; filter: brightness(1.4); }
@keyframes sbc-spin { to { transform: rotate(360deg); } }
@media (min-width: 860px) {
	.specials::before, .specials::after { width: 420px; height: 420px; }
	.specials::before { top: -160px; left: -160px; }
	.specials::after { bottom: -160px; right: -160px; }
	.how::before { width: 520px; height: 520px; top: -180px; right: -180px; }
}

/* ============ Diwali Specials ([sbc_specials]) ============ */
.specials { background: linear-gradient(180deg, var(--sand), var(--cream)); }
.specials-grid { display: grid; gap: 20px; }
.special-card {
	background: var(--white); border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow); border: 1px solid rgba(201, 151, 58, .25);
	transition: transform .2s ease, box-shadow .2s ease;
}
.special-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.special-card.featured { border: 2px solid var(--gold); }
.special-card.is-soldout { opacity: .75; }
.card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.card-noimg {
	display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); color: var(--gold-light);
	font-family: var(--font-head); font-size: 3rem; font-weight: 700;
}
.card-body { padding: 18px 18px 20px; }
.card-body h3 { font-size: 1.4rem; margin: 0 0 .3em; }
.card-body p { color: var(--muted); margin: 0; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.badge {
	display: inline-block; background: var(--maroon); color: var(--gold-light);
	font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.price { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--maroon); white-space: nowrap; }
.price small { font-family: var(--font-body); font-size: .75rem; font-weight: 500; color: var(--muted); margin-left: 2px; }
@media (hover: hover) { .special-card:hover .card-img img { transform: scale(1.06); } }
@media (min-width: 600px) {
	.specials-grid { grid-template-columns: repeat(2, 1fr); }
	.special-card.featured:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
	.special-card.featured:first-child .card-img { aspect-ratio: auto; height: 100%; }
	.special-card.featured:first-child .card-body { display: flex; flex-direction: column; justify-content: center; padding: 28px; }
}
@media (min-width: 860px) {
	.specials-grid { grid-template-columns: repeat(3, 1fr); }
	.special-card.featured:first-child { grid-column: auto; display: block; }
	.special-card.featured:first-child .card-img { aspect-ratio: 4 / 3; height: auto; }
	.special-card.featured:first-child .card-body { display: block; padding: 18px 18px 20px; }
}

/* ============ Menu ([sbc_menu] from the plugin) ============ */
.section.menu .sbc-menu { padding-top: 0; background: transparent; }
.sbc-tabs { top: calc(var(--top) + var(--header-h)) !important; }
.sbc-cat { scroll-margin-top: calc(var(--header-h) + var(--top) + 64px) !important; }

/* ============ How to Order ============ */
.how { background: var(--maroon); color: #f6e7d6; }
.how h2, .how h3 { color: var(--white); }
.how .eyebrow { color: var(--gold-light); }
.wp-block-columns.steps { gap: 16px; margin-bottom: 32px; }
.step {
	position: relative;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(232, 199, 122, .3);
	border-radius: var(--radius);
	padding: 22px 20px 20px 76px;
}
.step > * { margin-top: 0 !important; }
.step .step-num {
	position: absolute; left: 20px; top: 20px; margin: 0;
	width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, var(--gold-light), var(--gold));
	color: var(--maroon-dark); font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1;
}
.step h3 { font-size: 1.2rem; margin-bottom: .3em; }
.step p { margin: 0; font-size: .95rem; }
.step strong { color: var(--gold-light); }
@media (min-width: 860px) {
	.step { padding: 64px 24px 24px; text-align: center; }
	.step .step-num { left: 50%; transform: translateX(-50%); }
}

/* ============ About ============ */
.wp-block-columns.about-inner { gap: 28px; }
@media (min-width: 860px) { .wp-block-columns.about-inner { gap: 56px; } }
.about-img { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-text h2 { font-size: clamp(1.8rem, 6.5vw, 2.4rem); }
.promise { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.promise li {
	margin: 0; background: var(--sand); border: 1px solid rgba(201, 151, 58, .4); color: var(--maroon);
	padding: 6px 14px; border-radius: 999px; font-size: .9rem; font-weight: 500;
}
.promise li::before { content: "✓ "; color: var(--gold); font-weight: 700; }

/* ============ Contact ============ */
.contact { background: var(--sand); }
.wp-block-columns.contact-grid { gap: 16px; }
.contact-card {
	background: var(--white); border-radius: var(--radius); padding: 22px 20px;
	box-shadow: var(--shadow); border-top: 4px solid var(--gold);
}
.contact-card > * { margin-top: 0 !important; }
.contact-card h3 { font-size: 1.25rem; margin-bottom: .5em; }
.contact-card p { margin: 0 0 .75em; }
.contact-card p:last-child { margin-bottom: 0; }
.sbc-hours-list p { margin: 0 0 .5em; }
.sbc-hours-closed { color: var(--maroon); font-weight: 500; font-size: .9rem; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--maroon); font-weight: 600; }

/* ============ Footer ============ */
.site-footer {
	background: var(--maroon-dark); color: #e6d2bf; text-align: center;
	padding-top: 36px; padding-bottom: 96px;
}
.site-footer::before {
	content: ""; display: block; width: 114px; height: 36px; margin: 0 auto 14px;
	background: url("assets/diya.svg") left bottom / 26px no-repeat, url("assets/diya.svg") center bottom / 36px no-repeat, url("assets/diya.svg") right bottom / 26px no-repeat;
	filter: drop-shadow(0 0 8px rgba(244, 185, 66, .5));
}
.site-footer > * { margin-top: 0 !important; margin-bottom: .4rem !important; }
.site-footer .brand { font-size: 1.4rem !important; }
.site-footer .small { font-size: .8rem; opacity: .7; }
.site-footer .sbc-hours { font-size: .85rem; color: #e6d2bf; }
.site-footer .sbc-hours-closed { color: var(--gold-light); }
.site-footer a { color: var(--gold-light); }

/* ============ Floating WhatsApp ============ */
.wa-float {
	position: fixed; right: 16px; bottom: 16px; z-index: 60;
	width: 56px; height: 56px; border-radius: 50%; background: var(--wa);
	display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	transition: transform .2s;
}
.wa-float svg { width: 30px; height: 30px; fill: var(--white); }
.wa-float:hover { transform: scale(1.06); }

/* ============ Other pages (cart, checkout, product, menu page) ============ */
.sbc-page { padding-top: 32px; padding-bottom: 64px; }
.sbc-page-title { text-align: center; margin-bottom: 24px; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce button.button.alt, .woocommerce a.button.alt {
	background: var(--maroon); color: var(--white); border-radius: 999px; font-family: var(--font-body); font-weight: 600;
}
.woocommerce .button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { background: var(--maroon-dark); color: var(--white); }
.woocommerce .price, .woocommerce-Price-amount { color: var(--maroon); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}