/**
 * Euro IQ Trade - UI/UX Improvements (Phase 1)
 * =============================================
 * Enhanced navigation, footer, accordion, and accessibility styles
 */

/* ===========================================
   GLOBAL LAYOUT FIXES
   =========================================== */

/* Ensure proper spacing on mobile devices */
.tm-container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

@media (max-width: 767px) {
    .tm-container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* Ensure the banner content doesn't touch edges */
    .tm-title.left,
    .tm-inner-banner .tm-title {
        padding-left: 0;
        /* Reset specific padding if it was causing issues, as container now handles it */
    }
}

/* ===========================================
   NAVIGATION DROPDOWN IMPROVEMENTS
   =========================================== */

/* Enhanced submenu visibility and transitions */
nav>div>ul>li.has-submenu>.tm-submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal);
    box-shadow: var(--shadow-dropdown);
    border-radius: var(--radius-md);
    overflow: hidden;
}

nav>div>ul>li.has-submenu:hover>.tm-submenu,
nav>div>ul>li.has-submenu:focus-within>.tm-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown arrow animation */
nav>div>ul>li.has-submenu:before {
    transition: transform var(--transition-fast);
}

nav>div>ul>li.has-submenu:hover:before {
    transform: rotate(180deg);
}

/* Submenu item hover states */
nav>div>ul>li.has-submenu>.tm-submenu>li>a {
    position: relative;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

nav>div>ul>li.has-submenu>.tm-submenu>li>a:hover {
    background-color: rgba(64, 220, 253, 0.08);
    border-left-color: var(--color-accent);
    padding-left: 23px;
}

/* Active nav item indicator */
nav>div>ul>li>a.active,
nav>div>ul>li.current>a {
    position: relative;
}

nav>div>ul>li>a.active:after,
nav>div>ul>li.current>a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background-color: var(--color-accent);
}

/* ===========================================
   MOBILE MENU IMPROVEMENTS
   =========================================== */

/* Larger touch targets for mobile menu trigger */
.menu-trigger {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.menu-trigger:hover,
.menu-trigger:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu-trigger:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Mobile submenu touch-friendly */
@media (max-width: 1023px) {
    nav>div>ul>li.has-submenu>a {
        padding-right: 40px;
    }

    nav>div>ul>li.has-submenu>.tm-submenu>li>a {
        padding: 12px 20px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ===========================================
   ACCORDION IMPROVEMENTS (Unified Styling)
   =========================================== */

/* Consistent accordion styling across pages */
.tm-accordion .tm-question {
    cursor: pointer;
    font-size: var(--font-size-md);
    padding: var(--space-md) var(--space-xl) var(--space-md) var(--space-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    background-color: rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all var(--transition-normal);
    margin-bottom: 6px;
    line-height: var(--line-height-normal);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
}

.tm-accordion .tm-question:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.tm-accordion .tm-question:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* Expand/collapse icon */
.tm-accordion .tm-question:after {
    content: '+';
    position: absolute;
    top: 50%;
    right: var(--space-lg);
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    transition: transform var(--transition-normal);
    border: none;
}

.tm-accordion .tm-question.expanded {
    background-color: rgba(64, 220, 253, 0.08);
    color: var(--color-primary);
    border-left-color: var(--color-accent);
}

.tm-accordion .tm-question.expanded:after {
    content: '−';
    color: var(--color-accent);
}

/* Smooth answer reveal */
.tm-accordion .tm-answer {
    padding: 0 var(--space-lg);
    max-height: 0;
    overflow: hidden;
    transition:
        max-height var(--transition-slow),
        padding var(--transition-normal),
        opacity var(--transition-normal);
    opacity: 0;
}

.tm-accordion .tm-question.expanded+.tm-answer {
    padding: var(--space-lg);
    max-height: 1000px;
    opacity: 1;
}

/* Homepage live quotes accordion (unified with FAQ) */
.tm-banner-live-quotes .accordion-head {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-on-dark-muted);
}

.tm-banner-live-quotes .accordion-head:hover {
    color: var(--color-text-on-dark);
}

.tm-banner-live-quotes .accordion-head.active-header {
    color: var(--color-accent);
}

/* Tab navigation consistency */
.tm-live-quotes .tm-tab-nav li {
    font-weight: var(--font-weight-semibold);
    padding: var(--space-sm) 0;
    transition: color var(--transition-normal);
}

.tm-live-quotes .tm-tab-nav li:hover {
    color: var(--color-text-on-dark);
}

.tm-live-quotes .tm-tab-nav li:after {
    transition: width var(--transition-normal);
    height: 2px;
}

/* ===========================================
   FOOTER ENHANCEMENT
   =========================================== */

footer {
    padding: var(--space-3xl) 0 var(--space-xl);
    background-color: var(--color-primary);
    color: var(--color-text-on-dark);
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.footer-section {
    flex: 1;
    min-width: 200px;
}

.footer-section h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-on-dark);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: var(--space-sm);
}

.footer-section ul li a {
    color: var(--color-text-on-dark-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
    display: inline-block;
    padding: 4px 0;
}

.footer-section ul li a:hover {
    color: var(--color-accent);
}

.footer-logo {
    margin-bottom: var(--space-md);
}

.footer-logo img {
    max-height: 40px;
    width: auto;
}

.footer-description {
    color: var(--color-text-on-dark-subtle);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    max-width: 280px;
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-on-dark);
    transition: all var(--transition-fast);
}

.footer-social a:hover {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.footer-bottom p {
    color: var(--color-text-on-dark-subtle);
    font-size: var(--font-size-sm);
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: var(--space-lg);
}

.footer-bottom-links a {
    color: var(--color-text-on-dark-subtle);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
    color: var(--color-accent);
}

/* ===========================================
   ACCESSIBILITY IMPROVEMENTS
   =========================================== */

/* Focus visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary);
    color: var(--color-text-on-dark);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    z-index: var(--z-tooltip);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-md);
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===========================================
   BUTTON IMPROVEMENTS
   =========================================== */

/* Enhanced primary button */
.btn-big.primary,
.btn-normal.primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, #0ea5e9 100%);
    box-shadow: var(--shadow-button);
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn-big.primary:hover,
.btn-normal.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-big.primary:active,
.btn-normal.primary:active {
    transform: translateY(0);
}

/* Enhanced secondary button */
.btn-rounded.white-line:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

@media (max-width: 767px) {
    .footer-content {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .footer-section {
        min-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
    }
}