/*
Theme Name: EasyOnline Luxury
Theme URI: https://easyonline.example.com/luxury
Description: תבנית בת יוקרתית ומקצועית עם עיצוב עדין, רך ואלגנטי. פלטת צבעים מעודנת עם הדגשי זהב שמפניה וטיפוגרפיה פרימיום. כולל תיקוני נגישות מלאים וניגודיות מושלמת.
Author: EasyOnline Studio
Author URI: https://easyonline.example.com
Template: easyonline
Version: 1.0.3
Text Domain: easyonline-luxury
*/

/* ============================================
   LUXURY DESIGN SYSTEM
   עיצוב יוקרתי ומקצועי
   ============================================ */

:root {
  /* Luxurious Color Palette - פלטת צבעים יוקרתית */
  --luxury-champagne: #D4AF37;
  --luxury-gold: #C9A961;
  --luxury-rose-gold: #B76E79;
  --luxury-cream: #FAF8F5;
  --luxury-ivory: #F5F3EE;
  --luxury-pearl: #E8E5E0;
  --luxury-taupe: #B5ADA3;
  --luxury-charcoal: #2C2825;
  --luxury-slate: #4A4542;
  --luxury-white: #FFFFFF;
  
  /* Elegant Shadows - צללים אלגנטיים */
  --luxury-shadow-subtle: 0 2px 12px rgba(44, 40, 37, 0.04);
  --luxury-shadow-soft: 0 8px 32px rgba(44, 40, 37, 0.06);
  --luxury-shadow-refined: 0 16px 48px rgba(44, 40, 37, 0.08);
  --luxury-shadow-premium: 0 24px 64px rgba(44, 40, 37, 0.12);
  --luxury-shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.15);
  
  /* Premium Gradients - גרדיאנטים פרימיום */
  --luxury-gradient-cream: linear-gradient(135deg, #FAF8F5 0%, #F5F3EE 100%);
  --luxury-gradient-gold: linear-gradient(135deg, #D4AF37 0%, #C9A961 50%, #B5925E 100%);
  --luxury-gradient-pearl: linear-gradient(180deg, #FFFFFF 0%, #F5F3EE 100%);
  --luxury-gradient-elegant: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(201, 169, 97, 0.04) 100%);
}

/* ============================================
   TYPOGRAPHY - טיפוגרפיה פרימיום
   ============================================ */

body {
  font-family: "Crimson Pro", "Assistant", "Inter", Georgia, serif;
  background: var(--luxury-cream);
  background-image: var(--luxury-gradient-pearl);
  color: var(--luxury-charcoal);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* Subtle texture overlay for premium feel */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(201, 169, 97, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Cormorant Garamond", "Frank Ruhl Libre", "Assistant", serif;
  font-weight: 500;
  color: var(--luxury-charcoal);
  letter-spacing: 0.02em;
}

/* ============================================
   HEADER - כותרת עליונה
   ============================================ */

.site-header {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  box-shadow: var(--luxury-shadow-subtle);
}

.site-branding a {
  color: var(--luxury-charcoal) !important;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-branding a:hover {
  color: var(--luxury-gold) !important;
}

/* Desktop Navigation - תפריט דסקטופ */
.site-navigation__drawer a {
  color: var(--luxury-charcoal) !important;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.site-navigation__drawer a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--luxury-gradient-gold);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.site-navigation__drawer a:hover {
  color: var(--luxury-champagne) !important;
  opacity: 1 !important;
  text-decoration: none;
}

.site-navigation__drawer a:hover::after {
  width: 100%;
}

/* Mobile Navigation Toggle - כפתור תפריט נייד */
.site-navigation__toggle {
  background: var(--luxury-champagne);
  border: 1px solid var(--luxury-gold);
  color: var(--luxury-white);
  box-shadow: var(--luxury-shadow-gold);
  transition: all 0.3s ease;
  padding: 12px 16px;
  border-radius: 12px;
}

.site-navigation__toggle:hover {
  background: var(--luxury-gold);
  transform: translateY(-1px);
  box-shadow: var(--luxury-shadow-soft);
}

.site-navigation__toggle-icon,
.site-navigation__toggle-icon::before,
.site-navigation__toggle-icon::after {
  background: var(--luxury-white) !important;
}

/* Desktop Drawer - תפריט דסקטופ (שקוף) */
.site-navigation__drawer {
  background: transparent;
}

/* ============================================
   HERO SECTION - חלק גיבור
   ============================================ */

.hero {
  background: var(--luxury-gradient-cream);
  border: 1px solid rgba(212, 175, 55, 0.12);
  box-shadow: var(--luxury-shadow-refined);
  backdrop-filter: blur(10px);
  border-radius: 2px;
}

.hero__title {
  color: var(--luxury-charcoal);
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(212, 175, 55, 0.1);
}

.hero__subtitle {
  color: var(--luxury-slate);
  font-weight: 300;
  letter-spacing: 0.03em;
}

.hero__badge {
  background: var(--luxury-charcoal);
  color: var(--luxury-champagne);
  border: 1px solid var(--luxury-gold);
  box-shadow: var(--luxury-shadow-gold);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85em;
}

.hero__stats {
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.hero__stats h3 {
  color: var(--luxury-champagne);
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
}

.hero__stats p {
  color: var(--luxury-slate);
  font-weight: 400;
}

/* ============================================
   BUTTONS - כפתורים
   ============================================ */

.wp-block-button__link,
.wp-element-button {
  background: var(--luxury-gradient-gold);
  color: var(--luxury-white);
  border: none;
  box-shadow: var(--luxury-shadow-gold);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9em;
  padding: 1rem 2.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--luxury-shadow-premium);
  background: linear-gradient(135deg, #C9A961 0%, #D4AF37 50%, #C9A961 100%);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1.5px solid var(--luxury-gold);
  color: var(--luxury-gold);
  box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--luxury-gradient-gold);
  color: var(--luxury-white);
  border-color: transparent;
}

/* ============================================
   CARDS & COMPONENTS - כרטיסים ורכיבים
   ============================================ */

.problem-solution,
.service-card,
.how-it-works__step,
.pricing-card,
.testimonials blockquote {
  background: var(--luxury-white);
  border: 1px solid rgba(212, 175, 55, 0.1);
  box-shadow: var(--luxury-shadow-soft);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.problem-solution:hover,
.service-card:hover,
.how-it-works__step:hover,
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--luxury-shadow-refined);
  border-color: rgba(212, 175, 55, 0.25);
}

.service-card__icon,
.how-it-works__number {
  background: linear-gradient(135deg, var(--luxury-champagne) 0%, var(--luxury-gold) 100%);
  border: 1px solid var(--luxury-gold);
  color: var(--luxury-white);
  font-weight: 600;
}

/* Pricing Cards - כרטיסי מחירים */
.pricing-card {
  border-radius: 2px;
  overflow: hidden;
}

.pricing-card--featured {
  background: var(--luxury-charcoal);
  background-image: 
    linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, transparent 100%),
    linear-gradient(180deg, #2C2825 0%, #3A3633 100%);
  border: 1px solid var(--luxury-gold);
  box-shadow: var(--luxury-shadow-premium);
  color: var(--luxury-cream);
  position: relative;
}

.pricing-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--luxury-gradient-gold);
}

