/* ============================================================================
   Kover — Appearance > Customize > Additional CSS
   ============================================================================
   Free-Elementor replacement for what Elementor Pro's per-widget Custom CSS
   panel would otherwise do (see MIGRATION-PLAN.md §2/§3, INVENTORY.md
   caveat #5). Targets Elementor's stable framework-level widget classes
   (.elementor-widget-*, .elementor-button, etc.) rather than per-instance
   IDs, so this survives re-importing/editing the page templates.

   Note: some of the base.css hover behavior below is achievable natively in
   free Elementor's per-widget Style > Hover tab (e.g. button background/text
   color on hover already has a native control, no Pro needed for that part)
   — this file only covers the pieces that don't have a native free-tier
   equivalent: transform + combined box-shadow on hover, and the smooth-
   scroll behavior for anchor links.
   ============================================================================ */

/* === SMOOTH SCROLL (base.css: html { scroll-behavior: smooth }) ========== */
/* Restores the anchor-nav smooth scroll for #cotizar / #faq / #como-funciona
   / #aliados links (source used this natively, Elementor doesn't set it). */
html {
  scroll-behavior: smooth;
}

/* === FEATURE / ICON CARDS (base.css .feature-card:hover) ================= */
/* Applies to Icon Box widgets used for the "Por qué Kover" grid (home.json)
   and the 4-card feature grids (auto/conduces/mascotas.json). */
.elementor-widget-icon-box {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.elementor-widget-icon-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 33, 105, 0.14), 0 2px 8px rgba(0, 33, 105, 0.06);
  border-color: #FF5F00;
}

/* === PRODUCT / PLAN CARDS (base.css .product-card:hover, mascotas pricing) */
/* Icon List widgets wrapped in a bordered container (product cards on home,
   pet plan cards on mascotas) get the same lift-on-hover treatment. Scope
   is intentionally broad (.elementor-widget-icon-list) since these are
   built from icon-list + heading + button stacked in a column, not a single
   widget type — verify visually per page after the CSS applies and narrow
   the selector to a specific column wrapper class if it over-applies. Uses
   :has() (baseline-supported in all major browsers since ~2023/2024) — on
   the rare older browser without support this rule is simply ignored, no
   breakage, just a missed hover flourish. */
.elementor-column:has(.elementor-widget-icon-list) {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.elementor-column:has(.elementor-widget-icon-list):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* === PRIMARY BUTTON SHADOW (base.css .btn--primary box-shadow) =========== */
/* The accent-orange CTA shadow isn't a native Elementor button style field
   (only background/border/color are) — add it globally to any button using
   the 'primary' button_type. */
.elementor-button.elementor-button-primary,
a.elementor-button[class*="primary"] {
  box-shadow: 0 4px 14px rgba(255, 95, 0, 0.35);
}
.elementor-button.elementor-button-primary:hover,
a.elementor-button[class*="primary"]:hover {
  transform: translateY(-1px);
}

/* === MOBILE NAV (base.css .site-nav { display: none } below 768px) ======= */
/* Faithful (if minimal) port of the source's mobile behavior for the plain
   text-editor nav link list used in header.json — see MIGRATION-PLAN.md §5
   and §11 QA checklist note on why a real toggleable mobile menu (e.g. via
   HFE's Nav Menu widget) is the better long-term fix. */
@media (max-width: 767px) {
  #site-header .elementor-widget-text-editor {
    display: none;
  }
}

/* === REDUCED MOTION ======================================================= */
/* Belt-and-suspenders — header.json/footer.json already scope this via each
   inline <style> tag's own @media query, this covers any other animated
   element added later outside those two widgets. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}