/* ============================================================
   DARK MODE - Slate for Ghost  (v4)
   ============================================================ */

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 300ms ease,
                color 300ms ease,
                border-color 300ms ease,
                box-shadow 300ms ease,
                fill 300ms ease,
                stroke 300ms ease !important;
}

html[data-theme="dark"] {
    --epcl-background-color: #15171a;
    --epcl-secondary-color: #1c2026;
    --epcl-titles-color: #ebeef0;
    --epcl-text-color: #c5cdd6;
    --epcl-black: #ebeef0;
    --epcl-border-color: #2e3338;
    --epcl-boxes-background-color: #1c2026;
    --epcl-editor-boxes-bg-color: #1c2026;

    --epcl-code-background: #0d0f11;
    --epcl-code-color: #d8dde3;

    --epcl-boxes-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
    --epcl-small-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
    --epcl-medium-shadow: 0px 8px 16px -4px rgba(0, 0, 0, 0.5);
    --epcl-large-shadow: 0px 4px 25px -4px rgba(0, 0, 0, 0.6);

    --epcl-nav-highlight: #ffffff;

    color-scheme: dark;
}

/* ============================================================
   Body / Header
   ============================================================ */
html[data-theme="dark"] body {
    background-color: var(--epcl-background-color);
    color: var(--epcl-text-color);
}

html[data-theme="dark"] #header,
html[data-theme="dark"] #header.minimalist,
html[data-theme="dark"] #header.is-fixed,
html[data-theme="dark"] #header[data-stuck] div.menu-wrapper {
    background-color: var(--epcl-background-color) !important;
    border-color: var(--epcl-border-color);
}

html[data-theme="dark"] #header .logo a {
    color: var(--epcl-titles-color);
}

html[data-theme="dark"] #header div.menu-mobile svg {
    fill: var(--epcl-titles-color);
}

/* ============================================================
   GLOBAL: hover em links no dark fica branco (não accent preto)
   ============================================================ */
html[data-theme="dark"] a:hover {
    color: var(--epcl-nav-highlight) !important;
}

/* Mas botões com fundo accent mantêm texto branco */
html[data-theme="dark"] .epcl-button:not(.epcl-shortcode),
html[data-theme="dark"] .epcl-button:not(.epcl-shortcode):hover,
html[data-theme="dark"] .button,
html[data-theme="dark"] .button:hover {
    color: #fff !important;
}

/* ============================================================
   Menu de navegação
   ============================================================ */
html[data-theme="dark"] .main-nav ul.menu li .link,
html[data-theme="dark"] .main-nav ul.menu li a {
    color: #c5cdd6 !important;
}

html[data-theme="dark"] .main-nav ul.menu li.current-menu-item a,
html[data-theme="dark"] .main-nav ul.menu li.current-menu-item .link {
    color: var(--epcl-nav-highlight) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--epcl-nav-highlight);
    padding-bottom: 2px;
}

html[data-theme="dark"] .main-nav ul.menu li a:hover,
html[data-theme="dark"] .main-nav ul.menu li .link:hover,
html[data-theme="dark"] .main-nav ul.menu li:hover > a,
html[data-theme="dark"] .main-nav ul.menu li:hover > .link {
    color: var(--epcl-nav-highlight) !important;
}

html[data-theme="dark"] .main-nav ul.sub-menu {
    background: var(--epcl-secondary-color) !important;
    border-color: var(--epcl-border-color);
}

html[data-theme="dark"] .main-nav ul.sub-menu li a {
    color: #c5cdd6 !important;
}

html[data-theme="dark"] .main-nav ul.sub-menu li a:hover,
html[data-theme="dark"] .main-nav ul.sub-menu li.current-menu-item a {
    color: var(--epcl-nav-highlight) !important;
}

html[data-theme="dark"] #header .epcl-search-button svg,
html[data-theme="dark"] .epcl-search-button svg {
    color: var(--epcl-titles-color);
    stroke: var(--epcl-titles-color);
}

