/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.12.1.1770157943
Updated: 2026-02-03 22:32:23

*/

/* ============================================
   AVATAR - PERFECT CIRCLE ON ALL SCREENS
   ============================================ */
.entry-header .entry-meta .author-avatar img,
.entry-header .entry-meta .author-avatar img.avatar,
.ast-article-single .entry-header .entry-meta .author-avatar img,
.ast-article-single .entry-header .entry-meta .author-avatar img.avatar {
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    object-fit: cover !important;
    display: block !important;
    overflow: hidden !important;
}

/* ============================================
   AUTHOR META - ALL SCREENS
   ============================================ */
.ast-article-single .entry-header .entry-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

.ast-article-single .entry-meta .posted-by {
    font-weight: 700 !important;
}

.ast-article-single .entry-meta .author-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ast-article-single .entry-meta .author-details {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}

.ast-article-single .entry-meta .author-name {
    font-weight: 600 !important;
    text-decoration: none !important;
}

.ast-article-single .entry-meta .author-name:hover {
    color: #3498db !important;
    text-decoration: underline !important;
}

.ast-article-single .entry-meta .meta-separator {
    color: #999 !important;
    margin: 0 4px !important;
}

.ast-article-single .entry-meta .post-date {
    color: #7f8c8d !important;
}
/* ============================================
   POLISHED SEPARATOR AFTER AUTHOR META
   ============================================ */
.ast-article-single .entry-header::after {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, 
        rgba(59, 130, 246, 0) 0%,
        rgba(59, 130, 246, 0.3) 25%,
        rgba(59, 130, 246, 0.6) 50%,
        rgba(59, 130, 246, 0.3) 75%,
        rgba(59, 130, 246, 0) 100%) !important;
    margin: 25px 0 30px 0 !important;
    border-radius: 2px !important;
}

/* ============================================
   MISSIONS SCREENSHOTS SECTION
   ============================================ */
.mission-screenshots {
    margin: 50px 0 !important;
    padding: 25px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    clear: both !important;
}

.mission-screenshots .screenshots-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.mission-screenshots .screenshots-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    font-size: 22px !important;
    color: #1e293b !important;
}

.mission-screenshots .screenshots-title svg {
    color: #3b82f6 !important;
    flex-shrink: 0 !important;
}

.mission-screenshots .screenshots-count {
    margin: 0 !important;
    font-size: 14px !important;
    color: #64748b !important;
    background: #fff !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    border: 1px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
}

/* 3 PHOTOS PER ROW GRID */
.mission-screenshots .screenshots-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.mission-screenshots .screenshot-card {
    background: white !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    transition: transform 0.3s ease !important;
    border: 1px solid #e2e8f0 !important;
}

.mission-screenshots .screenshot-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

.mission-screenshots .screenshot-image {
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #f5f5f5 !important;
}

.mission-screenshots .screenshot-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    background: white !important;
}

.mission-screenshots .screenshot-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.mission-screenshots .screenshot-card:hover .screenshot-overlay {
    opacity: 1 !important;
}

.mission-screenshots .screenshot-overlay svg {
    width: 24px !important;
    height: 24px !important;
}

.mission-screenshots .featured-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: #ef4444 !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
}

.mission-screenshots .screenshot-caption {
    padding: 12px 15px !important;
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
}

/* ============================================
   RESPONSIVE - ALL SCREENS
   ============================================ */

