/* Same black masthead bar as frontend/index.html's .masthead, instead
   of the EBI Visual Framework's own top nav (EMBL-EBI home / Services
   / Research / Training / About us) that base/header.html used to
   pull in. */
.masthead {
    background: #1a1c1a; /* --c-black */
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* body.vf-body is itself capped at 88vw/1600px (see below), so
       without this the black bar would only span that width instead
       of the full viewport like frontend/index.html's .masthead. */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Sticky footer, same as frontend/index.html's body. */
body.vf-body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Same "Cite us" section/footer as frontend/index.html. */
.site-footer {
    width: 88vw;
    max-width: 1600px;
    margin: auto auto 0;
    padding: 20px 20px 40px;
    border-top: 1px solid #d0d0ce; /* --c-border */
    color: #707372; /* --c-muted */
    font-size: 13px;
    box-sizing: border-box;
}
.cite-us {
    margin-bottom: 16px;
}
.cite-us-heading {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #707372; /* --c-muted */
}
.cite-us-text {
    margin: 0 0 2px;
    font-size: 12px;
    color: #707372; /* --c-muted */
}
.masthead-inner {
    width: 88vw;
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Match the main site's blue palette (frontend/index.html --c-blue*)
   instead of the EBI Visual Framework's default green hero. */
.vf-hero.vf-hero--400 {
    background-color: #193f90 !important; /* --c-blue-dark */
}

/* No white card: heading sits directly on the blue bar, full-width,
   matching frontend/index.html's .title-band/.title-band h1 exactly
   (same padding, font-size, weight — the framework's card styling
   includes a drop-shadow that reads as a faint rectangle even with a
   transparent background, so that has to go too). */
.vf-hero__content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    max-width: none !important;
    width: 100% !important;
    padding: 28px 20px 22px !important;
}
.vf-hero__heading {
    max-width: none !important;
    white-space: nowrap !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}
.vf-hero__kicker,
.vf-hero__text {
    color: #fff !important;
}

/* Section-card accent border defaults to the framework's green —
   override to --c-blue (the same accent used for h2's left border
   on the main site). */
.vf-card--brand.vf-card--bordered {
    border-bottom-color: #3b6fb6 !important;
}

/* Match the main site's ~88vw/1600px content width instead of the
   EBI Visual Framework's fixed 1280px body cap (frontend/index.html
   .page/#results use the same width/max-width pair). */
body.vf-body {
    width: 88vw !important;
    max-width: 1600px !important;
}

/* Navigation bar */
.vf-navigation__link {
    padding: 0.5rem 1rem;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
    color: #333;
}

.vf-navigation__link:hover {
    background-color: #f0f0f0;
}

.vf-navigation__link.is-active {
    background-color: #3b6fb6; /* --c-blue */
    color: white !important;   /* Contrast text */
    font-weight: 600;
}

/* Tables */
td {
    word-wrap: break-word;
    max-width: 100px;
}

.proteins-table-container {
    overflow-x: auto; /* Add horizontal scrolling */
    max-width: 100%; /* Keep the table within the article */
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: #555;
    color: #fff;
    font-size: 16px;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 2000;
    bottom: 100%; /* Position above the tooltip icon */
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%; /* Arrow pointing down */
    left: 25%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-icon {
    margin-left: 5px;
    font-size: 16px;
}

/* Nightingale */
nightingale-manager {
    display: flex !important;
    flex-direction: column !important;
}

/* PDB viewer */
#pdb_viewer {
    position: relative;
    width: 100%;
    height: 600px;
    margin-bottom: 10px;
    z-index: 1985;
}

/* Sequence viewer */
.protein-sequence-container {
    word-wrap: break-word;
    overflow-y: scroll;
    height: 20em;
    padding: 10px;
    background-color: #e1fae8;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 2px;
}

.highlight {
    background-color: #fcf5a7;
    font-weight: bold;
}

.sequenceViewerDiv {
    overflow: auto;
}

/* Proteins Datatable */
.letter-btn {
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid #ccc;
    background-color: white;
    cursor: pointer;
}

.letter-btn.active {
    background-color: #3b6fb6; /* --c-blue */
    color: white;
    font-weight: bold;
}

.eco {
    text-decoration: underline dotted;
    cursor: help;
    color: inherit;
}

.eco-more {
    margin-top: 6px;
    display: inline-block;
    background: gray;
    border: 1px solid white;
    padding: 3px;
    cursor: pointer;
    font: inherit;
    color: white;
}