/* ============================================
   Site-wide overrides + improvements
   ============================================ */

/* Canonical font stacks — single source of truth */
:root {
  --font-serif: 'Sorts Mill Goudy', Georgia, 'Times New Roman', serif;
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Default everything to serif — matches live site (Sorts Mill Goudy everywhere) */
html, body, body.home, body.page, body[class] {
  font-family: var(--font-serif) !important;
}
body *:not(.fa):not(.fas):not(.fab):not(.far):not(.fal):not(.fad):not([class*="eicon"]):not([class*="genericon"]):not([class*="dashicons"]) {
  font-family: var(--font-serif) !important;
}

/* Font Awesome icons preserved */
.fa, .fas, .far, .fab, .fal, .fad,
[class^="elementor-icon"], [class*=" elementor-icon"],
[class^="eicon"], [class*=" eicon"],
[class*="genericon"] {
  font-family: inherit;
}
.fa, .fas { font-family: 'Font Awesome 5 Free' !important; }
.fab { font-family: 'Font Awesome 5 Brands' !important; }
.far, .fal { font-family: 'Font Awesome 5 Free' !important; }

/* 0. Hide legacy WP/Gridbox theme header — use only our custom menu */
#masthead.site-header,
#site-navigation.main-navigation,
.site-header.clearfix {
  display: none !important;
}

/* Hide duplicate "Mahan Mehrvarz" heading on homepage hero — menu has brand */
.elementor-element-362a6e4 {
  display: none !important;
}

/* Pad page top so content clears the fixed custom menu */
body {
  padding-top: 60px !important;
}
@media (max-width: 600px) {
  body { padding-top: 52px !important; }
}

/* 1. Force-show Elementor sections stuck in invisible state
   (happens when frontend JS init fails) */
.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2. NEWS sticker: pull up to clear logos and slightly tilt */
.elementor-element-44e15eb {
  margin-top: -180px !important;
  position: relative;
  z-index: 5;
  pointer-events: none;
}
.elementor-element-44e15eb img {
  max-width: 220px !important;
  height: auto !important;
  transform: rotate(-6deg);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.elementor-element-44e15eb:hover img {
  transform: rotate(-3deg) scale(1.05);
}
@media (max-width: 768px) {
  .elementor-element-44e15eb { margin-top: -120px !important; }
  .elementor-element-44e15eb img { max-width: 150px !important; }
}

/* 3. Typography consistency
   Headings: Sorts Mill Goudy (serif), single-weight family
   Body + UI: Roboto (sans) */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title,
.site-title {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Unified card title style — wins over Elementor per-element scoped CSS.
   Stack body + elementor-2563 prefixes to beat .elementor-2563 .elementor-element-xxx specificity. */
body .elementor .widget-image-caption,
body .elementor figcaption.wp-caption-text,
body .elementor-2563 .widget-image-caption,
body .elementor-2563 .elementor-element .widget-image-caption,
body .elementor-2563 figcaption.wp-caption-text,
body figure .widget-image-caption,
.widget-image-caption,
.wp-caption-text {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #111 !important;
  line-height: 1.3 !important;
  margin-top: 0.6rem !important;
}

/* Project tag hashtag rows — applies to all project section rows */
body .elementor-widget-heading .elementor-heading-title.elementor-size-default {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 0.25rem;
  display: block !important;
}
/* Tag rows in project section: small, gray, centered */
body section[data-id="b1d580c"] .elementor-widget-heading .elementor-heading-title,
body section[data-id="a3d9434"] .elementor-widget-heading .elementor-heading-title,
body .elementor-section[data-id="b1d580c"] + .elementor-section .elementor-widget-heading .elementor-heading-title {
  font-size: 0.92rem !important;
  color: #777 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* Refined body line-height + measure */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  line-height: 1.65;
}

/* Dark "About" section: keep text white */
#about,
#about p,
#about li,
#about span,
#about .elementor-widget-text-editor p,
#about .elementor-widget-text-editor span,
#about .elementor-widget-blockquote,
#about .elementor-widget-blockquote * {
  color: #f5f5f5 !important;
}
#about a {
  color: #f5f5f5 !important;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s;
}
#about a:hover { text-decoration-color: #fff; }
/* Quote block inside about — explicitly force visible */
#about .elementor-blockquote,
#about blockquote,
#about figure.elementor-blockquote,
#about .elementor-widget-blockquote .elementor-blockquote,
#about .elementor-widget-blockquote {
  background: rgba(255,255,255,0.06) !important;
  padding: 1.75rem !important;
  border-left: 3px solid rgba(255,255,255,0.4) !important;
  border-radius: 4px;
}
#about blockquote,
#about blockquote *,
#about .elementor-blockquote,
#about .elementor-blockquote *,
#about .elementor-widget-blockquote * {
  color: #f5f5f5 !important;
  border-color: rgba(255,255,255,0.3) !important;
}
#about .elementor-blockquote__author,
#about .elementor-blockquote cite {
  color: rgba(245,245,245,0.7) !important;
  font-style: italic;
}

