/* ==========================================================================
   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);
}

/* 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);
}

/* 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;
}

/* ==========================================================================
   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";
}

/* Window control icon/dot - shared styles */
.highlight.language-console::after,
pre.language-console-remote::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 8px;
    width: 24px;
    height: 24px;
}


/* 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;
}

/* Add icon before custom title (home icon, green for local console) */
.highlight.language-console > .filename::before {
    content: "";
    position: absolute;
    top: 4px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a9a85'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 0;
}

/* Custom title icon - dark mode */
[data-md-color-scheme="cyberberry-dark"] .highlight.language-console > .filename::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d5a3d'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   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;
    }
}