/*
 * EasyThree blog styles
 * Add to your theme: append to style.css, or save as blog.css and enqueue it (see functions-snippet.php).
 * Change the colors in :root to match your brand.
 */

:root {
    --e3-accent: #0d6efd;
    --e3-accent-dark: #0a58ca;
    --e3-text: #1f2937;
    --e3-muted: #6b7280;
    --e3-border: #e5e7eb;
    --e3-bg-soft: #f6f8fb;
    --e3-radius: 14px;
    --e3-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    --e3-shadow-hover: 0 12px 28px rgba(15, 23, 42, .12);
}

.e3-blog {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

/* ---------- Sidebar ---------- */
.e3-sidebar {
    position: sticky;
    top: 1.5rem;
}

.e3-widget {
    background: #fff;
    border: 1px solid var(--e3-border);
    border-radius: var(--e3-radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--e3-shadow);
}

.e3-widget h4 {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--e3-muted);
    margin: 0 0 .9rem;
}

.e3-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.e3-widget li {
    padding: .45rem 0;
    border-bottom: 1px solid var(--e3-border);
    font-size: .95rem;
}

.e3-widget li:last-child {
    border-bottom: 0;
}

.e3-widget li a {
    color: var(--e3-text);
    text-decoration: none;
}

.e3-widget li a:hover {
    color: var(--e3-accent);
}

.e3-widget li small {
    display: block;
    color: var(--e3-muted);
    margin-top: .1rem;
}

.e3-search {
    display: flex;
    border: 1px solid var(--e3-border);
    border-radius: 10px;
    overflow: hidden;
}

.e3-search input[type="search"] {
    flex: 1;
    border: 0;
    padding: .6rem .8rem;
    outline: 0;
    min-width: 0;
}

.e3-search button {
    border: 0;
    background: var(--e3-bg-soft);
    padding: 0 .9rem;
    cursor: pointer;
}

.e3-widget-cta {
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    border: 0;
    color: #fff;
}

.e3-widget-cta h4,
.e3-widget-cta p {
    color: #fff;
}

.e3-widget-cta h4 {
    opacity: .75;
}

.e3-widget-cta p {
    font-size: .95rem;
    opacity: .9;
}

.e3-docs-link {
    display: block;
    margin-top: .85rem;
    color: #bfdbfe;
    font-size: .9rem;
    text-decoration: none;
}

.e3-docs-link:hover {
    color: #fff;
}

/* ---------- Post cards ---------- */
.e3-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--e3-border);
    border-radius: var(--e3-radius);
    overflow: hidden;
    box-shadow: var(--e3-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.e3-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--e3-shadow-hover);
}

.e3-card-image {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--e3-bg-soft);
    overflow: hidden;
    text-decoration:none;
}

.e3-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.e3-card:hover .e3-card-image img {
    transform: scale(1.04);
}

.e3-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1e3a8a, #0d6efd);
}
.e3-card-placeholder:hover {
    text-decoration:none;
}
.e3-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.1rem 1.25rem 1.3rem;
}

.e3-card-meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    color: var(--e3-muted);
    margin-bottom: .6rem;
}

.e3-badge {
    background: #e0ecff;
    color: var(--e3-accent-dark);
    padding: .15rem .55rem;
    border-radius: 999px;
    font-weight: 600;
}

.e3-card-title {
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0 0 .5rem;
}

.e3-card-title a {
    color: var(--e3-text);
    text-decoration: none;
}

.e3-card-title a:hover {
    color: var(--e3-accent);
}

.e3-card-excerpt {
    color: var(--e3-muted);
    font-size: .95rem;
    margin-bottom: 1rem;
}

.e3-card-link {
    margin-top: auto;
    font-weight: 600;
    font-size: .9rem;
    color: var(--e3-accent);
    text-decoration: none;
}

.e3-card-link:hover {
    color: var(--e3-accent-dark);
}

/* ---------- Pagination ---------- */
.e3-pagination {
    margin-top: 2.5rem;
}

.e3-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
}

.e3-pagination .page-numbers {
    padding: .5rem .85rem;
    border: 1px solid var(--e3-border);
    border-radius: 10px;
    color: var(--e3-text);
    text-decoration: none;
    background: #fff;
}

