/* ─────────────────────────────────────────────────────────────────────────────
   Nikalas Foundation design system.
   One set of tokens (colour, type scale, spacing, radius, shadow) and the shared
   building blocks every homepage section uses: section shell, container, eyebrow,
   heading + brush underline, paragraphs, button, photo frame, feature card and the
   scroll fade-in. Section stylesheets (foundation-*.css) only add their own layout
   and decoration on top of these.

   Loaded before the section stylesheets (App.razor). Typeface: the site's Jost
   (a geometric sans in the same family of shapes as Poppins).

   Contrast notes: orange TEXT uses --nfd-orange-text (#BF5600, 4.6:1 on white);
   the bright brand orange is for fills, icons and accents. Buttons use a deeper
   orange gradient so the white 16px label stays readable.
   ───────────────────────────────────────────────────────────────────────────── */

.rioc-app {
    /* colour */
    --nfd-navy: #102F65;
    --nfd-navy-deep: #0A2350;
    --nfd-orange: #FF7900;
    --nfd-orange-2: #FFA33A;
    --nfd-orange-text: #BF5600;
    --nfd-orange-tint: #FFF2E5;
    --nfd-bg: #F5F8FD;
    --nfd-white: #FFFFFF;
    --nfd-text: #26364D;
    --nfd-muted: #64748B;
    --nfd-line: #E3E9F2;
    --nfd-btn-bg: linear-gradient(135deg, #EE6E00 0%, #D45E00 55%, #C45200 100%);
    --nfd-icon-bg: linear-gradient(150deg, var(--nfd-orange-2) 0%, var(--nfd-orange) 55%, #E8640A 100%);

    /* type scale */
    --nfd-fs-hero: clamp(38px, 4.1vw, 58px);
    --nfd-fs-h2: clamp(30px, 3vw, 46px);
    --nfd-fs-h3: clamp(20px, 1.6vw, 26px);
    --nfd-fs-lead: clamp(16.5px, 1.25vw, 18px);
    --nfd-fs-body: clamp(16px, 1.15vw, 17.5px);
    --nfd-fs-small: clamp(14.5px, 1.05vw, 16px);
    --nfd-fs-btn: 16px;
    --nfd-fs-eyebrow: 13px;

    /* layout */
    --nfd-container: 1240px;
    --nfd-gutter: 24px;
    --nfd-section-py: clamp(56px, 6vw, 88px);
    --nfd-gap: clamp(32px, 4.5vw, 72px);

    /* shape */
    --nfd-radius: 20px;
    --nfd-radius-sm: 14px;
    --nfd-shadow-card: 0 18px 40px -24px rgba(16, 47, 101, .35), 0 2px 8px rgba(16, 47, 101, .06);
    --nfd-shadow-card-hover: 0 26px 48px -24px rgba(16, 47, 101, .42), 0 4px 12px rgba(16, 47, 101, .08);
    --nfd-shadow-photo: 0 16px 32px -18px rgba(16, 47, 101, .45), 0 2px 8px rgba(16, 47, 101, .08);
    --nfd-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Smooth in-page scrolling; anchors land below the fixed header. */
html { scroll-padding-top: 130px; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ── Section shell and container ───────────────────────────────────────────── */

.nfd-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: var(--nfd-section-py) var(--nfd-gutter);
    color: var(--nfd-text);
    background-color: var(--nfd-bg);
}
/* Consecutive sections share one background, so they read as one continuous page:
   the second gets a shorter top padding instead of a double gap. */
.nfd-section + .nfd-section { padding-top: calc(var(--nfd-section-py) * .45); }

.nfd-container {
    max-width: var(--nfd-container);
    margin-inline: auto;
}

/* ── Text building blocks ──────────────────────────────────────────────────── */

.rioc-app p.nfd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--nfd-orange-tint);
    color: var(--nfd-orange-text);
    font-size: var(--nfd-fs-eyebrow);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}
.nfd-eyebrow svg { flex: none; width: 16px; height: 16px; }

.rioc-app h2.nfd-title {
    margin: 0;
    font-size: var(--nfd-fs-h2);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--nfd-navy);
    text-transform: none;
}

/* Hand-drawn orange underline beneath a heading. */
.nfd-stroke {
    display: block;
    width: clamp(140px, 13vw, 200px);
    height: 14px;
    margin: 10px 0 22px;
    color: var(--nfd-orange);
}

.rioc-app p.nfd-subtitle {
    margin: 0 0 16px;
    font-size: var(--nfd-fs-h3);
    font-weight: 600;
    line-height: 1.3;
    color: var(--nfd-navy);
    text-transform: none;
}

