/* 
Theme Name: Noor Hospital
Theme URI: https://melikatfi.ir
Description: Standalone Elementor-oriented theme for Noor Hospital. No parent theme required. Elementor recommended for custom widgets; optional “Noor Doctors” plugin for doctor/service archives.
Author: Melika Tofighi
Author URI: https://melikatfi.ir
Version: 1.5.1
Text Domain: noor-hospital
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/*
 * Noor design tokens
 * Update these values later in one place to re-theme the site.
 */
:root {
  --noor-color-primary: #001b44;
  --noor-color-primary-container: #002f6c;
  --noor-color-secondary: #00658b;
  --noor-color-secondary-container: #53c4fd;
  --noor-color-tertiary: #00220f;
  --noor-color-tertiary-container: #003a1e;
  --noor-color-background: #f6faff;
  --noor-color-surface: #f6faff;
  --noor-color-surface-bright: #f6faff;
  --noor-color-surface-dim: #cfdce7;
  --noor-color-surface-container-lowest: #ffffff;
  --noor-color-surface-container-low: #eaf5ff;
  --noor-color-surface-container: #e3f0fb;
  --noor-color-surface-container-high: #ddeaf5;
  --noor-color-surface-container-highest: #d7e4ef;
  --noor-color-surface-variant: #d7e4ef;
  --noor-color-outline: #747781;
  --noor-color-outline-variant: #c4c6d2;
  --noor-color-on-surface: #111d25;
  --noor-color-on-surface-variant: #434750;
  --noor-color-on-primary: #ffffff;
  --noor-color-on-secondary: #ffffff;
  --noor-color-on-tertiary: #ffffff;
  --noor-color-error: #ba1a1a;
  --noor-color-error-container: #ffdad6;
  --noor-color-on-error: #ffffff;
  --noor-color-on-error-container: #93000a;

  /*
   * Elementor-compatible aliases.
   * Widgets can consume these directly even if Global Colors are not configured.
   */
  --e-global-color-primary: var(--noor-color-primary);
  --e-global-color-secondary: var(--noor-color-secondary);
  --e-global-color-text: var(--noor-color-on-surface);
  /* Cyan-blue accent — not pink (many kits ship a magenta “Accent”). */
  --e-global-color-accent: var(--noor-color-secondary-container);

  /*
   * Shared layout: blog + doctor directory + Elementor boxed width.
   */
  --noor-content-max-width: 1140px;
  --noor-sidebar-width: 18rem;
}

/*
 * Reserve space for the vertical scrollbar so toggling overflow (e.g. mobile menu)
 * does not shift the layout sideways.
 */
html {
  scrollbar-gutter: stable;
}

/*
 * Elementor injects per-kit variables on body.elementor-kit-{id} — often overrides
 * :root accent with a pink/magenta hex from Site Settings → Global Colors.
 * Pin accent to the Noor token so Button widgets and generic button styles stay blue.
 */
body[class*="elementor-kit"] {
  --e-global-color-accent: var(--noor-color-secondary-container) !important;
}

/*
 * Elementor preview: widget selection outline uses --e-p-border-widget (#F3BAFD by default).
 * Scope to our FAQ accordion only so the pink “focus” ring becomes Noor navy.
 */
body.elementor-editor-active .elementor-widget-noor_accordion_faq.elementor-widget {
  --e-p-border-widget: var(--noor-color-primary, #001b44);
  --e-p-border-widget-hover: var(--noor-color-primary-container, #002f6c);
  --e-p-border-widget-invert: #ffffff;
}

/* Video playlist (نور): replace Elementor preview magenta widget outline with Noor navy */
body.elementor-editor-active .elementor-widget-noor_video_playlist.elementor-widget {
  --e-p-border-widget: var(--noor-color-primary, #001b44);
  --e-p-border-widget-hover: var(--noor-color-primary-container, #002f6c);
  --e-p-border-widget-invert: #ffffff;
}

/*
 * Scope site chrome to the real front end / preview iframe only. The Elementor
 * editor shell (same document as the dark panel) also loads admin styles; an
 * unscoped body { color } would make panel labels inherit near-black text.
 */
body:not(.elementor-editor-active) {
  background-color: var(--noor-color-background);
  color: var(--noor-color-on-surface);
  /* Elementor Site Settings → Typography (falls back if kit not loaded yet). */
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-weight: var(--e-global-typography-text-font-weight, 400);
}

body:not(.elementor-editor-active) :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--e-global-typography-primary-font-family, inherit);
  font-weight: var(--e-global-typography-primary-font-weight, 500);
}

/*
 * Site-wide links: no underline in content areas (default theme baseline used underline there).
 * Color/weight still signal links; editor chrome is excluded.
 */
body:not(.elementor-editor-active) a,
body:not(.elementor-editor-active) a:hover,
body:not(.elementor-editor-active) a:focus,
body:not(.elementor-editor-active) a:focus-visible {
  text-decoration: none;
}

/*
 * Rank Math breadcrumbs (shortcode or template) — Elementor kits often set link/accent to pink.
 */
body:not(.elementor-editor-active) .rank-math-breadcrumb a {
  color: var(--noor-color-secondary) !important;
}

body:not(.elementor-editor-active) .rank-math-breadcrumb a:hover,
body:not(.elementor-editor-active) .rank-math-breadcrumb a:focus-visible {
  color: var(--noor-color-primary) !important;
}