/* ==========================================================
   Aurora · "aak" theme overlay (layered on top of public.css)
   - Layered radial-gradient body + particle canvas
   - Fixed top decorative image area (admin-configurable URL)
   - Slightly denser cards, more pronounced glassmorph
   - Same brand-blue palette as the base theme
   ========================================================== */

body.theme-aak {
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(31, 111, 235, .16), transparent 60%),
    radial-gradient(900px 500px at 110% 0%,  rgba(42, 168, 255, .14), transparent 60%),
    linear-gradient(180deg, #f6f9ff 0%, #eef3fb 45%, #f7f9fc 100%);
  position: relative;
  overflow-x: hidden;
}

/* ===================== App-shell layout (theme-aak) =====================
   Top region (.fixed-area) is pinned to the top.
   Cards (.cards-scroll) live in a scrolling container below — feels like a slot-machine app.
   JS sets --fixed-area-h based on the actual measured height of .fixed-area. */
body.theme-aak {
  height: 100vh;
  overflow: hidden;
}
.theme-aak .fixed-area {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
}
.theme-aak .cards-scroll {
  position: fixed;
  top: var(--fixed-area-h, 240px);
  left: 0; right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 40px;
}

/* The floating FAB still works since it's fixed by its own rule */

/* Particle canvas — sits below content, behind everything */
.theme-aak canvas#bg-particles {
  position: fixed; inset: 0;
  z-index: -1;
  opacity: .75;
  filter: blur(.2px);
  pointer-events: none;
}

/* Top decorative bg image — fixed band behind hero/marquee */
.theme-aak .top-bg {
  position: fixed;
  top: 60px;
  left: 0; right: 0;
  height: 320px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: .85;
  z-index: -2;
  pointer-events: none;
  filter: saturate(1.05);
}

/* Header gets a faint grid pattern overlay (the aak.pm decorative ::before) */
.theme-aak .nav {
  background: linear-gradient(180deg, rgba(220, 232, 250, .98), rgba(200, 218, 245, .9));
  border-bottom: 1px solid rgba(15, 40, 90, .1);
  box-shadow: 0 10px 26px rgba(15, 40, 90, .08);
  position: relative;
  overflow: hidden;
}
.theme-aak .nav::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(120deg, rgba(31, 111, 235, .12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(15, 40, 90, .08) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg,  rgba(15, 40, 90, .06) 0 1px, transparent 1px 18px);
  opacity: .95;
  pointer-events: none;
  z-index: 0;
}
.theme-aak .nav-inner { position: relative; z-index: 1; }

/* Slightly more pronounced glassmorph on cards */
.theme-aak .app-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(245, 250, 255, .50));
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
          backdrop-filter: blur(14px) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 16px 34px rgba(26, 68, 138, .14);
  border-color: rgba(255, 255, 255, .72);
}
.theme-aak .app-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 18px 40px rgba(37, 92, 184, .22);
  border-color: rgba(84, 151, 255, .50);
}

/* Banner gets a glass border in aak theme */
.theme-aak .banner {
  border: 1px solid rgba(255, 255, 255, .65);
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .25));
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
          backdrop-filter: blur(12px) saturate(1.1);
}

/* Marquee — stronger blue gradient (aak.pm uses #2b6fe9 → #4aa3ff) */
.theme-aak .marquee-inner {
  background: linear-gradient(90deg, #2b6fe9, #4aa3ff);
  box-shadow: 0 10px 22px rgba(31, 111, 235, .20);
  border: 1px solid rgba(15, 40, 90, .08);
}

/* Quick-links panel — more translucent on aak */
.theme-aak .quick-links {
  background: linear-gradient(135deg, rgba(255, 255, 255, .85), rgba(236, 244, 255, .72));
  border: 1px solid rgba(47, 123, 255, .18);
  box-shadow: 0 12px 30px rgba(37, 79, 152, .12);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* Section title — slightly bigger + bolder accent on aak */
.theme-aak .section-head h2 {
  font-size: 28px;
  letter-spacing: 1.2px;
  color: #0f2250;
}
.theme-aak .section-head h2::after {
  width: 126px;
  height: 5px;
  bottom: -8px;
}

@media (max-width: 720px) {
  .theme-aak .top-bg { top: 56px; height: 240px; }
  .theme-aak .section-head h2 { font-size: 22px; }
}
@media (max-width: 480px) {
  .theme-aak .section-head h2 { font-size: 20px; }
}