/*
Theme Name:   Astra Child
Theme URI:    https://yoursite.com
Description:  Astra Child Theme - Optimized for performance
Author:       Your Name
Author URI:   https://yoursite.com
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
Tags:         child-theme, performance, optimization
*/

/* ============================================================
   CRITICAL CSS — Above-the-fold styles loaded inline
   (Move these to your inline critical CSS for best performance)
   ============================================================ */

/* Base Reset & Box Model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Smooth scroll – only when no reduced motion preference */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ============================================================
   PERFORMANCE: Font display swap fallback
   ============================================================ */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   PERFORMANCE: Lazy-loaded images
   ============================================================ */
img {
    max-width: 100%;
    height: auto;
    /* Prevent layout shift */
    display: block;
}

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

/* ============================================================
   PERFORMANCE: Reduce paint & composite layers wisely
   ============================================================ */
.site-header,
.site-footer {
    will-change: auto; /* Only promote when animating */
}

/* ============================================================
   LAYOUT OPTIMIZATIONS
   ============================================================ */

/* Prevent Cumulative Layout Shift (CLS) for common elements */
.ast-site-header-logo img {
    width: auto;
    height: 60px; /* Set your logo height to prevent CLS */
}

/* Navigation */
.main-navigation {
    contain: layout style; /* CSS containment for perf */
}

/* ============================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================ */
:focus-visible {
    outline: 3px solid var(--focus-color, #005fcc);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: #000;
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 99999;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* ============================================================
   PRINT STYLES — Optimized for paper
   ============================================================ */
@media print {
    .site-header,
    .site-footer,
    .ast-breadcrumbs,
    #comments,
    .navigation,
    .sidebar,
    .woocommerce-breadcrumb {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}

/* ============================================================
   YOUR CUSTOM STYLES BELOW
   ============================================================ */