/* ===========================================================
   SZABIST Faculty Profile — reskinned to match the supplied
   "Chancellor / Head of Campus" template.
   Palette: navy #212F54 | orange accent | light blue #87CEFA
   Font:    Lato
   =========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato', Arial, sans-serif;
    background-image: linear-gradient(to right, white, #212F54);
    color: black;
    line-height: 1.6;
}

a { color: inherit; }

/* --- Top Bar --- */
.top-bar {
    background-color: #212F54;
    padding: 10px 0;
    width: 100%;
}
.top-bar-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.social-nav {
    list-style: none;
    display: flex;
    gap: 18px;
    padding: 0;
    margin: 0;
}
.social-nav li a {
    color: #ffffff;
    font-size: 1.4rem;
    transition: all 0.2s ease-in-out;
}
.social-nav li a:hover {
    color: orange;
    opacity: 0.9;
}

/* --- Hero Banner --- */
.hero-banner {
    position: relative;
    color: white;
    text-align: center;
    padding: 80px 20px;
    background-image: url('../images/ty.png');
    background-size: cover;
    background-position: center;
}
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
}
.hero-content h1 {
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 6px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.hero-content p {
    font-size: 1rem;
    letter-spacing: .04em;
    opacity: .9;
}

/* --- Page Container / Profile Card --- */
.page-container {
    max-width: 1100px;
    margin: -60px auto 40px auto;
    padding: 0 15px;
    position: relative;
    z-index: 10;
}
.profile-card {
    display: flex;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* --- Sidebar (desktop) --- */
.profile-sidebar {
    flex: 0 0 300px;
    padding: 40px 30px;
    background-color: #212F54;
    color: white;
}
.profile-picture {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 30px auto;
    border: 5px solid #ffffff;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    flex: none;
}
.profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-section h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.sidebar-section ul { list-style: none; }
.sidebar-section li { margin-bottom: 10px; }
.sidebar-section li a.nav-link {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    padding-left: 1.2em;
    opacity: 0.8;
    display: inline-block;
    min-height: 24px;
}
.sidebar-section li a.nav-link::before {
    content: '•';
    color: #ffffff;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    left: 0;
}
.sidebar-section li a.nav-link.active,
.sidebar-section li a.nav-link:hover {
    opacity: 1;
    font-weight: 700;
}

/* --- Main content --- */
.profile-main {
    flex: 1;
    padding: 40px;
    position: relative;
    min-width: 0;
}
.contact-info {
    margin-bottom: 25px;
    background-color: orange;
    color: white;
    padding: 20px;
    border-radius: 6px;
}
.contact-info strong { color: white; }

/* --- Secondary / mobile-visible horizontal nav --- */
.content-nav-container {
    background-color: #87CEFA;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    flex-wrap: wrap;
}
.content-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
    gap: 10px;
}
.content-nav li a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
    background-color: white;
    color: black;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: 0.3s;
    white-space: nowrap;
}
.content-nav li a:hover,
.content-nav li a.active {
    background-color: #212F54;
    color: white;
}

/* --- Content panel (replaces JS tab-content; one page = one panel) --- */
.tab-content {
    margin-top: 20px;
    background-color: #d3d3d3;
    padding: 25px;
    border-radius: 8px;
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.tab-content h3 { font-size: 1.5rem; font-weight: 700; color: black; margin-bottom: 20px; }
.tab-content p { font-size: 1rem; margin-bottom: 1.25em; text-align: justify; }
.tab-content ul { list-style-type: disc; padding-left: 20px; }
.tab-content ul li { margin-bottom: .6em; }
.experience-item { margin-bottom: 1.5rem; }
.experience-item .org { display:block; color:#333; margin-top:2px; }
.experience-item .desc { display:block; margin-top:4px; }

.tab-content ol { text-align: left; padding-left: 20px; }
.tab-content ol li { padding-left: 5px; margin-bottom: 0.8em; }

.pub-group-title{
    font-weight: 700;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .06em;
    color: #212F54;
    margin: 22px 0 10px 0;
}
.pub-group-title:first-child{ margin-top: 0; }
.pub-item{
    font-size: 1rem;
    padding: 8px 0 8px 20px;
    position: relative;
    border-bottom: 1px dotted rgba(33,47,84,.2);
}
.pub-item:last-child{ border-bottom: none; }
.pub-item::before{
    content: "\2022";
    position: absolute;
    left: 4px;
    color: orange;
    font-weight: bold;
}

/* --- Footer --- */
.site-footer{
    text-align: center;
    color: #212F54;
    background: #fff;
    font-size: .85rem;
    padding: 18px;
}

/* --- Mobile header (shown only under the breakpoint) --- */
.mobile-header { display: none; }
.mobile-header .profile-picture { margin: 0; width: 100px; height: 100px; border-width: 3px; }

.hamburger-menu {
    width: 30px; height: 25px; display: flex; flex-direction: column;
    justify-content: space-between; cursor: pointer; background: none; border: none;
    padding: 0;
}
.hamburger-menu span { width: 100%; height: 3px; background-color: #ffffff; border-radius: 3px; }

/* --- Mobile slide-out nav --- */
.mobile-nav {
    position: fixed; top: 0; left: -100%; width: 280px; height: 100%; z-index: 1001;
    background-color: #212F54; color: white; padding: 20px;
    transition: left 0.3s ease-in-out; overflow-y: auto;
}
.mobile-nav.is-open { left: 0; }
.mobile-nav .menu-close-btn {
    display: block; position: absolute; top: 10px; right: 15px; font-size: 2.2rem;
    color: white; background: none; border: none; cursor: pointer; line-height:1;
}
.menu-overlay { display: none; }
.menu-overlay.is-open {
    display: block;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1000;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 900px) {
    .hero-content h1 { font-size: 2rem; }
    .profile-card { flex-direction: column; overflow: visible; }
    .profile-main { padding: 0; }

    .mobile-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px; background-color: #212F54;
        border-top-left-radius: 8px; border-top-right-radius: 8px;
    }
    .main-content-area { padding: 20px; }
    .profile-sidebar { display: none; }
}

@media screen and (max-width: 600px) {
    .content-nav-container { gap: 15px; }
}

@media screen and (max-width: 480px) {
    .hero-content h1 { font-size: 1.6rem; }
    .tab-content h3 { font-size: 1.25rem; }
    .mobile-header { padding: 15px; }
    .mobile-header .profile-picture { width: 76px; height: 76px; }
    .main-content-area { padding: 15px; }
}

@media (prefers-reduced-motion: reduce){
  .sidebar-section li a.nav-link, .content-nav li a{ transition:none; }
}