/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
    /* Base Colors */
    --color-black:      #06001e;
    --color-white:      #fff;
    --color-dark:       #212134;
    --color-light:      #f4f1ff;

    /* Grayscale */
    --color-gray--0:    #f9f7ff;
    --color-gray--1:    #f4f1ff;
    --color-gray--2:    #e5def3;
    --color-gray--3:    #c8c2d9;
    --color-gray--4:    #9f9caf;
    --color-gray--5:    #7e7a91;
    --color-gray--6:    #4d4c68;
    --color-gray--7:    #403a60;
    --color-gray--8:    #383651;
    --color-gray--9:    #2b2b3a;

    /* Brand Colors */
    --color-red--uber:  #ce0058;
    --color-red--dark:  #6c1d45;
    --color-red--light: #e0457b;

    /* Accents */
    --color-green:      #47d7ac;
    --color-yellow:     #fffc9c;
    --color-blue:       #28c2ff;
    --color-pink:       #ff0068;
    --color-orange:     #ffca3a;
}

/* ==========================================================================
   THEME CONFIGURATION
   ========================================================================== */

/* Light Theme (cyberberry-light)
   -------------------------------------------------------------------------- */
[data-md-color-scheme="cyberberry-light"] {
    color-scheme: light;

    /* Material Design Overrides */
    --md-default-fg-color:        var(--color-gray--8);
    --md-default-fg-color--light: var(--color-red--dark);
    /* --md-default-fg-color--dark: var(--color-red--dark); */
    --md-primary-fg-color:        var(--color-black);
    --md-default-bg-color:        var(--color-white);
    --md-admonition-bg-color:     var(--color-gray--0);

    /* Links & Marks */
    --md-typeset-a-color:         var(--color-red--uber);
    --md-typeset-mark-color:      var(--color-red--light);

    /* Code Blocks */
    --md-code-fg-color:           var(--color-gray--9);
    --md-code-bg-color:           var(--color-gray--1);
}

