/* ==========================================================
   ZENTIOHUB
   STYLE.CSS
   Version: 1.0
   ========================================================== */

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

body {

    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);

    color: var(--color-text);
    background: var(--color-background);

}

/* ==========================================================
   CONTAINER
========================================================== */

.container {

    width: min(100% - 2rem, var(--container-width));
    margin-inline: auto;

}

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

main {

    display: block;

}

/* ==========================================================
   SECTIONS
========================================================== */

section {

    padding-block: var(--space-9);

}

section:nth-child(even) {

    background: var(--color-surface);

}

/* ==========================================================
   HEADINGS
========================================================== */

h1,
h2,
h3,
h4 {

    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);

}

h1 {

    font-size: var(--font-size-3xl);

}

h2 {

    font-size: var(--font-size-2xl);

}

h3 {

    font-size: var(--font-size-xl);

}

h4 {

    font-size: var(--font-size-lg);

}

/* ==========================================================
   PARAGRAPHS
========================================================== */

p {

    color: var(--color-text-light);
    margin-top: var(--space-3);

}

/* ==========================================================
   SECTION HEADER
========================================================== */

.section__eyebrow {

    display: inline-block;

    margin-bottom: var(--space-3);

    color: var(--color-primary);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    text-transform: uppercase;

    letter-spacing: .08em;

}

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

.cta__button,
.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .5rem;

    padding: .95rem 2rem;

    border-radius: var(--radius-pill);

    background: var(--color-primary);

    color: #ffffff;

    font-weight: var(--font-weight-semibold);

    transition: var(--transition-normal);

}

.cta__button:hover,
.button:hover {

    background: var(--color-primary-dark);

    transform: translateY(-2px);

}

/* ==========================================================
   CARDS
========================================================== */

.review__card,
.glance__card,
.assessment__card,
.educational__card,
.lifestyle__card,
.transparency__card {

    background: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

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

    padding: var(--space-6);

}

/* ==========================================================
   IMAGES
========================================================== */

img {

    border-radius: var(--radius-md);

}

/* ==========================================================
   TABLES
========================================================== */

table {

    width: 100%;

}

th,
td {

    padding: .75rem;

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

    text-align: left;

}

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

footer {

    padding-block: var(--space-8);

    background: #111827;

    color: #ffffff;

}

footer p,
footer a {

    color: rgba(255,255,255,.85);

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center {

    text-align: center;

}

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }