/**
 * Informatique Education Design System
 * Primary: Dark Blue | Secondary: Green | Accent: Bright Blue
 */

:root {
  /* Brand colors */
  --ie-primary: #063069;
  --ie-primary-deep: #072049;
  --ie-action-blue: #0c52ae;
  --ie-bright-blue: #2e87cc;
  --ie-green: #098d44;
  --ie-green-dark: #0b6f38;

  /* Text and surfaces */
  --ie-text-primary: #10213e;
  --ie-text-secondary: #5f6b7a;
  --ie-border: #dce5ee;
  --ie-background: #f6f9fc;
  --ie-white: #ffffff;

  /* Typography */
  --ie-font-en: "Poppins", Arial, sans-serif;
  --ie-font-ar: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;

  /* Shape and motion */
  --ie-radius-sm: 8px;
  --ie-radius-button: 10px;
  --ie-radius-card: 16px;
  --ie-shadow-card: 0 8px 24px rgba(7, 32, 73, 0.08);
  --ie-transition: 0.3s ease;

  /* Map the brand system to Gratech's existing variables */
  --kumbh: var(--ie-font-en);
  --color1: var(--ie-primary);
  --color2: var(--ie-green);
  --primary-color: var(--ie-primary);
  --theme-color: var(--ie-primary);
  --ot-primary-color: var(--ie-primary);
  --ot-secondary-color: var(--ie-primary-deep);
  --primary10: rgba(6, 48, 105, 0.1);
  --gradient-bg: linear-gradient(90deg, var(--ie-primary) 0%, var(--ie-action-blue) 55%, var(--ie-green) 100%);
  --main-bg: var(--ie-white);
  --sub-bg: var(--ie-background);
  --heading-color: var(--ie-text-primary);
  --title-color: var(--ie-text-primary);
  --paragraph: var(--ie-text-secondary);
  --body-color: var(--ie-text-secondary);
  --span: var(--ie-text-secondary);
  --border: var(--ie-border);
  --shadow: var(--ie-shadow-card);
}

html[lang^="ar"],
html[dir="rtl"],
body.rtl {
  --kumbh: var(--ie-font-ar);
}

/* Force the Arabic brand font on text widgets while preserving icon fonts. */
html[lang^="ar"] body,
html[dir="rtl"] body,
body.rtl,
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[lang^="ar"] p,
html[dir="rtl"] p,
html[lang^="ar"] .elementor-heading-title,
html[dir="rtl"] .elementor-heading-title,
html[lang^="ar"] .elementor-widget-text-editor,
html[dir="rtl"] .elementor-widget-text-editor,
html[lang^="ar"] .elementor-button,
html[dir="rtl"] .elementor-button,
html[lang^="ar"] .main-menu a,
html[dir="rtl"] .main-menu a,
html[lang^="ar"] input,
html[lang^="ar"] textarea,
html[lang^="ar"] select,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  font-family: var(--ie-font-ar) !important;
}

/* Elementor's default global tokens */
body {
  --e-global-color-primary: var(--ie-primary);
  --e-global-color-secondary: var(--ie-green);
  --e-global-color-text: var(--ie-text-secondary);
  --e-global-color-accent: var(--ie-bright-blue);
}

body {
  font-family: var(--kumbh);
  color: var(--ie-text-secondary);
  background: var(--ie-white);
  font-size: 16px;
  line-height: 1.75;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
textarea,
select {
  font-family: var(--kumbh);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ie-text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.375rem, 4vw, 3.5rem); line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1.2; font-weight: 700; }
h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.3; font-weight: 600; }
h4 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; }
h5 { font-size: 1rem; line-height: 1.5; font-weight: 600; }
h6 { font-size: 0.875rem; line-height: 1.5; font-weight: 600; }

p { font-size: 1rem; line-height: 1.75; }
a { color: var(--ie-action-blue); }
a:hover { color: var(--ie-green); }
::selection { color: var(--ie-white); background: var(--ie-primary); }

