/* ==========================================================================
   AT SEO — Date Bar & Author Bar
   All selectors are prefixed with .at-seo- to avoid conflicts with theme CSS.
   Child-element resets below prevent theme rules for bare HTML elements
   (p, img, time, strong, a, span) bleeding into these components.
   ========================================================================== */

/* ---- Date bar (prepended to content) ---- */

.at-seo-date-bar {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     13px;
    color:         #4b5563;
    background:    #f0f7ff;
    border-left:   3px solid #2563eb;
    border-top:    none;
    border-right:  none;
    border-bottom: none;
    padding:       8px 14px;
    margin-bottom: 24px;
    margin-top:    0;
    border-radius: 0 4px 4px 0;
    line-height:   1.4;
    box-sizing:    border-box;
}

/* Reset bare element styles that themes commonly target */
.at-seo-date-bar time {
    font-size:   inherit;
    color:       inherit;
    font-style:  normal;
    font-weight: normal;
    background:  none;
    border:      none;
    padding:     0;
    margin:      0;
}

.at-seo-date-bar svg {
    flex-shrink: 0;
    color:       #2563eb;
    margin-top:  1px;
}

/* ---- Author bar (appended to content / inserted as block) ---- */

.at-seo-author-bar {
    display:       flex;
    align-items:   flex-start;
    gap:           16px;
    background:    #f9fafb;
    border-top:    2px solid #e5e7eb;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
    padding:       20px 24px;
    margin-top:    40px;
    margin-bottom: 0;
    margin-left:   0;
    margin-right:  0;
    border-radius: 4px;
    box-sizing:    border-box;
}

/* Avatar — resist theme img rules (borders, max-width, float, etc.) */
.at-seo-author-avatar {
    width:         56px !important;
    height:        56px !important;
    border-radius: 50% !important;
    flex-shrink:   0;
    border:        2px solid #e5e7eb !important;
    float:         none !important;
    max-width:     none !important;
    display:       block;
    padding:       0 !important;
    margin:        0 !important;
    box-shadow:    none !important;
}

.at-seo-author-info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}

.at-seo-author-name {
    font-size:   15px;
    color:       #111827;
    font-weight: normal;
    margin:      0;
    padding:     0;
    line-height: 1.4;
}

/* Resist theme strong/b rules */
.at-seo-author-name strong {
    font-weight: 600;
    color:       inherit;
}

.at-seo-author-date {
    font-size:   13px;
    color:       #6b7280;
    display:     block;
    font-style:  normal;
    margin:      0;
    padding:     0;
    line-height: 1.4;
    border:      none;
    background:  none;
}

/* Resist theme time element rules */
.at-seo-author-date time {
    font-size:   inherit;
    color:       inherit;
    font-style:  normal;
    font-weight: normal;
    background:  none;
    border:      none;
    padding:     0;
    margin:      0;
}

.at-seo-author-date strong {
    font-weight: 600;
    color:       inherit;
}

.at-seo-author-bio {
    margin:      6px 0 0;
    padding:     0;
    font-size:   13px;
    color:       #6b7280;
    line-height: 1.6;
    border:      none;
    background:  none;
}

/* Resist theme a/link rules inside the bars */
.at-seo-author-bar a,
.at-seo-date-bar a {
    color:            #2563eb;
    text-decoration:  underline;
    box-shadow:       none;
    border-bottom:    none;
    background-image: none;
}

.at-seo-author-bar a:hover,
.at-seo-date-bar a:hover {
    color:           #1d4ed8;
    text-decoration: underline;
}

/* ---- Editor placeholder ---- */

.at-seo-author-bar-placeholder {
    background:    #f0f9ff;
    border:        1px dashed #7dd3fc;
    border-radius: 4px;
    padding:       12px 16px;
    font-size:     14px;
    color:         #0369a1;
    margin:        0;
}

/* ---- Responsive ---- */

@media ( max-width: 480px ) {
    .at-seo-author-bar {
        flex-direction: column;
        gap:            12px;
    }
}