/*
Theme Name: Kickup11
Template: kickup11
Version: 1.0.7
Description: Kickup11 — Soccer pickup game and sub-finder platform.
*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&family=Space+Grotesk:wght@600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — sourced from KickUp11 design (claude.ai/design)
   ═══════════════════════════════════════════════════════════ */
:root {
  --sf-bg:           #07111d;
  --sf-bg2:          #0b1a2b;
  --sf-surface:      #13283f;
  --sf-surface-2:    #0e2032;
  --sf-accent:       #1fa155;
  --sf-accent-lt:    #29c46a;
  --sf-accent-deep:  #1A6B3A;
  --sf-urgent:       #f23a47;
  --sf-urgent-bg:    rgba(242,58,71,0.16);
  --sf-amber:        #f5a524;
  --sf-amber-bg:     rgba(245,165,36,0.15);
  --sf-form:         #4a9eff;
  --sf-form-bg:      rgba(74,158,255,0.15);
  --sf-confirmed-bg: rgba(31,161,85,0.16);
  --sf-text:         #f2f6fb;
  --sf-muted:        #8198b3;
  --sf-muted-2:      #c5d4e6;
  --sf-border:       rgba(255,255,255,0.08);
  --sf-border-s:     rgba(255,255,255,0.16);
  --sf-disp:         'Barlow Semi Condensed', system-ui, sans-serif;
  --sf-body:         'Barlow', system-ui, sans-serif;
  --sf-mono:         'Space Grotesk', monospace;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body, #page, #content, #primary, #main,
.site, .site-content, .site-main, .ast-article-single, .entry-content {
  background: var(--sf-bg) !important;
  color: var(--sf-text);
  font-family: var(--sf-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sf-accent); color: #052311; }

/* ── Typography ── */
.sf-eyebrow { font-family: var(--sf-disp); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sf-accent-lt); }

/* ── Buttons ── */
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sf-disp); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; padding: 14px 22px; border-radius: 12px; cursor: pointer; border: none; transition: transform .08s ease, filter .18s ease, background .18s; white-space: nowrap; text-decoration: none; line-height: 1; }
.sf-btn:active { transform: scale(0.97); }
.sf-btn-sm { font-size: 13px; padding: 10px 16px; border-radius: 10px; }
.sf-btn-full { width: 100%; justify-content: center; }
.sf-btn-primary { background: var(--sf-accent); color: #042210; box-shadow: 0 10px 28px -10px rgba(31,161,85,0.65); }
.sf-btn-primary:hover { background: var(--sf-accent-lt); }
.sf-btn-ghost { background: rgba(255,255,255,0.05); color: var(--sf-text); box-shadow: inset 0 0 0 1.5px var(--sf-border-s); }
.sf-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.sf-btn-urgent { background: var(--sf-urgent); color: #fff; box-shadow: 0 10px 28px -10px rgba(242,58,71,0.65); }
.sf-btn-urgent:hover { filter: brightness(1.08); }
.sf-btn-amber { background: var(--sf-amber-bg); color: var(--sf-amber); border: 1px solid rgba(245,165,36,0.3); }
.sf-btn-in  { background: rgba(255,255,255,0.06); color: var(--sf-accent-lt); box-shadow: inset 0 0 0 1.5px var(--sf-accent); }
.sf-btn-in:hover { background: rgba(31,161,85,0.15); }
.sf-btn-out { background: rgba(255,255,255,0.06); color: var(--sf-text); box-shadow: inset 0 0 0 1.5px var(--sf-border-s); }
.sf-btn-out:hover { background: rgba(255,255,255,0.1); }
/* Current RSVP state — filled when actively selected */
.sf-btn-in.is-current  { background: var(--sf-accent); color: #042210; box-shadow: none; }
.sf-btn-out.is-current { background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1.5px var(--sf-muted); color: var(--sf-text); }

/* ── Badges ── */
.sf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-family: var(--sf-disp); font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.sf-badge-urgent    { background: var(--sf-urgent-bg);    color: var(--sf-urgent); }
.sf-badge-form      { background: var(--sf-form-bg);      color: var(--sf-form); }
.sf-badge-confirmed { background: var(--sf-confirmed-bg); color: var(--sf-accent-lt); }
.sf-badge-full      { background: rgba(141,163,188,0.14); color: var(--sf-muted); }
.sf-badge-cancelled { background: rgba(255,255,255,0.06); color: var(--sf-muted); }

/* Pulsing red dot */
.sf-pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--sf-urgent); flex: 0 0 auto; animation: sf-ping 1.3s ease-out infinite; }
@keyframes sf-ping { 0% { box-shadow: 0 0 0 0 rgba(242,58,71,0.55); } 70% { box-shadow: 0 0 0 6px rgba(242,58,71,0); } 100% { box-shadow: 0 0 0 0 rgba(242,58,71,0); } }

/* ── Avatars ── */
.sf-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--sf-disp); font-weight: 700; font-size: 11px; color: #052311; flex-shrink: 0; border: 2px solid var(--sf-bg2); }
.sf-avatar-row { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.sf-avatar-row .sf-avatar + .sf-avatar { margin-left: -5px; }

/* ═══════════════════════════════════════════════════════════
   SCHEDULE PAGE
   ═══════════════════════════════════════════════════════════ */
.sf-schedule-page { max-width: 680px; margin: 0 auto; padding: 24px 16px 100px; }

.sf-page-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--sf-border); }
.sf-page-header h1 { font-family: var(--sf-disp); font-weight: 800; font-size: clamp(32px, 5vw, 52px); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 6px; }
.sf-page-header .sf-sub { font-size: 14px; color: var(--sf-muted); font-weight: 500; line-height: 1.5; }

