/*
Theme Name: Alswaimel Modern Blog
Theme URI: https://www.alswaimel.com
Author: Faisal Alswaimel & ChatGPT
Author URI: https://www.alswaimel.com
Description: قالب ووردبريس عربي حديث مخصص لمدونة فيصل الصويمل، بواجهة داكنة، هيدر بورتفوليو مع صورة دائرية، قائمة علوية أنيقة في الويب، قائمة ثلاث خطوط في الجوال، صفحة رئيسية مكونة من تدوينة مميزة + شبكة أحدث التدوينات + تدوينة مختارة من كل تصنيف.
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alswaimel-modern-blog
Tags: rtl-language-support, blog, one-column, two-columns, custom-logo, custom-menu, responsive-layout
*/

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    direction: rtl;
    text-align: right;
    line-height: 1.9;
    background-color: #0f172a;
    color: #e5e7eb;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.wrapper {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.site-header {
    background: radial-gradient(circle at top right, #22d3ee 0, #0f172a 45%, #020617 100%);
    padding: 1.5rem 0 1.2rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.7);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px);
    background-color: rgba(15, 23, 42, 0.92);
    transition: transform 0.35s ease, opacity 0.35s ease;
}

/* إخفاء الهيدر عند التمرير للأسفل */
.site-header.hide-header {
    transform: translateY(-100%);
    opacity: 0;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-logo img {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    border: 2px solid rgba(248, 250, 252, 0.5);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.6);
    object-fit: cover;
}

/* fallback circle لو ما فيه لوجو */
.hero-avatar-circle,
.fallback-logo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(248, 250, 252, 0.5);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #f9fafb;
    background: radial-gradient(circle at top, rgba(248, 250, 252, 0.18), rgba(15, 23, 42, 1));
}

.site-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.site-title a {
    color: #f9fafb;
    text-decoration: none;
}

.site-description {
    font-size: 0.9rem;
    color: #cbd5f5;
    opacity: 0.9;
}

/* Navigation - base */
.main-navigation {
    font-size: 0.9rem;
}

.main-navigation ul {
    list-style: none;
}

/* Desktop nav */
@media (min-width: 901px) {
    .menu-toggle {
        display: none !important;
    }

    .main-navigation {
        margin-top: 0.4rem;
    }

    .main-navigation ul {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: flex-end;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .main-navigation ul li {
        margin: 0;
    }

    .main-navigation ul a {
        display: inline-block;
        padding: 0.35rem 0.9rem;
        border-radius: 999px;
        background-color: rgba(15,23,42,0.6);
        border: 1px solid transparent;
        color: #e5e7eb;
        text-decoration: none;
        font-size: 0.9rem;
        transition: background-color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    }

    .main-navigation ul a:hover,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_item > a {
        background-color: #22c55e;
        border-color: rgba(74,222,128,0.7);
        color: #021014;
        transform: translateY(-1px);
    }
}

/* Mobile nav */
@media (max-width: 900px) {
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
    }

    .menu-toggle {
        display: inline-block;
        background-color: rgba(15,23,42,0.9);
        border: 1px solid rgba(255,255,255,0.6);
        border-radius: 10px;
        padding: 0.3rem 0.9rem;
        color: #e5e7eb;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .menu-toggle::before {
        content: "☰";
        font-size: 1.2rem;
        margin-right: 0.4rem;
    }

    .main-navigation {
        position: relative;
        width: 100%;
    }

    .main-navigation ul {
        position: absolute;
        top: 115%;
        inset-inline-start: 0;
        min-width: 220px;
        padding: 0.8rem 1rem;
        margin: 0;
        background-color: rgba(15, 23, 42, 0.98);
        border-radius: 18px;
        border: 1px solid rgba(148,163,184,0.6);
        box-shadow: 0 18px 40px rgba(15,23,42,0.9);
        display: none;
        flex-direction: column;
        z-index: 9999;
    }

    .main-navigation.toggled ul {
        display: flex;
    }

    .main-navigation ul li + li {
        margin-top: 0.6rem;
    }

    .main-navigation ul a {
        display: block;
        padding: 0.1rem 0;
        text-decoration: none;
        color: #e5e7eb;
    }

    .main-navigation ul a:hover {
        color: #22c55e;
    }
}

/* Main layout */
.site-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr);
    gap: 1.5rem;
    margin: 1.8rem 0 2.5rem;
}

.wrapper.site-main-layout {
    margin-top: 30px;
}

@media (max-width: 900px) {
    .site-main-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Cards */
.card {
    background: radial-gradient(circle at top left, rgba(34, 211, 238, 0.08), rgba(15, 23, 42, 0.97));
    border-radius: 1.5rem;
    padding: 1.35rem 1.4rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(51, 65, 85, 0.85);
    margin-bottom: 1.4rem;
}

.card-header {
    margin-bottom: 0.65rem;
}

.card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #e5e7eb;
}

