/* Dark mode styles for blog elements */
body.dark-mode .page-content h1 {
    color: #ffffff;
}

body.dark-mode .page-content h2 {
    color: #ffffff;
}

body.dark-mode .page-content p {
    color: #ccc;
}

body.dark-mode .blog-post-card h3 {
    color: #ffffff;
}

body.dark-mode .blog-post-card p {
    color: #aaa;
}

body.dark-mode .blog-post-card .post-date {
    color: #999;
}

body.dark-mode .contact-card h3 {
    color: #ffffff;
}

body.dark-mode .contact-card p {
    color: #aaa;
}

/* Blog card styling to match contact/about pages */
.blog-post-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    transition: background 0.3s, border 0.3s;
    cursor: pointer;
    margin-bottom: 20px;
}

.blog-post-card h3 {
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.blog-post-card p {
    font-size: 14px;
    color: #555;
    transition: color 0.3s;
    margin-bottom: 8px;
}

.blog-post-card .post-date {
    font-size: 13px;
    color: #666;
}

/* Blog list scrolling */
#blog-list,
#blog-list-ar,
#blog-list-so {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 5px;
}

/* Custom scrollbar for blog list */
#blog-list::-webkit-scrollbar,
#blog-list-ar::-webkit-scrollbar,
#blog-list-so::-webkit-scrollbar {
    width: 6px;
}

#blog-list::-webkit-scrollbar-track,
#blog-list-ar::-webkit-scrollbar-track,
#blog-list-so::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#blog-list::-webkit-scrollbar-thumb,
#blog-list-ar::-webkit-scrollbar-thumb,
#blog-list-so::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

body.dark-mode #blog-list::-webkit-scrollbar-thumb,
body.dark-mode #blog-list-ar::-webkit-scrollbar-thumb,
body.dark-mode #blog-list-so::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
}

/* Contact page card styling - make all languages identical */
.contact-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: background 0.3s, border 0.3s;
}

.contact-card h3 {
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.contact-card p {
    font-size: 14px;
    color: #555;
    transition: color 0.3s;
}

/* Mobile blog page centering */
@media (max-width: 480px) {

    #blog .page-content,
    #blog-ar .page-content,
    #blog-so .page-content {
        width: 100%;
        max-width: 340px;
        margin: 0 16px;
    }
}


/* Hide "Back to Home" button when reading a post */
body.reading-post #blog .page-content>.back-button,
body.reading-post #blog-ar .page-content>.back-button,
body.reading-post #blog-so .page-content>.back-button {
    display: none;
}

/* Hide blog intro text while reading a single post */
body.reading-post #blog-description-en,
body.reading-post #blog-description-ar,
body.reading-post #blog-description-so,
body.reading-post #blog-heading-en,
body.reading-post #blog-heading-ar,
body.reading-post #blog-heading-so {
    display: none !important;
}

/* -------------------------------------------------
   BEAUTIFUL BLUE LINKS — Light & Dark mode friendly
   ------------------------------------------------- */

/* Default link style */
.page-content a:not(.back-button):not(.contact-icon) {
    color: #0066ee;
    /* modern blue */
    text-decoration: none;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    opacity: 0.92;
    /* slight softness */
    transition: opacity 0.15s ease, color 0.15s ease;
}

/* Hover */
.page-content a:not(.back-button):not(.contact-icon):hover {
    opacity: 1;
    color: #0053c8;
    /* slightly deeper blue */
}

/* Dark mode version */
body.dark-mode .page-content a:not(.back-button):not(.contact-icon) {
    color: #5da8ff;
    /* lighter sky-blue that pops on dark */
    opacity: 0.95;
}

body.dark-mode .page-content a:not(.back-button):not(.contact-icon):hover {
    color: #8bc3ff;
    opacity: 1;
}

[id^="home-view"] {
    margin-top: -130px;
    /* change this number whenever you want */
}


#home-view.container,
#home-view-ar.container,
#home-view-so.container {
    margin-top: -130px;
    /* change this number to taste */
}


/* Centered row of small contact icons */
.contact-icons {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Glassy mini buttons – same vibe desktop & mobile */
.contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #1a1a1a;
    /* drives SVG stroke via currentColor */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease,
        border-color 0.12s ease;
}

