/* ============================================================
   THEME 3D — "Circuit Depth"
   A layered, tactile visual system for the ICT Class site.
   Loads AFTER style.css and only re-styles existing classes —
   no HTML structure is changed anywhere.
   ============================================================ */

:root{
  --c-surface:#eef2f7;
  --c-card:#ffffff;
  --c-ink:#1c2733;
  --c-primary:#2f80ed;
  --c-primary-deep:#1c5fc7;
  --c-glow:#22d3ee;
  --c-alert:#e74c3c;
  --shadow-ink:11,29,51;
  --radius:10px;
}

/* ---- Base surface -------------------------------------------------- */
body{
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(34,211,238,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(47,128,237,.07), transparent 55%),
    var(--c-surface) !important;
}

/* ---- Header: glass + depth ------------------------------------------ */
.header-area{
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset,
              0 10px 30px -18px rgba(var(--shadow-ink),.55);
  border-bottom: 1px solid rgba(28,39,51,.06);
}

/* ---- Cards: chip-on-a-board depth + tilt --------------------------- */
.content-item{
  position: relative;
  background: var(--c-card) !important;
  border-radius: var(--radius) 16px var(--radius) var(--radius);
  border: 1px solid rgba(28,39,51,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 28px -18px rgba(var(--shadow-ink),.35),
    0 2px 6px rgba(var(--shadow-ink),.08);
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  overflow: hidden;
}
/* corner "component pin" notch — a small deliberate identity mark,
   not a generic rounded-card default */
.content-item::before{
  content:"";
  position:absolute; top:0; left:0;
  width:22px; height:22px;
  background: linear-gradient(135deg, var(--c-glow), var(--c-primary));
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity:.9;
}
.content-item:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 26px 46px -20px rgba(var(--shadow-ink),.45),
    0 0 0 1px rgba(34,211,238,.35),
    0 0 24px -4px rgba(34,211,238,.45);
}
.content-item img{ position:relative; z-index:1; }
.content-item h2, .content-item h3{ position:relative; z-index:1; }

/* ---- Buttons: tactile press ----------------------------------------- */
.btn, .practice-solution-btn, .today-btn{
  border-radius: 8px !important;
  border: none !important;
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary{
  background: linear-gradient(180deg, var(--c-primary), var(--c-primary-deep)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset,
              0 10px 20px -10px rgba(28,95,199,.65) !important;
}
.btn-secondary{
  background: linear-gradient(180deg,#5c6b7a,#3d4956) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
              0 10px 20px -10px rgba(11,29,51,.55) !important;
}
.btn:hover, .practice-solution-btn:hover, .today-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
}
.btn:active, .practice-solution-btn:active, .today-btn:active{
  transform: translateY(1px);
  box-shadow: 0 4px 10px -6px rgba(var(--shadow-ink),.5) !important;
}

/* ---- Tables: subtle raised rows ------------------------------------- */
.table{
  background: var(--c-card);
  box-shadow: 0 10px 26px -20px rgba(var(--shadow-ink),.4);
  border-radius: var(--radius);
  overflow: hidden;
}
.table thead th{
  background: linear-gradient(180deg, var(--c-primary), var(--c-primary-deep));
  color:#fff !important;
}

/* ---- Modals: elevated glass panel ------------------------------------ */
.modal-content{
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -20px rgba(var(--shadow-ink),.5) !important;
}

/* ---- Footer: deep base ------------------------------------------------ */
.footer, .footer-area{
  position: relative;
  box-shadow: 0 -12px 30px -22px rgba(var(--shadow-ink),.5) inset;
}

/* ---- Accessibility: respect reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce){
  .content-item, .btn, .practice-solution-btn, .today-btn{
    transition: none !important;
  }
}

/* ---- Small screens: tone down heavy shadows for perf ------------------ */
@media (max-width: 576px){
  .content-item:hover{ box-shadow: 0 14px 28px -18px rgba(var(--shadow-ink),.35); }
}