/*
 Theme Name:   Twenty Twenty-Five Child
 Template:     twentytwentyfive
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --background: #000000;
    --text:       #ffffff;
    
    --normal-offset: -0.072em;
    --italic-offset: -0.144em;
    
    --space-s:   12px;
    --space-m:   18px;
    --space-l:   24px;
    --space-xl:  36px;
    --space-xxl: 96px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    line-height: 1.25;
}

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: #000000;
    color: var(--text)
}

h3 {
	font-size: 3.2rem;
    font-weight: 700;
}

h4:not(.italic) {
    font-weight: 700;
}

@media (max-width: 999px) {
    h3 { font-size: 2.4rem; }
}

.hero-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

.hero-image {
    width: 100%;
    aspect-ratio: 1.6;
    background-position: left bottom !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    justify-content: center;
}

@media (max-width: 999px) {
    .hero-image {
        aspect-ratio: 1;
    }
}

.text-container {
    display: flex;
    flex-direction: column;
    gap: clamp(2.25rem, 2.5vw, 3.5rem);
}

.text-container.padded {
    padding: 0 clamp(var(--space-l), 8vw, var(--space-xxl));
}

.text-container > p,
.footer > p,
.footer > span {
    width: fit-content;
	font-size: clamp(1.8rem, 2vw, 2.8rem);
}






.header {
    padding: 0 var(--space-l);
}

.header p {
    font-size: 1.6rem;
}

.header a {
    font-size: 1.6rem;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-l) var(--space-l) var(--space-xxl);
    gap: clamp(var(--space-xl), 8vw, var(--space-xxl));
}

.main-container > div {
    max-width: 1340px !important;
    width: 100%;
}

h1, h2, h3, h4, h5, h6, p, a {
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    margin: 0 var(--normal-offset);
}

:nth-child(1 of .card-grid) {
    & > :nth-child(1 of .card) { --glow-color: #fb0049dd; }
    & > :nth-child(2 of .card) { --glow-color: #fdd5a7dd; }
    & > :nth-child(3 of .card) { --glow-color: #49a9c6; }
    & > :nth-child(4 of .card) { --glow-color: #3162e0; }
}

:nth-child(2 of .card-grid) {
    & > :nth-child(1 of .card) { --glow-color: #fff78799; }
    & > :nth-child(2 of .card) { --glow-color: #e68147dd; }
    & > :nth-child(3 of .card) { --glow-color: #808d28ff; }
}

@media (hover: hover) and (min-width: 768px) {

    .main-container:has(.card-grid > .card:hover) .card:not(:hover) {
        opacity: 0.4;
        filter: grayscale(1);
        z-index: 0;
        will-change: opacity, filter;
    }

    .card:hover {
        box-shadow: 0 0 144px 0 var(--glow-color);
        z-index: 1;
    }
}

.card {
    background-color: var(--background);
}

.card, .card * {
    text-decoration: none;
}

.card {
    display: flex;
    flex-direction: column;
    border: solid 1px var(--wp--preset--color--custom-text, #e9edf2);
    transition: 
        opacity    200ms cubic-bezier(.4,.6,.3,1),
        filter     200ms cubic-bezier(.4,.6,.3,1),
        box-shadow 200ms cubic-bezier(.4,.6,.3,1);
}

a.card:hover h4 {
    text-decoration: underline;
}

.card > div {
    padding: 24px;
    
    display: flex;
    flex-direction: column;
    gap: 18px
}

img {
    user-select: none;
}

.card > img {
    aspect-ratio: 5/3;
}

.card h3, .card h4, .card p {
    cursor: default;
}

.card p {
    font-size: 2.0rem;
}


.award-card p {
    font-size: 2.0rem;
}

@media (max-width: 1024px) {
    .card > div {
        padding: 18px;
    }
}

.card > div > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

a:focus { outline-style: none; outline-width: none; }
a:focus-visible { outline-offset: none; outline: none; }

a.card-link {
    user-select: none;
    display: inline-block;
    border: solid 1px var(--text);
    border-radius: 13px;
    width: fit-content;
    padding: 6px 10px 6px;
    margin: 0 -2px;
    font-size: 1.4rem;
    transition: 100ms background ease-out, 100ms color ease-out;
}

a.card-link .gb-shape {
    margin-left: 4px;
}

a.card-link svg {
    transform: translateY(2px);
    transition: 100ms fill ease-out;
}

a.card-link:hover, a.card-link:focus {
    background: var(--text);
    color: var(--background);
}

a.card-link:hover svg, a.card-link:focus svg {
    fill: #000;
}

.card-grid {
    display: grid;
    gap: var(--space-l);
}

.footer {
    align-items: center;
}