/* ============================================================
   PokéGallery — layout.css
   Base layout, typography, and page-shell styling.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --poke-red:     #EE1515;
    --poke-red-dark:#B80F0F;
    --poke-blue:    #2A75BB;
    --poke-yellow:  #FFCB05;
    --ink:          #22262B;
    --ink-soft:     #4A5058;
    --paper:        #FFFDF7;
    --card:         #FFFFFF;
    --line:         #E7E1D3;

    --font-display: 'Press Start 2P', cursive;
    --font-body: 'Nunito', -apple-system, Segoe UI, Roboto, sans-serif;

    /* Default accent (used on Home, Links, Contact, etc.) */
    --accent:       var(--poke-red);
    --accent-dark:  var(--poke-red-dark);
    --accent-glow:  rgba(238, 21, 21, 0.30);
}

/* Per-type page themes — each type page gets its own accent colour
   throughout the header, borders, titles, and background glow */
body.theme-fire {
    --accent:      #EE5A24;
    --accent-dark: #C23F14;
    --accent-glow: rgba(238, 90, 36, 0.32);
}

body.theme-water {
    --accent:      #2A75BB;
    --accent-dark: #1D5A93;
    --accent-glow: rgba(42, 117, 187, 0.32);
}

body.theme-grass {
    --accent:      #3FA129;
    --accent-dark: #2C7A1C;
    --accent-glow: rgba(63, 161, 41, 0.32);
}

body.theme-normal {
    --accent:      #A8A25A;
    --accent-dark: #857E3F;
    --accent-glow: rgba(168, 162, 90, 0.32);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
}

.wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px 50px;
}

/* --- Logo & title band ------------------------------------- */

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 26px 0 8px;
    flex-wrap: wrap;
}

.logo {
    line-height: 0;
    position: relative;
}

.logo::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    animation: logo-pulse 2.6s ease-in-out infinite;
    z-index: -1;
}

@keyframes logo-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.7; }
    50%      { transform: scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .logo::before { animation: none; }
}

.logo img {
    width: 130px;
    height: 130px;
    animation: pokeball-spin 3.5s linear infinite;
    transform-origin: center center;
    filter: drop-shadow(0 6px 10px rgba(34, 38, 43, 0.28));
}


@media (prefers-reduced-motion: reduce) {
    .logo img {
        animation: none;
    }
}

.top-title {
    text-align: center;
    margin-bottom: 0;
}

.top-title h1 {
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--accent);
    letter-spacing: 2px;
    text-shadow: 3px 3px 0 var(--ink);
    margin: 0;
    transition: color 0.3s ease;
}

/* --- Content "cards" ---------------------------------------- */

.box {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 8px solid var(--accent);
    border-radius: 10px;
    padding: 38px 44px;
    margin-bottom: 30px;
    box-shadow: 0 2px 6px rgba(34, 38, 43, 0.06);
    transition: border-color 0.3s ease;
}

.box.main h2 {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--ink);
    line-height: 1.7;
    margin-top: 0;
    padding-bottom: 18px;
    border-bottom: 3px dotted var(--poke-yellow);
}

.box.main h3 {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--accent-dark);
    margin: 24px 0 10px;
}

.box.footer {
    text-align: center;
    background: var(--ink);
    color: var(--paper);
    border-left: none;
    font-size: 1rem;
    letter-spacing: 0.5px;
    padding: 20px;
}

p { color: var(--ink-soft); }

a { color: var(--poke-blue); text-decoration: none; }
a:hover { color: var(--poke-red); text-decoration: underline; }

/* --- Pokéball-style bullets ----------------------------------
   Used for any plain list inside a .box.main so lists read as
   part of the Pokédex theme instead of generic browser bullets.
------------------------------------------------------------- */

.box.main ul.text {
    list-style: none;
    padding-left: 0;
    margin: 16px 0;
}

.box.main ul.text li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    color: var(--ink-soft);
}

.box.main ul.text li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        linear-gradient(var(--poke-red) 0 47%, var(--ink) 47% 53%, #fff 53% 100%);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.box.main ul.text li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--ink);
}

/* --- Responsive images ---------------------------------------*/

.responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

code {
    background: #F1EEE3;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.9em;
}

@media (max-width: 600px) {
    .box { padding: 22px 20px; }
    .top-title h1 { font-size: 1.6rem; }
    .box.main h2 { font-size: 1.3rem; }
    .logo img { width: 70px; height: 70px; }
    .brand { gap: 12px; padding: 18px 0 6px; }
}