/* Vault landing (vault.* root, dataroom-client/vault-home.blade.php).
   Rides on the marketing site's style.css for the header/hero/footer chrome;
   this file only styles the vault-specific pieces. */

.vault-home-body {
    background: #fff;
}

/* --- Hero ------------------------------------------------------------- */

.vault-hero {
    align-items: center;
    padding-top: 24px;
}

/* --- Access card (right side of the hero) ----------------------------- */

.vault-access-card {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(21, 44, 91, 0.10);
    padding: 28px 28px 24px;
    max-width: 460px;
    margin: 24px auto;
}

.vault-access-head {
    text-align: center;
}

.vault-access-head .fa,
.vault-access-head .fas {
    font-size: 34px;
    color: #2a71fa;
    background: #eef4ff;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.vault-access-head h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.vault-access-head p {
    color: #5b6b85;
    margin-bottom: 0;
}

.vault-access-form {
    border-top: 1px solid #e6ecf5;
    margin-top: 18px;
    padding-top: 16px;
    text-align: left;
}

.vault-access-form h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.dr-form-msg {
    font-size: 0.85rem;
    min-height: 1em;
}

/* --- Trust cards ------------------------------------------------------- */

.vault-features {
    margin: 8px 0 48px;
}

.vault-feature-card {
    height: 100%;
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 12px;
    padding: 22px 22px 18px;
    margin-bottom: 16px;
}

.vault-feature-card .fa,
.vault-feature-card .fas {
    font-size: 20px;
    color: #2a71fa;
    background: #eef4ff;
    border-radius: 10px;
    padding: 12px 13px;
    margin-bottom: 12px;
}

.vault-feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.vault-feature-card p {
    color: #5b6b85;
    font-size: 0.92rem;
    margin-bottom: 0;
}

/* --- Header login CTA (hidden) ----------------------------------------- */
/* The login button is kept in the header (invisible + inert) only to preserve the
   marketing landing's exact spacing so the nav stays centered. See vault-home.blade. */
.vault-cta-ghost {
    visibility: hidden;
}

/* --- Header language dropdown (desktop) -------------------------------- */
/* The <li> carries `flag-nav index-landing-page`, the same class set as the
   marketing landing's visible picker, so style.css styles the menu chrome EXACTLY
   like the landing (grey items, 4px 16px padding, 160px / 3px-radius menu). The one
   thing style.css does NOT cover is the flag <img> sizing: the landing gets that
   from custom.css, which this page does not load, so the two rules below are copied
   verbatim from custom.css. Without them the flags render at their natural 48px.
   Do NOT add other overrides here - that is what made the picker diverge before. */
.index-landing-page img {
    height: 20px;
    vertical-align: sub;
    display: unset;
}

.index-landing-page span {
    vertical-align: text-top;
    position: relative;
}

/* --- Header language flags (mobile slide-out panel) --------------------- */
/* The desktop nav (with the dropdown above) is hidden under 992px; the panel
   shows a flat flag row instead. */
.vault-flags-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 4px;
}

.vault-flags-mobile a {
    line-height: 1;
    opacity: 0.55;
}

.vault-flags-mobile a:hover,
.vault-flags-mobile a.vault-flag-active {
    opacity: 1;
}

.vault-flags-mobile img {
    width: 22px;
    height: auto;
    border-radius: 3px;
}

/* --- Footer ------------------------------------------------------------- */
/* The footer reuses the marketing landing's chrome, but several of its rules live
   in custom.css, which this page does NOT load. On style.css alone the copyright
   text is white, every footer link (link-groups + the trademark link, all inside
   .copy-rights-second) falls back to bootstrap blue, and the logo shrinks to 30%
   on tablet. Ported verbatim from custom.css so it matches the real landing (grey
   #c4c4c4 text/links, 90% logo). The social-icons colours DO come from style.css
   (`.footer-second .social-icons a i`), so the icon markup needs no rules here -
   it only has to sit inside .footer-second. */
.ls-1 { letter-spacing: 0.1em; }
.ls-2 { letter-spacing: 0.2em; }
.fs-7 { font-size: 0.9rem !important; }

.copy-rights-second p { color: #c4c4c4; }
.copy-rights-second a { color: #c4c4c4; }
.copy-rights-second a:hover { color: #bfbfbf; text-decoration: underline; }

.footerLogoDiv { margin-left: 6px; }

/* style.css shrinks this logo to 30% at the same breakpoint; custom.css keeps 90%. */
@media (max-width: 991.98px) {
    .company-logo-second img { width: 90%; }
}

/* Landing's inline footer tweak (kept out of the Blade). */
@media (max-width: 575.98px) {
    .footer-link-groups a {
        font-size: .95rem;
    }
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 767.98px) {
    .vault-access-card {
        padding: 20px 18px 18px;
    }

    .vault-features {
        margin-bottom: 24px;
    }
}