/* ============================================================
   The Star Forge — Kyber-adapted dark theme
   Cyberpunk glassmorphism, dark-first. Accents sampled from the
   Star Forge logo: cyan + magenta/purple ring, yellow title.
   Loaded on top of Astra. Scoped to avoid breaking admin.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --sf-bg:        #0b0a14;            /* near-black, faint violet */
  --sf-bg-2:      #12101f;
  --sf-surface:   rgba(255,255,255,0.05);
  --sf-border:    rgba(255,255,255,0.10);
  --sf-cyan:      #2fe6e0;            /* logo ring cyan, slightly deepened for contrast */
  --sf-magenta:   #c10fff;           /* logo ring magenta */
  --sf-purple:    #6c57ff;           /* existing brand purple, kept as tertiary */
  --sf-gold:      #ffd23f;           /* Star Forge title yellow */
  --sf-text:      #f5f4fa;
  --sf-text-muted:rgba(245,244,250,0.62);
  --sf-radius:    1rem;
  --sf-radius-lg: 1.5rem;
}

/* ---------- Base / typography ---------- */
body {
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Atmospheric background glow.
   --sf-scroll (0→1, set by the footer scroll listener) shifts the orb positions,
   so the glow drifts as you scroll. Falls back to 0 with no JS. */
:root { --sf-scroll: 0; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at calc(85% - (var(--sf-scroll) * 22%)) calc(-10% + (var(--sf-scroll) * 24%)), rgba(193,15,255,0.16), transparent 60%),
    radial-gradient(50rem 36rem at calc(-10% + (var(--sf-scroll) * 26%)) calc(110% - (var(--sf-scroll) * 26%)), rgba(47,230,224,0.12), transparent 60%),
    var(--sf-bg);
  transition: background-position .2s linear;
}
h1,h2,h3,h4,h5,h6,.ast-single-post .entry-title,.site-title {
  font-family: 'Outfit', sans-serif; color: var(--sf-text); letter-spacing: -0.01em;
}
p, li, .entry-content { color: var(--sf-text); }
.entry-content p, .ast-article-single p { color: rgba(245,244,250,0.82); line-height: 1.75; }
a { color: var(--sf-cyan); transition: color .2s ease; }
a:hover { color: var(--sf-gold); }
.sf-mono, .ast-comment-meta, time { font-family: 'JetBrains Mono', monospace; }

/* Gradient brand headline helper */
.sf-gradient-text {
  background: linear-gradient(135deg, var(--sf-cyan), var(--sf-magenta));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Header / nav ---------- */
.site-header, .ast-primary-header-bar, header.site-header {
  background: rgba(11,10,20,0.72) !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--sf-border);
}
.main-header-menu, .ast-builder-menu-1 .main-header-menu { background: transparent !important; }
.main-navigation a, .ast-header-break-point .main-navigation a {
  color: var(--sf-text) !important; font-family: 'Outfit',sans-serif; font-weight: 500;
  transition: color .2s ease, background .2s ease; border-radius: .6rem;
}
.main-navigation a:hover, .menu-item.current-menu-item > a {
  color: var(--sf-cyan) !important;
}
.menu-item.current-menu-item > a { text-shadow: 0 0 14px rgba(47,230,224,0.5); }
/* Submenus */
.main-header-menu .sub-menu {
  background: rgba(18,16,31,0.96) !important;
  border: 1px solid var(--sf-border); border-radius: var(--sf-radius);
  backdrop-filter: blur(18px);
}

/* Header CTA button (Contact Us) */
.ast-builder-layout-element .menu-item a.button,
.site-header .ast-button, .ast-header-button-1 .menu-link,
.main-header-bar .button {
  background: linear-gradient(135deg, var(--sf-cyan), var(--sf-magenta)) !important;
  color: #0b0a14 !important; font-weight: 700; border: none !important;
  border-radius: 999px !important; padding: .6em 1.4em !important;
  box-shadow: 0 0 20px rgba(47,230,224,0.35); transition: all .2s ease;
}

/* ---------- Buttons (global) ---------- */
.wp-block-button__link, .ast-button, button.menu-toggle,
input[type=submit], .submit, .sf-btn {
  background: linear-gradient(135deg, var(--sf-cyan), var(--sf-magenta)) !important;
  color: #0b0a14 !important; border: none !important; font-weight: 700;
  border-radius: 999px !important; box-shadow: 0 0 18px rgba(47,230,224,0.3);
  transition: transform .15s ease, box-shadow .2s ease;
}
.wp-block-button__link:hover, .ast-button:hover, input[type=submit]:hover, .sf-btn:hover {
  transform: translateY(-1px); box-shadow: 0 0 30px rgba(193,15,255,0.5);
  color:#0b0a14 !important;
}
.sf-btn-ghost {
  background: transparent !important; color: var(--sf-text) !important;
  border: 1px solid var(--sf-border) !important; box-shadow: none;
}
.sf-btn-ghost:hover { border-color: var(--sf-cyan) !important; color: var(--sf-cyan) !important; }

