/* ======================================================
   GLOBAL UTILITY CLASSES FOR SANTA HOME VISITS PAGE
   ====================================================== */

/* ---------- TEXT COLORS ---------- */
.text-hj-gold { color: var(--hj-gold) !important; }
.text-ink { color: var(--ink) !important; }
.text-muted { color: var(--muted) !important; }
.text-white { color: white !important; }
.text-black { color: black !important; }

/* ---------- BACKGROUND COLORS ---------- */
.bg-hj-gold { background-color: var(--hj-gold) !important; }
.bg-bg-1 { background-color: var(--bg-1) !important; }
.bg-panel { background-color: var(--panel) !important; }
.bg-panel-2 { background-color: var(--panel-2) !important; }
.bg-black { background-color: black !important; }
.bg-transparent { background-color: transparent !important; }


/* ---------- BACKGROUND WITH OPACITY ---------- */
.bg-hj-gold-20 { background-color: rgba(212, 175, 55, 0.2) !important; }
.bg-hj-gold-10 { background-color: rgba(212, 175, 55, 0.1) !important; }
.bg-panel-80 { background-color: rgba(17, 21, 23, 0.8) !important; }
.bg-black-40 { background-color: rgba(0, 0, 0, 0.4) !important; }

/* ---------- BORDERS ---------- */
.border-stroke { border-color: var(--stroke) !important; }
.border-hj-gold { border-color: var(--hj-gold) !important; }
.border-transparent { border-color: transparent !important; }

/* ---------- TRANSITIONS ---------- */
.transition-all { transition: all 0.3s ease !important; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease !important; }
.transition-transform { transition: transform 0.3s ease !important; }
.duration-300 { transition-duration: 300ms !important; }

/* ---------- FOCUS STATES ---------- */
.focus-outline-none:focus { outline: none !important; }
.focus-ring-2:focus { box-shadow: 0 0 0 2px var(--ring) !important; }
.focus-ring-hj-gold:focus { box-shadow: 0 0 0 2px var(--hj-gold) !important; }

/* ---------- BACKDROP FILTERS ---------- */
.backdrop-blur-sm { backdrop-filter: blur(4px) !important; }

/* ---------- OPACITY ---------- */
.opacity-5 { opacity: 0.05 !important; }
.opacity-10 { opacity: 0.1 !important; }
.opacity-20 { opacity: 0.2 !important; }
.opacity-40 { opacity: 0.4 !important; }
.opacity-60 { opacity: 0.6 !important; }

/* ---------- TRANSFORMS ---------- */
.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; }
.-translate-x-1-2 { --tw-translate-x: -50% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; }
.translate-y-0 { --tw-translate-y: 0px !important; }
.-translate-y-5 { --tw-translate-y: -1.25rem !important; }

/* ---------- ANIMATIONS ---------- */
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; }
.animate-bounce { animation: bounce 1s infinite !important; }
.animate-float { animation: float 6s ease-in-out infinite !important; }
.animate-glow { animation: glow 2s ease-in-out infinite alternate !important; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes glow {
  0% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.5); }
  100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.8); }
}

/* Custom styles beyond Tailwind */
body {
    scroll-behavior: smooth;
}

.brand-font {
    font-family: 'Oleo Script', cursive;
}

.gold-gradient {
    background: linear-gradient(180deg, #d4af37, #b8941f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pulse-gold {
    animation: pulse-gold 2.5s infinite;
}

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(212,175,55,.7); }
    70% { box-shadow: 0 0 0 15px rgba(212,175,55,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.45);
}



.hero-content {
    position: relative;
    z-index: 2;
}
.badge { }
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}
.lp-corp-logos {filter: grayscale(1) brightness(1.05);}
.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.12);
    border: 2px solid #d4af37;
    color: #d4af37;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
}

.service-icon:hover {
    background: rgba(212,175,55,0.2);
    transform: scale(1.1);
}

.section-divider {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-divider .chevron {
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%) rotate(180deg);
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNTAiPjxwYXRoIGQ9Ik0xMDAgMGwtNTAgNTAtNTAtNTAiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=") no-repeat center/contain;
    width: 150px;
    height: 75px;
}

.divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, rgba(212,175,55,0), #d4af37);
}

.divider-line:last-child {
    background: linear-gradient(to left, rgba(212,175,55,0), #d4af37);
}

.location-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px dashed rgba(214,179,106,0.34);
    border-radius: 999px;
    color: #f4f2eb;
    background: linear-gradient(180deg, rgba(214,179,106,.08), rgba(214,179,106,.02));
    font-weight: 700;
}
@media(max-width:640px){
.location-badge {display:block;}
.location-badge i {display:block;margin-bottom:7px;}
}
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Improved FAQ functionality */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* Enhanced button styles */
.btn-primary {
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #000;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #e7d2a1, #d6b36a);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212,175,55,0.4);
}

.btn-secondary {
    background: transparent;
    color: #d4af37;
    border: 2px solid #d4af37;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(212,175,55,0.1);
    transform: translateY(-2px);
}

/* Improved text readability */
.text-balance {
    text-wrap: balance;
}

/* Enhanced image hover effects */
.image-hover {
    transition: transform 0.5s ease;
    overflow: hidden;
}

.image-hover:hover {
    transform: scale(1.03);
}

/* Better spacing for mobile */
@media (max-width: 768px) {
    .section-padding {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .hero-heading {
        font-size: 2.5rem;
    }
}