/* Custom Styling for cli.ph */

/* Color scheme: Warm earthy tones - override theme's media query */
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #D8D8D3;           /* timberwolf - warm light background */
        --font-color: #3D382E;                 /* black-olive - dark earthy text */
        --invert-font-color: #D8D8D3;          /* timberwolf - for text on dark backgrounds */
        --primary-color: #4F3F31;              /* taupe - links, cursor, accents */
        --secondary-color: #ABA79E;            /* silver - nav links, borders */
        --code-bg-color: #BAAF9F;              /* khaki - code block backgrounds */
        --progress-bar-background: #ABA79E;    /* silver */
        --progress-bar-fill: #4F3F31;          /* taupe */
        --display-h1-decoration: none;         /* disable theme's h1 underline */
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1a1815;           /* much darker - terminal screen black */
        --font-color: #D8D8D3;                 /* timberwolf - light text */
        --invert-font-color: #1a1815;          /* dark - for text on light backgrounds */
        --primary-color: #BAAF9F;              /* khaki - links, cursor, accents (lighter for dark bg) */
        --secondary-color: #ABA79E;            /* silver - nav links, borders */
        --code-bg-color: #2d2820;              /* darker taupe - code block backgrounds */
        --progress-bar-background: #4F3F31;    /* taupe */
        --progress-bar-fill: #BAAF9F;          /* khaki */
        --display-h1-decoration: none;         /* disable theme's h1 underline */
    }
}

/* Body text typography - override theme's monospace defaults */
.terminal {
    font-size: 20px;
    line-height: 1.7em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Make terminal prompt much larger and give it breathing room */
/* Need higher specificity to override .terminal .logo from terminal.css */
.terminal .logo,
.terminal .terminal-prompt {
    font-size: 48px;
    font-family: monospace;  /* Keep monospace for CLI aesthetic */
    margin-bottom: 2em;
}

/* Override cursor to keep it as a proper box - scales with font size */
.terminal .terminal-prompt::after {
    content: "";
    animation: cursor 800ms infinite;
    -webkit-animation: cursor 800ms infinite;
    background: var(--primary-color);
    border-radius: 0;
    display: inline-block;
    height: 1em;
    margin-left: 0.2em;
    width: 0.875em;        /* 28px at 32px font-size, scales proportionally */
    bottom: -0.16em;       /* -5px at 32px font-size, scales proportionally */
    position: relative;
}

/* Make headings much bigger and more fun */
.terminal h1 {
    font-size: 48px;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-bottom: 0.25em;
    border-bottom: 2px solid var(--secondary-color);
}

.terminal h2 {
    font-size: 32px;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

.terminal h3 {
    font-size: 24px;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
}

/* Mobile breakpoint: scale down appropriately */
@media only screen and (max-width: 850px) {
    /* Mobile: smaller body text */
    .terminal {
        font-size: 18px;
    }

    .terminal h1 {
        font-size: 36px;
        margin-top: 0.75em;
        margin-bottom: 0.75em;
    }

    .terminal .logo,
    .terminal .terminal-prompt {
        font-size: 32px;
        margin-bottom: 1.5em;
    }

    .terminal h2 {
        font-size: 24px;
        margin-top: 1.25em;
        margin-bottom: 0.5em;
    }

    .terminal h3 {
        font-size: 20px;
        margin-top: 1em;
        margin-bottom: 0.4em;
    }
}