/**
 * Base Theme - Custom Styles
 *
 * This file contains theme-specific customizations.
 * Override colors using CSS variables from theme.json:
 * --theme-primary, --theme-secondary, etc.
 */

/* Use theme colors if defined */
:root {
    --primary: var(--theme-primary, #1a73e8);
    --primary-dark: var(--theme-primary-dark, #1557b0);
    --secondary: var(--theme-secondary, #34a853);
    --accent: var(--theme-accent, #fbbc04);
    --error: var(--theme-error, #ea4335);
}

/* Base theme specific styles */
.hero-section {
    min-height: 500px;
}

/* Product card hover effect */
.product-card {
    transition: box-shadow 0.3s ease;
}

/* Category cards */
.category-card {
    transition: transform 0.3s ease;
}

.category-card:hover {
    transform: scale(1.02);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Loading animation */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Price styling */
.product-card-price .current {
    color: var(--primary);
}

/* Mobile menu improvements */
@media (max-width: 768px) {
    .hero-section {
        min-height: 350px;
    }

    /* These two used to set 2rem/1.5rem, written as if 1rem were 16px. The
       theme roots at 62.5%, so they resolved to 20px and 15px: every section
       heading on mobile came out smaller than the 14px body copy. The shared
       tokens carry the mobile step now, so there is nothing to override. */
}

/* ========================================
   Sticky Section Heading
   Shows current section name as a compact
   bar when the section heading scrolls out.
======================================== */
.sticky-section-heading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border, #ebebeb);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
    pointer-events: none;
}

.sticky-section-heading.is-visible {
    /* --header-height-actual is measured from the header element in theme.js.
       The old --height-header token said 80px while the real laptop header is
       111px (63px top row + 48px nav), which left the bar sitting 31px high,
       cutting the nav row in half. */
    transform: translateY(var(--header-height-actual, var(--height-header, 80px)));
    opacity: 1;
    pointer-events: auto;
}

.sticky-section-heading.header-hidden {
    transform: translateY(0);
}

.sticky-section-heading__text {
    display: block;
    padding: 1rem 0;
    font-family: var(--heading-font, 'DM Sans', sans-serif);
    font-size: 1.5rem;
    font-weight: var(--heading-weight, 600);
    color: var(--color-heading, #111);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Below laptop the floating bar is a second fixed strip under a header that
   already takes 64px of a short viewport, and it overlays the content it
   describes. Desktop keeps it; phones and tablets do not get it. */
@media (max-width: 1024px) {
    .sticky-section-heading,
    .sticky-section-heading.is-visible {
        display: none;
    }
}