/* =============================================================
   TP Data Privacy 2026 — Design System Override
   Tokens from UI Kit + exact measurements from PDF extraction
   PDF font sizes confirmed: hero 64pt, h2 56pt, body 24pt,
   btn-label 18pt, badge/dropdown 14pt. PDF pt = CSS px (Figma).
   ============================================================= */

/* ---------- Design Tokens ----------------------------------- */
:root {
    --tp26-primary:         #8050FF;
    --tp26-primary-hover:   #4D3293;
    --tp26-focus:           #5318BF;
    --tp26-badge-bg:        #ECE8FF;
    --tp26-badge-text:      #5318BF;
    --tp26-border:          #CED6DE;
    --tp26-hover-bg:        #F4F6F8;
    --tp26-body:            #3E4854;
    --tp26-title:           #010101;
    --tp26-icon:            #8B9EB3;
}

/* ---------- Global font override for this page -------------- */
#index,
#index * {
    font-family: "TP Sans", "Noto Sans", Arial, sans-serif !important;
}

#index .fa,
#index [class^="fa-"],
#index [class*=" fa-"] {
    font-family: FontAwesome !important;
}


/* =============================================================
   HERO — full-viewport breakout from any centered parent container
   ============================================================= */
.dsr-header {
    background-color: var(--tp26-primary) !important;
    height: auto !important;
    min-height: unset !important;
    padding: 72px 40px 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Badge pill "DATA AND PRIVACY" — 14px Medium confirmed */
.dsr-badge {
    display: inline-block;
    background-color: var(--tp26-badge-bg);
    color: var(--tp26-badge-text) !important;
    font-family: "TP Sans", "Noto Sans", Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em;
    padding: 5px 12px;
    border-radius: 0;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* Hero title — 64px ExtraLight, centered, white */
.dsr-hero-title {
    font-family: "TP Sans", "Noto Sans", Arial, sans-serif !important;
    font-weight: 200 !important;
    font-size: 64px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    color: #FFFFFF !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 660px !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Suppress old hero elements */
.dsr-header h1:not(.dsr-hero-title),
.dsr-header h2,
.dsr-header .tp-title {
    display: none !important;
}


/* =============================================================
   MAIN CONTAINER
   ============================================================= */
#index #main-menu.container-fluid,
html body #index #main-menu {
    max-width: 1440px !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =============================================================
   LANGUAGE SELECTOR
   ============================================================= */
.dsr-language-selector {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 0 !important;
}

#index #choose-language {
    display: block !important;
    font-weight: 300 !important;
    font-size: 24px !important;
    line-height: 32px !important;
    color: #000000 !important;
    margin: 0 0 24px 0 !important;   /* 24px gap to dropdown per UI Kit */
    white-space: nowrap;
}

/* Language label and dropdown are STACKED (column), not inline */
.dsr-language-selector #top-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Dropdown button */
#index #LanguageDropDownListButton,
.dsr-language-selector .dropdown-toggle {
    background-color: #FFFFFF !important;
    border: 1px solid var(--tp26-border) !important;
    border-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    color: var(--tp26-body) !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    height: 36px !important;
    min-width: 130px !important;
    width: auto !important;
    padding: 5px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: none !important;
    text-align: left !important;
    text-transform: none !important;
    gap: 8px;
}

#index #LanguageDropDownListButton::after {
    color: var(--tp26-icon) !important;
    flex-shrink: 0;
}

#index #LanguageDropDownListButton:hover {
    background-color: var(--tp26-hover-bg) !important;
    border-color: var(--tp26-border) !important;
    color: var(--tp26-body) !important;
}

#index #LanguageDropDownListButton:focus,
#index #LanguageDropDownListButton:focus-visible {
    border-color: var(--tp26-focus) !important;
    box-shadow: 0 0 0 3px rgba(83, 24, 191, 0.18) !important;
    outline: none !important;
}

.dsr-language-selector .dropdown-menu,
#LanguageDropDownList {
    border: 1px solid var(--tp26-border) !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    min-width: 130px !important;
    padding: 0 !important;
}

