/**
 * Scoreboard.ing — public website sections (block patterns + [scoreboard_pricing])
 *
 * @version 1.7.2
 * CHANGELOG
 * 1.7.2 (2026-10-30) - Hero scoreboard digits use DSEG7 Classic.
 * 1.7.1 (2026-10-30) - Turn off theme hyphenation inside our sections.
 * 1.7.0 (2026-10-29) - New. Every section is a self-contained dark panel, so
 *                      it looks right on any theme (Blog Over or otherwise).
 *                      Colors live in the variables below.
 */

@font-face {
    font-family: 'DSEG7 Classic';
    src: url('../fonts/DSEG7Classic-Bold.woff2') format('woff2');
    font-weight: 400 900;
    font-display: swap;
}

.sbi {
    --sbi-bg:      #111827;
    --sbi-surface: #1E293B;
    --sbi-border:  #334155;
    --sbi-green:   #178508;
    --sbi-green-hi:#1e9e0b;
    --sbi-led:     #3fd42a;
    --sbi-amber:   #FFB000;
    --sbi-blue:    #38bdf8;
    --sbi-text:    #e2e8f0;
    --sbi-muted:   #94a3b8;
    --sbi-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sbi-mono:    'DM Mono', ui-monospace, monospace;

    background: var(--sbi-bg);
    color: var(--sbi-text);
    font-family: var(--sbi-body);
    border: 1px solid var(--sbi-border);
    border-radius: 16px;
    padding: clamp(24px, 4vw, 48px);
    margin: 0 0 24px !important;
    box-sizing: border-box;
}
.sbi *, .sbi *::before, .sbi *::after { box-sizing: border-box; }
.sbi p { color: var(--sbi-text); font-size: 17px; line-height: 1.6; margin: 0 0 16px; }
.sbi h1, .sbi h2, .sbi h3 { font-family: var(--sbi-body) !important; color: #fff !important; letter-spacing: -0.02em; margin: 0 0 12px; }
.sbi h3 { font-size: 19px; font-weight: 700; }
.sbi a { color: var(--sbi-led); }

.sbi .sbi-kicker {
    font: 500 12px var(--sbi-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sbi-led); margin-bottom: 10px;
}
.sbi .sbi-h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.15; margin-bottom: 20px; }
.sbi-green { color: var(--sbi-led); }

/* ---------- Hero ---------- */
.sbi-hero {
    border-top: 4px solid var(--sbi-green);
    background: radial-gradient(circle at 85% 20%, rgba(23, 133, 8, .22), transparent 55%), var(--sbi-bg);
}
.sbi .sbi-title { font-size: clamp(34px, 5vw, 56px); font-weight: 800; line-height: 1.05; margin-bottom: 18px; }
.sbi .sbi-lead { font-size: 18px; color: #cbd5e1; max-width: 640px; }
.sbi .sbi-fine { font: 400 13px var(--sbi-mono); color: var(--sbi-muted); margin-top: 14px; }
.sbi-hero-cols { align-items: center !important; gap: 32px !important; }

/* Hero mini scoreboard (decorative) */
.sbi-board {
    background: #05080f; border: 5px solid var(--sbi-green); border-radius: 16px; padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 40px rgba(23, 133, 8, .18);
    font-family: var(--sbi-mono);
}
.sbi-board-head { font-size: 11px; letter-spacing: .14em; color: var(--sbi-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.sbi-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sbi-amber); animation: sbiPulse 1.6s infinite; }
@keyframes sbiPulse { 50% { opacity: .3; } }
.sbi-board-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr) 1.2fr; gap: 5px; align-items: center; }
.sbi-board-grid b { font-weight: 500; font-size: 11px; color: var(--sbi-muted); text-align: center; }
.sbi-board-grid span.t { font-size: 10px; letter-spacing: .08em; color: #cbd5e1; }
.sbi-board-grid i {
    font-family: 'DSEG7 Classic', 'DM Mono', monospace;
    font-style: normal; text-align: center; background: #000; border-radius: 6px; padding: 8px 0;
    font-size: 22px; color: var(--sbi-led); text-shadow: 0 0 10px rgba(23, 133, 8, .9);
}
.sbi-board-grid .r { color: var(--sbi-amber); }
.sbi-board-grid i.r { text-shadow: 0 0 10px rgba(255, 176, 0, .7); font-size: 26px; }
.sbi-board-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sbi-border); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sbi-muted); text-align: center; }

