/*
Theme Name: Hello Elementor Child
Theme URI: https://azeidk.com/
Description: Child theme for the Azeidk website built on Hello Elementor.
Author: Azeidk
Template: hello-elementor
Version: 0.1.0
Text Domain: hello-elementor-child
*/

/* =========================================================
   AZEIDK LOCAL FONTS
   ========================================================= */

@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/NotoKufiArabic-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/NotoKufiArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/NotoKufiArabic-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/NotoKufiArabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/NotoKufiArabic-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/Manrope-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/Manrope-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/Manrope-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("https://azeidkgroup.com/wp-content/themes/hello-elementor-child/assets/fonts/Manrope-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   AZEIDK GLOBAL DESIGN TOKENS
   ========================================================= */

:root {
  /* Brand Colors */
  --az-green: #026A33;
  --az-green-dark: #01572A;
  --az-green-deep: #07120D;
  --az-green-soft: rgba(2, 106, 51, 0.10);
  --az-green-soft-2: rgba(2, 106, 51, 0.16);
  --az-green-border: rgba(2, 106, 51, 0.22);

  --az-orange: #E28334;
  --az-orange-dark: #CF762A;
  --az-orange-soft: rgba(226, 131, 52, 0.12);
  --az-orange-soft-2: rgba(226, 131, 52, 0.18);
  --az-orange-border: rgba(226, 131, 52, 0.26);

  --az-red: #E20E14;
  --az-red-dark: #B90C11;
  --az-red-soft: rgba(226, 14, 20, 0.08);
  --az-red-border: rgba(226, 14, 20, 0.18);

  /* Neutral Colors */
  --az-black: #000000;
  --az-dark: #050806;
  --az-dark-2: #07120D;
  --az-charcoal: #111111;
  --az-white: #FFFFFF;

  --az-off-white: #F7F8F6;
  --az-cream: #F7F5F0;
  --az-light-gray: #EEF1EF;
  --az-border: rgba(17, 24, 39, 0.12);
  --az-border-strong: rgba(17, 24, 39, 0.18);

  /* Text Colors */
  --az-text: #111827;
  --az-text-soft: #4B5563;
  --az-text-muted: #6B7280;
  --az-heading: #07120D;

  /* Dark Section Colors */
  --az-dark-text: #F4F0E7;
  --az-dark-muted: rgba(244, 240, 231, 0.66);
  --az-dark-muted-soft: rgba(244, 240, 231, 0.42);
  --az-dark-border: rgba(244, 240, 231, 0.14);
  --az-dark-border-strong: rgba(244, 240, 231, 0.22);

  /* Fonts */
  --az-font-ar: "Noto Kufi Arabic", Arial, sans-serif;
  --az-font-en: "Manrope", Arial, sans-serif;

  /* Layout */
  --az-container: 1320px;
  --az-section-padding: 90px;
  --az-section-padding-tablet: 64px;
  --az-section-padding-mobile: 44px;

  /* Buttons */
  --az-btn-height: 46px;
  --az-btn-padding: 0 24px;
  --az-btn-radius: 0px;
  --az-btn-font-size: 14px;
  --az-btn-font-weight: 700;

  /* Motion */
  --az-transition-fast: 0.18s ease;
  --az-transition: 0.22s ease;
  --az-transition-slow: 0.32s ease;

  /* Shadows */
  --az-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.08);
  --az-shadow-card: 0 20px 60px rgba(0, 0, 0, 0.12);
  --az-shadow-green: 0 12px 30px rgba(2, 106, 51, 0.18);
  --az-shadow-orange: 0 12px 30px rgba(226, 131, 52, 0.18);

  /* Radius */
  --az-radius-none: 0px;
  --az-radius-sm: 6px;
  --az-radius-md: 12px;
  --az-radius-lg: 20px;
  --az-radius-pill: 999px;
}

