/* Foundation -------------------------------------------------------------- */
:root {
    --gtheme-color-base: #174a78;
    --gtheme-color-contrast: #ffffff;
    --gtheme-color-text: #1f2933;
    --gtheme-color-surface: #ffffff;
    --gtheme-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --gtheme-font-h1: 3rem;
    --gtheme-font-h2: 2.5rem;
    --gtheme-font-h3: 2rem;
    --gtheme-font-h4: 1.75rem;
    --gtheme-font-h5: 1.5rem;
    --gtheme-font-h6: 1.25rem;
    --gtheme-font-body: 1rem;
    --gtheme-content-width: 71.25rem;
    --gtheme-space-page: clamp(1rem, 4vw, 2rem);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--gtheme-color-surface);
    color: var(--gtheme-color-text);
    font-family: var(--gtheme-font-family);
    font-size: var(--gtheme-font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-block: 0 0.65em;
    color: inherit;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

h1, .h1 { font-size: var(--gtheme-font-h1); }
h2, .h2 { font-size: var(--gtheme-font-h2); }
h3, .h3 { font-size: var(--gtheme-font-h3); }
h4, .h4 { font-size: var(--gtheme-font-h4); }
h5, .h5 { font-size: var(--gtheme-font-h5); }
h6, .h6 { font-size: var(--gtheme-font-h6); }

p, li { font-size: var(--gtheme-font-body); }
p { margin-block: 0 1.5em; }
ul, ol { margin-block: 0 1.5em; padding-inline-start: 1.5em; }

a { color: var(--gtheme-color-base); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.12em; }

button, input, select, textarea { font: inherit; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.btn-primary,
.btn-secondary,
.btn-secomdary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1.25rem;
    border: 2px solid var(--gtheme-color-base);
    border-radius: 0.35rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.btn-primary {
    background: var(--gtheme-color-base);
    color: var(--gtheme-color-contrast);
}

.btn-primary:hover,
.btn-primary:focus { filter: brightness(0.88); }

.btn-secondary,
.btn-secomdary {
    background: transparent;
    color: var(--gtheme-color-base);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secomdary:hover,
.btn-secomdary:focus {
    background: var(--gtheme-color-base);
    color: var(--gtheme-color-contrast);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-secomdary:focus-visible {
    outline: 3px solid var(--gtheme-color-base);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--gtheme-color-surface);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-secomdary:disabled,
.btn-primary[aria-disabled="true"],
.btn-secondary[aria-disabled="true"],
.btn-secomdary[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

.g-hide, [hidden] { display: none !important; }
.menu-open { overflow: hidden; }

.gdev-container,
.g-section-inner,
.gdev-header-container,
.gdev-footer-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gtheme-space-page);
}

.screen-reader-text,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus,
.sr-only:focus {
    position: fixed;
    z-index: 100000;
    top: 1rem;
    left: 1rem;
    width: auto;
    height: auto;
    padding: 0.75rem 1rem;
    clip: auto;
    background: var(--gtheme-color-surface);
    color: var(--gtheme-color-text);
}

/* Shared templates -------------------------------------------------------- */
.site-main { width: 100%; margin-inline: auto; padding-block: clamp(3rem, 7vw, 6rem); }
.entries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 2rem; }
.entry-card__thumbnail { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.entry-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.error-404-wrapper { min-height: 65vh; display: grid; place-items: center; text-align: center; }
.error-code { margin: 0; font-size: clamp(4rem, 15vw, 10rem); line-height: 1; font-weight: 700; }
.back-home { margin-top: 2rem; }