@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
@import url('../../css/site.css?v=66');

/*
 * نور v2 — contemporary Islamic
 * Quiet geometry, Amiri display, mihrab rhythm, no decoration spam.
 */

[data-theme-package="noor"]{
  --radius:16px;
  --radius-sm:10px;
  --scroll-safe:108px;
  --surface-border:1px solid color-mix(in srgb, var(--brand) 12%, var(--line));
  --surface-shadow:0 10px 28px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow:0 18px 40px color-mix(in srgb, var(--ink) 9%, transparent);
  --shadow-lg:0 28px 56px color-mix(in srgb, var(--ink) 12%, transparent);
  --btn-brand-bg:var(--brand);
  --btn-brand-fg:var(--on-brand);
  --btn-brand-shadow:0 10px 24px color-mix(in srgb, var(--brand) 26%, transparent);
  --btn-ask-bg:var(--brand);
  --btn-ask-fg:var(--on-brand);
  --btn-ask-shadow:0 10px 24px color-mix(in srgb, var(--brand) 26%, transparent);
  --btn-line-bg:var(--paper);
  --btn-line-fg:var(--ink);
  --btn-line-border:color-mix(in srgb, var(--gold) 45%, var(--line));
  --action-bg:var(--brand);
  --action-fg:var(--on-brand);
}

[data-theme-package="noor"] body,
[data-theme-package="noor"] .noor-body{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, var(--bg)), var(--bg) 28%);
  position:relative;
  overflow-x:clip;
}

[data-theme-package="noor"] h1,
[data-theme-package="noor"] h2,
[data-theme-package="noor"] h3,
[data-theme-package="noor"] .brand span,
[data-theme-package="noor"] .btn,
[data-theme-package="noor"] .btn-ask,
[data-theme-package="noor"] .btn-brand,
[data-theme-package="noor"] .eyebrow,
[data-theme-package="noor"] .kicker{
  font-family:"Amiri","IBM Plex Sans Arabic",Tahoma,serif;
}

[data-theme-package="noor"] .noor-veil{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4;
  background-image:
    linear-gradient(color-mix(in srgb, var(--brand) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 5%, transparent) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 0%, #000 10%, transparent 75%);
}

[data-theme-package="noor"] .noor-rail{
  height:3px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--gold) 55%, transparent) 18%,
      var(--gold) 50%,
      color-mix(in srgb, var(--gold) 55%, transparent) 82%,
      transparent 100%);
  position:relative;
}
[data-theme-package="noor"] .noor-rail::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 0 3px var(--paper);
}

/* Header */
[data-theme-package="noor"] .noor-header,
[data-theme-package="noor"] header.noor-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:0;
  box-shadow:0 8px 24px color-mix(in srgb, var(--ink) 4%, transparent);
}
[data-theme-package="noor"] .noor-header-inner,
[data-theme-package="noor"] .container.noor-header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;position:relative;z-index:3;min-height:76px
}
[data-theme-package="noor"] .noor-header .theme-wrap,
[data-theme-package="noor"] .noor-header .theme-panel{z-index:5}

[data-theme-package="noor"] .noor-brand .logo{
  border-radius:14px !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent),
             0 8px 18px color-mix(in srgb, var(--brand) 18%, transparent);
}
[data-theme-package="noor"] .noor-brand span{
  font-weight:700;font-size:1.35rem;letter-spacing:.01em
}

[data-theme-package="noor"] .noor-nav a{
  border-radius:8px !important;
  padding:8px 12px;
  font-weight:700;
  color:var(--muted);
}
[data-theme-package="noor"] .noor-nav a.active,
[data-theme-package="noor"] .noor-nav a:hover{
  background:color-mix(in srgb, var(--brand) 8%, var(--paper));
  color:var(--brand);
}
[data-theme-package="noor"] .noor-nav a.active{
  box-shadow:inset 0 -2px 0 var(--gold);
}

