@import "syntax.css";
@import "form.css";
@import "actiontext.css";
@import "trix.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Using both hex & rgb values for easier tracking and modifying */
/* Used coolers to modify the existing theme to create some visual distinction from the base theme */
@layer base {
    :root,
    html[data-theme="dark"] {
        --color-bg: #212737;
        --color-bg-rgb: 33, 39, 55;
        --color-text: #ebd4cb;
        --color-text-rgb: 235, 212, 203;
        --color-primary: #D06B5D;
        --color-primary-rgb: 208, 107, 93;
        --color-surface: #4281a4;
        --color-surface-rgb: 66, 129, 164;
        --color-secondary: #8B5249;
        --color-secondary-rgb: 139, 82, 73;
        --color-border: #94c9a9;
        --color-border-rgb: 148, 201, 169;
    }

    body {
        @apply flex min-h-screen flex-col bg-base font-sans text-base
        selection:bg-primary selection:bg-opacity-70 selection:text-inverted;
    }

    section {
        @apply mx-auto max-w-4xl px-4;
    }

    a {
        @apply outline-2 outline-offset-1 outline-primary focus-visible:no-underline focus-visible:outline-dashed;
    }

    a.default {
        @apply inline-block hover:text-primary underline underline-offset-4 decoration-dashed;
    }

    header svg,
    button svg,
    footer svg,
    .tag-icon {
        @apply inline-block h-6 w-6 fill-base;
    }

    svg.icon {
        @apply inline-block h-6 w-6 scale-125 opacity-90 sm:scale-110;
    }

    .prose {
        --tw-prose-quotes: var(--color-text) !important; /* Override Tailwind's default quote color */

        @apply prose-headings:!mb-3 prose-headings:!text-base prose-h3:italic

        /* p tags */
        prose-p:!text-base

        /* anchor */
        prose-a:!text-base prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-primary
        prose-figcaption:!text-base prose-figcaption:opacity-70 prose-strong:!text-base

        /* code */
        prose-code:rounded
        prose-code:bg-surface
        prose-code:bg-opacity-75
        prose-code:px-2
        prose-code:py-1
        prose-code:leading-8
        prose-code:!text-base
        prose-code:before:!content-['']
        prose-code:after:!content-['']

        prose-ol:!text-base prose-ul:overflow-x-clip prose-ul:!text-base prose-li:marker:!text-primary prose-table:text-base prose-th:border prose-th:border-base prose-td:border prose-td:border-base prose-img:mx-auto prose-img:!mt-2 prose-img:border-2 prose-img:border-base prose-hr:!border-primary;
    }

    /* This is copied from the prose-code group, because we now use ActionText instead of the markdown <code> element */
    mark {
        @apply m-0 rounded bg-surface bg-opacity-75 !px-2 !py-[0.05rem] leading-[20px] !text-base before:!content-[''] after:!content-[''];
    }

    .prose a {
        @apply hover:!text-primary;
    }

    .prose thead th:first-child,
    tbody td:first-child,
    tfoot td:first-child {
        padding-left: 0.5714286em;
    }

    .prose h2#table-of-contents {
        @apply mb-2;
    }

    .prose details {
        @apply inline-block cursor-pointer select-none text-base;
    }

    .prose summary {
        @apply focus-outline;
    }

    .prose h2#table-of-contents + p {
        @apply hidden;
    }

    /* Fix a bug where links in a ul > li would have too much top margin */
    .prose ul > li a {
        margin-top: 0;
    }

    /* ===== scrollbar ===== */
    html {
        overflow-y: scroll;
    }

    /* width */
    ::-webkit-scrollbar {
        @apply w-3;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        @apply bg-base;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        @apply bg-surface;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        @apply bg-secondary;
    }
}

@layer components {
    .display-none {
        @apply hidden;
    }

    .focus-outline {
        @apply outline-2 outline-offset-1 outline-primary focus-visible:no-underline focus-visible:outline-dashed;
    }
}

/* Allow using *em things* as a pseudo-subtitle for images, without requiring special class */
.prose img + em {
    @apply -mt-7 block text-center text-sm;
}

body {
    position: relative;
}