/* Icon sizing inside the button */
.contact-icon svg {
    width: 20px;
    height: 20px;
}

/* Hover state */
.contact-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.12);
}

/* Dark mode version */
body.dark-mode .contact-icon {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    /* so SVG strokes turn white */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

body.dark-mode .contact-icon:hover {
    background: rgba(255, 255, 255, 0.12);
}


.post-date {
    color: #555;
    font-size: 13px;
}

body.dark-mode .post-date {
    color: #e0e0e0;
}



/* Universal excerpt style */
.excerpt {
    margin: 10px 0;
    color: #444;
    /* Light mode */
}

/* Dark mode excerpt */
body.dark-mode .excerpt {
    color: #bdbdbd;
    /* Much softer in dark mode */
}

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

/* Nicer scrollbars for the content card */
.page-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    /* Firefox */
}

.page-content::-webkit-scrollbar {
    width: 8px;
}

.page-content::-webkit-scrollbar-track {
    background: transparent;
}

.page-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

body.dark-mode .page-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
}


html,
body {
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    background: #c4c4c4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    transition: background 0.3s ease;
}

/* Dark mode styles */
body.dark-mode {
    background: #1a1a1a;
}

body.dark-mode .profile-header,
body.dark-mode .menu-container {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-mode .profile-text h2 {
    color: #ffffff;
}

body.dark-mode .profile-text p,
body.dark-mode .profile-handle {
    color: #999;
}

body.dark-mode .menu-item {
    color: #ffffff;
}

body.dark-mode .menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .menu-item-icon {
    color: #ffffff;
}

body.dark-mode .menu-item-text {
    color: #ffffff;
}

body.dark-mode .menu-divider {
    background-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .page-view {
    background: #1a1a1a;
}

body.dark-mode .page-content {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-mode .page-content h1 {
    color: #ffffff;
}

body.dark-mode .page-content h2 {
    color: #ffffff;
}

body.dark-mode .page-content p {
    color: #ccc;
}

body.dark-mode .back-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

body.dark-mode .back-button:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-mode .card h3 {
    color: #ffffff;
}

body.dark-mode .card p {
    color: #aaa;
}

body.dark-mode .theme-toggle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-mode .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .language-selector {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-mode .language-selector a {
    color: #ffffff;
}

.container {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

/* Language selector */
.language-selector {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 8px;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 22px;
    padding: 8px 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.language-selector a {
    font-size: 14px;
    text-decoration: none;
    color: #1a1a1a;
    cursor: pointer;
    transition: opacity 0.2s, color 0.3s;
}

.language-selector a:hover {
    opacity: 0.7;
}

/* Theme toggle button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    color: #1a1a1a;
    transition: color 0.3s;
}

body.dark-mode .theme-toggle svg {
    color: #ffffff;
}

.sun-icon,
.moon-icon {
    position: absolute;
    transition: opacity 0.3s, transform 0.3s;
}

.moon-icon {
    opacity: 1;
    transform: rotate(0deg);
}

.sun-icon {
    opacity: 0;
    transform: rotate(-90deg);
}

body.dark-mode .moon-icon {
    opacity: 0;
    transform: rotate(90deg);
}

body.dark-mode .sun-icon {
    opacity: 1;
    transform: rotate(0deg);
}

.profile-header {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: background 0.3s, border 0.3s;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #f5f5f5;
    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-text h2 {
    font-size: 19px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s;
}

.profile-handle {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    transition: color 0.3s;
}

.profile-text p {
    font-size: 15px;
    color: #666;
    font-weight: 400;
    transition: color 0.3s;
}

.menu-container {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 10px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: background 0.3s, border 0.3s;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    color: #1a1a1a;
    text-decoration: none;
    transition: background-color 0.2s, color 0.3s;
    cursor: pointer;
}

.menu-item:hover {
    background-color: rgba(220, 220, 220, 0.5);
}

.menu-item-icon {
    width: 20px;
    height: 20px;
    color: #1a1a1a;
    flex-shrink: 0;
    transition: color 0.3s;
}

.menu-item-text {
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    transition: color 0.3s;
}

.menu-divider {
    height: 1px;
    background-color: rgba(180, 180, 180, 0.3);
    margin: 3px 20px;
    transition: background-color 0.3s;
}

svg {
    width: 100%;
    height: 100%;
}

/* Page content styles */
.page-view {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c4c4c4;
    z-index: 1000;
    overflow: hidden;
    overscroll-behavior: none;
    padding: 32px 20px;
    transition: background 0.3s;
}

/* Center horizontally, but keep panels closer to the top.
   Height now follows content instead of filling the whole screen. */
.page-view.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    animation: fadeIn 0.3s;
}

.page-content {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 28px 24px 32px;
    margin-top: 80px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: background 0.3s, border 0.3s;
}

.page-content h1 {
    font-size: 32px;
    color: #1a1a1a;
    margin-bottom: 20px;
    transition: color 0.3s;
}

.page-content h2 {
    font-size: 24px;
    color: #1a1a1a;
    margin-bottom: 15px;
    transition: color 0.3s;
}

.page-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
    transition: color 0.3s;
}

.back-button {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 10px 20px;
    color: #1a1a1a;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 20px;
    display: inline-block;
    text-decoration: none;
    transition: background 0.2s, color 0.3s, border 0.3s;
    position: relative;
    z-index: 10;
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    transition: background 0.3s, border 0.3s;
}

.card h3 {
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.card p {
    font-size: 14px;
    color: #555;
    transition: color 0.3s;
}

/* ===== BEN-STYLE ABOUT PAGE ===== */

/* ===== BEN-STYLE ABOUT PAGE – ALL LANGS ===== */

/* Center all about overlays */
#about.page-view,
#about-ar.page-view,
#about-so.page-view {
    padding: 0;
}

#about.page-view.active,
#about-ar.page-view.active,
#about-so.page-view.active {
    justify-content: center;
    align-items: center;
}

/* Shared glass card for all about pages (desktop / tablet) */
#about .page-content.about-page,
#about-ar .page-content.about-page,
#about-so .page-content.about-page {
    max-width: 420px;
    max-height: none;
    margin-top: 0;
    padding: 32px 28px 40px;
    /* adjust these if you want more/less space on large screens */
}

/* Hide regular back button on these pages (we use the X instead) */
#about .back-button,
#about-ar .back-button,
#about-so .back-button {
    display: none;
}

/* About text – inherit your site font */
#about .about-inner,
#about-ar .about-inner,
#about-so .about-inner {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

body.dark-mode #about .about-inner,
body.dark-mode #about-ar .about-inner,
body.dark-mode #about-so .about-inner {
    color: #ccc;
}

