/**
 * Estilos personalizados de la aplicacion
 * Agrega aqui tus estilos CSS custom
 */

/* Ejemplo: animaciones personalizadas */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* WCAG 2.4.7 — visible focus indicator for all keyboard-reachable elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Override Tailwind's focus:outline-none on nav dropdown menu items */
[role="menuitem"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background-color: var(--color-background-alt);
}

/* WCAG 1.4.10 reflow — prevent horizontal overflow in mobile nav at 320/375px */
@media (max-width: 1279px) {
    #ss-mobile-menu {
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* WCAG 1.4.10 reflow — no horizontal scroll at phone widths (375px–767px range). */
@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    /* Headings: force word-break at full phone range (375px–767px).
       At sm breakpoint, hero h1 uses text-4xl (36px) in Playfair Display; the
       combined width of "Profesionalidad y confianza" exceeds the ~327–343px
       phone content area. word-break: break-word ensures intra-word breaks are
       used as a last resort so text never escapes the section's overflow-hidden
       boundary. WCAG 1.4.10. */
    h1, h2, h3, h4, h5, h6,
    .font-heading {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Paragraphs: allow wrap at natural word boundaries; prevents text nodes in
       flex-row containers from overflowing their shrunken flex-item box. */
    p {
        overflow-wrap: break-word;
    }

    /* Flex items that contain text must be allowed to shrink below their
       min-content width so text can wrap. The top info-bar switches to
       sm:flex-row at this breakpoint; without min-width:0, the <p> item keeps
       its full single-line width and bleeds outside the container. */
    .flex > p,
    .flex > span {
        min-width: 0;
    }
}

/* WCAG 1.4.10 reflow — smallest phone (320px): extra guards beyond the 767px
   block above. Category-card icon (w-12/48px) can overflow a ~112px column at
   320px when p-3 padding is applied. */
@media (max-width: 374px) {
    .font-heading {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* Storefront header mobile-nav fallback (WCAG 2.1.1 + 2.5.8)
   The storefront layout loads Tailwind via CDN <script>. Headless Chrome
   captures the page before the script executes, leaving utility classes
   inactive. These rules mirror what Tailwind would apply, ensuring the
   hamburger (#ss-sf-menu-btn) stays visible and the header has proper flex
   layout at ≤639 px. Scoped to #ss-sf-menu-btn so only the storefront
   template is affected — the draft main.php uses #ss-mobile-menu-btn. */
@media (max-width: 639px) {
    header:has(#ss-sf-menu-btn) > div:has(#ss-sf-menu-btn) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 1rem;
        padding-right: 1rem;
        gap: 0.5rem;
        height: 4rem;
    }
    header:has(#ss-sf-menu-btn) > div > nav {
        display: none;
    }
    #ss-sf-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        flex-shrink: 0;
    }
}