/*
Theme Name:        Ziyad Words Child
Theme URI:         https://ziyadwords.com
Description:       Astra Child Theme for Ziyad Words — Conversion Copywriter. Custom design with black background, gold accent, Playfair Display headings, and Inter body font.
Author:            Ziyad
Author URI:        https://ziyadwords.com
Template:          astra
Version:           1.0.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       ziyad-words-child
Tags:              conversion, copywriter, dark, gold
*/

/* ============================================================
   DESIGN TOKENS / CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Core Palette */
  --color-primary:        #000000;
  --color-accent:         #FFC107;
  --color-accent-hover:   #FFD54F;
  --color-accent-glow:    rgba(255, 193, 7, 0.35);
  --color-text-light:     #FAFAFA;
  --color-text-dark:      #000000;
  --color-text-secondary: #A1A1AA;
  --color-surface-dark:   #0A0A0A;
  --color-surface-card:   #FFFFFF;
  --color-border-light:   #E4E4E7;
  --color-border-dark:    #27272A;

  /* Typography */
  --font-heading:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;

  /* Sizing */
  --font-size-base:   20px;
  --line-height-base: 1.7;
  --max-width-copy:   760px;
  --max-width-wide:   1200px;

  /* Spacing */
  --section-padding-y: 100px;
  --card-radius:        24px;
  --btn-radius:         50px;

  /* Shadows */
  --shadow-card:       0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 12px 40px rgba(255, 193, 7, 0.20);
  --shadow-btn:        0 0 0 0px rgba(255, 193, 7, 0);
  --shadow-btn-hover:  0 0 20px rgba(255, 193, 7, 0.55);

  /* Transitions */
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   BASE RESETS & GLOBAL STYLES
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-dark);
  background-color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1, .elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

h2, .elementor-widget-heading .elementor-heading-title.elementor-size-xl {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

h3, .elementor-widget-heading .elementor-heading-title.elementor-size-large {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

p {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-bottom: 1.25em;
}

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-accent-hover);
}

/* ============================================================
   BUTTONS — Global Elementor Button Overrides
   ============================================================ */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  border-radius: var(--btn-radius) !important;
  transition: all var(--transition-base);
}

/* Primary / Accent Button */
.elementor-button.elementor-button-primary,
.elementor-button[data-skin="classic"].elementor-button-primary {
  background-color: var(--color-accent);
  color: var(--color-text-dark);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-btn);
}

.elementor-button.elementor-button-primary:hover,
.elementor-button[data-skin="classic"].elementor-button-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-2px);
}

/* Ghost / Outline Button */
.elementor-button.elementor-button-ghost {
  background-color: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}

.elementor-button.elementor-button-ghost:hover {
  background-color: var(--color-accent);
  color: var(--color-text-dark);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-2px);
}

/* ============================================================
   CARDS — Global Card Styles
   ============================================================ */
.zw-card {
  background: var(--color-surface-card);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-card);
  padding: 40px;
  transition: all var(--transition-slow);
}

.zw-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

/* ============================================================
   SECTIONS — Dark & Light Variants
   ============================================================ */
.zw-section-dark {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.zw-section-dark h1,
.zw-section-dark h2,
.zw-section-dark h3,
.zw-section-dark h4,
.zw-section-dark p {
  color: var(--color-text-light);
}

.zw-section-light {
  background-color: #FFFFFF;
  color: var(--color-text-dark);
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.zw-announcement-bar {
  background-color: var(--color-accent);
  color: var(--color-text-dark);
  text-align: center;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  position: relative;
}

.zw-announcement-bar .zw-dismiss {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  opacity: 0.7;
  transition: opacity var(--transition-base);
}

.zw-announcement-bar .zw-dismiss:hover {
  opacity: 1;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.zw-hero {
  background-color: var(--color-primary);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.zw-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 193, 7, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.zw-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.35);
  border-radius: 50px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 24px;
}

.zw-status-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

/* ============================================================
   BRAND LOGOS MARQUEE
   ============================================================ */
.zw-marquee-wrapper {
  overflow: hidden;
  position: relative;
}

.zw-marquee-wrapper::before,
.zw-marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.zw-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #000000, transparent);
}

.zw-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #000000, transparent);
}

.zw-marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee-scroll 30s linear infinite;
  width: max-content;
}

.zw-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.zw-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity var(--transition-base);
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text-light);
  letter-spacing: 0.05em;
}

.zw-logo-item:hover {
  opacity: 1;
}

/* ============================================================
   LONG-FORM COPY COLUMN
   ============================================================ */
.zw-copy-column {
  max-width: var(--max-width-copy);
  margin-left: auto;
  margin-right: auto;
}

.zw-copy-column p {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 1.5em;
}

.zw-copy-column blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: 24px;
  margin: 2em 0;
  font-style: italic;
  font-size: 22px;
  color: var(--color-text-secondary);
}

/* ============================================================
   SERVICES / ENGAGEMENT MODEL CARDS
   ============================================================ */
.zw-service-card {
  background: #FFFFFF;
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-card);
  padding: 48px 40px;
  transition: all var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.zw-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-slow);
  transform-origin: left;
}

.zw-service-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-8px);
}