.about-line+.about-line {
    margin-top: 10px;
}

.about-name {
    font-weight: 600;
}

.about-email {
    margin-top: 16px;
}

/* Shared glassy X button */
#about .about-close,
#about-ar .about-close,
#about-so .about-close {
    margin: 28px auto 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #1a1a1a;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        background 0.15s ease, border-color 0.15s ease;
}

#about .about-close:hover,
#about-ar .about-close:hover,
#about-so .about-close:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.9);
}

/* Dark mode for the X */
body.dark-mode #about .about-close,
body.dark-mode #about-ar .about-close,
body.dark-mode #about-so .about-close {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

body.dark-mode #about .about-close:hover,
body.dark-mode #about-ar .about-close:hover,
body.dark-mode #about-so .about-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ===== CONTACT PAGE - X BUTTON STYLE (like About page) ===== */

/* Center all contact overlays */
#contact.page-view,
#contact-ar.page-view,
#contact-so.page-view {
    padding: 0;
}

#contact.page-view.active,
#contact-ar.page-view.active,
#contact-so.page-view.active {
    justify-content: center;
    align-items: center;
}

/* Contact page card styling */
#contact .page-content,
#contact-ar .page-content,
#contact-so .page-content {
    max-width: 420px;
    max-height: none;
    margin-top: 0;
    padding: 32px 28px 40px;
}

/* Hide regular back button on contact pages */
#contact .back-button,
#contact-ar .back-button,
#contact-so .back-button {
    display: none;
}

