/* ===== LGA Modern – Frontend Styles (1.3.1) ===== */
:root{
  --fdp-yellow:#ffed00;
  --fdp-cyan:#00aeef;
  --fdp-magenta:#e6007e;

  --bg:#0e1116;
  --surface:#121722;
  --card:#161b26;
  --text:#e8ecf1;
  --muted:#a9b3c1;
  --border:#232a37;

  --grad-1: linear-gradient(135deg, rgba(255,237,0,.35), rgba(0,174,239,.25));
  --grad-2: linear-gradient(135deg, rgba(230,0,126,.4), rgba(0,174,239,.25));
  --grad-3: linear-gradient(135deg, rgba(0,174,239,.35), rgba(255,237,0,.25));

  --glow-yellow: 0 0 40px 8px rgba(255,237,0,.12);
  --glow-cyan:   0 0 44px 10px rgba(0,174,239,.12);
  --glow-mag:    0 0 44px 10px rgba(230,0,126,.10);

  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:8px;

  --shadow-soft:0 10px 30px rgba(0,0,0,.25);
  --shadow-ring:0 0 0 1px var(--border), 0 8px 30px rgba(0,0,0,.35);

  --nav-height:70px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fb;
    --surface:#ffffff;
    --card:#ffffff;
    --text:#0c1220;
    --muted:#5c6676;
    --border:#e6e9ef;
    --shadow-soft:0 10px 30px rgba(0,0,0,.08);
    --shadow-ring:0 0 0 1px var(--border), 0 8px 26px rgba(0,0,0,.10);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1116; --surface:#121722; --card:#161b26; --text:#e8ecf1; --muted:#a9b3c1; --border:#232a37;
  --shadow-soft:0 10px 30px rgba(0,0,0,.25);
  --shadow-ring:0 0 0 1px var(--border), 0 8px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#f7f8fb; --surface:#ffffff; --card:#ffffff; --text:#0c1220; --muted:#5c6676; --border:#e6e9ef;
  --shadow-soft:0 10px 30px rgba(0,0,0,.08);
  --shadow-ring:0 0 0 1px var(--border), 0 8px 26px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(255,237,0,.05), transparent 60%),
              radial-gradient(900px 500px at -10% 10%, rgba(0,174,239,.06), transparent 60%),
              radial-gradient(900px 800px at 50% 120%, rgba(230,0,126,.05), transparent 60%),
              var(--bg);
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* NAV */
.nav-wrap{position:sticky;top:0;z-index:1000;backdrop-filter:saturate(150%) blur(10px);background:color-mix(in srgb, var(--bg) 88%, transparent);border-bottom:1px solid var(--border)}
.nav{height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1200px;margin:0 auto;padding:0 20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.brand-badge{width:28px;height:28px;border-radius:8px;background:var(--grad-2);box-shadow:var(--glow-mag);display:grid;place-items:center}
.brand-badge svg{width:18px;height:18px}
.brand span{font-family:"Space Grotesk", Inter, system-ui;font-size:1.05rem}
.brand-logo img{height:28px;width:auto;display:block}
.nav-items{display:flex;align-items:center;gap:10px}
.theme-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 75%, transparent);margin-right:6px;cursor:pointer}
.theme-icon-btn:focus-visible{outline:2px solid color-mix(in srgb, var(--fdp-cyan) 55%, transparent);outline-offset:2px}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.menu > li{position:relative}
.menu > li > a{padding:10px 12px;border-radius:10px;border:1px solid transparent;font-weight:600;letter-spacing:.2px;transition:transform .2s ease, background .2s ease, border-color .2s ease}
.menu > li > a:hover{background:color-mix(in srgb, var(--surface) 70%, transparent);border-color:var(--border)}
.submenu{position:absolute;left:0;top:100%;min-width:240px;padding:10px;margin-top:10px;border-radius:var(--radius-lg);background:color-mix(in srgb, var(--surface) 94%, transparent);border:1px solid var(--border);box-shadow:var(--shadow-ring);opacity:0;transform:translateY(6px) scale(.98);visibility:hidden;pointer-events:none;transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.menu > li.opening > .submenu,
.menu > li.showing > .submenu{opacity:1;transform:translateY(0) scale(1);visibility:visible;pointer-events:auto;transition-delay:40ms}
.menu > li.closing > .submenu{opacity:0;transform:translateY(6px) scale(.98);transition-delay:0ms}
.sub-menu{list-style:none;margin:0;padding:0}
.sub-menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);border:1px solid transparent}
.sub-menu a:hover{background:color-mix(in srgb, var(--card) 85%, transparent);border-color:var(--border)}
.cta-btn{padding:10px 14px;font-weight:700;border-radius:999px;border:1px solid var(--border);background:var(--grad-1);box-shadow:var(--glow-yellow)}
.nav-toggle{display:none;background:none;border:1px solid var(--border);padding:10px 12px;border-radius:12px}
@media (max-width:980px){
  .nav{height:auto;padding:12px 16px;align-items:center}
  .nav-items{width:100%;justify-content:flex-end}
  .nav-toggle{display:inline-flex}
  .menu{position:fixed;inset:calc(var(--nav-height) + 8px) 16px auto 16px;top:76px;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px;display:none;box-shadow:var(--shadow-ring)}
  .menu.open{display:flex}
  .submenu{position:relative;margin:6px 0 0 0}
}
.scrolled .nav-wrap{border-bottom-color:color-mix(in srgb, var(--border) 70%, transparent);background:color-mix(in srgb, var(--bg) 92%, transparent)}