/* My Games strip */
.sf-my-games { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; scrollbar-width: none; }
.sf-my-games::-webkit-scrollbar { display: none; }
.sf-my-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-family: var(--sf-disp); font-weight: 700; font-size: 12px; white-space: nowrap; cursor: pointer; border: 1px solid var(--sf-border-s); background: var(--sf-surface); color: var(--sf-text); transition: background .15s; text-decoration: none; }
.sf-my-chip:hover { background: var(--sf-surface-2); }
.sf-my-chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sf-my-chip.hosting .chip-dot { background: var(--sf-amber); }
.sf-my-chip.playing .chip-dot { background: var(--sf-accent-lt); }

/* Week nav */
.sf-week-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sf-week-nav .label { font-family: var(--sf-disp); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-week-nav .nav-btn { background: none; border: 1px solid var(--sf-border-s); color: var(--sf-muted); border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; transition: color .15s; text-decoration: none; display: inline-block; }
.sf-week-nav .nav-btn:hover { color: var(--sf-text); }

/* Day label */
.sf-day-label { font-family: var(--sf-disp); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-muted); padding: 16px 4px 6px; }

/* ═══════════════════════════════════════════════════════════
   ACCORDION ROWS
   ═══════════════════════════════════════════════════════════ */
.sf-accordion { display: flex; flex-direction: column; gap: 8px; }

.sf-row { display: grid; grid-template-columns: 4px 48px 1fr auto; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 13px; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; position: relative; }
.sf-row:hover { border-color: var(--sf-border-s); }
.sf-row.open  { border-color: var(--sf-border-s); box-shadow: 0 14px 34px -18px rgba(0,0,0,0.7); }

.sf-row .sf-bar { }
.sf-row .sf-date { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0; border-right: 1px solid var(--sf-border); }
.sf-row .sf-date .d { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--sf-muted); text-transform: uppercase; }
.sf-row .sf-date .n { font-family: var(--sf-disp); font-weight: 700; font-size: 20px; line-height: 1; margin-top: 1px; }
.sf-row .sf-mid { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px; min-width: 0; }
.sf-row .sf-mid .sf-field-name { display: flex; align-items: center; gap: 6px; }
.sf-row .sf-mid .sf-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sf-row .sf-mid .name { font-family: var(--sf-disp); font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-row .sf-mid .meta { font-size: 11px; color: var(--sf-muted); font-weight: 500; }
.sf-row .sf-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; padding: 12px; }
.sf-row .sf-right .cnt { font-family: var(--sf-disp); font-weight: 700; font-size: 12px; color: var(--sf-muted); }

/* Expanded area */
.sf-row-x { grid-column: 1 / -1; padding: 0 14px 14px; display: none; }
.sf-row.open .sf-row-x { display: block; }

/* Empty day */
.sf-empty-row .sf-row-x { padding: 0 14px 14px; }
.sf-empty-row.open .sf-row-x { display: block; }