.pricing-card--featured h3,
.pricing-card--featured .pricing-card__price,
.pricing-card--featured ul li {
  color: var(--luxury-cream);
}

.pricing-card--featured .wp-block-button__link {
  background: var(--luxury-white);
  color: var(--luxury-charcoal);
  box-shadow: var(--luxury-shadow-gold);
}

.pricing-card--featured .wp-block-button__link:hover {
  background: var(--luxury-gradient-gold);
  color: var(--luxury-white);
  transform: translateY(-2px);
}

.pricing-card__price {
  color: var(--luxury-charcoal);
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
}

.pricing-card h3 {
  color: var(--luxury-charcoal);
}

.pricing-card p,
.pricing-card ul li {
  color: var(--luxury-slate);
}

/* ============================================
   TESTIMONIALS - המלצות
   ============================================ */

.testimonials blockquote {
  background: var(--luxury-gradient-cream);
  border-right: 3px solid var(--luxury-gold);
  position: relative;
  font-style: italic;
}

.testimonials blockquote::before {
  content: '"';
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 4rem;
  color: rgba(212, 175, 55, 0.2);
  font-family: "Cormorant Garamond", serif;
  line-height: 1;
}

.testimonials cite {
  color: var(--luxury-gold);
  font-weight: 500;
  font-style: normal;
}

/* ============================================
   CONTACT CTA - קריאה לפעולה
   ============================================ */

.contact-cta {
  background: var(--luxury-charcoal);
  background-image: 
    linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%),
    var(--luxury-gradient-elegant);
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: var(--luxury-shadow-premium);
  color: var(--luxury-cream);
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.contact-cta h2 {
  color: var(--luxury-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.contact-cta p {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
}

.contact-cta__trust li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.15);
  color: var(--luxury-ivory);
  backdrop-filter: blur(10px);
}

.contact-cta__trust li::before {
  color: var(--luxury-champagne);
}

/* ============================================
   FOOTER - תחתית
   ============================================ */

