/* =========================================================
   PAGE STYLES
   Osnovni izgled stranica
   ========================================================= */



/* =========================================================
   1) PAGE WRAPPER
   ========================================================= */

.page-wrapper {
    padding-top: 40px;
    padding-bottom: 70px;
}



/* =========================================================
   2) PAGE HEADER
   ========================================================= */

.page-header {
    margin-bottom: 28px;
}



/* =========================================================
   3) PAGE TITLE
   ========================================================= */

.page-title {
    margin: 0;
    font-size: clamp(30px, 4vw, 33px);
    line-height: 1.08;
    font-weight: 600;
    color: var(--color-accent);
    font-family: "Exo 2", 'Courier New';
    text-transform: uppercase;
}



/* =========================================================
   4) PAGE TEXT
   ========================================================= */

.page-text {
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text);
    text-align: justify;
}

    .page-text > *:first-child {
        margin-top: 0;
    }

    .page-text > *:last-child {
        margin-bottom: 0;
    }



    /* =========================================================
   5) PARAGRAPHS
   ========================================================= */

    .page-text p {
        margin: 0 0 12px 0;
    }



    /* =========================================================
   6) EMPHASIS
   ========================================================= */

    .page-text strong {
        color: var(--color-primary);
        font-weight: 700;
    }



    /* =========================================================
   7) LINKS INSIDE PAGE TEXT
   ========================================================= */

    .page-text a {
        color: var(--color-link);
        text-decoration: none;
    }

        .page-text a:hover {
            text-decoration: underline;
        }



    /* =========================================================
   8) IMAGES INSIDE PAGE TEXT
   ========================================================= */

    .page-text img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 24px auto;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
    }



    /* =========================================================
   9) HEADINGS INSIDE PAGE TEXT
   ========================================================= */

    .page-text h2,
    .page-text h3,
    .page-text h4 {
        margin: 32px 0 14px 0;
        line-height: 1.2;
        color: var(--color-primary);
        font-family: "Exo 2", 'Courier New';
        font-weight: 600;
    }

    .page-text h2 {
        font-size: 28px;
    }

    .page-text h3 {
        font-size: 24px;
    }

    .page-text h4 {
        font-size: 20px;
    }



    /* =========================================================
   10) BLOCKQUOTE
   ========================================================= */

    .page-text blockquote {
        margin: 24px 0;
        padding: 16px 20px;
        border-left: 4px solid var(--color-accent);
        background: var(--color-bg-soft);
    }






/* =========================================================
   11) MOBILE
   ========================================================= */

@media (max-width: 768px) {
    .page-wrapper {
        padding-top: 24px;
        padding-bottom: 44px;
    }

    .page-header {
        margin-bottom: 22px;
    }

    .page-title {
        font-size: 28px;
        line-height: 1.12;
    }

    .page-text {
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
    }

        .page-text p {
            margin-bottom: 10px;
        }

        .page-text h2 {
            font-size: 24px;
        }

        .page-text h3 {
            font-size: 20px;
        }

        .page-text h4 {
            font-size: 18px;
        }

        .page-text img {
            margin: 20px auto;
        }

        .page-text blockquote {
            padding: 14px 16px;
        }
}