/*
** SHARED CSS CONTRACT
**
** This file is the reusable foundation for every static page.
**
** Keep here:
** - reset and global browser normalization;
** - font setup;
** - design tokens and shared custom properties;
** - body, typography, and link defaults;
** - reusable layout primitives;
** - reusable components such as site header, logo, nav, footer, buttons,
**   cards, panels, media blocks, forms, and code blocks.
**
** Do not put page-only styling here unless the page owns a clearly scoped
** root class, such as `.HomePage` or `.ProjectPage`.
**
** Page CSS files should import this file first, then add only page-specific
** layout and exceptions. They should not repeat the reset, typography,
** shared logo/nav/footer/button styles, or generic component styles.
*/

:root {
    /* Layout */
    --page-max-width: 1200px;
    --content-readable-width: min(610px, 80vw);
    --section-padding: clamp(1em, 3vw, 2.5em);
    --page-padding: clamp(1rem, 6vw, 2rem);
    --card-width: min(100%, 591px);
    --card-height: min(100%, 286px);
    --form-width: min(900px, 100%);
    --footer-width: 100%;

    /* Brand colors */
    --color-brand-yellow: #f6bd19;
    --color-brand-orange: #f18619;
    --color-brand-green: #3e9d36;
    --color-brand-blue: #3296d0;
    --color-danger: #e94c31;

    /* Text colors */
    --color-text-primary: #dedede;
    --color-text-secondary: #dedede;
    --color-text-muted: rgba(255, 255, 255, 0.62);
    --color-text-on-accent: rgb(15, 16, 16);
    --color-text-disabled: #666;

    /* Surface colors */
    --color-page-bg: rgb(15, 16, 16);
    --color-bg-base-0: #000000;
    --color-bg-base-1: #1a1a1a;
    --color-bg-base-2: #000000;
    --color-panel-bg: rgba(52, 51, 56, 0.72);
    --color-panel-border: rgba(255, 255, 255, 0.08);
    --color-field-border: rgba(255, 255, 255, 0.14);
    --color-field-bg: rgba(255, 255, 255, 0.03);
    --color-field-placeholder: rgba(255, 255, 255, 0.45);
    --color-disabled-bg: #ccc;
    --color-surface-code: rgb(36, 35, 35);
    --color-overlay-dark: rgba(15, 16, 16, 0.8);

    /* Background accent colors */
    --color-bg-spot-primary: var(--color-brand-yellow);
    --color-bg-spot-green: hsla(125, 100%, 53%, 0.552);
    --color-bg-spot-soft: hsla(45, 52%, 100%, 0.2);
    --color-bg-spot-faint: hsla(45, 52%, 100%, 0.1);
    --bg-spot-alpha: 10%;
    --bg-spot-size-lg: 20%;
    --bg-spot-alpha-1: 20%;
    --bg-spot-alpha-2: 10%;
    --bg-spot-alpha-3: 8%;
    --bg-spot-size-1: 15%;
    --bg-spot-size-2: 12%;
    --bg-spot-size-3: 8%;

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1.5rem;
    --radius-lg: 2rem;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* Typography */
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --font-size-label: 0.875rem;
    --font-size-button: 1rem;
    --font-size-card-title: 1.25rem;
    --font-size-subtitle: 1.125rem;
    --font-size-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    --font-size-section-title: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
    --font-size-hero-title: clamp(3rem, 2.2rem + 3vw, 4.5rem);
    --font-weight-body: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-body: 1.6;
    --line-height-heading: 1.1;
    --line-height-tight: 1.2;

}

@font-face {
    font-family: MontserratVar;
    src: url("../Fonts/MontSerrat/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------*/
html {
    scroll-behavior: smooth;
}

body {
    container-type: inline-size;
    min-height: 100vh;
    font-family: "MontserratVar";
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    background-color: var(--color-page-bg);
    background-image:
        radial-gradient(circle at 60% 10%, color-mix(in srgb, var(--color-bg-spot-primary) var(--bg-spot-alpha), transparent), transparent var(--bg-spot-size-lg)),
        radial-gradient(circle at 90% 70%, color-mix(in srgb, var(--color-bg-spot-soft) var(--bg-spot-alpha-2), transparent), transparent var(--bg-spot-size-2)),
        radial-gradient(circle at 10% 85%, color-mix(in srgb, var(--color-bg-spot-faint) var(--bg-spot-alpha-3), transparent), transparent var(--bg-spot-size-3)),
        linear-gradient(180deg, var(--color-bg-base-0) 0%, var(--color-bg-base-1) 42%,
            var(--color-bg-base-2) 100%);
}

/*
** LAYOUT PRIMITIVES
*/

.SitePage,
.PageShell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.SiteMain {
    flex: 1;
    width: 100%;
}

.PageContainer {
    margin-inline: auto;
    max-width: var(--page-max-width);
    padding-inline: var(--page-padding);
}

.ReadableContent {
    width: min(100%, var(--content-readable-width));
    margin-inline: auto;
}

.Stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 1rem);
}

.Cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, 1rem);
}

.Section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: var(--section-padding);
}

h1 {
    font-size: var(--font-size-hero-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-text-primary);
}

h2 {
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    color: var(--color-text-primary);
}

