/* App Launcher Pro - Frontend Styles */
/* Professional, responsive, and accessible icon grid */

/* ============================================
   CSS Custom Properties (set via PHP)
   ============================================ */
:root {
    /* Default fallbacks - these are overridden by inline styles from PHP */
    --alp-icon-item-height: 110px;
    --alp-icon-item-width: 100px;
    --alp-icon-image-container-height: 56px;
    --alp-icon-image-max-size: 56px;
    --alp-grid-gap: 8px;
    --alp-item-padding: 8px;
    --alp-max-width: 100%;
    --alp-font-size: 16px;
    --alp-title-line-height: 1.3;
    --alp-hover-scale: 1.15;
    --alp-transition-speed: 0.2s;
    --alp-border-radius: 10px;
    --alp-background-color: #ffffff;
    --alp-text-color: #333333;
}

/* ============================================
   Main Grid Container
   ============================================ */
.alp-icon-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--alp-icon-item-width), 1fr));
    gap: var(--alp-grid-gap);
    justify-content: center;
    align-items: stretch;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: var(--alp-max-width);
    box-sizing: border-box;
}

/* ============================================
   Link Wrapper
   ============================================ */
.alp-icon-menu a {
    text-decoration: none;
    color: inherit;
    display: flex;
    height: 100%;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.alp-icon-menu a:hover,
.alp-icon-menu a:focus,
.alp-icon-menu a:active {
    text-decoration: none;
    color: inherit;
}

/* ============================================
   Icon Item Container
   ============================================ */
.alp-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--alp-icon-item-height);
    height: 100%;
    width: 100%;
    padding: var(--alp-item-padding);
    box-sizing: border-box;
    background-color: var(--alp-background-color);
    color: var(--alp-text-color);
    border-radius: var(--alp-border-radius);
    transition:
        transform var(--alp-transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow var(--alp-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Subtle border for definition without shadows */
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ============================================
   Shadow Variations
   ============================================ */
.alp-with-shadow .alp-icon-item {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);
    border: none;
}

.alp-shadow-hover .alp-icon-item:hover {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08);
}

.alp-with-shadow.alp-shadow-hover .alp-icon-item:hover {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15),
        0 12px 32px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Icon Image Container
   ============================================ */
.alp-icon-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--alp-icon-image-max-size);
    height: var(--alp-icon-image-container-height);
    max-width: var(--alp-icon-image-max-size);
    max-height: var(--alp-icon-image-container-height);
    flex-shrink: 0;
    overflow: hidden;
    margin: 0 auto;
    /* Smooth size transitions */
    transition: width var(--alp-transition-speed) ease,
                height var(--alp-transition-speed) ease;
}

/* ============================================
   Icon Image
   ============================================ */
.alp-icon-item img,
.alp-icon-item svg {
    /* Force consistent sizing - icons respect the max size variable */
    width: var(--alp-icon-image-max-size) !important;
    height: var(--alp-icon-image-max-size) !important;
    max-width: var(--alp-icon-image-max-size) !important;
    max-height: var(--alp-icon-image-max-size) !important;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    /* Crisp image rendering for sharp icons */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Smooth size and transform transitions */
    transition: width var(--alp-transition-speed) ease,
                height var(--alp-transition-speed) ease,
                transform var(--alp-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    /* Ensure icons don't get distorted */
    aspect-ratio: 1 / 1;
    /* Prevent flex/grid from overriding sizes */
    flex-shrink: 0;
    flex-grow: 0;
}

/* ============================================
   Text Container
   ============================================ */
.alp-icon-text-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    flex-grow: 1;
    padding-top: calc(var(--alp-item-padding) * 0.75);
    text-align: center;
    overflow: hidden;
}

/* ============================================
   Icon Title (H3)
   ============================================ */
