/* public/assets/css/theme-edu-pattern.css
   Lighter 'knowledge' background: soft grid + subtle math/diagram motifs.
   Load AFTER style.css (and after theme-edu.css if you use it).
*/

:root{
  --bg1: #13233f;     /* base surface (lighter than before) */
  --bg2: #0f1d36;
  --bg3: #173057;
  --grid: rgba(255,255,255,.06);
  --dots: rgba(255,255,255,.05);
  --accentA: rgba(45,127,249,.12);   /* blue */
  --accentB: rgba(31,200,200,.10);   /* teal */
  --accentC: rgba(142,124,255,.10);  /* violet */
}

/* Softer background with educational vibe */
html, body{
  background:
    /* soft spotlight accents */
    radial-gradient(900px 480px at 80% -10%, var(--accentA), transparent 70%),
    radial-gradient(700px 380px at 8% 110%,  var(--accentB), transparent 70%),
    radial-gradient(600px 320px at -10% 10%, var(--accentC), transparent 70%),
    /* base gradient */
    linear-gradient(180deg, var(--bg1), var(--bg2) 35%, var(--bg3));
}

/* Fine grid + dots overlay (very subtle) */
body::before{
  content:'';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    /* grid */
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    /* dotted layer */
    radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 1px);
  background-size:
    48px 48px, /* grid rows */
    48px 48px, /* grid cols */
    24px 24px; /* dots */
  mix-blend-mode: overlay;
  opacity: .55;
  z-index: -1;
}

/* Knowledge motifs using CSS conic gradients (compasses, arcs, nodes) */
body::after{
  content:'';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    /* circular node clusters */
    radial-gradient(120px 120px at 15% 25%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(160px 160px at 85% 70%, rgba(255,255,255,.03), transparent 65%),
    /* faint concentric arcs */
    repeating-conic-gradient(from 0deg at 80% 20%, rgba(255,255,255,.03) 0 6deg, transparent 6deg 12deg),
    repeating-conic-gradient(from 0deg at 20% 85%, rgba(255,255,255,.02) 0 8deg, transparent 8deg 16deg);
  mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
  opacity: .6;
  z-index: -1;
}

/* Keep cards readable on lighter bg */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), rgba(12,18,32,.66);
  border-color: rgba(255,255,255,.10);
}

/* Make nav stand out a bit more on lighter bg */
.site-top, .main-nav a{ color: rgba(255,255,255,.95); }
.main-nav a:hover, .main-nav a.active{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 2px 0 0 rgba(45,127,249,.6) inset;
}