/*
Theme Name: MENA-SINO Living Network
Theme URI: https://staging.mena-sino.com/
Description: Staging-only child theme for the MENA-SINO award-level redesign. Design philosophy: The Living Network — editorial scientific authority, regional connection, purposeful vascular pulse motion, and warm accessible surfaces.
Author: MENA-SINO
Template: hello-elementor
Version: 1.0.0
Text Domain: mena-sino-child
*/

/*
 * The Living Network design foundation.
 * Keep these exact tokens in sync with Elementor globals and Phase 2 components.
 * The visual system uses a warm paper field, dark ink hierarchy, vascular teal
 * connection, and pulse coral only for meaningful action or urgency.
 */
:root {
  --ink: #0A1A22;
  --teal: #1E7A6C;
  --teal-light: #2E9986;
  --sand: #E8DCC8;
  --pulse: #E85C4A;
  --paper: #FBF8F2;
  --slate: #4C5B60;
  --border: rgba(10, 26, 34, 0.10);
  --radius: 18px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", Arial, sans-serif;
  --font-data: "IBM Plex Mono", "Courier New", monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.mena-display,
.elementor-heading-title {
  color: var(--ink);
  font-family: var(--font-display) !important;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mena-data,
.mena-stat,
.mena-stat-number {
  font-family: var(--font-data) !important;
  letter-spacing: 0.02em;
}

a {
  color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--teal-light);
}

:focus-visible {
  outline: 3px solid var(--pulse) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Keep the default Hello header usable until the Phase 3 navigation template is introduced. */
#site-header,
.site-header,
header.site-header {
  background: rgba(251, 248, 242, 0.94) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(140%);
}

#site-header .site-title a,
.site-header .site-title a,
.site-header .site-navigation a {
  color: var(--ink) !important;
}

#site-header .site-title a,
.site-header .site-title a {
  font-family: var(--font-body) !important;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.site-navigation a {
  position: relative;
  font-family: var(--font-body) !important;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  a,
  button,
  input,
  select,
  textarea {
    transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 160ms var(--ease-out);
  }

  button:active,
  .elementor-button:active {
    transform: scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}