#index .dsr-language-selector .dropdown-item {
    font-weight: 300 !important;
    font-size: 14px !important;
    color: var(--tp26-body) !important;
    padding: 8px 12px !important;
    border-radius: 0 !important;
    text-transform: none !important;
    border-bottom: 1px solid var(--tp26-border) !important;
}

#index .dsr-language-selector .dropdown-item:last-child {
    border-bottom: none !important;
}

.dsr-language-selector .dropdown-item img {
    display: none !important;
}

#index .dsr-language-selector .dropdown-item.active {
    display: none !important;
}

#index .dsr-language-selector .dropdown-item:hover,
#index .dsr-language-selector .dropdown-item:focus {
    background-color: var(--tp26-hover-bg) !important;
    color: var(--tp26-body) !important;
    background-image: none !important;
}

#LanguageDropDownListButton img {
    display: none !important;
}


/* =============================================================
   CARD GRID
   ============================================================= */
#index .grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    margin-top: 0 !important;
    margin-bottom: 80px !important;
}

#index hr {
    display: none !important;
}


/* =============================================================
   CARD SECTIONS
   Sections use flex-wrap so multiple buttons flow side-by-side
   ============================================================= */
#index section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    column-gap: 8px !important;     /* 8px gap between side-by-side buttons per UI Kit */
    row-gap: 0 !important;
}

/* Image, h2, p span the full row width */
#index section > img,
#index section > h2,
#index section > p {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

#index section img {
    width: 100% !important;
    max-width: 100% !important;   /* override DSRHomeNewDesign max-width:430px */
    aspect-ratio: 640 / 296;
    object-fit: cover;
    /* The source photos are ~3:2 and the card slot is ~2.16:1, so `cover` drops
       ~30% of the height. Anchoring the crop near the top (instead of the
       default 50%) keeps the subjects' heads inside the frame. */
    object-position: center 10%;
    border-radius: 0 !important;
    margin-bottom: 24px !important;
    display: block;
    height: auto !important;
}

#index section h2 {
    font-family: "TP Sans", "Noto Sans", Arial, sans-serif !important;
    font-weight: 200 !important;
    font-size: 56px !important;
    line-height: 1.1 !important;
    color: var(--tp26-title) !important;
    margin: 0 0 24px 0 !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    letter-spacing: -0.01em !important;
}

#index section p {
    font-weight: 300 !important;
    font-size: 24px !important;
    line-height: 34px !important;
    color: var(--tp26-body) !important;
    margin: 0 0 24px 0 !important;
    text-align: left !important;
}


/* =============================================================
   BUTTONS — PILL shape, 18px (confirmed 18pt from PDF)
   Flex children → auto width → multiple fit side-by-side

   Hover matches the TP corporate pattern: the darker fill wipes in
   from the left edge to the right, and the north-east arrow nudges
   in the same direction. The wipe is a gradient layer sized 0 → 100%
   on top of the resting background-color, so no extra markup is
   needed and the resting/hovered colours stay exactly per UI Kit.
   ============================================================= */
#index section > .btn-link,
#index section > button:not(.dropdown-toggle) {
    flex: 0 0 auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: #FFFFFF !important;
    background-color: var(--tp26-primary) !important;
    background-image: linear-gradient(to right, var(--tp26-primary-hover), var(--tp26-primary-hover)) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 0 100% !important;
    border: none !important;
    border-radius: 0 !important;     /* rectangular per UI Kit spec */
    padding: 16px 20px !important;  /* 16+24+16=56px height per UI Kit */
    text-decoration: none !important;
    cursor: pointer !important;
    /* The secondary buttons swap label colour (purple ⇄ white) as the fill
       passes underneath. Declared here rather than on :hover so the timing is
       symmetric in both directions: with this easing the fill crosses the
       middle of the label at ~0.12s going in AND coming out, so the colour
       flips right as it is covered/uncovered instead of sitting white on grey
       or purple on purple. No-op for the primary buttons, white either way. */
    transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.12s ease 0.06s !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
}

