/*
 * ==========================================================================
 * 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).
 * ==========================================================================
 */
 .sg-featured-card__excerpt {
    margin: var(--sg-acf-space-0) var(--sg-acf-space-0) var(--sg-acf-space-4);
    font-size: var(--sg-acf-text-md);
    line-height: var(--sg-acf-leading-loose);
    color: var(--sg-acf-gray-600);
    flex: 1;
    text-align: justify !important;
}

 .woocommerce-cart-form .actions button[name="update_cart"] {
    display: none !important;
    background-color: var(--sys-color-neutral-100) !important;
    border: 1px solid var(--comp-border-color) !important;
    border-radius: var(--sys-radius-md);
    color: var(--sys-color-neutral-900) !important;
    font-family: var(--font-family-base);
    font-weight: var(--btn-font-weight);
    transition: transform var(--comp-transition-fast), box-shadow var(--comp-transition-fast);
}
.btn-outline {
  outline: 0.08rem solid #100087!important;  
  outline-offset: 1px !important;
}

.btn-outline-2 {
  outline: 0.08rem solid #ff7617 !important;  
  outline-offset: 1px !important;
}

a.sgp-header-user-btn {
    outline: 0.08rem solid #100087 !important;
    outline-offset: 1px !important;
    background: #f1f5f9;
    padding: 0.6rem 2.6rem;
    border-radius: 8px;
    white-space: nowrap;
}

.w-cart.dropdown_height .w-cart-dropdown, .w-cart.dropdown_height .w-cart-notification {
    background-color: #e7e9ff;
    border-radius: 1rem;
    display: block;
    transform-origin: 50% 0;
    transform: scaleY(0) translateZ(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}

.sgp-header-user-btn .sgp-header-user-btn {
      outline: 0.08rem solid #100087 !important;
    outline-offset: 1px !important;
    display: flex;
    align-items: center;
    gap: 20px !important;
    padding: 3px 12px !important;
    border-radius: 10px !important;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    background: #f5f5f5 ;
    border: 1px solid #f1f5f9;
    transition: background 0.2s;
}


.woocommerce .button, .woocommerce .actions .button, .us-nav-style_2>*, .navstyle_2>.owl-nav button, .us-btn-style_2 {
    font-size: 1rem;
    outline: 0.08rem solid #100087 !important;
    outline-offset: 1px !important;
    line-height: 1.2 !important;
    font-weight: 600;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0em;
    border-radius: 0.5em;
   
    background: #ffffff;
    border-color: transparent;
    color: #ff2f00 !important;
}
/* ==========================================================================
   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;
    }
}