/* 4. Project grid: gentler hover, sharper images, refined gutter */
.elementor-section[data-id="b1d580c"] .elementor-column {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.elementor-section[data-id="b1d580c"] img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s;
  image-rendering: -webkit-optimize-contrast;
}
.elementor-section[data-id="b1d580c"] a:hover img {
  transform: scale(1.04);
  filter: brightness(0.95);
}
.elementor-section[data-id="b1d580c"] .widget-image-caption {
  margin-top: 0.6rem;
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-size: 1.15rem !important;
  color: #111 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* 5. Scroll-suspense — JS adds [data-reveal] to off-screen sections.
   CSS animation auto-reveals after 2.5s as safety. */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  animation: reveal-safety 0s ease 2.5s forwards;
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
@keyframes reveal-safety {
  to { opacity: 1; transform: translateY(0); }
}

/* Subtle parallax on hero image */
.elementor-element-c4d15ef img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth focus rings */
a:focus-visible, button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Selection color */
::selection {
  background: #111;
  color: #fff;
}

/* Smoother site-wide font rendering */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

/* ============================================
   MOBILE responsive polish
   ============================================ */
@media (max-width: 768px) {
  /* Tighten Elementor section padding */
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-top-section > .elementor-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .elementor-section {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* Larger touch targets in menu */
  .site-menu nav a,
  .site-menu nav button {
    padding: 0.5rem 0.4rem !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center;
  }
  .site-menu { padding: 0.5rem 0.75rem !important; }
  .site-menu .brand { font-size: 1rem !important; }
  .site-menu nav { gap: 0.6rem !important; }

  /* Hero image — reduce vertical waste */
  .elementor-element-c4d15ef img,
  .elementor-element-c4d15ef figure { max-height: 60vh; object-fit: cover; }

  /* NEWS sticker smaller on mobile + clear logos */
  .elementor-element-44e15eb { margin-top: -90px !important; }
  .elementor-element-44e15eb img { max-width: 120px !important; }

  /* Project + article grids — single column with smaller gap */
  section[data-id="b1d580c"] .elementor-container,
  section[data-id="a3d9434"] .elementor-container,
  section[data-id="ee2f878"] .elementor-container {
    gap: 1rem !important;
  }
  section[data-id="b1d580c"] .elementor-column,
  section[data-id="a3d9434"] .elementor-column {
    margin-bottom: 0.5rem !important;
  }

  /* Project thumbs full width + smaller caption gap */
  .elementor-widget-image figure { margin: 0 !important; }
  .widget-image-caption,
  .wp-caption-text { font-size: 1rem !important; margin-top: 0.4rem !important; }

  /* About section — better readability */
  #about { padding: 2rem 0 !important; }
  #about .elementor-widget-text-editor p,
  #about p, #about span { font-size: 1rem !important; line-height: 1.55 !important; }
  #about blockquote { padding: 1rem !important; margin: 1rem 0 !important; font-size: 0.95rem; }

  /* Salam heading tighter */
  .elementor-element-362a6e4 { display: none !important; }
  h3, .elementor-heading-title { font-size: 1.4rem !important; }
  h5, h4 { font-size: 1.1rem !important; }

  /* Hide menu auto-hide on mobile (helps re-discoverability) */
  .site-menu.hidden { transform: translateY(0) !important; }

  /* Scroll-top button — more reachable */
  .scroll-top { bottom: 1rem !important; right: 1rem !important; width: 44px !important; height: 44px !important; }

  /* Footer tighter */
  footer .elementor-container { padding: 1rem !important; }
}

/* Very small phones */
@media (max-width: 380px) {
  .site-menu .brand { font-size: 0.9rem !important; }
  .site-menu nav { gap: 0.4rem !important; }
  .site-menu nav a, .site-menu nav button { font-size: 0.78rem !important; }
}

/* Quote box (white-bg) inside About — force readable black text */
#about .elementor-element-68e7d88,
#about .elementor-element-68e7d88 *,
#about .elementor-element-68e7d88 p,
#about .elementor-element-68e7d88 p em,
#about .elementor-element-68e7d88 p span,
#about .elementor-element-68e7d88 p strong,
#about .elementor-element-68e7d88 .elementor-widget-container p,
#about .elementor-element-68e7d88 .elementor-widget-container * {
  color: #111 !important;
}

/* User request: remove NEWS sticker */
.elementor-element-44e15eb { display: none !important; }

/* User request: flip hero GIF/video horizontally */
.elementor-element-1873e6b img,
.elementor-element-1873e6b video {
  transform: scaleX(-1);
}

/* Salam: translucent backdrop, box sized to text only (no extra white) */
@media (min-width: 769px) {
  /* ── Section 80a94a5 = hero+Salam row ── */
  section[data-id="80a94a5"] > .elementor-container {
    max-width: 100% !important;
    padding-right: 0 !important;
    align-items: stretch !important;
  }

  /* ── Hero image column: takes all space, extends right under Salam box ── */
  body .elementor-element-0d3bbc4 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-right: -380px !important;
    position: relative !important;
    z-index: 1 !important;
  }
  body .elementor-element-1873e6b img,
  body .elementor-element-1873e6b video {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
  }
  /* Salam col on top of overlap zone */
  body .elementor-element-9b70bf2 {
    position: relative !important;
    z-index: 2 !important;
  }

  /* ── Salam right column: sized to fit the box tightly ── */
  body .elementor-element-9b70bf2 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 2rem 2rem 2rem 0 !important;
    align-self: center !important;
  }
  /* Zero out Elementor's default column padding on widget-wrap */
  body .elementor-element-9b70bf2 > .elementor-widget-wrap {
    padding: 0 !important;
  }

  /* ── Inner section d953bed: no extra sizing ── */
  body .elementor-element-d953bed,
  body .elementor-element-d953bed > .elementor-container {
    width: auto !important;
    max-width: none !important;
  }

  /* ── FIX: cancel Elementor's -67% negative margin on widget-wrap inside 918ca69 ──
     post-2563.css sets margin: 0% 0% 0% -67% on .elementor-element-918ca69 > .elementor-element-populated
     which shifts the widget-wrap 257px left, outside the white box.
     We must override it to 0. */
  .elementor-element-918ca69 > .elementor-element-populated,
  body .elementor-element-918ca69 > .elementor-widget-wrap {
    margin: 0 !important;
    --e-column-margin-left: 0px !important;
    --e-column-margin-right: 0px !important;
  }

  /* ── Salam box: the white translucent card ── */
  body .elementor-element-918ca69 {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1.8rem 1.8rem !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.1);
    border-radius: 2px;
    position: relative;
    z-index: 3;
    width: auto !important;
    max-width: 648px !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    transition: box-shadow 0.3s;
    /* Hero image extends underneath via margin-right; box stays in column */
    transform: translateY(var(--salam-y, 0px));
  }
  body .elementor-element-918ca69:hover {
    box-shadow: 0 14px 36px rgba(0,0,0,0.14);
  }

  /* ── Kill any background on inner elements ── */
  .elementor-element-918ca69 .elementor-widget-wrap,
  .elementor-element-918ca69 .elementor-widget-container,
  .elementor-element-918ca69 .elementor-widget {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* ── Inner widget f171120: fill box width, no extra sizing ── */
  body .elementor-element-918ca69 .elementor-element-f171120,
  body .elementor-element-918ca69 .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Text elements fill box width ── */
  body .elementor-element-918ca69 p,
  body .elementor-element-918ca69 h3,
  body .elementor-element-918ca69 h4,
  body .elementor-element-918ca69 h5 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Typography (20% bigger) ── */
  .elementor-element-918ca69 h3 {
    font-size: 2.1rem !important;
    margin-bottom: 0.65rem !important;
  }
  .elementor-element-918ca69 h4,
  .elementor-element-918ca69 h5 {
    font-size: 1.38rem !important;
    margin-bottom: 0.85rem !important;
  }
  .elementor-element-918ca69 p {
    font-size: 1.2rem !important;
    line-height: 1.55 !important;
    margin: 0.85rem 0 !important;
  }
}