#index section > .btn-link:hover,
#index section > button:not(.dropdown-toggle):hover {
    background-size: 100% 100% !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

#index section > .btn-link:focus,
#index section > button:not(.dropdown-toggle):focus {
    outline: 2px solid var(--tp26-focus) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

#index section > .btn-link:active,
#index section > button:not(.dropdown-toggle):active {
    background-color: var(--tp26-primary-hover) !important;
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.24) !important;
}

/* Arrow, drawn as inline SVG so it keeps its shape on every platform and
   follows the label colour through `currentColor`. It rests horizontal (→) and
   swings to the north-east diagonal (↗) on hover, travelling slightly right at
   the same time so the movement reads left-to-right like the fill sweep. */
.btn-arrow {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
    /* The arrow sits at the far end of the button, so unlike the label it is
       not crossed at the same moment in both directions: the fill only reaches
       it at ~0.22s going in, but releases it after ~0.06s coming out. This
       rule governs the leaving direction; the :hover rule below governs the
       entering one. */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.12s ease 0.02s;
}

#index section > .btn-link:not(.btn-link-secondary) .btn-arrow,
#index section > button:not(.dropdown-toggle) .btn-arrow {
    color: #FFFFFF !important;
}

#index section > .btn-link:hover .btn-arrow,
#index section > button:not(.dropdown-toggle):hover .btn-arrow {
    transform: translateX(4px) rotate(-45deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.12s ease 0.16s;
}

/* Secondary: grey bg + purple text per UI Kit (hover → purple fill) */
#index section > .btn-link-secondary {
    background-color: #E7EBEE !important;
    background-image: linear-gradient(to right, var(--tp26-primary), var(--tp26-primary)) !important;
    color: #5318BF !important;
}

#index section > .btn-link-secondary .btn-arrow {
    color: #8B9EB3 !important;
}

#index section > .btn-link-secondary:hover {
    color: #FFFFFF !important;
}

#index section > .btn-link-secondary:hover .btn-arrow {
    color: #FFFFFF !important;
}

/* Respect users who ask the OS to reduce motion: keep the colour change,
   drop the sweep and the arrow travel. */
@media (prefers-reduced-motion: reduce) {

    #index section > .btn-link,
    #index section > button:not(.dropdown-toggle) {
        transition: background-color 0.2s ease, color 0.2s ease !important;
        background-image: none !important;
    }

    #index section > .btn-link:hover,
    #index section > button:not(.dropdown-toggle):hover {
        background-color: var(--tp26-primary-hover) !important;
    }

    #index section > .btn-link-secondary:hover {
        background-color: var(--tp26-primary) !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    #index section > .btn-link:hover .btn-arrow,
    #index section > button:not(.dropdown-toggle):hover .btn-arrow {
        transform: none;
        transition: none;
    }

    .btn-arrow {
        transition: none;
    }
}


/* =============================================================
   RESPONSIVE — Mobile (≤ 767px)
   ============================================================= */
@media (max-width: 767.98px) {

    .dsr-header {
        padding: 40px 20px !important;
    }

    .dsr-hero-title {
        font-size: 40px !important;
        line-height: 1.1 !important;
        max-width: 100%;
    }

    #index #main-menu.container-fluid {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #index #choose-language {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    #index #LanguageDropDownListButton,
    .dsr-language-selector .dropdown-toggle {
        min-width: 108px !important;
    }

    #index .grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        margin-bottom: 40px !important;
    }

    #index section h2 {
        font-size: 36px !important;
        line-height: 1.15 !important;
    }

    #index section p {
        font-size: 16px !important;
        line-height: 26px !important;
    }

    #index section > .btn-link,
    #index section > button:not(.dropdown-toggle) {
        font-size: 16px !important;
        padding: 12px 16px !important;   /* keeps ~44px height on mobile */
    }

    .btn-arrow {
        width: 20px !important;
        height: 20px !important;
    }

    /* stack secondary buttons vertically on mobile per UI Kit */
    #index section > .btn-link-secondary {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-bottom: 8px !important;   /* 8px gap between stacked buttons */
    }
}