/* =========================================================
   GLOBAL BASE
   ========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--az-font-ar);
  color: var(--az-text);
  background: var(--az-white);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

html[lang="en-US"] body,
body:lang(en) {
  font-family: var(--az-font-en);
}

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

a {
  color: var(--az-green);
  text-decoration: none;
  transition: color var(--az-transition), opacity var(--az-transition);
}

a:hover {
  color: var(--az-orange);
}

p {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--az-text-soft);
}

strong,
b {
  font-weight: 700;
}

/* =========================================================
   GLOBAL TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
  font-family: var(--az-font-ar);
  color: var(--az-heading);
  font-weight: 700;
  line-height: 1.35;
  margin-top: 0;
}

html[lang="en-US"] h1,
html[lang="en-US"] h2,
html[lang="en-US"] h3,
html[lang="en-US"] h4,
html[lang="en-US"] h5,
html[lang="en-US"] h6,
html[lang="en-US"] .elementor-heading-title {
  font-family: var(--az-font-en);
}

h1 {
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
}

h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
}

h3 {
  font-size: clamp(21px, 2vw, 28px);
}

h4 {
  font-size: 19px;
}

h5 {
  font-size: 17px;
}

h6 {
  font-size: 15px;
}

.az-en,
.az-number,
.az-phone,
.az-email,
[dir="ltr"] {
  font-family: var(--az-font-en) !important;
}

/* =========================================================
   GLOBAL CONTAINERS / SECTIONS
   ========================================================= */

.az-container {
  width: min(100%, var(--az-container));
  margin-inline: auto;
  padding-inline: 5vw;
}

.az-section {
  padding-block: var(--az-section-padding);
}

.az-section-light {
  background: var(--az-cream);
}

.az-section-dark {
  background: var(--az-dark-2);
  color: var(--az-dark-text);
}

.az-section-dark h1,
.az-section-dark h2,
.az-section-dark h3,
.az-section-dark h4,
.az-section-dark h5,
.az-section-dark h6 {
  color: var(--az-white);
}

.az-section-dark p {
  color: var(--az-dark-muted);
}

@media (max-width: 1024px) {
  .az-section {
    padding-block: var(--az-section-padding-tablet);
  }
}

@media (max-width: 767px) {
  .az-section {
    padding-block: var(--az-section-padding-mobile);
  }
}

/* =========================================================
   GLOBAL BUTTONS
   زر واحد = Primary 
   زرارين = Primary + Outline
   البرتقالي = CTA مهم أو Hero
 
   ========================================================= */

.az-btn,
.elementor-button,
.elementor-button-link,
button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--az-btn-height);
  padding: var(--az-btn-padding);
  border-radius: var(--az-btn-radius);
  font-family: var(--az-font-ar);
  font-size: var(--az-btn-font-size);
  font-weight: var(--az-btn-font-weight);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--az-transition),
    color var(--az-transition),
    border-color var(--az-transition),
    box-shadow var(--az-transition),
    transform var(--az-transition),
    opacity var(--az-transition);
}

html[lang="en-US"] .az-btn,
html[lang="en-US"] .elementor-button,
html[lang="en-US"] .elementor-button-link,
html[lang="en-US"] button,
html[lang="en-US"] input[type="submit"],
html[lang="en-US"] input[type="button"] {
  font-family: var(--az-font-en);
}

.az-btn:hover,
.elementor-button:hover,
.elementor-button-link:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  transform: translateY(-1px);
}

/* Primary Green */
.az-btn-primary,
.elementor-button {
  background: var(--az-green);
  border-color: var(--az-green);
  color: var(--az-white);
  box-shadow: 0 10px 24px rgba(2, 106, 51, 0.15);
}

.az-btn-primary:hover,
.elementor-button:hover {
  background: var(--az-green-dark);
  border-color: var(--az-green-dark);
  color: var(--az-white);
  box-shadow: 0 14px 30px rgba(2, 106, 51, 0.20);
}

/* Accent Orange */
.az-btn-accent {
  background: var(--az-orange);
  border-color: var(--az-orange);
  color: var(--az-green-deep);
  box-shadow: 0 10px 24px rgba(226, 131, 52, 0.15);
}

