/*
Theme Name: Sugar Butter Flour
Description: Lightweight block theme for Sugar Butter Flour bakery, Sunnyvale.
Version: 1.2.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: sugarbutterflour
*/

/* Header */
.sbf-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(8px);background:rgba(251,247,242,.92)!important;border-bottom:1px solid var(--wp--preset--color--line)}
.sbf-logo a{text-decoration:none;color:inherit}
.sbf-logo small{display:block;font-family:var(--wp--preset--font-family--body);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--wp--preset--color--rose);margin-top:2px}
.sbf-header .wp-block-navigation a{text-decoration:none}
.sbf-header .wp-block-navigation a:hover{color:var(--wp--preset--color--rose)}

/* Buttons */
.wp-block-button__link{transition:transform .15s ease, background-color .15s ease, color .15s ease}
.wp-block-button__link:hover{transform:translateY(-1px)}
.is-style-outline .wp-block-button__link{border-color:var(--wp--preset--color--brand)!important;color:var(--wp--preset--color--brand)!important}
.is-style-outline .wp-block-button__link:hover{background:var(--wp--preset--color--brand)!important;color:#fff!important}
.sbf-site-logo img{display:block;height:auto}
.sbf-footer .wp-block-site-logo img{background:#fff;padding:0}

/* Hero */
.sbf-hero{position:relative;overflow:hidden}
.sbf-hero::before{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;background:var(--wp--preset--color--blush);opacity:.55;z-index:0}
.sbf-hero > *{position:relative;z-index:1}
.sbf-eyebrow{letter-spacing:.24em;text-transform:uppercase;font-size:.78rem!important;color:var(--wp--preset--color--rose)}
.sbf-collage{max-width:560px;margin-left:auto!important;margin-right:0!important}
.sbf-collage .wp-block-column{display:flex;flex-direction:column;gap:16px}
.sbf-collage .wp-block-image{margin:0!important}
.sbf-collage img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:22px;box-shadow:0 18px 40px rgba(59,42,36,.18);display:block}
.sbf-collage .sbf-tall,.sbf-collage .sbf-tall img{height:100%}
.sbf-collage .sbf-tall img{aspect-ratio:auto;min-height:100%}
.sbf-badge{display:inline-flex;gap:10px;align-items:center;font-size:.92rem;color:var(--wp--preset--color--muted)}
.sbf-badge b{color:var(--wp--preset--color--cocoa)}

/* Steps */
.sbf-step{background:#fff;border-radius:20px;padding:30px 26px!important;box-shadow:0 6px 24px rgba(59,42,36,.06);height:100%}
.sbf-step .num{margin-top:0;display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;background:var(--wp--preset--color--blush);color:var(--wp--preset--color--cocoa);font-family:var(--wp--preset--font-family--display);font-size:1.4rem;font-weight:600;margin-bottom:6px}
.sbf-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.sbf-gallery img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:16px;display:block}
.sbf-checklist{list-style:none;padding:0!important;margin:0}
.sbf-checklist li{padding:6px 0 6px 28px;position:relative}
.sbf-checklist li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:8px;border-left:2px solid var(--wp--preset--color--rose);border-bottom:2px solid var(--wp--preset--color--rose);transform:rotate(-45deg)}

/* Gallery (block) */
.sbf-gallery-blocks.wp-block-gallery{gap:14px!important}
.sbf-gallery-blocks.wp-block-gallery .wp-block-image img{border-radius:16px;aspect-ratio:1/1;height:auto!important;object-fit:cover}
.sbf-hours.wp-block-table{font-size:.98rem}

