/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #202124;
    background-color: #1C666D;
}

body {
    margin: 0;
}

/* =========================================================
   HEADER / LOGO
   ========================================================= */

.site-header {
    width: 100%;
    padding: 10px 5px 0.5px;
    text-align: center;
}

.site-logo {
    display: inline-block;
    width: 220px;
    max-width: 50%;
    height: auto;
}

.site-header a {
    display: inline-block;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    width: 100%;
    padding: 25px 20px;
    text-align: center;
    color: #fff;
    font-size: 0.9rem;
}

.site-footer p {
    margin: 0;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.wrap {
    width: min(1120px, 92%);
    margin: 0 auto;
    padding: 1px 0 70px;
}


/* =========================================================
   INTRO / PAGE HEADING
   ========================================================= */

.intro {
    text-align: center;
    margin-bottom: 38px;
}

.intro h1 {
    color: #fff;
}

.intro p {
    color: #fff;
}


/* =========================================================
   BROCHURES
   ========================================================= */

.brochures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px;
    align-items: start;
    
}

.brochure {
    text-align: center;
}

.brochure h2 {
    margin: 22px 0 15px;
    font-size: 1.45rem;
    color: #fff;

}


/* =========================================================
   BROCHURE COVERS
   ========================================================= */

.cover-link {
    display: block;
    background: #fff;
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.13);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.cover-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 42px rgba(0, 0, 0, 0.2);
}

.cover-link img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #fff;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 7px;

    background: #202124;
    color: #fff;

    font-weight: 650;
    text-decoration: none;
}

.button:hover {
    opacity: 0.86;
}


/* =========================================================
   STATISTICS PAGE
   ========================================================= */

.stats-wrap {
    max-width: 900px;
}

.summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.summary div,
.table-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
}

.summary div {
    padding: 25px;
    text-align: center;
}

.summary strong {
    display: block;
    font-size: 2.2rem;
}

.summary span {
    color: #666;
}

.stats-home {
    color: #fff;
    text-decoration: none;
}

.stats-home:hover {
    text-decoration: underline;
}

/* =========================================================
   STATISTICS TABLE
   ========================================================= */

.table-card {
    overflow: hidden;
}

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

th,
td {
    padding: 15px 18px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

th:nth-child(n + 2),
td:nth-child(n + 2) {
    text-align: right;
}

thead {
    background: #202124;
    color: #fff;
}

tbody tr:last-child td {
    border-bottom: 0;
}

.total-row {
    font-weight: 700;
    background: #f4f4f4;
}


/* =========================================================
   STATISTICS HISTORY
   ========================================================= */

.history {
    margin-top: 35px;
}

.history h2 {
    font-size: 1.4rem;
    color: #fff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .wrap {
        padding-top: 30px;
    }

    .brochures {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .summary {
        grid-template-columns: 1fr;
    }

    th,
    td {
        padding: 12px;
    }
}