@charset "UTF-8";

/*
 * PharmaLab — inner templates on the dark surface.
 *
 * page.php, single.php, archive/index, search and 404 inherit the light
 * foundation sheets (page hero band, white content body, light cards, light
 * form fields). site-dark.css resets background *colours* only; this layer
 * finishes the job for the theme's own templates: hero band, content body,
 * content cards, search results, 404 panel, form controls, pagination and
 * comments all sit on the same dark teal surface as the homepage, with the
 * homepage's mint vocabulary (hairlines, pills, focus ring).
 *
 * Scoped to body.plab-dark-page, loaded after site-dark.css.
 */

/* ------------------------------------------------------------ hero band */

body.plab-dark-page .plab-page-hero,
body.plab-dark-page .plab-archive-hero,
body.plab-dark-page .plab-article-hero {
    position: relative;
    padding-block: clamp(56px, 6vw, 84px) clamp(20px, 3vw, 36px);
    background:
        radial-gradient(58% 60% at 78% 0%, rgba(50, 172, 145, .12) 0%, transparent 70%),
        transparent;
    color: var(--text-primary-dark);
}

body.plab-dark-page .plab-page-hero::after,
body.plab-dark-page .plab-archive-hero::after,
body.plab-dark-page .plab-article-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(680px, 52%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--border-mint), transparent);
}

body.plab-dark-page .plab-page-hero h1,
body.plab-dark-page .plab-archive-hero h1,
body.plab-dark-page .plab-article-hero h1,
body.plab-dark-page .plab-archive-header h1 {
    color: var(--text-primary-dark);
}

body.plab-dark-page .plab-archive-hero > .plab-container > div {
    color: var(--text-secondary-dark);
}

body.plab-dark-page .plab-page-hero__media,
body.plab-dark-page .plab-article__image {
    border: 1px solid var(--border-mint-soft);
    border-radius: 24px;
    background: var(--pharma-850);
    box-shadow: var(--shadow-card-dark);
}

/* Eyebrow pill: the light plate becomes the homepage's outlined pill. */
body.plab-dark-page .plab-eyebrow {
    border-color: var(--border-mint);
    background: rgba(50, 172, 145, .08);
    color: var(--mint-400);
    letter-spacing: .08em;
}

/* ------------------------------------------------------------ content */

body.plab-dark-page .plab-page-body,
body.plab-dark-page .plab-archive-body,
body.plab-dark-page .plab-article-body {
    padding-block: clamp(36px, 4vw, 56px) clamp(72px, 8vw, 112px);
    background: transparent;
}

body.plab-dark-page .plab-site-main {
    min-height: 55vh;
    background: transparent;
}

body.plab-dark-page .entry-content {
    color: var(--text-secondary-dark);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

body.plab-dark-page .entry-content :where(h1, h2, h3, h4, h5, h6) {
    color: var(--text-primary-dark);
}

body.plab-dark-page .entry-content :where(h2) {
    margin-block: 1.4em .5em;
}

body.plab-dark-page .entry-content :where(h3) {
    margin-block: 1.2em .4em;
}

body.plab-dark-page .entry-content :where(a),
body.plab-dark-page .plab-article-after a,
body.plab-dark-page .plab-comments a {
    color: var(--mint-400);
    text-decoration-color: rgba(88, 212, 184, .5);
    text-underline-offset: .18em;
}

body.plab-dark-page .entry-content :where(a):hover,
body.plab-dark-page .plab-article-after a:hover,
body.plab-dark-page .plab-comments a:hover {
    color: var(--mint-300);
}

body.plab-dark-page .entry-content :where(blockquote) {
    margin-inline: 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--mint-500);
    color: var(--text-primary-dark);
}

body.plab-dark-page .entry-content :where(hr) {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-mint), transparent);
}

body.plab-dark-page .entry-content :where(table) th,
body.plab-dark-page .entry-content :where(table) td {
    border-color: var(--border-mint-soft);
}

body.plab-dark-page .entry-content :where(code, pre) {
    background: rgba(0, 21, 20, .7);
    color: var(--mint-100);
}

body.plab-dark-page .plab-article__meta,
body.plab-dark-page .plab-search-result__type {
    color: var(--text-tertiary-dark);
}

/* ------------------------------------------------------------ cards */

body.plab-dark-page .plab-content-card,
body.plab-dark-page .plab-search-result,
body.plab-dark-page .plab-card {
    border: 1px solid var(--border-mint-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(158deg, rgba(8, 58, 52, .34), rgba(0, 27, 25, .82));
    box-shadow: 0 1px 2px rgba(0, 10, 9, .30), 0 10px 26px -16px rgba(0, 10, 9, .60);
    color: var(--text-secondary-dark);
    transition: transform var(--dur-normal) var(--ease-premium), border-color var(--dur-normal) var(--ease-premium), box-shadow var(--dur-normal) var(--ease-premium);
}

body.plab-dark-page .plab-content-card:hover,
body.plab-dark-page .plab-search-result:hover {
    transform: translateY(-4px);
    border-color: var(--border-mint);
    box-shadow: 0 2px 6px rgba(0, 10, 9, .34), 0 26px 54px -24px rgba(0, 10, 9, .85);
}

body.plab-dark-page .plab-content-card__title,
body.plab-dark-page .plab-content-card__title a,
body.plab-dark-page .plab-search-result h2,
body.plab-dark-page .plab-search-result h2 a {
    color: var(--text-primary-dark);
    text-decoration: none;
}

body.plab-dark-page .plab-content-card__title a:hover,
body.plab-dark-page .plab-search-result h2 a:hover {
    color: var(--mint-400);
}

body.plab-dark-page .plab-content-card__media {
    background: var(--pharma-850);
}

/* ------------------------------------------------------------ empty states */

body.plab-dark-page .plab-empty-page,
body.plab-dark-page .plab-empty-state {
    border: 1px solid var(--border-mint-soft);
    border-radius: 26px;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(50, 172, 145, .12), transparent 70%),
        linear-gradient(168deg, var(--pharma-800) 0%, var(--pharma-950) 100%);
    box-shadow: 0 34px 76px -36px rgba(0, 10, 9, .92);
    color: var(--text-secondary-dark);
}

