/* Define root variables for both light and dark mode */
:root {
    /* Light mode variables (default) */
    --bg-color: #fcfbf8;
    --text-color: #131522;
    --link-color: #6639dc;

    --heading-color: #1a1a1a;
    --border-color: #dddddd;
    --accent-color: #4a90e2;
    --accent-orange: #f46c04;
    --blog-section-separator: rgba(24, 24, 27, 0.18);
    --index-link-border: #d4d4d8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #18181c;
        --text-color: #e3e3e3;
        --link-color: #6639dc;

        --heading-color: #d7d7d7;
        --border-color: #444444;
        --accent-color: #4a90e2;
        --accent-orange: #f46c04;
        --blog-section-separator: rgba(244, 244, 245, 0.16);
        --index-link-border: rgba(244, 244, 245, 0.28);
    }
}

/* Apply variables to elements */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
}

article h1,
header h1 {
    line-height: 120% !important;
    padding-bottom: 0.5rem;
    font-weight: 600;
    letter-spacing: -0.8px;
}

hr {
    margin: 4rem 0 !important;
    position: relative;
    border-color: rgba(0, 0, 0, .15);
}

@media (prefers-color-scheme: dark) {
    hr {
        border-color: rgba(255, 255, 255, .15);

    }
}

.content a {
    color: var(--accent-orange);
    overflow-wrap: anywhere;
}


.content p,
.content ul,
.content ol {
    color: #1d1f21;
    margin-top: 20px;
}

@media (prefers-color-scheme: dark) {

    .content p,
    .content ul,
    .content ol {
        color: #b4b4b4;
    }
}

.content strong {
    color: black;
}

@media (prefers-color-scheme: dark) {
    .content strong {
        color: white;
    }
}

#replyViaEmail {
    color: var(--bg-color);
    background-color: var(--accent-orange);
}

#allArticles {
    color: var(--accent-orange);
}

.content h3 {
    font-size: 1.25em;
    margin-top: 1.5em;
}


.content p,
.content ul,
.content ol {
    font-family: "Source Serif 4", serif;
    font-weight: 400;
    font-size: 18px;

}

.content ul {
    list-style-type: disc;
    margin-top: 0.5rem;
}

