/*
Theme Name: MED+ Volunteering - The Hashemite Kingdom of Jordan
Theme URI: https://medvolunteering.org
Author: MED+ Volunteering Team
Author URI: https://medvolunteering.org
Description: Modern, accessible, bilingual (Arabic & English) WordPress theme for MED+ Volunteering (ميد+ للتطوع الطبي). Registered under the Ministry of Social Development since 1990. Providing comprehensive, integrated healthcare services across refugee camps and underserved communities in Jordan.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medvolunteering
Domain Path: /languages
Tags: medical, non-profit, rtl-language-support, translation-ready, custom-menu, featured-images, responsive-layout, grid-layout
*/

:root {
  /* Official MED+ Brand Palette */
  --map-red: #7A1E2C;          /* Official MED+ Burgundy Red */
  --map-red-dark: #5C1520;     /* Deep Burgundy Hover */
  --map-red-soft: #F9F1F2;     /* Soft Burgundy Tint */
  --map-orange: #7CA3D0;       /* Official MED+ Soft Blue Accent */
  --map-navy: #0D233E;         /* Official MED+ Deep Navy */
  --map-navy-light: #16375E;   /* Elevated Navy */
  --map-slate: #475569;        /* Neutral Slate */
  --map-green: #589D32;        /* Official MED+ Healthy Green */
  --map-blue-soft: #7CA3D0;    /* Official MED+ Soft Blue */
  --map-sand: #F5F7FA;         /* Soft Sand Background */
  --map-stone: #E6ECF2;        /* Architectural Stone */
  --map-paper: #FCFBF9;        /* Warm Paper Canvas */
  --map-border: #D6D6D6;       /* Official Border Gray */

  /* Backward Compatibility Aliases */
  --med-crimson: #c0192d;
  --med-crimson-dark: var(--map-red-dark);
  --med-crimson-light: #9B2438;
  --med-crimson-50: var(--map-red-soft);
  --med-crimson-100: #F3E0E3;

  --med-navy: #103c6d;
  --med-navy-dark: #0b2545;
  --med-navy-light: var(--map-navy-light);
  --med-navy-50: var(--map-sand);
  --med-navy-100: var(--map-stone);

  --med-sky: #0094d8;
  --med-sky-dark: #5F87B5;
  --med-sky-light: #A4C2E4;
  --med-sky-50: #F0F6FC;
  --med-sky-100: #E1ECF7;

  --med-primary: var(--map-red);
  --med-primary-dark: var(--map-red-dark);
  --med-primary-light: #9B2438;
  --med-primary-50: var(--map-red-soft);
  --med-primary-100: #F3E0E3;
  --med-primary-900: #3E0C15;

  --med-secondary: var(--map-navy);
  --med-secondary-dark: #071526;
  --med-secondary-light: var(--map-navy-light);
  --med-secondary-50: var(--map-sand);

  --med-accent: var(--map-blue-soft);
  --med-accent-light: #E1ECF7;
  --med-emerald: var(--map-green);
  --med-emerald-50: #EEF7EA;

  --med-slate-900: var(--map-navy);
  --med-slate-800: #142E4E;
  --med-slate-700: #293E59;
  --med-slate-600: var(--map-slate);
  --med-slate-500: #64748B;
  --med-slate-400: #94A3B8;
  --med-slate-200: var(--map-border);
  --med-slate-100: var(--map-stone);
  --med-slate-50: var(--map-sand);
  --med-white: #FFFFFF;

  /* Fonts */
  --med-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --med-font-arabic: 'Noto Kufi Arabic', 'Cairo', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  --med-font-serif: 'Instrument Serif', Georgia, serif;
  --med-font-mono: 'JetBrains Mono', monospace;

  /* Animation Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  background-color: var(--map-paper);
  color: var(--map-navy);
  font-family: var(--med-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

html[dir="rtl"] body {
  font-family: var(--med-font-arabic);
}

/* Accessibility skip link */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #7A1E2C;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 1rem;
  top: 1rem;
  line-height: normal;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  width: auto;
  z-index: 100000;
}