/* HERO */
.hero{position:relative;max-width:1200px;margin:0 auto;padding:80px 20px 40px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-family:"Space Grotesk", Inter, system-ui;font-size:clamp(2.2rem, 4vw, 3.4rem);margin:0 0 14px;letter-spacing:.2px}
.hero p{font-size:1.1rem;color:var(--muted);margin:0 0 22px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-soft);font-weight:700}
.btn.primary{background:var(--grad-2);box-shadow:var(--glow-mag)}
.btn.ghost{background:color-mix(in srgb, var(--card) 75%, transparent)}
.hero-art{position:relative;aspect-ratio:1/1;border-radius:var(--radius-xl);background:var(--card);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-ring);display:grid;place-items:center}
.orb{position:absolute;filter:blur(12px);opacity:.9}
.orb.yellow{width:280px;height:280px;border-radius:999px;background:radial-gradient(circle at 30% 30%, rgba(255,237,0,.6), rgba(255,237,0,.0) 60%);box-shadow:var(--glow-yellow);top:-30px;right:-10px}
.orb.cyan{width:320px;height:320px;border-radius:999px;background:radial-gradient(circle at 60% 40%, rgba(0,174,239,.5), rgba(0,174,239,.0) 60%);box-shadow:var(--glow-cyan);bottom:-30px;left:-40px}
.orb.mag{width:220px;height:220px;border-radius:999px;background:radial-gradient(circle at 50% 50%, rgba(230,0,126,.55), rgba(230,0,126,.0) 60%);box-shadow:var(--glow-mag);bottom:40px;right:40px}
.badge-row{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb, var(--card) 85%, transparent);font-size:.9rem;color:var(--muted)}
.badge i{width:8px;height:8px;border-radius:50%;display:inline-block}
.i-yellow{background:var(--fdp-yellow)} .i-cyan{background:var(--fdp-cyan)} .i-mag{background:var(--fdp-magenta)}
@media (max-width:980px){.hero{grid-template-columns:1fr;padding-top:40px}.hero-art{order:-1}}

