/*
Theme Name: MAG Investments
Theme URI: https://jonnystudio.co.il
Author: Jonny Studio
Author URI: https://jonnystudio.co.il
Description: תבנית דף נחיתה בהתאמה אישית עבור MAG Real Estate Investment — תוכנית ההכשרה להשקעות נדל"ן בארה"ב.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: mag-investments
*/

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FAF6EC; }
::selection { background: #C9A45B; color: #211A10; }

img { max-width: 100%; }

@keyframes magMesh {
  0%   { transform: translate(-4%, -3%) scale(1.05); }
  50%  { transform: translate(5%, 4%) scale(1.15); }
  100% { transform: translate(-4%, -3%) scale(1.05); }
}
@keyframes magFloat { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes magBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes magShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes magSpin { to { transform: rotate(360deg); } }
@keyframes magPulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes magRevIn { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes magRevLeft { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes magRevRight { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes magScaleIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes magMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes magGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(201,164,91,.5); } 50% { box-shadow: 0 0 34px 4px rgba(201,164,91,.28); } }
@keyframes magArrow { 0% { opacity:0; transform: translateY(-6px);} 40%{opacity:1;} 100% { opacity:0; transform: translateY(10px);} }
@keyframes magPing { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(2.2); opacity: 0; } }

#mag-wa:hover .mag-tip { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; }
#mag-wa:hover { transform: scale(1.08); }

/* form interaction states (converted from design style-focus / style-hover) */
.mag-input:focus { border-color: #9C6F1E !important; box-shadow: 0 0 0 3px rgba(201,164,91,.15); }
.mag-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(201,164,91,.42) !important; }

/* WP admin bar offset for fixed header */
body.admin-bar #mag-header { top: 32px !important; }
body.admin-bar #mag-mobile-menu { top: 32px !important; }
body.admin-bar #mag-progress { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar #mag-header, body.admin-bar #mag-mobile-menu, body.admin-bar #mag-progress { top: 46px !important; }
}

/* ============ TESTIMONIALS MARQUEE ============ */
.mag-marquee {
  position: relative;
  overflow: hidden;
  direction: ltr; /* keeps the translateX loop math simple; content is images only */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mag-marquee-track {
  display: flex;
  width: max-content;
  animation: magMarquee 55s linear infinite;
  will-change: transform;
}
.mag-marquee:hover .mag-marquee-track { animation-play-state: paused; }
.mag-marquee-card {
  flex: 0 0 auto;
  width: min(420px, 78vw);
  margin-right: 22px; /* uniform spacing (no gap) so -50% lands exactly on the copy */
}
@media (prefers-reduced-motion: reduce) {
  .mag-marquee-track { animation: none; }
}

/* ============ MOBILE MENU ============ */
#mag-burger { display: none; }
#mag-mobile-menu {
  position: fixed; top: 0; right: 0; left: 0; z-index: 99;
  background: rgba(250,246,236,.98); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201,164,91,.2);
  box-shadow: 0 22px 50px rgba(120,95,40,.16);
  padding: 96px 7vw 34px;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
#mag-mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
#mag-burger span { transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
#mag-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mag-burger.open span:nth-child(2) { opacity: 0; }
#mag-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ RESPONSIVE — TABLET ============ */
@media (max-width: 900px) {
  #mag-nav { display: none !important; }
  #mag-head-cta { display: none !important; }
  #mag-burger { display: inline-flex !important; }

  .mag-stats-grid { grid-template-columns: repeat(2,1fr) !important; padding: 34px 20px !important; }
  .mag-grid3 { grid-template-columns: repeat(2,1fr) !important; }
  .mag-grid4 { grid-template-columns: repeat(2,1fr) !important; }
  .mag-lead-grid { grid-template-columns: 1fr !important; }

  .mag-pad-a { padding: 88px 6vw 52px !important; }   /* 120px 5vw 90px */
  .mag-pad-b { padding: 60px 6vw !important; }        /* 100px 5vw */
  .mag-pad-c { padding: 14px 6vw 60px !important; }   /* 20px 5vw 100px */
  .mag-pad-d { padding: 14px 6vw 56px !important; }   /* 20px 5vw 96px */
  .mag-pad-e { padding: 14px 6vw 52px !important; }   /* 20px 5vw 90px */
  .mag-pad-f { padding: 40px 6vw 60px !important; }   /* 60px 5vw 100px */
  .mag-pad-g { padding: 0 6vw 60px !important; }      /* 0px 5vw 100px */
  .mag-box-a { padding: 36px 24px !important; }       /* 56px 44px */
  .mag-box-b { padding: 40px 26px !important; }       /* 56px 48px */
  .mag-box-c { padding: 46px 24px !important; }       /* 64px 40px */
}

/* ============ RESPONSIVE — PHONE ============ */
@media (max-width: 620px) {
  .mag-grid3, .mag-grid4 { grid-template-columns: 1fr !important; }
  .mag-autofill330, .mag-autofill340 { grid-template-columns: 1fr !important; }
  .mag-stats-grid { gap: 14px !important; padding: 28px 16px !important; }

  #mag-float-cta { bottom: 18px !important; right: 50% !important; transform: translateX(50%) !important; flex-direction: row !important; gap: 14px !important; }
  #mag-footer-inner { flex-direction: column !important; text-align: center !important; gap: 22px !important; }
  footer { padding-bottom: 120px !important; }
}