/* ============================================================
   Botão de busca (lupa) — sempre vazado (sem fundo branco),
   só o ícone com stroke. Aplica em ambos os temas.
   ============================================================ */
.epcl-search-button,
#header .epcl-search-button,
[data-ghost-search] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.epcl-search-button svg,
#header .epcl-search-button svg,
[data-ghost-search] svg {
    fill: none !important;
}

.epcl-search-button svg path,
.epcl-search-button svg circle,
#header .epcl-search-button svg path,
#header .epcl-search-button svg circle,
[data-ghost-search] svg path,
[data-ghost-search] svg circle {
    fill: none !important;
}

/* No light, lupa preta */
html:not([data-theme="dark"]) .epcl-search-button svg,
html:not([data-theme="dark"]) #header .epcl-search-button svg {
    color: var(--epcl-titles-color, #292524);
    stroke: var(--epcl-titles-color, #292524);
}

html:not([data-theme="dark"]) .epcl-search-button svg path,
html:not([data-theme="dark"]) .epcl-search-button svg circle {
    stroke: var(--epcl-titles-color, #292524) !important;
}

/* No dark, lupa branca */
html[data-theme="dark"] .epcl-search-button svg,
html[data-theme="dark"] #header .epcl-search-button svg,
html[data-theme="dark"] [data-ghost-search] svg {
    color: var(--epcl-titles-color) !important;
    stroke: var(--epcl-titles-color) !important;
}

html[data-theme="dark"] .epcl-search-button svg path,
html[data-theme="dark"] .epcl-search-button svg circle,
html[data-theme="dark"] #header .epcl-search-button svg path,
html[data-theme="dark"] #header .epcl-search-button svg circle,
html[data-theme="dark"] [data-ghost-search] svg path,
html[data-theme="dark"] [data-ghost-search] svg circle {
    stroke: var(--epcl-titles-color) !important;
}

html[data-theme="dark"] nav.mobile.main-nav {
    background: var(--epcl-secondary-color) !important;
}

html[data-theme="dark"] nav.mobile.main-nav ul.sub-menu li a {
    color: var(--epcl-text-color);
}

html[data-theme="dark"] .menu-overlay {
    background-color: #000;
}

/* ============================================================
   Títulos e textos
   ============================================================ */
html[data-theme="dark"] .title,
html[data-theme="dark"] .title a,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--epcl-titles-color) !important;
}

html[data-theme="dark"] #single .main-title,
html[data-theme="dark"] #single .title,
html[data-theme="dark"] #single h1.title,
html[data-theme="dark"] #single .main-article .main-title,
html[data-theme="dark"] #single .excerpt {
    color: var(--epcl-titles-color) !important;
}

html[data-theme="dark"] div.text,
html[data-theme="dark"] div.text p,
html[data-theme="dark"] div.text li,
html[data-theme="dark"] div.text dd,
html[data-theme="dark"] div.text dt {
    color: var(--epcl-text-color);
}

html[data-theme="dark"] div.text h1,
html[data-theme="dark"] div.text h2,
html[data-theme="dark"] div.text h3,
html[data-theme="dark"] div.text h4,
html[data-theme="dark"] div.text h5,
html[data-theme="dark"] div.text h6 {
    color: var(--epcl-titles-color) !important;
}

html[data-theme="dark"] div.text b,
html[data-theme="dark"] div.text strong {
    color: var(--epcl-titles-color);
}

html[data-theme="dark"] div.text a:not([class]) {
    color: var(--epcl-nav-highlight);
    text-decoration: underline;
}

html[data-theme="dark"] div.text a:not([class]):hover {
    color: var(--epcl-titles-color);
}

/* ============================================================
   Meta info
   ============================================================ */
html[data-theme="dark"] .meta,
html[data-theme="dark"] .meta.small,
html[data-theme="dark"] #author div.info,
html[data-theme="dark"] .module-about .info,
html[data-theme="dark"] .subscribe-form .description,
html[data-theme="dark"] #single section.siblings article p,
html[data-theme="dark"] #single .main-article .featured-image-caption,
html[data-theme="dark"] div.text figure figcaption,
html[data-theme="dark"] .module-featured-post .editor-pick {
    color: #9aa3ad !important;
}