/* ═══════════════════════════════════════════════════════════
   GAME CARD
   ═══════════════════════════════════════════════════════════ */
.sf-card { background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-radius: 11px; overflow: hidden; }

.sf-card-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--sf-border); }
.sf-card-head .field { font-family: var(--sf-disp); font-weight: 700; font-size: 16px; }
.sf-card-head .details { font-size: 12px; color: var(--sf-muted); margin-top: 3px; }
.sf-card-head .host-line { font-size: 11px; color: var(--sf-muted); margin-top: 4px; }

.sf-card-meta { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--sf-border); }
.sf-meta-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.05); color: var(--sf-muted-2); border: 1px solid var(--sf-border); }
.sf-meta-pill.cost { color: var(--sf-amber); border-color: rgba(245,165,36,0.25); background: var(--sf-amber-bg); }

.sf-card-note { padding: 10px 16px; font-size: 13px; color: var(--sf-muted); font-style: italic; border-bottom: 1px solid var(--sf-border); }

.sf-card-players { padding: 12px 16px; border-bottom: 1px solid var(--sf-border); }
.sf-card-players .label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 8px; }
.sf-players-toggle { font-size: 12px; color: var(--sf-accent-lt); cursor: pointer; background: none; border: none; padding: 0; margin-top: 8px; font-weight: 600; display: block; }

.sf-card-actions { padding: 14px 16px; }
.sf-rsvp-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.sf-rsvp-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--sf-border-s); margin-bottom: 10px; }
.sf-rsvp-status .s-label { font-family: var(--sf-disp); font-weight: 700; font-size: 14px; }
.sf-rsvp-status.is-in .s-label  { color: var(--sf-accent-lt); }
.sf-rsvp-status.is-out .s-label { color: var(--sf-muted); }
.sf-rsvp-status .change { font-size: 12px; color: var(--sf-muted); cursor: pointer; background: none; border: none; padding: 0; }
.sf-rsvp-status .change:hover { color: var(--sf-text); }

/* ═══════════════════════════════════════════════════════════
   SUB NEEDED BANNER
   ═══════════════════════════════════════════════════════════ */
.sf-subbanner { padding: 12px 14px; border-radius: 11px; background: linear-gradient(180deg, rgba(242,58,71,0.18), rgba(242,58,71,0.07)); border: 1px solid rgba(242,58,71,0.4); margin-bottom: 12px; }
.sf-subbanner .l1 { display: flex; align-items: center; gap: 8px; }
.sf-subbanner .l1 span { font-family: var(--sf-disp); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--sf-urgent); }
.sf-subbanner .l2 { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; gap: 8px; }
.sf-subbanner .l2 .k { font-size: 11px; color: #f6c9cd; font-weight: 600; }
.sf-subbanner .l2 .cd { font-family: var(--sf-mono); font-weight: 700; font-size: 22px; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   CANCELLED BANNER
   ═══════════════════════════════════════════════════════════ */
.sf-cancelled-banner { padding: 12px 14px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid var(--sf-border-s); color: var(--sf-muted); font-size: 13px; text-align: center; margin-bottom: 12px; }

/* ═══════════════════════════════════════════════════════════
   MANAGE BAR
   ═══════════════════════════════════════════════════════════ */
.sf-manage-bar { border-top: 1px solid var(--sf-border); padding: 10px 16px 0; }
.sf-manage-toggle { font-size: 12px; color: var(--sf-muted); cursor: pointer; background: none; border: none; padding: 0; font-weight: 600; }
.sf-manage-toggle:hover { color: var(--sf-text); }
.sf-manage-panel { padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.sf-manage-panel.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════
   CREATE / EDIT FORM
   ═══════════════════════════════════════════════════════════ */
.sf-create-form { display: none; padding: 16px; background: var(--sf-surface-2); border: 1px solid var(--sf-border-s); border-radius: 11px; margin-top: 10px; }
.sf-create-form.visible { display: block; }
.sf-day-toggle-icon { font-size: 20px; font-weight: 300; color: var(--sf-muted); line-height: 1; transition: color .15s; user-select: none; }
.sf-row:hover .sf-day-toggle-icon { color: var(--sf-text); }
.sf-row.open .sf-day-toggle-icon { color: var(--sf-accent-lt); font-size: 24px; }

.sf-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-form-field { flex: 1; min-width: 140px; margin-bottom: 12px; }
.sf-form-field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 6px; }
.sf-form-field input,
.sf-form-field select,
.sf-form-field textarea { width: 100%; padding: 10px 13px; font-size: 15px; background: var(--sf-surface); border: 1px solid var(--sf-border-s); color: var(--sf-text); -webkit-text-fill-color: var(--sf-text); border-radius: 9px; outline: none; font-family: var(--sf-body); transition: border-color .2s; box-sizing: border-box; color-scheme: dark; }
.sf-form-field input:focus,
.sf-form-field select:focus,
.sf-form-field textarea:focus { border-color: var(--sf-accent); }
.sf-form-field input:-webkit-autofill,
.sf-form-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--sf-surface) inset !important; -webkit-text-fill-color: var(--sf-text) !important; }
.sf-form-field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238198b3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
#sf-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--sf-surface); border: 1px solid var(--sf-border-s); color: var(--sf-text); padding: 12px 20px; border-radius: 999px; font-family: var(--sf-disp); font-weight: 700; font-size: 14px; z-index: 1000; transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s; opacity: 0; pointer-events: none; white-space: nowrap; }
#sf-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#sf-toast.toast-in      { border-color: rgba(31,161,85,0.4);  color: var(--sf-accent-lt); }
#sf-toast.toast-out     { border-color: rgba(129,152,179,0.4); color: var(--sf-muted); }
#sf-toast.toast-full    { border-color: rgba(245,165,36,0.4); color: var(--sf-amber); }
#sf-toast.toast-claimed { border-color: rgba(31,161,85,0.4);  color: var(--sf-accent-lt); }
#sf-toast.toast-locked  { border-color: rgba(242,58,71,0.4);  color: var(--sf-urgent); }