.alp-icon-item h3 {
    font-size: var(--alp-font-size);
    line-height: var(--alp-title-line-height);
    font-weight: 600;
    margin: 0;
    padding: 0;
    width: 100%;
    color: inherit;
    /* Text handling for long titles */
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    /* Limit to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Better text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   Hover Effects
   ============================================ */
.alp-icon-item:hover {
    transform: scale(var(--alp-hover-scale));
    z-index: 10;
}

/* Subtle image enhancement on hover */
.alp-icon-item:hover img,
.alp-icon-item:hover svg {
    transform: scale(1.02);
}

/* ============================================
   Focus States (Accessibility)
   ============================================ */
/* Remove default focus outline */
.alp-icon-menu a:focus {
    outline: none;
}

.alp-icon-menu a:focus .alp-icon-item {
    outline: none;
}

/* Keyboard navigation focus (focus-visible) */
.alp-icon-menu a:focus-visible .alp-icon-item {
    outline: 3px solid #0073aa;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 115, 170, 0.15);
}

/* Active state */
.alp-icon-menu a:active .alp-icon-item {
    transform: scale(calc(var(--alp-hover-scale) * 0.98));
    outline: none;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Extra Large screens (1440px+) */
@media (min-width: 1440px) {
    .alp-icon-menu {
        grid-template-columns: repeat(auto-fill, minmax(max(var(--alp-icon-item-width), 130px), 1fr));
    }
}

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .alp-icon-menu {
        grid-template-columns: repeat(auto-fill, minmax(max(var(--alp-icon-item-width), 120px), 1fr));
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .alp-icon-menu {
        grid-template-columns: repeat(auto-fill, minmax(min(var(--alp-icon-item-width), 110px), 1fr));
    }
}

/* Tablet landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .alp-icon-menu {
        grid-template-columns: repeat(auto-fill, minmax(min(var(--alp-icon-item-width), 100px), 1fr));
        padding: 0 var(--alp-grid-gap);
    }
}

/* Tablet portrait (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .alp-icon-menu {
        grid-template-columns: repeat(auto-fill, minmax(min(var(--alp-icon-item-width), 90px), 1fr));
        padding: 0 var(--alp-grid-gap);
    }

    .alp-icon-item h3 {
        font-size: calc(var(--alp-font-size) * 0.9);
    }
}

/* Mobile landscape (480px - 575px) */
@media (min-width: 480px) and (max-width: 575px) {
    .alp-icon-menu {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: calc(var(--alp-grid-gap) * 0.85);
        padding: 0 calc(var(--alp-grid-gap) * 0.75);
    }

    .alp-icon-item {
        padding: calc(var(--alp-item-padding) * 0.85);
    }

    .alp-icon-item h3 {
        font-size: calc(var(--alp-font-size) * 0.85);
    }
}

/* Mobile portrait (320px - 479px) */
@media (max-width: 479px) {
    .alp-icon-menu {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
        gap: calc(var(--alp-grid-gap) * 0.7);
        padding: 0 calc(var(--alp-grid-gap) * 0.5);
    }

    .alp-icon-item {
        padding: calc(var(--alp-item-padding) * 0.7);
        min-height: calc(var(--alp-icon-item-height) * 0.85);
    }

    .alp-icon-image-container {
        height: calc(var(--alp-icon-image-container-height) * 0.85);
        width: calc(var(--alp-icon-image-max-size) * 0.85);
        max-height: calc(var(--alp-icon-image-container-height) * 0.85);
        max-width: calc(var(--alp-icon-image-max-size) * 0.85);
    }

    .alp-icon-item img,
    .alp-icon-item svg {
        width: calc(var(--alp-icon-image-max-size) * 0.85) !important;
        height: calc(var(--alp-icon-image-max-size) * 0.85) !important;
        max-width: calc(var(--alp-icon-image-max-size) * 0.85) !important;
        max-height: calc(var(--alp-icon-image-max-size) * 0.85) !important;
    }

    .alp-icon-item h3 {
        font-size: calc(var(--alp-font-size) * 0.8);
        -webkit-line-clamp: 2;
    }

    .alp-icon-text-container {
        padding-top: calc(var(--alp-item-padding) * 0.5);
    }
}

/* Extra small screens (< 320px) */
@media (max-width: 319px) {
    .alp-icon-menu {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 0 4px;
    }

    .alp-icon-item {
        padding: 4px;
        min-height: 70px;
    }

    .alp-icon-image-container {
        height: 32px;
        width: 32px;
        max-height: 32px;
        max-width: 32px;
    }

    .alp-icon-item img,
    .alp-icon-item svg {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }

    .alp-icon-item h3 {
        font-size: 10px;
        -webkit-line-clamp: 1;
    }
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .alp-icon-item,
    .alp-icon-image-container,
    .alp-icon-item img,
    .alp-icon-item svg {
        transition: none !important;
    }

    .alp-icon-item:hover {
        transform: none;
    }

    .alp-icon-item:hover img,
    .alp-icon-item:hover svg {
        transform: none;
    }
}

/* ============================================
   Accessibility: High Contrast Mode
   ============================================ */
@media (prefers-contrast: high) {
    .alp-icon-item {
        border: 2px solid currentColor;
        background-color: Canvas;
        color: CanvasText;
    }

    .alp-icon-menu a:focus-visible .alp-icon-item {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}

/* ============================================
   Accessibility: Dark Mode Support
   ============================================ */
@media (prefers-color-scheme: dark) {
    .alp-icon-item {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .alp-with-shadow .alp-icon-item {
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.3),
            0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .alp-shadow-hover .alp-icon-item:hover,
    .alp-with-shadow.alp-shadow-hover .alp-icon-item:hover {
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.4),
            0 12px 32px rgba(0, 0, 0, 0.3);
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .alp-icon-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .alp-icon-item {
        border: 1px solid #ccc;
        page-break-inside: avoid;
        box-shadow: none !important;
        transform: none !important;
    }

    .alp-icon-menu a {
        text-decoration: none;
        color: #000;
    }
}

/* ============================================
   Loading State (optional)
   ============================================ */
.alp-icon-menu.alp-loading .alp-icon-item {
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================
   Empty State
   ============================================ */
.alp-icon-menu:empty::after {
    content: "No icons to display";
    display: block;
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-style: italic;
    grid-column: 1 / -1;
}

/* ============================================
   Touch Device Optimizations
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .alp-icon-item:hover {
        transform: none;
    }

    .alp-icon-item:hover img,
    .alp-icon-item:hover svg {
        transform: none;
    }

    /* Active state for touch feedback */
    .alp-icon-menu a:active .alp-icon-item {
        transform: scale(0.95);
        opacity: 0.9;
    }

    /* Ensure adequate touch target size (44px minimum) */
    .alp-icon-item {
        min-height: max(var(--alp-icon-item-height), 44px);
    }
}