/* ===================================================================
   research.css — NEW styles for the RESEARCH nav dropdown + the two
   new pages (List of Approved Projects, Data Access Request).
   Built to sit alongside the site's existing CSS/master.css and
   CSS/about.css — reuses the same color tokens:
     navy   #113a6b   (headers, primary)
     blue   #56a9d9   (accent / hover)
     blue2  #28a4d2   (accent, about.css)
     panel  #eaecf0   (light grey panel)
   When this goes live, fold the dropdown rules into master.css and
   the hover binding (see bottom of each page) into master.js, the
   same pattern already used for #ddbuttonabt / #ddbuttoncontact.
   =================================================================== */

/* ---- RESEARCH nav dropdown (desktop) — same pattern as the existing
   ABOUT HELIOS / CONTACT US dropdowns, just a new ID ---- */
#ddbuttonresearch {
    position: relative;
}

#navlink ul #ddlistresearch {
    position: absolute;
    z-index: 2;
    display: none;
    border-radius: 0 0 7px 7px;
    background-color: #113a6b;
    height: auto;
    top: 95px;
    overflow: hidden;
}

/* ---- Page-specific banner photo (replaces the shared About-page Fotolia
   image with a version that has the central icon swapped per page) ---- */
#imagebannersize.banner-approved-projects {
    background-image: url('https://www.healthforlife.sg/images/research/banner-approved-projects.png');
}

#imagebannersize.banner-data-access {
    background-image: url('https://www.healthforlife.sg/images/research/banner-data-access.png');
}

/* ---- Page banner subtitle (optional short strapline under the H1-style banner) ---- */
.research-intro {
    max-width: 960px;
    margin: 0 auto 36px;
    font-family: 'Open Sans';
    color: #5a5c5e;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}

/* ===================================================================
   Approved Projects — compact project register
   A restrained, vertically stacked list: serial number, project title,
   then applicant names. No cards, no badges, no shadows — just hairline
   dividers between entries, matching an institutional/clinical site
   rather than a dashboard.
   =================================================================== */
.register-note {
    width: 95%;
    max-width: 85%;
    margin: 48px auto 28px;
    font-family: 'Open Sans';
    font-size: 13px;
    color: #7a7e85;
}

.project-register {
    list-style: none;
    width: 95%;
    max-width: 85%;
    margin: 0 auto 90px;
    padding: 0;
    border-top: 1px solid #d8dbe0;
}

@media (max-width: 760px) {
    .register-note,
    .project-register {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

.project-row {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 36px 4px;
    border-bottom: 1px solid #d8dbe0;
}

.row-sn {
    flex: 0 0 auto;
    width: 28px;
    padding-top: 2px;
    font-family: 'Open Sans';
    font-size: 13px;
    color: #8a8f98;
    text-align: right;
}

.row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.project-title {
    font-family: 'AvenirLTStd-Black';
    color: #113a6b;
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 14px;
}

.applicant-line {
    font-family: 'Open Sans';
    font-size: 14px;
    color: #3c3f44;
    line-height: 1.9;
    margin: 0;
}

.applicant-line .inst,
.applicant-full-list .inst {
    color: #7a7e85;
}

.status-pending {
    color: #7a7e85;
}


/* ===================================================================
   Data Access Request — restrained submission section + CTA
   Matches the hairline-divider, no-card language used on the redesigned
   List of Approved Projects page.
   =================================================================== */
#dataaccess {
    width: 95%;
    max-width: 85%;
    margin: 48px auto 90px;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    #dataaccess {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
    }
}

.dar-submission {
    border-top: 2px solid #113a6b;
    background-color: #eaecf0;
    padding: 28px 30px;
    margin-bottom: 36px;
}

.dar-heading {
    font-family: 'AvenirLTStd-Black';
    color: #113a6b;
    font-size: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 18px;
}

.dar-submission p {
    font-family: 'Open Sans';
    color: #3c3f44;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 10px;
}

.dar-submission p:last-child {
    margin-bottom: 0;
}

.dar-lead {
    color: #5a5c5e;
}

.dar-rca {
    font-family: 'Open Sans';
    color: #5a5c5e;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 40px;
}

.dar-rca strong {
    color: #3c3f44;
    font-weight: 600;
}

.dar-cta {
    text-align: left;
}

.dar-cta a.dar-button {
    display: inline-block;
    background-color: #113a6b;
    color: #ffffff;
    font-family: 'AvenirLTStd-Black';
    font-size: 14px;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.dar-cta a.dar-button:hover,
.dar-cta a.dar-button:focus {
    background-color: #56a9d9;
}

.dar-cta a.dar-button:focus-visible {
    outline: 2px solid #56a9d9;
    outline-offset: 3px;
}

/* Development-only state: real PDF not provided yet (see HTML comment).
   Remove dar-button-disabled and this block once a real href is set. */
.dar-button-disabled {
    background-color: #8a8f98;
    cursor: not-allowed;
}

.dar-button-disabled:hover,
.dar-button-disabled:focus {
    background-color: #8a8f98;
}

.dar-cta-note {
    font-family: 'Open Sans';
    color: #7a7e85;
    font-size: 13px;
    margin: 12px 0 0;
}