/* Omni Theme */
:root {
    --code-bg: #1f1c27;                /* BG - Main background */
    --code-border: #5a4c80;            /* CYAN (purple) - Border accent */
    --code-text: #e0e0e5;              /* FG - Main text */
    --code-keyword: #ff78c5;           /* PINK - Keywords */
    --code-string: #e6dd78;            /* YELLOW - Strings */
    --code-number: #77d0e0;            /* PURPLE - Numbers */
    --code-comment: #5a4c80;           /* COMMENT - Comments */
    --code-function: #67e37f;          /* GREEN - Functions */
    --code-class: #978ac6;             /* CYAN - Classes */
    --code-operator: #ff78c5;          /* PINK - Operators */
    --code-variable: #e0e0e5;          /* FG - Variables */
    --code-punctuation: #e0e0e5;       /* FG - Punctuation */
    --code-tag: #ff78c5;               /* PINK - HTML tags */
    --code-attribute: #67e37f;         /* GREEN - Attributes */
    --code-copy-btn: #5a4c80;          /* SELECTION - Button bg */
    --code-copy-btn-hover: #695b90;    /* COMMENT - Button hover */
    --code-title-bg: #252131;          /* BGLight - Title bar */
}

#hero {
    height: 60vh;
    background-color: var(--color-primary);
    padding: 4rem;
    padding-top: 160px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

article {
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
}

article #main {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.post-image {
    display: block;
    margin: 1.5rem auto;
    width: 100%;
    max-width: 70%; /* match content width */
}
.post-image picture {
    display: block;
}
.post-image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}
.post-image figcaption {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

#portfolio-meta {
    width: 70%;
    margin: 0 auto 2rem auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.portfolio-meta-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.portfolio-meta-item .meta-label {
    font-weight: 700;
    display: inline-flex;
    gap: 0.25rem;
    align-items: baseline;
}

article #main h1 { font-size: 2.25rem; }
article #main p, article #main li { font-size: 1.25rem; opacity: 0.9; }

article #main #verdict {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 2rem;
}
article #main #verdict-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
article #main #verdict-graph {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
article #main #verdict-text p, article #main #verdict-text li { font-size: 1.25rem; opacity: 0.9; }

#author {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0.5rem; margin-top: 1rem;
}
#author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

#heroContent { max-width: 40%; }

#heroArticle-image {
    width: 800px;
    height: 600px;
    object-fit: cover;
    border-radius: 1rem;
}

#youtube-tooltip {
    position: fixed;
    display: none;
    padding: 1rem;
    border-radius: 2rem;
    background-color: var(--color-primary);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
#youtube-tooltip.show { display: block; opacity: 1; pointer-events: auto; }
#youtube-tooltip a { text-decoration: none; }
#youtube-tooltip a img {
    width: 256px;
    height: 144px;
    border-radius: 1rem;
    object-fit: cover;
}
#youtube-tooltip a h3 { font-family: 'Nunito Extrabold', sans-serif; }
#youtube-tooltip a h3, #youtube-tooltip a h4 { 
    max-width: 256px; 
    margin: 0.5rem 0 0 0; 
}

#verdict-graph {
    position: relative;
    background-color: var(--color-primary);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border: 2px solid var(--color-onPrimary-dark);
}

.verdict-info-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--color-onPrimary-dark);
    color: var(--color-text-special);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito Semibold', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.verdict-info-icon:hover {
    background-color: var(--color-highlight);
    color: white;
}
.verdict-info-icon > svg {
    width: 80%;
    height: 80%;
    fill: var(--color-text-special);
}

.verdict-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-text-special);
}
#verdict-score-value {
    font-family: 'Nunito Extrabold', sans-serif;
    font-size: 4rem;
    color: var(--color-highlight);
}
.verdict-score-label {
    font-family: 'Nunito Semibold', sans-serif;
    font-size: 1.2rem;
    color: var(--color-text-special);
    margin-top: -0.5rem;
}

