/* ============================================================
   SILURE — mobile-ux.css — Session 20
   iOS safe area · skeleton loading · touch targets · 360px
   ============================================================ */


/* ── 1. iOS SAFE AREA — env(safe-area-inset-*) ── */
/* viewport-fit=cover is set via PHP (silure_output_viewport_meta) */

/* Site header */
.site-header,
.elementor-section.silure-header,
header.site-header {
    padding-top: max(0px, env(safe-area-inset-top));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
}

/* Cart drawer */
.silure-cart-drawer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    padding-left: max(1.5rem, calc(1.5rem + env(safe-area-inset-left, 0px)));
}

/* Cart drawer footer (buttons) */
.silure-cart-drawer__footer,
.silure-cart-footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* Mobile navigation panel */
.silure-mobile-nav,
.elementor-nav-menu--dropdown {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    padding-left: max(1.5rem, calc(1.5rem + env(safe-area-inset-left, 0px)));
}

/* WhatsApp floating button — bottom-right */
.silure-whatsapp-btn,
a[href*="wa.me"],
a[href*="whatsapp.com/send"] {
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    right:  calc(1.5rem + env(safe-area-inset-right, 0px)) !important;
}

/* Sticky add-to-cart bar */
.silure-sticky-atc,
.silure-sticky-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Bottom fixed elements (cookie bar, notices) */
.silure-cookie-bar,
.woocommerce-store-notice {
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    padding-left:   max(1rem, env(safe-area-inset-left, 0px));
    padding-right:  max(1rem, env(safe-area-inset-right, 0px));
}


/* ── 2. SKELETON LOADING — shimmer on #F3F0EB ── */