html[data-theme="dark"] .meta a {
    color: #c5cdd6 !important;
}

html[data-theme="dark"] .meta a:hover {
    color: var(--epcl-titles-color) !important;
}

html[data-theme="dark"] .meta .author .author-name span {
    color: var(--epcl-text-color);
}

/* ============================================================
   TAG "News" e outras tags — força cor clara mesmo se accent escuro
   ============================================================ */
html[data-theme="dark"] div.tags,
html[data-theme="dark"] div.tags a,
html[data-theme="dark"] div.tags.fill-color a,
html[data-theme="dark"] .meta-info.fill-color a,
html[data-theme="dark"] a.primary-tag,
html[data-theme="dark"] a.ctag {
    color: var(--epcl-text-color) !important;
}

html[data-theme="dark"] div.tags.fill-color a {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] div.tags.fill-color a:hover,
html[data-theme="dark"] div.tags a:hover,
html[data-theme="dark"] a.primary-tag:hover,
html[data-theme="dark"] a.ctag:hover {
    color: var(--epcl-nav-highlight) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Lista de tags no rodapé do post (#single .tags-list) — usa --epcl-main-color (accent),
   que no caso do usuário é preto. Override pra ficar visível no dark. */
html[data-theme="dark"] #single .tags-list a,
html[data-theme="dark"] .tags-list a {
    color: var(--epcl-nav-highlight) !important;
}

html[data-theme="dark"] #single .tags-list a:hover,
html[data-theme="dark"] .tags-list a:hover {
    color: var(--epcl-titles-color) !important;
    opacity: 0.85;
}

/* ============================================================
   ÍCONES DE COMPARTILHAMENTO (X/Twitter, email, etc) no dark
   ============================================================ */
html[data-theme="dark"] #single .share-buttons a,
html[data-theme="dark"] #single .share-buttons .email,
html[data-theme="dark"] #single .share-buttons .twitter,
html[data-theme="dark"] #single .share-buttons .x {
    color: var(--epcl-titles-color) !important;
}

html[data-theme="dark"] #single .share-buttons a svg {
    color: var(--epcl-titles-color);
    fill: currentColor;
}

/* Social buttons (rede social) — versão fill-color, só cinza claro pra Twitter/email pretos */
html[data-theme="dark"] .epcl-social-buttons.fill-color a.twitter,
html[data-theme="dark"] .epcl-social-buttons.fill-color a.email,
html[data-theme="dark"] .epcl-author-social a.twitter,
html[data-theme="dark"] .epcl-author-social a.twitter svg {
    color: var(--epcl-titles-color) !important;
}

html[data-theme="dark"] .epcl-social-buttons.fill-color a.twitter svg,
html[data-theme="dark"] .epcl-social-buttons.fill-color a.email svg {
    fill: var(--epcl-titles-color);
}

/* ============================================================
   Inputs
   ============================================================ */
html[data-theme="dark"] .inputbox,
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: #2a2f36 !important;
    color: var(--epcl-titles-color);
    border-color: var(--epcl-border-color);
}

html[data-theme="dark"] .inputbox::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #7c8794 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: #4a5159;
}

html[data-theme="dark"] a.hover-effect {
    background: var(--epcl-secondary-color);
}

/* ============================================================
   Footer e bordas
   ============================================================ */
html[data-theme="dark"] hr,
html[data-theme="dark"] .epcl-border,
html[data-theme="dark"] #footer,
html[data-theme="dark"] #footer .published,
html[data-theme="dark"] #single .meta-bottom,
html[data-theme="dark"] #single .tags-list,
html[data-theme="dark"] .subscribe-cta {
    border-color: var(--epcl-border-color);
}

html[data-theme="dark"] #footer {
    background: var(--epcl-background-color) !important;
}

