/*
 * Noximo — design tokens and site-wide styles, from noximo-brand-guidelines.pdf (v1.0).
 * Linked after Bootstrap 5.3 in _Layout, so these win. Page-specific CSS goes in its own
 * file through a page's Styles section.
 */

/* ── Fonts ───────────────────────────────────────────────────────────────────
   Self-hosted: the CSP allows fonts from this origin only. SIL Open Font License
   (fonts/<family>/OFL.txt). latin-ext carries the Maltese letters ċ ġ ħ ż. */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/bricolage-grotesque/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 100 1000;
    src: url("../fonts/dm-sans/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 100 1000;
    src: url("../fonts/dm-sans/dm-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
    --nx-red: #D42B1E;                      /* accents, labels, the one key action — never a surface */
    --nx-red-hover: #B82318;                /* hover of red buttons only */
    --nx-red-soft: rgba(212, 43, 30, 0.08); /* chip and icon backgrounds */
    --nx-ink: #0C0C0C;                      /* headlines, primary buttons, dark sections */
    --nx-ink-2: #3D3D3D;                    /* body copy and ledes */
    --nx-muted: #888888;                    /* dimmed phrases and large secondary text only */
    --nx-light: #F7F6F3;                    /* alternate section and panel background */
    --nx-border: #E9E7E3;                   /* hairlines, card strokes, dividers */

    --nx-font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
    --nx-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --nx-navbar-height: 70px;
    --nx-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.07);

    /* Bootstrap, pointed at the brand */
    --bs-body-font-family: var(--nx-font-body);
    --bs-body-font-weight: 300;
    --bs-body-color: var(--nx-ink-2);
    --bs-body-bg: #fff;
    --bs-heading-color: var(--nx-ink);
    --bs-border-color: var(--nx-border);
    --bs-link-color: var(--nx-red);
    --bs-link-color-rgb: 212, 43, 30;
    --bs-link-hover-color: var(--nx-red-hover);
    --bs-link-hover-color-rgb: 184, 35, 24;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nx-font-display);
    font-weight: 800;
}

/* ── Chrome: navbar — 70px, fixed, frosted, hairline ────────────────────── */

.nx-navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1030;
    height: var(--nx-navbar-height);
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nx-border);
}

/* Clear space on every side equals the height of the "N" mark (about 38px at 140px wide),
   so the logo keeps 24px of its own plus the nav's 16px gap before anything sits beside it. */
.nx-navbar__logo {
    display: block;
    flex-shrink: 0;
    margin-inline-end: 1.5rem;
}

.nx-navbar__logo img {
    display: block;
    width: 140px;      /* the guidelines cap the navbar logo at 150px wide, 80px minimum */
    height: auto;
}

@media (max-width: 575.98px) {
    /* Phones: a 20px side gutter instead of Bootstrap's 12px — whitespace is the luxury. */
    .container {
        --bs-gutter-x: 2.5rem;
    }

    .nx-navbar__logo {
        margin-inline-end: 0.875rem;
    }

    .nx-navbar__logo img {
        width: 112px;
    }
}

.nx-skip {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1040;
}

/* ── Chrome: footer — ink ─────────────────────────────────────────────────── */

.nx-footer {
    padding-block: 64px 40px;
    background-color: var(--nx-ink);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9375rem;
}

.nx-footer__mark {
    display: block;
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 7px;
    background-color: #fff;
}

.nx-footer__tagline {
    margin: 0;
    font-family: var(--nx-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.nx-footer a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nx-footer a:hover,
.nx-footer a:focus-visible {
    color: #fff;
}

.nx-footer__rule {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8125rem;
}

/* Privacy and Terms live on www.noximo.com.mt and open in a new tab. */
.nx-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* "Cookie settings" runs script rather than going anywhere, so it is a button dressed as a footer link. */
.nx-footer__link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: color 0.2s ease;
}

.nx-footer__link-button:hover,
.nx-footer__link-button:focus-visible {
    color: #fff;
}

/* ── Sections and rhythm: white, warm light, ink ─────────────────────────── */

.nx-page-header {
    padding-top: calc(var(--nx-navbar-height) + 40px);
    padding-bottom: 72px;
}

.nx-section {
    padding-block: 72px;
}

.nx-section--light {
    background-color: var(--nx-light);
}

@media (min-width: 992px) {
    .nx-page-header {
        padding-top: 140px;     /* clears the fixed navbar */
        padding-bottom: 110px;
    }

    .nx-section {
        padding-block: 110px;
    }
}

/* ── Type: loud display, quiet body ──────────────────────────────────────── */

.nx-hero-title,
.nx-page-title,
.nx-section-title,
.nx-card-title {
    font-family: var(--nx-font-display);
    font-weight: 800;
    color: var(--nx-ink);
    text-wrap: balance;
}

.nx-hero-title {
    font-size: clamp(3.25rem, 1.9rem + 4.2vw, 6rem);         /* 52 → 96px */
    line-height: 1;
    letter-spacing: -0.032em;                                   /* −3px at 96px */
    margin-bottom: 1.75rem;
}

.nx-page-title {
    font-size: clamp(3.25rem, 2.1rem + 3.6vw, 5.625rem);      /* 52 → 90px */
    line-height: 1;
    letter-spacing: -0.033em;
    margin-bottom: 1.5rem;
}

.nx-section-title {
    font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);           /* 36 → 56px */
    line-height: 1.05;
    letter-spacing: -0.036em;
    margin-bottom: 0;
}