/* ---------- Buttons ---------- */
.sbi .sbi-buttons { gap: 10px; margin-top: 8px; }
.sbi .wp-block-button .wp-block-button__link {
    font: 600 15px/1 var(--sbi-body); padding: 15px 22px; border-radius: 9px; text-decoration: none;
    border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s;
}
.sbi .wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); }
.sbi .sbi-btn-green .wp-block-button__link { background: var(--sbi-green); color: #fff; }
.sbi .sbi-btn-green .wp-block-button__link:hover { background: var(--sbi-green-hi); color: #fff; }
.sbi .sbi-btn-ghost .wp-block-button__link { background: transparent; color: #fff; border-color: var(--sbi-border); }
.sbi .sbi-btn-ghost .wp-block-button__link:hover { border-color: var(--sbi-muted); color: #fff; }

/* ---------- Cards / grids ---------- */
.sbi .sbi-steps, .sbi .sbi-grid { gap: 16px !important; margin-bottom: 16px; }
.sbi .sbi-card {
    background: var(--sbi-surface); border: 1px solid var(--sbi-border); border-radius: 12px;
    padding: 22px; border-top: 3px solid var(--sbi-green);
}
.sbi .sbi-card p { font-size: 15px; color: #cbd5e1; margin: 0; }
.sbi .sbi-c-green { border-top-color: var(--sbi-green); }
.sbi .sbi-c-amber { border-top-color: var(--sbi-amber); }
.sbi .sbi-c-blue  { border-top-color: var(--sbi-blue); }
.sbi .sbi-step-num {
    width: 40px; height: 40px; border-radius: 50%; margin: 0 0 14px !important;
    display: flex; align-items: center; justify-content: center;
    background: var(--sbi-green); color: #fff !important; font: 800 18px var(--sbi-body) !important;
}

/* ---------- Valley ---------- */
.sbi-valley { border-left: 4px solid var(--sbi-green); }
.sbi .sbi-counties { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sbi .sbi-counties li {
    background: var(--sbi-surface); border: 1px solid var(--sbi-border); border-radius: 10px;
    padding: 14px 16px; font-weight: 700; color: #fff; position: relative; padding-left: 40px;
}
.sbi .sbi-counties li::before {
    content: ''; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
    border-radius: 50%; background: var(--sbi-led); box-shadow: 0 0 8px var(--sbi-led);
}

/* ---------- For businesses ---------- */
.sbi-amber { border-top: 4px solid var(--sbi-amber); }
.sbi-amber .sbi-kicker { color: var(--sbi-amber) !important; }
.sbi-amber .sbi-card { border-top-color: var(--sbi-amber); }

/* ---------- FAQ ---------- */
.sbi .sbi-faq {
    background: var(--sbi-surface); border: 1px solid var(--sbi-border); border-radius: 10px;
    padding: 0; margin: 0 0 10px; overflow: hidden;
}
.sbi .sbi-faq summary { cursor: pointer; padding: 16px 20px; font-weight: 700; color: #fff; list-style-position: inside; }
.sbi .sbi-faq[open] summary { border-bottom: 1px solid var(--sbi-border); }
.sbi .sbi-faq p { padding: 14px 20px 4px; font-size: 15px; color: #cbd5e1; }

/* ---------- CTA ---------- */
.sbi-cta {
    text-align: center; border-top: 4px solid var(--sbi-green);
    background: radial-gradient(circle at 50% 0%, rgba(23, 133, 8, .25), transparent 60%), var(--sbi-bg);
}
.sbi-cta p { color: #cbd5e1; }

/* Shortcode output sitting inside a section: drop the double frame */
.sbi .bsb-games-board, .sbi .bsb-sponsor-dir { border: 0; padding: 0; margin: 0; background: transparent; }

/* ---------- [scoreboard_pricing] ---------- */
.sbi-pricing { container-type: inline-size;
    --sbi-bg: #111827; --sbi-surface: #1E293B; --sbi-border: #334155; --sbi-green: #178508; --sbi-led: #3fd42a; --sbi-amber: #FFB000; --sbi-muted: #94a3b8;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 12px 0 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.sbi-price-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--sbi-surface); border: 1px solid var(--sbi-border); border-radius: 14px; padding: 24px; color: #e2e8f0;
}
.sbi-price-card.is-featured { border-color: var(--sbi-green); box-shadow: 0 0 0 1px var(--sbi-green), 0 14px 40px rgba(23, 133, 8, .18); }
.sbi-price-tag {
    position: absolute; top: -11px; left: 24px; padding: 4px 10px; border-radius: 999px;
    background: var(--sbi-amber); color: #111827; font: 600 11px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
}
.sbi-price-name { font: 500 12px 'DM Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #cbd5e1; }
.sbi-price-amount { font: 500 48px/1.1 'DM Mono', monospace; color: var(--sbi-led); text-shadow: 0 0 12px rgba(23, 133, 8, .6); margin: 10px 0 4px; }
.sbi-price-amount small { font: 400 15px 'Inter', sans-serif; color: var(--sbi-muted); text-shadow: none; }
.sbi-price-meta { font-size: 13px; color: var(--sbi-muted); }
.sbi-price-card ul { list-style: none; padding: 0; margin: 18px 0 22px; flex: 1; }
.sbi-price-card li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: 15px; color: #cbd5e1; }
.sbi-price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--sbi-led); font-weight: 800; }
a.sbi-price-btn {
    display: block; text-align: center; padding: 14px; border-radius: 9px; font-weight: 600; text-decoration: none;
    border: 1px solid var(--sbi-border); color: #fff;
}
a.sbi-price-btn:hover { border-color: var(--sbi-muted); color: #fff; }
.is-featured a.sbi-price-btn { background: var(--sbi-green); border-color: var(--sbi-green); }
.is-featured a.sbi-price-btn:hover { background: #1e9e0b; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .sbi-pricing { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
    .sbi-hero-cols .wp-block-column { flex-basis: 100% !important; }
}

/* ============================================
   Fit any theme width: sections respond to the space they're given
   (container queries), not just the screen size.
   ============================================ */
.sbi { container-type: inline-size; }
.sbi .sbi-title { font-size: clamp(32px, 7.5cqi, 56px); }
.sbi .sbi-h2 { font-size: clamp(24px, 5cqi, 38px); }
.sbi-price-amount { font-size: clamp(34px, 4.5cqi, 48px); white-space: nowrap; }
.sbi-pricing { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

@container (max-width: 760px) {
    .sbi .wp-block-columns { flex-wrap: wrap !important; }
    .sbi .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
    .sbi-board { max-width: 420px; }
}
@container (min-width: 761px) and (max-width: 980px) {
    .sbi .sbi-grid > .wp-block-column, .sbi .sbi-steps > .wp-block-column { flex-basis: calc(50% - 8px) !important; }
    .sbi .sbi-grid, .sbi .sbi-steps { flex-wrap: wrap !important; }
}

/* 1.7.1 — some themes (Blog Over) hyphenate long words ("spon-sor"); not in our sections */
.sbi, .sbi *, .sbi-pricing, .sbi-pricing *, .bsb-games-board *, .bsb-sponsor-dir * {
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
    word-break: normal;
    overflow-wrap: break-word;
}