/* Visit */
.sbf-card > *{margin-top:0!important;margin-bottom:0!important}
.sbf-label{font-size:.72rem!important;letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--muted);margin-top:18px!important}
.sbf-card .sbf-label:first-child{margin-top:0!important}
.sbf-value{font-size:1.05rem;margin-top:4px!important}
.sbf-value a{color:inherit}
.sbf-hours.wp-block-table{margin-top:4px!important}
.sbf-hours.wp-block-table td{border:0;padding:3px 0}
.sbf-hours.wp-block-table table{width:100%}
.sbf-card{background:#fff;border-radius:22px;padding:36px!important;box-shadow:0 6px 24px rgba(59,42,36,.06)}
.sbf-info dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--muted);margin-top:18px}
.sbf-info dt:first-child{margin-top:0}
.sbf-info dd{margin:4px 0 0;font-size:1.05rem}
.sbf-info a{color:inherit}
.sbf-hours td:last-child{text-align:right}
.sbf-map{background:#EDE4DA;border-radius:22px;min-height:420px}
.sbf-map iframe{width:100%;height:100%;min-height:420px;border:0;border-radius:22px;display:block}

/* Footer */
.sbf-footer a{color:inherit}

@media (max-width: 781px){
  .sbf-header .wp-block-button__link{white-space:nowrap;padding:.55rem 1rem!important;font-size:.9rem}
  .sbf-site-logo img{width:70px!important}
  .sbf-collage{max-width:100%;margin:10px 0 0}
  .sbf-gallery-blocks .wp-block-image:nth-child(n+4){display:none}
  .sbf-hero::before{width:320px;height:320px;right:-140px;top:-80px}
  .sbf-card{padding:26px!important}
}

/* ---------- Banner slider ---------- */
.sbf-slider{position:relative;overflow:hidden;margin-top:0!important}
.sbf-slider > .sbf-slide{margin:0!important;min-height:560px;display:flex;align-items:center}
.sbf-slider > .sbf-slide > *{width:100%}
.sbf-slider.is-ready > .sbf-slide{display:none}
.sbf-slider.is-ready > .sbf-slide.is-active{display:flex;animation:sbfFade .7s ease}
.sbf-slider.is-ready > .sbf-slide.is-active .sbf-slide-img img{animation:sbfPop .8s ease}
@keyframes sbfPop{from{opacity:0;transform:scale(.9) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes sbfFade{from{opacity:0}to{opacity:1}}
.sbf-slide h1,.sbf-slide .sbf-slide-title{font-size:var(--wp--preset--font-size--huge)!important;margin-top:.2em}
.sbf-slide-img{margin:0!important}
.sbf-slide-img{position:relative;width:min(100%,480px);aspect-ratio:1/1;margin:0 auto!important;border-radius:50%;background:var(--wp--preset--color--blush);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 20px 50px rgba(129,3,4,.10)}
.sbf-slide-img::before,.sbf-slide-img::after{content:"";position:absolute;border-radius:50%;background:#F4E6C8;width:22px;height:22px;top:14%;left:10%}
.sbf-slide-img::after{background:#D9978F;width:12px;height:12px;top:22%;left:auto;right:12%}
.sbf-slide-img img{width:76%;height:76%;object-fit:contain;display:block;mix-blend-mode:multiply}
.sbf-slide-img.is-photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.sbf-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--wp--preset--color--brand);font-size:30px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:5}
.sbf-arrow:hover{background:#fff}
.sbf-prev{left:18px}.sbf-next{right:18px}
.sbf-dots{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:10px;z-index:5}
.sbf-dots button{width:11px;height:11px;border-radius:50%;border:0;padding:0;background:rgba(129,3,4,.25);cursor:pointer}
.sbf-dots button.is-active{background:var(--wp--preset--color--brand);width:28px;border-radius:6px}

/* ---------- Store categories ---------- */
.sbf-cat{background:var(--wp--preset--color--white);border:1px solid var(--wp--preset--color--line);border-radius:22px;overflow:hidden;padding:0 0 18px!important;transition:transform .2s ease, box-shadow .2s ease}
.sbf-cat:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(59,42,36,.12)}
.sbf-cat .wp-block-image{margin:0!important}
.sbf-cat .wp-block-image img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0}
.sbf-cat > :not(.wp-block-image){padding-left:22px;padding-right:22px}
.sbf-cat p{font-size:.95rem;margin:.3em 0 0!important}
.sbf-cat h3{margin:.8em 0 .1em!important;font-size:1.6rem!important}
.sbf-cat h3 a,.sbf-cat-link a{text-decoration:none;color:inherit}
.sbf-cat-link{margin-top:0!important;font-size:.9rem;color:var(--wp--preset--color--rose)}
.sbf-cat-link a{color:var(--wp--preset--color--brand);font-weight:500}

/* ---------- Wedding card ---------- */
.sbf-wedding-card{background:#fff;border-radius:22px;padding:32px!important;box-shadow:0 6px 24px rgba(59,42,36,.06);border-top:4px solid var(--wp--preset--color--orange)}
#wedding,#custom-cakes,#visit,#store-menu{scroll-margin-top:110px}

@media (max-width: 781px){
  .sbf-slider > .sbf-slide{min-height:0;padding-bottom:80px!important}
  .sbf-slide-img{width:min(100%,320px)}
  .sbf-arrow{display:none}
  .sbf-cats{display:grid!important;grid-template-columns:1fr 1fr;gap:14px}
  .sbf-cat{padding:0 0 12px!important}
  .sbf-cat > :not(.wp-block-image){padding-left:14px;padding-right:14px}
  .sbf-cat h3{font-size:1.3rem!important}
}
