/* =============================================================
 *  VEXONA MEDIA FORMATS & SINGLE LAYOUTS (v8.4 - Fully Themed)
 * ============================================================= */

/* --- Archive Page Layout --- */
.vexona-archive-page .page-header { margin-bottom: 32px; }
.vexona-archive-page .page-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; color: var(--vexona-color-text-main); }
.vexona-archive-page .taxonomy-description { font-size: 16px; color: var(--vexona-color-text-subtle); max-width: 600px; }
.archive-posts-container { display: flex; flex-wrap: wrap; gap: 32px 16px; margin-bottom: 48px; }

/* =============================================================
 *  GLOBAL & UNIVERSAL SINGLE POST LAYOUTS
 * ============================================================= */
body.single-post .site-main { padding-top: var(--vexona-header-h); }
body.single-post.admin-bar .site-main { padding-top: var(--vexona-header-h); }

body.single-post:not(.format-video):not(.format-audio) .hentry {
    max-width: 1100px;
    margin: 0 auto 48px;
    transition: max-width 0.25s ease;
}

.vexona-sidebar.pinned ~ .vexona-main body.single-post:not(.format-video):not(.format-audio) .hentry {
    max-width: 840px;
}

body.single-post.format-video .site-main,
body.single-post.format-audio .site-main {
    max-width: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
}

/* =============================================================
 *  STANDARD ARTICLE STYLES
 * ============================================================= */
.hentry .entry-header {
    padding: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.entry-date-above {
    font-size: 14px;
    font-weight: 500;
    color: var(--vexona-color-text-subtle);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hentry .entry-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0;
    color: var(--vexona-color-text-main);
}
.hentry .entry-meta {
    font-size: 14px;
    color: var(--vexona-color-text-subtle);
}
.hentry .post-thumbnail {
    margin-top: 32px;
    margin-bottom: 32px;
}
.hentry .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
.entry-author-box { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.entry-author-box .avatar { border-radius: 50%; width: 60px; height: 60px; }
.author-info { display: flex; flex-direction: column; }
.author-name a { font-size: 18px; font-weight: 500; color: var(--vexona-color-text-main); text-decoration: none; }
.author-name a:hover { color: var(--vexona-color-primary); }
.author-meta-categories { font-size: 14px; color: var(--vexona-color-text-subtle); }
.author-meta-categories a { color: var(--vexona-color-text-subtle); text-decoration: none; }
.author-meta-categories a:hover { color: var(--vexona-color-primary); }
.hentry .entry-content {
    padding: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--vexona-color-text-main);
}
.hentry .entry-content p:first-of-type { font-style: italic; font-size: 20px; }
.hentry .entry-content p,
.hentry .entry-content ul,
.hentry .entry-content ol,
.hentry .entry-content blockquote { margin-bottom: 1.5em; }

.hentry .entry-content h2,
.hentry .entry-content h3,
.hentry .entry-content h4 {
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 1em;
    color: var(--vexona-color-text-main);
}
.hentry .entry-content h2 { font-size: 28px; }
.hentry .entry-content h3 { font-size: 24px; }

.hentry .entry-content a {
    color: var(--vexona-color-primary);
    text-decoration: underline;
    transition: opacity 0.2s ease;
}
.hentry .entry-content a:hover { opacity: 0.8; }

.hentry .entry-footer .publication-actions {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--vexona-color-surface);
    border-bottom: none;
}

/* =============================================================
 *  MEDIA FORMAT STYLES (VIDEO & AUDIO)
 * ============================================================= */
