/*
 * Fondation Althea – design system
 *
 * This stylesheet defines the colour palette, typography scale and
 * components used across the site. Variables make it easy to adjust
 * colours and spacing. Classes are kept small and composable so
 * maintainers can add new sections without duplicating lots of rules.
 *
 * The design respects WCAG 2.1/2.2 guidelines on contrast and
 * interactive focus visibility. Keep these values in mind when
 * customising colours.
 */

:root {
  /* Colour palette */
  --color-primary: #0f4c81; /* deep blue evoking trust and vision */
  --color-secondary: #009688; /* teal for health and calm */
  --color-accent: #ffc107; /* warm yellow for highlights */
  --color-bg: #ffffff; /* white background */
  --color-surface: #f9fafb; /* light gray backgrounds for cards */
  --color-text: #1f2937; /* dark gray for comfortable reading */
  --color-muted: #6b7280; /* muted text */

  /* Typography */
  --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --line-height: 1.6;
  --font-size-base: 16px;

  /* Sizing */
  --container-max-width: 1200px;
  --spacing-small: 0.5rem;
  --spacing: 1rem;
  --spacing-large: 2rem;
  --border-radius: 0.5rem;
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
  color: var(--color-secondary);
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Containers */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}

/* Grid utilities */
.grid {
  display: grid;
  gap: var(--spacing-large);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Header & navigation */
header {
  background-color: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 8px;
  z-index: 200;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.skip-link:focus {
  top: 0;
}

.nav {
  display: flex;
  justify-content: space-between;
  /* Align nav items to the top so that the menu aligns with the vertical language selector */
  align-items: flex-start;
  /* Force a left‑to‑right layout for the navigation bar so the logo remains on the left,
     even though the surrounding page is RTL. This mirrors the layout used in the
     French and English versions. */
  direction: ltr;
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  /*
   * Increase the logo height for better visibility. Using a larger height
   * ensures that the logo appears crisp and readable on high‑resolution
   * displays while still respecting the flexible width. The width is set
   * to auto so the SVG logo retains its aspect ratio.
   */
  height: 64px;
  width: auto;
  margin-right: var(--spacing);
}

.nav-toggle {
  background: none;
  border: none;
  display: none;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 24px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: transform 0.3s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: relative;
}
.nav-toggle span::before {
  top: -8px;
}
.nav-toggle span::after {
  top: 8px;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Keep Arabic text flowing right‑to‑left even though the nav container uses LTR. */
  direction: rtl;
}

.nav-menu li {
  margin-left: var(--spacing);
}

.nav-menu a {
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-small) var(--spacing);
  border-radius: var(--border-radius);
  transition: background 0.2s;
}

.nav-menu a:hover,
.nav-menu a:focus {
  background-color: var(--color-surface);
  outline: none;
}

/* Language switcher */
/* Language switcher: stack the language links vertically */
.lang-switch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: 0.875rem;
  margin-right: var(--spacing);
}
.lang-switch a {
  color: var(--color-muted);
  text-decoration: none;
}
.lang-switch a:hover,
.lang-switch a:focus {
  color: var(--color-primary);
  text-decoration: underline;
  outline: none;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
  .nav-menu {
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  .nav-menu.open {
    max-height: 400px;
  }
  .nav-menu li {
    margin: 0;
  }
  .nav-menu a {
    padding: var(--spacing);
    display: block;
  }
}

/* Hero section */
.hero {
  background-color: var(--color-surface);
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.hero-content {
  flex: 1 1 400px;
  padding-right: var(--spacing-large);
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-top: 0;
  color: var(--color-primary);
}

.hero p {
  font-size: 1.125rem;
  margin-bottom: var(--spacing-large);
  color: var(--color-muted);
}

.hero-buttons {
  display: flex;
  gap: var(--spacing);
  flex-wrap: wrap;
}

.hero img {
  flex: 1 1 300px;
  max-width: 450px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: var(--font-weight-bold);
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
  font-size: 1rem;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-secondary);
  outline: none;
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-primary);
  outline: none;
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-ghost:hover,
.btn-ghost:focus {
  background-color: var(--color-primary);
  color: #fff;
  outline: none;
}

/* Sections */
section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section-title {
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--color-primary);
}

.section-subtitle {
  font-size: 1rem;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-muted);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.card-body {
  padding: var(--spacing);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-body h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}
.card-body p {
  flex: 1;
  margin-bottom: 1rem;
  color: var(--color-muted);
}
.card-body .btn {
  align-self: flex-start;
}

/* Impact stats */
.stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-large);
}
.stat {
  text-align: center;
}
.stat-number {
  font-size: 2.5rem;
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
}
.stat-label {
  font-size: 1rem;
  color: var(--color-muted);
}

/* Footer */
footer {
  background-color: var(--color-surface);
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: var(--color-muted);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-large);
  justify-content: space-between;
  align-items: flex-start;
}
.footer-column {
  flex: 1 1 200px;
}
.footer-column h4 {
  color: var(--color-primary);
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.footer-links ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.footer-links li {
  margin-bottom: 0.5rem;
}
.footer-links a {
  color: var(--color-muted);
}
.footer-links a:hover {
  color: var(--color-primary);
}

.social {
  display: flex;
  gap: var(--spacing);
  margin-top: var(--spacing);
}
.social a {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
.social a:hover {
  background-color: var(--color-secondary);
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Donation quick buttons in hero */
.donation-quick {
  display: flex;
  gap: var(--spacing);
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
  justify-content: flex-start;
}
.donation-quick a {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-accent);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.donation-quick a:hover,
.donation-quick a:focus {
  background-color: var(--color-secondary);
  color: #fff;
}

/* Newsletter form */
.newsletter-form {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-small);
  margin-top: 1rem;
}
.newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius);
  font-size: 1rem;
}
.newsletter-form button {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  border: none;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
.newsletter-form button:hover,
.newsletter-form button:focus {
  background-color: var(--color-secondary);
}

/* Forms */
form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
label {
  font-weight: var(--font-weight-bold);
}
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius);
  font-size: 1rem;
  width: 100%;
}
input:focus,
textarea:focus {
  outline: 3px solid var(--color-accent);
  border-color: var(--color-primary);
}
textarea {
  min-height: 120px;
  resize: vertical;
}
form .btn {
  align-self: flex-start;
}

/* Accessibility helper for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}