/* Pseudo-elements
---------- */
::marker {
    color: var(--color-marker);
}
::placeholder {
    color: var(--text-placeholder);
    opacity: 1; /* Override Firefox default */
}

::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
}

::target-text {
    background-color: var(--color-target-bg);
    color: var(--color-target-text);
}

/* --- */

html {
    accent-color: var(--color-accent);
    color-scheme: light;
    caret-color: var(--color-caret);
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
    scrollbar-gutter: auto;
    scrollbar-width: thin;
}

body {
    background: #f5f5f7;
    color: var(--color-global-text);
    container-type: inline-size;
    font-family: var(--font-global);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height, 1.5);
    margin: 0;
    min-inline-size: var(--min-canvas-size);

 
      
    
    
    @media print {
        background-color: transparent !important; /* Reset background color for printing */
    }
}

/* Text Patterns 
---------- */

/* Set shorter line heights on headings and interactive elements */
:where(h1, h2, h3, h4, h5, h6, button, input, label) {
    line-height: var(--line-height-compact, round(nearest, 1.1em, 8px)); /* 8px Round it to nearest 8th number (baseline grid) */
}

:where(h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, li, a, code, pre, figcaption, dt,dd) {
    text-box: trim-both cap alphabetic; /* text trimming */
}

:where(p, li, figcaption, dd) {
    max-width: var(--measure, 65ch);
}

/* Heading
---------- */
:where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    letter-spacing: var(--letter-spacing-heading);
    line-height: var(--line-height-heading);
}

h1 {
    font-size: var(--font-size-h1); /* TODO: Font size needs updating */
    max-inline-size: var(--measure-heading-1);
}

h2 {
    font-size: var(--font-size-h2); /* TODO: Font size needs updating */
}

h3 {
    font-size: var(--font-size-h3); /* TODO: Font size needs updating */
}

h4 {
    font-size: var(--font-size-h4); /* TODO: Font size needs updating */
}

h5 {
    font-size: var(--font-size-h5); /* TODO: Font size needs updating */
}

h6 {
    font-size: var(--font-size-h6);  /* TODO: Font size needs updating */
}

:where(h2, h3, h4, h5, h6) {
    margin-block-start: round(nearest, 3rem, 8px);
}

:where(h2, h3, h4, h5, h6, dt) {
    max-inline-size: var(--measure-heading-2);
}


/* Paragraph */
p {
    &.small {
        font-size: var(--font-size-300); 
    }
    
    &.large {
        font-size: var(--font-size-500);
    }
}


/* Anchor Link */
a:not([class]) {
    color: var(--color-text-link, #0066cc);
    text-decoration-color:  color-mix(in srgb, currentcolor, transparent 75%);
    
    /* Not required modern approach/privacy prevention */
    /* &:visited { color: var(--color-text-link-visited);} */
    
    &:where(:hover, :focus-visible) {
        color: var(--color-text-link-hover);
        text-decoration: none;
    }
}

main {
    padding-block: 3.5rem;
    padding-inline: 1rem;

    @media (width > 40rem){
        padding-block: 4rem;
    }
}


:root {
    --spacing: 1rem;
    --border-radius: 0.75rem;
    --color-background: #ffffff;
    --color-text: #000000;
    --color-text-secondary: #666666;
    --color-border: #eaeaea;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-text);
}

.container {
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
}

/* Profile */
.profile {
    margin-block-end: 3rem;
    text-align: center;
    margin-block-end: 3.5rem;

    img {
        aspect-ratio: 1;
        border: 2px solid #fff;
        border-radius: calc(infinity * 1em);
        inline-size: 7rem;
        margin-inline: auto;
        margin-block-end: 2.5rem;
    }

    .name {
        font-size: 1.5rem;
        margin-block: 0 1rem;

        @media (width > 40rem){
            font-size: 1.875rem;
        }
    }
    
    .title {
        color: #45556c;
        font-weight: 400;
        margin-block: 0 2.5rem;
    }

    .bio {
        color: #4f5e73;
        font-size: 0.875rem;
        margin-block: 0;
        text-wrap: pretty;
    }
}

/* Social Links */
.social-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-block: 2rem 3.5rem;
    
    a {
        aspect-ratio: 1;
        background-color: #fff;
        border-radius: 0.25rem;
        padding: 0.5rem;
        box-shadow: rgb(0 0 0 / 5%) 0px 1px 3px 0px ;

        color: var(--color-text-secondary);
        transition: color 0.2s ease;
        
        &:hover {
            color: var(--color-text);
        }

        svg {
            aspect-ratio: 1;
            fill: currentColor;
            inline-size: 1.5rem;
        }
    }
}

.links {
    display: grid;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    
    .link {
        display: flex;
        align-items: center;
        padding: 1.25rem;
        background: var(--color-background);
        border-radius: var(--border-radius);
        text-decoration: none;
        color: var(--color-text);
        transition: all 0.2s ease;
        box-shadow: rgb(0 0 0 / 5%) 0px 1px 3px 0px ;
    
        &:disabled{
            opacity: 0.5;
            cursor: not-allowed;;
        }
    
        &[href]{
            cursor: pointer;
    
            &:hover {
                transform: translateY(-2px);
                border-color: var(--color-text);
            }
        }
    }

    
    /* --- */

    h2 {
        color: oklch(.09 .01 265);
        display: inline-block;
        font-size: 1.125rem;
        margin-block: 0 0.75rem;
        padding-block-end: 0.5rem;
        border-block-end: 0.5px solid oklch(0.09 0.01 265);
    }

    p {
        margin-block: 0;
        font-size: 0.875rem;
        text-wrap: pretty;
    }
}


/* Add arrow icon to links */
.link::after {
    content: "→";
    margin-left: auto;
    font-size: 1.2rem;
}


.link.status {
    --purple: oklch(0.55 0.35 273.52 / 1);
    border: 2px solid var(--purple);
    background: oklch(0.55 0.35 273.52 / 5%);

    h2 {
        color: var(--purple);
        border-color: oklch(from var(--purple) l c h / 80%);;
    }   
    
    &::after {
        color: var(--purple);
    }
}


footer {
    font-size: 0.75rem;

    p {
        margin: 0;
    }
}