.az-btn-accent:hover {
  background: var(--az-orange-dark);
  border-color: var(--az-orange-dark);
  color: var(--az-green-deep);
  box-shadow: 0 14px 30px rgba(226, 131, 52, 0.20);
}

/* Outline Green */
.az-btn-outline {
  background: transparent;
  border-color: var(--az-green-border);
  color: var(--az-green);
  box-shadow: none;
}

.az-btn-outline:hover {
  background: var(--az-green-soft);
  border-color: var(--az-green);
  color: var(--az-green-dark);
  box-shadow: none;
}

/* Outline Orange */
.az-btn-outline-accent {
  background: transparent;
  border-color: var(--az-orange-border);
  color: var(--az-orange);
  box-shadow: none;
}

.az-btn-outline-accent:hover {
  background: var(--az-orange-soft);
  border-color: var(--az-orange);
  color: var(--az-orange-dark);
  box-shadow: none;
}

/* Outline Light - for dark sections */
.az-btn-outline-light {
  background: transparent;
  border-color: var(--az-dark-border-strong);
  color: var(--az-white);
  box-shadow: none;
}

.az-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--az-orange);
  color: var(--az-white);
  box-shadow: none;
}

/* Ghost */
.az-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--az-green);
  padding-inline: 0;
  box-shadow: none;
}

.az-btn-ghost:hover {
  background: transparent;
  border-color: transparent;
  color: var(--az-orange);
  box-shadow: none;
  transform: translateX(-2px);
}

/* Dark */
.az-btn-dark {
  background: var(--az-green-deep);
  border-color: var(--az-green-deep);
  color: var(--az-white);
  box-shadow: 0 10px 24px rgba(7, 18, 13, 0.18);
}

.az-btn-dark:hover {
  background: var(--az-charcoal);
  border-color: var(--az-charcoal);
  color: var(--az-white);
  box-shadow: 0 14px 30px rgba(7, 18, 13, 0.24);
}

/* Danger - limited use only */
.az-btn-danger {
  background: var(--az-red);
  border-color: var(--az-red);
  color: var(--az-white);
  box-shadow: 0 10px 24px rgba(226, 14, 20, 0.13);
}

.az-btn-danger:hover {
  background: var(--az-red-dark);
  border-color: var(--az-red-dark);
  color: var(--az-white);
  box-shadow: 0 14px 30px rgba(226, 14, 20, 0.18);
}

/* Button sizes */
.az-btn-sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: 12.5px;
}

.az-btn-lg {
  min-height: 52px;
  padding: 0 30px;
  font-size: 15px;
}

/* Button groups */
.az-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* =========================================================
   GLOBAL FORMS
   ========================================================= */

input,
textarea,
select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--az-border);
  background: var(--az-white);
  color: var(--az-text);
  padding: 0 14px;
  border-radius: var(--az-radius-none);
  font-size: 14px;
  font-weight: 400;
  outline: none;
  transition:
    border-color var(--az-transition),
    box-shadow var(--az-transition),
    background-color var(--az-transition);
}

textarea {
  min-height: 130px;
  padding-block: 14px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--az-green);
  box-shadow: 0 0 0 3px var(--az-green-soft);
}

input::placeholder,
textarea::placeholder {
  color: var(--az-text-muted);
  opacity: 0.75;
}

label {
  color: var(--az-heading);
  font-weight: 600;
  font-size: 14px;
}

/* Elementor Forms */
.elementor-field-group .elementor-field {
  border-radius: var(--az-radius-none);
}

.elementor-field-group .elementor-field:focus {
  border-color: var(--az-green);
  box-shadow: 0 0 0 3px var(--az-green-soft);
}

.elementor-field-label {
  font-family: var(--az-font-ar);
  color: var(--az-heading);
  font-weight: 600;
}

html[lang="en-US"] .elementor-field-label {
  font-family: var(--az-font-en);
}

/* =========================================================
   GLOBAL CARDS
   ========================================================= */

