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

/* =================================================================
   HOME - DISCLAIMER - V2 LOOK
   File: disclaimerV2.css
   Linked ONLY by Views/Home/Disclaimer.cshtml, after
   footerLinkCont.css (shared with PrivacyPolicy, TermsAndConditions,
   Partners and whoweare - left untouched).
   Every selector is scoped under .dsc-v2, which the view puts on
   section.pageNamePanel and section.notification_holder.
   Pure CSS - the copy and the "Back to Home" link are unchanged.
   ================================================================= */

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

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

/* =================================================================
   0. CONTENT WIDTH - one 1340px column shared by title and card
      (same max-width as /my-projects and the EOI V2 pages)
   ================================================================= */
.pageNamePanel.dsc-v2 > .center,
.notification_holder.dsc-v2 > .center {
    width: 95%;
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* no side padding, so the side gutter comes from the width */
@media screen and (max-width: 768px) {
    .pageNamePanel.dsc-v2 > .center,
    .notification_holder.dsc-v2 > .center {
        width: calc(100% - 32px);
    }
}

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

    .pageNamePanel.dsc-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.dsc-v2 .center::after {
            display: none;
        }

    .pageNamePanel.dsc-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(--dsc-primary);
    }

        .pageNamePanel.dsc-v2 .pageName::before {
            content: '';
            flex: 0 0 4px;
            width: 4px;
            height: 26px;
            border-radius: 4px;
            background: linear-gradient(180deg, var(--dsc-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.dsc-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(--dsc-primary);
        background: var(--dsc-card);
        border: 1px solid var(--dsc-border);
        border-radius: 999px;
        box-shadow: var(--dsc-shadow-sm);
        white-space: nowrap;
        transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

        .pageNamePanel.dsc-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.dsc-v2 .backNowBtn:hover {
            color: var(--dsc-blue-dk);
            background: var(--dsc-light);
            border-color: var(--dsc-blue);
        }

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

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

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

/* =================================================================
   2. CONTENT SECTION + DOCUMENT CARD
   ================================================================= */
.notification_holder.dsc-v2 {
    background: var(--dsc-bg);
    padding: 0 0 64px;
}

    .notification_holder.dsc-v2 .disclaimerCont {
        padding: 48px 56px 52px;
        background: var(--dsc-card);
        border: 1px solid var(--dsc-border);
        border-radius: var(--dsc-radius);
        box-shadow: var(--dsc-shadow);
        overflow-wrap: break-word;
        /* Numbers each h3 clause below as 01, 02, 03... (replaces a generic
           document icon repeated identically on every heading) - same
           pattern as termsAndConditionsV2.css's identical redesign. */
        counter-reset: dsc-clause;
    }

        /* -- Document head: brand eyebrow + document title -------- */
        .notification_holder.dsc-v2 .disclaimerCont h2 {
            margin: 0;
            padding: 0;
            font-size: 12px;
            line-height: 18px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--dsc-blue);
        }

            .notification_holder.dsc-v2 .disclaimerCont h2 + h2 {
                margin: 8px 0 36px;
                padding: 0 0 28px;
                font-size: 28px;
                line-height: 38px;
                letter-spacing: -0.4px;
                text-transform: none;
                color: var(--dsc-primary);
                border-bottom: 1px solid var(--dsc-border);
            }

        /* -- Clause headings + body copy -------------------------- */
        .notification_holder.dsc-v2 .disclaimerCont h3 {
            display: flex;
            align-items: flex-start; /* badge stays on line 1 when the heading wraps */
            gap: 12px;
            margin: 0;
            padding: 0;
            font-size: 18px;
            line-height: 26px;
            font-weight: 700;
            color: var(--dsc-text);
            counter-increment: dsc-clause;
        }

            .notification_holder.dsc-v2 .disclaimerCont h3::before {
                content: counter(dsc-clause, decimal-leading-zero);
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 28px;
                width: 28px;
                height: 28px;
                margin-top: -1px; /* (26px line - 28px tile) / 2 */
                border-radius: 8px;
                background: var(--dsc-light);
                color: var(--dsc-blue);
                font-size: 11.5px;
                font-weight: 800;
                letter-spacing: 0.2px;
            }

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

        .notification_holder.dsc-v2 .disclaimerCont h3 + p {
            margin-top: 12px;
            padding-left: 40px; /* lines the copy up with the heading text: 28px tile + 12px gap */
        }

        /* divider between clauses - a soft fade rather than a flat line,
           same as termsAndConditionsV2.css's identical redesign. */
        .notification_holder.dsc-v2 .disclaimerCont p + h3 {
            position: relative;
            margin-top: 28px;
            padding-top: 29px;
        }

            .notification_holder.dsc-v2 .disclaimerCont p + h3::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 1px;
                background: linear-gradient(90deg, var(--dsc-border) 0%, var(--dsc-border) 65%, transparent 100%);
            }

        .notification_holder.dsc-v2 .disclaimerCont p:last-child {
            padding-bottom: 0;
        }

/* -- Desktop: full width, same as every other width - this file used to
      grid headings into a left column and copy into a right one here,
      which read as two unrelated pieces of content side by side rather
      than a heading over its own paragraph. Removed in favour of the
      single stacked layout (section 2 above) at every width, same fix as
      termsAndConditionsV2.css. The "premium" touch is the bigger numbered
      badge and generous clause spacing below, not a narrower column. ---- */
@media screen and (min-width: 1025px) {
    .notification_holder.dsc-v2 .disclaimerCont {
        padding: 56px 64px 60px;
    }

        .notification_holder.dsc-v2 .disclaimerCont h3 {
            font-size: 20px;
            line-height: 28px;
        }

            .notification_holder.dsc-v2 .disclaimerCont h3::before {
                flex: 0 0 34px;
                width: 34px;
                height: 34px;
                margin-top: -3px; /* (28px line - 34px tile) / 2 */
                font-size: 13px;
            }

        .notification_holder.dsc-v2 .disclaimerCont h3 + p {
            padding-left: 46px; /* 34px badge + 12px gap, matches the wider heading badge above */
        }

        .notification_holder.dsc-v2 .disclaimerCont p + h3 {
            margin-top: 36px;
            padding-top: 37px;
        }
}

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

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

    .pageNamePanel.dsc-v2 .pageName {
        display: flex;
        font-size: 22px;
        line-height: 30px;
        text-align: left;
    }

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

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

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

            .notification_holder.dsc-v2 .disclaimerCont h2 + h2 {
                margin-bottom: 28px;
                padding-bottom: 22px;
                font-size: 24px;
                line-height: 32px;
            }

            .notification_holder.dsc-v2 .disclaimerCont p + h3 {
                margin-top: 26px;
                padding-top: 26px;
            }
}

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

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

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

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

            .notification_holder.dsc-v2 .disclaimerCont h2 + h2 {
                margin-bottom: 22px;
                padding-bottom: 18px;
                font-size: 21px;
                line-height: 29px;
            }

            .notification_holder.dsc-v2 .disclaimerCont h3 {
                font-size: 17px;
                line-height: 24px;
            }

                .notification_holder.dsc-v2 .disclaimerCont h3::before {
                    margin-top: -2px; /* (24px line - 28px tile) / 2 */
                }

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

            .notification_holder.dsc-v2 .disclaimerCont h3 + p {
                padding-left: 0;
            }
}

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