/* ═══════════════════════════════════════════════════════════
   FUTURE GAMES
   ═══════════════════════════════════════════════════════════ */
.sf-future-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sf-border); }
.sf-future-section h3 { font-family: var(--sf-disp); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-muted); margin-bottom: 12px; }
.sf-future-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 11px; margin-bottom: 8px; text-decoration: none; transition: border-color .15s; }
.sf-future-card:hover { border-color: var(--sf-border-s); }
.sf-future-card .date-block { text-align: center; min-width: 36px; }
.sf-future-card .date-block .d { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--sf-muted); text-transform: uppercase; }
.sf-future-card .date-block .n { font-family: var(--sf-disp); font-weight: 700; font-size: 18px; line-height: 1; }
.sf-future-card .info { flex: 1; min-width: 0; }
.sf-future-card .info .field { font-family: var(--sf-disp); font-weight: 700; font-size: 14px; }
.sf-future-card .info .meta  { font-size: 11px; color: var(--sf-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   FAB
   ═══════════════════════════════════════════════════════════ */
.sf-fab { position: fixed; bottom: 24px; right: 20px; z-index: 100; display: flex; align-items: center; gap: 8px; padding: 13px 20px; background: var(--sf-accent); color: #042210; border: none; border-radius: 999px; font-family: var(--sf-disp); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(31,161,85,0.7); transition: transform .1s, filter .18s; text-decoration: none; }
.sf-fab:hover { filter: brightness(1.08); }
.sf-fab:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.sf-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); z-index: 200; display: none; align-items: flex-end; justify-content: center; }
.sf-modal-backdrop.open { display: flex; }
@media (min-width: 520px) { .sf-modal-backdrop { align-items: center; } }
.sf-modal { background: var(--sf-surface); border: 1px solid var(--sf-border-s); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; padding: 24px 20px 36px; position: relative; }
@media (min-width: 520px) { .sf-modal { border-radius: 20px; } }
.sf-modal-title { font-family: var(--sf-disp); font-weight: 700; font-size: 20px; text-transform: uppercase; margin-bottom: 20px; }
.sf-modal-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.06); border: none; color: var(--sf-muted); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.sf-modal-close:hover { color: var(--sf-text); }