h3 {
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

p {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
}

p+p {
    margin-top: 0.5rem;
}

b {
    font-weight: var(--font-weight-bold);
}

a {
    color: var(--color-text-primary);
}

.SectionTitle {
    padding-bottom: 1.5rem;
    display: block;
}

.SectionSubtitle {
    display: block;
    font-size: var(--font-size-subtitle);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
}

.Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.6rem;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
}

.Button--primary {
    color: var(--color-text-on-accent);
    background-color: var(--color-brand-yellow);
}

.Button:hover {
    filter: brightness(1.1);
}

.Button:active {
    filter: brightness(1.3);
    transform: translateY(2px);
}

.Button:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}

/*
** HEADER
*/

/* -------------------------------------------------------------------------- */
.SiteHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 2rem;
    background-color: transparent;
    flex-direction: column;
    gap: 1.4rem;
}

.SiteLogo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.SiteLogo-bars img {
    width: 32px;
}

.SiteLogo-wordmark img {
    width: 106px;
    height: auto;
}

.NavToggle {
    display: none;
}

.NavList {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 1.25rem;
    padding-inline: 1rem;
}

.NavList li {
    display: flex;
    align-items: center;
}

.NavLink {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: 0.05rem;
    transition:
        color 0.2s ease,
        text-shadow 0.2s ease;
}

.NavLink:hover {
    color: var(--color-brand-yellow);
    text-shadow: 0 0 0.1em currentColor, 0 0 0.1em currentColor;
}

.NavList li+li::before {
    content: "•";
    color: var(--color-text-muted);
    margin-right: 1.25rem;
}

/*
** PANELS AND CARDS
*/

.Panel,
.Card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg,
            rgba(44, 43, 48, 0.88),
            rgba(27, 27, 31, 0.84));
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.35);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .Panel,
    .Card {
        background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.08),
                rgba(255, 255, 255, 0.03));
        backdrop-filter: blur(28px) saturate(160%);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
    }
}

.Card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: var(--card-width);
    text-align: left;
    padding: 1.5em 1.75rem;
}

.Card h3 {
    margin-bottom: 0.5rem;
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-semibold);
}
.TextAccent {
    color: var(--color-brand-yellow);
}

/*
** FOOTER
*/

/* -------------------------------------------------------------------------- */
footer {
    width: 100%;
}

.SiteFooter {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    margin-top: 2rem;
    padding-bottom: 2rem;
}

.SiteFooter-rule {
    width: var(--footer-width);
    border: 1px solid white;
}

.SiteFooter-logo img {
    width: 6rem;
}

.SiteFooter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--footer-width);
    gap: 1.5rem;
}

.SocialLinks ul {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.SocialLinks a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-pill);
    color: white;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        background-color 0.2s ease;
}

.SocialLinks a:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.08);
}

.SocialLinks img {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    filter: invert(100%);
}

.SocialLinks li:last-child img {
    width: 1.15rem;
    height: 1.15rem;
}

/*
** CODE BLOCKS
*/

/* -------------------------------------------------------------------------- */
.CodeBlocks {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
}

.CodeBlock {
    width: 100%;
    background-color: var(--color-surface-code);
    padding: 10px;
    border-radius: var(--radius-sm);
}

.CodeBlock code {
    display: block;
    overflow-x: auto;
}

/*
** MEDIUM SCREEN
*/

/* -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .SiteFooter-inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 1.25rem;
    }
}

@media (max-width: 750px) {
    .NavIsOpen {
        overflow: hidden;
    }

    .SiteHeader {
        position: relative;
        z-index: 40;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        width: 100%;
    }

    .NavToggle {
        position: relative;
        z-index: 50;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.28rem;
        width: 2.75rem;
        height: 2.75rem;
        margin-left: auto;
        border: 1px solid var(--color-panel-border);
        border-radius: var(--radius-sm);
        background-color: rgba(255, 255, 255, 0.04);
        cursor: pointer;
    }

    .NavToggle-bar {
        display: block;
        width: 1.2rem;
        height: 2px;
        margin-inline: auto;
        border-radius: var(--radius-pill);
        background-color: var(--color-text-primary);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    }

    .NavToggle[aria-expanded="true"] .NavToggle-bar:nth-child(1) {
        transform: translateY(0.42rem) rotate(45deg);
    }

    .NavToggle[aria-expanded="true"] .NavToggle-bar:nth-child(2) {
        opacity: 0;
    }

    .NavToggle[aria-expanded="true"] .NavToggle-bar:nth-child(3) {
        transform: translateY(-0.42rem) rotate(-45deg);
    }

    .SiteNav {
        position: fixed;
        inset: 0;
        z-index: 45;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--page-padding);
        background:
            radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--color-brand-yellow) 12%, transparent), transparent 36%),
            var(--color-page-bg);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition:
            opacity 0.2s ease,
            visibility 0.2s ease;
    }

    .SiteNav--open {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    .NavList {
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        padding: 0;
    }

    .NavList li {
        width: 100%;
        justify-content: center;
    }

    .NavList li+li::before {
        content: none;
    }

    .NavLink {
        display: block;
        width: 100%;
        padding-block: 0.35rem;
        text-align: center;
        font-size: var(--font-size-subtitle);
    }
}