/**
Theme Name: Healio Custom
Template:   plover
Theme URI: https://example.com/healio-custom
Author: Prince the BA
Author URI: https://example.com
Description: Custom fork of Healio Magazine for this site. Includes custom styling updates for code blocks, tables, and blockquotes.
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.2
Update URI: false
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healio-custom
Tags: full-site-editing, editor-style, block-patterns, wide-blocks, block-styles, style-variations, threaded-comments, translation-ready, sticky-post, footer-widgets, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-image-header, featured-images, flexible-header, one-column, two-columns, three-columns, buddypress, full-width-template, rtl-language-support, grid-layout, left-sidebar, right-sidebar, portfolio, blog, news
 */

/* ==========================================================================
   Code & Pre blocks
   ========================================================================== */

/* ---- Inline code ---- */
:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp,
:not(pre) > tt {
    font-family: var(--wp--preset--font-family--fira-code, "Fira Code", "Courier New", monospace) !important;
    font-size: 0.85em !important;
    background-color: color-mix(in srgb, var(--wp--preset--color--primary-active) 18%, var(--wp--preset--color--neutral-0)) !important;
    color: var(--wp--preset--color--neutral-950) !important;
    padding: 0.18em 0.45em !important;
    border-radius: 0.3rem !important;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary-active) 35%, var(--wp--preset--color--neutral-400)) !important;
    word-break: break-word;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0;
}

/* ---- Block code container ---- */
pre,
body .wp-block-code {
    position: relative;
    font-family: var(--wp--preset--font-family--fira-code, "Fira Code", "Courier New", monospace) !important;
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
    background-color: var(--wp--preset--color--neutral-950) !important;
    color: var(--wp--preset--color--neutral-200) !important;
    padding: 1.5rem 1.75rem !important;
    padding-top: 3rem !important;
    border-radius: 0.5rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    tab-size: 4;
    white-space: pre !important;
    margin-block: 1.75rem !important;
    border: 1px solid var(--wp--preset--color--neutral-800) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Decorative top bar with traffic-light dots */
pre::before,
body .wp-block-code::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.25rem;
    background-color: var(--wp--preset--color--neutral-800);
    border-bottom: 1px solid var(--wp--preset--color--neutral-600);
    border-radius: 0.5rem 0.5rem 0 0;
}

pre::after,
body .wp-block-code::after {
    content: "● ● ●";
    position: absolute;
    top: 0;
    left: 1rem;
    height: 2.25rem;
    line-height: 2.35rem;
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: var(--wp--preset--color--primary-active);
    font-family: monospace;
}

/* ---- Reset code inside pre/wp-block-code ---- */
pre code,
pre kbd,
pre samp,
body .wp-block-code code {
    font-family: inherit !important;
    font-size: inherit !important;
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    word-break: normal;
    font-weight: inherit !important;
    letter-spacing: 0;
}

/* ==========================================================================
   Tables
   ========================================================================== */

table,
.wp-block-table table,
.entry-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-size: 0.95rem !important;
    margin-block: 1.5rem !important;
}

th,
.wp-block-table th,
.entry-content th {
    background-color: var(--wp--preset--color--neutral-950) !important;
    color: var(--wp--preset--color--neutral-0) !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 0.75rem 1rem !important;
    border: 2px solid var(--wp--preset--color--neutral-800) !important;
    letter-spacing: 0.05em !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
}

td,
.wp-block-table td,
.entry-content td {
    padding: 0.65rem 1rem !important;
    border: 1px solid var(--wp--preset--color--neutral-400) !important;
    background-color: var(--wp--preset--color--neutral-0) !important;
    color: var(--wp--preset--color--neutral-800) !important;
    vertical-align: top !important;
    line-height: 1.5 !important;
}

tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even) {
    background-color: var(--wp--preset--color--neutral-200) !important;
}

tbody tr:nth-child(even) td,
.wp-block-table tbody tr:nth-child(even) td,
.entry-content tbody tr:nth-child(even) td {
    background-color: var(--wp--preset--color--neutral-200) !important;
    color: var(--wp--preset--color--neutral-800) !important;
}