/* ═══════════════════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════════════════ */
.sf-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.2); border-top-color: currentColor; border-radius: 50%; animation: sf-spin .6s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .sf-schedule-page { padding: 16px 12px 100px; }
  .sf-rsvp-buttons { grid-template-columns: 1fr; }
  .sf-row .sf-date .n { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   KICKUP11 NAV
   ═══════════════════════════════════════════════════════════ */
.sf-nav {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(7,17,29,0.82);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.sf-nav.scrolled {
  border-bottom-color: var(--sf-border);
  background: rgba(7,17,29,0.95);
}
.sf-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Brand */
.sf-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}
.sf-brand-ball {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sf-accent);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.2), 0 0 0 3px rgba(31,161,85,0.22);
  flex-shrink: 0;
}
.sf-brand-word {
  font-family: var(--sf-disp);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--sf-text);
  line-height: 1;
}
.sf-brand-word b { color: var(--sf-accent-lt); }

/* Nav links */
.sf-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sf-nav-links a {
  font-family: var(--sf-disp);
  font-weight: 600;
  font-size: 14px;
  color: var(--sf-muted);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.sf-nav-links a:hover,
.sf-nav-links a.active { color: var(--sf-text); }

/* Nav right — auth area */
.sf-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.sf-nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sf-disp);
  font-weight: 700;
  font-size: 12px;
  color: #042210;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid rgba(31,161,85,0.4);
  transition: border-color .15s;
}
.sf-nav-avatar:hover { border-color: var(--sf-accent-lt); }

/* Mobile hamburger */
.sf-nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.sf-nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--sf-muted);
  border-radius: 2px;
  transition: background .15s;
}
.sf-nav-hamburger:hover span { background: var(--sf-text); }

/* Mobile drawer */
.sf-nav-drawer {
  display: none;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--sf-border);
  padding: 12px 20px 20px;
  background: rgba(7,17,29,0.97);
}
.sf-nav-drawer.open { display: flex; }
.sf-nav-drawer a {
  font-family: var(--sf-disp);
  font-weight: 600;
  font-size: 16px;
  color: var(--sf-muted);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--sf-border);
  transition: color .15s;
}
.sf-nav-drawer a:last-child { border-bottom: none; }
.sf-nav-drawer a:hover { color: var(--sf-text); }

@media (max-width: 600px) {
  .sf-nav-links    { display: none; }
  .sf-nav-hamburger { display: flex; }
}

/* ── Kickup11 page footer ── */
.sf-site-footer {
  margin-top: 60px;
  padding: 28px 20px;
  border-top: 1px solid var(--sf-border);
  text-align: center;
}
.sf-site-footer p {
  font-size: 12px;
  color: var(--sf-muted);
  margin: 0;
  font-family: var(--sf-disp);
  letter-spacing: 0.04em;
}
.sf-site-footer a {
  color: var(--sf-muted);
  text-decoration: none;
  transition: color .15s;
}
.sf-site-footer a:hover { color: var(--sf-accent-lt); }

/* ── Logo image in nav ── */
.sf-brand-logo {
  display: block;
  height: 48px;
  width: auto;
  margin-top: 1px;
}
@media (max-width: 480px) {
  .sf-brand-logo { height: 36px; }
}

/* ═══════════════════════════════════════════════════════════
   NAV AVATAR DROPDOWN
   ═══════════════════════════════════════════════════════════ */

.sf-nav-dropdown { position: relative; }
.sf-nav-avatar-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sf-disp); font-weight: 700; font-size: 13px; color: #fff;
  border: none; cursor: pointer; flex-shrink: 0;
  transition: opacity .15s, box-shadow .15s;
}
.sf-nav-avatar-btn:hover { opacity: .85; }
.sf-nav-avatar-btn.open { box-shadow: 0 0 0 2px var(--sf-accent-lt); }

.sf-nav-dropdown-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--sf-surface); border: 1px solid var(--sf-border);
  border-radius: 12px; min-width: 170px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  overflow: hidden; opacity: 0; transform: translateY(-6px);
  pointer-events: none; transition: opacity .15s, transform .15s;
  z-index: 200;
}
.sf-nav-dropdown-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sf-nav-dropdown-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; font-size: 14px; font-weight: 500;
  color: var(--sf-text); text-decoration: none;
  transition: background .12s;
}
.sf-nav-dropdown-menu a:hover { background: rgba(255,255,255,0.06); }
.sf-nav-dropdown-menu a.danger { color: var(--sf-urgent); }
.sf-nav-dropdown-menu .sf-dd-divider { height: 1px; background: var(--sf-border); margin: 4px 0; }

