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

/* =================================================================
   HOME - PRIVACY POLICY - V2 LOOK
   File: privacyPolicyV2.css
   Linked ONLY by Views/Home/PrivacyPolicy.cshtml, after
   footerLinkCont.css (shared with Disclaimer, TermsAndConditions,
   Partners and whoweare - left untouched).
   Every selector is scoped under .pp-v2, which the view puts on
   section.pageNamePanel and section.notification_holder.
   Same look as disclaimerV2.css / termsAndConditionsV2.css. The
   copy has no headings - seven plain paragraphs - so the card is a
   single readable column. Pure CSS - copy and link unchanged.
   ================================================================= */

/* -- Design tokens (same values as the EOI V2 pages) --------------- */
.pp-v2 {
    --pp-bg: #F4F6FB;
    --pp-card: #FFFFFF;
    --pp-primary: #0B2253;
    --pp-blue: #1A6DDB;
    --pp-blue-dk: #0B52B5;
    --pp-text: #1A2740;
    --pp-body: #475467;
    --pp-border: #E2E8F0;
    --pp-light: #EEF3FF;
    --pp-focus: rgba(26,109,219,.35);
    --pp-shadow: 0 18px 40px -18px rgba(11,34,83,.22);
    --pp-shadow-sm: 0 1px 2px rgba(11,34,83,.06);
    --pp-radius: 18px;
    --pp-font: 'Manrope','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

.pp-v2,
.pp-v2 * {
    font-family: var(--pp-font);
}

/* =================================================================
   0. CONTENT WIDTH - one 1340px column shared by title and card
   ================================================================= */
.pageNamePanel.pp-v2 > .center,
.notification_holder.pp-v2 > .center {
    width: 95%;
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .pageNamePanel.pp-v2 > .center,
    .notification_holder.pp-v2 > .center {
        width: calc(100% - 32px);
    }
}

/* =================================================================
   1. PAGE TITLE - plain navy heading with accent bar, no photo banner
   ================================================================= */
.pageNamePanel.pp-v2 {
    background: var(--pp-bg);
    padding-top: 65px; /* same as my-project.css: clears the fixed top bar */
}

    .pageNamePanel.pp-v2 .center {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px 24px;
        padding-top: 44px;
        padding-bottom: 28px;
        text-align: left;
    }

        /* style.css clearfix would become a stray flex item */
        .pageNamePanel.pp-v2 .center::after {
            display: none;
        }

    .pageNamePanel.pp-v2 .pageName {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 0;
        font-size: 26px;
        line-height: 34px;
        font-weight: 800;
        letter-spacing: -0.4px;
        text-align: left;
        color: var(--pp-primary);
    }

        .pageNamePanel.pp-v2 .pageName::before {
            content: '';
            flex: 0 0 4px;
            width: 4px;
            height: 26px;
            border-radius: 4px;
            background: linear-gradient(180deg, var(--pp-blue) 0%, #065b95 100%);
        }

    /* -- Back to Home: outline pill, CSS chevron (the old arrow
          sprite is white and disappears on the light title band) -- */
    .pageNamePanel.pp-v2 .backNowBtn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        float: none;
        width: auto;
        height: 40px;
        margin: 0;
        padding: 0 18px 0 16px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
        color: var(--pp-primary);
        background: var(--pp-card);
        border: 1px solid var(--pp-border);
        border-radius: 999px;
        box-shadow: var(--pp-shadow-sm);
        white-space: nowrap;
        transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

        .pageNamePanel.pp-v2 .backNowBtn::before {
            content: '';
            position: static;
            flex: 0 0 auto;
            width: 7px;
            height: 7px;
            background: none;
            border-left: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
            transition: transform .2s ease;
        }

        .pageNamePanel.pp-v2 .backNowBtn:hover {
            color: var(--pp-blue-dk);
            background: var(--pp-light);
            border-color: var(--pp-blue);
        }

            .pageNamePanel.pp-v2 .backNowBtn:hover::before {
                background: none;
                transform: translateX(-2px) rotate(45deg);
            }

        .pageNamePanel.pp-v2 .backNowBtn:focus-visible {
            outline: 3px solid var(--pp-focus);
            outline-offset: 2px;
        }

        .pageNamePanel.pp-v2 .backNowBtn:active {
            background: #E1EAFE;
            box-shadow: none;
        }

/* =================================================================
   2. CONTENT SECTION + DOCUMENT CARD
      Markup: seven flat p inside .privacyPolicyCont, no headings.
   ================================================================= */
.notification_holder.pp-v2 {
    background: var(--pp-bg);
    padding: 0 0 64px;
}

    .notification_holder.pp-v2 .privacyPolicyCont {
        padding: 48px 56px 52px;
        background: var(--pp-card);
        border: 1px solid var(--pp-border);
        border-radius: var(--pp-radius);
        box-shadow: var(--pp-shadow);
        overflow-wrap: break-word;
    }

        .notification_holder.pp-v2 .privacyPolicyCont p {
            margin: 0;
            padding: 0;
            font-size: 16px;
            line-height: 28px;
            font-weight: 400;
            color: var(--pp-body);
        }

            .notification_holder.pp-v2 .privacyPolicyCont p + p {
                margin-top: 20px;
            }

            /* lead paragraph - the welcome line reads as the intro */
            .notification_holder.pp-v2 .privacyPolicyCont p:first-child {
                font-size: 17px;
                line-height: 30px;
                font-weight: 500;
                color: var(--pp-text);
            }

                .notification_holder.pp-v2 .privacyPolicyCont p:first-child + p {
                    margin-top: 24px;
                }

            /* footerLinkCont.css p:last-child padding-bottom: 20px */
            .notification_holder.pp-v2 .privacyPolicyCont p:last-child {
                padding-bottom: 0;
            }

/* =================================================================
   3. RESPONSIVE
   ================================================================= */
@media screen and (max-width: 1024px) {
    .notification_holder.pp-v2 .privacyPolicyCont {
        padding: 40px 40px 44px;
    }
}

@media screen and (max-width: 768px) {
    .pageNamePanel.pp-v2 .center {
        padding-top: 32px;
        padding-bottom: 22px;
    }

    .pageNamePanel.pp-v2 .pageName {
        font-size: 22px;
        line-height: 30px;
    }

        .pageNamePanel.pp-v2 .pageName::before {
            height: 22px;
        }

    .notification_holder.pp-v2 {
        padding-bottom: 48px;
    }

        .notification_holder.pp-v2 .privacyPolicyCont {
            padding: 32px 28px 36px;
            border-radius: 16px;
        }
}

@media screen and (max-width: 480px) {
    .pageNamePanel.pp-v2 .center {
        padding-top: 24px;
        padding-bottom: 18px;
        gap: 14px;
    }

    .pageNamePanel.pp-v2 .backNowBtn {
        height: 38px;
        font-size: 13px;
    }

    .notification_holder.pp-v2 {
        padding-bottom: 36px;
    }

        .notification_holder.pp-v2 .privacyPolicyCont {
            padding: 24px 18px 28px;
            border-radius: 14px;
        }

            .notification_holder.pp-v2 .privacyPolicyCont p {
                font-size: 15px;
                line-height: 26px;
            }

                .notification_holder.pp-v2 .privacyPolicyCont p + p {
                    margin-top: 16px;
                }

                .notification_holder.pp-v2 .privacyPolicyCont p:first-child {
                    font-size: 16px;
                    line-height: 28px;
                }

                    .notification_holder.pp-v2 .privacyPolicyCont p:first-child + p {
                        margin-top: 20px;
                    }
}

@media (prefers-reduced-motion: reduce) {
    .pageNamePanel.pp-v2 .backNowBtn,
    .pageNamePanel.pp-v2 .backNowBtn::before {
        transition: none;
    }
}