tbody tr:hover,
.wp-block-table tbody tr:hover,
.entry-content tbody tr:hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary-active) 14%, var(--wp--preset--color--neutral-0)) !important;
}

tbody tr:hover td,
.wp-block-table tbody tr:hover td,
.entry-content tbody tr:hover td {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary-active) 14%, var(--wp--preset--color--neutral-0)) !important;
}

tfoot td,
tfoot th,
.wp-block-table tfoot td,
.wp-block-table tfoot th,
.entry-content tfoot td,
.entry-content tfoot th {
    background-color: var(--wp--preset--color--neutral-200) !important;
    color: var(--wp--preset--color--neutral-800) !important;
    font-weight: 700 !important;
    border-top: 2px solid var(--wp--preset--color--neutral-950) !important;
}

/* Scrollable wrapper for narrow viewports */
.wp-block-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Striped style variation */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--wp--preset--color--neutral-0) !important;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
    background-color: var(--wp--preset--color--neutral-0) !important;
    color: var(--wp--preset--color--neutral-800) !important;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: var(--wp--preset--color--neutral-200) !important;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) td {
    background-color: var(--wp--preset--color--neutral-200) !important;
    color: var(--wp--preset--color--neutral-800) !important;
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
    border: 1px solid var(--wp--preset--color--neutral-400) !important;
}

/* ==========================================================================
   Blockquotes
   ========================================================================== */

blockquote,
.wp-block-quote,
.entry-content blockquote,
.wp-block-post-content blockquote {
    position: relative;
    margin-block: 1.75rem !important;
    padding: 1rem 1.25rem 1rem 1.5rem !important;
    border-left: 4px solid var(--wp--preset--color--primary-active) !important;
    background: color-mix(in srgb, var(--wp--preset--color--primary-active) 10%, var(--wp--preset--color--neutral-0)) !important;
    color: var(--wp--preset--color--neutral-800) !important;
    border-radius: 0.375rem !important;
}

blockquote p,
.wp-block-quote p,
.entry-content blockquote p,
.wp-block-post-content blockquote p {
    font-size: 1.12rem !important;
    line-height: 1.8 !important;
    margin: 0.25rem 0 !important;
    color: inherit !important;
}

blockquote cite,
blockquote footer,
.wp-block-quote cite,
.wp-block-quote footer,
.entry-content blockquote cite,
.entry-content blockquote footer,
.wp-block-post-content blockquote cite,
.wp-block-post-content blockquote footer {
    display: block;
    margin-top: 0.75rem !important;
    font-size: 0.84rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wp--preset--color--neutral-600) !important;
    font-style: normal;
    font-weight: 600;
}

blockquote cite::before,
blockquote footer::before,
.wp-block-quote cite::before,
.wp-block-quote footer::before {
    content: "— ";
}

body.is-style-dark blockquote,
body.is-style-dark .wp-block-quote,
body.is-style-dark .entry-content blockquote,
body.is-style-dark .wp-block-post-content blockquote,
.is-style-dark blockquote,
.is-style-dark .wp-block-quote {
    background: color-mix(in srgb, var(--wp--preset--color--primary-active) 16%, var(--wp--preset--color--neutral-0)) !important;
    color: var(--wp--preset--color--neutral-800) !important;
    border-left-color: var(--wp--preset--color--primary-active) !important;
}

body.is-style-dark blockquote p,
body.is-style-dark .wp-block-quote p,
.is-style-dark blockquote p,
.is-style-dark .wp-block-quote p {
    color: inherit !important;
}

body.is-style-dark blockquote cite,
body.is-style-dark blockquote footer,
body.is-style-dark .wp-block-quote cite,
body.is-style-dark .wp-block-quote footer,
.is-style-dark blockquote cite,
.is-style-dark blockquote footer,
.is-style-dark .wp-block-quote cite,
.is-style-dark .wp-block-quote footer {
    color: var(--wp--preset--color--neutral-600) !important;
}