/* ═══════════════════════════════════════════════════════════
   STATIC PAGES — About, FAQ, Terms, Privacy, Contact
   ═══════════════════════════════════════════════════════════ */

.sf-static-wrap { background: var(--sf-bg); min-height: 100vh; color: var(--sf-text); }

/* Hero */
.sf-static-hero { max-width: 700px; margin: 0 auto; padding: 72px 24px 48px; text-align: center; }
.sf-static-hero h1 { font-family: var(--sf-disp); font-size: clamp(28px, 5vw, 46px); font-weight: 800; line-height: 1.15; color: var(--sf-text); margin: 0 0 24px; }
.sf-static-hero p { font-size: 18px; color: var(--sf-muted); line-height: 1.7; margin: 0 0 14px; }

/* Shared card */
.sf-static-section { max-width: 760px; margin: 0 auto; padding: 0 24px 40px; }
.sf-static-card { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 16px; padding: 36px; }
.sf-static-card h2 { font-family: var(--sf-disp); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-accent-lt); margin: 0 0 18px; }
.sf-static-card p { font-size: 16px; color: var(--sf-muted); line-height: 1.7; margin: 0 0 16px; }
.sf-static-card p:last-child { margin-bottom: 0; }

/* About feature grid */
.sf-about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.sf-about-item { background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: 12px; padding: 20px; }
.sf-about-icon { font-size: 28px; margin-bottom: 10px; }
.sf-about-item h3 { font-family: var(--sf-disp); font-size: 15px; font-weight: 700; color: var(--sf-text); margin: 0 0 8px; }
.sf-about-item p { font-size: 14px; color: var(--sf-muted); line-height: 1.6; margin: 0; }

/* FAQ */
.sf-faq-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px 64px; }
.sf-faq-section { margin-bottom: 36px; }
.sf-faq-section h2 { font-family: var(--sf-disp); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-accent-lt); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sf-border); }
.sf-faq-item { background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.sf-faq-item summary { font-size: 15px; font-weight: 600; color: var(--sf-text); padding: 16px 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sf-faq-item summary::-webkit-details-marker { display: none; }
.sf-faq-item summary::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--sf-muted); flex-shrink: 0; margin-left: 12px; transition: transform .2s; }
.sf-faq-item[open] summary::after { transform: rotate(45deg); }
.sf-faq-item[open] summary { color: var(--sf-accent-lt); }
.sf-faq-answer { padding: 14px 20px 18px; font-size: 15px; color: var(--sf-muted); line-height: 1.7; border-top: 1px solid var(--sf-border); }

/* Terms / Privacy */
.sf-terms-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px 64px; }
.sf-terms-body h2 { font-family: var(--sf-disp); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-accent-lt); margin: 28px 0 10px; }
.sf-terms-body h2:first-child { margin-top: 0; }
.sf-terms-body p { font-size: 15px; color: var(--sf-muted); line-height: 1.75; margin: 0 0 14px; }
.sf-terms-body ul { margin: 0 0 14px 20px; padding: 0; }
.sf-terms-body ul li { font-size: 15px; color: var(--sf-muted); line-height: 1.75; margin-bottom: 6px; }
.sf-terms-body a { color: var(--sf-accent-lt); text-decoration: none; }
.sf-terms-body a:hover { text-decoration: underline; }
.sf-terms-body strong { color: var(--sf-text); }

/* Contact */
.sf-contact-wrap { max-width: 580px; margin: 0 auto; padding: 0 24px 64px; }
.sf-contact-alt { text-align: center; margin-top: 20px; font-size: 14px; color: var(--sf-muted); }
.sf-contact-alt a { color: var(--sf-accent-lt); text-decoration: none; }
.sf-contact-alt a:hover { text-decoration: underline; }
.sf-form-field textarea { width: 100%; background: var(--sf-bg); border: 1.5px solid var(--sf-border-s); border-radius: 10px; color: var(--sf-text); font-family: var(--sf-body); font-size: 15px; padding: 12px 14px; resize: vertical; box-sizing: border-box; transition: border-color .15s; }
.sf-form-field textarea:focus { outline: none; border-color: var(--sf-accent); }

@media (max-width: 600px) {
  .sf-about-grid { grid-template-columns: 1fr; }
  .sf-static-card { padding: 24px; }
  .sf-static-hero { padding: 48px 20px 32px; }
}