.verdict-bars {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.verdict-bar-item {
    display: grid;
    grid-template-columns: 25% 60% 15%;
    align-items: center;
    gap: 0.5rem;
}
.verdict-bar-label {
    font-family: 'Nunito Semibold', sans-serif;
    font-size: 0.9rem;
    color: white;
    text-align: right;
}
.verdict-bar-container {
    height: 1.5rem;
    background-color: var(--color-background);
    border-radius: 0.75rem;
    overflow: hidden;
}
.verdict-bar {
    height: 100%;
    border-radius: 0.75rem;
    background: linear-gradient(90deg, var(--color-highlight), #C362F0);
    transition: width 0.5s ease;
}
.verdict-bar-value {
    font-family: 'Nunito Extrabold', sans-serif;
    font-size: 1.2rem;
    color: white;
    text-align: center;
}

.verdict-bargraph-0 { width: 0%; }
.verdict-bargraph-1 { width: 20%; }
.verdict-bargraph-2 { width: 40%; }
.verdict-bargraph-3 { width: 60%; }
.verdict-bargraph-4 { width: 80%; }
.verdict-bargraph-5 { width: 100%; }

#verdict-weights-dialog {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(13, 9, 14, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#verdict-weights-dialog.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}
#verdict-weights-dialog.closing {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.verdict-dialog-container {
    background-color: var(--color-primary);
    border: 2px solid var(--color-onPrimary-dark);
    border-radius: 1rem;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}
#verdict-weights-dialog.active .verdict-dialog-container {
    transform: translateY(0);
    opacity: 1;
}
#verdict-weights-dialog.closing .verdict-dialog-container {
    transform: translateY(20px);
    opacity: 0;
}

.verdict-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-onPrimary-dark);
}
.verdict-dialog-header h2 {
    font-family: 'Nunito Extrabold', sans-serif;
    color: var(--color-highlight);
    margin: 0;
}

.dialog-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-special);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}
.dialog-close:hover {
    background-color: var(--color-onPrimary-dark);
    color: white;
}

.verdict-dialog-content {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.verdict-dialog-content p {
    color: var(--color-text-special);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.weight-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.weight-input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}
.weight-input-row label {
    flex: 1;
    font-family: 'Nunito Semibold', sans-serif;
}
.weight-input-row input {
    width: 100px;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-background);
    border: 1px solid var(--color-onPrimary-dark);
    border-radius: 0.5rem;
    color: white;
    text-align: center;
    font-family: 'Nunito Semibold', sans-serif;
}

.weight-input-row input[type="number"]::-webkit-inner-spin-button,
.weight-input-row input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.weight-input-row input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.weight-total {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-onPrimary-dark);
    font-family: 'Nunito Extrabold', sans-serif;
    color: var(--color-highlight);
}
#weight-error {
    background-color: rgba(255, 69, 58, 0.15);
    color: #ff453a;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    text-align: center;
}

.verdict-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-onPrimary-dark);
}
.dialog-btn {
    padding: 0.5rem 1rem;
    background-color: var(--color-background);
    border: 1px solid var(--color-onPrimary-dark);
    border-radius: 0.5rem;
    color: white;
    font-family: 'Nunito Semibold', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dialog-btn:hover { background-color: var(--color-onPrimary-dark); }
.dialog-btn.primary {
    background-color: var(--color-highlight);
    border: none;
}
.dialog-btn.primary:hover { background-color: #9e1ec8; }
.dialog-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-background);
}
.dialog-btn:disabled:hover { background-color: var(--color-background); }

#cookie-consent-dialog {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(13, 9, 14, 0.85);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#cookie-consent-dialog.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}
#cookie-consent-dialog.closing {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cookie-dialog-container {
    background-color: var(--color-primary);
    border: 2px solid var(--color-onPrimary-dark);
    border-radius: 1rem;
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
#cookie-consent-dialog.active .cookie-dialog-container {
    transform: translateY(0);
    opacity: 1;
}
#cookie-consent-dialog.closing .cookie-dialog-container {
    transform: translateY(20px);
    opacity: 0;
}
.cookie-dialog-content { padding: 1.5rem; }
.cookie-dialog-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-onPrimary-dark);
}

#toast-notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-highlight);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1001;
}
#toast-notification.show { opacity: 1; }
body.no-scroll { overflow: hidden; }
.hidden { display: none; }

code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--code-border);
    border-radius: 0.25rem;
    background-color: var(--code-bg);
    color: var(--code-text);
}

/* Copyable inline code - same styling but with copy button */
code.copyable-inline {
    position: relative;
    display: inline;
    padding-right: 2rem; /* Make room for button */
}

code.copyable-inline .copy-btn {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7566a3; /* Lighter purple for inline code copy button */
    transition: color 0.2s ease;
    opacity: 0.8;
}

code.copyable-inline .copy-btn:hover {
    color: #988bc7; /* Brighter purple on hover */
    opacity: 1;
}

