/* =========================================================
   amepa.fi — päätyylit
   Ryhmät: reset, layout, header, logo, laatikot, sertit,
           footer, dokumentit, animaatiot, body-overridet, mobiili
   ========================================================= */

/* --- Reset & base --- */
* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    background-color: rgb(32, 32, 32);
    background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)),
                      linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                      linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
                      linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
    background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
    background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
    font-family: Tahoma, Verdana, Helvetica, Arial;
    font-size: 11px;
    color: #000;
    letter-spacing: 1px;
    line-height: 1.2;
}

/* --- Layout --- */
.background { min-height: 100%; display: flex; flex-direction: column; }
.center     { flex: 1; display: flex; justify-content: center; align-items: center; padding-bottom: 40px; }
.mainblock  { width: 510px; }

/* --- Kielivalinta (oikea yläkulma) --- */
.lang_select { position: fixed; top: 15px; right: 20px; z-index: 100; }
.lang_link   { color: #444; text-decoration: none; font-size: 10px; font-weight: bold; margin-left: 12px; transition: 0.3s; }
.lang_link:hover,
.lang_link.active { color: #888; }

/* --- Logo --- */
.site-logo   { text-align: center; }
.site-logo a { display: inline-block; }
.logo        { display: flex; margin: 0 auto; opacity: 0.9; }

/* --- Sisältölaatikot --- */
.box       { margin: 5px 0 0 5px; padding: 10px; border: 2px solid darkgrey; border-radius: 6px; background: rgba(200, 200, 200, 0.7); }
.box a     { color: #000; text-decoration: underline; }
.row:after { content: ""; display: table; clear: both; }
.column    { float: left; width: 50%; }
.title     { font-weight: bold; }

/* --- Sertifikaatit --- */
.cert_logo                  { height: 45px; padding: 0 10px; transition: 0.3s; }
.laatusuora                 { margin-bottom: 15px; opacity: 0.6; transition: 0.3s; }
.laatusuora:hover           { opacity: 1.0; }
.cert_grid                  { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 0; }
.cert_grid .cert_logo_large { height: 65px; padding: 0 10px; }

/* --- Footer --- */
.site-bottom-bar      { width: 100%; padding: 20px 0; text-align: center; }
.footer_inner         { text-align: center; }
.footer-content       { font-size: 9px; color: #333; }
.footer-content a     { color: #333; text-decoration: none; margin: 0 12px; text-transform: uppercase; }
.footer-content a:hover { color: #555; }

/* --- Dokumenttisivut (legal + content) --- */
.doc-page                 { padding: 15px 5px; line-height: 1.5; text-align: left; }
.doc-page p               { margin: 0 0 10px 0; }
.doc-page a               { color: #000; text-decoration: underline; }
.doc-page > p:first-child { margin-bottom: 15px; }

/* Legal-sivuilla justifiointi ja tavutus juridista ulkoasua varten */
body.legal .doc-page p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

.doc-page p:target {
    padding: 12px;
    margin: -12px -12px -2px -12px;
    border-radius: 4px;
    animation: target-flash 4s ease-out forwards;
}

.doc-notice {
    font-size: 10px;
    color: #800;
    border: 1px solid #c00;
    padding: 8px;
    margin-bottom: 15px;
}

.doc-meta          { font-size: 10px; color: #555; }
.doc-page p:has(em) { margin-top: 18px; }
.doc-list          { margin-left: 15px; margin-top: -5px; }

/* --- Animaatiot --- */
@keyframes target-flash {
    0%   { background-color: rgba(255, 240, 150, 0);   box-shadow: inset 3px 0 0 rgba(180, 150, 50, 0); }
    10%  { background-color: rgba(255, 240, 150, 0.6); box-shadow: inset 3px 0 0 rgba(180, 150, 50, 0.7); }
    60%  { background-color: rgba(255, 240, 150, 0.6); box-shadow: inset 3px 0 0 rgba(180, 150, 50, 0.7); }
    100% { background-color: rgba(255, 240, 150, 0);   box-shadow: inset 3px 0 0 rgba(180, 150, 50, 0); }
}

/* --- Body-tyyppikohtaiset overridet --- */

/* CARD: iso logo mainblockin sisällä */
body.card .site-logo { padding-bottom: 10px; }
body.card .logo      { width: 400px; }

/* LEGAL & PAGE: pieni logo, leveämpi mainblock, sisältö ylhäältä */
body.legal .site-logo, body.page .site-logo { padding-top: 10px; }
body.legal .center,    body.page .center    { align-items: flex-start; padding-top: 10px; }
body.legal .mainblock, body.page .mainblock { width: 700px; }
body.legal .logo,      body.page .logo      { width: 250px; }

/* --- Mobiili --- */
@media screen and (max-width: 800px) {
    .column                                     { width: 100%; }
    .mainblock                                  { width: 300px; }
    body.card .logo                             { width: 200px; }
    body.legal .logo,      body.page .logo      { width: 150px; }
    body.legal .mainblock, body.page .mainblock { width: 95%; }
    .footer-content a                           { display: block; margin: 6px 0; }
}