/* Code & tools showcase section */
.code-tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 1.5rem;
}
.code-block-view, .code-tip-view{
    padding: 10px;
    background-color: var(--card-tooltip);
    border-radius: 4px;
    box-shadow: 0 0 5px var(--accent);
    margin-top: 2px;
}
.light .code-block-view, .light .code-tip-view{
    background-color: var(--muted); 
}
.ecstatic .code-block-view, .ecstatic .code-tip-view{
  box-shadow:
    0 0 2px #0f0, 
    0 0 5px #0f0,
    0 0 10px #0f0;
}
@media (min-width: 992px) {
    .code-tools-grid {
        /* Desktop: 2/3 (Code Viewer) and 1/3 (Icons) */
        grid-template-columns: 2fr 1fr; 
    }
}
.code-copy-target {
    cursor: pointer;
}
.syntax-dot-dash{color:#fff;font-weight:bold;}
.light .syntax-dot-dash{color:#FF8800;font-weight:bold;}
.js-comment{font-style:italic;font-weight:bold;}
.light .html-comment{font-style:italic;font-weight:bold;}
.light .css-comment{font-style:italic;font-weight:bold;}
.light .js-comment{font-style:italic;font-weight:bold;}

/* Behrry Dark Theme CSS */
:root { 
    --html-tag-name: #0f0;
    --html-bracket: var(--accent);
    --html-attribute-name: #FF8800;
    --html-attribute-value: #2EFFC9;
    --html-comment: #6688AA;
    --html-operator: var(--accent);
    
    --css-selector: var(--accent);
    --css-colon: var(--accent);
    --css-property-name: var(--accent-2); 
    --css-property-value: #ccffff;
    --css-comment: var(--muted);
    
    --js-keyword:  var(--accent);
    --js-string:  var(--accent-2);
    --js-comment: #6688AA;
}

/* --- Light Theme  */
.light {
    --html-tag-name: #8B4513;
    --html-bracket: #ff0;
    --html-attribute-name: #CC9900;
    --html-attribute-value: #ccffff;
    --html-comment: #6a4e00;
    --html-operator: #006699;

    --css-selector: var(--accent);
    --css-colon: #6a4e00;
    --css-property-name: #8B4513;
    --css-property-value: var(--text-dark);
    --css-comment: #6a4e00;

    --js-keyword: #8B4513;
    --js-string: #008080;
    --js-comment: #6a4e00;
}

/* Ecstatic Theme */
.ecstatic {
    --html-tag-name: #ff00a0;
    --html-bracket: #00ffff;
    --html-attribute-name: #ffff00;
    --html-attribute-value: #00ff00;
    --html-comment: #33ffcc;
    --html-operator: #00ffff;

    --css-selector: #ff0000;
    --css-colon: #00ffff;
    --css-property-name: #00ffff;
    --css-property-value: #ff00ff;
    --css-comment: #33ffcc;

    --js-keyword: #ff00ff;
    --js-string: #ffff00;
    --js-comment: #33ffcc;
}

/* Web language syntax classes */
.html-tag-name{color:var(--html-tag-name);}
.html-bracket{color:var(--html-bracket);}
.light .html-bracket{text-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);}
.html-attribute-name{color:var(--html-attribute-name);}
.html-attribute-value{color:var(--html-attribute-value);}
.html-comment{color:var(--html-comment);font-style:italic;}
.html-operator{color:var(--html-operator);}

.css-selector{color:var(--css-selector);font-weight:bold;}
.css-colon{color:var(--css-colon);}
.css-property-name{color:var(--css-property-name);}
.css-property-value{color:var(--css-property-value);}
.css-comment{color:var(--css-comment);font-style:italic;}

/* double check */
/*.light .css-selector,
.light .css-colon,
.light .css-property-name,
.light .css-property-value,
.light .css-comment{text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);}*/
.light .code-block-view{text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);}

.js-keyword{color:var(--js-keyword);font-weight:bold;}
.js-string{color:var(--js-string);}
.js-comment{color:var(--js-comment);font-style:italic;}