/* Contact page close button (X) */
#contact .contact-close,
#contact-ar .contact-close,
#contact-so .contact-close {
    margin: 28px auto 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #1a1a1a;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        background 0.15s ease, border-color 0.15s ease;
}

#contact .contact-close:hover,
#contact-ar .contact-close:hover,
#contact-so .contact-close:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.9);
}

/* Dark mode for contact X button */
body.dark-mode #contact .contact-close,
body.dark-mode #contact-ar .contact-close,
body.dark-mode #contact-so .contact-close {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

body.dark-mode #contact .contact-close:hover,
body.dark-mode #contact-ar .contact-close:hover,
body.dark-mode #contact-so .contact-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ===== ALL PAGE SPACING FIXES ===== */

/* Reduce spacing between page heading (h1) and description (p) on ALL pages */
.page-content h1 {
    margin-bottom: 8px !important;
}

.page-content h1+p {
    margin-bottom: 12px !important;
}

/* Specific blog heading fixes */
#blog-heading-en,
#blog-heading-ar,
#blog-heading-so {
    margin-bottom: 6px !important;
}

#blog-description-en,
#blog-description-ar,
#blog-description-so {
    margin-bottom: 6px !important;
}

/* Reduce gap between blog cards and Load More button */
#blog-list,
#blog-list-ar,
#blog-list-so {
    gap: 12px !important;
    margin-top: 12px !important;
}

/* Reduce internal spacing in blog post cards */
.blog-post-card {
    padding: 16px !important;
    margin-bottom: 20px !important;
}

.blog-post-card h3 {
    margin-bottom: 6px !important;
}

.blog-post-card .post-date {
    margin-bottom: 4px !important;
}

.blog-post-card .excerpt {
    margin: 4px 0 !important;
}

/* Load More button spacing */
#blog-list button.back-button,
#blog-list-ar button.back-button,
#blog-list-so button.back-button {
    margin-top: 12px !important;
}

/* ===== ALWAYS VISIBLE SCROLLBAR FOR BLOG LIST ===== */
#blog .page-content,
#blog-ar .page-content,
#blog-so .page-content {
    overflow-y: scroll !important;
    /* Always show scrollbar */
}

/* More visible scrollbar styling */
#blog .page-content::-webkit-scrollbar,
#blog-ar .page-content::-webkit-scrollbar,
#blog-so .page-content::-webkit-scrollbar {
    width: 8px;
}

#blog .page-content::-webkit-scrollbar-track,
#blog-ar .page-content::-webkit-scrollbar-track,
#blog-so .page-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

#blog .page-content::-webkit-scrollbar-thumb,
#blog-ar .page-content::-webkit-scrollbar-thumb,
#blog-so .page-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

#blog .page-content::-webkit-scrollbar-thumb:hover,
#blog-ar .page-content::-webkit-scrollbar-thumb:hover,
#blog-so .page-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

body.dark-mode #blog .page-content::-webkit-scrollbar-track,
body.dark-mode #blog-ar .page-content::-webkit-scrollbar-track,
body.dark-mode #blog-so .page-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode #blog .page-content::-webkit-scrollbar-thumb,
body.dark-mode #blog-ar .page-content::-webkit-scrollbar-thumb,
body.dark-mode #blog-so .page-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
}

body.dark-mode #blog .page-content::-webkit-scrollbar-thumb:hover,
body.dark-mode #blog-ar .page-content::-webkit-scrollbar-thumb:hover,
body.dark-mode #blog-so .page-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}



/* 🔥 SOMALI BLOG READING MODE - SAME AS ENGLISH/ARABIC 🔥 */
body.reading-post #blog-so .page-content {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

/* =======================================================
   CONSOLIDATED MOBILE STYLES
   ======================================================= */
