@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
    --adst-primary: #000000;
    --adst-secondary: #4cbfa2;
    --adst-accent: #37b67a;
    --adst-border: #c2c2c2;
    --adst-bg: #ffffff;
    --adst-bg-alt: #f6f7f8;
    --adst-light-green: #c4ffe7;
    --adst-glass-bg: rgba(255, 255, 255, 0.7);
    --adst-glass-border: rgba(255, 255, 255, 0.5);
    --adst-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

body {
    background: radial-gradient(circle at 10% 20%, rgb(236, 245, 255) 0%, rgb(233, 255, 240) 90%);
    background-attachment: fixed;
    padding-top: 80px !important;
}

/* --- Single Post Styling --- */
.single-post .entry-header {
    text-align: center !important;
    margin-bottom: 40px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--adst-glass-border) !important;
}

.single-post .entry-title {
    font-size: 2.5rem !important;
    color: var(--adst-primary) !important;
    margin-bottom: 15px !important;
}

.single-post .entry-meta {
    color: #666 !important;
    font-size: 0.9rem !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* Content Box */
.single-post .entry-content {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: #333 !important;
    background: #fff !important;
    padding: 40px !important;
    border-radius: 15px !important;
    box-shadow: var(--adst-glass-shadow) !important;
    margin-top: 30px !important;
}

.single-post .entry-content h2,
.single-post .entry-content h3 {
    color: var(--adst-secondary) !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

/* Featured Image */
.single-post .featured-image img {
    border-radius: 15px !important;
    box-shadow: var(--adst-glass-shadow) !important;
    transition: transform 0.5s ease !important;
    width: 100% !important;
    height: auto !important;
}

.single-post .featured-image:hover img {
    transform: scale(1.02) !important;
}

/* Styling Pagination */
#nav-below {
    background: transparent !important;
}

#nav-below .nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-top: 30px !important;
}

/* page numbers */
#nav-below .nav-links .page-numbers {
    background: #ffffff33 !important;
    color: #000 !important;
    border-color: var(--adst-accent) !important;
    box-shadow: 0 4px 12px rgba(48, 183, 135, 0.3) !important;
    cursor: pointer !important;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
    text-decoration: none;
    transition: 0.3s;
}

/* current button */
#nav-below .nav-links .page-numbers.current {
    background: var(--adst-accent) !important;
    color: #fff !important;
    border-color: var(--adst-accent) !important;
    box-shadow: 0 4px 12px rgba(48, 183, 135, 0.3) !important;
    cursor: default !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
}

/* Hide Screen Reader Text */
.page-numbers .screen-reader-text {
    display: none !important;
}

/* Dots */
.page-numbers.dots {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default !important;
    color: var(--adst-primary) !important;
}

/* Hover State */
#nav-below .nav-links a.page-numbers:hover {
    background: var(--adst-accent) !important;
    color: #fff !important;
    border-color: var(--adst-accent) !important;
    box-shadow: 0 8px 15px rgba(48, 183, 135, 0.15);
}

/* Next and Prev Buttons */
#nav-below .nav-links .next.page-numbers,
#nav-below .nav-links .prev.page-numbers {
    width: fit-content !important;
    padding-inline: 10px;
}

#nav-below .nav-links .next.page-numbers span,
#nav-below .nav-links .prev.page-numbers span {
    display: none !important;
}

/* ================================== */
/* ==========<Responsiveness>======== */
/* ================================== */

/* Mobile Screen */
@media (max-width: 576px) {
    body {
        padding-top: 50px !important;
    }

    #nav-below .nav-links {
        gap: 10px !important;
        margin-top: 40px;
    }

    #nav-below .nav-links .page-numbers {
        width: 30px !important;
        height: 30px !important;
        text-align: 12px !important;
    }

    #nav-below .nav-links .page-numbers.current {
        width: 30px !important;
        height: 30px !important;
    }
}

/* Small Screens  */
@media (min-width: 577px) and (max-width: 768px) {
    body {
        padding-top: 50px !important;
    }

    #nav-below .nav-links {
        gap: 15px !important;
        margin-top: 30px;
    }

    #nav-below .nav-links .page-numbers {
        width: 35px !important;
        height: 35px !important;
        text-align: 12px !important;
    }

    #nav-below .nav-links .page-numbers.current {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Tablet Screen */
@media (min-width: 768px) and (max-width: 920px) {}

/* Large Screens */
@media (min-width: 920px) and (max-width: 1280px) {}