/*
Theme Name: Noor Relief
Theme URI: https://example.com/noor-relief
Author: Your Organisation
Author URI: https://example.com
Description: An original, lightweight Islamic-charity base theme built for Elementor & Elementor Pro. Provides design tokens (colours, Poppins/Roboto typography, responsive breakpoints), Lucide icon support and full Theme Builder locations. Header, footer and all pages are designed visually in Elementor — this theme intentionally hardcodes nothing layout-related.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noor-relief
Tags: charity, nonprofit, elementor, full-site-editing, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   DESIGN TOKENS — extracted from the reference design
   (these are also registered as Elementor Global Colors/Fonts
   in inc/elementor-kit.php so you can edit them in the UI)
   ========================================================= */
:root{
  /* Brand */
  --nr-primary:        #0778d4; /* main blue */
  --nr-primary-dark:   #065ba8;
  --nr-primary-deep:   #1f316d;
  --nr-accent:         #f9b002; /* gold */
  --nr-accent-dark:    #e7ab00;
  --nr-teal:           #54aab3;

  /* Neutrals */
  --nr-text:           #364153;
  --nr-muted:          #6b7280;
  --nr-muted-2:        #7a7a7a;
  --nr-bg:             #ffffff;
  --nr-bg-soft:        #f8f9fa;
  --nr-bg-soft-2:      #f6f6f6;
  --nr-border:         #e9ecef;

  /* Status */
  --nr-danger:         #dc3545;
  --nr-success:        #198754;

  /* Type */
  --nr-font-display:   "Poppins", "Segoe UI", system-ui, sans-serif;
  --nr-font-body:      "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* Scale & layout */
  --nr-container:      1200px;
  --nr-radius:         12px;
  --nr-radius-sm:      8px;
  --nr-shadow:         0 8px 30px rgba(15,23,42,.08);
  --nr-shadow-lg:      0 18px 50px rgba(15,23,42,.14);
  --nr-gap:            24px;
}

/* =========================================================
   Minimal base reset — Elementor controls the rest.
   We only style the bare WordPress chrome (header/footer
   fallbacks, menus, screen-reader text), never page layout.
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--nr-font-body);
  color:var(--nr-text);
  background:var(--nr-bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--nr-font-display);color:var(--nr-primary-deep);line-height:1.2;margin:0 0 .5em}
a{color:var(--nr-primary);text-decoration:none}
a:hover{color:var(--nr-primary-dark)}
img{max-width:100%;height:auto;display:block}

/* Accessibility: visible keyboard focus + skip link */
:focus-visible{outline:3px solid var(--nr-accent);outline-offset:2px}
.nr-skip-link{position:absolute;left:-9999px;top:0;background:var(--nr-primary);color:#fff;padding:10px 16px;z-index:100000;border-radius:0 0 8px 0}
.nr-skip-link:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}

/* Fallback site header/footer (only used before you build them in Elementor) */
.nr-fallback-header{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--nr-container);margin:0 auto;padding:18px 20px}
.nr-fallback-header .site-title a{font-family:var(--nr-font-display);font-weight:700;font-size:1.4rem;color:var(--nr-primary-deep)}
.nr-fallback-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap}
.nr-fallback-nav a{color:var(--nr-text);font-weight:500}
.nr-fallback-footer{background:var(--nr-primary-deep);color:#cdd6ea;text-align:center;padding:28px 20px;font-size:.95rem}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Content container helper (available to Elementor HTML widgets / shortcodes) */
.nr-container{max-width:var(--nr-container);margin-inline:auto;padding-inline:20px}

/* Responsive breakpoints mirror the reference design */
@media (max-width:991px){ :root{--nr-gap:18px} }
@media (max-width:767px){ body{font-size:15px} .nr-fallback-nav ul{display:none} }