/* Laptop/Tablet Landscape: 2 columns */
@media (max-width: 1200px) {
    .mission-screenshots .screenshots-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablet Portrait: 2 columns, adjust layout */
@media (max-width: 992px) {
    .ast-article-single .entry-header .entry-meta {
        gap: 10px !important;
    }
    
    .mission-screenshots {
        padding: 20px !important;
        margin: 40px 0 !important;
    }
    
    .mission-screenshots .screenshots-title {
        font-size: 20px !important;
    }
}

/* Small Tablet: 2 columns, stack header */
@media (max-width: 768px) {
    .ast-article-single .entry-header .entry-meta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .ast-article-single .entry-meta .posted-by {
        display: inline !important;
    }
    
    .ast-article-single .entry-meta .author-info {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .ast-article-single .entry-meta .author-details {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    
    .mission-screenshots .screenshots-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .mission-screenshots .screenshots-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .mission-screenshots .screenshot-image {
        height: 200px !important;
        aspect-ratio: auto !important;
    }
}

/* Mobile: 1 column */
@media (max-width: 576px) {
    .ast-article-single .entry-header .entry-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .ast-article-single .entry-meta .posted-by {
        width: 100% !important;
    }
    
    .ast-article-single .entry-meta .author-info {
        width: 100% !important;
    }
    
    .mission-screenshots .screenshots-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .mission-screenshots .screenshot-image {
        height: 250px !important;
        aspect-ratio: auto !important;
    }
    
    .mission-screenshots .screenshots-title {
        font-size: 18px !important;
    }
}

/* Small Mobile */
@media (max-width: 400px) {
    .entry-header .entry-meta .author-avatar img,
    .entry-header .entry-meta .author-avatar img.avatar {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
    }
    
    .ast-article-single .entry-header .entry-meta {
        font-size: 13px !important;
        gap: 6px !important;
    }
    
    .ast-article-single .entry-meta .author-details {
        flex-wrap: wrap !important;
        row-gap: 2px !important;
    }
    
    .mission-screenshots .screenshot-image {
        height: 200px !important;
    }
    
    .mission-screenshots {
        padding: 15px !important;
        margin: 30px 0 !important;
    }
}

/* Extra Small Mobile */
@media (max-width: 360px) {
    .entry-header .entry-meta .author-avatar img,
    .entry-header .entry-meta .author-avatar img.avatar {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }
    
    .ast-article-single .entry-header .entry-meta {
        font-size: 12px !important;
    }
    
    .mission-screenshots .screenshot-image {
        height: 180px !important;
    }
    
    .mission-screenshots .screenshots-title {
        font-size: 16px !important;
    }
}

/*- Force avatar circle on all devices */
img.avatar,
.avatar,
.author-avatar img,
.author-avatar .avatar {
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    overflow: hidden !important;
}

/* ============================================
   COMMENTS SECTION STYLING
   ============================================ */

/* Comments area container - TRANSPARENT */
.comments-area {
    margin-top: 60px !important;
    padding: 30px 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Comments title */
.comments-title {
    font-size: 24px !important;
    margin-bottom: 30px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

/* Login button for non-logged in users - YOUR STYLE */
.comment-login-prompt {
    text-align: center !important;
    padding: 40px 20px !important;
    background: transparent !important;
    border-radius: 10px !important;
    border: 2px dashed #e2e8f0 !important;
}

.comment-login-button {
    background: linear-gradient(55deg, #1e90ff, #000000) !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.comment-login-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

/* Comment form styling - TRANSPARENT */
.comment-form {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.comment-form p {
    margin-bottom: 20px !important;
}

/* Textarea with border radius */
.comment-form textarea#comment {
    width: 100% !important;
    padding: 15px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    transition: all 0.3s ease !important;
    background: #f8fafc !important;
    min-height: 150px !important;
    resize: vertical !important;
}

.comment-form textarea#comment:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    background: white !important;
}

/* Submit button - MATCHING STYLE */
.comment-form .form-submit {
    margin-top: 30px !important;
}

.comment-form .submit {
    background: linear-gradient(55deg, #1e90ff, #000000) !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.3s ease !important;
}

.comment-form .submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

/* Comment list styling - TRANSPARENT */
.ast-comment-list {
    padding: 0 !important;
    list-style: none !important;
}

.ast-comment-list li.comment {
    background: transparent !important;
    padding: 25px 0 !important;
    margin-bottom: 20px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.ast-comment-list li.comment:hover {
    transform: translateY(-2px) !important;
}

/* Comment author */
.ast-comment-list .comment-author {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
}

.ast-comment div img {
    border-radius: 10% !important;
    width: 50px !important;
    height: 50px !important;
}

.ast-comment-list .comment-author .fn {
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 16px !important;
}

.ast-comment-list .comment-metadata {
    color: #64748b !important;
    font-size: 14px !important;
    margin-left: auto !important;
}

/* Comment content */
.ast-comment-list .comment-content {
    color: #475569 !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
}

/* Reply link */
.comment-reply-link {
    display: inline-block !important;
    padding: 6px 15px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    margin-top: 15px !important;
    transition: all 0.3s ease !important;
    background: linear-gradient(55deg, #1e90ff, #000000) !important;
    color: #fff !important;
    border: none;
    border-radius: 5px !important;
    border: 2px solid #fff !important;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Comment notes */
.comment-notes {
    color: #64748b !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
    padding: 10px 15px !important;
    background: #f1f5f9 !important;
    border-radius: 8px !important;
    border-left: 4px solid #3b82f6 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .comments-area {
        padding: 0 !important;
        margin-top: 40px !important;
    }
    
    .comments-title {
        font-size: 20px !important;
    }
    
    .comment-login-button,
    .comment-form .submit {
        padding: 10px 24px !important;
        font-size: 15px !important;
    }
    
    .comment-form {
        padding: 0 !important;
    }
    
    .ast-comment-list li.comment {
        padding: 20px 0 !important;
    }
}

/* Comment navigation - TRANSPARENT */
.comment-navigation {
    margin: 30px 0 !important;
    padding: 20px 0 !important;
    background: transparent !important;
    border: none !important;
}

.comment-navigation .nav-links {
    display: flex !important;
    justify-content: space-between !important;
    gap: 15px !important;
}

.comment-navigation .nav-previous a,
.comment-navigation .nav-next a {
    display: inline-block !important;
    padding: 10px 20px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
}

.comment-navigation .nav-previous a:hover,
.comment-navigation .nav-next a:hover {
    background: #3b82f6 !important;
    color: white !important;
}

/* No comments message - TRANSPARENT */
.no-comments {
    text-align: center !important;
    padding: 30px !important;
    background: transparent !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    font-style: italic !important;
    border-radius: 10px !important;
}

/* Textarea with border radius - TRANSPARENT */
.comment-form textarea#comment {
    width: 100% !important;
    padding: 15px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    min-height: 150px !important;
    resize: vertical !important;
    color: inherit !important;
}

.comment-form textarea#comment:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    background: transparent !important; 
}
.comment-edit-link{
    display: none;
}

/* Edit Post Link Styles */
.edit-post-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
}

.edit-post-link:hover {
    color: #2980b9;
    text-decoration: underline;
}

.edit-post-link svg {
    opacity: 0.8;
}

/* Mission Video Styles */
.mission-video-section {
    margin: 30px 0;
    padding: 20px;
    background: rgba(52, 152, 219, 0.05);
    border-left: 4px solid #3498db;
    border-radius: 4px;
}

.video-title {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 4px;
}

.video-embed iframe,
.video-embed object,
.video-embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Mission Screenshots Styles */
.mission-screenshots {
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.screenshots-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.screenshots-title {
    font-size: 1.3rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.screenshots-count {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.screenshot-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.screenshot-card:hover {
    transform: translateY(-5px);
}

.screenshot-link {
    display: block;
    text-decoration: none;
}

.screenshot-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.screenshot-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.screenshot-card:hover .screenshot-image img {
    transform: scale(1.05);
}

.screenshot-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.screenshot-card:hover .screenshot-overlay {
    opacity: 1;
}

.featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #3498db;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.screenshot-caption {
    padding: 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

/* Responsive styles */
@media (max-width: 768px) {
    .screenshots-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .screenshots-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .mission-video-section {
        padding: 15px;
    }
}

/*Others*/
input.search-submit, input.search-field {
  border: 1px solid #fff !important;
  height: 50px;
}

.ast-search-submit svg,
.ast-search-submit svg path {
  fill: #fff;
}