/* ---------- Glass cards ---------- */
.sf-card, .ast-article-post, .ast-grid-common-col article {
  background: rgba(18,16,31,0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg);
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sf-card:hover, .ast-article-post:hover {
  transform: translateY(-4px);
  border-color: rgba(47,230,224,0.45);
  box-shadow: 0 10px 40px rgba(193,15,255,0.18), 0 0 0 1px rgba(47,230,224,0.25);
}

/* ---------- Forms / inputs ---------- */
input[type=text],input[type=email],input[type=search],input[type=url],
input[type=tel],textarea,select,.srfm-input-content input {
  background: rgba(8,7,16,0.6) !important; color: var(--sf-text) !important;
  border: 1px solid var(--sf-border) !important; border-radius: .75rem !important;
}
input:focus,textarea:focus,select:focus {
  border-color: rgba(47,230,224,0.5) !important;
  box-shadow: 0 0 0 3px rgba(47,230,224,0.18) !important; outline: none !important;
}
::placeholder { color: rgba(245,244,250,0.4) !important; }

/* ---------- Footer ----------
   Astra's footer-builder sets the inner wrap bg to --ast-global-color-4 (near
   white) and copyright text to --ast-global-color-3 (gray) → white-on-white.
   Override the exact builder selectors with the dark theme. */
.site-footer, .ast-small-footer, footer.site-footer {
  background: var(--sf-bg-2) !important; color: var(--sf-text-muted) !important;
  border-top: 1px solid var(--sf-border);
}
.site-below-footer-wrap,
.site-below-footer-wrap[data-section="section-below-footer-builder"],
.ast-above-footer-wrap,
.site-primary-footer-wrap {
  background-color: var(--sf-bg-2) !important;
  background-image: none !important;
  border-top-color: var(--sf-border) !important;
  min-height: 0 !important;          /* trim the oversized footer height */
}
.ast-footer-copyright,
.ast-footer-copyright.site-footer-focus-item,
.ast-footer-copyright p,
.site-footer .ast-footer-copyright p {
  color: var(--sf-text-muted) !important;
}
.site-footer a, .site-below-footer-wrap a { color: var(--sf-text-muted); }
.site-footer a:hover, .site-below-footer-wrap a:hover { color: var(--sf-cyan); }

/* ---------- Animations ---------- */
@keyframes sfFadeUp { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
/* Cards are ALWAYS visible — no opacity hiding. The entrance animation is purely
   additive: .sf-in just replays a fade-up. Visibility can never depend on JS. */
.sf-reveal { opacity:1; }
.sf-reveal.sf-in { animation: sfFadeUp .55s ease-out; }
@keyframes sfFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.sf-float { animation: sfFloat 4s ease-in-out infinite; }

/* ============================================================
   DYNAMIC MOTION — image hover zoom + scrolling/ambient gradient
   All effects are GPU-friendly (transform/opacity/bg-position) and
   gated for reduced-motion + touch. Additive; nothing depends on it.
   ============================================================ */

/* ---- Image hover zoom (desktop pointers only) ---- */
@media (hover:hover) and (pointer:fine) {
  /* Card thumbnails (Resource hub / featured) */
  .sf-thumb { transition: transform .4s cubic-bezier(.22,.61,.36,1); will-change: transform; }
  .sf-article-card:hover .sf-thumb { transform: scale(1.06); }

  /* Content + gallery images: clip the frame, scale the img inside */
  .entry-content .wp-block-image,
  .entry-content figure.wp-block-image,
  .single-post .entry-content figure,
  .wp-block-gallery .wp-block-image {
    overflow: hidden; border-radius: var(--sf-radius);
  }
  .entry-content .wp-block-image img,
  .single-post .entry-content figure img,
  .wp-block-gallery .wp-block-image img {
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
    will-change: transform; display:block;
  }
  .entry-content .wp-block-image:hover img,
  .single-post .entry-content figure:hover img,
  .wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(47,230,224,0.25);
  }
}

/* ---- Ambient gradient drift (always-on, very slow "breathing") ---- */
@keyframes sfDrift {
  0%   { transform: translate3d(0,0,0)        scale(1);    }
  50%  { transform: translate3d(1.5%,-1.5%,0) scale(1.04); }
  100% { transform: translate3d(0,0,0)        scale(1);    }
}
/* Apply drift to a second fixed glow layer so it can transform independently
   of body::before (which is driven by scroll position). */
body::after {
  content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(45rem 30rem at 20% 30%, rgba(108,87,255,0.10), transparent 60%),
    radial-gradient(40rem 28rem at 80% 70%, rgba(193,15,255,0.08), transparent 60%);
  animation: sfDrift 38s ease-in-out infinite;
}

/* ---- Reduced-motion: disable all of the above ---- */
@media (prefers-reduced-motion: reduce) {
  .sf-thumb, .entry-content img, .wp-block-image img { transition: none !important; }
  .sf-article-card:hover .sf-thumb,
  .entry-content .wp-block-image:hover img,
  .single-post .entry-content figure:hover img { transform: none !important; box-shadow:none !important; }
  body::after { animation: none !important; }
  body::before { transition: none !important; }
  .sf-reveal.sf-in, .sf-float { animation: none !important; }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sf-bg-2); }
