/* =========================================
   1. Layout & Containers
   ========================================= */
.single-post .page-content {
    padding-block: 20px;
}

.single-post-container {
    display: flex;
	margin-top: 80px;
    gap: 40px;
    justify-content: space-between;
    position: relative;
}

.post-column-main {
    width: 70%;
}

.post-column-sidebar {
    width: 30%;
}

/* =========================================
   3. Main Post Card
   ========================================= */
.post__main {
    margin-top: 20px;
    margin-bottom: 50px;
    position: relative;
    padding: 60px 40px;
    z-index: 1;
    background-color: #FFF;
    border-radius: var(--border-radius-img);
    box-shadow: var(--box-shadow-big-elem);
}

.post__main__header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =========================================
   4. Post Header Elements (Title, Meta, Breadcrumbs)
   ========================================= */
.single-post h1 {
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: clamp(2rem, 3vw, 2.4rem);
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: center;
}
.single-post h2 {
    font-size: clamp(1.6rem, 3vw, 2rem);
    line-height: clamp(2rem, 3vw, 2.4rem);
    margin-bottom: 15px;
}
.single-post .post__category a {
    padding: 8px 24px;
}

.single-post .post__date {
    text-align: center;
}

/* Breadcrumbs */
.single-post .rank-math-breadcrumb {
    padding: 0;
}

.single-post .rank-math-breadcrumb a:hover {
    color: var(--color-primary);
}

.single-post .rank-math-breadcrumb p {
    text-align: center;
}

/* DATES & AUTHOR  */

/* THE GRID CONTAINER */
.post-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 30px; 
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eaeaea; 
    width: 100%; /* Forces the main container to stretch full width */
}

/* THE INDIVIDUAL COLUMNS */
.post-meta-item {
    display: flex;
    flex-direction: column; 
    align-items: center; /* Centers the text block horizontally in the box */
    justify-content: center; /* Centers the text block vertically in the box */
    text-align: center; /* Forces the text itself to align center */
    gap: 6px; 
    width: 100%; /* Ensures the flex box fills its grid column */
}

/* ROW 1: THE LABELS */
.post-meta-label {
    font-size: 12px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

/* ROW 2: THE VALUES */
.post-meta-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text, #333333);
    text-align: center;
}

.post-meta-value a {
    color: inherit; 
    text-decoration: none; 
    transition: color 0.3s ease;
}

.post-meta-value a:hover {
    color: var(--color-primary); 
}

/* RESPONSIVE LAYOUT FOR MOBILE */
@media (max-width: 768px) {
    .post-meta-grid {
        grid-template-columns: 1fr; /* Stacks to 1 column on phones */
        gap: 20px; /* Slightly tighter gap when stacked */
    }
}


/* =========================================
   5. Sidebar Styling
   ========================================= */
.sidebar-sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 164px;
    padding: 20px;
    overflow-y: auto;
    background-color: #f9f9f9;
    border-radius: var(--border-radius-img);
    /* max-height: calc(100vh - 120px); */
}

.sidebar-sticky-wrapper h3 {
    margin: 0 0 20px;
    padding-left: 15px;
    font-size: 1.4rem;
}

.sidebar-sticky-wrapper ul {
    padding-left: 15px;
}

.sidebar-sticky-wrapper ul li {
    margin-bottom: 10px;
}

/* Sidebar Widgets Spacing */
/* Sidebar Widget Spacing */
.sidebar-widget {
	margin-top: 36px;
    margin-bottom: 32px;
}

/* List Styling */
.sidebar-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 15px;
}

.sidebar-contact li {
    margin-bottom: 15px;
}

/* Link Styling */
.sidebar-contact a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.3s ease;
    font-weight: 500;
}

/* Hover Effect (Text changes color) */
.sidebar-contact a:hover {
    color: var(--color-primary);
}

/* SVG Icon Styling */
.contact-svg {
    width: 24px;
    height: 24px;
    fill: var(--color-primary); /* Sets the icon color to Primary */
    flex-shrink: 0; /* Prevents icon from squishing if text is long */
}
/* =========================================
   6. Tags
   ========================================= */
.single-post .wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.single-post .wp-block-tag-cloud .tag-cloud-link {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 600;
    background-color: #459eff12;
}

