/*
* =================================================================
* IQRA Info Services — fixes.css (v2)
* Upload to: public_html/css/fixes.css
* Add to every page :
* is only as tall as the trigger
link. The .dropdown-panel was positioned at top:calc(100% + 10px),
meaning 10px BELOW the 's bottom edge.
When the cursor moves from the trigger into that 10px gap:
• It exits the 's bounding box
• mouseleave fires on
• The JS closes the panel
• Cursor never reaches the panel items
The ::after bridge on didn't help because the is inside
the — the event fires on the , not the .
THE FIX:
─────────────────────────────────────────────
1. Override top to 100% — panel starts flush at the bottom.
Cursor never exits the because the panel element begins
exactly where the ends.
2. Add border-top: 12px solid transparent to the panel.
This creates a VISUAL gap (transparent area above panel content)
while keeping the cursor inside the panel element's border-box.
The cursor entering the transparent border IS entering the panel,
so no mouseleave fires on the .
3. background-clip: padding-box ensures the panel's background
colour only appears below the transparent border (not inside it).
================================================================= */
.nav-dropdown {
position: relative; /* required for absolute panel positioning */
}
/* Step 1 + 2 + 3: the core gap fix */
.nav-dropdown .dropdown-panel,
.nav-dropdown .dropdown-menu {
top: 100% !important; /* flush at bottom — no physical gap */
border-top: 12px solid transparent !important; /* visual gap via transparent border */
background-clip: padding-box !important; /* bg starts below the transparent border */
margin-top: 0 !important; /* remove any margin pushing it down further */
}
/* Remove old CSS :hover — JS handles open/close state now */
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:hover .dropdown-menu {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(-6px) !important;
visibility: hidden !important;
}
/* JS-applied .dd-open class overrides the suppressed :hover above */
.nav-dropdown .dropdown-panel.dd-open,
.nav-dropdown .dropdown-menu.dd-open {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(0) !important;
visibility: visible !important;
}
/* Smooth animation */
.nav-dropdown .dropdown-panel,
.nav-dropdown .dropdown-menu {
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s !important;
}
/* =================================================================
FIX 2 — MOBILE MENU bleeding onto desktop navbar
================================================================= */
/* Hidden on desktop — JS adds .open only on mobile */
.mobile-menu {
display: none !important;
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
background: rgba(8, 15, 30, 0.98) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open {
display: flex !important;
transform: translateX(0) !important;
}
/* Desktop: hamburger hidden */
.hamburger {
display: none !important;
}
/* Mobile: show hamburger, hide desktop nav */
@media (max-width: 1024px) {
.hamburger {
display: flex !important;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 6px;
background: transparent;
border: none;
color: inherit;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: all 0.28s ease;
pointer-events: none;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-links,
.nav-cta {
display: none !important;
}
}
/* Mobile menu link styling */
.mobile-menu a {
display: block !important;
width: 100%;
max-width: 280px;
padding: 11px 20px;
text-align: center;
font-size: 1rem;
font-weight: 500;
color: #94a3b8;
border-radius: 10px;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.mobile-menu a:hover { color: #f0f4ff; background: rgba(255,255,255,0.07); }
.mobile-close {
position: absolute;
top: 16px; right: 16px;
background: none;
border: none;
color: #64748b;
font-size: 1.4rem;
cursor: pointer;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
transition: background 0.15s, color 0.15s;
}
.mobile-close:hover { background: rgba(255,255,255,0.08); color: #f0f4ff; }
/* =================================================================
FIX 3 — Knowledge Base: category grid broken layout
================================================================= */
.kb-categories {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
list-style: none !important;
}
.kb-categories > * {
display: flex !important;
flex-direction: column !important;
min-width: 0;
}
@media (max-width: 1024px) {
.kb-categories { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
.kb-categories { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
}
/* =================================================================
FIX 4 — Knowledge Base: popular article list on one line
================================================================= */
.kb-article-list {
display: flex !important;
flex-direction: column !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.kb-article-list li {
display: block !important;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.kb-article-list li:last-child { border-bottom: none; }
.kb-article-list a {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 20px !important;
white-space: normal !important;
text-decoration: none !important;
width: 100% !important;
}
/* =================================================================
FIX 5 — Footer links stacked correctly
================================================================= */
.footer-col ul,
footer ul {
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* =================================================================
GLOBAL — prevent horizontal overflow
================================================================= */
html, body { overflow-x: hidden; }
.navbar, header nav, nav.navbar { z-index: 900 !important; }