body.plab-dark-page .plab-empty-page h1,
body.plab-dark-page .plab-empty-state h2 {
    color: var(--text-primary-dark);
}

body.plab-dark-page .plab-empty-page__code {
    color: var(--mint-500);
    opacity: .9;
}

/* ------------------------------------------------------------ buttons */

body.plab-dark-page .plab-button--primary,
body.plab-dark-page .wp-element-button,
body.plab-dark-page .wp-block-button__link {
    border-color: var(--border-mint) !important;
    background: linear-gradient(135deg, var(--mint-300) 0%, var(--mint-400) 58%, var(--mint-500) 100%) !important;
    color: var(--text-primary-light) !important;
    box-shadow: 0 14px 30px -18px rgba(50, 172, 145, .9);
}

body.plab-dark-page .plab-button--primary:hover,
body.plab-dark-page .plab-button--primary:focus-visible {
    background: linear-gradient(135deg, var(--mint-300) 0%, var(--mint-300) 40%, var(--mint-400) 100%) !important;
    color: var(--text-primary-light) !important;
}

body.plab-dark-page .plab-button--secondary,
body.plab-dark-page .plab-button--ghost {
    border-color: var(--border-mint);
    background: rgba(50, 172, 145, .07);
    color: var(--text-primary-dark);
}

body.plab-dark-page .plab-button--secondary:hover,
body.plab-dark-page .plab-button--ghost:hover {
    border-color: var(--mint-500);
    background: rgba(50, 172, 145, .14);
    color: var(--mint-300);
}

/* ------------------------------------------------------------ forms */

body.plab-dark-page main :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
    textarea,
    select
) {
    border: 1px solid var(--border-mint-soft);
    background-color: rgba(0, 21, 20, .6);
    color: var(--text-primary-dark);
}

body.plab-dark-page main :where(input, textarea)::placeholder {
    color: var(--text-tertiary-dark);
}

body.plab-dark-page main :where(input, textarea, select):focus {
    border-color: var(--mint-500);
    box-shadow: 0 0 0 4px rgba(50, 172, 145, .16);
}

body.plab-dark-page main :where(input, textarea, select):hover {
    border-color: var(--border-mint);
    background-color: rgba(0, 21, 20, .7);
}

body.plab-dark-page .plab-icon-button {
    border-color: var(--border-mint);
    background: linear-gradient(135deg, var(--mint-300) 0%, var(--mint-400) 58%, var(--mint-500) 100%);
    color: var(--text-primary-light);
    box-shadow: 0 12px 26px -18px rgba(50, 172, 145, .85);
}

body.plab-dark-page .plab-icon-button:hover {
    border-color: var(--mint-500);
    background: linear-gradient(135deg, var(--mint-300) 0%, var(--mint-300) 40%, var(--mint-400) 100%);
}

/* ------------------------------------------------------------ navigation + comments */

body.plab-dark-page .post-navigation,
body.plab-dark-page .posts-navigation,
body.plab-dark-page .pagination {
    margin-block: 32px 0;
    color: var(--text-secondary-dark);
}

body.plab-dark-page .nav-links a,
body.plab-dark-page .page-numbers {
    color: var(--mint-400);
    font-weight: 700;
    text-decoration: none;
}

body.plab-dark-page .page-numbers.current {
    color: var(--text-primary-light);
    background: var(--mint-500);
    border-radius: 999px;
    padding: 4px 12px;
}

body.plab-dark-page .plab-comments {
    border-top-color: var(--border-mint-soft);
    color: var(--text-secondary-dark);
}

body.plab-dark-page .plab-comments h2,
body.plab-dark-page .plab-comments h3,
body.plab-dark-page .comment-author {
    color: var(--text-primary-dark);
}

body.plab-dark-page .comment-body {
    padding: 20px 22px;
    border: 1px solid var(--border-mint-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(158deg, rgba(8, 58, 52, .28), rgba(0, 27, 25, .82));
}

body.plab-dark-page .comment-list,
body.plab-dark-page .comment-list .children {
    list-style: none;
    padding-inline-start: 0;
}

body.plab-dark-page .comment-list > li + li {
    margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
    body.plab-dark-page .plab-content-card,
    body.plab-dark-page .plab-search-result {
        transition: none;
    }

    body.plab-dark-page .plab-content-card:hover,
    body.plab-dark-page .plab-search-result:hover {
        transform: none;
    }
}