/**
 * Isan's Auxiliary Functions
 * Stylesheet
 *
 * Custom UI components:
 * - Sidebar buttons
 * - Navigation interactions
 * - Clock widget
 * - IBM Plex Mono font
 *
 * Author: Isan Pradhan
 * Version: 1.0
 */

html {
    scrollbar-gutter: stable;
}
html,
body {
    min-height: 100%;
    transition: background-color .12s ease,
        color .1s ease;
}
.has-base-background-color {
    transition: background-color .12s ease;
}

.wp-site-blocks {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wp-site-blocks > footer {
    margin-top: auto;
}

/* Light theme */
html.light {
    color-scheme: light;
    --wp--preset--color--base: #F8F7F5;
    --wp--preset--color--contrast: #191919;
    --wp--preset--color--accent-1: #FFFFFF;
    --wp--preset--color--accent-3: #191919;
    --wp--preset--color--accent-4: #5F5F5F;
    --selection-bg: rgba(231, 255, 45, 0.35);
    --selection-text: #101510;
    --selection-glow: rgba(197,139,53,.35);
}

/* Dark theme */
html.dark {
    color-scheme: dark;
    --wp--preset--color--base: #191919;
    --wp--preset--color--contrast: #F8F7F5;
    --wp--preset--color--accent-1: #2A2A2A;
    --wp--preset--color--accent-3: #F8F7F5;
    --wp--preset--color--accent-4: #B5B5B5;
    --selection-bg: rgba(43, 38, 109, 0.38);
    --selection-text: #dff2ff;
    --selection-glow: rgba(103, 110, 237, 0.35);
}

.wp-site-blocks ::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
    text-shadow: 0 0 8px var(--selection-glow);
}
.isan-rotating-image {
    max-width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    height: auto;
}

@media (max-width: 700px) {

    .footer-nav {
        display: none;
    }

}



.wp-block-navigation__responsive-container::before {
    background: var(--selection-bg);
}

a {
    transition:
        background-color .18s ease,
        color .18s ease;

    border-radius:3px;
    padding-inline:.15em;
}

a:hover {
    background-color:
        color-mix(
            in srgb,
            currentColor 8%,
            transparent
        );
}

.wp-block-post-content a {
    transition:
        background-color .18s ease,
        color .18s ease;

    border-radius:3px;
    padding-inline:.15em;

    text-decoration:none;
}

.wp-block-post-content a:hover {
    background-color:
        color-mix(
            in srgb,
            currentColor 8%,
            transparent
        );
}

.wp-block-post-content a:active {
    background-color:
        color-mix(
            in srgb,
            currentColor 14%,
            transparent
        );
}

.wp-block-post-content a:visited {
    color:
        color-mix(
            in srgb,
            currentColor 75%,
            var(--wp--preset--color--accent-2)
        );
}

@keyframes caret-blink {
    50% {
        opacity:0;
    }
}


@font-face {
    font-family: "IBM Plex Mono";
    src: url("/wp-content/plugins/isan-aux-funcs/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("/wp-content/plugins/isan-aux-funcs/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
.isan-button-links {
    border-radius:0px;
    vertical-align: top;
    display: inline-block;
    padding: 1px 7px 3px 7px;
    margin-bottom: 2px;
    border: solid currentColor;
    border-width: 1px 4px 4px 1px;
    text-decoration: none;
    transition:
        transform 70ms linear,
        background 10ms linear,
        clip-path 70ms linear;
    clip-path: polygon(
        0 0,
        calc(100% - 3px) 0,
        100% 3px,
        100% 100%,
        3px 100%,
        0 calc(100% - 3px)
    );
    background-color: var(--wp--preset--color--accent-1);
}
.isan-button-links:hover,
.isan-button-links:focus-visible {
    transform: translate(1px,1px);
    clip-path: polygon(
        0 0,
        calc(100% - 3px) 0,
        calc(100% - 1px) 2px,
        calc(100% - 1px) calc(100% - 1px),
        2px calc(100% - 1px),
        0 calc(100% - 3px)
    );
    background: color-mix(
        in srgb,
        currentColor 5%,
        transparent
    );
}
.isan-button-links:active {
    transform: translate(2px,2px);
    outline: none;
    clip-path: polygon(
        0 0,
        calc(100% - 3px) 0,
        calc(100% - 2px) 1px,
        calc(100% - 2px) calc(100% - 2px),
        1px calc(100% - 2px),
        0 calc(100% - 3px)
    );
    background: color-mix(
        in srgb,
        currentColor 8%,
        transparent
    );
}
.crossed-out{
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 2px !important;
}
.wp-block-navigation a,
.wp-block-site-title a {
    transition:
        background-color 80ms linear,
        box-shadow 80ms linear;
}

.wp-block-site-title a{
    outline-offset: 4px;
}

.wp-block-navigation a:hover,
.wp-block-site-title a:hover {
    text-decoration: none;
    background-color: color-mix(
        in srgb,
        currentColor 6%,
        transparent
    );
}

.wp-block-navigation a:focus,
.wp-block-site-title a:focus {
    background-color: color-mix(
        in srgb,
        currentColor 6%,
        transparent
    );

    box-shadow:
        0 0 0 4px color-mix(
            in srgb,
            currentColor 6%,
            transparent
        );
}

.wp-block-navigation a:focus:not(:focus-visible),
.wp-block-site-title a:focus:not(:focus-visible) {
    outline: none;
}