/* Typography */
h1, h2, h3 {
    font-family: 'Young Serif', serif;
}

body {
    font-family: 'Quicksand', sans-serif;
}

/* Menu links (#store, #subscriptions...) stop below the sticky header (80px tall), so each
   section's own top padding stays visible instead of sliding under the header */
section[id] {
    scroll-margin-top: 5rem;
}

/* Custom styles for small details */
/* Home page photo (Unsplash, served from img/): WebP where the browser supports it, JPEG otherwise,
   and a narrower portrait crop on phones. index.html preloads the WebP files. */
.hero-bg {
    background-color: #3f4c10;
    background-image: url('../img/hero.jpg');
    background-image: image-set(url('../img/hero.webp') type('image/webp'), url('../img/hero.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center;
}

@media (max-width: 767px) {
    .hero-bg {
        background-image: url('../img/hero-mobile.jpg');
        background-image: image-set(url('../img/hero-mobile.webp') type('image/webp'), url('../img/hero-mobile.jpg') type('image/jpeg'));
    }
}

.menu-card:hover .menu-card-image {
    transform: scale(1.05);
}

/* Remove dropdown arrow from select elements */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding-right: 1rem;
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

/* Notification fade-in animation */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(20px) translateX(20px);
    }
    5% {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
    95% {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateY(20px) translateX(20px);
    }
}

.animate-fade-in {
    animation: fadeInOut 5s ease-in-out;
}

/* Cart circle pulse animation */
@keyframes pulseCircle {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.animate-pulse-circle {
    animation: pulseCircle 1s ease-out;
}

/* Hide Vue elements before mounting to prevent flash of content */
[v-cloak] {
    display: none !important;
}

/* Extra safety for contact modal */
[v-cloak][v-show="contactModalOpen"] {
    display: none !important;
}

/* How It Works section icon backgrounds */
.how-it-works-icon {
    background-color: #3f4c10;
}

.how-it-works-icon img {
    filter: brightness(0) invert(1);
}