[data-theme-package="noor"] .icon-btn{
  border-radius:10px !important;
  border:1px solid color-mix(in srgb, var(--gold) 30%, var(--line)) !important;
  background:var(--paper);
}
[data-theme-package="noor"] .btn,
[data-theme-package="noor"] .btn-brand,
[data-theme-package="noor"] .btn-line,
[data-theme-package="noor"] .btn-ask{
  border-radius:10px !important;
  font-weight:700;
  min-height:44px;
  border:0 !important;
}
[data-theme-package="noor"] .btn-line{
  border:1px solid var(--btn-line-border) !important;
  box-shadow:none;
}
[data-theme-package="noor"] .btn-brand,
[data-theme-package="noor"] .btn-ask{
  box-shadow:var(--btn-brand-shadow);
}
[data-theme-package="noor"] .btn:hover,
[data-theme-package="noor"] .btn-ask:hover{
  transform:translateY(-1px) !important;
}
[data-theme-package="noor"] .go{
  border-radius:10px !important;
  border:0 !important;
  width:44px;height:44px;
  box-shadow:0 8px 18px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Hero — mihrab */
[data-theme-package="noor"] .hero{padding:28px 0 12px;position:relative;z-index:1}
[data-theme-package="noor"] .hero-stage{
  border:0;background:transparent;box-shadow:none;padding:0;gap:32px;
}
[data-theme-package="noor"] .hero-copy{
  position:relative;
  background:var(--paper);
  border-radius:20px 20px 14px 14px;
  padding:30px 28px 26px;
  box-shadow:var(--shadow);
  border:1px solid color-mix(in srgb, var(--brand) 12%, var(--line));
}
[data-theme-package="noor"] .hero-copy::before{
  content:"";position:absolute;top:0;right:18%;left:18%;height:4px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:0 0 4px 4px;
}
[data-theme-package="noor"] .hero-copy::after{
  content:"";position:absolute;top:10px;left:50%;width:28px;height:14px;
  transform:translateX(-50%);
  border:1.5px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-bottom:0;
  border-radius:40px 40px 0 0;
  opacity:.7;
}
[data-theme-package="noor"] .hero h1{
  font-size:clamp(2rem,4.8vw,3.3rem);
  line-height:1.28;
  font-weight:700;
}
[data-theme-package="noor"] .kicker,
[data-theme-package="noor"] .eyebrow{
  border-radius:6px;
  background:color-mix(in srgb, var(--brand) 8%, var(--paper));
  border:1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  padding:5px 11px;
  font-weight:600;
  color:var(--brand);
  letter-spacing:.02em;
}
[data-theme-package="noor"] .kicker:before,
[data-theme-package="noor"] .eyebrow:before{
  width:7px;height:7px;border-radius:1px;transform:rotate(45deg);
  background:var(--gold);
}
[data-theme-package="noor"] .hero-facts{
  border-top:1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  gap:8px;padding-top:14px
}
[data-theme-package="noor"] .hero-facts li{
  border:1px solid color-mix(in srgb, var(--brand) 12%, var(--line)) !important;
  border-radius:8px !important;
  background:color-mix(in srgb, var(--soft) 70%, var(--paper));
  padding:8px 12px !important;
  margin:0 !important;
  font-weight:600;
}
[data-theme-package="noor"] .frame{
  border-radius:16px !important;
  border:2px solid color-mix(in srgb, var(--gold) 40%, var(--paper)) !important;
  box-shadow:var(--shadow);
  transform:none !important;
}
[data-theme-package="noor"] .hero-wall{
  border-radius:24px 24px 120px 120px / 24px 24px 48px 48px;
  overflow:visible;
}
[data-theme-package="noor"] .f1{transform:translateY(-4px) !important}
[data-theme-package="noor"] .f2{transform:translateY(6px) !important}
[data-theme-package="noor"] .f3{transform:translateY(-2px) !important}

/* Sections */
[data-theme-package="noor"] .section{padding:48px 0;position:relative;z-index:1}
[data-theme-package="noor"] .section.alt{
  background:color-mix(in srgb, var(--soft) 50%, transparent);
  border-block:1px solid color-mix(in srgb, var(--gold) 16%, transparent);
}
[data-theme-package="noor"] .head h2{font-weight:700;letter-spacing:.01em}
[data-theme-package="noor"] .service,
[data-theme-package="noor"] .post-card,
[data-theme-package="noor"] .post-featured,
[data-theme-package="noor"] .review-card,
[data-theme-package="noor"] .review-form-card,
[data-theme-package="noor"] .tile,
[data-theme-package="noor"] .shot,
[data-theme-package="noor"] .contact-box,
[data-theme-package="noor"] .client-card,
[data-theme-package="noor"] .client-chip,
[data-theme-package="noor"] .side-card,
[data-theme-package="noor"] .prose,
[data-theme-package="noor"] .cats,
[data-theme-package="noor"] .case-meta,
[data-theme-package="noor"] .case-hero-img,
[data-theme-package="noor"] .article-cover,
[data-theme-package="noor"] .audio-card,
[data-theme-package="noor"] .empty-note,
[data-theme-package="noor"] .error-card,
[data-theme-package="noor"] .dialog,
[data-theme-package="noor"] .pagination a,
[data-theme-package="noor"] .pagination span,
[data-theme-package="noor"] .feature-card{
  border-radius:14px !important;
  border:var(--surface-border) !important;
  box-shadow:var(--surface-shadow);
  background:var(--paper);
}
[data-theme-package="noor"] .exhibit-cell{border-radius:12px !important}
[data-theme-package="noor"] .page-hero h1,
[data-theme-package="noor"] .article-hero h1,
[data-theme-package="noor"] .case-head h1{
  font-family:"Amiri","IBM Plex Sans Arabic",serif;
  font-weight:700;
}
[data-theme-package="noor"] .work-cats a,
[data-theme-package="noor"] .cat,
[data-theme-package="noor"] .related a{
  border-radius:8px !important;
}
[data-theme-package="noor"] .work-cats a,
[data-theme-package="noor"] .cats{
  border:var(--surface-border) !important;
}
[data-theme-package="noor"] .review-avatar,
[data-theme-package="noor"] .client-fallback,
[data-theme-package="noor"] .client-mark,
[data-theme-package="noor"] .logo-plate{
  border-radius:12px !important;
}
[data-theme-package="noor"] .star-pick button,
[data-theme-package="noor"] .star-pick span{
  border-radius:8px !important;
}
[data-theme-package="noor"] .service{position:relative;overflow:hidden}
[data-theme-package="noor"] .service:before{
  content:"";position:absolute;inset:0 auto auto;width:100%;height:2px;
  background:linear-gradient(90deg, var(--brand), var(--gold), transparent);
}
[data-theme-package="noor"] .service:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:color-mix(in srgb, var(--gold) 40%, var(--line)) !important;
}
[data-theme-package="noor"] .service-icon{
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  background:color-mix(in srgb, var(--brand) 8%, var(--soft));
  color:var(--brand);
}
[data-theme-package="noor"] .feature-nav{border-radius:10px}
[data-theme-package="noor"] .contact-box{overflow:hidden}
[data-theme-package="noor"] .contact-form .btn-brand{width:100%}
[data-theme-package="noor"] input,
[data-theme-package="noor"] textarea,
[data-theme-package="noor"] select{
  border-radius:10px !important;
  border:1px solid color-mix(in srgb, var(--brand) 12%, var(--line)) !important;
}