@media (max-width: 480px) {

    /* --- General Layout & Centering --- */
    #home-view,
    #home-view-ar,
    #home-view-so {
        width: 100%;
        max-width: 340px;
        margin: 0 16px;
    }

    #home-view.container,
    #home-view-ar.container,
    #home-view-so.container {
        margin-top: -130px;
    }

    /* --- Profile & Menu --- */
    .profile-header,
    .menu-container {
        border-radius: 18px;
    }

    .profile-text h2 {
        font-size: 16px;
        line-height: 1.2;
    }

    .profile-text .profile-handle {
        display: block;
        font-size: 13px;
        margin-top: 2px;
    }

    /* --- About, Contact, & Blog Page Overlays --- */
    #about.page-view,
    #about-ar.page-view,
    #about-so.page-view,
    #contact.page-view,
    #projects.page-view,
    #projects-ar.page-view,
    #projects-so.page-view {
        padding: 0;
    }

    #about.page-view.active,
    #about-ar.page-view.active,
    #about-so.page-view.active,
    #contact.page-view.active,
    #projects.page-view.active,
    #projects-ar.page-view.active,
    #projects-so.page-view.active {
        justify-content: center;
        align-items: center;
    }

    #about .page-content.about-page,
    #about-ar .page-content.about-page,
    #about-so .page-content.about-page,
    #contact .page-content,
    #projects .page-content,
    #projects-ar .page-content,
    #projects-so .page-content,
    #blog .page-content,
    #blog-ar .page-content,
    #blog-so .page-content {
        width: 100%;
        max-width: 340px;
        height: auto;
        max-height: none;
        margin: 0 16px;
        padding: 45px 30px 42px;
        overflow: visible;
        border-radius: 18px;
    }

    #about .about-inner,
    #about-ar .about-inner,
    #about-so .about-inner {
        font-size: 13px;
        line-height: 1.8;
    }

    #about .about-close,
    #about-ar .about-close,
    #about-so .about-close {
        margin-top: 34px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* --- Blog Reading Mode - FULL SCREEN --- */
    body.reading-post .page-view {
        padding: 0 !important;
        align-items: stretch;
        justify-content: flex-start;
        overflow: hidden;
    }

    body.reading-post .page-view.active {
        align-items: stretch;
    }

    body.reading-post .page-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.reading-post .language-selector {
        display: none;
    }

}

/* Blog post card styles */
.blog-post-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    transition: background 0.3s, border 0.3s;
    cursor: pointer;
}

.blog-post-card h3 {
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.blog-post-card p {
    font-size: 14px;
    color: #555;
    transition: color 0.3s;
    margin-bottom: 8px;
}

.blog-post-card .post-date {
    font-size: 13px;
    color: #666;
}

/* Ensure blog page matches other page styles - ALL LANGUAGES */
#blog .page-content,
#blog-ar .page-content,
#blog-so .page-content {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 28px 24px 32px;
    margin-top: 80px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: background 0.3s, border 0.3s;
}

/* Full-screen blog reading view - DESKTOP */
@media (min-width: 768px) {

    body.reading-post #blog .page-content,
    body.reading-post #blog-ar .page-content,
    body.reading-post #blog-so .page-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
}

/* Ensure the blog list still looks good - all languages */
#blog .page-content,
#blog-ar .page-content,
#blog-so .page-content {
    max-width: 420px;
    /* Keep the blog list at original width */
}


/* Blog card styling to match contact/about pages */
.blog-post-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    transition: background 0.3s, border 0.3s;
    cursor: pointer;
    margin-bottom: 20px;
}

.blog-post-card h3 {
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.blog-post-card p {
    font-size: 14px;
    color: #555;
    transition: color 0.3s;
    margin-bottom: 8px;
}

.blog-post-card .post-date {
    font-size: 13px;
    color: #666;
}

/* Blog list scrolling */
#blog-list,
#blog-list-ar,
#blog-list-so {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 5px;
}

/* Custom scrollbar for blog list */
#blog-list::-webkit-scrollbar,
#blog-list-ar::-webkit-scrollbar,
#blog-list-so::-webkit-scrollbar {
    width: 6px;
}

#blog-list::-webkit-scrollbar-track,
#blog-list-ar::-webkit-scrollbar-track,
#blog-list-so::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

#blog-list::-webkit-scrollbar-thumb,
#blog-list-ar::-webkit-scrollbar-thumb,
#blog-list-so::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

body.dark-mode #blog-list::-webkit-scrollbar-thumb,
body.dark-mode #blog-list-ar::-webkit-scrollbar-thumb,
body.dark-mode #blog-list-so::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
}

/* Contact page card styling - make all languages identical */
.contact-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: background 0.3s, border 0.3s;
}

