/*
 * Loaded last. Keeps the original design intact on Bootstrap 5 (the site was built on
 * Bootstrap 4) and styles the few pieces that replaced old jQuery plugins.
 */

/* --- Bootstrap 4 -> 5 differences ------------------------------------------------ */
:root { --bs-body-font-size: 16px; --bs-body-line-height: 24px; --bs-link-decoration: none; }
a { text-decoration: none; }
.row { --bs-gutter-x: 30px; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, label { margin-bottom: 0; }
.navbar { --bs-navbar-padding-y: 0; --bs-navbar-padding-x: 0; }
.navbar-expand-lg .navbar-nav { flex-direction: row; }
.navbar-light .navbar-nav .nav-link, .navbar-nav .nav-link { color: #000; }
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: #e71d72; }
.form-control:focus { box-shadow: none; }

/* --- Accessibility ---------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100001; background: #000; color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 0; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #e71d72; outline-offset: 2px;
}

/* --- Header: slides away on scroll down (was the jquery.mhead plugin) -------------- */
#site-header { transition: transform .2s ease; }
#site-header.is-hidden { transform: translate3d(0, -100%, 0); }
.mh-head .hamburger { background: none; border: 0; cursor: pointer; }

/* --- Mobile menu (was the jquery.mmenu plugin; same size, colours and type) -------- */
.mobile-drawer { z-index: 100002; --bs-offcanvas-width: 300px; --bs-offcanvas-bg: #e6e6e6; border: 0; }
.offcanvas-backdrop { z-index: 100001; }
.offcanvas-backdrop.show { opacity: .3; }
.mobile-drawer .offcanvas-header { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.mobile-drawer .offcanvas-header:focus-within { position: static; width: auto; height: auto; padding: 10px 20px; clip-path: none; }
.mobile-drawer .offcanvas-body { padding: 0; }
.mobile-drawer .mobile_menu a { display: block; padding: 0 0 0 20px; color: #000; font-family: "HelveticaNeueMedium"; font-size: 14px; line-height: 51px; }
.mobile-drawer .mobile_menu a:hover, .mobile-drawer .mobile_menu a.active { color: #e71d72; }
/* --- Form messages ----------------------------------------------------------------- */
.validator-long { display: block; }
.form-status { margin: 12px 0; }
.form-status { font-family: "HelveticaNeueRegular"; font-size: 16px; line-height: 24px; }
/* A confirmation is not an error: dark green, readable on the grey panels as well as on white. (Not .validator-long: custom.css forces that red with !important.) */
.form-status.is-ok { color: #2f5d0a; }
.form-status.is-ok::before { content: "\2713\00a0"; font-weight: 700; }
.form-status.is-error, .validator-long { color: #dc3545; }
.error_input { border-color: #dc3545 !important; }
/* --- Questionnaire checkboxes ------------------------------------------------------
   The original stylesheet makes every checkbox invisible except the terms box, which left
   "tick all that apply" questions with nothing to tick. These match the terms box. */
.answerc input[type=checkbox]:not(old) {
    appearance: none; -webkit-appearance: none; opacity: 1; width: 22px; height: 22px; margin: 3px 9px 0 0; padding: 9px;
    border: 2px solid #000; background: #fff; display: inline-block; position: relative; cursor: pointer; vertical-align: top;
}
.answerc input[type=checkbox]:checked::before {
    content: ''; display: block; position: absolute; top: 1px; left: 7px; width: 6px; height: 14px;
    border: solid #e71d72; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.answerc .further_yes { margin: 0 18px 12px 0; }
.answerc .further_yes input[type=checkbox] + label { cursor: pointer; }
.answerc textarea.inputfield { width: 100%; padding: 8px 12px; }

/* Bootstrap 5 gives every direct child of .row full width and gutters; Bootstrap 4 only did that
   to columns. The original markup has non-column children in rows (the Login link, image panels). */
.row > :not([class*="col"]) { width: auto; max-width: none; padding-left: 0; padding-right: 0; flex-shrink: 1; }

/* Register page photo. The ASP.NET page carried these rules in an inline <style> block, not in custom.css
   (which says height:auto), so the port showed the photo square and shorter than the form. From 768px up
   the photo fills the height of the form column and is cropped to fit, as on the original. */
@media (min-width: 768px) {
    .register_inner_right { height: 100%; position: relative; overflow: hidden; }
    .register_inner_right img {
        height: 100%; width: 100%; object-fit: cover; object-position: center center;
        display: block; position: absolute; top: 0; left: 0;
    }
}

/* "Complete your profile" section tabs. The original drew these through an ASP.NET repeater (table#cphMain_rpSections)
   and its rules only matched that markup, so the ported <ul> lost them. The tabs are laid out as an even three-column
   row that always fits the panel (the original's 135px tabs plus a trailing margin were 10px too wide for it and the
   last one dropped to a second line); a fourth section would wrap neatly onto a new row with the original 14px gap.
   The current tab is underlined so it does not depend on colour. The original also faded the other tabs' text
   (#ffffff69, about 2:1 on the pink); that is deliberately not copied. */
ul.interests_buttom2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
ul.interests_buttom2::before, ul.interests_buttom2::after { display: none; } /* the clearfix pseudo-elements would become grid cells */
ul.interests_buttom2 li { float: none; width: 100%; margin: 0; }
ul.interests_buttom2 li a.current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 480px) { ul.interests_buttom2 li a { font-size: 17px; line-height: 19px; } }

/* --- Desktop header: calmer links, sign-in beside the register button --------------- */
@media (min-width: 961px) {
    .header .login { display: none; }
    .top .row { flex-wrap: nowrap; }
    .header-logo { flex: 0 0 215px; width: 215px; max-width: none; }
    .header-nav, .header-actions { padding-left: 12px; padding-right: 12px; }
    .navbar-expand-lg .navbar-nav .nav-link { white-space: nowrap; }
    .header-nav { flex: 1 1 auto; width: auto; max-width: none; }
    .header-actions { flex: 0 0 auto; width: auto; max-width: none; display: flex; align-items: flex-start; justify-content: flex-end; gap: 18px; }
    .navbar { margin-top: 50px; }
    .navbar-expand-lg .navbar-nav .nav-link { border-right: 0; padding: 0 0 6px; margin-right: 36px; color: #222; border-bottom: 2px solid transparent; }
    .navbar-expand-lg .navbar-nav li:last-child .nav-link { margin-right: 0; }
    .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link.active { color: #c4155f; border-bottom-color: #e71d72; }
    .mh-head .header-login { margin-top: 34px; height: 50px; padding: 0 24px; line-height: 46px; border: 2px solid #e71d72; border-radius: 15px; color: #c4155f; font-family: "HelveticaNeueMedium"; font-size: 16px; white-space: nowrap; }
    .mh-head .header-login:hover, .mh-head .header-login:focus-visible { background: #fdeaf2; color: #c4155f; }
}
@media (min-width: 961px) and (max-width: 1120px) {
    .header-logo { flex-basis: 195px; width: 195px; }
    .header-nav, .header-actions { padding-left: 6px; padding-right: 6px; }
    .navbar { margin-left: 14px; margin-right: 0; }
    .navbar-expand-lg .navbar-nav .nav-link { margin-right: 22px; font-size: 15px; }
    .header-actions { gap: 10px; }
    .mh-head .header-login { padding: 0 16px; }
    .header-actions p.top_register_now { width: 190px; font-size: 38px; }
}
@media (max-width: 960px) { .header-login { display: none; } }

/* --- Privacy notice: readable column, section headings, contents box, rights as a list of cards --- */
.privacy--doc { max-width: 860px; margin: 0 auto; padding: 46px 52px 34px; background: #f6f6f7; border: 1px solid #e4e4e7; border-radius: 14px; }
.privacy--doc h1 { margin: 0 0 22px; font-size: 46px; line-height: 46px; }
.privacy--doc p, .privacy--doc li { color: #222; }
.privacy--doc p { font-size: 17px; line-height: 29px; max-width: 70ch; }
.privacy--doc p.lead { font-size: 20px; line-height: 31px; color: #111; }
.privacy--doc p a { text-decoration: underline; text-decoration-color: rgba(231, 29, 114, .35); text-underline-offset: 3px; }
.privacy--doc p a:hover, .privacy--doc p a:focus-visible { text-decoration-color: #e71d72; }
.privacy--doc p.btn-standard a, .privacy--doc p.btn-standard a:hover, .privacy--doc p.btn-standard a:focus-visible { text-decoration: none; }
.privacy--doc p.privacy-contact { background: #fff; border: 1px solid #e4e4e7; border-left: 5px solid #e71d72; border-radius: 8px; padding: 16px 20px; max-width: none; margin: 26px 0; }
.privacy--doc p.privacy-contact strong { display: block; color: #111; font-family: "HelveticaNeueBold"; font-weight: 400; margin-bottom: 2px; }
.privacy-toc { margin: 8px 0 34px; padding: 20px 24px; background: #fff; border: 1px solid #e4e4e7; border-radius: 8px; }
.privacy--doc .privacy-toc__title { font-family: "HelveticaNeueBold"; font-size: 15px; line-height: 22px; margin: 0 0 8px; color: #111; }
.privacy-toc ol { margin: 0; padding: 0 0 0 22px; }
.privacy-toc li { font-size: 17px; line-height: 30px; padding: 0; }
.privacy-toc a { color: #c4155f; font-family: "HelveticaNeueMedium"; text-decoration: underline; text-underline-offset: 3px; }
.privacy--doc h2 { margin: 40px 0 16px; padding-top: 28px; border-top: 2px solid #e71d72; font-family: "HelveticaNeueBold"; font-size: 25px; line-height: 32px; color: #111; scroll-margin-top: 170px; }
.privacy--doc p strong { color: #111; font-family: "HelveticaNeueBold"; font-weight: 400; }
.privacy--doc h3 { margin: 34px 0 14px; font-family: "HelveticaNeueBold"; font-size: 21px; line-height: 28px; color: #111; scroll-margin-top: 170px; }
.privacy--doc ul.terms_text, .privacy--doc ul.cookies_text { margin: 0 0 22px 4px; }
.privacy--doc ul.terms_text li { font-size: 17px; line-height: 30px; color: #222; }
.privacy--doc ul.terms_text li a { color: #c4155f; text-decoration: underline; text-underline-offset: 3px; }
.privacy--numbered { counter-reset: sect; }
.privacy--numbered h2 { counter-increment: sect; }
.privacy--numbered h2::before { content: counter(sect) ". "; color: #e71d72; }
.privacy--doc ul.terms_text2 { list-style: none; margin: 0 0 8px; }
.privacy--doc ul.terms_text2 li { font-size: 17px; line-height: 29px; margin: 0 0 14px; max-width: 70ch; color: #222; }
.privacy--doc ul.terms_text2 li a { color: #c4155f; text-decoration: underline; text-underline-offset: 3px; }
.privacy--doc .my_data_email { margin-top: 26px; padding: 22px; background: #e9e9ec; border: 1px solid #d5d5da; border-radius: 8px; }
.privacy--doc .my_data_email input.input-field { background: #fff; border: 1px solid #a9a9b2; border-radius: 6px; padding: 0 12px; }
.privacy--doc .my_data_email input.input-field:focus { border-color: #e71d72; outline: 2px solid #e71d72; outline-offset: 1px; }
.privacy--doc ul.privacy-rights { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.privacy--doc ul.privacy-rights li { position: relative; padding: 14px 16px 14px 46px; background: #fff; border: 1px solid #e4e4e7; border-radius: 8px; font-size: 16px; line-height: 24px; }
.privacy--doc ul.privacy-rights li::before { content: ""; position: absolute; left: 16px; top: 17px; margin: 0; width: 16px; height: 16px; border-radius: 50%; background: #e71d72 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.privacy--doc p.privacy-updated { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid #e4e4e7; font-size: 14px; line-height: 22px; color: #555; }
@media (max-width: 767px) {
    .privacy--doc { padding: 26px 20px 22px; border-radius: 10px; }
    .privacy--doc h1 { font-size: 36px; line-height: 38px; }
    .privacy--doc p { font-size: 16px; line-height: 27px; }
    .privacy--doc p.lead { font-size: 18px; line-height: 28px; }
    .privacy--doc h2 { font-size: 22px; line-height: 29px; margin-top: 32px; padding-top: 22px; scroll-margin-top: 110px; }
    .privacy--doc ul.privacy-rights { grid-template-columns: 1fr; }
    .privacy-toc { padding: 16px 18px; }
}