.zw-service-card:hover::before {
  transform: scaleX(1);
}

.zw-service-number {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 800;
  color: rgba(255, 193, 7, 0.15);
  line-height: 1;
  margin-bottom: 16px;
}

/* ============================================================
   5-STAGE FRAMEWORK TIMELINE
   ============================================================ */
.zw-timeline {
  position: relative;
  padding-left: 60px;
}

.zw-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}

.zw-timeline-item {
  position: relative;
  margin-bottom: 48px;
}

.zw-timeline-item::before {
  content: '';
  position: absolute;
  left: -48px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2);
}

.zw-stage-number {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

/* ============================================================
   METRIC / RESULTS CARDS
   ============================================================ */
.zw-metric-card {
  background: var(--color-primary);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border-dark);
  padding: 40px;
  text-align: center;
  transition: all var(--transition-slow);
}

.zw-metric-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 40px rgba(255, 193, 7, 0.15);
}

.zw-metric-number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 12px;
}

/* ============================================================
   TABS (Work Samples)
   ============================================================ */
.zw-tabs-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 0;
}

.zw-tab-btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-base);
}

.zw-tab-btn.active,
.zw-tab-btn:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ============================================================
   TESTIMONIALS GRID
   ============================================================ */
.zw-testimonial-card {
  background: #FFFFFF;
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border-light);
  padding: 36px;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-slow);
}

.zw-testimonial-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.zw-testimonial-quote {
  font-size: 40px;
  color: var(--color-accent);
  font-family: var(--font-heading);
  line-height: 1;
  margin-bottom: 16px;
}

.zw-testimonial-text {
  font-size: 17px;
  line-height: 1.75;
  color: #374151;
  margin-bottom: 24px;
}

.zw-testimonial-author {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-dark);
}

.zw-testimonial-role {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ============================================================
   RESOURCE DOWNLOAD CARDS
   ============================================================ */
.zw-resource-card {
  background: #FFFFFF;
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border-light);
  padding: 48px;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-slow);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.zw-resource-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.zw-resource-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 193, 7, 0.12);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ============================================================
   FINAL CTA SECTION
   ============================================================ */
.zw-final-cta {
  background: var(--color-primary);
  padding: var(--section-padding-y) 20px;
}

.zw-cta-card {
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--color-accent);
  border-radius: 32px;
  padding: 80px 60px;
  text-align: center;
  background: rgba(255, 193, 7, 0.03);
  box-shadow: 0 0 80px rgba(255, 193, 7, 0.08);
}

/* ============================================================
   FOOTER
   ============================================================ */
.zw-footer {
  background: var(--color-primary);
  border-top: 1px solid var(--color-border-dark);
  padding: 60px 20px 40px;
}

.zw-footer-tagline {
  font-size: 16px;
  color: var(--color-text-secondary);
  max-width: 500px;
}

.zw-footer-copyright {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-dark);
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
[data-aos] {
  transition-property: opacity, transform;
}

.zw-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.zw-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   ELEMENTOR-SPECIFIC OVERRIDES
   ============================================================ */

/* Section padding defaults */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--max-width-wide);
}

/* Ensure headings inherit Playfair Display */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading) !important;
}

/* Ensure text widgets use Inter */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* Gold divider */
.elementor-divider-separator {
  border-color: var(--color-accent) !important;
}

/* Icon box accent */
.elementor-icon-box-icon .elementor-icon {
  color: var(--color-accent) !important;
}

/* ============================================================
   RTL SUPPORT (Arabic — for TranslatePress)
   ============================================================ */
[dir="rtl"],
html[lang="ar"],
.rtl {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] body,
html[lang="ar"] body {
  font-family: 'Cairo', 'Noto Sans Arabic', var(--font-body);
}

[dir="rtl"] .zw-timeline {
  padding-left: 0;
  padding-right: 60px;
}

[dir="rtl"] .zw-timeline::before {
  left: auto;
  right: 20px;
}

[dir="rtl"] .zw-timeline-item::before {
  left: auto;
  right: -48px;
}

[dir="rtl"] .zw-copy-column blockquote {
  border-left: none;
  border-right: 4px solid var(--color-accent);
  padding-left: 0;
  padding-right: 24px;
}

[dir="rtl"] .zw-announcement-bar .zw-dismiss {
  right: auto;
  left: 20px;
}

[dir="rtl"] .elementor-column {
  float: right;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: 80px;
    --font-size-base: 18px;
  }

  .zw-cta-card {
    padding: 60px 40px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --section-padding-y: 60px;
    --font-size-base: 17px;
  }

  .zw-service-card,
  .zw-resource-card {
    padding: 32px 24px;
  }

  .zw-cta-card {
    padding: 48px 24px;
  }

  .zw-timeline {
    padding-left: 40px;
  }

  .zw-timeline::before {
    left: 12px;
  }

  .zw-timeline-item::before {
    left: -32px;
  }

  [dir="rtl"] .zw-timeline {
    padding-left: 0;
    padding-right: 40px;
  }

  [dir="rtl"] .zw-timeline::before {
    left: auto;
    right: 12px;
  }

  [dir="rtl"] .zw-timeline-item::before {
    left: auto;
    right: -32px;
  }
}