/*
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. Includes a custom home page, How it works, Pricing (with monthly/yearly toggle), FAQ, Blog, and auth pages. Converted from the original static HTML design.
Version: 1.1.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}
body{
  margin:0;
  background:#ffffff;
  color:#0f1729;
  font-family:Manrope,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
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 used on the "How it works" page */
@keyframes fxspark{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes fxpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(91,33,230,.35)}50%{transform:scale(1.06);box-shadow:0 0 0 12px rgba(91,33,230,0)}}

/* ==========================================================================
   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;
  }
  /* Let the sticky nav wrap instead of overflowing */
  nav[aria-label="Main"]{
    flex-wrap:wrap;
    gap:14px 20px;
  }
  /* Auth pages: stack the two panes and let them grow with content */
  [style*="min-height:100vh"][style*="grid-template-columns"]{
    min-height:0 !important;
  }
}

@media (max-width:600px){
  /* Tame the very large display headings on small screens */
  h1{font-size:38px !important;line-height:1.08 !important}
  h2{font-size:30px !important}
  /* Hide the center nav links on phones to keep the header tidy;
     the footer still carries every link. */
  nav[aria-label="Main"] > div:nth-child(2){display:none}
}