/**
 * Exact CSS from Demo Blog Page
 * Based on: https://ex-coders.com/wp/xports/what-is-cpanel-complete-guide-master/
 */

/* Post Meta Styles - Exact from demo */
.post-meta {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
}

.post-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.post-meta li i {
    margin-right: 8px;
    color: #ff5e14;
}

/* Icon classes - Force FontAwesome */
.fa, .fas, .far, .fal, .fab, 
.fa-solid, .fa-regular, .fa-light, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    line-height: 1 !important;
}

.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}

.fa-regular, .far {
    font-weight: 400 !important;
}

/* Specific icon content */
.fa-user:before { content: "\f007"; }
.fa-comments:before { content: "\f086"; }
.fa-search:before { content: "\f002"; }
.fa-phone:before { content: "\f095"; }
.fa-envelope:before { content: "\f0e0"; }
.fa-location-dot:before { content: "\f3c5"; }

/* Blog Details Footer - From demo */
.blog-details-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.blog-details-footer .left h5.title,
.blog-details-footer .right h5.title {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 600;
}

.blog-details-footer .left ul.tags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.blog-details-footer .left ul.tags li {
    display: inline-block;
}

.blog-details-footer .left ul.tags li a {
    padding: 5px 15px;
    background: #ff0808;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    transition: all 0.3s;
    text-decoration: none;
}

.blog-details-footer .left ul.tags li a:hover {
    background: #cc0000;
}

/* Social Share Icons - From demo */
.blog-details-footer .right ul.social-icon {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.blog-details-footer .right ul.social-icon li {
    display: inline-block;
}

.blog-details-footer .right ul.social-icon li a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    transition: all 0.3s;
}

.blog-details-footer .right ul.social-icon li a:hover {
    background: #ff0808;
    transform: translateY(-3px);
}

.blog-details-footer .right ul.social-icon li a svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Sidebar Widgets - From demo */
.widget {
    margin-bottom: 40px;
}

.widget-headline {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #ff0808;
    position: relative;
}

/* Search Widget - From demo */
.widget_search .search-form {
    position: relative;
}

.widget_search .search-form .form-group {
    margin: 0;
}

.widget_search .search-form input[type="text"] {
    width: 100%;
    padding: 15px 50px 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 5px;
}

.widget_search .search-form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.widget_search .search-form button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Categories Widget - From demo */
.categories-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categories-items li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.categories-items li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.categories-items li a {
    color: #fff;
    transition: all 0.3s;
    text-decoration: none;
    flex: 1;
}

.categories-items li a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.categories-items li .arrow-icon {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Recent Posts Widget - From demo */
.theme-recent-post-wrap {
    list-style: none;
    padding: 0;
    margin: 0;
}

.theme-recent-post-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-recent-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.theme-recent-post-item .thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 5px;
}

.theme-recent-post-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.theme-recent-post-item .thumb:hover img {
    transform: scale(1.1);
}

.theme-recent-post-item .content {
    flex: 1;
}

.theme-recent-post-item .content h6 {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.4;
    font-weight: 600;
}

.theme-recent-post-item .content h6 a {
    color: #fff;
    transition: all 0.3s;
    text-decoration: none;
}

.theme-recent-post-item .content h6 a:hover {
    color: #ffffff;
}

.theme-recent-post-item .content .time {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    display: block;
}

/* Contact Widget in Sidebar - From demo */
.gt-contact-bg {
    padding: 30px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.gt-contact-bg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
}

.gt-contact-content {
    position: relative;
    z-index: 1;
}

.gt-contact-content h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #fff;
}

.gt-contact-content p {
    font-size: 14px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
}

.gt-contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.gt-contact-item.mb-0 {
    margin-bottom: 0;
}

.gt-contact-item .gt-icon {
    width: 40px;
    height: 40px;
    background: #ff0808;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gt-contact-item .gt-icon i {
    color: #fff;
    font-size: 16px;
}

.gt-contact-item .gt-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gt-contact-item .gt-list li {
    color: #fff;
    font-size: 14px;
    line-height: 1.8;
}

.gt-contact-item .gt-list li span {
    font-weight: 600;
    display: block;
}

.gt-contact-item .gt-list li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s;
}

.gt-contact-item .gt-list li a:hover {
    color: #ffffff;
}

