/*
Theme Name: PGI Custom
Template:   hello-elementor
Description: Child theme for PGI Webste
Author: Hutton Smith
Author URI: https://pets-global.com
Version: 1.0.0
 */
/* ======================================
   VARIABLES
====================================== */
:root {
  /* Color Palette - Customize these to match your brand */
  --primary: #F3D03E;
  --primary-dark: #2a5080;
  --secondary: #6CC24A;
  --accent: #6c63ff;
  --text: #333333;
  --text-light: #666666;
  --background: #ffffff;
  --background-alt: #f9f9f9;
  --border: #e0e0e0;
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;

  --pgi-green: #6DBF54;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;

  /* Border Radius - scale up at breakpoints (override in media queries below) */
  --radius: 4px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

@media (min-width: 576px) {
  :root {
    --radius: 4px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
  }
}

@media (min-width: 768px) {
  :root {
    --radius: 6px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 24px;
  }
}

@media (min-width: 992px) {
  :root {
    --radius: 8px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
  }
}

@media (min-width: 1200px) {
  :root {
    --radius: 8px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
  }
}

/* ======================================
   ENTRANCE ANIMATIONS (viewport-triggered)
   Add pgi-fade-in-up or pgi-fade-in to any element;
   animation runs when it enters the viewport.
   Optional: threshold-10, threshold-25, … (when to trigger); delay-100, delay-200, … (stagger); duration-300, duration-800, … (speed).
   JS: assets/js/entrance-animations.js
   Elementor: inc/elementor-animations.php
====================================== */

/* Start hidden; animate when .pgi-in-view is added by JS */
.pgi-fade-in-up,
.pgi-fade-in {
  opacity: 0;
}

.pgi-fade-in-up {
  transform: translate3d(0, 30px, 0);
}

.pgi-fade-in-up.pgi-in-view,
.pgi-fade-in.pgi-in-view {
  animation-fill-mode: both;
}

.pgi-fade-in-up.pgi-in-view {
  animation-name: pgiFadeInUp;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.5, 0, 0, 1);
}

.pgi-fade-in.pgi-in-view {
  animation-name: pgiFadeIn;
  animation-duration: 0.6s;
}

/* Entrance delay utilities – use with pgi-fade-in-up / pgi-fade-in */
.delay-0   { animation-delay: 0ms; }
.delay-75  { animation-delay: 75ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Entrance duration utilities – override default (fade-in-up 0.8s, fade-in 0.6s) */
.pgi-in-view.duration-200  { animation-duration: 200ms; }
.pgi-in-view.duration-300  { animation-duration: 300ms; }
.pgi-in-view.duration-400  { animation-duration: 400ms; }
.pgi-in-view.duration-500  { animation-duration: 500ms; }
.pgi-in-view.duration-600  { animation-duration: 600ms; }
.pgi-in-view.duration-800  { animation-duration: 800ms; }
.pgi-in-view.duration-1000 { animation-duration: 1000ms; }
.pgi-in-view.duration-1200 { animation-duration: 1200ms; }
.pgi-in-view.duration-1500 { animation-duration: 1500ms; }

@keyframes pgiFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(50%);
    visibility: visible;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes pgiFadeIn {
  0% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
  }
}

.img-full-cover {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.img-full-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* Rounded classes - use variables that scale by breakpoint */
.rounded      { border-radius: var(--radius) !important; }
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }


.btn a {
  transition: 
    transform 0.18s cubic-bezier(.4,1,.5,1), 
    box-shadow 0.18s cubic-bezier(.4,1,.5,1),
    background-color 0.18s cubic-bezier(.4,1,.5,1),
    color 0.18s cubic-bezier(.4,1,.5,1);
}

/* Button hover/focus shadow & scale */
.btn a:hover,
.btn a:focus-visible {
  transform: scale(1.045);
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.14), 0 1.5px 4px rgba(10, 10, 10, 0.09);
  z-index: 1;
}

.btn-dark {

}

/* White button hover: white background, black text */
.btn-white a:hover,
.btn-white a:focus-visible {
  background-color: #fff !important;
  color: #282B27 !important;
}