/* Overrides that must win over the design system's main.css.
   This file is linked AFTER _content/Egov.FOD.UIComponents/css/main.css,
   so it wins over the design system by order alone. Bootstrap's spacing
   utilities (mb-4, mb-xl-5, ...) are declared !important, so the few rules
   that have to beat those are marked !important as well. */

/* ---------------------------------------------------------------- fonts --
   FOD's main.css declares Onest at weights 200 (Thin) and 300 (ExtraLight),
   but the package does not ship those two files, so the browser 404s on
   every page load. Re-declare them against copies we host ourselves.
   OnestThin1602-hint.woff is the same build the package uses; the
   ExtraLight is the static Onest release, the closest available match. */
@font-face {
    font-family: "Onest";
    src: url('../fonts/OnestThin1602-hint.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Onest";
    src: url('../fonts/Onest-ExtraLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------- "De ce EVOSign?" grid --
   The four feature cards sat tight against each other and against the
   intro paragraph. Spacing only - the markup is untouched. */
#features .col-lg-7 > p.fs-lg {
    margin-block-end: 2.5rem !important;
}

#features .row-cols-sm-2 > .col {
    padding-inline-end: 1.5rem;
    margin-block-end: 2.25rem !important;
}

#features .row-cols-sm-2 .d-flex {
    gap: 0.25rem;
}

#features .row-cols-sm-2 h3 {
    margin-block-end: 0.5rem !important;
}

#features .row-cols-sm-2 p {
    line-height: 1.6;
}

/* --------------------------------------------- activation code input group --
   Give the "Introdu codul de activare" field room away from the hero art
   and the surrounding copy. */
#submit-form-container {
    gap: 0.75rem;
    margin-block: 1.75rem !important;
}

#confirmation-code-group {
    padding-block: 0.25rem;
}

#confirmation-code-group .form-control,
#confirmation-code-group .btn {
    padding-block: 0.625rem;
}

/* From lg up the phone artwork sits beside the copy. Centre the two
   columns against each other, and drop the top offset the markup adds
   for the stacked (no artwork) layout so the centring is true. */
@media (min-width: 992px) {
    #features > .row {
        align-items: center;
    }

    #features .col-lg-7 {
        margin-block-start: 0 !important;
        padding-block-start: 0 !important;
    }

    #features .col-lg-5 > .position-relative {
        margin-inline: auto;
    }
}

/* ------------------------------------------- main content breathing room --
   Page content sat flush against the sticky header. Add space above it,
   but not on pages whose first element is the full-bleed gradient hero
   (home, /qr/*) - padding there would show a white strip above the
   gradient. If :has() is unsupported the rule is simply dropped, which
   leaves today's behaviour. */
main:not(:has(.hero-gradient)) {
    padding-block-start: 2rem;
}