/* =============================================
   Pokémon Hub — Shared Design System

   Direction C, "Waterline". The palette has a referent rather than a mood: Quagsire is
   Water/Ground and Clodsire is Poison/Ground, and both live in shallow water over a silt bank.
   So the neutrals are wet clay and the single saturated colour is standing water. See
   inspirations/README.md for the research this came out of.

   Two blues, and they are not interchangeable. --accent is darkened along the mascot's own hue
   (197deg) until white text clears AA on it. --accent-soft is the true sprite blue, which is far
   too light to carry text and is only ever a fill or a wash.
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&family=Nunito+Sans:wght@400;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
    /* The bank */
    --bg:          #f6f1ea;
    --surface:     #fffdfa;
    --surface-2:   #ebe1d6;
    --surface-3:   #ded1c3;   /* pressed/active: darker than surface-2 on a light ground */
    --border:      #ded1c3;
    --border-2:    #c9b8a8;

    /* The water */
    --accent:      #2c7996;   /* carries text: 4.90:1 with white */
    --accent-ink:  #25667e;   /* small accent text on light surfaces */
    --accent-soft: #9ad1e6;   /* the true sprite blue. Fills only, never behind text */
    --accent-dim:  #dfeef5;
    --on-accent:   #ffffff;

    /* Caught / done. Reed green, desaturated so it sits with the silt instead of shouting. */
    --green:        #5c7845;
    --green-dim:    #e7eddd;
    --green-border: #c3d0ad;

    --text:        #2e2724;
    --text-2:      #6e615c;
    --text-3:      #8c7c73;

    --radius:      8px;
    --radius-lg:   12px;
    --font-display: 'Fredoka', sans-serif;
    --font-body:    'Nunito Sans', sans-serif;
    --font-mono:    'Fira Code', monospace;
}

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

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

/* ─── Navigation ─── */

nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
}

.nav-logo {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
    margin-right: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-logo img {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
}

nav a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-2);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
}

nav a:hover { color: var(--text); background: var(--surface-2); }

/* Active is a waterline under the label, not a filled pill. */
nav a.nav-active {
    color: var(--accent-ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--accent);
    border-radius: 0;
}

/* ─── Page header ─── */

/* Left-aligned on purpose. A centred title over a left-aligned grid has no spatial point of
   view, and it is what made every page read the same. */
.page-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 32px 24px 26px;
    position: relative;
    overflow: hidden;
}

.page-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.page-header h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.1;
}

.page-header p {
    color: var(--text-2);
    font-size: 0.92rem;
    max-width: 56ch;
}

/* The mascot rests on the band and overlaps its edge, the way a real object sits on a surface
   rather than inside a box. The only element deliberately breaking the grid. */
.header-mascot {
    position: absolute;
    right: 0;
    bottom: -30px;
    width: 104px;
    height: 104px;
    image-rendering: pixelated;
    pointer-events: none;
    opacity: 0.9;
}

@media (max-width: 640px) {
    .header-mascot { width: 76px; height: 76px; bottom: -22px; opacity: 0.5; }
    .page-header p { max-width: 40ch; }
}

/* ─── Footer ─── */

footer {
    text-align: center;
    padding: 28px 24px;
    color: var(--text-3);
    font-size: 0.78rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* ─── Animations ─── */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ─── Responsive nav ─── */

/* Six nav links no longer fit one row much below 760px, so the bar grows instead of
   overflowing. Anything sticky under the nav must stop being sticky at the same breakpoint. */
@media (max-width: 760px) {
    nav { height: auto; padding: 8px 16px; min-height: 48px; row-gap: 2px; }
    .nav-logo { font-size: 1rem; margin-right: 10px; }
    .nav-logo img { width: 24px; height: 24px; }
    nav a { font-size: 0.82rem; padding: 5px 8px; }
    .page-header { padding: 24px 16px 20px; }
}

@media (max-width: 500px) {
    nav { padding: 8px 14px; }
    .nav-logo { font-size: 0.95rem; margin-right: 8px; }
    nav a { font-size: 0.78rem; padding: 5px 7px; }
}