.site-footer {
  background: var(--luxury-charcoal);
  background-image: linear-gradient(180deg, #2C2825 0%, #1F1D1B 100%);
  color: var(--luxury-pearl);
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.site-footer h2,
.site-footer h3,
.site-footer h4 {
  color: var(--luxury-champagne) !important;
  font-weight: 500;
}

/* Footer text and links - טקסט וקישורים בפוטר */
.site-footer p {
  color: var(--luxury-pearl);
}

.site-footer a {
  color: var(--luxury-pearl);
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: var(--luxury-champagne);
  text-decoration: none;
}

.site-footer__bottom {
  border-top: 1px solid rgba(212, 175, 55, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   FORMS - טפסים
   ============================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background: var(--luxury-white);
  border: 1.5px solid var(--luxury-pearl);
  color: var(--luxury-charcoal);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: "Crimson Pro", "Assistant", serif;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--luxury-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
  outline: none;
}

/* ============================================
   RESPONSIVE - רספונסיבי
   ============================================ */

@media (max-width: 1024px) {
  body {
    background: var(--luxury-cream);
  }
  
  .hero,
  .pricing-card,
  .service-card {
    box-shadow: var(--luxury-shadow-soft);
  }
}

@media (max-width: 1024px) {
  /* Mobile Header Layout - פריסת הדר במובייל */
  .site-header__inner {
    position: relative;
  }
  
  /* שם כפתור CTA וכפתור תפריט באותה שורה */
  .site-header__cta {
    order: 2 !important;
    width: auto !important;
    flex: 1;
  }
  
  .site-header__cta .btn {
    width: 100% !important;
  }
  
  .site-navigation {
    order: 3 !important;
    width: auto !important;
    flex-shrink: 0;
  }
  
  /* Mobile Drawer - תפריט נייד (רקע לבן מלא!) */
  .site-navigation__drawer {
    background: #FFFFFF !important;
    backdrop-filter: none;
    box-shadow: -8px 0 32px rgba(44, 40, 37, 0.2);
  }
  
  .site-navigation__drawer a {
    color: var(--luxury-charcoal) !important;
    font-size: 1.1rem;
    font-weight: 500;
  }
  
  .site-navigation__drawer a:hover {
    color: var(--luxury-champagne) !important;
  }
}

@media (max-width: 767px) {
  .hero__title {
    font-size: 2rem;
  }
  
  .site-header__cta .btn {
    font-size: 0.9rem;
    padding: 12px 20px;
  }
}

/* ============================================
   ACCESSIBILITY - נגישות
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --luxury-charcoal: #000000;
    --luxury-slate: #1A1A1A;
  }
  
  .site-header {
    border-bottom-width: 2px;
  }
  
  .pricing-card,
  .service-card {
    border-width: 2px;
  }
}

/* ============================================
   ADDITIONAL FIXES - תיקונים נוספים
   ============================================ */

/* Primary CTA Button in Header - כפתור CTA בהדר */
.site-header__cta .btn,
.site-header__cta .btn--primary {
  background: var(--luxury-gradient-gold) !important;
  color: var(--luxury-white) !important;
  box-shadow: var(--luxury-shadow-gold);
  border: none;
}

.site-header__cta .btn:hover,
.site-header__cta .btn--primary:hover {
  background: linear-gradient(135deg, #C9A961 0%, #D4AF37 50%, #C9A961 100%) !important;
  transform: translateY(-2px);
  text-decoration: none;
}

/* CTA Buttons in Dark Areas - כפתורי CTA באזורים כהים */
.site-footer .btn,
.site-footer .btn--primary,
.site-footer .wp-block-button__link,
.contact-cta .btn,
.contact-cta .btn--primary,
.contact-cta .wp-block-button__link:not(.is-style-outline) {
  background: var(--luxury-gradient-gold) !important;
  color: var(--luxury-white) !important;
  box-shadow: var(--luxury-shadow-gold);
  border: none;
  font-weight: 600;
}

.site-footer .btn:hover,
.site-footer .btn--primary:hover,
.site-footer .wp-block-button__link:hover,
.contact-cta .btn:hover,
.contact-cta .btn--primary:hover,
.contact-cta .wp-block-button__link:not(.is-style-outline):hover {
  background: linear-gradient(135deg, #C9A961 0%, #D4AF37 50%, #C9A961 100%) !important;
  transform: translateY(-2px);
  color: var(--luxury-white) !important;
  text-decoration: none;
}

/* Hero on Light Background - הירו על רקע בהיר */
.hero {
  background: var(--luxury-white);
  background-image: var(--luxury-gradient-cream);
}

.hero__title {
  color: var(--luxury-charcoal) !important;
}

.hero__subtitle {
  color: var(--luxury-slate) !important;
}

/* Text Readability - קריאות טקסט */
p {
  color: var(--luxury-slate);
}

.service-card h3,
.how-it-works__step h3,
.problem-solution h3 {
  color: var(--luxury-charcoal);
}

.service-card p,
.how-it-works__step p,
.problem-solution p {
  color: var(--luxury-slate);
}

/* Outline Buttons Better Contrast - כפתורי מתאר עם ניגודיות טובה */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--luxury-gold);
  color: var(--luxury-charcoal);
  box-shadow: none;
  font-weight: 600;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--luxury-gradient-gold);
  color: var(--luxury-white);
  border-color: transparent;
}

/* Outline Buttons in Dark Areas - כפתורי מתאר באזורים כהים */
.contact-cta .wp-block-button.is-style-outline .wp-block-button__link,
.hero .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--luxury-champagne);
  color: var(--luxury-champagne) !important;
  box-shadow: none;
  font-weight: 600;
}