.contact-card h3 {
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.contact-card p {
    font-size: 14px;
    color: #555;
    transition: color 0.3s;
}

/* Mobile blog page centering */
@media (max-width: 480px) {

    #blog .page-content,
    #blog-ar .page-content,
    #blog-so .page-content {
        width: 100%;
        max-width: 340px;
        margin: 0 16px;
    }
}

/* FINAL OVERRIDE FOR BLOG CARD DATES IN DARK MODE */
body.dark-mode .blog-post-card .post-date {
    color: #f5f5f5 !important;
}

/* Make blog page card match about page dimensions */
#blog .page-content,
#blog-ar .page-content,
#blog-so .page-content {
    max-width: 420px;
    max-height: none;
    margin-top: 0;
    padding: 32px 28px 40px;
}

/* Center the blog pages like about pages */
#blog.page-view.active,
#blog-ar.page-view.active,
#blog-so.page-view.active {
    justify-content: center;
    align-items: center;
}

#blog.page-view,
#blog-ar.page-view,
#blog-so.page-view {
    padding: 0;
}


/* Mobile: Blog card width matches About card width */
@media (max-width: 480px) {

    #blog .page-content,
    #blog-ar .page-content,
    #blog-so .page-content {
        width: calc(100% - 32px) !important;
        max-width: 350px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* HIDE LANGUAGE SELECTOR WHEN READING POST (ALL SCREENS) */
body.reading-post .language-selector {
    display: none !important;
}

/* Blog page content: fixed height with scroll on the CARD itself */
#blog .page-content,
#blog-ar .page-content,
#blog-so .page-content {
    max-height: 500px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Remove scroll from inner list (scroll is now on card) */
#blog-list,
#blog-list-ar,
#blog-list-so {
    max-height: none !important;
    overflow: visible !important;
}

/* Nice scrollbar on the card edge */
#blog .page-content::-webkit-scrollbar,
#blog-ar .page-content::-webkit-scrollbar,
#blog-so .page-content::-webkit-scrollbar {
    width: 6px;
}

#blog .page-content::-webkit-scrollbar-track,
#blog-ar .page-content::-webkit-scrollbar-track,
#blog-so .page-content::-webkit-scrollbar-track {
    background: transparent;
}

#blog .page-content::-webkit-scrollbar-thumb,
#blog-ar .page-content::-webkit-scrollbar-thumb,
#blog-so .page-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

body.dark-mode #blog .page-content::-webkit-scrollbar-thumb,
body.dark-mode #blog-ar .page-content::-webkit-scrollbar-thumb,
body.dark-mode #blog-so .page-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

/* Remove card styling when reading a blog post */
body.reading-post #blog .page-content,
body.reading-post #blog-ar .page-content,
body.reading-post #blog-so .page-content {
    background: #c4c4c4 !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    overflow-y: auto !important;
}

body.dark-mode.reading-post #blog .page-content,
body.dark-mode.reading-post #blog-ar .page-content,
body.dark-mode.reading-post #blog-so .page-content {
    background: #1a1a1a !important;
}

/* Blog single post container styling */
body.reading-post #blog-single,
body.reading-post #blog-single-ar,
body.reading-post #blog-single-so {
    max-width: 680px;
    margin: 0 auto;
    padding: 80px 24px 80px;
    position: relative;
}

/* Blog post title - large serif font like the reference */
body.reading-post #blog-single-title,
body.reading-post #blog-single-title-ar,
body.reading-post #blog-single-title-so {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1a1a1a !important;
    margin-bottom: 16px !important;
    text-align: center;
}

body.dark-mode.reading-post #blog-single-title,
body.dark-mode.reading-post #blog-single-title-ar,
body.dark-mode.reading-post #blog-single-title-so {
    color: #ffffff !important;
}

/* Blog post date styling */
body.reading-post #blog-single-date,
body.reading-post #blog-single-date-ar,
body.reading-post #blog-single-date-so {
    font-size: 14px !important;
    color: #666 !important;
    text-align: center;
    margin-bottom: 32px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.dark-mode.reading-post #blog-single-date,
body.dark-mode.reading-post #blog-single-date-ar,
body.dark-mode.reading-post #blog-single-date-so {
    color: #999 !important;
}

