/* ======================================
   GLOBAL FONT SETUP
====================================== */
body, a, p, span, div, button, input, textarea, select, label {
    font-family: 'Anuphan', 'Manjari', sans-serif;
    margin: 0;
    padding: 0;
}

/* ======================================
   TOP BAR
====================================== */
.header-top {
    background:#8B0000;
    padding:6px 0;
    color:#fff;
    font-size:13px;
}

.header-top .container {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.header-contact a {
    color:#fff;
    margin-right:15px;
    text-decoration:none;
    font-size:13px;
}

.lang-switcher {
    display: flex;
    gap: 5px;
    flex-shrink: 0; /* language buttons never compress */
}

.lang-switcher a {
    background:#ffffff22;
    padding:4px 10px;
    color:#fff;
    text-decoration:none;
    border-radius:4px;
    font-size:12px;
}

.lang-switcher a.active {
    background:#D4AF37;
    color:#8B0000;
    font-weight:700;
}

/* ======================================
   MAIN HEADER
====================================== */
.main-header {
    background:#fff;
    padding:10px 0;
    box-shadow:0 2px 4px rgba(0,0,0,0.08);
}

.header-content {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 10px;
}

/* LEFT SECTION (SIDEBAR + LOGO) */
.header-left {
    display:flex;
    align-items:center;
    gap:10px;

    flex: 1;       /* NEW */
    min-width: 0;  /* VERY IMPORTANT fix */
}

/* SIDEBAR BUTTON (normal flex element now) */
.sidebar-btn {
    width:44px;
    height:44px;
    background:#8B0000;
    color:white;
    border:none;
    border-radius:10px;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,0.25);
    flex-shrink:0;   /* Do NOT shrink */
}

/* LOGO + TITLE */
.site-logo {
    display:flex;
    align-items:center;
    gap:10px;
    overflow:hidden; /* Prevent text overflow */
    text-decoration:none;
}

.logo-img {
    width:55px;
    height:55px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #D4AF37;
    flex-shrink:0;  /* Do not compress */
}

.site-title {
    font-size:17px;
    font-weight:700;
    color:#8B0000;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.site-subtitle {
    font-size:11px;
    color:#555;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ======================================
   NAVIGATION
====================================== */
.main-nav ul {
    list-style:none;
    display:flex;
    gap:5px;
    flex-shrink:0;  /* desktop nav should not shrink */
}

.main-nav a {
    display:block;
    padding:10px 14px;
    text-decoration:none;
    font-size:14px;
    color:#333;
    border-radius:6px;
    font-weight:600;
}

.main-nav a:hover {
    background:#FFF3E0;
    color:#8B0000;
}

.donate-btn {
    background:linear-gradient(135deg, #D4AF37, #F7D774);
    color:#8B0000 !important;
    font-weight:700;
}

/* ======================================
   MOBILE NAV RESPONSIVE
====================================== */
@media(max-width:900px){
    .main-nav { display:none; }
    .main-nav.active { display:block; }

    .main-nav ul {
        flex-direction:column;
        width:100%;
    }

    .main-nav a {
        padding:14px;
    }
}

/* ======================================
   SIDEBAR MENU FIXED
====================================== */
.sidebar-menu {
    position:fixed;
    top:0;
    left:-260px;
    width:260px;
    height:100vh;
    background:#8B0000;
    color:white;
    z-index:99999;
    transition:left 0.35s ease;
    box-shadow:4px 0 10px rgba(0,0,0,0.3);
    padding-top:80px;
}

.sidebar-menu.active {
    left:0;
}

.sidebar-inner a {
    display:block;
    padding:16px 20px;
    color:white;
    font-size:18px;
    text-decoration:none;
    border-bottom:1px solid #ffffff22;
}

.sidebar-inner a:hover {
    background:#A30000;
}

.sidebar-inner .donate-link {
    background:#FFD700;
    color:#8B0000 !important;
    font-weight:bold;
}

/* overlay */
.sidebar-overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.35);
    z-index:9999;
    display:none;
}
.sidebar-overlay.active {
    display:block;
}