/*
Theme Name:   Nur of Life
Theme URI:    https://nuroflife.com
Description:  Custom child theme for Nuroflife — a non-profit "Digital Sanctuary" for Muslim productivity and knowledge, built as Sadaqah Jariyah. Privacy-first, ad-free, dark-mode. Built on the PopularFX parent theme.
Author:       Nuroflife
Author URI:   https://nuroflife.com
Template:     popularfx
Version:      0.5.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  nuroflife
*/

/* =========================================================
   1. FONTS  (self-hosted — drop .woff2 files in /assets/fonts/)
   ========================================================= */
@font-face { font-family:"Cormorant Garamond"; src:url("assets/fonts/cormorant-garamond-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; src:url("assets/fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("assets/fonts/mulish-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("assets/fonts/mulish-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("assets/fonts/mulish-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Amiri"; src:url("assets/fonts/amiri-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

/* =========================================================
   2. DESIGN TOKENS  (sampled from the official brand palette)
   ========================================================= */
:root {
  --nol-bg:#1E2229; --nol-surface:#252A32; --nol-surface-2:#2B313A;
  --nol-border:rgba(255,255,255,0.08); --nol-border-soft:rgba(255,255,255,0.05);
  --nol-teal:#01A998; --nol-teal-bright:#1FC8B6;
  --nol-gold:#F5BD1E; --nol-gold-soft:#ECC257; --nol-yellow:#FFDF01;
  --nol-grey:#8A8782; --nol-text:#E5E7EB; --nol-text-muted:#9AA3AF;
  --nol-heading:var(--nol-gold-soft);
  --nol-font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --nol-font-body:"Mulish","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nol-font-arabic:"Amiri","Traditional Arabic",serif;
  --nol-radius:14px; --nol-radius-sm:9px; --nol-radius-lg:22px;
  --nol-maxw:1180px; --nol-gutter:clamp(1rem,4vw,2.25rem);
  --nol-shadow:0 18px 40px -22px rgba(0,0,0,0.7);
  --nol-ease:cubic-bezier(0.22,1,0.36,1);
}

/* =========================================================
   3. BASE  (dark sanctuary canvas)
   !important is used on the background to override the parent
   theme's Customizer colours.
   ========================================================= */
html { -webkit-text-size-adjust:100%; }
body {
  background-color: var(--nol-bg) !important;
  background-image: radial-gradient(120% 75% at 50% -8%, rgba(1,169,152,0.12) 0%, rgba(30,34,41,0) 55%) !important;
  background-attachment: fixed;
  color: var(--nol-text);
  font-family: var(--nol-font-body);
  font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* let the dark canvas show through common content wrappers */
#content, .site-content, .site-main, .content-area, main, article {
  background: transparent !important;
}
h1,h2,h3,h4 {
  font-family: var(--nol-font-display); color: var(--nol-heading);
  font-weight:500; line-height:1.15; letter-spacing:0.01em;
}
p, li, span, td { color: var(--nol-text); }
a { color: var(--nol-teal-bright); text-decoration:none; transition:color .25s var(--nol-ease); }
a:hover { color: var(--nol-gold-soft); }
::selection { background: rgba(1,169,152,0.35); color:#fff; }

/* =========================================================
   4. LAYOUT PRIMITIVES
   ========================================================= */
.nol-container { width:100%; max-width:var(--nol-maxw); margin-inline:auto; padding-inline:var(--nol-gutter); }
.nol-eyebrow { display:inline-block; font-family:var(--nol-font-body); font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--nol-teal-bright); }
.nol-muted { color:var(--nol-text-muted); }
.nol-arabic { font-family:var(--nol-font-arabic); direction:rtl; }

/* =========================================================
   5. BUTTONS
   ========================================================= */
.nol-btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--nol-font-body); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; padding:.8rem 1.4rem; border-radius:var(--nol-radius-sm); border:1px solid transparent; cursor:pointer; transition:transform .25s var(--nol-ease), background-color .25s var(--nol-ease), border-color .25s var(--nol-ease); }
.nol-btn--primary { background:var(--nol-gold); color:#1E2229; }
.nol-btn--primary:hover { background:var(--nol-gold-soft); transform:translateY(-2px); color:#1E2229; }
.nol-btn--ghost { background:transparent; color:var(--nol-teal-bright); border-color:rgba(31,200,182,0.45); }
.nol-btn--ghost:hover { background:rgba(1,169,152,0.12); border-color:var(--nol-teal-bright); transform:translateY(-2px); }

/* =========================================================
   6. CARD
   ========================================================= */
.nol-card { background:var(--nol-surface); border:1px solid var(--nol-border); border-radius:var(--nol-radius); padding:clamp(1.25rem,3vw,1.75rem); transition:transform .3s var(--nol-ease), border-color .3s var(--nol-ease), box-shadow .3s var(--nol-ease); }
.nol-card:hover { transform:translateY(-4px); border-color:rgba(31,200,182,0.4); box-shadow:var(--nol-shadow); }

/* =========================================================
   7. ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* =========================================================
   10. HERO  (shortcode: [nol_hero])
   ========================================================= */
.nol-hero {
  position: relative; display: flex; align-items: center;
  min-height: clamp(520px, 80vh, 820px);
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* full-bleed */
  padding-block: clamp(3rem, 8vh, 6rem);
  background-color: var(--nol-bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow: hidden;
}
.nol-hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 72% 28%, rgba(1,169,152,0.16), transparent 60%),
    linear-gradient(105deg, rgba(30,34,41,0.96) 0%, rgba(30,34,41,0.82) 44%, rgba(30,34,41,0.5) 100%);
}
.nol-hero__watermark {
  position: absolute; right: -3%; top: 50%; transform: translateY(-50%);
  font-size: clamp(9rem, 32vw, 26rem); line-height: 1;
  color: rgba(1,169,152,0.06);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.nol-hero__inner { position: relative; z-index: 2; }
.nol-hero__inner .nol-eyebrow { margin-bottom: 1.1rem; }
.nol-hero__title {
  font-family: var(--nol-font-display);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05;
  color: var(--nol-gold-soft); margin: 0 0 1.2rem; max-width: 16ch;
}
.nol-hero__text {
  max-width: 54ch; font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: var(--nol-text-muted); margin: 0 0 2rem;
}
.nol-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
@media (max-width: 600px) {
  .nol-hero { min-height: 78vh; }
  .nol-hero__title { letter-spacing: 0.02em; }
}