/* Lifeline CF - Comprehensive Fixes */ /* ===== LOGO FIX: Consistent sizing across all screen sizes ===== */ .header .logo, .header .logo a, .header .logo img { max-width: 200px !important; width: auto !important; height: auto !important; display: block !important; } /* Ensure logo doesn't stretch or shift on wide monitors */ .header .top-header .logo { flex-shrink: 0; margin-right: auto; } /* Center logo container alignment */ .header .top-header { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 1rem; } /* Prevent logo from shifting left on wide screens */ @media (min-width: 1400px) { .header .top-header .container { max-width: 1200px; margin: 0 auto; } .header .logo { margin-left: 0 !important; } } /* Logo specific fixes for different header styles */ .header.style-4 .top-header .logo, .header.style-4.wide .top-header .logo { max-width: 200px !important; } /* Ensure logo doesn't get distorted */ .logo img { object-fit: contain !important; max-height: 60px !important; } /* ===== DROPDOWN MENU CONSISTENCY ===== */ /* Make all dropdown menus consistent */ .main-navigation .sub-menu-wrap { position: absolute; top: 100%; left: 0; background: #ffffff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 0.5rem 0; min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; } .main-navigation li:hover > .sub-menu-wrap { opacity: 1; visibility: visible; transform: translateY(0); } .main-navigation .sub-menu-wrap ul { list-style: none; padding: 0; margin: 0; } .main-navigation .sub-menu-wrap li { margin: 0; } .main-navigation .sub-menu-wrap a { display: block; padding: 0.75rem 1.5rem; color: #111; transition: all 0.2s ease; white-space: nowrap; } .main-navigation .sub-menu-wrap a:hover { background: #f7f7f8; color: #a80303; padding-left: 2rem; } /* ===== MOBILE MENU IMPROVEMENTS ===== */ @media (max-width: 991px) { .header .logo { max-width: 160px !important; } .logo img { max-height: 50px !important; } } /* ===== PWA INSTALL PROMPT ENHANCEMENTS ===== */ /* Make install prompts more visible on mobile */ @media (max-width: 768px) { #pwa-install-banner { width: calc(100% - 32px) !important; bottom: 16px !important; } } /* ===== ACCESSIBILITY IMPROVEMENTS ===== */ /* Better focus states for keyboard navigation */ .main-navigation a:focus, .btn:focus, button:focus { outline: 2px solid #a80303; outline-offset: 2px; } /* ===== RESPONSIVE IMPROVEMENTS ===== */ /* Ensure content doesn't break on very wide screens */ @media (min-width: 1600px) { .container.wide, .wrapper .container { max-width: 1400px; margin-left: auto; margin-right: auto; } } /* ===== SMOOTH TRANSITIONS ===== */ /* Add smooth page transitions */ .page-transition { animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ===== BIBLE FEATURE INTEGRATION ===== */ /* Add Bible link to navigation menus */ .bible-nav-link { color: #a80303 !important; font-weight: 700 !important; } .bible-nav-link i { margin-right: 0.25rem; }