/* ==========================================================================
   Fundamental Health Web — App
   Web shell, home, auth additions, PWA and general feature styling.
   ========================================================================== */

/* -------------------------------------------------- */
/* PAGE SHELL                                          */
/* -------------------------------------------------- */
.fh-body--web {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
}

.fh-body--web > main {
    flex: 1 0 auto;
}

/* -------------------------------------------------- */
/* HEADER                                              */
/* -------------------------------------------------- */
.fh-site-header {
    position: sticky;
    z-index: 30;
    top: 0;

    border-bottom:
        1px solid rgb(220 229 225 / 0.88);

    background:
        rgb(255 255 255 / 0.88);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.fh-site-header__inner {
    display: flex;
    width: min(
        calc(100% - 32px),
        var(--fh-content-width)
    );

    min-height: 72px;
    margin-inline: auto;

    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.fh-site-nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.fh-nav-link {
    display: inline-flex;
    min-height: 40px;

    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 0;
    border-radius: 10px;
    padding: 8px 11px;

    background: transparent;

    color: var(--fh-text-soft);

    font: inherit;
    font-size: 0.91rem;
    font-weight: 560;

    text-decoration: none;

    cursor: pointer;

    transition:
        background var(--fh-transition),
        color var(--fh-transition);
}

.fh-nav-link:hover {
    background: var(--fh-surface-subtle);
    color: var(--fh-text);
}

/* -------------------------------------------------- */
/* COOKIE / FLOATING                                   */
/* -------------------------------------------------- */
.fh-cookie-consent {
    position: fixed;
    z-index: 100;
    right: 18px;
    bottom:
        max(
            18px,
            env(safe-area-inset-bottom)
        );

    width: min(
        calc(100% - 36px),
        430px
    );

    padding: 17px;

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-lg);

    background: var(--fh-surface);

    box-shadow: var(--fh-shadow-md);
}

.fh-cookie-consent p {
    margin-bottom: 12px;

    font-size: 0.875rem;
}

/* -------------------------------------------------- */
/* RESPONSIVE                                          */
/* -------------------------------------------------- */
@media (max-width: 760px) {
.fh-site-header__inner {
        min-height: 64px;
    }

.fh-site-nav .fh-nav-link span {
        display: none;
    }
}

@media (max-width: 520px) {
.fh-site-nav {
        gap: 0;
    }

.fh-nav-link {
        width: 40px;
        padding-inline: 0;
    }
}

/* -------------------------------------------------- */
/* HOME                                                */
/* -------------------------------------------------- */
.fh-home {
    overflow: hidden;
}

.fh-hero {
    position: relative;

    padding:
        clamp(64px, 10vw, 118px)
        0
        clamp(54px, 8vw, 96px);

    overflow: hidden;
}

.fh-hero::before {
    position: absolute;
    z-index: -1;
    top: -220px;
    right: -170px;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    content: "";

    background:
        radial-gradient(
            circle,
            rgb(177 220 204 / 0.68),
            rgb(177 220 204 / 0)
            69%
        );
}

.fh-hero__inner {
    display: grid;
    width: min(
        calc(100% - 32px),
        var(--fh-content-width)
    );

    margin-inline: auto;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, 0.75fr);

    align-items: center;
    gap: clamp(32px, 7vw, 86px);
}

.fh-hero__title {
    max-width: 760px;

    margin-bottom: 20px;

    font-size:
        clamp(
            2.65rem,
            7vw,
            5.25rem
        );

    line-height: 0.98;
    letter-spacing: -0.055em;
}

.fh-hero__lead {
    max-width: 650px;

    margin-bottom: 28px;

    color: var(--fh-text-soft);

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.25rem
        );

    line-height: 1.65;
}

.fh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.fh-hero-panel {
    position: relative;

    min-height: 360px;
    padding: 28px;

    border: 1px solid
        rgb(255 255 255 / 0.6);

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #176f5d,
            #0d5145
        );

    color: white;

    box-shadow:
        0 30px 70px
        rgb(23 64 54 / 0.22);
}

.fh-hero-panel h2,
.fh-hero-panel p {
    color: white;
}

.fh-hero-panel p {
    color: rgb(255 255 255 / 0.74);
}

.fh-hero-panel__icon {
    display: inline-flex;

    width: 58px;
    height: 58px;

    align-items: center;
    justify-content: center;

    margin-bottom: 68px;

    border-radius: 18px;

    background:
        rgb(255 255 255 / 0.13);
}

.fh-home-section {
    width: min(
        calc(100% - 32px),
        var(--fh-content-width)
    );

    margin-inline: auto;
    padding-block: 56px;
}

.fh-home-section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 28px;
}

.fh-review-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(270px, 1fr)
        );

    gap: 18px;
}

.fh-review-card {
    display: flex;
    min-height: 220px;

    flex-direction: column;

    padding: 22px;

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-lg);

    background: var(--fh-surface);

    box-shadow: var(--fh-shadow-sm);
}

.fh-review-card__quote {
    margin-bottom: 18px;

    color: var(--fh-primary);
}

.fh-review-card__text {
    flex: 1;

    color: var(--fh-text-soft);

    line-height: 1.65;
    white-space: pre-wrap;
}

