/*
Theme Name: MiFactro Landing
Theme URI: https://mifactro.com
Author: MiFactro
Description: Bilingual (Arabic/English) landing page for MiFactro — production control for factories.
Version: 1.2
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mifactro-landing
*/

html, body { margin: 0; padding: 0; background: #FFFFFF; }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: #1C1E21; text-decoration: none; }
a:hover { color: #3C5A8A; }
::selection { background: #1668F0; color: #FFFFFF; }


.mf-h1:hover { background: rgba(28,30,33,0.06) !important; }
.mf-h2:hover { background: #33373D !important; color: #FFFFFF !important; }
.mf-h3:hover { color: #FFFFFF !important; }
.mf-h4:hover { background: rgba(28,30,33,0.05) !important; color: #1C1E21 !important; }
.mf-h5:hover { color: #FFFFFF !important; }

/* ================================================================
   Visual refresh — bold, 2026
   ----------------------------------------------------------------
   Same brand palette throughout (#1668F0 blue, #1C1E21 near-black,
   #FFFFFF) — no new colors. The "modern" comes from generous
   rounding, soft glow shadows instead of hairline borders, a blue
   gradient on primary CTAs, a bento-style features close, and a
   soft radial wash behind the hero.
   ================================================================ */

/* -- primary CTAs: a blue gradient instead of a flat fill -- */
.mf-h3, .mf-h5 {
  background: linear-gradient(135deg, #2C7BFF 0%, #1668F0 55%, #0F53C7 100%) !important;
}
.mf-h3:hover, .mf-h5:hover {
  background: linear-gradient(135deg, #3C86FF 0%, #1E72F5 55%, #0F53C7 100%) !important;
}

/* -- hero: a soft blue wash behind the headline instead of flat white -- */
#mf-en > section:first-of-type,
#mf-ar > section:first-of-type {
  position: relative;
  overflow: hidden;
}
#mf-en > section:first-of-type::before,
#mf-ar > section:first-of-type::before {
  content: "";
  position: absolute;
  top: -220px;
  inset-inline-start: -160px;
  width: 760px;
  height: 620px;
  background: radial-gradient(closest-side, rgba(22,104,240,.16), rgba(22,104,240,0) 72%);
  pointer-events: none;
  z-index: 0;
}
#mf-en > section:first-of-type::after,
#mf-ar > section:first-of-type::after {
  content: "";
  position: absolute;
  bottom: -260px;
  inset-inline-end: -200px;
  width: 640px;
  height: 640px;
  background: radial-gradient(closest-side, rgba(28,30,33,.05), rgba(28,30,33,0) 70%);
  pointer-events: none;
  z-index: 0;
}
#mf-en > section:first-of-type > div,
#mf-ar > section:first-of-type > div {
  position: relative;
  z-index: 1;
}

/* -- features: the closing "AI assistant" card becomes a full-width bento band -- */
#features-en div[style*="grid-template-columns: repeat(2, 1fr)"] > div:last-child,
#features-ar div[style*="grid-template-columns: repeat(2, 1fr)"] > div:last-child {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #FFFFFF 0%, #EAF1FE 160%) !important;
}
@media (min-width: 1025px) {
  #features-en div[style*="grid-template-columns: repeat(2, 1fr)"] > div:last-child > p,
  #features-ar div[style*="grid-template-columns: repeat(2, 1fr)"] > div:last-child > p {
    max-width: 60ch;
  }
}

@media (max-width: 1024px) {
  #mf-en header, #mf-ar header { padding: 14px 20px !important; flex-wrap: nowrap !important; gap: 12px !important; }
  #mf-en nav, #mf-ar nav { display: none !important; }
  #mf-en header .mf-h2, #mf-ar header .mf-h2 { display: none !important; }
  #mf-en header img, #mf-ar header img { height: 26px !important; }
  #mf-en header .mf-h1, #mf-ar header .mf-h1 { padding: 8px 12px !important; font-size: 13.5px !important; }
  #mf-en section, #mf-ar section, #mf-en footer, #mf-ar footer { padding-left: 20px !important; padding-right: 20px !important; }
  #mf-en h1, #mf-ar h1 { font-size: 38px !important; }
  #mf-en h2, #mf-ar h2 { font-size: 26px !important; }
  [style*="grid-template-columns: 1.05fr"], [style*="grid-template-columns: 0.9fr"],
  [style*="grid-template-columns: 1.15fr"], [style*="grid-template-columns: 210px"],
  [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns: repeat(2" ] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(5"], [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  #mf-en section, #mf-ar section { padding-top: 56px !important; padding-bottom: 56px !important; }
  #mf-en aside, #mf-ar aside { display: none !important; }
}
@media (max-width: 560px) {
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
  #mf-en h1, #mf-ar h1 { font-size: 32px !important; }
  [style*="gap: 14px; flex-wrap: wrap"] > a { flex: 1 1 100% !important; text-align: center !important; }
  #mf-en section > div > p, #mf-ar section > div > p { max-width: none !important; }
}

/* ================================================================
   Motion polish
   ----------------------------------------------------------------
   Everything below is progressive enhancement. The hidden/animated
   states only apply under html.mf-anim-ready, a class added by
   assets/mifactro-animations.js — and only once that script has
   confirmed the visitor has not asked for reduced motion. If the
   script never runs (blocked, slow, errors), nothing here ever
   hides content: every element stays in its normal, visible state.
   ================================================================ */

/* -- buttons & links: instant, tactile feedback instead of a flat colour swap -- */
.mf-h1, .mf-h2, .mf-h3, .mf-h4, .mf-h5,
#mf-en nav a, #mf-ar nav a {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.mf-h1:active, .mf-h2:active, .mf-h3:active, .mf-h4:active, .mf-h5:active {
  transform: scale(.97);
}
.mf-h3:hover, .mf-h5:hover { box-shadow: 0 10px 24px -8px rgba(22,104,240,.55); }

/* -- header: frosted, with a little more depth once the page scrolls -- */
#mf-en > header, #mf-ar > header {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  transition: box-shadow .3s ease, border-color .3s ease;
}

/* -- scroll reveal: problem/feature cards, dashboard KPIs, the dashboard mock, setup steps -- */
html.mf-anim-ready [style*="border: 1px solid rgba(28,30,33,0.1)"],
html.mf-anim-ready [style*="border-bottom: 1px solid rgba(28,30,33,0.14)"],
html.mf-anim-ready [style*="0 34px 70px -26px rgba(0,0,0,0.7)"] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
html.mf-anim-ready [style*="border: 1px solid rgba(28,30,33,0.1)"].mf-visible,
html.mf-anim-ready [style*="border-bottom: 1px solid rgba(28,30,33,0.14)"].mf-visible,
html.mf-anim-ready [style*="0 34px 70px -26px rgba(0,0,0,0.7)"].mf-visible {
  opacity: 1;
  transform: none;
}

/* -- feature icons: stroke draw-on once their card is on screen -- */
html.mf-anim-ready div[style*="background: #EAF1FE"] > svg path,
html.mf-anim-ready div[style*="background: #EAF1FE"] > svg circle,
html.mf-anim-ready div[style*="background: #EAF1FE"] > svg ellipse {
  transition: stroke-dashoffset .8s cubic-bezier(.65,0,.35,1);
}

/* -- dashboard bar segments: fill in on a transform, never on width (stays 60fps) -- */
html.mf-anim-ready div[style*="height: 6px; background: rgba(28,30,33,0.08)"] > div,
html.mf-anim-ready div[style*="height: 8px; background: rgba(28,30,33,0.08)"] > div {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
html.mf-anim-ready [dir="rtl"] div[style*="height: 6px; background: rgba(28,30,33,0.08)"] > div,
html.mf-anim-ready [dir="rtl"] div[style*="height: 8px; background: rgba(28,30,33,0.08)"] > div {
  transform-origin: right;
}
html.mf-anim-ready div[style*="height: 6px; background: rgba(28,30,33,0.08)"] > div.mf-visible,
html.mf-anim-ready div[style*="height: 8px; background: rgba(28,30,33,0.08)"] > div.mf-visible {
  transform: scaleX(1);
}

/* -- demo request result banner: settles in instead of appearing flat -- */
#mf-en div[style*="margin-top: 14px; padding: 12px 14px"],
#mf-ar div[style*="margin-top: 14px; padding: 12px 14px"] {
  animation: mf-banner-in .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes mf-banner-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* -- reduced motion: keep the outcome, drop the motion (WCAG 2.3.3 / C39) -- */
@media (prefers-reduced-motion: reduce) {
  html.mf-anim-ready [style*="border: 1px solid rgba(28,30,33,0.1)"],
  html.mf-anim-ready [style*="border-bottom: 1px solid rgba(28,30,33,0.14)"],
  html.mf-anim-ready [style*="0 34px 70px -26px rgba(0,0,0,0.7)"] {
    opacity: 1 !important;
    transform: none !important;
  }
  html.mf-anim-ready div[style*="height: 6px; background: rgba(28,30,33,0.08)"] > div,
  html.mf-anim-ready div[style*="height: 8px; background: rgba(28,30,33,0.08)"] > div {
    transform: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}