.ime-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25em;
}

.ime-icon-wrapper {
    display: inline-block;
    vertical-align: middle;
}

.ime-text {
    display: inline-block;
    vertical-align: middle;
}



/* Position styles - now handled dynamically in PHP */

/* Default horizontal layout */
.menu li a,
.nav-menu li a {
    display: inline-block;
    vertical-align: middle;
}

/* Vertical layout option - only applied when .ime-vertical-layout class is present */
.ime-vertical-layout .menu li a,
.ime-vertical-layout .nav-menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 2.5em;
    text-align: center;
}

.ime-vertical-layout .menu li,
.ime-vertical-layout .nav-menu li {
    display: flex;
    align-items: stretch;
}

.ime-vertical-layout .menu,
.ime-vertical-layout .nav-menu {
    display: flex;
    align-items: stretch;
}

/* Ensure text-only menu items align properly with icon items in vertical layout */
.ime-vertical-layout .menu li a:not(:has(.ime-icon-wrapper)),
.ime-vertical-layout .nav-menu li a:not(:has(.ime-icon-wrapper)) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 2.5em;
}

/* When text is disabled, center the icon/placeholder */
.ime-position-before .ime-icon,
.ime-position-before .ime-icon-placeholder {
    margin: 0 auto;
}

/* CRITICAL: Wrapper must stay inline-block for horizontal menus */
.ime-icon-wrapper {
    display: inline-block;
    vertical-align: middle;
}

.ime-text {
    display: inline-block;
    vertical-align: middle;
}

/* Position: Top - works correctly */
.ime-position-top {
    text-align: center;
}

.ime-position-top .ime-icon,
.ime-position-top .ime-text {
    display: block;
    margin: 0 auto;
}

.ime-position-top .ime-icon {
    margin-bottom: 0.25em;
}

/* Ensure placeholder icons in top position have same spacing */
.ime-position-top .ime-icon.placeholder-icon {
    margin-bottom: 0.25em !important;
    margin-top: 0 !important;
    display: block !important;
}

/* Position: Bottom - fixed for proper centering */
.ime-position-bottom {
    text-align: center;
}

.ime-position-bottom .ime-icon,
.ime-position-bottom .ime-text {
    display: block;
    margin: 0 auto;
}

.ime-position-bottom .ime-text {
    margin-bottom: 0.25em;
}

/* Hide the hidden placeholder images completely */
.ime-icon[style*="display: none"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* Handle transparent placeholder icons - MUST have same dimensions as real icons */
.ime-icon.placeholder-icon {
    opacity: 0 !important;
    pointer-events: none !important;
    /* Dimensions will be set via inline styles from PHP */
    margin: 0.25em auto !important;
    display: block !important;
}

/* Position: Before Text */
.ime-position-before .ime-icon {
    margin-right: 0.5em;
}

/* Position: After Text */
.ime-position-after .ime-icon {
    margin-left: 0.5em;
}

/* Default horizontal layout */
.menu li a,
.nav-menu li a {
    display: inline-block;
    vertical-align: middle;
}

/* Ensure menu items stay inline */
.menu > li,
.nav-menu > li {
    display: inline-block;
    vertical-align: top;
}

/* Vertical layout option - only applied when .ime-vertical-layout class is present */
.ime-vertical-layout .menu li a,
.ime-vertical-layout .nav-menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 2.5em;
    text-align: center;
}

.ime-vertical-layout .menu li,
.ime-vertical-layout .nav-menu li {
    display: flex;
    align-items: stretch;
}

.ime-vertical-layout .menu,
.ime-vertical-layout .nav-menu {
    display: flex;
    align-items: stretch;
}

/* ========================================
   RESPONSIVE MOBILE STYLES
   ======================================== */

/* Mobile styles are now generated dynamically in PHP with user-configurable breakpoints */

/* Tablet breakpoint - screens 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablet menu adjustments */
    .menu li a,
    .nav-menu li a {
        padding: 0.75em 0.5em !important;
    }
    
    /* Tablet tap target compliance */
    .menu li a,
    .nav-menu li a,
    .ime-icon-wrapper {
        min-height: 44px !important;
    }
}

/* Desktop breakpoint - screens larger than 1024px */
@media (min-width: 1025px) {
    /* Desktop maintains original sizing from PHP settings */
    /* Icons will use the desktop size settings */
}