/*
Theme Name: Sharif Sharifi BBC Theme
Theme URI: https://sharifsharifi.com
Author: Sharif Sharifi
Description: قالب اختصاصی و سه‌زبانه شریف شریفی با چیدمان سه‌ستونه سبک BBC
Version: 1.0
Text Domain: sharif-theme
*/

:root {
    --primary-color: #1a365d;
    --accent-color: #f1f5f9;
    --bbc-crimson: #bb1919;
    --youtube-red: #cc0000;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-color: #334155;
    --text-muted: #64748b;
    --telegram-color: #0088cc;
    --facebook-color: #1877f2;
    --instagram-color: #e4405f;
    --tiktok-color: #000000;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Vazirmatn', 'Inter', sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.8; }

header {
    background: linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.75)), url('images/header-bg.jpg') right 30% / contain no-repeat;
    background-color: #0f172a;
    color: #ffffff;
    padding: 5rem 1rem 4rem 1rem;
    text-align: center;
    border-bottom: 4px solid var(--bbc-crimson);
    position: relative;
}

.lang-switch {
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    display: flex;
    gap: 0.4rem;
    z-index: 101;
}

html[dir="ltr"] .lang-switch { left: auto; right: 1.5rem; }

.lang-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.3s;
}

.lang-btn.active, .lang-btn:hover { background: var(--bbc-crimson); border-color: var(--bbc-crimson); }

header h1 { font-size: 2.8rem; margin-bottom: 0.5rem; font-weight: 700; color: #ffffff; }
header p { color: #e2e8f0; font-size: 1.25rem; font-weight: 400; }

nav {
    background-color: #0f172a;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
}

nav a { color: #f1f5f9; text-decoration: none; font-size: 0.95rem; transition: color 0.3s; }
nav a:hover { color: #fbbf24; }

.container { max-width: 1280px; margin: 2rem auto; padding: 0 1.5rem; }

.main-layout { 
    display: grid; 
    grid-template-columns: 1.1fr 1.8fr 1fr; 
    gap: 1.5rem; 
    align-items: start; 
}

@media (max-width: 992px) { 
    .main-layout { grid-template-columns: 1fr; } 
}

section { background: var(--card-bg); padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); margin-bottom: 1.5rem; }

h2 { color: var(--primary-color); border-bottom: 2px solid var(--bbc-crimson); padding-bottom: 0.5rem; margin-bottom: 1.2rem; font-size: 1.25rem; }

.profile-card { text-align: center; }
.profile-img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid var(--bbc-crimson); margin: 0 auto 1.2rem auto; display: block; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.profile-text { text-align: justify; font-size: 0.95rem; color: var(--text-color); line-height: 1.8; }

.info-list { list-style: none; margin-top: 1rem; font-size: 0.9rem; border-top: 1px dashed #cbd5e1; padding-top: 0.8rem; }
html[dir="rtl"] .info-list { text-align: right; }
html[dir="ltr"] .info-list { text-align: left; }
.info-list li { margin-bottom: 0.5rem; }

.blog-list { display: flex; flex-direction: column; gap: 1.2rem; }
.blog-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem; background: #fff; transition: transform 0.2s, box-shadow 0.2s; display: none; }
.blog-card.show { display: block; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); }
.blog-card h3 { color: var(--primary-color); font-size: 1.05rem; margin-bottom: 0.4rem; }
.blog-card .meta { font-size: 0.8rem; color: var(--bbc-crimson); font-weight: 600; margin-bottom: 0.6rem; }
.blog-card p { font-size: 0.88rem; color: var(--text-color); margin-bottom: 0.8rem; line-height: 1.6; }

.full-content { display: none; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed #e2e8f0; font-size: 0.9rem; text-align: justify; }
.full-content p { margin-bottom: 0.8rem; }

.read-btn { background: none; border: none; color: var(--bbc-crimson); font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; display: inline-flex; align-items: center; gap: 0.3rem; transition: color 0.2s; }
.read-btn:hover { color: var(--primary-color); }

.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.8rem; }
.social-card { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.8rem; border-radius: 8px; text-decoration: none; color: #ffffff; font-weight: 600; font-size: 0.85rem; transition: transform 0.2s; }
.social-card:hover { transform: translateY(-2px); }
.social-card i { font-size: 1.2rem; }

.social-card.telegram { background-color: var(--telegram-color); }
.social-card.youtube { background-color: var(--youtube-red); }
.social-card.facebook { background-color: var(--facebook-color); }
.social-card.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-card.tiktok { background-color: var(--tiktok-color); }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.card { border: 1px solid #e2e8f0; padding: 1rem; border-radius: 8px; background: #fff; transition: transform 0.2s, box-shadow 0.2s; display: none; flex-direction: column; justify-content: space-between; }
.card.show { display: flex; }
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); }
.card h3 { color: var(--primary-color); font-size: 0.98rem; margin-bottom: 0.4rem; }
.card .meta { font-size: 0.8rem; color: var(--bbc-crimson); font-weight: 600; display: block; margin-bottom: 0.6rem; }
.card p { font-size: 0.85rem; color: var(--text-color); margin-bottom: 0.8rem; }

.yt-btn { display: inline-block; background-color: var(--youtube-red); color: #ffffff; text-decoration: none; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; text-align: center; transition: background-color 0.2s; align-self: flex-start; }
.yt-btn:hover { background-color: #990000; }

.load-more-container { text-align: center; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed #cbd5e1; }
.load-more-btn { background-color: var(--bbc-crimson); color: #ffffff; border: none; padding: 0.6rem 1.5rem; border-radius: 30px; font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background-color 0.3s; }
.load-more-btn:hover { background-color: #800a0a; }

.contact-list { list-style: none; }
.contact-list li { margin-bottom: 0.8rem; }
.contact-list a { color: var(--bbc-crimson); text-decoration: none; font-weight: 600; }

footer { text-align: center; padding: 1.5rem; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid #e2e8f0; margin-top: 2rem; }
.lang-en, .lang-de { display: none; }