/*
Theme Name: South Beach Publishing Kadence Child
Theme URI: https://southbeachpublishing.com/
Description: Kadence child theme for South Beach Publishing. Styling package for editable catalog pages, with scroll-based colour changes.
Author: South Beach Publishing
Template: kadence
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Text Domain: southbeach-kadence-child
*/

:root {
  --sbp-accent: #18b77a;
  --sbp-accent-2: #2077e3;
  --sbp-ink: #122033;
  --sbp-muted: #5c6b7c;
  --sbp-line: rgba(18, 32, 51, .10);
  --sbp-soft: #f4fbf8;
  --sbp-warm: #fff7e9;
  --sbp-blue-soft: #eef6ff;
  --sbp-bg: #f7fbfc;
  --sbp-card: #ffffff;
  --sbp-radius: 28px;
  --sbp-shadow: 0 22px 60px rgba(16, 35, 56, .12);
}
html { scroll-behavior: smooth; }
body { background: var(--sbp-bg); }
body.sbp-theme-green { --sbp-accent: #18b77a; --sbp-accent-2: #2077e3; --sbp-bg: #f3fcf8; }
body.sbp-theme-blue { --sbp-accent: #2077e3; --sbp-accent-2: #18b77a; --sbp-bg: #eef6ff; }
body.sbp-theme-warm { --sbp-accent: #f2a33a; --sbp-accent-2: #18b77a; --sbp-bg: #fff8ed; }
body.sbp-theme-purple { --sbp-accent: #7d5cf3; --sbp-accent-2: #18b77a; --sbp-bg: #f6f2ff; }

.sbp-page {
  color: var(--sbp-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
.sbp-page * { box-sizing: border-box; }
.sbp-section { padding: clamp(64px, 9vw, 120px) 22px; position: relative; overflow: hidden; }
.sbp-section:nth-child(odd)::before {
  content: "";
  position: absolute;
  inset: 10% auto auto -120px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, color-mix(in srgb, var(--sbp-accent) 18%, transparent), transparent 68%);
  border-radius: 999px;
  pointer-events: none;
}
.sbp-container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.sbp-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--sbp-line);
  padding: 14px 22px;
}
.sbp-topbar-inner { max-width: 1180px; margin: 0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.sbp-logo { display:flex; align-items:center; gap:12px; color:var(--sbp-ink); text-decoration:none; font-weight: 800; letter-spacing: -.02em; }
.sbp-logo-mark { width: 38px; height:38px; display:grid; place-items:center; border-radius:14px; background: linear-gradient(135deg, var(--sbp-accent), var(--sbp-accent-2)); color:#fff; box-shadow: 0 14px 30px rgba(20, 100, 130, .22); }
.sbp-nav { display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.sbp-nav a { color:var(--sbp-muted); text-decoration:none; font-weight: 650; font-size: 14px; }
.sbp-nav a:hover { color:var(--sbp-ink); }
.sbp-nav .sbp-nav-button { color:#fff; background: var(--sbp-ink); border-radius:999px; padding: 10px 16px; box-shadow: 0 14px 35px rgba(18, 32, 51, .18); }
.sbp-nav .sbp-nav-button:hover { color:#fff; transform:translateY(-1px); }

.sbp-hero { min-height: 78vh; display:flex; align-items:center; background:
  radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--sbp-accent) 22%, transparent), transparent 30%),
  radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--sbp-accent-2) 18%, transparent), transparent 32%),
  linear-gradient(135deg, #fbfffd 0%, var(--sbp-bg) 100%);
}
.sbp-hero-grid { display:grid; grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr); gap: clamp(36px, 6vw, 72px); align-items:center; }
.sbp-kicker-row { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px; }
.sbp-pill { display:inline-flex; align-items:center; gap: 6px; border:1px solid var(--sbp-line); border-radius:999px; padding: 7px 12px; background: rgba(255,255,255,.76); color:var(--sbp-muted); font-weight: 700; font-size: 13px; box-shadow: 0 12px 26px rgba(18,32,51,.06); }
.sbp-main-title { font-size: clamp(44px, 6.2vw, 86px); line-height:.96; letter-spacing:-.065em; margin: 0 0 18px; color:var(--sbp-ink); max-width: 920px; }
.sbp-title-accent { font-size: clamp(34px, 4.2vw, 58px); line-height:1.02; letter-spacing:-.045em; margin:0 0 24px; color: var(--sbp-accent); }
.sbp-lead { font-size: clamp(18px, 2.2vw, 23px); color:var(--sbp-muted); max-width: 720px; margin-bottom: 28px; }
.sbp-cta-row { display:flex; gap: 12px; flex-wrap:wrap; align-items:center; margin-top: 22px; }
.sbp-button .wp-block-button__link, .sbp-btn-primary {
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px!important; padding: 15px 22px!important;
  background: linear-gradient(135deg, var(--sbp-accent), var(--sbp-accent-2))!important; color:#fff!important; font-weight:800; text-decoration:none;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--sbp-accent) 25%, transparent);
  transition: all .2s ease;
}
.sbp-button .wp-block-button__link:hover, .sbp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 48px color-mix(in srgb, var(--sbp-accent) 34%, transparent); }
.sbp-button-secondary .wp-block-button__link, .sbp-btn-secondary {
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px!important; padding: 14px 20px!important;
  background: rgba(255,255,255,.78)!important; color:var(--sbp-ink)!important; font-weight:800; text-decoration:none; border:1px solid var(--sbp-line)!important;
}
.sbp-note { font-size: 14px; color:var(--sbp-muted); margin-top: 18px; }
.sbp-card, .sbp-mockup, .sbp-catalog-card, .sbp-callout, .sbp-step, .sbp-product-card {
  background: rgba(255,255,255,.88);
  border:1px solid var(--sbp-line);
  border-radius: var(--sbp-radius);
  box-shadow: var(--sbp-shadow);
}
.sbp-mockup { padding: 24px; position:relative; overflow:hidden; }
.sbp-mockup::before { content:""; position:absolute; inset:auto -30px -70px auto; width:180px; height:180px; background:radial-gradient(circle, color-mix(in srgb, var(--sbp-accent) 28%, transparent), transparent 70%); border-radius:999px; }
.sbp-mockup-top { display:flex; justify-content:space-between; align-items:center; gap: 12px; margin-bottom:18px; }
.sbp-window-dots { display:flex; gap:6px; }
.sbp-window-dots span { width:10px; height:10px; border-radius:999px; background:var(--sbp-line); display:block; }
.sbp-window-dots span:first-child { background:#ff7b7b; } .sbp-window-dots span:nth-child(2){ background:#ffd36a; } .sbp-window-dots span:nth-child(3){ background:#5fe0a7; }
.sbp-mockup h3 { margin:0 0 8px; font-size: 28px; letter-spacing:-.03em; }
.sbp-mockup-grid { display:grid; gap: 12px; margin-top: 18px; }
.sbp-mini-row { display:flex; justify-content:space-between; gap:14px; align-items:center; padding: 14px 16px; background:rgba(247,251,252,.85); border-radius:18px; border:1px solid var(--sbp-line); }
.sbp-status { font-weight:800; color:var(--sbp-accent); }
.sbp-muted { color:var(--sbp-muted); }
.sbp-section-kicker { color:var(--sbp-accent); font-size:14px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; margin:0 0 12px; }
.sbp-section-title { font-size: clamp(34px, 4.6vw, 64px); line-height:1.02; letter-spacing:-.055em; margin: 0 0 20px; color:var(--sbp-ink); max-width: 940px; }
.sbp-section-intro { font-size: clamp(17px, 2vw, 21px); color:var(--sbp-muted); max-width: 860px; margin-bottom: 34px; }
.sbp-grid-2 { display:grid!important; grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; }
.sbp-grid-3 { display:grid!important; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px; }
.sbp-grid-4 { display:grid!important; grid-template-columns: repeat(4, minmax(0,1fr)); gap:20px; }
.sbp-card, .sbp-product-card, .sbp-catalog-card { padding: 26px; transition: transform .22s ease, box-shadow .22s ease; }
.sbp-card:hover, .sbp-product-card:hover, .sbp-catalog-card:hover { transform: translateY(-4px); box-shadow:0 26px 72px rgba(16,35,56,.15); }
.sbp-card h3, .sbp-product-card h3, .sbp-catalog-card h3 { font-size: 24px; line-height:1.12; letter-spacing:-.03em; margin: 10px 0 10px; }
.sbp-icon { width:44px; height:44px; border-radius:16px; display:grid; place-items:center; background: color-mix(in srgb, var(--sbp-accent) 15%, #fff); color:var(--sbp-accent); font-weight:900; margin:0; }
.sbp-catalog-card { min-height: 320px; display:flex; flex-direction:column; justify-content:space-between; }
.sbp-catalog-card .sbp-tag { align-self:flex-start; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color: var(--sbp-accent); background: color-mix(in srgb, var(--sbp-accent) 10%, white); border-radius:999px; padding:8px 10px; }
.sbp-card-link { display:inline-flex; align-items:center; gap:6px; color:var(--sbp-ink); font-weight:900; text-decoration:none; margin-top:18px; }
.sbp-card-link:hover { color:var(--sbp-accent); }
.sbp-feature-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding:0; margin:22px 0; list-style:none; }
.sbp-feature-list li { padding: 14px 16px; border:1px solid var(--sbp-line); border-radius:18px; background:rgba(255,255,255,.72); }
.sbp-feature-list li::before { content:"✓"; color:var(--sbp-accent); font-weight:900; margin-right:8px; }
.sbp-callout { padding: clamp(28px, 4vw, 46px); background: linear-gradient(135deg, color-mix(in srgb, var(--sbp-accent) 10%, white), rgba(255,255,255,.92)); }
.sbp-steps { counter-reset: step; }
.sbp-step { padding: 24px; position:relative; }
.sbp-step-number { width:44px; height:44px; border-radius:50%; background:var(--sbp-ink); color:#fff; display:grid; place-items:center; font-weight:900; margin-bottom:12px; }
.sbp-image-card { overflow:hidden; padding:0; }
.sbp-image-card img { width:100%; height:auto; display:block; }
.sbp-image-card .sbp-card-body { padding:24px; }
.sbp-product-strip { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.sbp-product-strip span { padding: 8px 10px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid var(--sbp-line); color:var(--sbp-muted); font-weight:700; font-size:13px; }
.sbp-anchor { position: relative; top:-80px; }
.sbp-footer { padding:48px 22px; background: var(--sbp-ink); color:#fff; }
.sbp-footer .sbp-container { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sbp-footer a { color:#fff; text-decoration:none; opacity:.9; }
.sbp-footer a:hover { opacity:1; }
.sbp-footer .sbp-muted { color: rgba(255,255,255,.72); }

@media (max-width: 980px) {
  .sbp-hero-grid, .sbp-grid-2, .sbp-grid-3, .sbp-grid-4, .sbp-feature-list { grid-template-columns: 1fr!important; }
  .sbp-nav { display:none; }
  .sbp-section { padding: 72px 18px; }
  .sbp-topbar { position: sticky; }
}
@media (max-width: 640px) {
  .sbp-main-title { font-size: 44px; }
  .sbp-title-accent { font-size:32px; }
  .sbp-card, .sbp-product-card, .sbp-catalog-card { padding: 22px; }
  .sbp-footer .sbp-container { display:block; }
}