.contact-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--luxury-gradient-gold);
  color: var(--luxury-white) !important;
  border-color: transparent;
}

/* Featured Pricing Card - כרטיס מחיר מודגש */
.pricing-card--featured h3,
.pricing-card--featured .pricing-card__price,
.pricing-card--featured p,
.pricing-card--featured ul li {
  color: var(--luxury-cream) !important;
}

/* Trust Badges with Better Contrast - תגי אמון עם ניגודיות טובה */
.contact-cta__trust li {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: var(--luxury-white);
  backdrop-filter: blur(10px);
  font-weight: 500;
}

/* Forms Better Visibility - טפסים עם נראות טובה */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background: var(--luxury-white);
  border: 2px solid var(--luxury-pearl);
  color: var(--luxury-charcoal);
  font-weight: 400;
}

input::placeholder,
textarea::placeholder {
  color: var(--luxury-taupe);
  opacity: 0.7;
}

/* Testimonials Better Readability - המלצות עם קריאות טובה */
.testimonials blockquote {
  background: var(--luxury-white);
  border-right: 3px solid var(--luxury-champagne);
  color: var(--luxury-slate);
}

.testimonials cite {
  color: var(--luxury-charcoal);
  font-weight: 600;
}

/* Links in Content - קישורים בתוכן */
.site-content a:not(.btn):not(.wp-block-button__link) {
  color: var(--luxury-gold);
  text-decoration: underline;
  text-decoration-color: rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}

.site-content a:not(.btn):not(.wp-block-button__link):hover {
  color: var(--luxury-champagne);
  text-decoration-color: var(--luxury-champagne);
}

/* Mobile Menu Overlay - שכבת כיסוי תפריט נייד */
body.has-mobile-menu::before {
  background: rgba(44, 40, 37, 0.7);
  backdrop-filter: blur(4px);
}

/* Service Icons Better Contrast - אייקוני שירותים עם ניגודיות טובה */
.service-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin-bottom: 16px;
}

/* Stats Numbers - מספרי סטטיסטיקה */
.stats-strip h3,
.hero__stats h3 {
  color: var(--luxury-champagne) !important;
}

.stats-strip p {
  color: var(--luxury-slate);
}

/* FAQ Items - פריטי שאלות נפוצות */
.faq__item summary {
  color: var(--luxury-charcoal);
  font-weight: 600;
}

.faq__item p {
  color: var(--luxury-slate);
}

/* List Items Better Readability - פריטי רשימה עם קריאות טובה */
ul li,
ol li {
  color: var(--luxury-slate);
}

/* Ensure all headings have good contrast - ודא שלכל הכותרות יש ניגודיות טובה */
h1, h2, h3, h4, h5, h6 {
  color: var(--luxury-charcoal) !important;
}

/* Problem/Solution Section - חלק בעיה/פתרון */
.problem-solution h2,
.problem-solution h3 {
  color: var(--luxury-charcoal);
}

/* Mobile CTA Button Spacing - רווח כפתור CTA במובייל */
@media (max-width: 1024px) {
  .site-header__inner {
    gap: 16px;
  }
  
  .site-header__cta {
    margin-left: 8px;
  }
}

/* Ensure icons inherit text color - ודא שאייקונים יורשים צבע טקסט */
.site-navigation__toggle svg,
.site-navigation__toggle path {
  fill: currentColor;
}

/* Make sure all white text on dark backgrounds is truly white - ודא שטקסט לבן על רקע כהה באמת לבן */
.contact-cta h2,
.contact-cta h3 {
  color: var(--luxury-white) !important;
}

/* All buttons in contact-cta should be visible - כל הכפתורים ב-CTA צריכים להיות נראים */
.contact-cta .wp-element-button {
  background: var(--luxury-gradient-gold) !important;
  color: var(--luxury-white) !important;
}

/* ============================================
   PRINT STYLES - סגנונות הדפסה
   ============================================ */

@media print {
  body {
    background: white;
    color: black;
  }
  
  .site-header,
  .site-footer,
  .wp-block-button {
    display: none;
  }
}