/* SECTIONS */
section{padding:70px 20px}
.section-inner{max-width:1200px;margin:0 auto}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}
.section-head h2{font-family:"Space Grotesk", Inter, system-ui;font-size:clamp(1.6rem, 2.4vw, 2.2rem);margin:0}
.section-head p{color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-4{grid-column:span 4} .col-6{grid-column:span 6} .col-12{grid-column:span 12}
@media (max-width:980px){.col-4,.col-6{grid-column:span 12}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft);padding:20px;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg, color-mix(in srgb, var(--fdp-yellow) 15%, transparent), transparent 40%, color-mix(in srgb, var(--fdp-magenta) 12%, transparent) 70%, transparent 100%);opacity:.35;mask:linear-gradient(#000, transparent 60%)}
.card .title{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.card p{color:var(--muted);margin:10px 0 0}
.feature-accent{height:4px;border-radius:999px;background:var(--grad-3);margin:12px 0 4px;box-shadow:var(--glow-cyan)}

/* News list */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news article{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;transition:transform .2s ease, box-shadow .2s ease}
.news article:hover{transform:translateY(-4px);box-shadow:var(--shadow-ring)}
.news h3{font-size:1rem;margin:6px 0 6px}
.news p{color:var(--muted);margin:0;font-size:.95rem}
@media (max-width:980px){.news{grid-template-columns:1fr}}

/* CTA Band */
.cta-band{margin-top:24px;padding:24px;border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--grad-1);display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--glow-yellow)}
.cta-band p{margin:0;color:color-mix(in srgb, var(--text) 90%, transparent)}

/* FOOTER */
.lga-footer{border-top:1px solid var(--border);background:color-mix(in srgb, var(--surface) 88%, transparent)}
.lga-footer .footer-inner{max-width:1200px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.lga-footer h4{margin:0 0 10px;font-size:1rem}
.lga-footer a{display:inline-flex;align-items:center;gap:8px;padding:6px 0;color:var(--muted)}
.lga-footer .socials-list{display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:4px 0;list-style:none}
.lga-footer .socials-list .icon{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-soft)}
.lga-footer .socials-list .icon svg{width:18px;height:18px}
.copyright{border-top:1px solid var(--border);color:var(--muted);font-size:.95rem;padding:16px 20px;text-align:center}
@media (max-width:900px){.lga-footer .footer-inner{grid-template-columns:1fr 1fr}}

/* Reveal on scroll */
.reveal-on-scroll{opacity:0;transform:translateY(16px);will-change:opacity, transform}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0);transition:opacity .7s ease, transform .7s ease}

/* Icon-only toggle (footer optional) */
.theme-toggle.icon-only > button{padding:8px;width:40px;height:40px;justify-content:center}
footer .theme-toggle{justify-self:end}
@media (max-width:900px){footer .theme-toggle{justify-self:start;margin-top:8px}}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal-on-scroll{opacity:1 !important;transform:none !important}
  .orb,.hero-parallax{display:none}
}

/* Animated Theme Transition */
html.transitioning, html.transitioning *{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}
body.transition-overlay::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:0;
  background: var(--bg); mix-blend-mode: multiply; z-index: 2147483647;
  animation: themeOverlay .35s ease;
}
@keyframes themeOverlay{ 0%{opacity:.35} 100%{opacity:0} }

/* Post/Page hero + content + comments */
.post-hero{position:relative;min-height:240px;display:grid;align-items:end;border-bottom:1px solid var(--border);overflow:hidden}
.post-hero-img{width:100%;height:420px;object-fit:cover;display:block}
.post-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35) 60%, rgba(0,0,0,.55));mix-blend-mode:multiply}
.post-hero-content{position:absolute;left:0;right:0;bottom:0;padding:24px 20px 28px}
.post-title{font-family:"Space Grotesk", Inter, system-ui;font-size:clamp(1.8rem,3vw,2.6rem);margin:0}
.post-meta{color:var(--muted);margin-top:6px}
.post-content p{margin:1em 0;color:var(--text)}
.post-content img{border-radius:12px}
.post-content figure{margin:1.2em 0}
.post-content blockquote{margin:1.2em 0;padding:10px 12px;border-left:3px solid color-mix(in srgb, var(--fdp-cyan) 50%, transparent);background:color-mix(in srgb, var(--surface) 70%, transparent);border-radius:10px}
.comments-area{padding-bottom:60px}
.comment-list{list-style:none;padding:0;margin:0}
.comment-list li{margin-bottom:18px;padding:12px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb, var(--card) 90%, transparent)}
.comment-form textarea,.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"]{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface);color:var(--text)}
.comment-form input[type="submit"]{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--grad-2);box-shadow:var(--glow-mag);font-weight:700;cursor:pointer}