/* ==========================================================================
   ExpertPulse — Demo Skins (shared base)
   Loaded with header styles 8–15. Carries each demo's look onto the pages the
   demos don't design themselves: archive / tag / author / search headers, the
   visual taxonomy index, classic grid lists, pagination, comments and 404.
   Every demo file (skin-N.css) only sets the --sk-* tokens below plus a few
   signature touches, so the pages stay balanced across all demos.
   ========================================================================== */

html[data-hs] {
    --sk-radius: 10px;                    /* cards, panels, comment bubbles */
    --sk-field-radius: 8px;               /* inputs */
    --sk-btn-radius: 6px;                 /* buttons, pagination */
    --sk-head-bg: color-mix(in srgb, var(--accent) 6%, var(--bg-body));
    --sk-head-fg: var(--text-main);
    --sk-head-muted: var(--text-muted);
    --sk-head-align: center;
    --sk-label-font: var(--font-body);
    --sk-label-size: 12px;
    --sk-label-weight: 700;
    --sk-label-ls: 2px;
    --sk-label-tt: uppercase;
    --sk-title-weight: 800;
    --sk-title-ls: -0.02em;
    --sk-title-tt: none;
    --sk-title-style: normal;
    --sk-btn-tt: uppercase;
    --sk-btn-ls: 1px;
    --sk-soft: color-mix(in srgb, var(--accent) 7%, var(--bg-body));
}

/* ---------- 1. Archive / tag / search / taxonomy header ---------- */
html[data-hs] .archive-header {
    position: relative;
    overflow: hidden;
    padding: 72px 24px 64px;
    border-bottom: 0;
    background: var(--sk-head-bg);
    color: var(--sk-head-fg);
    text-align: var(--sk-head-align);
    isolation: isolate;
}
html[data-hs] .archive-header .container { position: relative; z-index: 1; }
html[data-hs] .archive-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--accent-text, var(--accent));
    font-family: var(--sk-label-font);
    font-size: var(--sk-label-size);
    font-weight: var(--sk-label-weight);
    letter-spacing: var(--sk-label-ls);
    line-height: 1;
    text-transform: var(--sk-label-tt);
}
html[data-hs] .archive-label::before,
html[data-hs] .archive-label::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .6; }
html[data-hs] .archive-title {
    margin: 0 0 14px;
    color: var(--sk-head-fg);
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
    font-style: var(--sk-title-style);
    font-weight: var(--sk-title-weight);
    letter-spacing: var(--sk-title-ls);
    line-height: 1.05;
    text-transform: var(--sk-title-tt);
}
html[data-hs] .archive-tag-prefix { color: var(--accent-text, var(--accent)); font-weight: inherit; opacity: .9; }
html[data-hs] .archive-desc { max-width: 640px; color: var(--sk-head-muted); font-size: 1.05rem; }
html[data-hs] .archive-desc p { margin: 0; }
html[data-hs] .archive-header .vt-circle-img { border-color: var(--bg-body); box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(0, 0, 0, .12); }

/* ---------- 2. Author hero ---------- */
html[data-hs] .author-hero-section { border-bottom: 0; background: var(--sk-head-bg); color: var(--sk-head-fg); }
html[data-hs] .author-hero-section .author-name { color: var(--sk-head-fg); font-style: var(--sk-title-style); font-weight: var(--sk-title-weight); letter-spacing: var(--sk-title-ls); text-transform: var(--sk-title-tt); }
html[data-hs] .author-bio { color: var(--sk-head-muted); }
html[data-hs] .author-role { border-radius: var(--sk-btn-radius); font-family: var(--sk-label-font); letter-spacing: var(--sk-label-ls); }
html[data-hs] .author-avatar { box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(0, 0, 0, .12); }
html[data-hs] .ep-tab-btn { border-radius: var(--sk-btn-radius); font-family: var(--sk-label-font); letter-spacing: .5px; }