* {
    z-index: 1;
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.bg-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(var(--color-fill), var(--tw-bg-opacity));
    background-image: url("/assets/low-poly-grid-haikei-5446fc97.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: hard-light;
    filter: opacity(0.015);
}

html.pdf-render .no-pdf-render {
    display: none;
}

html .pdf-render {
    display: none;
}

html.pdf-render .pdf-render {
    display: block;
}

.button,
a.cta {
    @apply flex items-center justify-center p-4;
}

.button {
    @apply rounded border-2 p-2;
}

.button.primary {
    @apply border-primary bg-primary text-white;
}

.button.secondary {
    @apply border-primary text-primary;
}

a, button, input[type="submit"], select {
    @apply cursor-pointer;
}

a.cta {
    @apply flex items-center justify-center p-4 text-xl underline decoration-dashed underline-offset-4;
}

a.primary {
    @apply text-primary hover:text-base;
}

a.secondary {
    @apply text-base hover:text-primary;
}

/* ====== General Form Styles ====== */
.form [type="submit"] {
    @apply absolute bottom-0 right-0;
}

.form label {
    @apply mb-4 inline-block;
}

.form label > * {
    @apply mt-2;
}

.form input,
textarea {
    @apply min-w-[320px] rounded p-2 text-inverted;
}

.form textarea {
    @apply min-h-[120px];
}

/* Styles for the <SocialIconsList /> component */
.social-icons {
    @apply flex-wrap justify-center gap-1;
}

.link-button {
    @apply p-2 px-4 hover:rotate-6 sm:p-1 hover:text-primary underline underline-offset-4 decoration-dashed;
}

.social-icons.top-menu {
    @apply flex flex-col;
}

.social-icons.top-menu .link-button {
    @apply rounded-bl-lg rounded-tl-lg bg-surface pr-10;
}

.card-wrapper {
    position: relative;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.card-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        url("/assets/polygon-scatter-haikei-6a195fc8.png") no-repeat,
        linear-gradient(0deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.46)),
        #2e3853 no-repeat;
    background-blend-mode: color-burn, normal;
    background-size: cover;
}

p.warning::before {
    content: "⚠️ ";
}

p.warning::after {
    content: " ⚠️";
}

p.protip::before {
    content: "🔥 ";
}

p.protip::after {
    content: " 🔥";
}

p.important::before {
    content: "🚨 ";
}

p.important::after {
    content: " 🚨";
}

/* Highlighter styles for ***text in highlight blocks*** */
em > strong {
    --highlight-color: rgba(var(--color-accent), 80%);

    display: inline;
    background: var(--highlight-color);
    color: white;
    word-wrap: break-word;
    position: relative;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    padding: 2px 0.4rem;
}

.featured-writing {
    @apply relative !z-[3] mb-14 rounded-xl shadow-2xl;
}
.featured-writing a {
    transition: all 0.2s ease-in-out;
}
.featured-writing::before {
    content: " ";
    position: absolute;
    background: url("/assets/laptop_open-3965315a.jpg");
    box-shadow:
        inset 0px 0px 1000px 1000px rgba(var(--color-fill), 0.6),
        2px 2px 7px 1px black;
    object-fit: contain;
    opacity: 0.8;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transition: all 0.3s ease-in-out;
    @apply z-[1] rounded-2xl bg-cover bg-no-repeat;
}

#main-content.nav-menu-open {
    @apply relative;
}
#main-content.nav-menu-open::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100vw;
    background: black;
    z-index: 1;
    opacity: 0.4;
}

.small-list li {
    @apply py-0;
}

#skip-to-content {
    @apply absolute -top-full left-16 z-50 bg-primary px-3 py-2 text-inverted transition-all focus:top-4;
}
.nav-container {
    @apply relative z-10 mx-auto flex max-w-4xl flex-col items-center justify-between shadow-2xl sm:flex-row sm:shadow-none;
}
.nav-container::before {
    content: "";
    @apply absolute left-0 right-0 top-0 h-1 bg-primary sm:h-0;
}
.top-nav-wrap {
    @apply relative flex w-full items-start justify-between p-4 sm:items-center sm:py-8;
}
.logo {
    @apply absolute py-1 text-xl font-semibold sm:static sm:text-2xl;
}
.hamburger-menu {
    @apply self-end p-2 sm:hidden;
}
.hamburger-menu svg {
    @apply h-6 w-6 scale-125 fill-base;
}

