/* ==========================================================================
   Graph Background + Liquid Glass Theme (Astra child)
   File: /wp-content/themes/astra-iamthetech/css/graph-background.css
   ========================================================================== */

/* ---------- Layering order ----------
   0: Base page background
   1: Graph canvas (#obsidian-graph-bg)
   2: Subtle atmosphere overlay (body::before)
   10+: Site/content/cards
------------------------------------- */

:root{
  --bg0: #050818;
  --bg1: #07102a;
  --bg2: #081a3a;

  --glass-bg: rgba(12, 20, 45, 0.22);     /* <- transparency lives here */
  --glass-border: rgba(255,255,255,0.14);
  --glass-border-strong: rgba(255,255,255,0.20);
  --glass-shadow: 0 22px 60px rgba(0,0,0,0.45);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);

  --accentA: #55b2ff;
  --accentB: #8b5cf6;
  --accentC: #16d9a6;
}

/* ---------- Base background (must be dark behind everything) ---------- */
html, body{
  background: radial-gradient(1200px 800px at 50% 25%, rgba(12,24,70,0.55), rgba(5,8,24,1) 65%, rgba(5,8,24,1) 100%) !important;
  color: var(--text);
}

/* ---------- Graph canvas container (above base bg, below content) ---------- */
#obsidian-graph-bg{
  position: fixed;
  inset: 0;
  z-index: 1;              /* graph layer */
  pointer-events: none;
  overflow: hidden;
}

#obsidian-graph-bg canvas{
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 1;
}

/* ---------- Atmosphere overlay ABOVE the graph (keep subtle!) ---------- */
/* If this is too strong, it will “hide” the rays by washing contrast. */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 2;              /* above graph */
  pointer-events:none;

  /* soft vignette + center glow */
  background:
    radial-gradient(900px 600px at 50% 35%,
      rgba(255,255,255,0.05) 0%,
      rgba(0,0,0,0.06) 45%,
      rgba(0,0,0,0.22) 100%);
}

/* ---------- Ensure Astra wrappers are transparent so graph shows through ---------- */
.site,
#page,
#content,
.site-content,
.ast-container,
.ast-site-identity,
.main-header-bar,
.ast-primary-header-bar,
.ast-header-break-point .main-header-bar,
.ast-header-break-point .ast-primary-header-bar{
  background: transparent !important;
}

/* Astra "separate container" backgrounds can create that second block/panel */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .site-content .ast-container{
  background: transparent !important;
  box-shadow: none !important;
}

/* ---------- Put all real content above graph + atmosphere ---------- */
.site,
#page,
#content,
.site-content,
header,
footer,
main,
article,
.ast-container,
.ast-primary-header-bar,
.main-header-bar,
.entry-header,
.entry-content{
  position: relative;
  z-index: 10;
}

/* ---------- Header: dark + gradient-ish brand text ---------- */
.main-header-bar,
.ast-primary-header-bar{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.site-title a,
.site-branding a{
  background: linear-gradient(90deg, var(--accentA), var(--accentB));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* ---------- LIQUID GLASS CARD (the post container) ---------- */
/* This targets Astra’s common post wrappers. */
article.ast-article-post,
article.ast-article-single,
.ast-article-post,
.ast-article-single,
.ast-post-format-standard{
  /* glass body */
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 26px !important;
  box-shadow: var(--glass-shadow) !important;

  /* real “liquid glass” */
  backdrop-filter: blur(18px) saturate(140%) contrast(105%);
  -webkit-backdrop-filter: blur(18px) saturate(140%) contrast(105%);

  overflow: hidden; /* needed so highlight layer clips to round corners */
}

/* highlight + sheen layer */
article.ast-article-post::before,
article.ast-article-single::before,
.ast-article-post::before,
.ast-article-single::before,
.ast-post-format-standard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 28px;
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(700px 420px at 18% 22%,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(255,255,255,0.00) 70%),
    linear-gradient(135deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 40%,
      rgba(0,0,0,0.05) 100%);
}

/* keep card contents above highlight layer */
article.ast-article-post > *,
article.ast-article-single > *,
.ast-article-post > *,
.ast-article-single > *,
.ast-post-format-standard > *{
  position: relative;
  z-index: 1;
}

/* ---------- Remove weird underlines/boxes Astra adds to meta/links ---------- */
.entry-meta,
.entry-meta *{
  background: transparent !important;
  box-shadow: none !important;
}

a{
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.30);
  text-underline-offset: 3px;
}

/* ---------- Typography tweaks inside cards ---------- */
.entry-title,
.entry-title a{
  color: var(--text) !important;
}

.entry-content,
.entry-content p{
  color: var(--muted) !important;
}

/* ---------- Optional: make the points faintly visible “through” the card ----------
   If you want MORE of the graph seen through the card, lower --glass-bg alpha
   e.g. rgba(12, 20, 45, 0.16)
-------------------------------------------------------------------------- */

/* ---------- Mobile padding/spacing sanity ---------- */
@media (max-width: 768px){
  article.ast-article-post,
  article.ast-article-single,
  .ast-article-post,
  .ast-article-single{
    border-radius: 22px !important;
  }
}