/* ===========================================================
   kisainfo.css
   Eläkeliiton suunnistuksen mestaruuskilpailut
   =========================================================== */

:root{
    --bg:#f5f7fa;
    --surface:#ffffff;
    --text:#24313d;
    --muted:#5d6b79;

    --primary:#27526b;
    --primary-dark:#17384b;

    --accent:#d8894b;
    --accent-bg:#fff5ea;

    --border:#d7dee5;

    --shadow:0 6px 18px rgba(0,0,0,.08);

    --radius:12px;

    --content-width:920px;
}

/* ===========================================================
   Perus
   =========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

main{
    max-width:var(--content-width);
    margin:auto;
    padding:2rem 1rem 4rem;
}

/* ===========================================================
   Otsikko
   =========================================================== */

header{
    margin-bottom:2rem;
}

header h1{
    margin:0;
    color:var(--primary-dark);
    font-size:clamp(2rem,5vw,3rem);
    line-height:1.1;
}

header .subtitle{
    margin:.4rem 0 1rem;
    font-size:1.25rem;
    color:var(--muted);
}

.summary{
    display:inline-block;
    margin-top:.5rem;
    padding:.65rem 1rem;

    background:var(--surface);
    border:1px solid var(--border);
    border-radius:8px;

    font-weight:600;
}

/* ===========================================================
   Huomautus
   =========================================================== */

.notice{
    margin:2rem 0;

    padding:1rem 1.25rem;

    background:var(--accent-bg);

    border-left:6px solid var(--accent);
    border-radius:8px;

    box-shadow:var(--shadow);
}

.notice strong{
    color:#8a4b12;
}

/* ===========================================================
   Sisältöosiot
   =========================================================== */

section{
    margin:2rem 0;

    background:var(--surface);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;
}

section h2{
    margin:0;

    padding:1rem 1.25rem;

    background:var(--primary);
    color:#fff;

    font-size:1.35rem;
}

/* ===========================================================
   Tekstialue
   =========================================================== */

.content{
    padding:1.5rem;
}

.content h3{
    margin-top:2rem;
    color:var(--primary-dark);
}

.content p{
    margin:0 0 1rem;
}

.content ul,
.content ol{
    margin:.5rem 0 1.25rem 1.5rem;
}

.content li{
    margin-bottom:.45rem;
}

/* ===========================================================
   Taulukot
   =========================================================== */

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:.75rem .9rem;
    text-align:left;
    vertical-align:top;

    border-bottom:1px solid var(--border);
}

th{
    background:#eef3f7;
    font-weight:600;
}

tbody tr:nth-child(even){
    background:#fafbfd;
}

/* Yleistietotaulukko */

.info-table td:first-child{
    width:220px;
    font-weight:600;
    color:var(--primary-dark);
}

/* ===========================================================
   Korostukset
   =========================================================== */

strong{
    color:var(--primary-dark);
}

/* ===========================================================
   Alatunniste
   =========================================================== */

footer{
    margin-top:3rem;
    text-align:center;
    color:var(--muted);
    font-size:.95rem;
}

/* ===========================================================
   Mobiili
   =========================================================== */

@media (max-width:650px){

    main{
        padding:1rem .75rem 3rem;
    }

    header h1{
        font-size:2rem;
    }

    section h2{
        font-size:1.15rem;
    }

    .content{
        padding:1rem;
    }

    .info-table td:first-child{
        width:130px;
    }
}

@media (max-width:500px){

    table,
    thead,
    tbody,
    th,
    td,
    tr{
        display:block;
    }

    thead{
        display:none;
    }

    tr{
        margin-bottom:1rem;
        border-bottom:2px solid var(--border);
    }

    td{
        border:none;
        padding:.45rem .2rem;
    }

    td::before{
        display:block;
        font-weight:700;
        color:var(--primary-dark);
        margin-bottom:.15rem;
    }

    .info-table td:first-child{
        width:auto;
    }
}