.rioc-app p.nfd-text {
    margin: 0 0 16px;
    max-width: 62ch;
    font-size: var(--nfd-fs-body);
    font-weight: 400;
    line-height: 1.75;
    color: var(--nfd-text);
    text-transform: none;
}
.rioc-app p.nfd-text--lead { font-size: var(--nfd-fs-lead); font-weight: 500; color: var(--nfd-navy); }
.rioc-app p.nfd-text--muted { color: var(--nfd-muted); }
.nfd-hl { color: var(--nfd-orange-text); font-weight: 600; }
.nfd-strong { color: var(--nfd-navy); font-weight: 700; }

/* ── Button ────────────────────────────────────────────────────────────────── */

.nfd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    margin-top: 10px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--nfd-btn-bg);
    color: #fff;
    font-size: var(--nfd-fs-btn);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 12px 24px -12px rgba(212, 94, 0, .7);
    transition: transform .3s var(--nfd-ease), box-shadow .3s var(--nfd-ease);
}
.nfd-btn svg { flex: none; width: 18px; height: 18px; transition: transform .3s var(--nfd-ease); }
.nfd-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -12px rgba(212, 94, 0, .8);
}
.nfd-btn:hover svg { transform: translateX(4px); }
.nfd-btn:focus-visible { outline: 2px solid var(--nfd-navy); outline-offset: 3px; }

/* ── Photo frame ───────────────────────────────────────────────────────────── */

.nfd-photo {
    position: relative;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 16px;
    background: #DFE8F5;
    box-shadow: var(--nfd-shadow-photo);
    transition: transform .3s var(--nfd-ease), box-shadow .3s var(--nfd-ease);
}
.rioc-app .nfd-photo img[width] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .4s var(--nfd-ease);
}
.nfd-photo:hover { transform: translateY(-3px); box-shadow: var(--nfd-shadow-card-hover); }
.rioc-app .nfd-photo:hover img { transform: scale(1.03); }

/* ── Feature card (a row of icon + label items on a white card) ────────────── */

.rioc-app ul.nfd-features {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: clamp(36px, 4vw, 56px) auto 0;
    padding: clamp(16px, 1.6vw, 22px) clamp(14px, 1.8vw, 28px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
    border: 1px solid var(--nfd-line);
    border-radius: var(--nfd-radius);
    box-shadow: var(--nfd-shadow-card);
}
.nfd-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 6px clamp(10px, 1.3vw, 22px);
}
.nfd-feature + .nfd-feature { border-left: 1px solid var(--nfd-line); }

.nfd-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    background: var(--nfd-icon-bg);
    box-shadow: 0 0 0 5px rgba(255, 121, 0, .1), 0 8px 16px -8px rgba(232, 100, 10, .6);
    transition: transform .3s var(--nfd-ease);
}
.nfd-icon svg { width: 24px; height: 24px; }
.nfd-feature:hover .nfd-icon { transform: translateY(-2px); }

.nfd-feature-text {
    min-width: 0;
    font-size: var(--nfd-fs-small);
    font-weight: 500;
    line-height: 1.35;
    color: var(--nfd-navy);
    text-transform: none;
}
.nfd-feature-text strong { display: block; font-weight: 700; }

/* ── Scroll fade-in (CSS scroll-driven; older browsers simply show content) ── */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .nfd-reveal {
            animation: nfd-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
        @keyframes nfd-reveal {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: none; }
        }
    }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 1099.98px) {
    .rioc-app ul.nfd-features { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .nfd-feature:nth-child(3) { border-left: 0; }
}

@media (max-width: 599.98px) {
    .rioc-app { --nfd-gutter: 16px; }
    .nfd-btn { display: flex; width: 100%; }
    .rioc-app ul.nfd-features { grid-template-columns: 1fr; row-gap: 0; padding-block: 6px; }
    .nfd-feature { padding: 12px 4px; }
    .nfd-feature + .nfd-feature,
    .nfd-feature:nth-child(3) { border-left: 0; border-top: 1px solid var(--nfd-line); }
    .nfd-icon { width: 46px; height: 46px; }
    .nfd-icon svg { width: 22px; height: 22px; }
}

/* ── Site-wide responsive guards ──────────────────────────────────────────────
   Small standalone links that sit outside a sentence get a 24px+ tap target (WCAG 2.2
   "Target Size (Minimum)"): the "Back to login" link on the account pages and the
   breadcrumb on CMS pages (privacy, terms, refund). Inline links inside text are exempt. */
.rioc-app a.otp-back,
.rioc-app .breadcrumb a { display: inline-flex; align-items: center; min-height: 28px; padding-block: 4px; }

@media (prefers-reduced-motion: reduce) {
    .nfd-btn, .nfd-btn svg, .nfd-photo, .rioc-app .nfd-photo img[width], .nfd-icon { transition: none; }
    .nfd-btn:hover, .nfd-btn:hover svg, .nfd-photo:hover, .rioc-app .nfd-photo:hover img, .nfd-feature:hover .nfd-icon { transform: none; }
}