/* Blog post content styling */
body.reading-post #blog-single-content,
body.reading-post #blog-single-content-ar,
body.reading-post #blog-single-content-so {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #333 !important;
}

body.dark-mode.reading-post #blog-single-content,
body.dark-mode.reading-post #blog-single-content-ar,
body.dark-mode.reading-post #blog-single-content-so {
    color: #ddd !important;
}

body.reading-post #blog-single-content p,
body.reading-post #blog-single-content-ar p,
body.reading-post #blog-single-content-so p {
    margin-bottom: 24px !important;
}

body.reading-post #blog-single-content img,
body.reading-post #blog-single-content-ar img,
body.reading-post #blog-single-content-so img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 24px 0;
}

/* Back button styling in reading mode - glassy look */
body.reading-post #blog-single .back-button,
body.reading-post #blog-single-ar .back-button,
body.reading-post #blog-single-so .back-button {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Arabic back button - position on left (override RTL) */
body.reading-post #blog-single-ar .back-button {
    direction: ltr !important;
    float: left !important;
    text-align: left !important;
}

body.reading-post #blog-single .back-button:hover,
body.reading-post #blog-single-ar .back-button:hover,
body.reading-post #blog-single-so .back-button:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode.reading-post #blog-single .back-button,
body.dark-mode.reading-post #blog-single-ar .back-button,
body.dark-mode.reading-post #blog-single-so .back-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

body.dark-mode.reading-post #blog-single .back-button:hover,
body.dark-mode.reading-post #blog-single-so .back-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Blog X close button - glassy style for all languages */
.blog-close,
.ar-blog-close {
    position: absolute;
    left: 0;
    right: auto;
    top: 24px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #1a1a1a;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        background 0.15s ease, border-color 0.15s ease;
    z-index: 2000;
}

.blog-close:hover,
.ar-blog-close:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.5);
}

body.dark-mode .blog-close,
body.dark-mode .ar-blog-close {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.dark-mode .blog-close:hover,
body.dark-mode .ar-blog-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Hide page view background in reading mode */
body.reading-post #blog.page-view,
body.reading-post #blog-ar.page-view,
body.reading-post #blog-so.page-view {
    background: #c4c4c4 !important;
    padding: 0 !important;
}

body.dark-mode.reading-post #blog.page-view,
body.dark-mode.reading-post #blog-ar.page-view,
body.dark-mode.reading-post #blog-so.page-view {
    background: #1a1a1a !important;
}

/* Mobile adjustments for reading mode */
@media (max-width: 480px) {

    body.reading-post #blog-single,
    body.reading-post #blog-single-ar,
    body.reading-post #blog-single-so {
        padding: 70px 24px 60px;
    }

    body.reading-post #blog-single-title,
    body.reading-post #blog-single-title-ar,
    body.reading-post #blog-single-title-so {
        font-size: 24px !important;
        text-align: left !important;
    }

    body.reading-post #blog-single-date,
    body.reading-post #blog-single-date-so {
        text-align: left !important;
    }

    /* Arabic title and date - RTL alignment on mobile */
    body.reading-post #blog-single-title-ar {
        text-align: right !important;
        direction: rtl !important;
    }

    body.reading-post #blog-single-date-ar {
        text-align: right !important;
        direction: rtl !important;
    }

    body.reading-post #blog-single-content,
    body.reading-post #blog-single-content-ar,
    body.reading-post #blog-single-content-so {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    /* Restore fixed positioning for close button on mobile */
    .blog-close,
    .ar-blog-close {
        position: fixed !important;
        top: 20px !important;
        left: 20px !important;
        right: auto !important;
    }

    /* HIDE scrollbar when reading a post on mobile */
    body.reading-post #blog .page-content::-webkit-scrollbar,
    body.reading-post #blog-ar .page-content::-webkit-scrollbar,
    body.reading-post #blog-so .page-content::-webkit-scrollbar {
        width: 0 !important;
        display: none !important;
    }

    body.reading-post #blog .page-content,
    body.reading-post #blog-ar .page-content,
    body.reading-post #blog-so .page-content {
        scrollbar-width: none !important;
        /* Firefox */
    }
}