/* =============================================================
   Automania Public Website — global.css
   ALL design tokens centralised here. No hardcoded hex outside :root.
   Designed & Developed by CANADA HITECH — https://canadahitech.com
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Droid+Arabic+Kufi:wght@400;700&display=swap');

:root {
  /* ---- Primary brand — Automania Red ---- */
  --color-primary:          #B91C1C;
  --color-primary-deep:     #991B1B;
  --color-primary-soft:     #FECACA;
  --color-primary-mist:     #FEF2F2;
  --color-primary-line:     #FCA5A5;

  /* ---- Interaction accent — Deep Red (hover / selected state) ---- */
  --color-accent:           #7F1518;
  --color-accent-deep:      #5E0F11;
  --color-accent-soft:      #9B1C1C;
  --color-accent-mist:      #FBEAEA;
  --color-accent-line:      #E3ABAB;

  /* Brand rule: Red = rest state. Deeper red = hover/selected state.
     No dark/black backgrounds anywhere — the footer is the only dark zone. */

  /* ---- RGB triplets — for rgba() in glass/overlay/shadow ---- */
  --color-primary-rgb:      185,28,28;
  --color-accent-rgb:       127,21,24;

  /* ---- Neutrals ---- */
  --color-text:             #111111;
  --color-text-muted:       #6B7280;
  --color-text-faint:       #9CA3AF;
  --color-text-inverse:     #FFFFFF;

  --color-bg:               #FFFFFF;
  --color-bg-alt:           #F9FAFB;
  --color-bg-soft:          #F3F4F6;
  --color-bg-tint:          #F0FBFF;
  --color-bg-product:       #FFFFFF;

  --color-border:           #B3B8C2;
  --color-border-soft:      #D1D5DB;
  --color-border-strong:    #6B7280;

  /* Silver / gear accent — decorative only */
  --color-silver:           #D1D5DB;

  /* ---- Footer — three deep dark-gray levels (only dark zone) ---- */
  --color-footer-bg:        #2A2D31;
  --color-footer-bg-deep:   #222427;
  --color-footer-bg-darkest:#1C1E20;
  --color-footer-fg:        #E7E3DA;
  --color-footer-muted:     #9AA1A8;
  --color-footer-border:    #3A3E44;

  /* ---- Semantic ---- */
  --color-success:          #16A34A;
  --color-success-bg:       #DCFCE7;
  --color-warning:          #D97706;
  --color-warning-bg:       #FEF3C7;
  --color-danger:           #DC2626;
  --color-danger-bg:        #FEE2E2;
  --color-info:             #2563EB;
  --color-info-bg:          #DBEAFE;
  --color-whatsapp:         #25D366;
  --color-overlay:          rgba(15,15,15,0.55);

  /* ---- Typography ---- */
  --font-primary:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic:   'Cairo', 'Noto Sans Arabic', Arial, sans-serif;
  --font-kufi:     'Droid Arabic Kufi', 'Cairo', 'Noto Sans Arabic', sans-serif;

  --fw-light:     300;  --fw-regular: 400;  --fw-medium:    500;
  --fw-semibold:  600;  --fw-bold:    700;  --fw-extrabold: 800;

  --fs-tiny:  0.625rem;   /* 10px — CANADA HITECH credit, fine print */
  --fs-xs:    0.625rem;   /* 10px */
  --fs-sm:    0.75rem;    /* 12px — badges, labels */
  --fs-base:  1rem;       /* 16px — body */
  --fs-md:    1.125rem;   /* 18px — lead text */
  --fs-lg:    1.25rem;    /* 20px — card titles */
  --fs-xl:    1.5rem;     /* 24px — section headings */
  --fs-2xl:   2rem;       /* 32px — page titles */
  --fs-3xl:   2.5rem;     /* 40px — hero headline */
  --fs-4xl:   3rem;       /* 48px — hero large */

  --ls-tight: -0.02em;  --ls-snug:  -0.01em;  --ls-normal: 0;
  --ls-wide:   0.04em;  --ls-wider:  0.08em;  --ls-widest: 0.2em;

  --lh-tight: 1.2;  --lh-snug: 1.35;
  --lh-base:  1.6;  --lh-loose: 1.8;

  /* ---- Spacing ---- */
  --space-2xs: 2px;   --space-xs: 4px;    --space-sm: 8px;
  --space-md:  16px;  --space-lg: 24px;   --space-xl: 32px;
  --space-2xl: 48px;  --space-3xl: 64px;  --space-4xl: 96px;

  /* ---- Radius ---- */
  --radius-xs: 2px;   --radius-sm: 4px;   --radius-md: 8px;
  --radius-lg: 12px;  --radius-xl: 18px;  --radius-2xl: 24px;
  --radius-pill: 999px;  --radius-circle: 50%;

  /* ---- Shadows ---- */
  --shadow-xs:      0 1px 3px rgba(20,20,20,0.08);
  --shadow-sm:      0 2px 10px rgba(20,20,20,0.08);
  --shadow-md:      0 8px 28px rgba(20,20,20,0.10);
  --shadow-lg:      0 16px 40px rgba(20,20,20,0.08);
  --shadow-xl:      0 24px 60px rgba(20,20,20,0.12);
  --shadow-primary: 0 12px 28px rgba(185,28,28,0.25);
  --shadow-accent:  0 12px 28px rgba(127,21,24,0.22);
  --shadow-focus:   0 0 0 3px rgba(185,28,28,0.30);
  --shadow-header:  0 4px 24px rgba(0,0,0,0.10);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-luxe: 500ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Layout ---- */
  --content-width:         1440px;
  --content-width-narrow:  1180px;
  --header-height:         94px;
  --header-height-mobile:  68px;
  --hero-height:           700px;
  --hero-height-mobile:    480px;

  /* ---- Item / ad image policy ---- */
  --ad-image-fit:   cover;
  --item-image-fit: cover;

  /* ---- Z-index stack ---- */
  --z-card:    10;
  --z-overlay: 100;
  --z-drawer:  200;
  --z-header:  300;
  --z-modal:   400;
  --z-toast:   500;
}

