/* ? GRID */
:root {
    --grid-desktop: repeat(12, minmax(0, 1fr));
    --grid-tablet: repeat(8, minmax(0, 1fr));
    --grid-mobile: repeat(6, minmax(0, 1fr));

    --grid-gap-desktop: 2.4rem;
    --grid-gap-mobile: 0.8rem;

    --grid: var(--grid-desktop);
    --grid-gap: var(--grid-gap-desktop);
}
/* :is(main, #article) breaks stuff, idk why */
main > * > *, :is(nav.primary, .section-cta-wrapper, footer) > *, #article > * > *, :is(nav.primary, .section-cta-wrapper, footer) > * {
    display: grid;
    grid-template-columns: var(--grid);
    column-gap: var(--grid-gap);
    width: 100%;
    max-width: 256rem;
    margin-left: auto;
    margin-right: auto;
}

body #smooth-content > div:first-of-type {
    z-index: 100000;
}
:where(body #smooth-content > * > *):not(.no-padding-side) {
    padding-left: var(--default-padding-side);
    padding-right: var(--default-padding-side);
}
@media only screen and (max-width: 1199px) {
    :root {
        --grid: var(--grid-tablet);
    }
}
@media only screen and (max-width: 800px) {
    :root {
        --grid: var(--grid-mobile);
        --grid-gap: var(--grid-gap-mobile);
    }
}

/* ? LOGO */
.logo-primary path {
    fill: var(--clr-primary-900);
    transition: fill 0.4s var(--default-animation);
}
:where(body[data-background="dark"], .dark-body) .logo-primary path {
    fill: var(--clr-primary-100);
}

/* ? BUTTON */
:where(button, .button, .tag):not(.no-button) {
    padding: 1.6rem 2.4rem;
    /* border: 0.3rem solid var(--clr-primary-900); */
    border-radius: var(--default-border-radius);
    font-weight: 600;
    width: fit-content;
    border: none;
    background-color: var(--clr-highlight-500);
    color: var(--clr-primary-100);
}
.no-button {
    border: 0px solid var(--clr-primary-900) !important;
    background-color: transparent;
    color: var(--clr-primary-900);
}
:where(body[data-background="dark"], .dark-body) .no-button {
    border: 0px solid var(--clr-primary-100) !important;
    color: var(--clr-primary-100);
}
:where(button, .button).cta {
    --bgColor: var(--clr-highlight-500);
    --textColor: var(--clr-primary-900);
    background-color: var(--bgColor);
    color: var(--textColor);
}
:where(button, .button).dark {
    background-color: var(--clr-primary-900);
    color: var(--bgColor);
}

:where(button, .button).link {
    --bgColor: var(--clr-secondary-150);
    --textColor: var(--clr-primary-900);
    background-color: var(--bgColor);
    color: var(--textColor);
}
:where(button, .button).ghost {
    border: 0.2rem solid var(--bgColor);
    /* 0.2rem fewer padding than the rest because of border. */
    padding: 1.4rem 2.2rem;
    background-color: transparent;
    color: var(--bgColor);
    position: relative;
}
:where(button, .button).dark.ghost {
    --bgColor: var(--clr-primary-900);
}
:where(button, .button).ghost {
    position: relative;
}
:where(button, .button).ghost::after {
    content: attr(data-text);
    color: var(--textColor);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: var(--bgColor);
    transform-origin: bottom right;
    animation: ghost-out 0.175s var(--default-animation) forwards;
}
:where(button, .button).ghost.cta::after {
    color: var(--clr-primary-900);
}
:where(button, .button).ghost:hover::after {
    animation: ghost-in 0.175s var(--default-animation) forwards;
}
@keyframes ghost-in {
    from {
        clip-path: inset(0 100% 0 0); 
    }
    to {
        clip-path: inset(0 0 0 0); 
    }
}
@keyframes ghost-out {
    from {
        clip-path: inset(0 0 0 0); 
    }
    to {
        clip-path: inset(0 0 0 100%); 
    }
}

:where(button, .button).submit {
    --bgColor: var(--clr-highlight-500);
    background-color: var(--bgColor);
    color: var(--clr-primary-900);
}
.tag {
    border-radius: 100vmax;
    border: none;
    color: var(--clr-primary-900);
    white-space: nowrap;
}

@media only screen and (max-width: 800px) {
    :where(button, .button).cta-square {
        height: 100%;
        aspect-ratio: auto;
        background-size: auto 35%;
        background-position-x: 3.4rem;
        min-height: 6.4rem;
    }
    :where(button, .button).cta-square p {
        text-align: start;
        margin-left: 6rem;
    }
    .tag {
        padding: 0.8rem 1.2rem;
    }
}

/* ? STAR */
.star::before {
    content: "*";
    font-size: 150%;
    line-height: 50%;
    display: block;
}