.full-width-media-wrapper {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    background-color: #000;
    color: var(--vexona-color-text-inverted);
}
.primary-media-container { max-width: 960px; margin: 0 auto; padding: 24px; }
.publication-content-wrapper {
    max-width: 840px;
    margin: 0 auto 48px;
    padding: 32px;
    background-color: var(--vexona-color-background);
}
body.single-post.format-video .publication-content-wrapper,
body.single-post.format-audio .publication-content-wrapper {
    color: var(--vexona-color-text-main);
}
body.single-post.format-video .publication-content-wrapper .entry-header,
body.single-post.format-audio .publication-content-wrapper .entry-header {
    padding: 0;
    border-bottom: none;
    margin-bottom: 24px;
}
body.single-post.format-video .publication-content-wrapper .entry-title,
body.single-post.format-audio .publication-content-wrapper .entry-title {
    font-size: 28px;
    margin-bottom: 16px;
    line-height: 1.2;
    color: var(--vexona-color-text-main);
}
body.single-post.format-video .publication-content-wrapper .entry-content,
body.single-post.format-audio .publication-content-wrapper .entry-content {
    padding: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--vexona-color-text-main);
}
body.single-post.format-video .publication-content-wrapper .entry-content p:first-of-type,
body.single-post.format-audio .publication-content-wrapper .entry-content p:first-of-type {
    font-style: italic;
    font-size: 20px;
}
.publication-content-wrapper .entry-content a { color: var(--vexona-color-text-main); text-decoration: underline; }
.publication-content-wrapper .entry-content a:hover { color: var(--vexona-color-primary); }

/* =============================================================
 *  SHARED STYLES (Meta, Buttons, etc. for Media Formats)
 * ============================================================= */
.publication-content-wrapper .entry-header { padding: 0; border-bottom: none; margin-bottom: 24px; }
.publication-content-wrapper .entry-title { font-size: 28px; margin-bottom: 16px; line-height: 1.2; }
.publication-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--vexona-color-text-subtle); }
.publication-meta a { color: var(--vexona-color-text-main); text-decoration: none; transition: color 0.2s ease; }
.publication-meta a:hover { color: var(--vexona-color-primary); }
.publication-meta .meta-author a { font-weight: 500; }
.publication-meta i { margin-right: 6px; }
.publication-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--vexona-color-surface); }

.vexona-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    background-color: var(--vexona-color-surface);
    color: var(--vexona-color-text-inverted);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.vexona-action-btn:hover { background-color: var(--vexona-color-hover); color: var(--vexona-color-primary); }

/* --- THEMED BUTTON STATES --- */
/* --- THIS IS THE FIX --- */
/* The hardcoded red colors are now replaced with theme variables. */
.vexona-action-btn.vex-favorite-btn.is-favorited {
    background-color: var(--vexona-color-danger-light);
    color: var(--vexona-color-danger);
    border-color: var(--vexona-color-danger-border);
}

.vexona-action-btn.vex-watchlist-btn.is-in-watchlist {
    background-color: var(--vexona-color-primary-light);
    color: var(--vexona-color-primary-dark);
    border-color: var(--vexona-color-primary);
}
/* --- END OF FIX --- */


/* =============================================================
 *  VIDEO & AUDIO PLAYER STYLES
 * ============================================================= */