/* =============================================================
   MODERN RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

a { color: inherit; text-decoration: none; }

/* margin:0 here (not just in the `*` reset) so it overrides Bootstrap
   Reboot's `ul,ol { margin-bottom: 1rem }` — equal specificity, later source. */
ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

/* =============================================================
   LAYOUT HELPERS
   ============================================================= */
.site-container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.site-container--narrow { max-width: var(--content-width-narrow); }

.section { padding-block: clamp(40px, 6vw, 80px); }
/* On inner pages a .section follows the breadcrumb — drop its big top padding
   so the breadcrumb, page heading and content sit closer together. */
.breadcrumb-nav + .section { padding-block-start: var(--space-lg); }
/* Account pages (My Ads, My Subscription, Profile, Favorites, Notifications)
   carried too much empty space before the footer — trim the bottom padding. */
.section:has(.account-head) { padding-block-end: var(--space-2xl); }
.section--alt  { background: var(--color-bg-alt); }
.section--soft { background: var(--color-bg-soft); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}
.section-head__titles { display: flex; flex-direction: column; gap: var(--space-xs); }
.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--fw-extrabold);
}
.section-title .accent { color: var(--color-primary); }
.section-subtitle {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}
.section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  transition: gap var(--transition-fast), color var(--transition-fast);
}
.section-link:hover,
.section-link:focus-visible {
  color: var(--color-accent);
  gap: var(--space-sm);
}

/* Centred section header variant */
.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Centre the eyebrow + title within centred headers (it is inline-flex and
   would otherwise hug the inline-start edge). */
.section-head--center .section-head__titles { align-items: center; }
.section-head--center .section-subtitle { max-width: 560px; }

/* Eyebrow micro-label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* =============================================================
   ACCESSIBILITY
   ============================================================= */
.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: var(--space-md);
  z-index: var(--z-toast);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-md); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Feature flag — hides app-absent features (do not delete; re-enable by
   removing the .is-feature-off class from the element). */
.is-feature-off { display: none !important; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* =============================================================
   GEAR WATERMARK (decorative — about / hero backdrops)
   ============================================================= */
.gear-watermark {
  position: absolute;
  color: var(--color-silver);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}