/* Comments Section - From demo */
.comments-area {
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-reply-title {
    font-size: 24px;
    margin-bottom: 30px;
    color: #fff;
}

.comment-form .form-group {
    margin-bottom: 20px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 5px;
    transition: all 0.3s;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: #ff0808;
    outline: none;
}

.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

.comment-form .submit-btn {
    padding: 15px 40px;
    background: #ff0808;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.comment-form .submit-btn:hover {
    background: #cc0000;
    transform: translateY(-2px);
}

/* Blog Content Styles */
.blog-single-content-wrap {
    background: transparent !important;
}

.blog-single-content-wrap .entry-content {
    padding: 30px 0;
    background: transparent !important;
    color: #fff !important;
}

/* Hide the duplicate featured image ONLY on single blog posts */
.single-post .blog-single-content-wrap > .thumbnail {
    display: none !important;
}

.single-post article > .thumbnail,
.single-post .post > .thumbnail {
    display: none !important;
}

/* Keep images visible on blog listing/archive pages */
.blog .post .thumbnail,
.archive .post .thumbnail,
.category .post .thumbnail {
    display: block !important;
}

/* Keep other images visible everywhere */
.blog-single-content-wrap .entry-content img {
    display: block;
}

.blog-single-content-wrap .thumbnail {
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
}

.blog-single-content-wrap .thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* Remove white backgrounds and fix text colors - ONLY on blog pages */
.single-post .blog-single-content-wrap,
.single-post .entry-content,
.single-post .elementor-widget-container,
.single-post .elementor-element {
    background: transparent !important;
}

.blog .blog-single-content-wrap,
.blog .entry-content,
.archive .blog-single-content-wrap,
.archive .entry-content {
    background: transparent !important;
}

/* Text colors for dark background - Apply globally */
h1, h2, h3, h4, h5, h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
    color: #fff !important;
}

/* Fix blog post titles on listing/archive pages */
.blog .entry-title,
.blog .entry-title a,
.archive .entry-title,
.archive .entry-title a,
.blog .post-title,
.blog .post-title a,
.category .entry-title,
.category .entry-title a {
    color: #fff !important;
}

