/* About Page Redesign Override - Matches admin.php light theme */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary-orange: #F06820 !important;
    --primary-dark: #C94010 !important;
    --accent-gold: #F58040 !important;
    --light-cream: #FFF5EE !important;
    --text-dark: #1A0F08 !important;
    --text-gray: #9C897E !important;
    --border-light: #F0EAE6 !important;
    --hover-orange: #E05520 !important;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background: #F0EAE6 !important;
    color: #1A0F08;
}

/* ── HEADER ─────────────────────────── */
.header {
    background: #FFFCFA !important;
    border-bottom: 1px solid #F0EAE6 !important;
    box-shadow: 0 2px 12px rgba(200,90,20,.08) !important;
    height: 64px; display: flex; align-items: center;
}
.logo { color: #1A0F08 !important; font-size: 1.1rem !important; font-weight: 800 !important; }
.logo em { font-style: normal !important; color: #F06820 !important; }
.logo i { display: none; }
.logo::before {
    content: ''; display: inline-block; width: 38px; height: 38px;
    background: url('../img/CITAS_logo.png') center/cover; border-radius: 50%;
    margin-right: 0.5rem; box-shadow: 0 2px 8px rgba(200,90,20,.15);
    vertical-align: middle;
}
.nav-link {
    color: #6B5B52 !important; font-size: 13px !important; font-weight: 600 !important;
    padding: 0.5rem 0.85rem !important; border-radius: 8px !important;
    border: 1.5px solid transparent !important;
}
.nav-link:hover { background: #FFF5EE !important; color: #F06820 !important; }
.nav-link.logout { border-color: #F0EAE6 !important; }
.nav-link.logout:hover { border-color: #F9A070 !important; color: #F06820 !important; background: #FFF5EE !important; }

/* Login button style */
.nav-link[onclick*="openAuthModal"],
.nav-link[style*="border-radius: 50px"] {
    background: linear-gradient(135deg, #F06820, #C94010) !important;
    color: white !important; border-radius: 50px !important; border: none !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: 0 3px 10px rgba(240,104,32,.25) !important;
}
.nav-link[onclick*="openAuthModal"]:hover,
.nav-link[style*="border-radius: 50px"]:hover {
    opacity: 0.9 !important; transform: translateY(-1px) !important;
    color: white !important; background: linear-gradient(135deg, #F06820, #C94010) !important;
}

/* ── SIDEBAR ────────────────────────── */
.sidebar-section {
    background: #FFFCFA !important; border: 1px solid rgba(0,0,0,.05) !important;
    border-radius: 12px !important; box-shadow: 0 2px 12px rgba(200,90,20,.08) !important;
    padding: 1.25rem !important;
}
.sidebar-section h3 {
    font-size: 10px !important; font-weight: 700 !important; letter-spacing: .8px !important;
    color: #F06820 !important;
}
.sidebar-menu a {
    font-size: 13px !important; font-weight: 500 !important; color: #9C897E !important;
    padding: 0.6rem 0.75rem !important; border-radius: 8px !important;
}
.sidebar-menu a:hover { background: #FFF5EE !important; color: #F06820 !important; }
.sidebar-menu a.active { background: #FDE8D8 !important; color: #F06820 !important; font-weight: 700 !important; }

/* ── PAGE HEADER ────────────────────── */
.page-header {
    background: #FFFCFA !important; border: 1px solid rgba(0,0,0,.05) !important;
    border-radius: 12px !important; box-shadow: 0 2px 12px rgba(200,90,20,.08) !important;
    padding: 1.5rem 1.75rem !important;
}
.page-header h1 { font-size: 1.35rem !important; font-weight: 800 !important; color: #1A0F08 !important; }
.page-header h1 i { color: #F06820 !important; }
.page-header p { color: #9C897E !important; font-size: 13px !important; font-weight: 500 !important; }

/* ── CONTENT SECTIONS ───────────────── */
.content-section, .about-repository {
    background: #FFFCFA !important; border: 1px solid rgba(0,0,0,.05) !important;
    border-radius: 12px !important; box-shadow: 0 2px 12px rgba(200,90,20,.08) !important;
    padding: 1.75rem !important;
}
.content-section h3, .about-repository h3 {
    font-size: 1.1rem !important; font-weight: 800 !important; color: #1A0F08 !important;
}
.content-section h3 i, .about-repository h3 i { color: #F06820 !important; }
.content-section p, .about-repository p {
    color: #6B5B52 !important; font-size: 13px !important; font-weight: 500 !important;
    line-height: 1.8 !important;
}
.about-repository h4 { color: #F06820 !important; font-size: 14px !important; font-weight: 800 !important; }

/* Features List */
.features-list li { color: #6B5B52 !important; font-size: 13px !important; font-weight: 500 !important; }
.features-list li:before { color: #F06820 !important; }

/* ── VISION / MISSION CARDS ─────────── */
.vision-mission-card {
    background: #FFFCFA !important; border: 1px solid rgba(0,0,0,.05) !important;
    border-radius: 12px !important; box-shadow: 0 2px 12px rgba(200,90,20,.08) !important;
    border-top: 3px solid #F06820 !important;
}
.vision-mission-card:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 24px rgba(200,90,20,.12) !important; }
.vision-mission-card h4 {
    font-size: 11px !important; font-weight: 700 !important; color: #F06820 !important;
    letter-spacing: .8px !important;
}
.vision-mission-card p { color: #6B5B52 !important; font-size: 13px !important; font-weight: 500 !important; }

/* ── DEVELOPER CARDS ────────────────── */
.developer-card {
    background: #FFFCFA !important; border: 1px solid rgba(0,0,0,.05) !important;
    border-radius: 12px !important; box-shadow: 0 2px 12px rgba(200,90,20,.08) !important;
}
.developer-card:hover {
    box-shadow: 0 6px 24px rgba(200,90,20,.15) !important;
    transform: translateY(-3px) !important; border-color: #F06820 !important;
}
.developer-card::before { background: linear-gradient(135deg, #FFA000, #E63E00) !important; }
.developer-avatar {
    border: 3px solid #F06820 !important; background: #FFF5EE !important;
    color: #F06820 !important;
}
.developer-name { color: #1A0F08 !important; font-size: 14px !important; font-weight: 800 !important; }
.developer-role {
    color: #F06820 !important; font-size: 10px !important; font-weight: 700 !important;
    letter-spacing: .8px !important;
}
.developer-description { color: #9C897E !important; font-size: 12.5px !important; font-weight: 500 !important; }
.developer-action { color: #F06820 !important; font-size: 12.5px !important; font-weight: 700 !important; }

/* ── DEVELOPER MODAL ────────────────── */
.developer-modal-overlay { backdrop-filter: blur(6px) !important; background: rgba(0,0,0,.45) !important; }
.developer-modal-content {
    background: #FFFCFA !important; border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(200,90,20,.2) !important;
}
.developer-modal-close {
    background: #FFFCFA !important; border: 1.5px solid #F0EAE6 !important;
    color: #9C897E !important;
}
.developer-modal-close:hover { color: #F06820 !important; border-color: #F06820 !important; background: #FFF5EE !important; }
.developer-modal-header { border-bottom-color: #F0EAE6 !important; }
.developer-modal-info h2 { color: #1A0F08 !important; font-weight: 800 !important; }
.modal-photo { border-color: #F06820 !important; box-shadow: 0 8px 24px rgba(240,104,32,.15) !important; border-radius: 12px !important; }
.modal-body-left-column { background: #FFF5EE !important; border-right-color: #F0EAE6 !important; }

/* Modal info labels and values */
.developer-modal-content .modal-body-right-column h3,
.developer-modal-content h3 { color: #1A0F08 !important; font-weight: 800 !important; font-size: 14px !important; }
.developer-modal-content .modal-body-right-column p,
.developer-modal-content p { color: #6B5B52 !important; font-size: 13px !important; font-weight: 500 !important; }

/* Contributor photos in modal */
.contributor-photo { border-color: #F06820 !important; }
.contributor-name { color: #1A0F08 !important; font-weight: 700 !important; }

/* ── MOBILE NAV ─────────────────────── */
.mobile-nav-overlay { background: rgba(0,0,0,0.4) !important; }
.mobile-nav-menu {
    background: linear-gradient(180deg, #FFA000 0%, #FF6600 50%, #E63E00 100%) !important;
    width: 280px !important; padding-top: 60px !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.25) !important;
}
.mobile-nav-menu .sidebar-menu { list-style: none !important; padding: 0 !important; }
.mobile-nav-menu .sidebar-menu a {
    color: rgba(255,255,255,.85) !important; padding: 0.85rem 1.5rem !important;
    display: flex !important; align-items: center !important; gap: 1rem !important;
    text-decoration: none !important; border-left: 3px solid transparent !important;
    font-size: 13.5px !important; font-weight: 500 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    transition: all 0.2s !important; background: transparent !important;
}
.mobile-nav-menu .sidebar-menu a:hover,
.mobile-nav-menu .sidebar-menu a.active {
    background: rgba(255,255,255,.2) !important;
    border-left-color: white !important; color: white !important; font-weight: 700 !important;
}
.mobile-user-menu { border-bottom: 1px solid rgba(255,255,255,.25) !important; }
.mobile-user-menu .profile-info {
    padding: 1rem 1.5rem !important; display: flex !important; align-items: center !important;
    gap: 0.75rem !important; color: white !important; cursor: pointer !important;
}
.mobile-user-menu .profile-info:hover { background: rgba(255,255,255,.15) !important; }
.mobile-user-menu .profile-info i { font-size: 1.5rem !important; }
.mobile-user-menu .profile-info span { font-weight: 600 !important; font-size: 14px !important; }
.mobile-user-menu .logout-btn {
    display: flex !important; align-items: center !important; gap: 1rem !important;
    padding: 0.85rem 1.5rem !important; background: none !important; border: none !important;
    color: rgba(255,255,255,.85) !important; width: 100% !important; cursor: pointer !important;
    font-size: 13.5px !important; font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 500 !important; transition: all 0.2s !important;
}
.mobile-user-menu .logout-btn:hover { background: rgba(0,0,0,.15) !important; color: white !important; }
.mobile-login-menu { border-top: 1px solid rgba(255,255,255,.25) !important; margin-top: 1rem !important; padding-top: 0.5rem !important; }
.mobile-login-btn {
    display: flex !important; align-items: center !important; gap: 1rem !important;
    padding: 0.85rem 1.5rem !important; background: none !important; border: none !important;
    color: white !important; width: 100% !important; cursor: pointer !important;
    font-size: 13.5px !important; font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important; transition: all 0.2s !important;
}
.mobile-login-btn:hover { background: rgba(255,255,255,.2) !important; }
.hamburger-menu span { background: #1A0F08 !important; }

/* ── FOOTER ─────────────────────────── */
.footer {
    background: #FFFCFA !important; color: #9C897E !important;
    border-top: 1px solid #F0EAE6 !important;
}

/* ── NOTIFICATION ───────────────────── */
.notification-badge { background: #EF4444 !important; }

/* ── SEARCH BAR ─────────────────────── */
.search-bar {
    background: #F0EAE6 !important; border: 1.5px solid transparent !important;
    border-radius: 40px !important;
}
.search-bar:focus-within { background: white !important; border-color: #F9A070 !important; }
.search-bar input { font-family: 'Plus Jakarta Sans', sans-serif !important; color: #1A0F08 !important; font-size: 13px !important; }
.search-bar input::placeholder { color: #9C897E !important; }
.search-bar button { color: #F06820 !important; }

/* ── SELECTABLE TEXT ────────────────── */
.content-section p, .about-repository p, .vision-mission-card p,
.developer-description, .features-list li {
    -webkit-user-select: text !important; -moz-user-select: text !important; user-select: text !important;
}