@keyframes silure-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.silure-skeleton {
    background: linear-gradient(
        90deg,
        var(--silure-surface, #F3F0EB) 25%,
        #E8E4DF 50%,
        var(--silure-surface, #F3F0EB) 75%
    );
    background-size: 200% 100%;
    animation: silure-shimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
    display: block;
}

/* Product card skeleton */
.silure-skeleton-card {
    background: var(--silure-surface, #F3F0EB);
    border-radius: 4px;
    overflow: hidden;
}

.silure-skeleton-card .silure-skeleton-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: linear-gradient(
        90deg,
        var(--silure-surface, #F3F0EB) 25%,
        #E8E4DF 50%,
        var(--silure-surface, #F3F0EB) 75%
    );
    background-size: 200% 100%;
    animation: silure-shimmer 1.5s ease-in-out infinite;
    display: block;
}

.silure-skeleton-card .silure-skeleton-title {
    height: 1.1em;
    width: 68%;
    margin: 0.8rem auto 0.4rem;
    background: linear-gradient(
        90deg,
        var(--silure-surface, #F3F0EB) 25%,
        #E8E4DF 50%,
        var(--silure-surface, #F3F0EB) 75%
    );
    background-size: 200% 100%;
    animation: silure-shimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
    display: block;
}

.silure-skeleton-card .silure-skeleton-price {
    height: 0.9em;
    width: 38%;
    margin: 0 auto 1.2rem;
    background: linear-gradient(
        90deg,
        var(--silure-surface, #F3F0EB) 25%,
        #E8E4DF 50%,
        var(--silure-surface, #F3F0EB) 75%
    );
    background-size: 200% 100%;
    animation: silure-shimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
    display: block;
}

/* Search results skeleton */
.silure-skeleton-search-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--silure-border, #E8E4DF);
    align-items: flex-start;
}

.silure-skeleton-search-item .silure-skeleton-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--silure-surface, #F3F0EB) 25%, #E8E4DF 50%, var(--silure-surface, #F3F0EB) 75%);
    background-size: 200% 100%;
    animation: silure-shimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
}

.silure-skeleton-search-item .silure-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 4px;
}

.silure-skeleton-search-item .silure-skeleton-lines span {
    display: block;
    height: 0.85em;
    background: linear-gradient(90deg, var(--silure-surface, #F3F0EB) 25%, #E8E4DF 50%, var(--silure-surface, #F3F0EB) 75%);
    background-size: 200% 100%;
    animation: silure-shimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
}

.silure-skeleton-search-item .silure-skeleton-lines span:nth-child(1) { width: 80%; }
.silure-skeleton-search-item .silure-skeleton-lines span:nth-child(2) { width: 50%; }
.silure-skeleton-search-item .silure-skeleton-lines span:nth-child(3) { width: 35%; }

/* Cart drawer skeleton */
.silure-skeleton-cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    align-items: flex-start;
}

.silure-skeleton-cart-item .silure-skeleton-img {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--silure-surface, #F3F0EB) 25%, #E8E4DF 50%, var(--silure-surface, #F3F0EB) 75%);
    background-size: 200% 100%;
    animation: silure-shimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
}

.silure-skeleton-cart-item .silure-skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 4px;
}

.silure-skeleton-cart-item .silure-skeleton-info span {
    display: block;
    height: 0.85em;
    background: linear-gradient(90deg, var(--silure-surface, #F3F0EB) 25%, #E8E4DF 50%, var(--silure-surface, #F3F0EB) 75%);
    background-size: 200% 100%;
    animation: silure-shimmer 1.5s ease-in-out infinite;
    border-radius: 2px;
}

.silure-skeleton-cart-item .silure-skeleton-info span:nth-child(1) { width: 75%; }
.silure-skeleton-cart-item .silure-skeleton-info span:nth-child(2) { width: 50%; }
.silure-skeleton-cart-item .silure-skeleton-info span:nth-child(3) { width: 30%; }


/* ── 3. TOUCH TARGETS — minimum 44 × 44px ── */
/* WCAG 2.1 SC 2.5.5 (AA) */

button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select {
    min-height: 44px;
    min-width:  44px;
}

/* Nav links and icon buttons */
.silure-nav__link,
.silure-icon-btn,
.silure-cart-toggle,
.silure-search-toggle,
.silure-wishlist-btn,
.silure-cart-item__remove,
.silure-gallery-dot,
.silure-swipe-dot,
.elementor-nav-menu .menu-item > a {
    min-height: 44px;
    min-width:  44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* WooCommerce quantity input */
.woocommerce .quantity input[type="number"],
.woocommerce .quantity .qty {
    min-height: 44px;
    text-align: center;
}

/* Quantity +/- buttons */
.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
    min-height: 44px;
    min-width:  44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Flowing-text links are exempt */
p a,
.entry-content a,
.woocommerce-breadcrumb a,
.silure-post-hero a {
    min-height: unset;
    min-width:  unset;
    display: inline;
}


/* ── 4. 360px VIEWPORT AUDIT ── */
/* Ensure usable on budget Android (e.g. Redmi A1, Samsung A03) */

@media (max-width: 360px) {

    body {
        font-size: 14px;
    }

    /* Prevent overflow */
    *, *::before, *::after {
        max-width: 100%;
    }

    /* Header: shrink logo on very narrow screens */
    .site-header .elementor-widget-image img,
    .site-header img.silure-logo {
        max-height: 26px;
        width: auto;
    }

    /* Product grid: single column */
    .woocommerce ul.products,
    .silure-product-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cart drawer: full width */
    .silure-cart-drawer {
        width: 100vw !important;
        right: 0 !important;
        left: 0 !important;
    }

    /* Checkout form: full-width fields */
    .woocommerce-checkout .woocommerce-billing-fields .form-row-first,
    .woocommerce-checkout .woocommerce-billing-fields .form-row-last,
    .woocommerce-checkout .woocommerce-shipping-fields .form-row-first,
    .woocommerce-checkout .woocommerce-shipping-fields .form-row-last {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    /* Price — never clip */
    .price,
    .woocommerce-Price-amount,
    .amount {
        white-space: nowrap;
        overflow: visible;
    }

    /* Inputs — full width */
    .silure-search-input,
    .woocommerce-cart-form input,
    .woocommerce-checkout input,
    .woocommerce-checkout select {
        width: 100% !important;
    }

    /* Buttons — full width on tiny screens */
    .woocommerce .single_add_to_cart_button,
    .checkout-button,
    .silure-sticky-atc .btn {
        width: 100% !important;
    }

    /* Reduce horizontal padding on sections */
    .elementor-section > .elementor-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* ── 5. FOCUS STYLES — WCAG 2.1 AA ── */

:focus-visible {
    outline: 2px solid var(--silure-text, #444444);
    outline-offset: 3px;
    border-radius: 2px;
}

/* High-contrast focus on dark backgrounds */
.silure-header-dark :focus-visible,
.silure-bg-dark :focus-visible,
footer :focus-visible,
[style*="background-color: #050505"] :focus-visible,
[style*="background:#050505"] :focus-visible {
    outline-color: var(--silure-on-dark, #FBF9F6);
}

/* Remove focus ring for mouse/pointer interaction */
:focus:not(:focus-visible) {
    outline: none;
}

/* Cart drawer focus */
.silure-cart-drawer :focus-visible {
    outline-color: var(--silure-text, #444444);
}


/* ── 6. SKIP NAVIGATION LINK — WCAG 2.4.1 ── */
/* Rendered via PHP silure_skip_link() on wp_body_open */

.silure-skip-link {
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 999999;
    padding: 0.75rem 1.5rem;
    background: var(--silure-primary, #050505);
    color: var(--silure-on-dark, #FBF9F6);
    font-family: var(--silure-font-ui, 'Mulish', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: top 0.12s ease;
    /* Safe-area aware */
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
}

.silure-skip-link:focus,
.silure-skip-link:focus-visible {
    top: 0;
    outline: 2px solid var(--silure-on-dark, #FBF9F6);
    outline-offset: -4px;
}


/* ── 7. PRODUCT GALLERY SWIPE DOTS ── */

.silure-gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 14px 0 6px;
}

.silure-gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--silure-border-mid, #C8C4BF);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    /* Tap area expanded via pseudo-element so visual stays small */
    position: relative;
}

.silure-gallery-dot::after {
    content: '';
    position: absolute;
    inset: -12px;
}

.silure-gallery-dot.is-active {
    background: var(--silure-primary, #050505);
    transform: scale(1.5);
}

.silure-gallery-dot:focus-visible {
    outline: 2px solid var(--silure-text, #444444);
    outline-offset: 4px;
    border-radius: 50%;
}


/* ── 8. ADAPTIVE IMAGES — Vivaan Patel classes ── */

/* Low-bandwidth: switch product images to thumbnails (class set by JS) */
.silure-low-bandwidth .products img,
.silure-low-bandwidth .silure-product-card img {
    /* JS swaps src; this hides the brief stretch during swap */
    image-rendering: auto;
}

/* Low-memory: disable all transitions and animations — Aditya Roy */
.silure-low-memory *,
.silure-low-memory *::before,
.silure-low-memory *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
}


/* ── 9. REDUCED MOTION ── */
/* Always honour OS preference regardless of device class */

@media (prefers-reduced-motion: reduce) {
    .silure-skeleton,
    .silure-skeleton-card .silure-skeleton-img,
    .silure-skeleton-card .silure-skeleton-title,
    .silure-skeleton-card .silure-skeleton-price,
    .silure-skeleton-search-item .silure-skeleton-thumb,
    .silure-skeleton-search-item .silure-skeleton-lines span,
    .silure-skeleton-cart-item .silure-skeleton-img,
    .silure-skeleton-cart-item .silure-skeleton-info span {
        animation: none;
        background: var(--silure-surface, #F3F0EB);
    }

    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }
}