/* ── Logos: spacing + float on scroll ── */
@media (min-width: 769px) {
  /* Distance between the two logos */
  body section[data-id="49995f2"] .elementor-column.elementor-element-910ab07 {
    margin-right: 2rem !important;
  }
  body section[data-id="49995f2"] .elementor-column.elementor-element-dda0756 {
    margin-left: 2rem !important;
  }
  /* Float on scroll — uses CSS var --logo-y from JS */
  .elementor-element-9228446 img,
  .elementor-element-979dfaa img {
    transition: transform 0.2s ease-out;
    transform: translateY(var(--logo-y, 0px));
    will-change: transform;
  }
  .elementor-element-9228446 img { --logo-shift: 1; }
  .elementor-element-979dfaa img { --logo-shift: -1; }
}

/* ============================================
   Writing section (ee2f878): 3-per-row grid + card consistency
   ============================================ */

/* Force wrap so a 4th card starts a new row instead of squishing all 4 */
section[data-id="ee2f878"] > .elementor-container {
  flex-wrap: wrap !important;
}

/* Each col-33 in this section: true 1/3 width so exactly 3 fit per row */
section[data-id="ee2f878"] .elementor-column {
  flex: 0 0 33.333% !important;
  width: 33.333% !important;
  max-width: 33.333% !important;
  box-sizing: border-box !important;
}