/* Force classic (non-glass) header/tab coloring on MaterialX */
[data-md-color-scheme="cyberberry-light"] .md-header,
[data-md-color-scheme="cyberberry-light"] .md-tabs,
[data-md-color-scheme="cyberberry-light"] .md-nav--primary .md-nav__title[for="__drawer"],
[data-md-color-scheme="cyberberry-light"] .md-nav__source {
    background-color: var(--color-black) !important;
    color: var(--color-white);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Dark Theme (cyberberry-dark)
   -------------------------------------------------------------------------- */
[data-md-color-scheme="cyberberry-dark"] {
    color-scheme: dark;

    /* Material Design Overrides */
    --md-default-fg-color:        var(--color-light);
    --md-default-fg-color--light: var(--color-gray--3);
    --md-default-fg-color--dark:  var(--color-white);
    --md-primary-fg-color:        var(--color-black);
    --md-default-bg-color:        var(--color-black);

    /* Links & Marks */
    --md-typeset-a-color:         var(--color-red--light);
    --md-typeset-mark-color:      var(--color-red--dark);

    /* Admonitions */
    --md-admonition-fg-color:     var(--color-white);
    --md-admonition-bg-color:     var(--color-dark);

    /* Typography */
    --md-typeset-color:           var(--color-light);

    /* Code Blocks */
    --md-code-fg-color:           var(--color-light);
    --md-code-bg-color:           var(--color-gray--9);

    /* Tables */
    --md-typeset-table-color:     var(--color-gray--6);
}

/* Keep dark mode header/tab colors aligned with previous theme */
[data-md-color-scheme="cyberberry-dark"] .md-header,
[data-md-color-scheme="cyberberry-dark"] .md-tabs,
[data-md-color-scheme="cyberberry-dark"] .md-nav--primary .md-nav__title[for="__drawer"],
[data-md-color-scheme="cyberberry-dark"] .md-nav__source {
    background-color: var(--color-black) !important;
    color: var(--color-white);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Dark Theme Table Styles */
[data-md-color-scheme="cyberberry-dark"] .md-typeset table:not([class]) {
    background-color: var(--color-dark);
    border: 1px solid var(--color-gray--6);
}

[data-md-color-scheme="cyberberry-dark"] .md-typeset table:not([class]) th {
    background-color: var(--color-gray--8);
    color: var(--color-light);
    border-bottom: 1px solid var(--color-gray--6);
}

[data-md-color-scheme="cyberberry-dark"] .md-typeset table:not([class]) td {
    border-top: 1px solid var(--color-gray--7);
}

/* Dark Theme Tabs */
[data-md-color-scheme="cyberberry-dark"] .tabbed-labels > label {
    color: var(--color-gray--3);
}

[data-md-color-scheme="cyberberry-dark"] .tabbed-labels > label:hover {
    color: var(--color-light);
}

[data-md-color-scheme="cyberberry-dark"] .tabbed-set > input:checked + .tabbed-labels > label:first-child,
[data-md-color-scheme="cyberberry-dark"] .tabbed-labels > label[for]:has(+ input:checked) {
    color: var(--color-red--light);
    border-color: var(--color-red--light);
}

/* ==========================================================================
   SHARED STYLES & OVERRIDES
   ========================================================================== */

/* Light Theme Heading Colors */
[data-md-color-scheme="cyberberry-light"] h1,
[data-md-color-scheme="cyberberry-light"] h2,
[data-md-color-scheme="cyberberry-light"] h3,
[data-md-color-scheme="cyberberry-light"] h4 {
    color-scheme: light;
    color: var(--color-gray--8) !important;
}

[data-md-color-scheme="cyberberry-light"] h1 {
    color: var(--color-red--uber) !important;
}

/* Navigation
   -------------------------------------------------------------------------- */
.md-nav__item .md-nav__link:hover,
.md-nav__item .md-nav__link--active {
    color: var(--color-red--uber);
    font-weight: bold;
}

/* MaterialX dark mode: ensure selected nav entries stay visible */
[data-md-color-scheme="cyberberry-dark"] .md-nav__link--active,
[data-md-color-scheme="cyberberry-dark"] .md-nav__link--active .md-ellipsis {
    color: var(--color-red--uber) !important;
}

/* Remove code utility controls (copy/select buttons) */
.md-typeset .md-clipboard,
.md-typeset .md-code__button,
.md-typeset [class*="md-code__button"],
.md-typeset [class*="clipboard"] {
    display: none !important;
}

/* Fallback: hide any action control injected into code blocks */
.md-typeset .highlight button,
.md-typeset pre button,
.md-typeset .highlight [class*="copy"],
.md-typeset .highlight [class*="clipboard"],
.md-typeset .highlight [class*="select"],
.md-typeset pre [class*="copy"],
.md-typeset pre [class*="clipboard"],
.md-typeset pre [class*="select"] {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.md-typeset .md-clipboard::before,
.md-typeset .md-clipboard::after,
.md-typeset .md-code__button::before,
.md-typeset .md-code__button::after,
.md-typeset [class*="md-code__button"]::before,
.md-typeset [class*="md-code__button"]::after,
.md-typeset [class*="clipboard"]::before,
.md-typeset [class*="clipboard"]::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   SYNTAX HIGHLIGHTING
   ========================================================================== */

/* Light Theme Syntax
   -------------------------------------------------------------------------- */
[data-md-color-scheme="cyberberry-light"] .highlight span { color: var(--color-gray--9); }
[data-md-color-scheme="cyberberry-light"] .highlight .hll  { background-color: var(--color-gray--2); }
[data-md-color-scheme="cyberberry-light"] .highlight .o,
[data-md-color-scheme="cyberberry-light"] .highlight .p   { color: var(--color-gray--9); } /* Operators, Punctuation */

/* Comments */
[data-md-color-scheme="cyberberry-light"] .highlight .c,
[data-md-color-scheme="cyberberry-light"] .highlight .cd,
[data-md-color-scheme="cyberberry-light"] .highlight .cm,
[data-md-color-scheme="cyberberry-light"] .highlight .c1,
[data-md-color-scheme="cyberberry-light"] .highlight .cs { color: var(--color-gray--5); }

/* Keywords */
[data-md-color-scheme="cyberberry-light"] .highlight .k,
[data-md-color-scheme="cyberberry-light"] .highlight .kd,
[data-md-color-scheme="cyberberry-light"] .highlight .kn,
[data-md-color-scheme="cyberberry-light"] .highlight .kp,
[data-md-color-scheme="cyberberry-light"] .highlight .kr,
[data-md-color-scheme="cyberberry-light"] .highlight .kt { color: var(--color-red--uber); }

/* Strings */
[data-md-color-scheme="cyberberry-light"] .highlight .s,
[data-md-color-scheme="cyberberry-light"] .highlight .sb,
[data-md-color-scheme="cyberberry-light"] .highlight .sc,
[data-md-color-scheme="cyberberry-light"] .highlight .sd,
[data-md-color-scheme="cyberberry-light"] .highlight .s2,
[data-md-color-scheme="cyberberry-light"] .highlight .se,
[data-md-color-scheme="cyberberry-light"] .highlight .sh,
[data-md-color-scheme="cyberberry-light"] .highlight .si,
[data-md-color-scheme="cyberberry-light"] .highlight .sx,
[data-md-color-scheme="cyberberry-light"] .highlight .sr,
[data-md-color-scheme="cyberberry-light"] .highlight .s1,
[data-md-color-scheme="cyberberry-light"] .highlight .ss { color: var(--color-red--dark); }

/* Numbers */
[data-md-color-scheme="cyberberry-light"] .highlight .m,
[data-md-color-scheme="cyberberry-light"] .highlight .mb,
[data-md-color-scheme="cyberberry-light"] .highlight .mf,
[data-md-color-scheme="cyberberry-light"] .highlight .mh,
[data-md-color-scheme="cyberberry-light"] .highlight .mi,
[data-md-color-scheme="cyberberry-light"] .highlight .il,
[data-md-color-scheme="cyberberry-light"] .highlight .mo { color: var(--color-pink); }


/* Dark Theme Syntax
   -------------------------------------------------------------------------- */
[data-md-color-scheme="cyberberry-dark"] .highlight span { color: var(--color-light); }
[data-md-color-scheme="cyberberry-dark"] .highlight .hll  { background-color: var(--color-gray--8); }
[data-md-color-scheme="cyberberry-dark"] .highlight .o,
[data-md-color-scheme="cyberberry-dark"] .highlight .p   { color: var(--color-light); } /* Operators, Punctuation */

/* Comments */
[data-md-color-scheme="cyberberry-dark"] .highlight .c,
[data-md-color-scheme="cyberberry-dark"] .highlight .cd,
[data-md-color-scheme="cyberberry-dark"] .highlight .cm,
[data-md-color-scheme="cyberberry-dark"] .highlight .c1,
[data-md-color-scheme="cyberberry-dark"] .highlight .cs { color: var(--color-gray--4); }

/* Keywords */
[data-md-color-scheme="cyberberry-dark"] .highlight .k,
[data-md-color-scheme="cyberberry-dark"] .highlight .kd,
[data-md-color-scheme="cyberberry-dark"] .highlight .kn,
[data-md-color-scheme="cyberberry-dark"] .highlight .kp,
[data-md-color-scheme="cyberberry-dark"] .highlight .kr,
[data-md-color-scheme="cyberberry-dark"] .highlight .kt { color: var(--color-red--light); }

/* Strings */
[data-md-color-scheme="cyberberry-dark"] .highlight .s,
[data-md-color-scheme="cyberberry-dark"] .highlight .sb,
[data-md-color-scheme="cyberberry-dark"] .highlight .sc,
[data-md-color-scheme="cyberberry-dark"] .highlight .sd,
[data-md-color-scheme="cyberberry-dark"] .highlight .s2,
[data-md-color-scheme="cyberberry-dark"] .highlight .se,
[data-md-color-scheme="cyberberry-dark"] .highlight .sh,
[data-md-color-scheme="cyberberry-dark"] .highlight .si,
[data-md-color-scheme="cyberberry-dark"] .highlight .sx,
[data-md-color-scheme="cyberberry-dark"] .highlight .sr,
[data-md-color-scheme="cyberberry-dark"] .highlight .s1,
[data-md-color-scheme="cyberberry-dark"] .highlight .ss { color: var(--color-green); }

/* Numbers */
[data-md-color-scheme="cyberberry-dark"] .highlight .m,
[data-md-color-scheme="cyberberry-dark"] .highlight .mb,
[data-md-color-scheme="cyberberry-dark"] .highlight .mf,
[data-md-color-scheme="cyberberry-dark"] .highlight .mh,
[data-md-color-scheme="cyberberry-dark"] .highlight .mi,
[data-md-color-scheme="cyberberry-dark"] .highlight .il,
[data-md-color-scheme="cyberberry-dark"] .highlight .mo { color: var(--color-orange); }


/* ==========================================================================
   CONSOLE/TERMINAL STYLING
   ========================================================================== */

/* Terminal window container */
.highlight.language-console,
pre.language-console-remote {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--color-gray--6);
    margin: 1rem 0;
    overflow: hidden;
}

/* Terminal title bar with window controls */
.highlight.language-console::before,
pre.language-console-remote::before {
    display: block;
    height: 32px;
    background:
        radial-gradient(circle at 18px 16px, #9f9caf 6px, transparent 6px),
        #e5def3;
    border-bottom: 1px solid #c8c2d9;
    position: relative;
    color: #4d4c68;
    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
    font-size: 0.65rem;
    line-height: 32px;
    text-align: left;
    padding-left: 28px;
}

/* Terminal title bar - dark mode */
[data-md-color-scheme="cyberberry-dark"] .highlight.language-console::before,
[data-md-color-scheme="cyberberry-dark"] pre.language-console-remote::before {
    background:
        radial-gradient(circle at 18px 16px, var(--color-gray--5) 6px, transparent 6px),
        var(--color-gray--8);
    border-bottom: 1px solid var(--color-gray--6);
    color: var(--color-gray--4);
}

/* Terminal header text - local */
.highlight.language-console::before {
    content: "localuser@localhost: ~ - Terminal";
}

/* Terminal header text - remote */
pre.language-console-remote::before {
    content: "isabell@moondust: ~ - ssh moondust.uberspace.de";
}

/* Remove terminal corner decoration/dot */
.highlight.language-console::after,
pre.language-console-remote::after {
    content: none !important;
    display: none !important;
}


/* Terminal code area */
.highlight.language-console code,
pre.language-console-remote code {
    display: block;
    padding: 0.5rem;
    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
    font-size: 0.65rem;
    line-height: 1.6;
}


/* Trailing prompt line */
.highlight.language-console code::after,
pre.language-console-remote code::after {
    white-space: pre;
    color: var(--md-code-fg-color);
}


pre.language-console-remote code::after {
    content: "\A[isabell@moondust ~]$ ";
}

/* Remove default pre padding/margin that causes white borders */
.highlight.language-console pre {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Custom title support: hide default header and dot when title is provided */
.highlight.language-console:has(.filename)::before,
.highlight.language-console:has(.filename)::after {
    display: none !important;
    content: none !important;
}

/* Style custom title to match terminal header */
.highlight.language-console > .filename {
    display: block !important;
    height: 32px !important;
    background:
        radial-gradient(circle at 18px 16px, #9f9caf 6px, transparent 6px),
        #e5def3 !important;
    border-bottom: 1px solid #c8c2d9 !important;
    border-radius: 0 !important;
    color: #4d4c68 !important;
    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace !important;
    font-size: 0.65rem !important;
    font-weight: normal !important;
    line-height: 32px !important;
    text-align: left !important;
    padding: 0 0 0 28px !important;
    margin: 0 !important;
    position: relative !important;
}

/* Custom title - dark mode */
[data-md-color-scheme="cyberberry-dark"] .highlight.language-console > .filename {
    background:
        radial-gradient(circle at 18px 16px, var(--color-gray--5) 6px, transparent 6px),
        var(--color-gray--8) !important;
    border-bottom: 1px solid var(--color-gray--6) !important;
    color: var(--color-gray--4) !important;
}

/* Remove custom filename right-corner icon/dot entirely */
.highlight.language-console > .filename::before,
.highlight.language-console > .filename::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   LAYOUT & MEDIA QUERIES
   ========================================================================== */

#bigcyberberry {
    display: none;
}

/* Desktop Styles & Rocket Layout
   Note: break points taken from theme
   ~ 1220px */
@media screen and (min-width: 76.25em) {

    /* Hide default logo/title elements */
    .md-nav__title,
    .md-header .md-logo,
    .md-header__topic {
        display: none;
    }

    .md-nav__title .md-nav__button {
        display: block;
    }

    /* Rocket graphic */
    #bigcyberberry {
        display: block;
        position: absolute;
        left: calc(((100vw - 61rem) / 2) + 2.75rem);
        top: -0.5rem;
        z-index: 5;
        transform: rotate(30deg);
        max-width: none;
        object-fit: none;
    }

    /* Layout adjustments for rocket */
    .md-main__inner {
        margin-top: 2rem;
    }

    .md-main__inner article {
        padding-top: 0;
    }

    .md-main__inner article > h1 {
        padding-left: 2rem;
    }

    .md-sidebar {
        margin-top: 8rem;
        margin-bottom: 4rem;
        z-index: 10;
    }

    /* Adjust sidebar scroll area height to stop before footer */
    .md-sidebar__scrollwrap {
        max-height: calc(100vh - 8rem - 4rem - 3rem) !important;
    }

    /* Ensure footer is above sidebar */
    .md-footer {
        position: relative;
        z-index: 11;
    }

    /* Sidebar Title Style */
    .md-sidebar .md-nav--primary > .md-nav__list > li:first-child {
        font-size: large;
    }
}

/* Large Screens (~ 1600px) */
@media screen and (min-width: 100em) {
    .md-sidebar {
        margin-top: 7rem;
    }
    .md-sidebar__scrollwrap {
        max-height: calc(100vh - 7rem - 4rem - 3rem) !important;
    }
}

/* Extra Large Screens (~ 2000px) */
@media screen and (min-width: 125em) {
    .md-sidebar {
        margin-top: 6rem;
    }
    .md-sidebar__scrollwrap {
        max-height: calc(100vh - 6rem - 4rem - 3rem) !important;
    }
}