.az-card {
  background: var(--az-white);
  border: 1px solid var(--az-border);
  box-shadow: var(--az-shadow-soft);
  transition:
    transform var(--az-transition),
    box-shadow var(--az-transition),
    border-color var(--az-transition);
}

.az-card:hover {
  transform: translateY(-4px);
  border-color: var(--az-green-border);
  box-shadow: var(--az-shadow-card);
}

.az-card-dark {
  background: var(--az-dark-2);
  border: 1px solid var(--az-dark-border);
  color: var(--az-dark-text);
}

.az-card-dark p {
  color: var(--az-dark-muted);
}

/* =========================================================
   GLOBAL LABELS / BADGES
   ========================================================= */

.az-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  background: var(--az-green-soft);
  color: var(--az-green);
  border: 1px solid var(--az-green-border);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.az-badge-accent {
  background: var(--az-orange-soft);
  color: var(--az-orange-dark);
  border-color: var(--az-orange-border);
}

.az-badge-danger {
  background: var(--az-red-soft);
  color: var(--az-red);
  border-color: var(--az-red-border);
}

/* =========================================================
   GLOBAL LINKS
   ========================================================= */

.az-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--az-green);
  font-weight: 700;
  transition: color var(--az-transition), transform var(--az-transition);
}

.az-link:hover {
  color: var(--az-orange);
  transform: translateX(-2px);
}

html[dir="ltr"] .az-link:hover {
  transform: translateX(2px);
}

/* =========================================================
   ELEMENTOR GLOBAL OVERRIDES
   ========================================================= */

.elementor-widget-text-editor {
  font-family: var(--az-font-ar);
  color: var(--az-text-soft);
}

html[lang="en-US"] .elementor-widget-text-editor {
  font-family: var(--az-font-en);
}

.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.elementor-icon {
  color: var(--az-green);
}

.elementor-icon svg {
  fill: currentColor;
}

.elementor-divider-separator {
  border-color: var(--az-border);
}

/* =========================================================
   DARK SECTION HELPERS
   ========================================================= */

.az-dark {
  background: var(--az-dark-2);
  color: var(--az-dark-text);
}

.az-dark h1,
.az-dark h2,
.az-dark h3,
.az-dark h4,
.az-dark h5,
.az-dark h6,
.az-dark .elementor-heading-title {
  color: var(--az-white);
}

.az-dark p,
.az-dark .elementor-widget-text-editor {
  color: var(--az-dark-muted);
}

.az-dark a {
  color: var(--az-dark-text);
}

.az-dark a:hover {
  color: var(--az-orange);
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */

.az-text-green {
  color: var(--az-green) !important;
}

.az-text-orange {
  color: var(--az-orange) !important;
}

.az-text-red {
  color: var(--az-red) !important;
}

.az-text-dark {
  color: var(--az-green-deep) !important;
}

.az-text-muted {
  color: var(--az-text-muted) !important;
}

.az-bg-green {
  background: var(--az-green) !important;
}

.az-bg-orange {
  background: var(--az-orange) !important;
}

.az-bg-dark {
  background: var(--az-dark-2) !important;
}

.az-bg-light {
  background: var(--az-cream) !important;
}

.az-border {
  border: 1px solid var(--az-border);
}

.az-shadow-soft {
  box-shadow: var(--az-shadow-soft);
}

.az-shadow-card {
  box-shadow: var(--az-shadow-card);
}

.az-radius-none {
  border-radius: var(--az-radius-none);
}

.az-radius-sm {
  border-radius: var(--az-radius-sm);
}

.az-radius-md {
  border-radius: var(--az-radius-md);
}

.az-radius-lg {
  border-radius: var(--az-radius-lg);
}

/* =========================================================
   SELECTION
   ========================================================= */

::selection {
  background: var(--az-green);
  color: var(--az-white);
}

/* =========================================================
   RESPONSIVE GLOBALS
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --az-btn-height: 44px;
    --az-btn-padding: 0 18px;
    --az-btn-font-size: 13px;
  }

  .az-btn-group {
    gap: 10px;
  }

  .az-btn-group .az-btn {
    width: 100%;
  }
}