/* ============================================
   UNIFIED HERO TYPOGRAPHY SYSTEM - RUBIK
   Yafit Shimon Touati Law Office
   Modern, Boutique, Cross-Language
   ============================================ */

/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
  /* Font Family - Rubik for all languages */
  --hero-font-family: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Headline (H1) - Main firm name */
  --hero-h1-weight: 700;
  --hero-h1-size-mobile: 2.5rem;
  /* 40px */
  --hero-h1-size-tablet: 3.25rem;
  /* 52px */
  --hero-h1-size-desktop: 4rem;
  /* 64px */
  --hero-h1-line-height: 1.15;
  --hero-h1-letter-spacing: -0.02em;
  --hero-h1-color: #ffffff;

  /* Subheadline (H2) - Values statement */
  --hero-h2-weight: 600;
  --hero-h2-size-mobile: 1.375rem;
  /* 22px */
  --hero-h2-size-tablet: 1.75rem;
  /* 28px */
  --hero-h2-size-desktop: 2rem;
  /* 32px */
  --hero-h2-line-height: 1.4;
  --hero-h2-letter-spacing: -0.01em;
  --hero-h2-color: rgba(255, 255, 255, 0.95);

  /* Supporting Text (P) - Experience line */
  --hero-p-weight: 400;
  --hero-p-size-mobile: 1.0625rem;
  /* 17px */
  --hero-p-size-tablet: 1.1875rem;
  /* 19px */
  --hero-p-size-desktop: 1.3125rem;
  /* 21px */
  --hero-p-line-height: 1.6;
  --hero-p-letter-spacing: normal;
  --hero-p-color: rgba(255, 255, 255, 0.88);

  /* CTA Button */
  --hero-cta-weight: 600;
  --hero-cta-size: 1.125rem;
  /* 18px */
  --hero-cta-line-height: 1.5;
  --hero-cta-letter-spacing: 0.01em;

  /* Spacing */
  --hero-h2-margin-top: 1.25rem;
  /* 20px */
  --hero-p-margin-top: 1rem;
  /* 16px */
  --hero-cta-margin-top: 3rem;
  /* 48px */

  /* Text Shadows for Legibility */
  --hero-h1-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  --hero-h2-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  --hero-p-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* ============================================
   HERO SECTION BASE
   ============================================ */

#hero {
  height: 100vh !important;
  min-height: 100vh !important;
  background-image: url('/assets/hero-meeting-room.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Overlay for better text contrast */
#hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 30, 50, 0.65) !important;
  z-index: 1 !important;
}

/* Content container */
#hero>div {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
}

/* RTL/LTR alignment */
[dir="rtl"] #hero>div {
  align-items: flex-start !important;
  text-align: right !important;
}

[dir="ltr"] #hero>div {
  align-items: flex-start !important;
  text-align: left !important;
}

/* Hide side images */
#hero img {
  display: none !important;
}

/* ============================================
   TYPOGRAPHY - ALL LANGUAGES (RUBIK)
   ============================================ */

/* Main Headline (H1) */
#hero h1 {
  font-family: var(--hero-font-family) !important;
  font-weight: var(--hero-h1-weight) !important;
  font-size: var(--hero-h1-size-mobile) !important;
  line-height: var(--hero-h1-line-height) !important;
  letter-spacing: var(--hero-h1-letter-spacing) !important;
  color: var(--hero-h1-color) !important;
  text-shadow: var(--hero-h1-shadow) !important;
  margin: 0 !important;
  white-space: normal !important;
}

/* Subheadline (H2) */
#hero h2 {
  font-family: var(--hero-font-family) !important;
  font-weight: var(--hero-h2-weight) !important;
  font-size: var(--hero-h2-size-mobile) !important;
  line-height: var(--hero-h2-line-height) !important;
  letter-spacing: var(--hero-h2-letter-spacing) !important;
  color: var(--hero-h2-color) !important;
  text-shadow: var(--hero-h2-shadow) !important;
  margin-top: var(--hero-h2-margin-top) !important;
  margin-bottom: 0 !important;
}

/* Supporting Text (P) */
#hero p {
  font-family: var(--hero-font-family) !important;
  font-weight: var(--hero-p-weight) !important;
  font-size: var(--hero-p-size-mobile) !important;
  line-height: var(--hero-p-line-height) !important;
  letter-spacing: var(--hero-p-letter-spacing) !important;
  color: var(--hero-p-color) !important;
  text-shadow: var(--hero-p-shadow) !important;
  margin-top: var(--hero-p-margin-top) !important;
  margin-bottom: 0 !important;
  max-width: 42rem !important;
}

/* CTA Button */
#hero button,
#hero .cta-button {
  font-family: var(--hero-font-family) !important;
  font-weight: var(--hero-cta-weight) !important;
  font-size: var(--hero-cta-size) !important;
  line-height: var(--hero-cta-line-height) !important;
  letter-spacing: var(--hero-cta-letter-spacing) !important;
  margin-top: var(--hero-cta-margin-top) !important;
}

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

/* Tablet (768px+) */
@media (min-width: 768px) {
  #hero h1 {
    font-size: var(--hero-h1-size-tablet) !important;
  }

  #hero h2 {
    font-size: var(--hero-h2-size-tablet) !important;
  }

  #hero p {
    font-size: var(--hero-p-size-tablet) !important;
  }

  #hero>div {
    padding: 0 3rem !important;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  #hero h1 {
    font-size: var(--hero-h1-size-desktop) !important;
    /* Force single line on desktop */
    white-space: nowrap !important;
  }

  #hero h2 {
    font-size: var(--hero-h2-size-desktop) !important;
  }

  #hero p {
    font-size: var(--hero-p-size-desktop) !important;
  }

  #hero>div {
    padding: 0 3rem !important;
  }
}

/* ============================================
   LANGUAGE-SPECIFIC ADJUSTMENTS
   ============================================ */

/* Hebrew - RTL optimizations */
html[lang="he"] #hero h1,
html[lang="he"] #hero h2,
html[lang="he"] #hero p {
  direction: rtl !important;
  text-align: right !important;
}

/* English & French - LTR */
html[lang="en"] #hero h1,
html[lang="en"] #hero h2,
html[lang="en"] #hero p,
html[lang="fr"] #hero h1,
html[lang="fr"] #hero h2,
html[lang="fr"] #hero p {
  direction: ltr !important;
  text-align: left !important;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
#hero button:focus,
#hero .cta-button:focus {
  outline: 3px solid rgba(255, 255, 255, 0.8) !important;
  outline-offset: 4px !important;
}

/* Ensure sufficient contrast */
@media (prefers-contrast: high) {
  #hero::before {
    background: rgba(15, 30, 50, 0.75) !important;
  }

  #hero h1,
  #hero h2,
  #hero p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

  #hero,
  #hero * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  #hero::before {
    background: rgba(15, 30, 50, 0.3) !important;
  }

  #hero h1,
  #hero h2,
  #hero p {
    color: #000 !important;
    text-shadow: none !important;
  }
}