/*
 * ==========================================================================
 * GLOBAL OVERRIDES — ZHM-X v3.0.1
 * Utility styles & WordPress-required overrides.
 * All colors sourced from _variables-components.css Design System.
 * No hardcoded colors — minimal exceptions documented.
 * Reduced Motion: handled globally in _canonical-ui.css (Section 8).
 * ==========================================================================
 */



/* ==========================================================================
   1. SOCIAL ICONS
   ========================================================================== */

.w-socials-item-link i {
    display: contents;
    line-height: inherit;
    position: relative;
    transition: color var(--sys-transition-fast);
}

/* ==========================================================================
   2. CUSTOM ICON CARDS (SHORTCODE OVERRIDES)
   ==========================================================================
   NOTE: Base .sc-icon-card-grid and .sc-icon-card styles are in
   _canonical-ui.css (Section 10). Only overrides live here.
   ========================================================================== */

.sc-icon-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    font-family: var(--font-family-base);
}

.sc-icon-card .sc-card-description {
    margin-top: 10px;
    text-align: justify;
    /*font-size: var(--size-body);*/
    line-height: var(--leading-body);
    color: var(--sys-color-neutral-900) !important; /* Reinforced contrast for readability */
}

.sc-icon-card .sc-title {
    margin: 0;
    /*font-family: var(--font-family-heading-h3);*/
    font-weight: var(--weight-semibold);
    /*font-size: var(--size-h3);*/
    color: var(--sys-color-neutral-900);
    transition: color var(--comp-transition-fast);
}

.sc-icon-card .sc-title:hover {
    color: var(--sys-color-primary);
}

/* ==========================================================================
   3. GRAVITY FORMS
   ========================================================================== */

.gform_wrapper.gravity-theme .gform_required_legend {
    display: none !important;
}

/* ==========================================================================
   4. BLOG RATINGS & HEADER
   ========================================================================== */

.ar-rating-top-blog {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
}

.ar-rating-top-blog .sg-seo-rating-message,
.ar-rating-top-blog .sg-seo-rating-title {
    margin: 0;
    /*font-family: var(--font-family-base);*/
    /*font-size: var(--size-body);*/
}

.ar-likes button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    border-radius: var(--sys-radius-sm);
    background-color: var(--sys-color-neutral-75);
    color: var(--sys-color-neutral-800);
    font-family: var(--font-family-base);
    line-height: var(--leading-button);
    cursor: pointer;
    transition: background-color var(--sys-transition-fast),
                border-color var(--sys-transition-fast);
    position: relative;
}

.ar-likes button:hover {
    background-color: var(--sys-color-neutral-100);
}

.ar-likes button:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.main-header {
    width: max-content;
    padding: 6px 5px;
    background-color: var(--sys-color-primary);
    border-radius: 148rem;
    text-align: center;
}

/* ── Blinking Text Animation (brand gold, kept as accent) ── */
.blinking-text {
    color: #ffd700; /* brand gold, kept for visual identity */
    font-weight: var(--weight-bold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: blink-glow 5s infinite alternate;
    /* Hints the browser to promote this to its own compositor layer up
       front, since the animation below only ever touches opacity. */
    will-change: opacity;
}

/* Compositor-only animation — color/text-shadow are intentionally NOT
   animated anymore. Both properties force a full repaint on every frame
   (they cannot run on the GPU compositor), which PageSpeed/Lighthouse
   flags as "non-composited animation" for every element using this
   class. Only `opacity` is animated below, so this now runs entirely
   on the compositor thread regardless of how many .blinking-text
   elements are on the page. The colour/glow stay fixed at their
   original gold tone; the pulsing effect is preserved via opacity. */
@keyframes blink-glow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.75;
    }
}

/* ==========================================================================
   5. WOOCOMMERCE — STICKY CART (DESKTOP ONLY)
   ========================================================================== */

@media (min-width: 901px) {
    .us-woo-cart_compact .woocommerce .shop_table.cart {
        position: sticky !important;
        top: 15rem !important; /* safe distance from admin bar */
        float: right;
    }
}

/* ==========================================================================
   6. MOBILE RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 480px) {
    .zephyr-child-downloads-pagination ul {
        gap: 6px;
    }

    .zephyr-child-downloads-pagination ul li a,
    .zephyr-child-downloads-pagination ul li span {
        min-width: 38px;
        height: 38px;
        border-radius: var(--sys-radius-sm);
    }
}

@media (max-width: 600px) {
    .woocommerce table.shop_table {
        display: grid;
    }
}