/*
Theme Name: Advantage20X
Theme URI: https://fein.wildcatsites.com/
Description: Child theme of Hello Elementor for the Advantage20X site. All custom CSS and PHP live here so the Hello Elementor parent theme can be updated safely without losing customizations.
Author: Wildcat SEO
Author URI: https://wildcatseo.com/
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: advantage20x
*/

/* ==========================================================================
   Custom CSS
   Add site-specific style overrides below.
   ========================================================================== */


/* ===== Advantage20X rebuild: responsive helpers (documented) =====
   Added for the Elementor rebuild. Handles the few things best done site-wide
   in CSS rather than per-widget: stacking the homepage hero and scaling the
   oversized hero headlines on phones. Card grids already wrap natively. */
@media (max-width: 880px){
  /* Homepage hero: switch the two columns to a single stacked column */
  .elementor-element-hmhero{ flex-direction: column !important; }
  .elementor-element-hmherol, .elementor-element-hmheror{ width: 100% !important; }
  .elementor-element-hmherol{ text-align: center; align-items: center; }
}
@media (max-width: 767px){
  /* Scale large hero headlines down on phones */
  .elementor-element-hmh1a .elementor-heading-title,
  .elementor-element-hmh1b .elementor-heading-title{ font-size: 38px !important; }
  .elementor-element-dsth .elementor-heading-title,
  .elementor-element-shh .elementor-heading-title,
  .elementor-element-useh .elementor-heading-title,
  .elementor-element-abh .elementor-heading-title,
  .elementor-element-revh .elementor-heading-title,
  .elementor-element-ach .elementor-heading-title{ font-size: 32px !important; }
}
/* ===== end rebuild responsive helpers ===== */


/* ===== Current Specials: four product images on a single row ===== */
.elementor-element-hmspecrow{ flex-wrap: nowrap !important; align-items: stretch; }
.elementor-element-hmspecrow > .elementor-element{ flex: 1 1 0 !important; min-width: 0 !important; }
.elementor-element-hmspecrow .elementor-widget-image,
.elementor-element-hmspecrow .elementor-widget-image img{ width: 100% !important; height: auto; }
@media (max-width: 767px){
  .elementor-element-hmspecrow{ flex-wrap: wrap !important; }
  .elementor-element-hmspecrow > .elementor-element{ flex: 1 1 45% !important; }
}
/* ===== end Current Specials row ===== */


/* ===== Mobile header layout: logo left, hamburger right (documented) ===== */
@media (max-width: 767px){
  .elementor-element-hdrnav1{ position: relative; flex-wrap: nowrap; }
  /* show only logo + hamburger on phones */
  .elementor-element-hdricns{ display: none !important; }
  .elementor-element-hdrmenu{ margin-left: auto; }
  /* readable, tappable hamburger button */
  .elementor-element-hdrmenu .elementor-menu-toggle{ margin-left: auto !important; color: #0F172A !important; padding: 6px; }
  .elementor-element-hdrmenu .elementor-menu-toggle i,
  .elementor-element-hdrmenu .elementor-menu-toggle svg{ font-size: 32px !important; width: 32px !important; height: 32px !important; }
  /* full-width dropdown that overlays so the logo never shifts down */
  .elementor-element-hdrmenu .elementor-nav-menu--dropdown{ background: #FFFFFF !important; box-shadow: 0 12px 24px rgba(15,23,42,0.12) !important; }
  .elementor-element-hdrmenu .elementor-nav-menu--dropdown a.elementor-item{ font-size: 17px !important; font-weight: 600 !important; color: #0F172A !important; padding: 16px 24px !important; line-height: 1.2 !important; border-bottom: 1px solid #E2E8F0 !important; }
}
/* ===== end mobile header layout ===== */


/* ===== Current Specials: dynamic hover effect (documented) ===== */ .elementor-element-hmspecrow{perspective:1400px} .elementor-element-hmspecrow .elementor-widget-image{position:relative;border-radius:18px;overflow:hidden;background:#fff;transform-style:preserve-3d;cursor:pointer;will-change:transform;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s ease;box-shadow:0 6px 16px rgba(15,23,42,.08)} .elementor-element-hmspecrow .elementor-widget-image img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.8,.2,1)} .elementor-element-hmspecrow .elementor-widget-image::after{content:"";position:absolute;inset:0;border-radius:18px;padding:2.5px;background:linear-gradient(130deg,#4A9A2D,#A7F3D0,#2563EB,#4A9A2D);background-size:300% 300%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:3} .elementor-element-hmspecrow .elementor-widget-image::before{content:"";position:absolute;top:0;left:-130%;width:65%;height:100%;z-index:4;background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);pointer-events:none} .elementor-element-hmspecrow .elementor-widget-image:hover{transform:translateY(-16px) scale(1.06) rotateX(7deg) rotateY(-7deg);box-shadow:0 30px 60px -14px rgba(74,154,45,.6),0 10px 24px rgba(15,23,42,.2);animation:advGlow 1.6s ease-in-out infinite} .elementor-element-hmspecrow > .elementor-element:nth-child(even) .elementor-widget-image:hover{transform:translateY(-16px) scale(1.06) rotateX(7deg) rotateY(7deg)} .elementor-element-hmspecrow .elementor-widget-image:hover img{transform:scale(1.14)} .elementor-element-hmspecrow .elementor-widget-image:hover::after{opacity:1;animation:advRing 4s linear infinite} .elementor-element-hmspecrow .elementor-widget-image:hover::before{animation:advShine .9s ease forwards} @keyframes advShine{from{left:-130%}to{left:150%}} @keyframes advRing{0%{background-position:0% 50%}100%{background-position:300% 50%}} @keyframes advGlow{0%,100%{box-shadow:0 30px 60px -14px rgba(74,154,45,.6),0 10px 24px rgba(15,23,42,.2)}50%{box-shadow:0 36px 70px -10px rgba(74,154,45,.85),0 10px 24px rgba(15,23,42,.2)}} @media (hover:none){.elementor-element-hmspecrow .elementor-widget-image:hover{transform:translateY(-6px) scale(1.02);animation:none}} @media (prefers-reduced-motion:reduce){.elementor-element-hmspecrow .elementor-widget-image,.elementor-element-hmspecrow .elementor-widget-image img{transition:none}.elementor-element-hmspecrow .elementor-widget-image:hover{animation:none}} /* ===== end Current Specials hover ===== */