/*
Theme Name: Flexiliti
Theme URI: https://flexiliti.com/
Author: Flexiliti
Author URI: https://flexiliti.com/
Description: Flexiliti — a conversion-focused marketing theme for Amazon Flex & Whole Foods block-grabbing apps. Custom home page, How it works (with video), Pricing (monthly/yearly toggle), FAQ and Blog, a Download-app call to action, a bottom-sheet mobile menu, and per-section editable custom fields. Converted from the original static HTML design.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flexiliti
*/

/* ==========================================================================
   Base — mirrors the original static design
   ========================================================================== */
*{box-sizing:border-box}
/* This is an English, left-to-right theme: force LTR + left alignment even
   when WordPress is installed in a right-to-left language (e.g. Persian). */
html{direction:ltr}
body{
  margin:0;
  background:#ffffff;
  color:#0f1729;
  font-family:Manrope,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  direction:ltr;
  text-align:left;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth}

details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}

input:focus,textarea:focus{
  outline:none;
  border-color:#5b21e6 !important;
  box-shadow:0 0 0 3px rgba(91,33,230,.14);
}

/* Blog post body typography (matches original single-post styles) */
.post p{font-size:18px;line-height:1.75;color:#33404f;margin:0 0 22px}
.post h2{font-size:29px;font-weight:800;letter-spacing:-.02em;margin:44px 0 16px;color:#0f1729}
.post h3{font-size:21px;font-weight:700;margin:32px 0 12px;color:#0f1729}
.post ul,.post ol{margin:0 0 22px;padding-left:22px}
.post li{font-size:18px;line-height:1.7;color:#33404f;margin:0 0 10px}
.post strong{color:#0f1729}
.post a{color:#5b21e6;font-weight:700}
.post img{border-radius:16px;margin:0 0 22px}
.post blockquote{margin:36px 0;padding:24px 28px;border-left:4px solid #5b21e6;background:#faf8ff;border-radius:0 14px 14px 0;font-size:20px;line-height:1.55;font-weight:600;color:#2c3446}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fxspark{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes fxsparkv{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
@keyframes fxpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(157,92,255,.4)}50%{transform:scale(1.07);box-shadow:0 0 0 12px rgba(157,92,255,0)}}
@keyframes fxpulsel{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(91,33,230,.32)}50%{transform:scale(1.06);box-shadow:0 0 0 11px rgba(91,33,230,0)}}
@keyframes fxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes fxblink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@keyframes fxfadein{from{opacity:0}to{opacity:1}}
@keyframes fxsheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* ==========================================================================
   Header navigation — desktop links + hamburger + bottom-sheet menu
   ========================================================================== */
.fx-burger{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border:1px solid rgba(15,23,41,.12);
  background:#fff;border-radius:12px;cursor:pointer;padding:0;
}

/* Bottom-sheet mobile menu */
.fx-sheet{
  position:fixed;inset:0;z-index:90;
  background:rgba(11,7,19,.45);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:none;flex-direction:column;justify-content:flex-end;
  animation:fxfadein .18s ease;
}
.fx-sheet.fx-open{display:flex}
.fx-sheet-panel{
  position:relative;
  background:#fff;border-radius:26px 26px 0 0;
  box-shadow:0 -24px 60px -30px rgba(11,7,19,.5);
  padding:14px 18px 28px;
  animation:fxsheetup .28s cubic-bezier(.22,1,.36,1);
}
.fx-sheet-grabber{width:40px;height:5px;border-radius:5px;background:#e2ddef;margin:0 auto 16px}
/* Keep the close control visible and easy to tap inside the mobile sheet. */
.fx-sheet-close{
  position:absolute;top:14px;right:18px;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:1px solid rgba(15,23,41,.12);
  border-radius:11px;background:#fff;color:#0f1729;cursor:pointer;
}
.fx-sheet-close:hover{background:#f7f4fe;color:#5b21e6}
.fx-sheet-close:focus-visible{outline:2px solid #5b21e6;outline-offset:2px}
.fx-sheet-links{display:flex;flex-direction:column;gap:2px}
.fx-sheet-links a{display:flex;align-items:center;gap:14px;padding:13px 8px;border-radius:12px;color:#0f1729}
.fx-sheet-links a:hover{background:#f7f4fe}
.fx-sheet-links a[aria-current="page"] span:last-child{color:#5b21e6}
.fx-sheet-ic{flex:none;width:38px;height:38px;border-radius:11px;background:#f4f0fe;display:flex;align-items:center;justify-content:center}
.fx-sheet-links a span:last-child{font-size:16px;font-weight:700}
.fx-sheet-cta{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;
  font-size:15px;font-weight:700;color:#fff;background:#5b21e6;
  padding:15px;border-radius:13px;box-shadow:0 12px 28px -12px rgba(91,33,230,.7);
}

/* ==========================================================================
   How It Works — split hero with video
   ========================================================================== */
.fx-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;max-width:1180px;margin:0 auto;padding:80px 32px 72px}
.fx-hero h1{font-size:54px;line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:0 0 22px;text-wrap:balance}
.fx-hero p.sub{font-size:19px;line-height:1.6;color:#5b6b7f;margin:0 0 32px;max-width:520px}
.fx-hero-media{position:relative;border-radius:24px;overflow:hidden;background:#0f1729;border:1px solid rgba(15,23,41,.1);box-shadow:0 40px 90px -40px rgba(91,33,230,.55)}
.fx-hero-media .fx-video-wrap{position:relative;width:100%;aspect-ratio:16/9}
.fx-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.fx-hero-media .fx-video-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font:500 13px ui-monospace,monospace;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 12px,rgba(255,255,255,.09) 12px,rgba(255,255,255,.09) 24px)}
@media (max-width:860px){
  .fx-hero{grid-template-columns:1fr !important;gap:36px;padding:52px 22px 56px;text-align:center}
  .fx-hero h1{font-size:38px}
  .fx-hero p.sub{font-size:17px;margin-left:auto;margin-right:auto}
  .fx-hero .fx-cta{justify-content:center}
  .fx-hero-media{order:-1}
}

/* ==========================================================================
   Responsive — the original design is desktop-only, so we add graceful
   collapsing for tablet / mobile without touching the inline markup.
   ========================================================================== */
@media (max-width:900px){
  /* Collapse any multi-column grid to a single column */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:1.15fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:.9fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.05fr"]{
    grid-template-columns:1fr !important;
  }
  /* Auth pages: stack the two panes and let them grow with content */
  [style*="min-height:100vh"][style*="grid-template-columns"]{
    min-height:0 !important;
  }
}

/* Swap the desktop nav for the hamburger on tablet / phone (design breakpoint).
   The desktop links carry an inline display:flex, so !important is required. */
@media (max-width:860px){
  .fx-desktop-nav,
  .fx-desktop-cta{display:none !important}
  .fx-burger{display:flex !important}
}

@media (max-width:600px){
  /* Tame the very large display headings on small screens */
  h1{font-size:36px !important;line-height:1.08 !important}
  h2{font-size:28px !important}
  /* Reduce the generous section padding so content isn't lost in whitespace */
  [style*="padding:96px 32px"],
  [style*="padding:88px 32px"]{padding-left:20px !important;padding-right:20px !important}
}

/* Theme carousels: Swiper is enabled below the lg breakpoint. */
@media (min-width:1024px){
  .fx-mobile-swiper{overflow:visible !important}
  .fx-mobile-swiper .swiper-wrapper{transform:none !important}
  [data-fx-swiper="trust"] .swiper-wrapper{display:flex !important;align-items:center !important;justify-content:space-around !important;gap:20px !important;flex-wrap:wrap !important}
  [data-fx-swiper="stats"] .swiper-wrapper,
  [data-fx-swiper="pricing"] .swiper-wrapper,
  [data-fx-swiper="testimonials"] .swiper-wrapper{display:grid !important;transform:none !important}
  [data-fx-swiper="stats"] .swiper-wrapper{grid-template-columns:repeat(3,1fr);gap:0}
  [data-fx-swiper="pricing"] .swiper-wrapper,
  [data-fx-swiper="testimonials"] .swiper-wrapper{grid-template-columns:repeat(3,1fr);gap:24px}
  .fx-mobile-swiper .swiper-slide{width:auto !important;margin-right:0 !important}
}

@media (max-width:1023px){
  .fx-mobile-swiper{overflow:hidden !important;width:100%}
  .fx-mobile-swiper .swiper-wrapper{display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;align-items:stretch !important;gap:0 !important}
  .fx-mobile-swiper .swiper-slide{flex:0 0 auto;box-sizing:border-box}
  [data-fx-swiper="trust"] .swiper-slide{justify-content:flex-start}
  [data-fx-swiper="stats"] .swiper-slide{border-right:0 !important}
}

/* Trust-strip icon and text retain the original desktop design. */
.fx-trust-ready{font-size:0 !important}
.fx-trust-ready .fx-trust-label{font-size:14px;color:#5b6b7f}
.fx-trust-ready .fx-trust-icon{display:block;flex:none;margin-right:8px}
.fx-legacy-trust{display:none !important}