/**
 * Base Styles
 * 
 * @package ChildTheme_Clean
 */

/* Reset and base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #111827;
    background-color: #F9FAFB;
    padding-top: calc(var(--announcement-bar-height-mobile, 32px) + var(--header-height-mobile, 56px));
    transition: padding-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Account for WordPress admin bar */
.admin-bar body {
    padding-top: calc(var(--announcement-bar-height-mobile, 32px) + var(--header-height-mobile, 56px) + 32px);
}

@media (min-width: 783px) {
    .admin-bar body {
        padding-top: calc(var(--announcement-bar-height-mobile, 32px) + var(--header-height-mobile, 56px) + 46px);
    }
}

@media (min-width: 1025px) {
    body {
        padding-top: calc(var(--announcement-bar-height-desktop, 45px) + var(--header-height-desktop, 80px));
    }

    .admin-bar body {
        padding-top: calc(var(--announcement-bar-height-desktop, 45px) + var(--header-height-desktop, 80px) + 46px);
    }
}

/* When announcement bar is hidden, reduce padding */
body.announcement-hidden {
    padding-top: var(--header-height-mobile, 56px);
}

.admin-bar body.announcement-hidden {
    padding-top: calc(var(--header-height-mobile, 56px) + 32px);
}

@media (min-width: 783px) {
    .admin-bar body.announcement-hidden {
        padding-top: calc(var(--header-height-mobile, 56px) + 46px);
    }
}

@media (min-width: 1025px) {
    body.announcement-hidden {
        padding-top: var(--header-height-desktop, 80px);
    }

    .admin-bar body.announcement-hidden {
        padding-top: calc(var(--header-height-desktop, 80px) + 46px);
    }
}

a {
    color: #3B82F6;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #2563EB;
}

img {
    max-width: 100%;
    height: auto;
}

/* SVG sizing constraints - prevent SVGs from becoming too large */
svg {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Prevent ALL SVGs without explicit dimensions from expanding too much */
svg:not([width]):not([height]) {
    max-width: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    height: auto !important;
}

/* Force size constraints on SVGs even if they have width/height attributes that are too large */
svg[width],
svg[height] {
    max-width: 32px !important;
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
}

/* Exception for footer social icons */
.footer-social-icon,
.footer-social-link svg,
.footer-social-links svg {
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Specific constraints for checkout and product forms */
.product-fast-checkout svg,
.product-fast-checkout-form svg,
.checkout-form-actions svg,
.woocommerce-checkout svg,
.product-page svg {
    max-width: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    height: auto !important;
}

/* Override any inline styles that might be making SVGs huge */
svg[style*="width"],
svg[style*="height"],
svg[style] {
    max-width: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    height: auto !important;
}

/* Trust badges, security icons, payment icons - make them small */
svg[viewBox*="lock" i],
svg[viewBox*="security" i],
svg[viewBox*="shield" i],
svg[viewBox*="credit" i],
svg[viewBox*="card" i],
svg[viewBox*="bolt" i],
svg[viewBox*="lightning" i],
[class*="trust" i] svg,
[class*="security" i] svg,
[class*="badge" i] svg {
    max-width: 18px !important;
    max-height: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

button {
    cursor: pointer;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}