.youtube-lazy-load { position: relative; padding-bottom: 56.25%; height: 0; cursor: pointer; overflow: hidden; background-color: #000; }
.youtube-lazy-load img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: none; transition: filter 0.3s ease, opacity 0.3s ease; }
.youtube-lazy-load:hover img { filter: brightness(0.8); opacity: 0.9; }
.youtube-lazy-load .play-button {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 56px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s ease; pointer-events: none;
}
.youtube-lazy-load:hover .play-button {
    background-color: var(--vexona-color-primary);
}
.youtube-lazy-load .play-button i { font-size: 32px; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.youtube-lazy-load iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.vexona-oembed-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: #000; }
.vexona-oembed-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.primary-media-container .wp-audio-shortcode {
    width: 100%;
    background-color: var(--vexona-color-surface, #242526);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.primary-media-container .mejs-container,
.primary-media-container .mejs-container .mejs-controls {
    background-color: transparent !important;
    font-family: var(--vexona-font);
}
.primary-media-container .mejs-controls .mejs-time-rail .mejs-time-total,
.primary-media-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
    background-color: rgba(255, 255, 255, 0.15) !important;
}
.primary-media-container .mejs-controls .mejs-time-rail .mejs-time-current {
    background: var(--vexona-color-primary, #4CAF50) !important;
}
.primary-media-container .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
    background: var(--vexona-color-primary, #4CAF50) !important;
}
.primary-media-container .mejs-controls .mejs-time,
.primary-media-container .mejs-controls .mejs-duration {
    color: var(--vexona-color-text-inverted-subtle, #B0B3B8) !important;
}
.primary-media-container .mejs-controls .mejs-playpause-button button,
.primary-media-container .mejs-controls .mejs-volume-button button {
    color: var(--vexona-color-text-inverted, #E4E6EB) !important;
}
.vex-audio-player-container {
    background-color: transparent;
    padding: 12px 0;
}
.vex-audio-element {
    display: none;
}
.vex-audio-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.control-btn {
    background: none;
    border: 2px solid var(--vexona-color-text-inverted-subtle);
    color: var(--vexona-color-surface);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.control-btn:hover {
    border-color: var(--vexona-color-primary);
    color: var(--vexona-color-primary);
}
.time-display {
    font-size: 14px;
    color: var(--vexona-color-text-inverted-subtle);
    min-width: 40px;
    text-align: center;
    font-family: monospace;
}
.progress-bar-wrapper {
    flex-grow: 1;
    height: 16px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
}
.progress-bar-bg, .progress-bar-current {
    height: 4px;
    border-radius: 2px;
    position: absolute;
    width: 100%;
}
.progress-bar-bg {
    background-color: rgba(255, 255, 255, 0.2);
}
.progress-bar-current {
    background-color: var(--vexona-color-primary);
    width: 0;
}
.progress-bar-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    left: -6px;
    transform: scale(0);
    transition: transform 0.2s ease;
}
.progress-bar-wrapper:hover .progress-bar-handle {
    transform: scale(1);
}
.mute-btn, .volume-slider-wrapper { display: none; }


/* =============================================================
 *  STANDARD POST NAVIGATION
 * ============================================================= */
.post-navigation {
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto 48px;
    border-top: 1px solid var(--vexona-color-surface);
    padding-top: 24px;
    transition: max-width 0.25s ease;
}
.vexona-sidebar.pinned ~ .vexona-main .post-navigation {
    max-width: 840px;
}
.post-navigation .nav-links { display: flex; justify-content: space-between; width: 100%; gap: 16px; }
.post-navigation .nav-previous, .post-navigation .nav-next { flex: 1; }
.post-navigation .nav-next { text-align: right; }
.post-navigation a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--vexona-color-text-main);
    transition: background-color 0.2s ease;
}
.post-navigation a:hover { background-color: var(--vexona-color-surface); color: var(--vexona-color-text-inverted); }
.post-navigation .nav-subtitle { display: block; font-size: 12px; font-weight: 700; color: var(--vexona-color-text-subtle); text-transform: uppercase; margin-bottom: 4px; }
.post-navigation .nav-title { font-weight: 500; }

/* =============================================================
 *  TITLE ALIGNMENT RULES (FINAL OVERRIDES)
 * ============================================================= */
.hentry:not(.format-video):not(.format-audio) .entry-header,
.hentry:not(.format-video):not(.format-audio) .entry-title {
  text-align: center;
}
body.single-post.format-video .publication-content-wrapper .entry-header,
body.single-post.format-video .publication-content-wrapper .entry-title,
body.single-post.format-audio .publication-content-wrapper .entry-header,
body.single-post.format-audio .publication-content-wrapper .entry-title {
  text-align: left;
}
.hentry:not(.format-video):not(.format-audio) .entry-header {
  margin-top: 23px;
  margin-bottom: 0;
  border: 0 !important;
  box-shadow: none !important;
}
.hentry:not(.format-video):not(.format-audio) .entry-header::before,
.hentry:not(.format-video):not(.format-audio) .entry-header::after {
  content: none !important;
}
.hentry:not(.format-video):not(.format-audio) .entry-header + .wp-block-separator,
.hentry:not(.format-video):not(.format-audio) .entry-header + hr {
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
}
.hentry:not(.format-video):not(.format-audio) .entry-header + .post-thumbnail {
  border-top: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.hentry:not(.format-video):not(.format-audio) .post-thumbnail img { border: 0 !important; }

/* --- Resume Playback UI & Centered Play Button --- */
.youtube-lazy-load .play-button-group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.youtube-lazy-load .play-button {
    position: static;
    transform: none;
    width: 68px;
    height: 48px;
    background-color: rgba(35, 35, 35, 0.8);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.youtube-lazy-load .play-button:hover {
    background-color: var(--vexona-color-primary);
}
.youtube-lazy-load .play-button i {
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    padding-left: 4px;
}
.youtube-lazy-load .resume-playback-overlay {
    position: static;
    transform: none;
    margin-top: 12px; 
    background-color: rgba(20, 20, 20, 0.7);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}