/* ---------- 3. Visual taxonomy index (e.g. /artists/) ---------- */
html[data-hs] .vt-grid-circle h3,
html[data-hs] .vt-grid-square h3 { font-family: var(--font-heading); font-weight: 700; transition: color .2s; }
html[data-hs] .vt-grid-circle a:hover h3,
html[data-hs] .vt-grid-square a:hover h3 { color: var(--accent-text, var(--accent)); }
html[data-hs] .vt-circle-img { transition: box-shadow .3s; }
html[data-hs] .vt-grid-circle a:hover .vt-circle-img { box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--accent); }
html[data-hs] .vt-square-img,
html[data-hs] .vt-square-placeholder { border-radius: var(--sk-radius); }

/* ---------- 4. Classic grid lists, labels, buttons, pagination ---------- */
html[data-hs] .classic-article-row .headline,
html[data-hs] .detailed-article-card .headline { font-family: var(--font-heading); }
html[data-hs] .classic-meta-time,
html[data-hs] .category-tag,
html[data-hs] .card-cat { font-family: var(--sk-label-font); letter-spacing: .6px; }
html[data-hs] .category-tag { color: var(--accent-text, var(--accent)); }

html[data-hs] .load-more-btn {
    border-radius: var(--sk-btn-radius);
    font-family: var(--sk-label-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--sk-btn-ls);
    text-transform: var(--sk-btn-tt);
    transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
html[data-hs] .load-more-btn:hover { border-color: var(--accent); background: var(--accent-fill, var(--accent)); color: var(--on-accent-fill, #fff); transform: translateY(-1px); }
html[data-hs] .ep-pagination.numeric-pagination a,
html[data-hs] .ep-pagination.numeric-pagination span,
html[data-hs] .btn-prev-next { border-radius: var(--sk-btn-radius); font-family: var(--sk-label-font); }
html[data-hs] .ep-pagination.numeric-pagination span.current { border-color: var(--accent); background: var(--accent-fill, var(--accent)); color: var(--on-accent-fill, #fff); }

/* ---------- 5. Comments (classic and modern singles) ---------- */
html[data-hs] .comments-area {
    border: 1px solid var(--border);
    border-radius: var(--sk-radius);
    background: var(--bg-body);
    box-shadow: none;
}
html[data-hs] .comments-title,
html[data-hs] .comment-reply-title {
    position: relative;
    padding-bottom: 14px;
    font-family: var(--font-heading);
    font-style: var(--sk-title-style);
    font-weight: var(--sk-title-weight);
    letter-spacing: var(--sk-title-ls);
    text-transform: var(--sk-title-tt);
}
html[data-hs] .comments-title::after,
html[data-hs] .comment-reply-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--accent); }
html[data-hs] .comment-reply-title small { margin-left: 10px; font-family: var(--sk-label-font); font-size: 12px; font-style: normal; text-transform: none; }
html[data-hs] .comment-content-wrap { border-radius: 0 var(--sk-radius) var(--sk-radius) var(--sk-radius); background: var(--sk-soft); border-color: color-mix(in srgb, var(--accent) 14%, var(--border)); }
html[data-hs] .comment-author { font-family: var(--font-heading); font-weight: 700; }
html[data-hs] .comment-date { font-family: var(--sk-label-font); letter-spacing: .3px; }
html[data-hs] .comment-avatar img { border-color: var(--bg-body); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-hs] .comment-form textarea,
html[data-hs] .comment-form input[type="text"],
html[data-hs] .comment-form input[type="email"],
html[data-hs] .comment-form input[type="url"],
html[data-hs] #commentform textarea,
html[data-hs] #commentform input[type="text"],
html[data-hs] #commentform input[type="email"] {
    border: 1px solid var(--cm-field-border, var(--border));
    border-radius: var(--sk-field-radius);
    background: var(--cm-field-bg, var(--sk-soft));
    color: var(--text-main);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
html[data-hs] .comment-form textarea:focus,
html[data-hs] .comment-form input:focus,
html[data-hs] #commentform textarea:focus,
html[data-hs] #commentform input:focus {
    border-color: var(--cm-focus, var(--accent));
    background: var(--cm-field-bg, var(--bg-body));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-focus, var(--accent)) 18%, transparent);
    outline: none;
}
html[data-hs] .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; color: var(--text-muted); font-size: 13px; }
html[data-hs] .comment-form-cookies-consent input { accent-color: var(--cm-focus, var(--accent)); margin-top: 3px; }
html[data-hs] .submit-btn {
    padding: 14px 28px;
    border-radius: var(--sk-btn-radius);
    background: var(--cm-btn-bg, var(--accent));
    font-family: var(--sk-label-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--sk-btn-ls);
    text-transform: var(--sk-btn-tt);
    transition: transform .2s, box-shadow .2s, opacity .2s;
}
html[data-hs] .submit-btn:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--cm-btn-bg, var(--accent)) 30%, transparent); }