.light .js-comment{font-weight:bold;}
:root {
    --code-bg: transparent;
    --code-text: var(--text);
    
    --syntax-text: var(--text);
    --syntax-command: #FFF100;
    --syntax-tag: #00997B;
    --syntax-defname: var(--accent);
    --syntax-op: var(--accent);
    --syntax-quote: var(--accent-2);
    --syntax-key: #56BE1E;
    --syntax-key-inline: #59FF00;
    
    --syntax-comment-norm: #00564A;
    --syntax-comment-header: #326F12;
    --syntax-comment-code: #686300;
    --syntax-comment-todo: #DD5500;
    
    --syntax-required: var(--accent);
    --syntax-optional: var(--accent-2);
    --syntax-default: #88DDFF;
    --syntax-fillable: var(--syntax-tag);
}

.light {
    --code-bg: var(--card-tooltip);
    --code-text: var(--text-dark);

    --syntax-text: var(--text-dark);
    --syntax-command: #ff0;
    --syntax-tag: #DD5500;
    --syntax-defname: var(--accent);
    --syntax-op: var(--text-dark);
    --syntax-quote: var(--accent);
    --syntax-key: #bd4800;
    --syntax-key-inline: #DD5500;
    
    --syntax-comment-norm: var(--accent-2);
    --syntax-comment-header: #808000;
    --syntax-comment-todo: #6a4e00;

    --syntax-required: #0000cc;
    --syntax-optional: var(--muted);
    --syntax-default: #0088dd;
    --syntax-fillable: var(--syntax-tag);
}

.ecstatic {
    --code-bg: transparent;
    --code-text: var(--text);
    
    --syntax-text: var(--text);
    --syntax-command: #ff0;
    --syntax-tag: #0ff;
    --syntax-defname: var(--accent);
    --syntax-op: var(--accent-2);
    --syntax-quote: #0ff;
    --syntax-key: #0f0;
    --syntax-key-inline: rgb(127, 255, 0);
    
    --syntax-comment-norm: rgb(0, 149, 0);
    --syntax-comment-header: #00ff00;
    --syntax-comment-todo: #ffff00;

    --syntax-required: var(--accent);
    --syntax-optional: var(--accent-2);
    --syntax-default: #ff00ff;
    --syntax-fillable: var(--muted);
}

/* General code element styles */
pre code {
    background-color: transparent !important;
    border: none !important;                 
    padding: 0 !important;                   
    white-space: pre;                        
    font-size: 0.8rem;
}

code {
    font-size: 0.8rem;
    font-family: 'Consolas', monospace;
    white-space: nowrap; 
    
}

p code {
    padding: 2px 4px;
    background-color: var(--card-tooltip); 
    color: var(--accent); 
    border: 1px solid var(--accent-2); 
    font-size: 0.8rem;
    border-radius: 4px;
}

.light p code {
  background-color: hsla(44, 100%, 21%, 0.3);
}

.code-tip-view {
    margin-top: var(--gap);
    display: flex;
    align-items: center;
    gap: 20px;
}

.tip-icon-wrapper {
    font-size: 2.5em;
    color: var(--accent);
    flex-shrink: 0;
}

.tip-body {
    flex-grow: 1;
}

.tip-body h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.tip-body p {
    margin-bottom: 0;
}

.thumbnail-tab-container .tab-panel {
  box-shadow: none;
}

/* DenizenScript syntax classes */
.script_text{color: var(--syntax-text);}
.script_tag{color: var(--syntax-tag);}
.script_def_name{color: var(--syntax-defname);}
.script_colon, .script_operator{color: var(--syntax-op);}
.script_tag_dot{color: var(--syntax-text);font-weight:bold;}
.script_tag_param, .script_tag_param_bracket{color: var(--syntax-op);}
.script_key{color: var(--syntax-key);}
.script_key_inline{color: var(--syntax-key-inline);font-style:italic;}

.script_command, .syntax_command{color: var(--syntax-command);font-style:italic;}
.script_quote_single, .script_quote_double{color: var(--syntax-quote);}

.script_comment_normal{color: var(--syntax-comment-norm);}
.script_comment_header{color: var(--syntax-comment-header);}
.script_comment_code{color: var(--syntax-comment-norm);}
.script_comment_todo{color: var(--syntax-comment-todo);font-weight:bold;}

.syntax_required{color: var(--syntax-required);font-weight:bold;}
.syntax_optional{color: var(--syntax-optional);}
.syntax_default{color: var(--syntax-default);}
.syntax_fillable{color: var(--syntax-fillable);}
.syntax_list{color: var(--syntax-text);}