/* Page components: hero, steps. (Footprint chart lands in M2.) */

/* --- Hero --- */
.hero {
    text-align: center;
    padding-block: var(--sp-6) var(--sp-7);
}

.hero__title {
    font-size: clamp(2rem, 5vw, 2.75rem);
    color: var(--c-blue);
}

.hero__subtitle {
    max-width: 48ch;
    margin-inline: auto;
    font-size: var(--fs-400);
    color: var(--c-navy);
}

.hero__form {
    max-width: 560px;
    margin: var(--sp-6) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    text-align: left;
}

/* Center only the country label above the hero select. The label span is a stretched
   flex item inside the flex-column .field, so text-align is enough to show centred. */
.hero__form .field__label {
    text-align: center;
}

/* Centre the selected country name in the combobox toggle. The caret is pushed right by its own
   margin-left:auto, so the name needs a matching spacer to stay optically centred. */
.hero__form .country-combo__toggle {
    justify-content: center;
    text-align: center;
}

.hero__form .country-combo__toggle::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
}

/* Shrink-to-fit and centred, rather than stretched across the form. */
.hero__form #viewFootprintBtn {
    align-self: center;
}

/* --- Steps --- */
.steps {
    margin-top: var(--sp-7);
}

/* Steps stack vertically on every screen size (client request): a coloured bar, then the copy. */
.steps__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 720px;
    margin-inline: auto;
}

.step-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4) var(--sp-5);
}

/* --- Drop badge --- */
/* Numbered badge in the Kolekt "droplet" shape: a circle with a single flat corner (top-right).
   Colour variants match the step's bright brand colour (navy digit stays readable on the bright
   fills). Compose with page-specific classes, e.g. class="drop-badge drop-badge--yellow step-card__num". */
.drop-badge {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 50% 0 50% 50%;
    background: var(--c-gray);
    color: var(--c-navy);
    font-weight: 700;
}

.drop-badge--yellow {
    background: var(--c-yellow);
}

.drop-badge--blue {
    background: var(--c-blue);
}

.drop-badge--green {
    background: var(--c-green);
}

.drop-badge--lg {
    width: 3rem;
    height: 3rem;
}

.step-card__body {
    min-width: 0;
}

.step-card h3 {
    margin-bottom: var(--sp-1);
    color: var(--c-green-dark);
}

/* Home's three step titles read in navy; only their numbered circles carry the bright
 * brand colours (client decision — the badge colours were already right). */
.step-card--calculate h3,
.step-card--recover h3,
.step-card--publish h3 {
    color: var(--c-navy);
}

.step-card p {
    margin: 0;
    color: var(--color-text-muted);
}