.content li {
    margin-left: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.content ol {
    list-style-type: decimal;
    font-weight: normal;
    margin-top: 0.5rem;
}

.content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.content .table-scroll {
    max-width: 100%;
    margin-top: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.content .table-scroll table {
    min-width: 680px;
}

.content th,
.content td {
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(24, 24, 27, 0.12);
    text-align: left;
    vertical-align: top;
}

.content th {
    font-weight: 700;
}

.content td {
    font-weight: 400;
}

@media (prefers-color-scheme: dark) {
    .content th,
    .content td {
        border-color: rgba(244, 244, 245, 0.14);
    }
}

.content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;

}

.content details {
    margin-top: 1rem;
}

.content details > summary {
    color: #222;
    cursor: pointer;
    font-weight: 700;
}

.content h2 {
    color: #222;
}

@media (prefers-color-scheme: dark) {
    .content h2 {
        color: white;
    }

    .content details > summary {
        color: white;
    }
}

.content .image-note {
    display: block;
    text-align: center;
    margin: 0px 3rem !important;
    font-size: 13px !important;
    line-height: 140% !important;
    color: #71717a;
}

@media (prefers-color-scheme: dark) {
    .content .image-note {
        color: #a1a1aa;
    }
}

.content p:has(> .image-note) {
    margin-top: 0.5rem !important;
}

.tcp-profile-comparison {
    margin: 1.5rem 0 0;
    overflow-x: auto;
    border: 1px solid rgba(24, 24, 27, 0.14);
    border-radius: 0.75rem;
    background: rgba(250, 250, 249, 0.7);
    font-family: Archivo, sans-serif;
}
.tcp-profile-heading, .tcp-profile-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.15fr) minmax(170px, 1fr) minmax(170px, 1fr);
    gap: 1rem;
    align-items: center;
    min-width: 620px;
    padding: 0.8rem 1rem;
}
.tcp-profile-heading { background: rgba(228, 228, 231, 0.45); font-size: 0.82rem; font-weight: 700; }
.tcp-profile-row { border-top: 1px solid rgba(24, 24, 27, 0.1); font-size: 0.9rem; }
.tcp-profile-row > span:not(:first-child) { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: center; }
.tcp-profile-row code { font-size: 0.9em; }
.tcp-profile-row small { display: block; margin-top: 0.18rem; color: #71717a; font-size: 0.78rem; }
.tcp-profile-row i { display: block; height: 0.45rem; overflow: hidden; border-radius: 999px; background: #e4e4e7; }
.tcp-profile-row i b { display: block; height: 100%; border-radius: inherit; background: #29adff; }
.tcp-profile-row > span:last-child i b { background: #4ade80; }
.tcp-profile-note { display: block; margin: 0.7rem 0 0; color: #71717a; font-size: 0.82rem; line-height: 120%; }
@media (prefers-color-scheme: dark) {
    .tcp-profile-comparison { border-color: rgba(244, 244, 245, 0.16); background: rgba(24, 24, 27, 0.55); }
    .tcp-profile-heading { background: rgba(63, 63, 70, 0.45); }
    .tcp-profile-row { border-color: rgba(244, 244, 245, 0.12); }
    .tcp-profile-row small, .tcp-profile-note { color: #a1a1aa; }
    .tcp-profile-row i { background: #3f3f46; }
}

.content .tcp-profile-table { width: 100%; min-width: 680px; margin: 1.5rem 0 0; border-collapse: collapse; table-layout: fixed; font-family: Archivo, sans-serif; }
.content .tcp-profile-table th, .content .tcp-profile-table td { padding: 0.8rem 0.9rem; border: 1px solid rgba(24, 24, 27, 0.12); text-align: left; vertical-align: middle; }
.content .tcp-profile-table thead th { background: rgba(228, 228, 231, 0.45); font-size: 0.82rem; font-weight: 700; }
.content .tcp-profile-table thead th:first-child { width: 31%; }
.content .tcp-profile-table tbody th { font-weight: 600; }
.content .tcp-profile-table tbody th small { display: block; margin-top: 0.2rem; color: #71717a; font-size: 0.78rem; font-weight: 400; }
.content .tcp-profile-table td { font-size: 0.92rem; }
.content .tcp-profile-table td strong { display: block; margin-bottom: 0.35rem; font-family: Archivo, sans-serif; font-weight: 700; }
.content .tcp-bar { display: block; height: 0.55rem; overflow: hidden; border-radius: 999px; background: #e4e4e7; }
.content .tcp-bar b { display: block; height: 100%; border-radius: inherit; background: #29adff; }
.content .tcp-profile-table td:nth-child(3) .tcp-bar b { background: #4ade80; }
.content .tcp-profile-note { display: block; margin: 0.7rem 0 0; color: #71717a; font-size: 0.82rem; line-height: 120%; }
@media (prefers-color-scheme: dark) {
    .content .tcp-profile-table th, .content .tcp-profile-table td { border-color: rgba(244, 244, 245, 0.14); }
    .content .tcp-profile-table thead th { background: rgba(63, 63, 70, 0.45); }
    .content .tcp-profile-table tbody th small, .content .tcp-profile-note { color: #a1a1aa; }
    .content .tcp-bar { background: #3f3f46; }
}

.content .tcp-profile-charts { margin: 1.5rem 0 0; }
.content .tcp-profile-charts h3 { margin-top: 1.5rem; }
.content .tcp-profile-chart { width: 100%; min-width: 780px; margin: 1rem 0 0; border-collapse: collapse; table-layout: fixed; font-family: Archivo, sans-serif; }
.content .tcp-profile-chart th, .content .tcp-profile-chart td { padding: .75rem .8rem; border: 1px solid rgba(113, 113, 122, .24); text-align: left; vertical-align: middle; }
.content .tcp-profile-chart thead th { background: rgba(228, 228, 231, .5); font-size: .82rem; font-weight: 700; }
.content .tcp-profile-chart thead th:first-child { width: 28%; }
.content .tcp-profile-chart tbody th { font-weight: 600; }
.content .tcp-profile-chart tbody th small { display: block; margin-top: .15rem; color: #71717a; font-size: .78rem; font-weight: 400; }
.content .tcp-profile-chart td strong { display: block; margin-bottom: .3rem; font-family: Archivo, sans-serif; font-weight: 700; }
.content .tcp-profile-chart td > span { display: block; height: .55rem; overflow: hidden; border-radius: 999px; background: #e4e4e7; }
.content .tcp-profile-chart td > span > b { display: block; height: 100%; border-radius: inherit; background: #60a5fa; }
.content .tcp-profile-chart td:nth-child(3) > span > b { background: #fb923c; }
.content .tcp-profile-chart td:nth-child(4) > span > b { background: #4ade80; }
.content .tcp-profile-note { display: block; margin: .7rem 0 0; color: #71717a; font-size: .82rem; line-height: 120%; }
@media (prefers-color-scheme: dark) {
  .content .tcp-profile-chart th, .content .tcp-profile-chart td { border-color: rgba(161, 161, 170, .28); }
  .content .tcp-profile-chart thead th { background: rgba(63, 63, 70, .6); }
  .content .tcp-profile-chart tbody th small, .content .tcp-profile-note { color: #a1a1aa; }
  .content .tcp-profile-chart td > span { background: #3f3f46; }
}
.article-narrow-copy .content > :not(p:has(> img)):not(img) {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.article-narrow-copy .content > p:has(> img) {
    max-width: none;
    text-align: center;
}

.article-narrow-copy .content > p:has(> img) img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.article-narrow-copy > header,
body:has(> article.article-narrow-copy) > header {
    width: 560px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.content img,
.content video {
    margin-top: 1rem;
    border-radius: 0.3rem;
}

.content img.content-image-expandable {
    cursor: zoom-in;
}

.content img.content-image-expandable:focus-visible {
    outline: 3px solid var(--accent-orange);
    outline-offset: 3px;
}

.content blockquote {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 0.5rem 1rem;
    background-color: #eceff489 !important;
    border-left: 0.3rem solid #8C52FF;
    border-radius: 0.3rem;
}
.content blockquote > p:first-child { margin-top: 0; }

@media (prefers-color-scheme: dark) {
    .content blockquote {
        background-color: #1F1F31 !important;
    }
}

.content .highlighter {
    background-color: #2d2d2d10;
    color: #ff6200;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, monospace;
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
    .content .highlighter {
        background-color: #2d2d2d;
        color: #ff8c00;
    }
}

a {
    color: var(--link-color);
    text-decoration: none;
}

.tool-link:hover {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
}

a.post-title-link {
    padding-bottom: 0.45rem;
    padding-top: 0.45rem;
    text-decoration: none;
    text-decoration-line: none;
}

a.post-title-link h2,
a.post-title-link h3 {
    border-bottom: 1px solid var(--index-link-border);
    font-size: 17px !important;
    line-height: 1.18;
    transition: border-color 150ms ease, color 150ms ease;
}

a.post-title-link:hover,
a.post-title-link:focus-visible {
    text-decoration: none;
    text-decoration-line: none;
}

a.post-title-link:hover h2,
a.post-title-link:hover h3,
a.post-title-link:focus-visible h2,
a.post-title-link:focus-visible h3 {
    border-bottom-color: var(--accent-orange);
    color: #000000 !important;
}

.blog-heading-link:hover h2 {
    color: var(--accent-orange);
}

@media (prefers-color-scheme: dark) {
    a.post-title-link:hover,
    a.post-title-link:focus-visible {
        text-decoration: none;
        text-decoration-line: none;
    }

    a.post-title-link:hover h2,
    a.post-title-link:hover h3,
    a.post-title-link:focus-visible h2,
    a.post-title-link:focus-visible h3 {
        color: #ffffff !important;
    }
}

.blog-post-star {
    color: var(--accent-orange);
    display: inline-block;
    font-size: 0.8em;
    line-height: 1;
    margin-left: 0.35rem;
    position: relative;
    top: -1px;
}

.blog-section-separator {
    background: var(--blog-section-separator);
    border: 0;
    height: 1px;
    margin: 2.25rem 0 !important;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.product-designer-section {
    width: min(640px, 100%);
}

.deferred-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

.product-designer-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-designer-card {
    aspect-ratio: 626 / 402;
    border-radius: 24px;
    color: #000;
    display: block;
    text-align: center;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: transform 180ms ease;
}

.product-designer-card:hover,
.product-designer-card:focus-visible {
    text-decoration: none;
    transform: translateY(-4px);
}

.product-designer-card h3 {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    left: 26px;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0;
    max-width: calc(100% - 52px);
    position: absolute;
    top: 22px;
    z-index: 2;
}

.product-designer-arrow {
    bottom: 28px;
    height: 40px;
    left: 26px;
    position: absolute;
    width: 40px;
    z-index: 2;
}

.product-designer-art {
    height: 100%;
    inset: 0;
    object-fit: cover;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.product-designer-card-portfolio {
    background-color: #f1eff0;
}

.product-designer-card-opera {
    background-color: #faeceb;
}

.product-designer-card-icons {
    background-color: #e8eff9;
}

.product-designer-card-waterlogue {
    background-color: #ecf4ef;
}

@media (max-width: 520px) {
    .product-designer-grid {
        gap: 18px;
        grid-template-columns: 1fr;
    }

    .product-designer-card {
        border-radius: 30px;
    }

    .product-designer-card h3 {
        font-size: clamp(28px, 7vw, 34px);
        left: 32px;
        max-width: calc(100% - 64px);
        top: 28px;
    }

    .product-designer-arrow {
        bottom: 36px;
        height: 58px;
        left: 32px;
        width: 58px;
    }
}

@media (max-width: 640px) {
    .blog-section-separator {
        margin: 1.35rem 0 !important;
    }
}

.freebsd-desktop-bubble {
    background-color: #1687f8;
    border-radius: 20px 20px 4px 20px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    margin-top: 1.75rem;
    max-width: 100%;
    padding: 0.6rem 1rem;
}

.article-author {
    color: #71717a;
    font-weight: 600;
    text-decoration: none;
}

.article-author:hover {
    color: #000;
    text-decoration: underline;
}

.list li {
    /* padding-left: 0.25rem; */
}


.highlight pre {
    overflow-x: auto;
    /* Enables horizontal scrolling */
    white-space: pre;
    /* Preserves whitespace and line breaks */
    max-width: 100%;
    /* Prevents overflow beyond container */
    padding: 1.5em;
    /* Optional: Adds padding for readability */
    box-sizing: border-box;
    /* Ensures padding doesn't cause overflow */
    background-color: #181818 !important;
    margin: 1em 0;
    border-radius: .5rem;
    font-family: "IBM Plex Mono", monospace;
    font-weight: normal !important;
    font-size: 0.8rem;
}

@media (prefers-color-scheme: dark) {
    .highlight pre {
        background-color: hsl(232, 20.3%, 6.4%) !important;
    }
}

.highlight code {
    display: block;
    text-align: center;
    /* Ensures code takes full width */
    white-space: pre;
    /* Preserves formatting */
}

div.highlight pre {
    overflow-x: auto !important;
}
.article-narrow-copy .content > p:has(> img[alt="ESP32 DNS filter"]) { max-width: 560px; }
.article-narrow-copy .content > p:has(> img[alt="ESP32 DNS filter"]) { max-width: 560px; margin-left: auto; margin-right: auto; }
body:has(> article.article-narrow-copy) > header { padding-left: 0; padding-right: 0; }

@media (max-width: 767px) {
    body:has(> article.article-esp32-ad-blocker) > header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}