/* ---------- 6. 404 ---------- */
html[data-hs] .error-badge { border-radius: var(--sk-btn-radius); font-family: var(--sk-label-font); letter-spacing: var(--sk-label-ls); }
html[data-hs] .error-title { font-family: var(--font-heading); font-style: var(--sk-title-style); text-transform: var(--sk-title-tt); }
html[data-hs] .error-home-btn,
html[data-hs] .error-search { border-radius: var(--sk-btn-radius); }

/* ---------- 7. Secondary bar (shortcut navigation) ---------- */
html[data-hs] .shortcut-nav-container { padding: 10px 0; scrollbar-width: none; }
html[data-hs] .shortcut-nav-container::-webkit-scrollbar { display: none; }
html[data-hs] .shortcut-nav-list { gap: 8px; }
html[data-hs] .shortcut-nav-list a {
    padding: 7px 15px;
    border: 1px solid transparent;
    border-radius: var(--sk-btn-radius);
    background: var(--shortcut-nav-link-bg, var(--sk-soft));
    color: var(--shortcut-nav-link-text, var(--text-main));
    font-family: var(--sk-label-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: background-color .2s, border-color .2s, color .2s;
}
html[data-hs] .shortcut-nav-container:not(.style-news) .shortcut-nav-list a { text-transform: capitalize; }
html[data-hs] .shortcut-nav-list a:hover { background: var(--shortcut-nav-hover-bg, var(--accent-fill, var(--accent))); color: var(--shortcut-nav-hover-text, var(--eph-on-accent, var(--on-accent-fill, #fff))); }
html[data-hs] .shortcut-nav-list .current-menu-item > a,
html[data-hs] .shortcut-nav-list .current-cat > a { border-color: var(--accent); background: var(--bg-body); color: var(--accent-text, var(--accent)); }

html[data-hs] .shortcut-nav-container.style-news { padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--border); box-shadow: inset 0 -3px 0 -2px var(--text-main); }
html[data-hs] .shortcut-nav-container.style-news .shortcut-nav-list { gap: 0; }
html[data-hs] .shortcut-nav-container.style-news .shortcut-nav-list li + li { border-left: 1px solid var(--border); }
html[data-hs] .shortcut-nav-container.style-news .shortcut-nav-list a {
    padding: 2px 18px;
    border: 0;
    background: transparent;
    font-family: var(--sk-label-font);
    font-size: var(--sk-label-size);
    font-weight: var(--sk-label-weight);
    letter-spacing: calc(var(--sk-label-ls) * .6);
    text-transform: var(--sk-label-tt);
}
html[data-hs] .shortcut-nav-container.style-news .shortcut-nav-list .current-menu-item > a,
html[data-hs] .shortcut-nav-container.style-news .shortcut-nav-list .current-cat > a { color: var(--accent-text, var(--accent)); background: transparent; }

@media (max-width: 768px) {
    html[data-hs] .archive-header { padding: 48px 20px 44px; }
    html[data-hs] .archive-label::before,
    html[data-hs] .archive-label::after { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-hs] .load-more-btn, html[data-hs] .submit-btn { transition: none; }
}