/* ==========================================================
   AL-QAND EXCHANGE COMPANY
   POLICY PAGES - FINAL STYLESHEET

   Pages:
   - Privacy Policy
   - Terms & Conditions
   - Account Deletion

   Languages:
   - English (LTR)
   - Arabic (RTL)
========================================================== */


/* ==========================================================
   1. IMPORTS
========================================================== */

@import url('/css/base/variables.css');

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700;800&family=Poppins:wght@400;500;600;700&display=swap');


/* ==========================================================
   2. GLOBAL STYLES
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    background: linear-gradient(
        180deg,
        var(--bg-top) 0%,
        var(--bg-mid-start) 35%,
        var(--bg-mid-end) 65%,
        var(--bg-bottom) 100%
    );

    background-attachment: fixed;

    color: var(--ink);

    font-family: var(--font-primary);

    line-height: 1.85;
}


/* ==========================================================
   3. ARABIC LANGUAGE
========================================================== */

html[lang="ar"] body {
    font-family: var(--font-arabic);
    direction: rtl;
}


/* ==========================================================
   4. HEADER
   Original Al-Qand website appearance
========================================================== */

header.policy-header {

    position: -webkit-sticky;
    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    background: linear-gradient(
        180deg,
        rgb(0 0 0 / 73%),
        rgb(0 0 0 / 47%)
    );

    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);

    border-bottom: 2px solid var(--orange);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* ==========================================================
   5. HEADER NAVIGATION
========================================================== */

header.policy-header nav.policy-nav {

    max-width: 1900px;

    min-height: 105px;

    margin: 0 auto;

    padding: 12px 42px;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/* ==========================================================
   6. LOGO
========================================================== */

.policy-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    text-decoration: none;
}

.policy-logo img {

    display: block;

    width: 70px;

    height: 70px;

    object-fit: contain;
}


/* ==========================================================
   7. HEADER RIGHT GROUP
   Social media + language switch
========================================================== */

.policy-header-right {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 45px;
}


/* ==========================================================
   8. SOCIAL MEDIA ICONS
========================================================== */

.policy-social {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 22px;
}

.policy-social a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.policy-social a:hover {

    color: var(--orange-soft);

    transform: scale(1.1);
}

.policy-social svg {

    display: block;

    width: 23px;

    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ==========================================================
   9. LANGUAGE SWITCH
========================================================== */

.policy-lang {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--orange-soft);

    text-decoration: none;

    font-family: 'Poppins', Arial, sans-serif;

    font-size: 17px;

    font-weight: 700;

    white-space: nowrap;

    transition: color 0.25s ease;
}

.policy-lang:hover {

    color: #ffffff;
}


/* ==========================================================
   10. ARABIC HEADER DIRECTION
========================================================== */

html[dir="rtl"] .policy-nav {

    direction: rtl;
}

html[dir="rtl"] .policy-header-right {

    direction: rtl;
}


/* ==========================================================
   11. MAIN CONTENT CARD
========================================================== */

main {

    max-width: 920px;

    margin: 46px auto;

    padding: 40px 48px;

    background: var(--card);

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

    border-radius: 18px;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


/* ==========================================================
   12. PAGE TITLE
========================================================== */

h1 {

    font-size: clamp(1.8rem, 4vw, 2.5rem);

    color: var(--orange);

    margin: 0 0 10px;

    font-weight: 700;
}


/* ==========================================================
   13. SECTION HEADINGS
========================================================== */

h2 {

    font-size: 1.24rem;

    margin: 28px 0 8px;

    color: var(--ink);

    border-inline-start: 4px solid var(--orange);

    padding-inline-start: 12px;

    font-weight: 700;
}


/* ==========================================================
   14. PARAGRAPHS
========================================================== */

p {

    margin: 10px 0;

    white-space: pre-wrap;
}


/* ==========================================================
   15. EFFECTIVE DATE
========================================================== */

.date {

    color: var(--ink-muted);

    margin-bottom: 22px;
}


/* ==========================================================
   16. FOOTER
========================================================== */

footer {

    text-align: center;

    color: var(--ink-soft);

    padding: 20px 16px 40px;
}

footer a {

    color: var(--orange-dark);

    text-decoration: none;

    margin: 0 10px;

    transition: color 0.25s ease;
}

footer a:hover {

    color: var(--orange);
    text-decoration: underline;
}


/* ==========================================================
   17. RESPONSIVE - TABLETS
========================================================== */

@media (max-width: 900px) {

    header.policy-header nav.policy-nav {

        padding: 12px 20px;
    }

    .policy-header-right {

        gap: 20px;
    }

    .policy-social {

        gap: 12px;
    }

    .policy-social svg {

        width: 19px;
        height: 19px;
    }
}


/* ==========================================================
   18. RESPONSIVE - MOBILE
========================================================== */

@media (max-width: 700px) {

    header.policy-header nav.policy-nav {

        min-height: 80px;

        padding: 10px 18px;
    }

    .policy-logo img {

        width: 55px;

        height: 55px;
    }

    .policy-header-right {

        gap: 15px;
    }

    .policy-social {

        display: none;
    }

    .policy-lang {

        font-size: 16px;
    }

    main {

        margin: 20px 12px;

        padding: 24px 20px;
    }
}


/* ==========================================================
   19. EXTRA SMALL SCREENS
========================================================== */

@media (max-width: 400px) {

    .policy-logo img {

        width: 45px;

        height: 45px;
    }

    .policy-lang {

        font-size: 14px;
    }

    main {

        padding: 20px 16px;
    }

    h1 {

        font-size: 1.8rem;
    }

    h2 {

        font-size: 1.1rem;
    }
}


/* ==========================================================
   END OF STYLESHEET
   AL-QAND EXCHANGE COMPANY
========================================================== */