.nx-card-title {
    font-size: clamp(1.25rem, 0.95rem + 1vw, 1.75rem);         /* → 28px */
    line-height: 1.15;
    letter-spacing: -0.028em;
}

/* The signature move: a headline ends on a dimmed phrase. */
.nx-dim {
    color: var(--nx-muted);
}

.nx-label {
    font-family: var(--nx-font-body);
    font-size: 0.6875rem;          /* 11px */
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nx-red);
    margin-bottom: 1rem;
}

.nx-lede {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--nx-ink-2);
    max-width: 520px;              /* ledes never run full-width */
    margin-bottom: 0;
}

.nx-copy {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--nx-ink-2);
}

/* ── Buttons: always pills ───────────────────────────────────────────────── */

.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.625rem;
    border: 1px solid transparent;
    border-radius: 100px;
    font-family: var(--nx-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nx-btn:focus-visible {
    outline: 3px solid var(--nx-ink);
    outline-offset: 3px;
}

.nx-btn--ink {
    background-color: var(--nx-ink);
    color: #fff;
}

.nx-btn--outline {
    background-color: #fff;
    border-color: var(--nx-border);
    color: var(--nx-ink);
}

.nx-btn--red {
    background-color: var(--nx-red);
    color: #fff;
}

a.nx-btn:hover,
button.nx-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--nx-shadow-hover);
}

.nx-btn--ink:hover {
    color: #fff;
}

.nx-btn--outline:hover {
    border-color: var(--nx-ink);
    color: var(--nx-ink);
}

.nx-btn--red:hover {
    background-color: var(--nx-red-hover);
    box-shadow: 0 8px 24px rgba(212, 43, 30, 0.3);
    color: #fff;
}

.nx-btn--sm {
    min-height: 38px;
    padding: 0.5rem 1.125rem;
    font-size: 0.8125rem;
}

.nx-btn--block {
    width: 100%;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.nx-form-card {
    max-width: 520px;
    padding: 28px;
    background-color: #fff;
    border: 1px solid var(--nx-border);
    border-radius: 16px;
}

@media (min-width: 992px) {
    .nx-form-card {
        padding: 40px;
    }
}

/* Inline, so LabelRequiredFor's asterisk (rendered just after the label) sits beside it. */
.nx-field-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nx-ink);
}

.nx-field-label + .text-danger {
    color: var(--nx-red) !important;
}

.nx-input {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 0.875rem 1.125rem;
    font-family: var(--nx-font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--nx-ink);
    background-color: #fff;
    border: 1px solid var(--nx-border);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nx-input:focus {
    outline: none;
    border-color: var(--nx-ink);
    box-shadow: 0 0 0 4px rgba(12, 12, 12, 0.08);
}

.nx-input.is-invalid,
.nx-input.input-validation-error {
    border-color: var(--nx-red);
}

.nx-input.is-invalid:focus,
.nx-input.input-validation-error:focus {
    box-shadow: 0 0 0 4px var(--nx-red-soft);
}

/* The messages the unobtrusive validator writes into asp-validation-for / asp-validation-summary. */
.field-validation-error,
.validation-summary-errors {
    display: block;
    margin-top: 0.5rem;
    color: var(--nx-red);
    font-size: 0.875rem;
    font-weight: 400;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

/* ── Cookie consent — fixed to the bottom until the visitor chooses ──────────
   Shown by js/cookie-consent.js; the hidden attribute keeps it out of view until then. */

.nx-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1045;
    padding-block: 16px;
}

.nx-consent__panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 760px;
    margin-inline: auto;
    padding: 24px;
    background-color: #fff;
    border: 1px solid var(--nx-border);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.nx-consent__title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--nx-ink);
}

.nx-consent__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--nx-ink-2);
}

/* "I agree" is the large target; "I don't agree" is a small text link beneath it. */
.nx-consent__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.nx-consent__agree {
    width: 100%;
    min-height: 56px;
    padding-inline: 2.5rem;
    font-size: 1.0625rem;
}

.nx-consent__decline {
    padding-block: 0.25rem;
    font-size: 0.8125rem;
    color: var(--nx-ink-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nx-consent__decline:hover,
.nx-consent__decline:focus-visible {
    color: var(--nx-ink);
}

@media (min-width: 768px) {
    .nx-consent__panel {
        flex-direction: row;
        align-items: center;
    }

    .nx-consent__actions {
        flex-shrink: 0;
    }

    .nx-consent__agree {
        width: auto;
        min-width: 200px;
    }
}

/* ── Motion: scroll reveal — fade up 24px over 0.75s, siblings staggered ─────
   Content is only hidden once js/noximo.js has switched reveals on, so nothing
   disappears without script or for reduced motion. */

.nx-reveal-on .reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.nx-reveal-on .reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .nx-reveal-on .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .nx-btn {
        transition: none;
    }

    a.nx-btn:hover,
    button.nx-btn:hover {
        transform: none;
    }
}