.e3-pagination .page-numbers.current,
.e3-pagination .page-numbers:hover {
    background: var(--e3-accent);
    border-color: var(--e3-accent);
    color: #fff;
}

.e3-archive-desc {
    background: var(--e3-bg-soft);
    border-radius: var(--e3-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    color: var(--e3-muted);
}

/* ---------- Single post ---------- */
.e3-post {
    background: #fff;
    border: 1px solid var(--e3-border);
    border-radius: var(--e3-radius);
    padding: 2rem;
    box-shadow: var(--e3-shadow);
}

.e3-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--e3-muted);
    margin-bottom: 1.25rem;
}

.e3-post-meta a {
    color: var(--e3-accent);
    text-decoration: none;
    font-weight: 600;
}

.e3-dot {
    opacity: .5;
}

.e3-post-image {
    margin: 0 -2rem 1.75rem;
}

.e3-post-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Readable article text, not full width */
.e3-post-content {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--e3-text);
    max-width: 75ch;
}

.e3-post-content h2 {
    font-size: 1.6rem;
    margin: 2.2rem 0 .8rem;
}

.e3-post-content h3 {
    font-size: 1.3rem;
    margin: 1.8rem 0 .6rem;
}

.e3-post-content p,
.e3-post-content ul,
.e3-post-content ol {
    margin-bottom: 1.15rem;
}

.e3-post-content img,
.e3-post-content video,
.e3-post-content iframe {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.e3-post-content a {
    color: var(--e3-accent);
}

.e3-post-content blockquote {
    border-left: 4px solid var(--e3-accent);
    background: var(--e3-bg-soft);
    padding: .9rem 1.2rem;
    margin: 1.5rem 0;
    border-radius: 0 10px 10px 0;
}

.e3-post-content pre,
.e3-post-content code {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
}

.e3-post-content pre {
    padding: 1rem;
    overflow-x: auto;
}

.e3-post-content code {
    padding: .1rem .35rem;
    font-size: .9em;
}

.e3-post-content pre code {
    padding: 0;
}

.e3-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--e3-border);
}

.e3-post-tags a {
    background: var(--e3-bg-soft);
    color: var(--e3-muted);
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .85rem;
    text-decoration: none;
}

.e3-post-tags a:hover {
    background: var(--e3-accent);
    color: #fff;
}

/* ---------- Call to action ---------- */
.e3-cta {
    margin: 2rem 0;
    padding: 2rem;
    text-align: center;
    border-radius: var(--e3-radius);
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: #fff;
}

.e3-cta h3 {
    color: #fff;
    margin-bottom: .5rem;
}

.e3-cta p {
    opacity: .9;
    margin-bottom: 1.25rem;
}

.e3-cta .btn {
    margin: .25rem;
}

.e3-cta .btn-outline-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
}

.e3-cta .btn-outline-secondary:hover {
    background: #fff;
    color: #0f172a;
}

/* ---------- Previous / next ---------- */
.e3-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.e3-post-nav a {
    display: block;
    padding: 1rem 1.25rem;
    border: 1px solid var(--e3-border);
    border-radius: var(--e3-radius);
    background: #fff;
    text-decoration: none;
    color: var(--e3-text);
    transition: border-color .2s ease;
}

.e3-post-nav a:hover {
    border-color: var(--e3-accent);
}

.e3-post-nav small {
    display: block;
    color: var(--e3-muted);
}

.e3-post-nav span {
    font-weight: 600;
    overflow:hidden;
    text-wrap: nowrap;
}
/*.e3-post-nav span {
    display: block;
    font-weight: 600;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}*/

/* ---------- Related ---------- */
.e3-related {
    margin-bottom: 2.5rem;
}