::-webkit-scrollbar-thumb { background: rgba(47,230,224,0.3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(193,15,255,0.5); }

/* ============================================================
   RESOURCE CENTER — filterable card grid
   ============================================================ */
.sf-resource-hub { max-width: 1200px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.sf-hub-head { text-align:center; margin-bottom: 2rem; }
.sf-hub-head h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom:.5rem; }
.sf-hub-head p { color: var(--sf-text-muted); max-width: 38rem; margin: 0 auto; }

.sf-hub-controls {
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center;
  align-items:center; margin: 1.5rem 0 2rem;
}
.sf-search {
  flex: 1 1 240px; max-width: 360px; position: relative;
}
.sf-search input { width:100%; padding:.7rem 1rem .7rem 2.5rem !important; }
.sf-search::before {
  content:"⌕"; position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color: var(--sf-cyan); font-size:1.1rem;
}
.sf-filters { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.sf-filter {
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.85rem;
  padding:.45rem 1rem; border-radius:999px; cursor:pointer;
  background: rgba(255,255,255,0.04); color: var(--sf-text-muted);
  border:1px solid var(--sf-border); transition: all .2s ease; white-space:nowrap;
}
.sf-filter:hover { color: var(--sf-text); border-color: rgba(47,230,224,0.4); }
.sf-filter.is-active {
  background: linear-gradient(135deg, rgba(47,230,224,0.18), rgba(193,15,255,0.18));
  color: var(--sf-cyan); border-color: rgba(47,230,224,0.5);
  box-shadow: 0 0 14px rgba(47,230,224,0.2);
}

/* Secondary tag-filter row — smaller, magenta-leaning, visually distinct from
   the cyan category pills. Separated by a thin divider above. */
.sf-tag-filters {
  margin-top:.85rem; padding-top:.85rem;
  border-top:1px solid var(--sf-border);
  width:100%; gap:.4rem;
}
.sf-tag-filter {
  font-family:'JetBrains Mono',monospace; font-weight:400; font-size:.74rem;
  padding:.3rem .75rem; text-transform:lowercase;
}
.sf-tag-filter.is-active {
  background: linear-gradient(135deg, rgba(193,15,255,0.2), rgba(108,87,255,0.2));
  color:#e9b8ff; border-color: rgba(193,15,255,0.5);
  box-shadow: 0 0 14px rgba(193,15,255,0.2);
}

/* Tag chips on article cards (and single posts) */
.sf-tag-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0 0; }
.sf-tag-chip {
  font-family:'JetBrains Mono',monospace; font-size:.68rem; line-height:1;
  padding:.25rem .55rem; border-radius:999px; white-space:nowrap;
  background: rgba(255,255,255,0.04); color: var(--sf-text-muted);
  border:1px solid var(--sf-border); transition: all .2s ease;
}
.sf-tag-chip:hover { color:#e9b8ff; border-color: rgba(193,15,255,0.45); background: rgba(193,15,255,0.08); }

.sf-grid {
  display:grid; gap:1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.sf-article-card { display:flex; flex-direction:column; }
.sf-article-card .sf-thumb {
  aspect-ratio: 16/9; width:100%; object-fit:cover; display:block;
  background: linear-gradient(135deg, rgba(47,230,224,0.12), rgba(193,15,255,0.12));
}
.sf-article-card .sf-body { padding:1.25rem 1.25rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.sf-badge {
  align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.05em; padding:.25rem .6rem; border-radius:999px;
  background: rgba(193,15,255,0.15); color:#e9b8ff; border:1px solid rgba(193,15,255,0.3);
  margin-bottom:.75rem;
}
.sf-article-card h3 { font-size:1.1rem; line-height:1.3; margin:0 0 .5rem; }
.sf-article-card h3 a { color: var(--sf-text); }
.sf-article-card h3 a:hover { color: var(--sf-cyan); }
.sf-article-card .sf-excerpt { color: var(--sf-text-muted); font-size:.9rem; line-height:1.6; flex:1; }
.sf-article-card .sf-meta {
  margin-top:1rem; font-family:'JetBrains Mono',monospace; font-size:.72rem;
  color: rgba(245,244,250,0.45);
}
.sf-empty { text-align:center; color:var(--sf-text-muted); padding:3rem 1rem; grid-column:1/-1; display:none; }
.sf-empty.is-shown { display:block; }

/* Load-more */
.sf-loadmore-wrap { text-align:center; margin-top:2.5rem; }
.sf-hidden-row { display:none !important; }

/* ============================================================
   CALLOUT BOXES (reusable in articles: Goal / Tip / Warning / Note)
   Usage: <div class="sf-callout sf-callout-tip"><span class="sf-callout-label">Tip</span><p>…</p></div>
   ============================================================ */
.sf-callout {
  display:flex; gap:0; align-items:stretch; margin:1.5rem 0;
  border-radius:.75rem; overflow:hidden; border:1px solid var(--sf-border);
  background:rgba(255,255,255,0.03);
}
.sf-callout-label {
  flex:0 0 auto; min-width:88px; padding:.85rem 1rem;
  font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:#0b0a14;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.sf-callout > *:not(.sf-callout-label) { padding:.85rem 1.1rem; margin:0; flex:1; align-self:center; }
.sf-callout p { color:var(--sf-text) !important; }
/* Info / Goal / What-to-expect (cyan) */
.sf-callout-info  { border-color:rgba(47,230,224,0.35); background:rgba(47,230,224,0.06); }
.sf-callout-info  .sf-callout-label { background:var(--sf-cyan); }
/* Tip (purple) */
.sf-callout-tip   { border-color:rgba(108,87,255,0.4); background:rgba(108,87,255,0.08); }
.sf-callout-tip   .sf-callout-label { background:var(--sf-purple); color:#fff; }
/* Warning (gold/amber) */
.sf-callout-warn  { border-color:rgba(255,210,63,0.45); background:rgba(255,210,63,0.08); }
.sf-callout-warn  .sf-callout-label { background:var(--sf-gold); }
/* Shortcut (magenta) */
.sf-callout-alt   { border-color:rgba(193,15,255,0.4); background:rgba(193,15,255,0.08); }
.sf-callout-alt   .sf-callout-label { background:var(--sf-magenta); color:#fff; }
@media (max-width:600px){
  .sf-callout { flex-direction:column; }
  .sf-callout-label { min-width:0; width:100%; justify-content:flex-start; }
}

/* Article tables (materials lists) styled to match */
.single-post .entry-content table, .sf-front-featured table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.92rem; }
.single-post .entry-content th { background:rgba(47,230,224,0.12); color:var(--sf-text); font-family:'Outfit',sans-serif; text-align:left; }
.single-post .entry-content th, .single-post .entry-content td { border:1px solid var(--sf-border); padding:.6rem .8rem; }
.single-post .entry-content tr:nth-child(even) td { background:rgba(255,255,255,0.02); }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .sf-hub-controls { flex-direction:column; }
  .sf-search { max-width:100%; width:100%; }
  .sf-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME hero + feature sections
   ============================================================ */
.sf-hero {
  position:relative; text-align:center; padding: clamp(3rem,9vw,6rem) 1.25rem;
  border-radius: var(--sf-radius-lg); overflow:hidden; margin-bottom:3rem;
  background:
    radial-gradient(40rem 24rem at 50% -20%, rgba(193,15,255,0.22), transparent 65%),
    rgba(18,16,31,0.5);
  border:1px solid var(--sf-border);
}
.sf-hero h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); line-height:1.05; margin-bottom:1rem; font-weight:800; }
.sf-hero p { color: var(--sf-text-muted); font-size:clamp(1rem,2.4vw,1.2rem); max-width:42rem; margin:0 auto 2rem; }
.sf-hero .sf-cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.sf-section { max-width:1200px; margin:0 auto 4rem; padding:0 1.25rem; }
.sf-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.sf-section-head h2 { font-size:clamp(1.5rem,4vw,2.25rem); }
.sf-section-head a { font-family:'Outfit',sans-serif; font-weight:600; }

.sf-pillars { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.sf-pillar { padding:1.75rem 1.5rem; text-align:center; }
.sf-pillar .sf-pillar-icon {
  width:56px;height:56px;margin:0 auto 1rem;border-radius:1rem;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  background:linear-gradient(135deg,var(--sf-cyan),var(--sf-magenta));
  box-shadow:0 0 24px rgba(47,230,224,0.35);
}
.sf-pillar h3 { margin-bottom:.5rem; }
.sf-pillar p { color:var(--sf-text-muted); font-size:.92rem; }