/**
 * Dark mode + accessibility hardening.
 * Scope: global focus, header/footer, and mobile navigation surfaces.
 * WooCommerce component-level styling is intentionally delegated to
 * Woo/Astra defaults (plus dedicated component files) to reduce conflicts.
 *
 * @package Ratna_Gems
 */

/* Off-canvas safety: when Astra marks drawer inactive, keep it out of visual flow. */
.ast-mobile-popup-drawer.removeClass-active {
    visibility: hidden;
}

/* Off-canvas surface fallback: avoid default Astra white fill when dark variables are not active. */
.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-inner,
.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-content,
.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-content .ast-builder-menu-mobile,
.ast-header-break-point #ast-mobile-popup .ast-mobile-popup-content .main-header-menu {
    background: var(--rg-surface-card, #03142d);
}

/* Global focus ring (WCAG-friendly) without removing native keyboard affordances. */
:where(a, button, input, select, textarea, summary, .button, .ast-button, [role="button"]):focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--rg-focus-inner), 0 0 0 4px var(--rg-focus-outer);
}

/* Never obscure focused targets under sticky header. */
:where(a, button, input, select, textarea, summary, [tabindex="0"]):focus-visible {
    scroll-margin-top: 7.5rem;
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, .button, .ast-button, [role="button"]):focus-visible {
        outline: 2px solid Highlight;
        box-shadow: none;
    }

    .ast-header-break-point .ast-mobile-popup-content .ast-icon,
    .ast-header-break-point .ast-mobile-popup-content .ast-icon svg {
        forced-color-adjust: auto;
        fill: currentColor;
    }
}