.single-post .wp-block-tag-cloud .tag-cloud-link:hover {
    background-color: var(--color-primary);
    color: #fff;
}

/* =========================================
   7. Social Share (AddToAny)
   ========================================= */
.single-post .addtoany_list {
    justify-content: center;
}

.single-post span.a2a_svg.a2a_s__default {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
}

/* =========================================
   8. Post Navigation
   ========================================= */
.post__navigation {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: var(--color-background);
    margin-block: 50px;
    border-radius: var(--border-radius-img);
}

.post__navigation a {
    display: flex;
    gap: 10px;
}

.post__navigation span {
    text-transform: uppercase;
    font-family: var(--font-family-text);
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    gap: 10px;
    font-size: clamp(0.75rem, 3vw, 1rem);
}

.post__navigation a[rel="next"] {
    text-align: right;
}

.post__navigation a[rel="next"] span {
    justify-content: flex-end;
}

/* Navigation Icons */
.post__navigation a[rel="next"] .nav-icon::after,
.post__navigation a[rel="prev"] .nav-icon::before {
    content: '';
    -webkit-mask-image: url('../../../icons/chevron-forward-outline.svg');
    mask-image: url('../../../icons/chevron-forward-outline.svg');
    background-color: currentColor;
    width: 16px;
    height: 16px;
    display: inline-block;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.post__navigation a[rel="prev"] .nav-icon::before {
    transform: rotate(180deg);
}

/* =========================================
   9. Recent Posts Section
   ========================================= */
.post__recent-posts .section-title {
    font-size: 1.6rem;
    margin-bottom: 32px;
    margin-top: 60px;
}

.post__recent-posts .posts {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    padding-bottom: 24px;
}

.post__recent-posts .post__content {
    padding: 10px;
}

.post__recent-posts .post__meta,
.post__recent-posts .post__excerpt,
.post__recent-posts .post__read-more {
    display: none;
}

/* =========================================
   10. CTA
   ========================================= */

.single-post .cta.section .container {
    padding: 0;
}

.single-post .cta.section .cta-content {
    padding-block: 70px;
}

/* =========================================
   10. AUTHOR
   ========================================= */

/* CONTAINER */
.post-author-box {
    display: flex;
    gap: 2.5rem;
    background-color: #f7f7f7; /* Universal light gray */
    border-left: 6px solid var(--color-primary);
    border-radius: 0 8px 8px 0; /* Rounds the right side, keeps the left border sharp */
    padding: 2.5rem;
    margin: 40px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); /* Very subtle depth matching the image */
}

/* AVATAR */
.author-box-avatar img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background-color: #e0e0e0;
}

/* CONTENT COLUMN */
.author-box-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* TYPOGRAPHY */
.author-box-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.author-box-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.25rem 0;
}

.author-box-count {
    font-size: 14px;
    color: #999999;
    margin-bottom: 1.5rem;
    display: block;
}

.author-box-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 1.5rem 0;
}

/* BUTTON */
.author-box-btn {
    display: inline-block;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary);
    background-color: transparent;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.author-box-btn:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 768px) {
    .post-author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 2rem 1.5rem;
        border-radius: 8px; /* Smooth corners for mobile */
    }

    .author-box-avatar img {
        width: 100px;
        height: 100px;
    }

    .author-box-content {
        align-items: center;
    }
}


/* =========================================
   11. Media Queries
   ========================================= */

/* Tablet / Medium Screens */
@media (max-width: 992px) {
    .single-post-container {
        flex-direction: column;
		margin-top: 40px;
    }

    .post-column-main,
    .post-column-sidebar {
        width: 100%;
    }
	.post-column-main .post__navigation {
		margin-bottom: 14px;
	}
    .sidebar-sticky-wrapper {
        position: static;
        margin-top: 0px;
    }
}

/* Mobile Screens */
@media screen and (max-width: 768px) {
    .post__main {
        margin-top: 0;
        padding: 20px;
    }

    .single-post span.a2a_svg.a2a_s__default {
        width: 42px !important;
        height: 42px !important;
        line-height: 42px !important;
    }

    .post__navigation .nav-label {
        display: none;
    }

    .post__navigation a {
        font-size: 0;
    }
}