
/*
Theme Name: SpiceYaad Catering One-Page
Theme URI: https://example.com/spiceyaad-catering
Author: TapBuilt / ChatGPT
Author URI: https://example.com
Description: Mobile-first one-page theme for Caribbean caterers with per-pan pricing, weekly family meals, gallery, reviews, about, and a working contact form via AJAX.
Version: 1.2.0
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spiceyaad-catering
Tags: one-column, custom-colors, custom-menu, custom-logo
*/
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Cantarell,Arial,'Apple Color Emoji','Segoe UI Emoji';color:#0f172a;background:#fff}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
:root{--bg:#ffffff;--text:#0f172a;--muted:#475569;--card:#ffffff;--line:#e2e8f0;--brand:#059669;--brand-700:#047857;--amber:#d97706;--shadow:0 10px 30px rgba(2,6,23,.08)}
html.dark{--bg:#0b1220;--text:#e2e8f0;--muted:#94a3b8;--card:#0f172a;--line:#1f2937;--shadow:0 10px 30px rgba(0,0,0,.35)}
.container{max-width:1160px;margin-inline:auto;padding-inline:16px}
.section{padding:64px 0}
.h1{font-size:clamp(32px,6vw,56px);line-height:1.05;font-weight:900;letter-spacing:-.02em}
.h2{font-size:clamp(24px,4.5vw,36px);font-weight:800;letter-spacing:-.02em}
.h3{font-size:20px;font-weight:700}
.lead{font-size:clamp(16px,2.5vw,18px);color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:14px;padding:.8rem 1.1rem;cursor:pointer;transition:.2s;background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn:hover{background:var(--brand-700)}
.btn.secondary{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn.secondary:hover{background:#f8fafc}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:9999px;background:#f1f5f9;border:1px solid var(--line);color:var(--muted);font-size:12px}
.grid{display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.card-body{padding:20px}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
html.dark .nav{background:rgba(15,23,42,.7)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.nav-links{display:none;gap:24px}
@media(min-width:768px){.nav-links{display:flex}}
.hero{position:relative;overflow:hidden}
.hero .blobs::before,.hero .blobs::after{content:"";position:absolute;border-radius:9999px;filter:blur(60px);z-index:-1}
.hero .blobs::before{width:320px;height:320px;background:#86efac55;left:-90px;top:-90px}
.hero .blobs::after{width:320px;height:320px;background:#fbbf2455;right:-90px;bottom:-90px}
.kpis{grid-template-columns:repeat(3,1fr)}
.tabs{border:1px solid var(--line);border-radius:18px;padding:6px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media(min-width:768px){.tabs{grid-template-columns:repeat(5,1fr)}}
.tab{padding:10px 12px;border-radius:12px;text-align:center}
.tab.active{background:var(--brand);color:#fff}
.menu-grid{grid-template-columns:repeat(1,1fr)}
@media(min-width:768px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
.perpan-grid{grid-template-columns:repeat(1,1fr)}
@media(min-width:768px){.perpan-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.perpan-grid{grid-template-columns:repeat(3,1fr)}}
.gallery-grid{grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
.footer{border-top:1px solid var(--line);padding:28px 0;font-size:14px}
.form-row{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.input, .select, .textarea{width:100%;background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text)}
.small{font-size:12px;color:var(--muted)}
.switch{display:inline-flex;align-items:center;gap:8px}
.switch input{appearance:none;width:44px;height:24px;background:#cbd5e1;border-radius:9999px;position:relative;outline:none;cursor:pointer;transition:.2s}
.switch input:checked{background:var(--brand)}
.switch input:before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:9999px;transition:.2s}
.switch input:checked:before{transform:translateX(20px)}
hr.soft{border:0;border-top:1px solid var(--line);margin:16px 0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
