/* /company-verification (resources/views/company-verification.blade.php).
   The page is built from the service page's sections and loads service.css
   first; these are only its own additions on top of those styles. */

/* The hero's secondary link jumps to the details: clear the sticky header. */
#registration-details {
    scroll-margin-top: 120px;
}

/* Registration details: label above value inside the numbered cards. */
#serviceIncludedSec .serviceIncludedSecCard dt {
    margin: 4px 0 8px;
    font-family: Instrument Sans, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #55724D;
}

#serviceIncludedSec .serviceIncludedSecCard dd {
    margin: 0;
    font-family: Instrument Sans, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: #16241C;
}

.company-verification-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2F6B35;
}

.company-verification-status > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #527B3F;
}

/* Registered office: the address in the notes card's text column. */
.serviceNotesSecCard address {
    margin: 0;
    font-family: Instrument Sans, sans-serif;
    font-size: 20px;
    font-style: normal;
    line-height: 1.6;
    color: #4E5A52;
}

/* Verification steps: numbered cards in the service page's card style. */
.company-verification-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.company-verification-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 30px 28px 34px;
    border: 1px solid #E7F0DA;
    border-radius: 18px;
    background: #F7FBF0;
}

.company-verification-steps li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #E8F3D4;
    color: #173D2C;
    font-family: Mona Sans, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.company-verification-steps li p {
    margin: 4px 0 0;
    font-family: Instrument Sans, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #16241C;
}

.company-verification-steps strong {
    font-weight: 700;
}

#serviceFitSec .serviceFitSecTier a svg {
    flex-shrink: 0;
}

#serviceFitSec .serviceFitSecTier a:focus-visible,
#homeHeroSec .btn-primary:focus-visible,
#homeHeroSec .btn-outline:focus-visible {
    outline: 3px solid #527B3F;
    outline-offset: 3px;
}

/* SIC code cards are not links: no hover lift. */
#serviceRelatedSec .company-verification-activity h3 {
    margin: 0;
}

#serviceRelatedSec .company-verification-activity:hover {
    border-color: #E6EAE4;
    box-shadow: none;
    transform: none;
}

@media (max-width: 1100px) {
    .company-verification-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 900px) {
    #registration-details {
        scroll-margin-top: 90px;
    }

    /* The Companies House label is too long for the hero's side-by-side
       phone buttons: stack them. (hero-revamp.css loads after this file,
       hence the page-class prefix.) */
    .company-verification-page #homeHeroSec .homeHeroSecInner .homeHeroSecCol .homeHeroSecColActionBtns {
        flex-wrap: wrap;
    }

    .company-verification-page #homeHeroSec .homeHeroSecInner .homeHeroSecCol .homeHeroSecColActionBtns a {
        flex-basis: 100%;
        white-space: normal;
    }

    .serviceNotesSecCard address {
        font-size: 17px;
    }
}

@media (max-width: 640px) {
    .company-verification-steps {
        grid-template-columns: 1fr;
    }
}