.e3-related h2 {
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
    .e3-sidebar {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .e3-post {
        padding: 1.25rem;
    }

    .e3-post-image {
        margin: 0 -1.25rem 1.25rem;
    }

    .e3-post-nav {
        grid-template-columns: 1fr;
    }
}

/* ---------- Article summary box and table of contents ---------- */
.e3-takeaways {
    background: var(--e3-bg-soft);
    border-left: 4px solid var(--e3-accent);
    border-radius: 0 var(--e3-radius) var(--e3-radius) 0;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
}

.e3-takeaways p {
    margin: .35rem 0 0;
}

.e3-toc {
    border: 1px solid var(--e3-border);
    border-radius: var(--e3-radius);
    padding: 1rem 1.25rem;
    margin: 0 0 2rem;
}

.e3-toc ul {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

.e3-toc li {
    padding: .2rem 0;
}

.e3-toc a {
    text-decoration: none;
}

.e3-toc a:hover {
    text-decoration: underline;
}

/* Anchor links should not hide under a fixed header */
.e3-post-content h2[id],
.e3-post-content h3[id] {
    scroll-margin-top: 90px;
}

/* ---------- Comments ---------- */
.e3-comments {
    margin: 2.5rem 0 1rem;
}
 
.e3-comments-title,
.e3-reply-title {
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}
 
.e3-comment-list,
.e3-comment-list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.e3-comment-list .children {
    margin-top: 1rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--e3-border);
}
 
.e3-comment-list li.comment {
    margin-bottom: 1rem;
}
 
.e3-comment-list .comment-body {
    background: #fff;
    border: 1px solid var(--e3-border);
    border-radius: var(--e3-radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--e3-shadow);
}
 
.e3-comment-list .comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
}
 
.e3-comment-list .comment-author {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 600;
}
 
.e3-comment-list .comment-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
 
.e3-comment-list .comment-author .says {
    display: none;
}
 
.e3-comment-list .comment-author a {
    color: var(--e3-text);
    text-decoration: none;
}
 
.e3-comment-list .comment-metadata {
    font-size: .85rem;
    color: var(--e3-muted);
}
 
.e3-comment-list .comment-metadata a {
    color: var(--e3-muted);
    text-decoration: none;
}
 
.e3-comment-list .comment-content {
    line-height: 1.65;
    overflow-wrap: anywhere;
}
 
.e3-comment-list .comment-content p:last-child {
    margin-bottom: 0;
}
 
.e3-comment-list .reply {
    margin-top: .75rem;
}
 
.e3-comment-list .comment-reply-link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--e3-accent);
    text-decoration: none;
}
 
.e3-comment-list .comment-reply-link:hover {
    color: var(--e3-accent-dark);
}
 
.e3-comment-list .comment-awaiting-moderation {
    display: inline-block;
    background: #fff7e0;
    color: #8a6100;
    border-radius: 8px;
    padding: .2rem .6rem;
    font-size: .85rem;
}
 
/* Comment bypost author highlight */
.e3-comment-list .bypostauthor > .comment-body {
    border-color: var(--e3-accent);
}
 
.e3-comments-closed {
    color: var(--e3-muted);
    font-style: italic;
}
 
/* Comment form */
.e3-comment-form {
    background: var(--e3-bg-soft);
    border-radius: var(--e3-radius);
    padding: 1.5rem;
    margin-top: 1.5rem;
}
 
.e3-comment-form p {
    margin-bottom: 1rem;
}
 
.e3-comment-form label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: .3rem;
}
 
.e3-comment-form input[type="text"],
.e3-comment-form input[type="email"],
.e3-comment-form textarea {
    width: 100%;
    border: 1px solid var(--e3-border);
    border-radius: 10px;
    padding: .65rem .85rem;
    background: #fff;
    outline: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}
 
.e3-comment-form input:focus,
.e3-comment-form textarea:focus {
    border-color: var(--e3-accent);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}
 
.e3-comment-form textarea {
    min-height: 140px;
    resize: vertical;
}
 
.e3-comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}
 
.e3-comment-form .comment-form-cookies-consent label {
    font-weight: 400;
    margin: 0;
}
 
.e3-comment-form .logged-in-as,
.e3-comment-form .comment-notes {
    font-size: .9rem;
    color: var(--e3-muted);
}
 
.e3-comment-form .form-submit {
    margin-bottom: 0;
}
 
#cancel-comment-reply-link {
    font-size: .85rem;
    font-weight: 400;
    margin-left: .75rem;
}
 
.comment-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
}
 
@media (max-width: 575.98px) {
    .e3-comment-list .children {
        padding-left: .75rem;
    }
 
    .e3-comment-form {
        padding: 1.1rem;
    }
}