/* ==========================================================
   QVSTAMPS - PLATING SERVICES PAGE
   Matches Ask Item / Contact styling
   ========================================================== */


/* ==========================================================
   RESET / BASE
   ========================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #252525;
    background-color: #f6f0e5;
}


/* ==========================================================
   COLOUR VARIABLES
   ========================================================== */

:root {
    --qvs-teal: #1f4f4d;
    --qvs-teal-dark: #173d3b;

    --qvs-gold: #a9893e;
    --qvs-gold-light: #d4bc77;

    --qvs-cream: #f6f0e5;
    --qvs-card: #fbf9f4;

    --qvs-border: #aebbb8;
    --qvs-text: #252525;
    --qvs-soft-text: #5e594e;

    --qvs-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22);
}


/* ==========================================================
   PAGE BACKGROUND
   ========================================================== */

.PS_pageBackground {
    min-height: 100vh;

    padding:
        clamp(18px, 3vh, 36px)
        clamp(18px, 3vw, 60px);

    background-image:
        url("/images/DISPLAY/ask_background.png");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* ==========================================================
   MAIN PAGE PANEL
   ========================================================== */

.PS_page {
    width: min(1180px, 94vw);
    margin: 0 auto;

    background: var(--qvs-cream);

    border: 2px solid var(--qvs-teal);
    border-radius: 24px;

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

    overflow: hidden;
}


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

.PS_header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;

    padding:
        26px
        clamp(28px, 4vw, 52px);

    border-bottom:
        1px solid rgba(169, 137, 62, 0.55);
}

.PS_heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.PS_headingRule {
    width: 70px;
    height: 3px;

    margin-bottom: 7px;

    background: var(--qvs-gold);
}

.PS_heading h1 {
    margin: 0;

    color: var(--qvs-teal);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(28px, 2.4vw, 42px);

    font-weight: 700;

    letter-spacing: 0.02em;
}

.PS_heading p {
    margin: 5px 0 0;

    color: #6b6250;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(15px, 1.1vw, 18px);

    font-style: italic;
}


/* ==========================================================
   HOME BUTTON
   ========================================================== */

.PS_homeButton {
    flex: 0 0 auto;

    min-width: 180px;

    padding: 14px 28px;

    color: var(--qvs-cream);
    background: var(--qvs-teal);

    border: 2px solid var(--qvs-gold);
    border-radius: 28px;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.22);

    font-size: 18px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    letter-spacing: 0.03em;

    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background-color 120ms ease;
}

.PS_homeButton:hover {
    color: #ffffff;
    background: var(--qvs-teal-dark);

    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.3);

    transform: translateY(-1px);
}


/* ==========================================================
   CONTENT WRAPPER
   ========================================================== */

.PS_content {
    padding:
        clamp(22px, 3vw, 42px);
}


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

.PS_card {
    margin-bottom: 18px;

    padding:
        24px
        clamp(24px, 3vw, 36px);

    background: var(--qvs-card);

    border: 1px solid var(--qvs-border);
    border-radius: 16px;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.11);
}

.PS_card h2,
.PS_sampleCard h2 {
    margin:
        0
        0
        10px;

    color: var(--qvs-teal);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(24px, 1.8vw, 30px);

    line-height: 1.25;
}

.PS_card h2::after {
    content: "";

    display: block;

    width: 52px;
    height: 3px;

    margin-top: 8px;

    background: var(--qvs-gold);
}

.PS_card p,
.PS_sampleCard p {
    margin: 0;

    color: var(--qvs-soft-text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;
    line-height: 1.72;
}

.PS_card p + p {
    margin-top: 12px;
}


/* ==========================================================
   CERTIFICATE NOTE
   ========================================================== */

.PS_note {
    font-size: 19px !important;

    color: #6b6250 !important;

    font-style: italic;
}


/* ==========================================================
   EMAIL LINK
   ========================================================== */

.PS_emailLine {
    margin-top: 14px !important;

    font-weight: 700;
}

.PS_emailLine a {
    color: var(--qvs-teal);

    text-decoration: underline;

    text-underline-offset: 3px;
}

.PS_emailLine a:hover {
    color: var(--qvs-teal-dark);
}


/* ==========================================================
   SAMPLE CERTIFICATE CARD
   ========================================================== */

.PS_sampleCard {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;

    margin-top: 24px;

    padding:
        24px
        clamp(24px, 3vw, 36px);

    background: #f3eee3;

    border: 1px solid var(--qvs-border);
    border-radius: 16px;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.11);
}

.PS_sampleButton {
    flex: 0 0 auto;

    min-width: 260px;

    padding: 14px 28px;

    color: var(--qvs-cream);
    background: var(--qvs-teal);

    border: 2px solid var(--qvs-gold);
    border-radius: 30px;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.22);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 18px;
    font-weight: 700;

    text-align: center;
    text-decoration: none;

    transition:
        transform 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease;
}

.PS_sampleButton:hover {
    color: #ffffff;
    background: var(--qvs-teal-dark);

    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.3);

    transform: translateY(-1px);
}


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

.PS_footer {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    padding: 14px 20px;

    color: var(--qvs-gold-light);
    background: var(--qvs-teal);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.04em;

    text-align: center;
    text-transform: uppercase;
}

.PS_footer span {
    color: var(--qvs-gold);
}


/* ==========================================================
   TABLET / SMALL DESKTOP
   ========================================================== */

@media (max-width: 1100px) {

    .PS_page {
        width: min(96vw, 1000px);
    }

    .PS_content {
        padding: 22px;
    }

    .PS_card p,
    .PS_sampleCard p {
        font-size: 20px;
    }

    .PS_sampleButton {
        min-width: 230px;
    }

}


/* ==========================================================
   MOBILE / NARROW SCREEN
   ========================================================== */

@media (max-width: 760px) {

    .PS_pageBackground {
        padding: 10px;

        background-attachment: scroll;
    }

    .PS_page {
        width: 100%;

        border-radius: 16px;
    }

    .PS_header {
        flex-direction: column;

        align-items: stretch;

        padding: 22px;
    }

    .PS_homeButton {
        width: 100%;
        min-width: 0;
    }

    .PS_content {
        padding: 14px;
    }

    .PS_card {
        padding: 20px 18px;
    }

    .PS_card p,
    .PS_sampleCard p {
        font-size: 19px;
        line-height: 1.7;
    }

    .PS_note {
        font-size: 18px !important;
    }

    .PS_sampleCard {
        flex-direction: column;

        align-items: stretch;

        gap: 18px;
    }

    .PS_sampleButton {
        width: 100%;
        min-width: 0;
    }

}