.fh-review-card__author {
    margin-top: 20px;
    padding-top: 15px;

    border-top: 1px solid var(--fh-border);

    color: var(--fh-text);
    font-size: 0.875rem;
    font-weight: 620;
}

/* -------------------------------------------------- */
/* PWA                                                 */
/* -------------------------------------------------- */
.fh-pwa-install {
    position: fixed;
    z-index: 90;

    right: 18px;
    bottom:
        max(
            18px,
            env(safe-area-inset-bottom)
        );

    width: min(
        calc(100% - 36px),
        430px
    );

    padding: 18px;

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-lg);

    background: var(--fh-surface);

    box-shadow: var(--fh-shadow-md);
}

.fh-pwa-install__header {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 10px;
}

.fh-pwa-install__icon {
    display: inline-flex;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--fh-primary-soft);
    color: var(--fh-primary);
}

.fh-pwa-install__title {
    margin: 0;
    font-size: 1rem;
}

.fh-pwa-install__text {
    margin-bottom: 14px;

    font-size: 0.875rem;
}

/* -------------------------------------------------- */
/* MEDIA / CERTIFICATE                                */
/* -------------------------------------------------- */
.fh-responsive-image {
    display: block;

    width: 100%;
    height: auto;

    border-radius: var(--fh-radius-md);
}

/* -------------------------------------------------- */
/* RESPONSIVE 2                                       */
/* -------------------------------------------------- */
@media (max-width: 850px) {
.fh-hero__inner {
        grid-template-columns: 1fr;
    }

.fh-hero-panel {
        min-height: 280px;
    }
}

@media (max-width: 620px) {
.fh-home-section__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* -------------------------------------------------- */
/* PAYMENT                                             */
/* -------------------------------------------------- */
.fh-payment-status-page {
    min-height: calc(100dvh - 72px);

    display: grid;
    place-items: center;

    padding: 32px 18px;
}

.fh-payment-status-card {
    width: min(100%, 520px);

    padding: clamp(24px, 5vw, 36px);

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-xl);

    background: var(--fh-surface);

    text-align: center;

    box-shadow: var(--fh-shadow-md);
}

.fh-payment-status-card__icon {
    display: inline-flex;

    width: 64px;
    height: 64px;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 20px;

    background: var(--fh-primary-soft);
    color: var(--fh-primary);
}

.fh-payment-status-card__icon--warning {
    background: var(--fh-warning-soft);
    color: var(--fh-warning);
}

.fh-payment-status-card__icon--danger {
    background: var(--fh-danger-soft);
    color: var(--fh-danger);
}

/* -------------------------------------------------- */
/* REVIEW                                              */
/* -------------------------------------------------- */
.fh-review-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fh-review-form .fh-textarea {
    min-height: 240px;

    line-height: 1.65;
}

.fh-review-state {
    padding: 18px;

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-md);

    background: var(--fh-surface-subtle);
}

/* -------------------------------------------------- */
/* CERTIFICATE                                         */
/* -------------------------------------------------- */
.fh-certificate-card {
    padding: clamp(22px, 5vw, 30px);

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-lg);

    background: var(--fh-surface);

    box-shadow: var(--fh-shadow-sm);
}

.fh-certificate-meta {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 12px;

    margin-block: 20px;
}

.fh-certificate-meta__item {
    padding: 14px;

    border-radius: var(--fh-radius-md);

    background: var(--fh-surface-subtle);
}

.fh-certificate-meta__label {
    display: block;

    margin-bottom: 4px;

    color: var(--fh-text-muted);
    font-size: 0.75rem;
}

.fh-certificate-meta__value {
    color: var(--fh-text);
    font-weight: 650;
}

.fh-certificate-preview {
    overflow: hidden;

    margin-block: 22px;

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-lg);

    background: var(--fh-surface);

    box-shadow: var(--fh-shadow-sm);
}

.fh-certificate-preview img {
    display: block;

    width: 100%;
    height: auto;
}

/* ================================================== */
/* LEGACY ACTIVATION                                  */
/* ================================================== */
.fh-legacy-intro {
    display: flex;

    align-items: flex-start;
    gap: 12px;

    padding: 16px;

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-md);

    background: var(--fh-surface-subtle);
}

.fh-legacy-intro__icon {
    display: inline-flex;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: var(--fh-primary-soft);

    color: var(--fh-primary);
}

.fh-legacy-intro strong {
    display: block;

    margin-bottom: 4px;

    color: var(--fh-text);

    font-size: 0.9rem;
}

.fh-legacy-intro p {
    margin: 0;

    color: var(--fh-text-muted);

    font-size: 0.84rem;
    line-height: 1.55;
}

.fh-legacy-meta {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 10px;
}

.fh-legacy-meta__item {
    display: flex;

    min-width: 0;

    flex-direction: column;
    gap: 4px;

    padding: 13px 14px;

    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-sm);

    background: var(--fh-surface);
}

.fh-legacy-meta__label {
    color: var(--fh-text-muted);

    font-size: 0.72rem;
    font-weight: 600;
}

.fh-legacy-meta__value {
    color: var(--fh-text);

    font-size: 0.88rem;
}

@media (max-width: 620px) {
.fh-legacy-meta {
        grid-template-columns: 1fr;
    }
}