code.copyable-inline .copy-btn.copied {
    color: #988bc7; /* Keep hover color when copied */
    cursor: pointer;
    opacity: 1;
}

code.copyable-inline .copy-btn svg {
    width: 14px;
    height: 14px;
}

.code-block {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
}

.code-title {
    background-color: var(--code-title-bg);
    padding: 0.5rem 3.5rem 0.5rem 1rem; /* Extra padding on right for copy button */
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1; /* Prevent text from expanding height */
    color: var(--code-text);
    border-bottom: 1px solid var(--code-border);
    min-height: calc(16px + 0.8rem); /* Match button height: 16px icon + 0.8rem padding */
    display: flex;
    align-items: center;
}

.code-header {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

.code-block .copy-btn {
    background-color: var(--code-copy-btn);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--code-text);
    transition: background-color 0.2s ease;
    opacity: 0.8;
}

.code-block .copy-btn:hover {
    background-color: var(--code-copy-btn-hover);
    opacity: 1;
}

.code-block .copy-btn:active {
    opacity: 0.9;
}

.code-block .copy-btn.copied {
    background-color: var(--code-copy-btn-hover);
    cursor: pointer;
    opacity: 1;
}

.code-block .copy-btn svg {
    width: 16px;
    height: 16px;
}

.code-block pre {
    margin: 0;
    padding: 1rem;
    padding-right: 3rem; /* Make room for copy button */
    overflow-x: auto;
    background-color: var(--code-bg);
}

.code-block pre code {
    display: block;
    padding: 0;
    border: none;
    background: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--code-text);
}

/* Syntax highlighting classes for highlight.js */
.hljs-keyword { color: var(--code-keyword); }
.hljs-string { color: var(--code-string); }
.hljs-number { color: var(--code-number); }
.hljs-comment { color: var(--code-comment); }
.hljs-function { color: var(--code-function); }
.hljs-class { color: var(--code-class); }
.hljs-title { color: var(--code-function); }
.hljs-built_in { color: var(--code-function); }
.hljs-operator { color: var(--code-operator); }
.hljs-variable { color: var(--code-variable); }
.hljs-punctuation { color: var(--code-punctuation); }
.hljs-tag { color: var(--code-tag); }
.hljs-attr { color: var(--code-attribute); }
.hljs-attribute { color: var(--code-attribute); }
.hljs-name { color: var(--code-tag); }
.hljs-params { color: var(--code-variable); }
.hljs-literal { color: var(--code-number); }
.hljs-meta { color: var(--code-comment); }
.hljs-selector-tag { color: var(--code-tag); }
.hljs-selector-class { color: var(--code-class); }
.hljs-selector-id { color: var(--code-class); }
.hljs-type { color: var(--code-class); }
.hljs-property { color: var(--code-variable); }
.hljs-subst { color: var(--code-variable); }

.copy-btn.copied svg {
    animation: copySuccess 0.3s ease;
}

@keyframes copySuccess {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@media screen and (max-width: 1200px) {
    article #main { width: 100%; }
}

@media screen and (max-width: 900px) {
    article #main #verdict {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
}

@media screen and (max-width: 768px) {
    #hero {
        min-height: 40vh;
        padding: 2rem;
        padding-top: 160px;
        flex-direction: column;
        gap: 2rem;
    }
    #hero picture, #hero picture img { width: 384px; height: 288px; }
    #hero.square picture, #hero.square picture img { width: 256px; height: 256px; }
    #heroContent { max-width: 100%; }
    article { padding: 2rem; }
    article #main { width: 100%; }
    article #main h1 { font-size: 1.5rem; }
    article #main p { font-size: 1rem; }
    
    article #main #verdict { grid-template-columns: 1fr; }
    .verdict-bar-item { grid-template-columns: 35% 50% 15%; }
    .verdict-bar-label { font-size: 0.8rem; }
    #verdict-score-value { font-size: 3rem; }
    
    .verdict-dialog-container { max-height: 80vh; }
    .weight-input-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .weight-input-row input { width: 100%; }
}

@media screen and (max-width: 480px) {
    #hero picture, #hero picture img { width: 256px; height: 192px; }
    #hero.square picture, #hero.square picture img { width: 192px; height: 192px; }
}

/* Article comments section */
.article-comments {
    width: 70%;
    margin: 3rem auto 0 auto;
}

@media screen and (max-width: 1024px) {
    .article-comments {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    .article-comments {
        width: 100%;
    }
}