html[data-theme="dark"] #footer #back-to-top {
    background-color: var(--epcl-secondary-color);
    color: var(--epcl-titles-color);
    border: 1px solid var(--epcl-border-color);
}

/* Footer links — garantir hover branco (não accent preto) */
html[data-theme="dark"] #footer a:hover,
html[data-theme="dark"] .published a:hover,
html[data-theme="dark"] #footer .secondary-nav ul li a:hover {
    color: var(--epcl-nav-highlight) !important;
}

/* ============================================================
   Featured post / cards
   ============================================================ */
html[data-theme="dark"] .module-featured-post,
html[data-theme="dark"] .module-featured-post.bg-box {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] article,
html[data-theme="dark"] div.articles article {
    background-color: transparent;
}

html[data-theme="dark"] .bg-box:not(.module-featured-post),
html[data-theme="dark"] .subscribe-cta {
    background-color: var(--epcl-boxes-background-color);
    border-color: var(--epcl-border-color);
}

html[data-theme="dark"] #single section.siblings article {
    background-color: var(--epcl-secondary-color);
    border: 1px solid var(--epcl-border-color);
}

html[data-theme="dark"] .bg-white {
    background: var(--epcl-boxes-background-color) !important;
}

/* ============================================================
   Tabelas, blockquote, code
   ============================================================ */
html[data-theme="dark"] div.text table {
    background: var(--epcl-boxes-background-color) !important;
    color: var(--epcl-text-color);
    border-color: var(--epcl-border-color);
}

html[data-theme="dark"] div.text table th,
html[data-theme="dark"] div.text table td {
    border-color: var(--epcl-border-color);
    color: var(--epcl-text-color);
}

html[data-theme="dark"] div.text table th {
    color: var(--epcl-titles-color);
    background: var(--epcl-secondary-color);
}

html[data-theme="dark"] div.text blockquote {
    background: var(--epcl-secondary-color);
    border-color: var(--epcl-border-color);
    color: var(--epcl-text-color);
}

html[data-theme="dark"] div.text blockquote cite,
html[data-theme="dark"] div.text blockquote__citation {
    color: var(--epcl-titles-color);
}

html[data-theme="dark"] div.text pre,
html[data-theme="dark"] div.text pre:not([class*="language-"]),
html[data-theme="dark"] div.text code:not([class*="language-"]) {
    background-color: #0d0f11 !important;
    color: var(--epcl-code-color) !important;
    border-color: var(--epcl-border-color);
}

/* ============================================================
   Koenig cards
   ============================================================ */
html[data-theme="dark"] div.text .kg-bookmark-card .kg-bookmark-container,
html[data-theme="dark"] div.text .kg-toggle-card,
html[data-theme="dark"] div.text .kg-audio-card,
html[data-theme="dark"] div.text .kg-file-card a.kg-file-card-container,
html[data-theme="dark"] div.text .kg-callout-card,
html[data-theme="dark"] div.text .kg-product-card .kg-product-card-container {
    background: var(--epcl-secondary-color) !important;
    border-color: var(--epcl-border-color) !important;
}

html[data-theme="dark"] div.text .kg-bookmark-card .kg-bookmark-title,
html[data-theme="dark"] div.text .kg-bookmark-card .kg-bookmark-metadata,
html[data-theme="dark"] div.text .kg-file-card .kg-file-card-title,
html[data-theme="dark"] div.text .kg-audio-card .kg-audio-title {
    color: var(--epcl-titles-color);
}

html[data-theme="dark"] div.text .kg-callout-card:before {
    background: var(--epcl-secondary-color) !important;
}

/* ============================================================
   Tooltips, autor, arquivo
   ============================================================ */
html[data-theme="dark"] .tooltip:before {
    background: var(--epcl-secondary-color);
    color: var(--epcl-titles-color);
}

html[data-theme="dark"] .tooltip:after {
    border-top-color: var(--epcl-secondary-color);
}

html[data-theme="dark"] #author .location {
    color: var(--epcl-titles-color);
    border-color: var(--epcl-border-color);
}