/* Footer */
[data-theme-package="noor"] .noor-footer,
[data-theme-package="noor"] footer.noor-footer{
  position:relative;z-index:1;margin-top:24px;
  background:color-mix(in srgb, var(--brand) 7%, var(--soft));
  border-top:0;
  padding:0 0 24px;color:var(--ink)
}
[data-theme-package="noor"] .noor-rail-footer{margin-bottom:22px}
[data-theme-package="noor"] .noor-footer h4{
  font-family:"Amiri","IBM Plex Sans Arabic",serif;
  font-weight:700;
}
[data-theme-package="noor"] .noor-footer a{color:var(--brand);font-weight:700}
[data-theme-package="noor"] .theme-panel{
  border-radius:12px !important;
  border:1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  box-shadow:var(--shadow);
}
[data-theme-package="noor"] .nav-drawer{
  border-radius:16px 0 0 16px !important;
  border:1px solid color-mix(in srgb, var(--gold) 24%, var(--line)) !important;
  background:var(--paper);
}

@media (max-width:980px){
  [data-theme-package="noor"] .hero-copy{padding:22px 18px}
  [data-theme-package="noor"] .hero-copy::after{display:none}
  [data-theme-package="noor"] .section{padding:36px 0}
  [data-theme-package="noor"] .hero-wall{border-radius:18px}
}