.card-meta {
    font-size: 0.8rem;
    color: #9ca3af;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Base post styles */
.post {
    margin-bottom: 1.1rem;
}

.post-title {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.post-title a {
    color: #f9fafb;
    text-decoration: none;
}

.post-title a:hover {
    color: #22c55e;
}

.post-meta {
    font-size: 0.78rem;
    color: #9ca3af;
    margin-bottom: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.post-excerpt {
    font-size: 0.9rem;
    color: #d1d5db;
}

.post-thumbnail img {
    border-radius: 1.1rem;
    margin-bottom: 0.65rem;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: #22c55e;
    text-decoration: none;
}

.read-more::before {
    content: "←";
    font-size: 0.85rem;
}

/* Grids */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.1rem;
    margin-top: 0.9rem;
}

.post-card {
    background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.95));
    border-radius: 1.2rem;
    padding: 0.85rem 0.9rem 0.9rem;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(51, 65, 85, 0.85);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-card-thumb img {
    border-radius: 1rem;
    margin-bottom: 0.55rem;
}

.post-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.post-card .post-title {
    font-size: 1rem;
}

.post-card .post-meta {
    margin-bottom: 0.2rem;
}

.post-card-footer {
    margin-top: auto;
}

.post-card-footer .read-more {
    font-size: 0.8rem;
}

/* Featured post */
.featured-post {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
    gap: 1.4rem;
    align-items: center;
}

.featured-post-thumb img {
    border-radius: 1.5rem;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.9);
}

.featured-post-body .post-title {
    font-size: 1.4rem;
}

.featured-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.16rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(74, 222, 128, 0.7);
    color: #bbf7d0;
    margin-bottom: 0.45rem;
}

.featured-post-body .post-excerpt {
    margin-top: 0.5rem;
}

.featured-post-footer {
    margin-top: 0.9rem;
}

@media (max-width: 900px) {
    .featured-post {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Section headers */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.section-title {
    font-size: 1rem;
    font-weight: 700;
}

.section-subtitle {
    font-size: 0.78rem;
    color: #9ca3af;
}

.section-link {
    font-size: 0.8rem;
    color: #38bdf8;
    text-decoration: none;
}

.section-link:hover {
    text-decoration: underline;
}

/* Sidebar */
.widget-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.widget {
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), rgba(15, 23, 42, 0.98));
    border-radius: 1.3rem;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(55, 65, 81, 0.9);
}

.widget-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
    color: #e5e7eb;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.7);
    padding-bottom: 0.4rem;
}

.widget ul {
    list-style: none;
    font-size: 0.88rem;
}

.widget li {
    margin-bottom: 0.4rem;
}

.widget a {
    color: #e5e7eb;
    text-decoration: none;
}

.widget a:hover {
    color: #22c55e;
}

/* Footer */
.site-footer {
    border-top: 1px solid rgba(51, 65, 85, 1);
    padding: 1.6rem 0 2.2rem;
    font-size: 0.8rem;
    color: #9ca3af;
    background: radial-gradient(circle at bottom, #020617, #020617 45%, #020617 100%);
}

.site-footer .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.8rem;
}

.footer-links a {
    margin-inline-start: 0.9rem;
    text-decoration: none;
    color: #9ca3af;
}

.footer-links a:hover {
    color: #22c55e;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.55rem 0.8rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(51, 65, 85, 0.9);
    background-color: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font: inherit;
    margin-bottom: 0.7rem;
}

textarea {
    min-height: 140px;
}

button,
input[type="submit"] {
    border-radius: 999px;
    border: none;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    color: #021013;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 16px 40px rgba(34, 197, 94, 0.5);
}

button:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 45px rgba(34, 197, 94, 0.65);
}

/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1rem;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    border: 1px solid rgba(55, 65, 81, 0.9);
    text-decoration: none;
    color: #e5e7eb;
}

.pagination .current {
    background-color: #22c55e;
    color: #021013;
    border-color: transparent;
}

/* Single post */
.single .entry-content {
    margin-top: 1rem;
    font-size: 0.98rem;
}

.single .entry-content p {
    margin-bottom: 0.85rem;
}

.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
}

blockquote {
    border-inline-start: 3px solid #22c55e;
    padding-inline-start: 0.7rem;
    margin: 0.9rem 0;
    font-style: italic;
    color: #e5e7eb;
}

/* 404 */
.not-found {
    text-align: center;
    padding: 3rem 1rem;
}

.not-found h1 {
    font-size: 3.4rem;
    margin-bottom: 0.8rem;
}

@media (max-width: 640px) {
    .site-main-layout {
        margin-top: 1.3rem;
    }
}