/* Inaya Quran Academy, public site glass layer.
   Loaded only by public pages, after site.css. Admin, teacher and student
   portals do not link this file. Colours still come from the site variables. */
:root {
  --glass-bg: rgba(255, 253, 248, .62);
  --glass-bg-strong: rgba(255, 253, 248, .82);
  --glass-line: rgba(255, 255, 255, .7);
  --glass-edge: color-mix(in srgb, var(--primary) 10%, transparent);
  --glass-shadow: 0 18px 48px -24px color-mix(in srgb, var(--primary) 38%, transparent);
  --glass-blur: blur(18px) saturate(1.35);
  --glass-r: 22px;
}

/* Soft background: two quiet colour fields, fixed so glass has something to blur. */
body {
  background:
    radial-gradient(900px 520px at 8% -4%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(900px 600px at 100% 12%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Navigation */
.site-header {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 1px 0 var(--glass-edge);
}
.nav a.nav-link { border-radius: 999px; padding: 8px 14px; }
.nav a.nav-link[aria-current="page"] { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.nav a.nav-link[aria-current="page"]::after { display: none; }
.sub-menu {
  background: var(--glass-bg-strong); border: 1px solid var(--glass-line); border-radius: 16px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

/* Buttons */
.btn { border-radius: 999px; padding: 12px 24px; }
.btn.ghost {
  background: var(--glass-bg); border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.btn.ghost:hover { background: var(--primary); }
.btn.light { background: rgba(255, 255, 255, .92); }

/* Glass surfaces */
.card, .step, .faq details, .rw, .pr, .timeline li, .form-card, .contact-card, .panel, .empty {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  outline: 1px solid var(--glass-edge); outline-offset: -1px;
  border-radius: var(--glass-r);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.card:hover { box-shadow: 0 26px 56px -26px color-mix(in srgb, var(--primary) 46%, transparent); }
.card, .rw, .pr, .step { transition: transform .3s var(--ease, ease), box-shadow .3s ease, background-color .3s ease; }

/* Hero */
.hero { padding: 72px 0 88px; }
.hero h1 { letter-spacing: -.02em; }
.hero-art .arch {
  border-radius: 28px; border: 1px solid var(--glass-line);
  box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--primary) 55%, transparent);
}
.hero-note {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.page-hero { padding: 64px 0 16px; }

/* Home rows become a two column set of numbered glass cards */
.rows { border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; counter-reset: rw; }
.rw { display: block; padding: 28px 28px 24px 84px; position: relative; border-bottom: 1px solid var(--glass-line); counter-increment: rw; }
.rw::before {
  content: counter(rw); position: absolute; left: 26px; top: 26px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 14px; font-family: var(--font-head); font-size: 1.15rem; font-weight: 600;
  color: var(--primary); background: color-mix(in srgb, var(--accent) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.rw h3 { margin-bottom: .4em; }
.rw:hover { transform: translateY(-3px); box-shadow: 0 26px 56px -26px color-mix(in srgb, var(--primary) 46%, transparent); }

/* Programs: the three programs sit in one deep green band of glass cards */
.prog-rows { border-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pr { display: flex; flex-direction: column; gap: 10px; padding: 30px 28px; }
.pr:hover { transform: translateY(-4px); }
.pr-n {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 1.2rem;
  background: color-mix(in srgb, var(--accent) 24%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.pr-levels li { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* Green sections: translucent cards on the brand colour */
.section.green {
  background:
    radial-gradient(700px 360px at 90% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    var(--primary);
  border-radius: 32px; margin: 8px 16px;
}
.section.green .card, .section.green .step, .section.green .rw, .section.green .pr {
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); outline-color: rgba(255, 255, 255, .06);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .55);
}
.section.green .rw::before, .section.green .pr-n { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .24); }
.section.green .pr-levels li { background: rgba(255, 255, 255, .08); }
.section.soft { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }

/* Steps */
.step::before { box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--primary) 60%, transparent); }

/* FAQ in two columns on wide screens */
.faq { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.faq details { padding: 0 22px; transition: background-color .25s ease, box-shadow .25s ease; }
.faq details[open] { background: var(--glass-bg-strong); }
.faq-cat { grid-column: 1 / -1; }

/* Forms */
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=date], input[type=url], input[type=number], select, textarea {
  background: rgba(255, 255, 255, .72); border-radius: 14px; border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input:focus, select:focus, textarea:focus { background: #fff; }
form { --form-glass: 1; }
.form-wrap, .assess, .contact-grid > div > form { background: var(--glass-bg); border: 1px solid var(--glass-line); border-radius: var(--glass-r); padding: 28px; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }

/* Footer */
.site-footer {
  background:
    radial-gradient(600px 300px at 12% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--primary);
  border-radius: 32px 32px 0 0; margin-top: 24px;
}

/* Entrance: gentle, respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .rw, .pr, .card, .step { animation: glass-in .6s var(--ease, ease) both; }
  .rw:nth-child(2), .pr:nth-child(2), .card:nth-child(2) { animation-delay: .06s; }
  .rw:nth-child(3), .pr:nth-child(3), .card:nth-child(3) { animation-delay: .12s; }
  .rw:nth-child(4) { animation-delay: .18s; }
}
@keyframes glass-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Where blur is unsupported, fall back to near-solid surfaces so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255, 253, 248, .96); --glass-bg-strong: #FFFDF8; }
}

/* Tablet and phone */
@media (max-width: 980px) {
  .prog-rows { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .rows, .faq { grid-template-columns: 1fr; }
  .rw { padding: 74px 22px 22px; }
  .rw::before { left: 22px; top: 22px; }
  .hero { padding: 44px 0 56px; }
  .section.green { margin: 8px 8px; border-radius: 24px; }
  .site-footer { border-radius: 24px 24px 0 0; }
  .btn { padding: 12px 20px; }
}