/* Gratech section headings */
.section-header h5 {
  color: var(--ie-green);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.section-header h2 {
  color: var(--ie-text-primary);
  text-transform: none;
}

/* Header and navigation */
.header-area::after {
  background: linear-gradient(270deg, var(--ie-primary) 6.32%, var(--ie-primary-deep) 216.42%);
}

.header__main .main-menu ul li > a {
  color: var(--ie-text-primary);
  font-weight: 600;
}

.header__main .main-menu ul li:hover > a,
.header__main .main-menu ul li.current-menu-item > a,
.header__main .main-menu ul li.current-menu-ancestor > a {
  color: var(--ie-green);
}

.header__main .main-menu ul li .sub-menu {
  border-color: var(--ie-border);
  border-radius: 0 0 var(--ie-radius-card) var(--ie-radius-card);
  box-shadow: var(--ie-shadow-card);
}

/* Primary buttons */
.btn-one,
.elementor-button,
.wp-block-button__link,
input[type="submit"] {
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--ie-radius-button);
  font-weight: 600;
  line-height: 1.2;
  transition: all var(--ie-transition);
}

.btn-one {
  --gradient-bg: linear-gradient(90deg, var(--ie-primary) 0%, var(--ie-action-blue) 100%);
}

.btn-one::before,
.btn-one::after {
  background: var(--ie-green-dark);
}

.elementor-button,
.wp-block-button__link,
input[type="submit"] {
  color: var(--ie-white);
  background: var(--ie-primary);
  border: 1px solid var(--ie-primary);
}

.elementor-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
  color: var(--ie-white);
  background: var(--ie-action-blue);
  border-color: var(--ie-action-blue);
  transform: translateY(-2px);
}

/* Reusable utility classes for Elementor containers/widgets */
.ie-section {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.ie-section-light { background: var(--ie-background); }
.ie-bg-primary { background: var(--ie-primary); color: var(--ie-white); }
.ie-bg-gradient { background: var(--gradient-bg); color: var(--ie-white); }
.ie-text-green { color: var(--ie-green) !important; }
.ie-text-blue { color: var(--ie-bright-blue) !important; }

.ie-card {
  height: 100%;
  padding: 24px;
  background: var(--ie-white);
  border: 1px solid var(--ie-border);
  border-radius: var(--ie-radius-card);
  box-shadow: var(--ie-shadow-card);
  transition: transform var(--ie-transition), box-shadow var(--ie-transition), border-color var(--ie-transition);
}

.ie-card:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 48, 105, 0.22);
  box-shadow: 0 14px 34px rgba(7, 32, 73, 0.12);
}

.ie-icon-box .elementor-icon,
.ie-icon-box .icon {
  color: var(--ie-primary);
  background: rgba(6, 48, 105, 0.08);
  border-radius: 50%;
}

.ie-title-accent::after,
.ie-title-accent .elementor-heading-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ie-action-blue) 0 50%, var(--ie-green) 50% 100%);
}

.ie-button-secondary .elementor-button {
  color: var(--ie-primary);
  background: transparent;
  border-color: var(--ie-primary);
}

.ie-button-secondary .elementor-button:hover {
  color: var(--ie-white);
  background: var(--ie-primary);
}

/* Forms */
input:not([type="submit"]),
textarea,
select {
  min-height: 48px;
  color: var(--ie-text-primary);
  background: var(--ie-white);
  border: 1px solid var(--ie-border);
  border-radius: var(--ie-radius-button);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ie-action-blue);
  box-shadow: 0 0 0 3px rgba(12, 82, 174, 0.12);
}

/* Footer */
.footer-area,
.footer__copyright {
  background-color: var(--ie-primary-deep);
}

.footer-area a:hover,
.footer__copyright a:hover {
  color: var(--ie-green);
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .ie-card { padding: 20px; }
  .btn-one,
  .elementor-button,
  .wp-block-button__link,
  input[type="submit"] { min-height: 44px; padding: 10px 18px; }
}