html[data-theme="dark"] #author .location:before {
    background: var(--epcl-border-color);
}

html[data-theme="dark"] #archives .tag-description {
    background: transparent !important;
}

/* ============================================================
   Imagens, seleção
   ============================================================ */
html[data-theme="dark"] #wrapper img:not(.theme-toggle img):not(.logo img) {
    opacity: 0.92;
    transition: opacity 200ms ease;
}

html[data-theme="dark"] #wrapper img:hover {
    opacity: 1;
}

html[data-theme="dark"] ::selection {
    background-color: var(--epcl-nav-highlight);
    color: var(--epcl-background-color);
}

html[data-theme="dark"] ::-moz-selection {
    background-color: var(--epcl-nav-highlight);
    color: var(--epcl-background-color);
}

html[data-theme="dark"] #header.has-sticky-logo.is-sticky {
    background-color: var(--epcl-background-color);
}

/* ============================================================
   BOTÃO DE ALTERNAR TEMA — inline na navegação
   ============================================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--epcl-border-color, #e5e5e5);
    color: var(--epcl-titles-color, #292524);
    cursor: pointer;
    transition: background-color 200ms ease,
                border-color 200ms ease,
                color 200ms ease,
                transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
}

.theme-toggle:hover {
    background: var(--epcl-secondary-color, #f8f8f8);
    transform: rotate(20deg);
}

.theme-toggle:active {
    transform: rotate(20deg) scale(0.95);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--epcl-main-color);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

html[data-theme="dark"] .theme-toggle {
    background: transparent;
    border-color: var(--epcl-border-color);
    color: var(--epcl-titles-color);
}

html[data-theme="dark"] .theme-toggle:hover {
    background: var(--epcl-secondary-color);
}

/* ============================================================
   CARDS DE ARTIGO ANTERIOR / PRÓXIMO — com imagem de capa
   Aplica nos dois temas (light + dark), responsivo
   ============================================================ */

/* Reset do flex pra permitir imagem ao lado do conteúdo */
#single section.siblings article {
    flex-flow: row nowrap !important;
    align-items: center !important;
    overflow: hidden;
    gap: 20px;
    padding: 20px !important;
}

#single section.siblings article .sibling-thumb {
    flex-shrink: 0;
    width: 140px;
    height: 100px;
    border-radius: var(--epcl-small-border-radius);
    overflow: hidden;
    background: var(--epcl-secondary-color);
    box-shadow: var(--epcl-small-shadow);
}

#single section.siblings article .sibling-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

#single section.siblings article:hover .sibling-thumb img {
    transform: scale(1.05);
}

#single section.siblings article .info {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
}

#single section.siblings article .info .title {
    margin-top: 5px;
    margin-bottom: 5px;
}

#single section.siblings article .info p {
    margin: 0;
}

/* No card "Próximo artigo", imagem fica à direita e info à esquerda */
#single section.siblings article.next {
    text-align: right;
}

#single section.siblings article.next .sibling-thumb {
    order: 2;
}

#single section.siblings article.next .info {
    order: 1;
}

#single section.siblings article.next .info .tags {
    justify-content: flex-end;
}

/* No dark, fundo do card já vem do override geral em `siblings article` */
html[data-theme="dark"] #single section.siblings article .sibling-thumb {
    background: var(--epcl-background-color);
}

/* ---------- Tablet ---------- */
@media screen and (max-width: 990px) {
    #single section.siblings article .sibling-thumb {
        width: 110px;
        height: 85px;
    }
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 767px) {
    #single section.siblings article {
        flex-flow: column !important;
        align-items: stretch !important;
        text-align: left !important;
        gap: 12px;
    }

    #single section.siblings article .sibling-thumb {
        width: 100%;
        height: 140px;
        order: 0 !important;
    }

    #single section.siblings article.next .info {
        order: 1 !important;
        text-align: left;
    }

    #single section.siblings article.next .info .tags {
        justify-content: flex-start;
    }

    #single section.siblings article .info .title {
        font-size: 18px;
    }
}