/* =====================================================
   TN24 Security & UX Fixes
   File: assets/front2/css/security-fixes.css
   ===================================================== */

/* 1. Focus visible — keyboard navigation (was outline:none in legacy CSS) */
:focus-visible {
    outline: 2px solid var(--tn24-accent, #e63946) !important;
    outline-offset: 2px !important;
}
/* Keep legacy :focus for older browsers but only on keyboard */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* 2. Nav dropdown right-edge clamp — last two dropdown menus open leftward */
#tn24SiteHeader .main-nav-menu > li:nth-last-child(-n+2) > .dropdown-menu,
#tn24SiteHeader .main-nav-menu > li:nth-last-child(-n+2) > ul.sub-menu {
    left: auto !important;
    right: 0 !important;
}

/* 3. Dropdown max-width so long Bengali menus don't overflow viewport */
#tn24SiteHeader .main-nav-menu .dropdown-menu,
#tn24SiteHeader .main-nav-menu ul.sub-menu {
    max-width: min(280px, 92vw) !important;
    overflow-x: hidden !important;
}

/* 4. Image lazy-load blur-in — visual polish while images load */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
    opacity: 1;
}

/* 5. Skip-to-content link for accessibility */
.tn24-skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    background: #fff;
    color: #1a2340;
    padding: 0.5rem 1rem;
    border-radius: 0 0 6px 6px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid #1a2340;
    text-decoration: none;
    transition: top 0.2s;
}
.tn24-skip-link:focus {
    top: 0;
}

/* 6. Footer social icons — prevent generic link confusion */
.tn24-footer__social a[href="https://www.youtube.com/"],
.tn24-footer__social a[href="https://linkedin.com/"],
.tn24-footer__social a[href="https://www.instagram.com/"] {
    opacity: 0.35; /* dim until real URLs are added */
    pointer-events: none;
    cursor: not-allowed;
    position: relative;
}