/* Consistent image aspect ratio across all writing cards (16:9 ≈ existing cards) */
section[data-id="ee2f878"] .elementor-widget-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
}

/* Subtle border on new cards' images so white-bg image is visually distinct */
.elementor-element-newpaper1img img,
.elementor-element-newpaper2img img {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 1px;
}

/* New cards figcaption: force left-align to match all other cards. */
.elementor-element-newpaper1 .widget-image-caption,
.elementor-element-newpaper1 figcaption.wp-caption-text,
.elementor-element-newpaper2 .widget-image-caption,
.elementor-element-newpaper2 figcaption.wp-caption-text {
  text-align: left !important;
}

/* New cards subtitle: match the gray color of all other card subtitles. */
.elementor-element-newpaper1cap .elementor-heading-title,
.elementor-element-newpaper2cap .elementor-heading-title {
  color: #6e6e6e !important;
}

/* Mobile: writing section single-column stacking */
@media (max-width: 768px) {
  section[data-id="ee2f878"] .elementor-column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================
   EMOJI in figcaptions/text — keep inline-sized
   (some script replaces unicode emoji with full-size img) */
/* High-specificity selectors so emoji rule beats Elementor's section img:100% */
section .elementor-widget-image img.emoji,
section .elementor-widget-image figcaption img.emoji,
.elementor-widget-image figcaption img.emoji,
figcaption.wp-caption-text img.emoji,
.widget-image-caption img.emoji,
body img.emoji,
body img.wp-smiley {
  height: 1em !important;
  width: 1em !important;
  display: inline-block !important;
  vertical-align: -0.1em !important;
  margin: 0 0.07em !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 1em !important;
  max-height: 1em !important;
}