/* Fix post meta on listing pages */
.blog .post-meta,
.blog .entry-meta,
.archive .post-meta,
.archive .entry-meta {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix post excerpt text on listing pages */
.blog .entry-summary,
.blog .entry-excerpt,
.archive .entry-summary,
.archive .entry-excerpt {
    color: rgba(255, 255, 255, 0.85) !important;
}

.entry-content p,
.entry-content li,
.entry-content span,
.elementor-widget-container p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Ensure all Elementor headings are white */
.elementor-element .elementor-heading-title,
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4,
.elementor-widget-container h5,
.elementor-widget-container h6 {
    color: #fff !important;
}

/* Fix image overlay text to be white */
.elementor-widget-image .elementor-image-box-title,
.elementor-widget-image-box .elementor-image-box-title,
.image-overlay-text,
.overlay-title,
.elementor-caption {
    color: #fff !important;
}

/* Ensure all text over images is white */
.elementor-widget-image-box,
.has-background-overlay {
    color: #fff !important;
}

/* Fix any red text to white on overlays */
.elementor-widget-image-box h1,
.elementor-widget-image-box h2,
.elementor-widget-image-box h3,
.elementor-widget-image-box h4,
.elementor-widget-image-box h5,
.elementor-widget-image-box h6 {
    color: #fff !important;
}

/* Elementor sections - remove white backgrounds ONLY on blog pages */
.single-post .elementor-section,
.single-post .elementor-container,
.single-post .elementor-column,
.single-post .elementor-widget-wrap,
.single-post .e-con,
.single-post .e-con-inner {
    background-color: transparent !important;
}

.blog .elementor-section,
.blog .elementor-container,
.archive .elementor-section,
.archive .elementor-container {
    background-color: transparent !important;
}

/* Fix Elementor text colors */
.elementor-widget-heading .elementor-heading-title {
    color: #fff !important;
}

.elementor-widget-text-editor {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Fix icon list colors */
.elementor-icon-list-item {
    color: rgba(255, 255, 255, 0.85) !important;
}

.elementor-icon-list-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Responsive Images - Fix overflow issues */
.blog-single-content-wrap img,
.entry-content img,
.elementor-widget-image img,
.wp-post-image {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    display: block;
    object-fit: contain;
}

/* Fix for Elementor images */
.elementor-widget-container img {
    max-width: 100% !important;
    height: auto !important;
}

/* Ensure images don't overflow their containers */
.blog-single-content-wrap,
.entry-content,
.elementor-widget-container {
    overflow: hidden;
    max-width: 100%;
}

/* Fix for wide images in content */
.entry-content figure,
.entry-content .wp-block-image {
    max-width: 100%;
    overflow: hidden;
}

.entry-content figure img,
.entry-content .wp-block-image img {
    width: 100%;
    height: auto;
}

/* Responsive breakpoints */
@media (max-width: 991px) {
    .blog-single-content-wrap img,
    .entry-content img {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .blog-single-content-wrap .thumbnail {
        margin-bottom: 20px;
    }
    
    .entry-content img {
        margin: 15px 0;
    }
}

/* Fix column overflow issues */
.col-lg-8, .col-lg-12 {
    overflow: hidden;
}

/* Ensure Elementor sections don't overflow */
.elementor-widget-wrap {
    overflow: hidden;
}

/* Fix for large images in Elementor */
.elementor-section .elementor-widget-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Prevent horizontal scroll */
.blog-content-page {
    overflow-x: hidden;
}

.blog-single-content-wrap {
    overflow-x: hidden;
    width: 100%;
}

/* Ensure all images respect container width */
img {
    max-width: 100%;
    height: auto;
}

/* Fix for images in grid layouts */
.e-grid img,
.e-con img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Additional background fixes ONLY on blog/post pages */
.single-post article,
.single-post .post,
.single-post .blog-single-content-wrap,
.single-post .content-area,
.single-post .site-main {
    background: transparent !important;
    background-color: transparent !important;
}

.blog .content-area,
.blog .site-main,
.archive .content-area,
.archive .site-main {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix any nested Elementor containers with backgrounds - ONLY on blog posts */
.single-post .elementor-163,
.single-post [data-elementor-type="wp-post"] {
    background: transparent !important;
}

.single-post .elementor-163 .elementor-element {
    background-color: transparent !important;
}

/* Override any inline background styles - ONLY on blog posts */
.single-post .entry-content[style*="background"],
.single-post .elementor-widget-container[style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix specific Elementor containers that might have white backgrounds - ONLY on blog posts */
.single-post .e-con-full,
.single-post .e-flex,
.single-post .e-con-boxed {
    background: transparent !important;
}

/* Ensure text in quote sections is visible */
blockquote,
.wp-block-quote {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 4px solid #ff0808;
    color: #fff !important;
    padding: 20px;
    margin: 20px 0;
}

blockquote p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix links to be visible on dark background */
.entry-content a {
    color: #ffffff !important;
}

.entry-content a:hover {
    color: #ffffff !important;
}

/* Fix button text to be white */
.gt-theme-btn,
.submit-btn,
.btn,
button[type="submit"],
input[type="submit"],
.elementor-button,
.wp-block-button__link {
    color: #fff !important;
}

/* Ensure register button text is white */
a.gt-theme-btn,
a.submit-btn,
a.btn,
.gt-theme-btn a {
    color: #fff !important;
    text-decoration: none;
}

/* Button hover states */
.gt-theme-btn:hover,
.submit-btn:hover,
.btn:hover {
    color: #fff !important;
}

/* Hide cart and search icons from header */
.main-header__search,
.header-right-icon .fa-shopping-cart,
.header-right-icon a[href*="cart"],
.search-toggler {
    display: none !important;
}

/* Hide parent containers if they only contain cart/search */
.header-right-icon a:has(.fa-shopping-cart),
.header-right-icon a:has(.fa-magnifying-glass) {
    display: none !important;
}

/* Testimonial cards - Fix text colors and image size */
.gt-testimonial-card-items-2 .gt-content h6 {
    color: #fff !important;
}

.gt-testimonial-card-items-2 .gt-content span {
    color: rgba(255, 255, 255, 0.6) !important;
}

.gt-testimonial-card-items-2 .gt-text p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.gt-testimonial-card-items-2 .star i {
    color: #ffc107 !important;
}

/* Decrease testimonial profile image size */
.gt-testimonial-card-items-2 .gt-thumb img,
.gt-testimonial-card-items-2 .gt-client-info img {
    max-width: 100px !important;
    max-height: 100px !important;
    width: 100px !important;
    height: 100px !important;
    object-fit: cover;
}