/* ═══════════════════════════════════════════════════════════════════════
   SUDOFLARE.COM — Global Dark Theme CSS
   Paste this into: WordPress Admin → Kadence → Customize → Additional CSS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────────────── */
:root {
  --sf-green:   #00FF41;
  --sf-green-d: #00CC33;
  --sf-black:   #0D0D0D;
  --sf-dark:    #111111;
  --sf-card:    #141414;
  --sf-surface: #1A1A1A;
  --sf-border:  #222222;
  --sf-white:   #FFFFFF;
  --sf-gray:    #AAAAAA;
  --sf-muted:   #555555;
  --sf-orange:  #F97316;
  --sf-red:     #EF4444;
  --sf-blue:    #0EA5E9;
  --sf-font:    'Space Grotesk', 'Inter', system-ui, sans-serif;
  --sf-mono:    'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--sf-black) !important;
  color: var(--sf-white) !important;
  font-family: var(--sf-font) !important;
}

/* ── Global Links ───────────────────────────────────────────────────────── */
a { color: var(--sf-green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--sf-green-d); }

/* ── Selection ──────────────────────────────────────────────────────────── */
::selection { background: rgba(0,255,65,.25); color: var(--sf-white); }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--sf-black); }
::-webkit-scrollbar-thumb { background: #2A2A2A; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sf-green); }

/* ════════════════════════════════════════════
   KADENCE HEADER
   ════════════════════════════════════════════ */
.site-header,
.kadence-sticky-header .site-header,
#masthead {
  background-color: rgba(13,13,13,.95) !important;
  border-bottom: 1px solid #1A1A1A !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Logo */
.site-branding .site-title,
.site-branding .site-title a {
  color: var(--sf-white) !important;
  font-family: var(--sf-font) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: -.02em;
}
.site-branding .site-title a span { color: var(--sf-green) !important; }

/* Nav links */
.header-navigation .menu-item a,
.primary-menu li a,
#site-navigation a,
.kadence-navigation a {
  color: var(--sf-gray) !important;
  font-family: var(--sf-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  transition: color .2s !important;
}
.header-navigation .menu-item a:hover,
.primary-menu li a:hover,
.kadence-navigation a:hover,
.primary-menu li.current-menu-item > a {
  color: var(--sf-green) !important;
}

/* Dropdown menus */
.primary-menu .sub-menu,
.kadence-navigation .sub-menu {
  background: #0F0F0F !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.8) !important;
}
.primary-menu .sub-menu li a {
  color: var(--sf-gray) !important;
  padding: 10px 16px !important;
}
.primary-menu .sub-menu li a:hover { color: var(--sf-green) !important; background: rgba(0,255,65,.05) !important; }

/* Mobile menu button */
.menu-toggle, .kadence-mobile-toggle { color: var(--sf-white) !important; }
.mobile-navigation { background: #0A0A0A !important; border-right: 1px solid var(--sf-border) !important; }

/* ════════════════════════════════════════════
   SINGLE POST / PAGE
   ════════════════════════════════════════════ */
.site-main,
.entry-content,
main#primary,
.wp-site-blocks,
.content-area {
  background: var(--sf-black) !important;
  color: var(--sf-white) !important;
}

/* Post title */
.entry-title,
.single .entry-title,
h1.entry-title {
  color: var(--sf-white) !important;
  font-family: var(--sf-font) !important;
  font-size: clamp(26px, 4vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}

/* Entry content typography */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--sf-white) !important;
  font-family: var(--sf-font) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-top: 2em !important;
}
.entry-content h2 { font-size: 28px !important; color: var(--sf-green) !important; padding-bottom: 8px; border-bottom: 1px solid #1A1A1A; }
.entry-content h3 { font-size: 22px !important; }

.entry-content p,
.entry-content li,
.entry-content td {
  color: #CCCCCC !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.entry-content a { color: var(--sf-green) !important; text-decoration: underline; text-decoration-color: rgba(0,255,65,.3); }
.entry-content a:hover { text-decoration-color: var(--sf-green); }

/* Code blocks */
.entry-content code,
.entry-content kbd {
  background: #1A1A1A !important;
  color: var(--sf-green) !important;
  font-family: var(--sf-mono) !important;
  font-size: 13px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid #2A2A2A !important;
}

.entry-content pre {
  background: #0A0A0A !important;
  border: 1px solid #2A2A2A !important;
  border-left: 3px solid var(--sf-green) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  overflow-x: auto !important;
  font-family: var(--sf-mono) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: #CCCCCC !important;
}
.entry-content pre code {
  background: transparent !important;
  border: none !important;
  color: #CCCCCC !important;
  padding: 0 !important;
  font-size: inherit !important;
}

/* Blockquote */
.entry-content blockquote {
  background: #111 !important;
  border-left: 3px solid var(--sf-green) !important;
  margin: 24px 0 !important;
  padding: 16px 24px !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--sf-gray) !important;
  font-style: italic !important;
}

/* Tables in posts */
.entry-content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.entry-content table th {
  background: #1A1A1A !important;
  color: var(--sf-white) !important;
  padding: 12px 16px !important;
  text-align: left !important;
  border: 1px solid #2A2A2A !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
.entry-content table td {
  background: #111 !important;
  color: var(--sf-gray) !important;
  padding: 10px 16px !important;
  border: 1px solid #1A1A1A !important;
  font-size: 14px !important;
}
.entry-content table tr:nth-child(even) td { background: #0F0F0F !important; }

/* ════════════════════════════════════════════
   POST META & BYLINE
   ════════════════════════════════════════════ */
.entry-meta,
.posted-on,
.byline,
.post-author,
.entry-footer,
.cat-links,
.tags-links,
.comments-link {
  color: var(--sf-muted) !important;
  font-size: 13px !important;
}
.entry-meta a, .entry-footer a { color: var(--sf-green) !important; }

/* Category / tag badges */
.cat-links a,
.tags-links a {
  background: rgba(0,255,65,.1) !important;
  color: var(--sf-green) !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0,255,65,.2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* ════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════ */
.sidebar,
#secondary,
.widget-area {
  background: transparent !important;
}

.widget {
  background: var(--sf-card) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.widget-title,
.widgettitle,
.widget .wp-block-heading {
  color: var(--sf-white) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  border-bottom: 1px solid #222 !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

.widget ul li { border-bottom: 1px solid #1A1A1A !important; padding: 8px 0 !important; }
.widget ul li a { color: var(--sf-gray) !important; font-size: 14px !important; transition: color .2s !important; }
.widget ul li a:hover { color: var(--sf-green) !important; }
.widget ul li:last-child { border-bottom: none !important; }

/* Recent posts widget */
.widget_recent_entries .post-date { color: var(--sf-muted) !important; font-size: 12px !important; }

/* Search widget */
.search-form .search-field {
  background: var(--sf-surface) !important;
  border: 1px solid var(--sf-border) !important;
  color: var(--sf-white) !important;
  border-radius: 6px 0 0 6px !important;
  padding: 10px 14px !important;
  font-family: var(--sf-font) !important;
  font-size: 14px !important;
}
.search-form .search-field:focus { border-color: rgba(0,255,65,.4) !important; outline: none !important; }
.search-form .search-field::placeholder { color: var(--sf-muted) !important; }
.search-form .search-submit {
  background: var(--sf-green) !important;
  color: var(--sf-black) !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 0 6px 6px 0 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.search-form .search-submit:hover { background: var(--sf-green-d) !important; }

/* ════════════════════════════════════════════
   ARCHIVE / BLOG LISTING
   ════════════════════════════════════════════ */
.archive .site-main article,
.blog .site-main article,
.search-results article {
  background: var(--sf-card) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  transition: transform .3s, border-color .3s !important;
}
.archive .site-main article:hover,
.blog .site-main article:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0,255,65,.3) !important;
}

/* ════════════════════════════════════════════
   COMMENTS
   ════════════════════════════════════════════ */
#comments { background: transparent !important; }
.comment-list .comment-body {
  background: var(--sf-card) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
.comment-author .fn { color: var(--sf-white) !important; font-weight: 700 !important; }
.comment-meta, .comment-metadata { color: var(--sf-muted) !important; font-size: 12px !important; }
.comment-content p { color: var(--sf-gray) !important; }

/* Comment form */
.comment-form input,
.comment-form textarea {
  background: var(--sf-surface) !important;
  border: 1px solid var(--sf-border) !important;
  color: var(--sf-white) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-family: var(--sf-font) !important;
  width: 100% !important;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: rgba(0,255,65,.4) !important; outline: none !important; }
.comment-form .submit {
  background: var(--sf-green) !important;
  color: var(--sf-black) !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: var(--sf-font) !important;
  font-size: 15px !important;
  transition: background .2s !important;
}
.comment-form .submit:hover { background: var(--sf-green-d) !important; }

/* ════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════ */
.pagination .page-numbers,
.nav-links a,
.nav-links span {
  background: var(--sf-card) !important;
  color: var(--sf-gray) !important;
  border: 1px solid var(--sf-border) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  transition: all .2s !important;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.nav-links a:hover {
  background: var(--sf-green) !important;
  color: var(--sf-black) !important;
  border-color: var(--sf-green) !important;
}

/* ════════════════════════════════════════════
   FOOTER (Kadence default footer)
   ════════════════════════════════════════════ */
.site-footer,
#colophon,
.footer-wrap {
  background: #080808 !important;
  border-top: 1px solid #1A1A1A !important;
  color: var(--sf-muted) !important;
}
.site-footer a { color: var(--sf-gray) !important; }
.site-footer a:hover { color: var(--sf-green) !important; }
.site-footer .widget-title { color: var(--sf-white) !important; }

/* ════════════════════════════════════════════
   BIG FOOTER BRAND REVEAL
   ════════════════════════════════════════════ */
.sf-bigfoot {
  background: #080808;
  overflow: hidden;
  padding-bottom: 0;
  line-height: 0.85;
  user-select: none;
  pointer-events: none;
}

/* each row clips so text slides up from underneath */
.sf-bigfoot-inner {
  overflow: hidden;
}

.sf-bigfoot-text {
  display: block;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: clamp(60px, 16.5vw, 260px);
  font-weight: 900;
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-align: center;
  line-height: 0.9;
  padding: 0 2vw;

  /* start hidden below the clip boundary */
  transform: translateY(110%);
  transition: transform 0s;   /* instant until triggered */
}

/* Row 1 — bright green/cyan gradient (main) */
.sf-bigfoot-inner:first-child .sf-bigfoot-text {
  background: linear-gradient(90deg, #00E5FF 0%, #00FF41 55%, #00E5FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Row 2 — dimmed mid-reflection */
.sf-bigfoot-r1 .sf-bigfoot-text {
  background: linear-gradient(90deg, rgba(0,229,255,.28) 0%, rgba(0,255,65,.28) 55%, rgba(0,229,255,.28) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: translateY(110%) scaleY(-1);
  transition-delay: 0.06s;
}

/* Row 3 — faint ghost reflection */
.sf-bigfoot-r2 .sf-bigfoot-text {
  background: linear-gradient(90deg, rgba(0,229,255,.10) 0%, rgba(0,255,65,.10) 55%, rgba(0,229,255,.10) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: translateY(110%) scaleY(-1);
  transition-delay: 0.10s;
}

/* When JS adds .sf-bf-visible — animate all rows up */
.sf-bigfoot.sf-bf-visible .sf-bigfoot-text {
  transform: translateY(0);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.sf-bigfoot.sf-bf-visible .sf-bigfoot-r1 .sf-bigfoot-text {
  transform: translateY(0) scaleY(-1);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.06s;
}
.sf-bigfoot.sf-bf-visible .sf-bigfoot-r2 .sf-bigfoot-text {
  transform: translateY(0) scaleY(-1);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.12s;
}

/* ── Hero grid: top-align left col — no gap below CTA buttons ── */
.sf-hero-inner {
  align-items: start !important;
}
.sf-hero-tagline {
  min-height: 32px !important;
}

/* ── Fix: overflow-x:hidden on body breaks position:fixed in Chrome desktop ── */
/* overflow-x:clip blocks horizontal scroll without creating a scroll container */
body.home,
body.page-template-sudoflare-home-template {
  overflow-x: clip !important;
}

/* ── Hide Kadence default footer on homepage (custom footer used instead) ── */
body.home .site-footer,
body.page-template-sudoflare-home-template .site-footer {
  display: none !important;
}