nav {
    @apply flex w-full flex-col items-center sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0;
}
nav ul {
    @apply mt-4 grid w-80 grid-cols-2 grid-rows-4 gap-x-2 gap-y-2 sm:ml-0 sm:mt-0 sm:w-auto sm:gap-x-5 sm:gap-y-0;
}
nav ul.side-links {
    @apply w-44 sm:w-auto;
}
nav ul li {
    @apply col-span-2 flex items-center justify-center;
}
nav ul li a {
    @apply w-full px-4 py-3 text-center font-medium hover:text-primary sm:my-0 sm:px-2 sm:py-1;
}
nav ul:not(.side-links) li:nth-last-child(1) {
    @apply mr-12;
}
nav ul:not(.side-links) li:nth-last-child(2) {
    @apply ml-12;
}
nav a.active {
    @apply underline decoration-solid decoration-2 underline-offset-4;
}
nav a.active svg {
    @apply fill-primary;
}

nav button {
    @apply p-1;
}
nav button svg {
    @apply h-6 w-6 fill-base hover:fill-primary;
}
#theme-btn {
    @apply p-3 sm:p-1;
}
#theme-btn svg {
    @apply scale-125 hover:rotate-12 sm:scale-100;
}

.icon-container {
    @apply h-5 w-6 flex-col items-end justify-between;
}
.icon-container div {
    @apply h-0.5 bg-text transition-all;
}
#first-line {
    @apply w-full;
}
#second-line {
    @apply w-3/4;
}
#third-line {
    @apply w-1/2;
}

#main-content {
    @apply mx-auto w-full max-w-4xl px-4 pb-12;
}
#main-content h1 {
    @apply text-2xl font-semibold sm:text-4xl;
}

/* ====== Footer Styles ====== */
footer {
    @apply mx-auto w-full max-w-4xl mt-32;
}
.footer-wrapper {
    @apply flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4;
}
.link-button svg {
    @apply scale-125;
}
.copyright-wrapper {
    @apply my-2 flex flex-col items-center whitespace-nowrap sm:flex-row;
}
.separator {
    @apply hidden sm:inline;
}

/* ====== HR ====== */
hr {
    @apply max-w-4xl mx-auto border-primary;
}

/* ====== From Projects page ====== */
.pagination-wrapper {
    @apply mb-8 mt-auto flex justify-center;
}
.disabled {
    @apply pointer-events-none select-none opacity-50 hover:text-base group-hover:fill-base;
}
.disabled-svg {
    @apply group-hover:!fill-base;
}

.pill {
    @apply inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-primary text-inverted mr-1 mb-1;
}

.card {
    @apply card-wrapper relative flex flex-col border border-primary p-4 rounded-lg after:rounded-lg;
}
.card p {
    @apply m-0;
}

article {
    @apply mx-auto w-full max-w-4xl px-4 pb-12;
}

.glass {
    /* Blur effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        /* Bottom and right depth effect */
            inset -0.75px -0.5px rgba(255, 255, 255, 0.1),
                /* Top and left depth effect */
            inset +0.75px +0.5px rgba(255, 255, 255, 0.025),
                /* Shadow effect */
            3px 2px 10px rgba(0, 0, 0, 0.25),
                /* Short subsurface effect */
            inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),
                /* Long subsurface effect */
            inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);

    /* Allow children to fill the parent */
    position: relative;

    /* Round the corners */
    border-radius: 5px;

    /* Hide the corners of the header */
    overflow: hidden;
}

blockquote {
    @apply border-l-4 border-gray-500 pl-4 italic !border-l-primary border-opacity-50 opacity-80;
}

/* GitHub-flavored alert blocks */
.alert {
    @apply my-4 rounded-lg border-l-4 p-4;
}
.alert .alert-title {
    @apply mb-2 flex items-center gap-2 font-bold;
}
.alert .alert-title i {
    @apply text-lg;
}
.alert p {
    @apply m-0 whitespace-pre-line;
}
.alert-note {
    @apply border-l-blue-500 bg-blue-500/10;
}
.alert-note .alert-title {
    @apply text-blue-400;
}
.alert-tip {
    @apply border-l-green-500 bg-green-500/10;
}
.alert-tip .alert-title {
    @apply text-green-400;
}
.alert-important {
    @apply border-l-purple-500 bg-purple-500/10;
}
.alert-important .alert-title {
    @apply text-purple-400;
}
.alert-warning {
    @apply border-l-yellow-500 bg-yellow-500/10;
}
.alert-warning .alert-title {
    @apply text-yellow-400;
}
.alert-caution {
    @apply border-l-red-500 bg-red-500/10;
}
.alert-caution .alert-title {
    @apply text-red-400;
}