@media (prefers-color-scheme: dark) {
    body,
    .site,
    .site-content,
    .site-main {
        background-color: var(--rg-surface-page);
        color: var(--rg-text-primary);
    }

    #masthead,
    .main-header-bar,
    .ast-desktop .main-header-menu,
    .ast-desktop .main-header-menu .sub-menu,
    .site-footer,
    .site-primary-footer-wrap,
    .site-below-footer-wrap,
    .ast-small-footer-wrap {
        background-color: var(--rg-surface-header);
        color: var(--rg-text-secondary);
    }

    /* Mobile header bar (off-canvas trigger row) */
    #ast-mobile-header,
    #ast-mobile-header .ast-main-header-wrap,
    #ast-mobile-header .ast-primary-header-bar,
    #ast-mobile-header .site-primary-header-wrap,
    #ast-mobile-header .ast-builder-grid-row,
    #ast-mobile-header .site-branding,
    #ast-mobile-header .ast-button-wrap {
        background-color: var(--rg-surface-header);
        color: var(--rg-text-secondary);
        border-color: var(--rg-border-subtle);
    }

    #ast-mobile-header :where(.menu-toggle, .main-header-menu-toggle, .ast-mobile-menu-trigger-minimal, .ast-search-icon a),
    #ast-mobile-header :where(.ast-mobile-svg, .ast-icon, .ast-icon svg) {
        color: var(--rg-text-secondary);
        fill: currentColor;
    }

    #ast-mobile-header :where(.search-field, input[type="search"]) {
        background-color: var(--rg-surface-card);
        color: var(--rg-text-secondary);
        border-color: var(--rg-border-strong);
    }

    /* Footer builder internals */
    .site-footer :where(.ast-builder-grid-row, .ast-builder-grid-row-container, .ast-builder-layout-element),
    .site-footer :where(.footer-widget-area, .footer-widget-area-inner, .widget),
    .site-footer :where(.ast-footer-copyright, .ast-builder-html-element),
    .site-footer :where(h1, h2, h3, h4, h5, h6, p, span, li) {
        background-color: transparent;
        color: var(--rg-text-secondary);
    }

    .site-footer :where(.site-footer-section, .site-primary-footer-inner-wrap, .site-below-footer-inner-wrap),
    .site-footer :where(.footer-widget-area[data-section], .footer-widget-area[data-section] .footer-widget-area-inner),
    .site-footer :where(.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-column) {
        background-color: var(--rg-surface-header);
        color: var(--rg-text-secondary);
        border-color: var(--rg-border-subtle);
    }

    /*
     * Astra can apply footer row background on specific wrappers that own
     * horizontal paddings. In dark mode those wrappers can stay light,
     * which renders as white/gray padding around menus and copyright.
     * Use explicit footer-row selectors so every spacing wrapper is dark.
     */
    #colophon.site-footer,
    #colophon.site-footer .site-primary-footer-wrap,
    #colophon.site-footer .site-below-footer-wrap,
    #colophon.site-footer .site-primary-footer-wrap > .ast-builder-grid-row-container-inner,
    #colophon.site-footer .site-below-footer-wrap > .ast-builder-grid-row-container-inner,
    #colophon.site-footer .site-primary-footer-wrap .ast-builder-footer-grid-columns,
    #colophon.site-footer .site-below-footer-wrap .ast-builder-footer-grid-columns {
        background: var(--rg-surface-header) !important;
        background-image: none !important;
        background-color: var(--rg-surface-header) !important;
        color: var(--rg-text-secondary);
        border-color: var(--rg-border-subtle) !important;
    }

    /* Footer custom icon/contact block has inline light styles; keep this override targeted. */
    .site-footer .rg-contact .rg-icon-list li,
    .site-footer .rg-contact .rg-link,
    .site-footer .rg-contact .rg-icon {
        color: var(--rg-text-secondary) !important;
    }

    .site-footer #rg-share .rg-sb svg {
        fill: #ffffff !important;
    }

    .site-footer .rg-contact .rg-link:hover,
    .site-footer .rg-contact .rg-link:focus-visible {
        color: var(--rg-link-hover);
    }

    /* Footer nav/content should stay readable, not inherit brand-blue link palette. */
    .site-footer :where(.menu-link, .widget_nav_menu a, .wp-block-heading, .widget-title, .widget-title a) {
        color: var(--rg-text-secondary) !important;
    }

    .site-footer :where(.menu-link:hover, .menu-link:focus-visible, .widget_nav_menu a:hover, .widget_nav_menu a:focus-visible) {
        color: var(--rg-link-hover) !important;
    }

    .site-footer :where(a, a:visited) {
        color: var(--rg-link);
    }

    .site-footer :where(a:hover, a:focus-visible) {
        color: var(--rg-link-hover);
    }

    /* Footer widgets often include inline colors; force readable contrast in dark mode. */
    .site-footer :where(.wp-block-heading, .widget-title, .widget-title a, p, li, strong, em) {
        color: var(--rg-text-secondary);
    }

    .site-footer .ast-footer-copyright,
    .site-footer .ast-footer-copyright p {
        color: var(--rg-text-muted);
    }

    /*
     * Cart header cells: Woo/Astra can keep a light thead in device dark mode.
     * Force semantic dark surface/text so Product/Price/Quantity/Subtotal stay legible.
     */
    .woocommerce-cart table.shop_table thead,
    .woocommerce-cart table.shop_table thead tr,
    .woocommerce-cart table.shop_table thead th,
    .woocommerce-cart table.shop_table thead th span {
        background: var(--rg-surface-card-strong) !important;
        color: var(--rg-text-primary) !important;
        border-color: var(--rg-border-strong) !important;
    }

    /*
     * Footer widget blocks currently include inline <style> rules such as
     * `.rg-icon-list li { color:#111; }` and icon fills, which keep light-mode
     * colors in dark mode. Neutralize those inline declarations with scoped
     * overrides so all footer text/icons inherit dark-mode tokens.
     */
    .site-footer .rg-contact :where(.rg-icon-list li, .rg-link, .rg-icon, .rg-icon svg),
    .site-footer #rg-share :where(.rg-sb svg),
    .site-footer :where([style*="color:"]) {
        color: var(--rg-text-secondary) !important;
        fill: currentColor !important;
    }

    .entry-content :where(p, li) a {
        color: var(--rg-link);
        text-decoration: underline;
    }

    .entry-content :where(p, li) a:hover,
    .entry-content :where(p, li) a:focus-visible {
        color: var(--rg-link-hover);
    }

    /* Desktop header menu */
    .ast-desktop .main-header-menu > .menu-item > .menu-link,
    .ast-desktop .main-header-menu .sub-menu .menu-link {
        color: var(--rg-text-primary);
    }

    .ast-desktop .main-header-menu > .menu-item.current-menu-item > .menu-link,
    .ast-desktop .main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
    .ast-desktop .main-header-menu > .menu-item > .menu-link:hover,
    .ast-desktop .main-header-menu > .menu-item > .menu-link:focus-visible {
        background-color: var(--rg-surface-card-strong);
        color: var(--rg-text-primary);
    }

    /* Breadcrumb providers normalized to same semantic scheme */
    :where(.ast-breadcrumbs, .rank-math-breadcrumb, .woocommerce-breadcrumb, .yoast-breadcrumb) {
        color: var(--rg-text-muted);
    }

    :where(.ast-breadcrumbs, .rank-math-breadcrumb, .woocommerce-breadcrumb, .yoast-breadcrumb) a {
        color: var(--rg-link);
    }

    :where(.ast-breadcrumbs, .rank-math-breadcrumb, .woocommerce-breadcrumb, .yoast-breadcrumb) a:hover,
    :where(.ast-breadcrumbs, .rank-math-breadcrumb, .woocommerce-breadcrumb, .yoast-breadcrumb) a:focus-visible {
        color: var(--rg-link-hover);
    }

    /* Normalize Astra breadcrumb bar row background + links in dark mode. */
    .main-header-bar.ast-header-breadcrumb,
    .main-header-bar.ast-header-breadcrumb .ast-container,
    .main-header-bar.ast-header-breadcrumb .ast-breadcrumbs-wrapper,
    .main-header-bar.ast-header-breadcrumb .ast-breadcrumbs-inner {
        background: var(--rg-surface-card);
        border-color: var(--rg-border-subtle);
    }

    .main-header-bar.ast-header-breadcrumb :where(p, span, a, li) {
        color: var(--rg-link);
    }

    .main-header-bar.ast-header-breadcrumb :where(a:hover, a:focus-visible) {
        color: var(--rg-link-hover);
    }

    /* Current page (plain text, not link) — ensure visibility */
    .main-header-bar.ast-header-breadcrumb .rank-math-breadcrumb [aria-current="page"] {
        color: var(--rg-text-primary);
    }

    /* Mobile off-canvas menu */
    .ast-header-break-point .ast-mobile-popup-drawer,
    .ast-header-break-point .ast-mobile-popup-overlay,
    .ast-header-break-point .ast-mobile-popup-inner,
    .ast-header-break-point .ast-mobile-popup-header,
    .ast-header-break-point .ast-mobile-popup-content,
    .ast-header-break-point .ast-mobile-popup-content .main-navigation,
    .ast-header-break-point .ast-mobile-popup-content .main-header-menu,
    .ast-header-break-point .ast-mobile-popup-content .sub-menu {
        background: var(--rg-surface-card);
        color: var(--rg-text-secondary);
        border-color: var(--rg-border-subtle);
    }

    .ast-header-break-point .ast-mobile-popup-content :where(.header-widget-area, .footer-widget-area, .widget, .widget_block),
    .ast-header-break-point .ast-mobile-popup-content :where(.ast-builder-layout-element, .ast-builder-menu-mobile, .ast-main-header-bar-alignment) {
        background: var(--rg-surface-card);
        color: var(--rg-text-secondary);
        border-color: var(--rg-border-subtle);
    }

    .ast-header-break-point .ast-mobile-popup-content :where(h1, h2, h3, h4, h5, h6, p, span, li, strong) {
        color: var(--rg-text-secondary);
    }

    .ast-header-break-point .ast-mobile-popup-content :where(a, a:visited) {
        color: var(--rg-link);
    }

    .ast-header-break-point .ast-mobile-popup-content :where(a:hover, a:focus-visible) {
        color: var(--rg-link-hover);
    }

    .ast-header-break-point .ast-mobile-popup-overlay {
        background: var(--rg-surface-overlay);
    }

    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .menu-link,
    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .sub-menu .menu-link,
    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .ast-menu-toggle {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        color: var(--rg-text-secondary);
        background: var(--rg-surface-card);
        border-color: var(--rg-border-strong);
    }

    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .ast-menu-toggle {
        justify-content: center;
        min-width: 48px;
    }

    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .menu-item > .sub-menu {
        background: var(--rg-surface-card);
        border-left: 2px solid var(--rg-border-strong);
        margin-left: 0.5rem;
        padding-left: 0.35rem;
    }

    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .menu-item > .sub-menu .menu-link {
        background: var(--rg-surface-card-strong);
    }

    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .menu-item:hover > .menu-link,
    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .menu-item.current-menu-item > .menu-link,
    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .menu-item.current-menu-ancestor > .menu-link,
    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .menu-link:focus-visible,
    .ast-header-break-point .ast-mobile-popup-content .main-header-menu .menu-item > .ast-menu-toggle[aria-expanded="true"] {
        color: var(--rg-text-primary);
        background: var(--rg-surface-card-strong);
        border-color: var(--rg-border-accent);
    }

    .ast-header-break-point .ast-mobile-popup-content .wp-block-search__inside-wrapper,
    .ast-header-break-point .ast-mobile-popup-content .wp-block-search__input {
        background: var(--rg-surface-card);
        color: var(--rg-text-secondary);
        border-color: var(--rg-border-strong);
    }

    .ast-header-break-point .ast-mobile-popup-content .wp-block-search__button,
    .ast-header-break-point .ast-mobile-popup-content .wp-element-button {
        background: var(--rg-surface-card-strong);
        color: var(--rg-text-primary);
        border-color: var(--rg-border-accent);
    }

    .ast-header-break-point .ast-mobile-popup-header .menu-toggle-close,
    .ast-header-break-point .ast-mobile-popup-header .menu-toggle-close .ast-mobile-svg,
    .ast-header-break-point .ast-mobile-popup-content .ast-icon,
    .ast-header-break-point .ast-mobile-popup-content .ast-icon svg {
        color: var(--rg-text-secondary);
        fill: currentColor;
    }

    /* Header cart drawer (all pages): checkout CSS is not loaded on homepage/category. */
    #astra-mobile-cart-drawer,
    #astra-mobile-cart-drawer .astra-cart-drawer-header,
    #astra-mobile-cart-drawer .astra-cart-drawer-content,
    #astra-mobile-cart-drawer .widget_shopping_cart_content {
        background: var(--rg-surface-card) !important;
        color: var(--rg-text-secondary) !important;
        border-color: var(--rg-border-strong) !important;
    }

    #astra-mobile-cart-drawer :is(.astra-cart-drawer-title, .woocommerce-mini-cart-item a, .woocommerce-mini-cart-item .quantity, .woocommerce-mini-cart__total, .woocommerce-mini-cart__total strong) {
        color: var(--rg-text-secondary) !important;
    }

    #astra-mobile-cart-drawer :is(.astra-cart-drawer-close, .woocommerce-mini-cart-item .remove) {
        color: var(--rg-link) !important;
    }

    #astra-mobile-cart-drawer :is(.woocommerce-mini-cart__buttons .button, .woocommerce-mini-cart__buttons .checkout) {
        background: var(--rg-surface-card-strong) !important;
        border-color: var(--rg-border-accent) !important;
        color: var(--rg-text-primary) !important;
    }

    /* Cart page: force dark rows/controls where Woo/Astra output per-page inline colors. */
    .woocommerce-cart :is(table.shop_table, table.shop_table th, table.shop_table td, .cart_totals, .cart_totals table.shop_table) {
        background: transparent !important;
        color: var(--rg-text-secondary) !important;
        border-color: var(--rg-border-strong) !important;
    }

    .woocommerce-cart :is(table.shop_table thead th, .cart_totals > h2) {
        background: var(--rg-surface-card-strong) !important;
        color: var(--rg-text-primary) !important;
    }

    .woocommerce-cart :is(.product-name a, .shipping-calculator-button, .woocommerce-shipping-methods label, .product-remove .remove) {
        color: var(--rg-link) !important;
    }

    .woocommerce-cart :is(input.input-text, select, .button, .checkout-button) {
        background: var(--rg-surface-card) !important;
        color: var(--rg-text-primary) !important;
        border-color: var(--rg-border-strong) !important;
    }

    /* Checkout page: ensure fields, select2 and payment boxes inherit dark tokens. */
    .woocommerce-checkout :is(#customer_details, #order_review, .shop_table, .woocommerce-checkout-review-order-table) {
        background: transparent !important;
        color: var(--rg-text-secondary) !important;
        border-color: var(--rg-border-strong) !important;
    }

    .woocommerce-checkout :is(h3, h2, label, .woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-checkbox-text) {
        color: var(--rg-text-secondary) !important;
    }

    .woocommerce-checkout :is(input.input-text, textarea.input-text, select, .select2-selection--single) {
        background: var(--rg-surface-card) !important;
        color: var(--rg-text-primary) !important;
        border-color: var(--rg-border-strong) !important;
    }

    .woocommerce-checkout :is(.select2-selection__rendered, .select2-selection__arrow b) {
        color: var(--rg-text-primary) !important;
        border-top-color: currentColor !important;
    }

    .woocommerce-checkout #payment,
    .woocommerce-checkout #payment :is(.payment_methods, .payment_box, .place-order, ul.payment_methods li) {
        background: var(--rg-surface-card-strong) !important;
        color: var(--rg-text-secondary, #e5e7eb) !important;
        border-color: var(--rg-border-strong) !important;
    }

    .woocommerce-checkout #payment :is(.payment_methods label, .payment_method_razorpay label, .payment_method_cod label, #place_order) {
        color: var(--rg-text-primary, #f8fafc) !important;
    }

    .woocommerce-checkout #payment :is(
        .payment_box,
        .payment_box p,
        .payment_box span,
        .payment_box small,
        .payment_box strong,
        .payment_box li,
        .payment_method_razorpay,
        .payment_method_cod
    ) {
        color: var(--rg-text-secondary, #e5e7eb) !important;
    }

    .woocommerce-checkout #payment :is(.payment_box a, .payment_box a:visited) {
        color: var(--rg-link, #93c5fd) !important;
    }

    .woocommerce-checkout #payment :is(input[type="radio"], input[type="checkbox"]) {
        accent-color: var(--rg-border-accent, #60a5fa);
    }

    .woocommerce-checkout #payment div.payment_box::before {
        border-bottom-color: var(--rg-surface-card-strong, #1e293b) !important;
    }
}

@media (prefers-color-scheme: dark) {
    /* Prevent residual light strips inside mobile off-canvas internals. */
    .ast-header-break-point .ast-mobile-popup-content :where(.ast-builder-menu-mobile, .ast-builder-layout-element, .ast-builder-layout-element > div, .ast-builder-menu-mobile-focus-item) {
        background: var(--rg-surface-card);
        border-color: var(--rg-border-subtle);
    }

    /* Keep breadcrumb row background aligned with page dark surface. */
    .ast-breadcrumbs-wrapper,
    .ast-breadcrumbs-wrap,
    .ast-woo-shop-page-title,
    .ast-woo-shop-page-title .ast-container {
        background: var(--rg-surface-page);
        color: var(--rg-text-muted);
        border-color: var(--rg-border-subtle);
    }
}