/* =============================================================
   FITKULT — brand tokens + modern layout layer
   Loaded last, after style.css / wzn.css / custom.css.

   Palette is derived from the logo wordmark (mint outline
   #95E2D3). Mint is only ~1.4:1 on white, so it is used as an
   accent on dark surfaces; a deeper teal from the same hue
   family carries text, links and buttons on light surfaces.
   ============================================================= */

:root {
    /* Brand */
    --fk-mint: #95e2d3;           /* logo colour — accents on dark */
    --fk-mint-soft: #b9ece1;
    --fk-mint-tint: #eaf9f5;      /* soft fill on light */
    --fk-primary: #0e9384;        /* buttons + links on light (4.5:1 on white) */
    --fk-primary-dark: #0a6b60;
    --fk-primary-bright: #12b39f;

    /* Ink / surfaces */
    --fk-ink: #0c1b18;            /* header, footer, hero */
    --fk-ink-deep: #071310;
    --fk-ink-2: #10231f;          /* headings */
    --fk-body: #1a2422;
    --fk-muted: #5a6b67;
    --fk-line: #dceae6;
    --fk-surface: #f2fbf9;        /* soft section background */
    --fk-paper: #ffffff;

    /* Shape */
    --fk-r-sm: 10px;
    --fk-r: 16px;
    --fk-r-lg: 22px;
    --fk-r-pill: 999px;

    /* Elevation — tinted with the brand hue, not neutral grey */
    --fk-shadow-sm: 0 1px 2px rgba(12, 27, 24, .06), 0 2px 8px rgba(12, 27, 24, .05);
    --fk-shadow: 0 8px 28px rgba(12, 27, 24, .08);
    --fk-shadow-lg: 0 20px 50px rgba(12, 27, 24, .12);
    --fk-shadow-mint: 0 10px 30px rgba(14, 147, 132, .28);

    /* Header sizing — single source of truth for logo scale */
    --fk-logo-header: 150px;
    --fk-logo-header-sm: 118px;
    --fk-logo-footer: 130px;
    --fk-nav-h: 76px;

    /* Bootstrap bridge */
    --bs-primary: var(--fk-primary);
    --bs-primary-rgb: 14, 147, 132;
    --bs-link-color-rgb: 14, 147, 132;
    --bs-link-hover-color-rgb: 10, 107, 96;
    --bs-body-color: var(--fk-body);
    --bs-border-radius: var(--fk-r);
    --bs-border-color: var(--fk-line);
}

/* =============================================================
   Base
   ============================================================= */

html {
    scroll-behavior: smooth;
}

body {
    color: var(--fk-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    color: var(--fk-ink-2);
    letter-spacing: -0.015em;
}

.text-inverse h1, .text-inverse h2, .text-inverse h3,
.text-inverse h4, .text-inverse h5,
[class*="text-white"] h1, [class*="text-white"] h2,
[class*="text-white"] h3, [class*="text-white"] h4 {
    color: inherit;
}

::selection {
    background: var(--fk-mint);
    color: var(--fk-ink);
}

:focus-visible {
    outline: 2px solid var(--fk-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

a {
    text-decoration: none;
}

/* =============================================================
   Buttons
   ============================================================= */

.btn {
    border-radius: var(--fk-r-pill);
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .18s ease, box-shadow .18s ease,
                background-color .18s ease, border-color .18s ease;
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    --bs-btn-bg: var(--fk-primary);
    --bs-btn-border-color: var(--fk-primary);
    --bs-btn-hover-bg: var(--fk-primary-dark);
    --bs-btn-hover-border-color: var(--fk-primary-dark);
    --bs-btn-active-bg: var(--fk-primary-dark);
    --bs-btn-active-border-color: var(--fk-primary-dark);
    --bs-btn-disabled-bg: var(--fk-primary);
    --bs-btn-disabled-border-color: var(--fk-primary);
    box-shadow: var(--fk-shadow-mint);
}

.btn-primary:hover {
    transform: translateY(-2px);
}

/* Mint fill only ever pairs with ink text, never white. */
.btn-mint,
.btn-accent {
    background: var(--fk-mint);
    border-color: var(--fk-mint);
    color: var(--fk-ink) !important;
    box-shadow: 0 10px 30px rgba(149, 226, 211, .35);
}

.btn-mint:hover,
.btn-accent:hover {
    background: var(--fk-mint-soft);
    border-color: var(--fk-mint-soft);
    transform: translateY(-2px);
}

.btn-outline-primary {
    --bs-btn-color: var(--fk-primary);
    --bs-btn-border-color: var(--fk-primary);
    --bs-btn-hover-bg: var(--fk-primary);
    --bs-btn-hover-border-color: var(--fk-primary);
}

/* =============================================================
   Header — compact logo, sticky glass bar
   ============================================================= */

header.wrapper .navbar {
    min-height: var(--fk-nav-h);
    transition: background-color .28s ease, box-shadow .28s ease,
                padding .28s ease, backdrop-filter .28s ease;
}

/* Logo scale. Header markup still ships width="250"; the CSS
   width + auto height wins so the intrinsic ratio is kept. */
.navbar-brand img {
    width: var(--fk-logo-header) !important;
    max-width: var(--fk-logo-header);
    height: auto;
    display: block;
    transition: width .28s ease;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

/* Light (non-hero) pages: solid ink bar so the mint logo reads. */
body:not(.wzn-hero-page) header.wrapper .navbar {
    background: var(--fk-ink);
    box-shadow: var(--fk-shadow-sm);
}

body:not(.wzn-hero-page) header.wrapper .navbar .nav-link {
    color: rgba(255, 255, 255, .82) !important;
}

body:not(.wzn-hero-page) header.wrapper .navbar .nav-link:hover,
body:not(.wzn-hero-page) header.wrapper .navbar .nav-link.active {
    color: var(--fk-mint) !important;
}

body:not(.wzn-hero-page) header.wrapper .navbar .hamburger span,
body:not(.wzn-hero-page) header.wrapper .navbar .hamburger span::before,
body:not(.wzn-hero-page) header.wrapper .navbar .hamburger span::after {
    background: #fff;
}

/* Frosted bar once scrolled, on every page variant. */
.navbar.fixed {
    background: rgba(12, 27, 24, .82) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 8px 30px rgba(7, 19, 16, .35);
    border-bottom: 1px solid rgba(149, 226, 211, .14);
}

.navbar.fixed .navbar-brand img {
    width: calc(var(--fk-logo-header) - 22px) !important;
}

/* Nav links: quiet by default, mint underline on hover/active.
   Replaces the dotted bullet separators from the old theme. */
@media (min-width: 992px) {
    .navbar-nav > .nav-item + .nav-item > .nav-link:before {
        display: none !important;
    }

    .navbar-nav > .nav-item > .nav-link {
        font-weight: 600;
        font-size: 15px;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .navbar-nav > .nav-item > .nav-link:after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 2px;
        height: 2px;
        border-radius: 2px;
        background: var(--fk-mint);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .24s ease;
    }

    .navbar-nav > .nav-item > .nav-link:hover:after,
    .navbar-nav > .nav-item > .nav-link.active:after {
        transform: scaleX(1);
    }
}

/* Get Started pill */
.wzn-get-started-btn {
    background: var(--fk-mint) !important;
    color: var(--fk-ink) !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(149, 226, 211, .28);
    letter-spacing: .01em;
}

.wzn-get-started-btn:hover {
    background: var(--fk-mint-soft) !important;
    color: var(--fk-ink) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(149, 226, 211, .4);
}

.wzn-hero-page .wzn-get-started-btn,
.wzn-hero-page .navbar.fixed .wzn-get-started-btn {
    background: var(--fk-mint) !important;
    color: var(--fk-ink) !important;
}

.wzn-hero-page .navbar .btn-primary,
.wzn-hero-page .navbar.fixed .btn-primary {
    background: var(--fk-mint) !important;
    color: var(--fk-ink) !important;
    border-color: var(--fk-mint) !important;
}

/* The hero-page rule swapped the brand image for logo_white.png.
   Both files are the same mint wordmark, so drop the swap and let
   the single asset serve every surface. */
.wzn-hero-page .navbar .navbar-brand img {
    content: normal;
}

@media (max-width: 991.98px) {
    .navbar-brand img,
    .navbar.fixed .navbar-brand img {
        width: var(--fk-logo-header-sm) !important;
        max-width: var(--fk-logo-header-sm);
    }

    .wzn-get-started-btn,
    .wzn-hero-page .wzn-get-started-btn,
    .wzn-hero-page .navbar.fixed .wzn-get-started-btn {
        background: transparent !important;
        color: var(--fk-mint) !important;
        border: 1px solid rgba(149, 226, 211, .55) !important;
        box-shadow: none !important;
    }

    .wzn-get-started-btn:hover,
    .wzn-hero-page .wzn-get-started-btn:hover {
        background: rgba(149, 226, 211, .16) !important;
        color: var(--fk-mint) !important;
    }
}

/* Off-canvas mobile drawer */
.offcanvas-nav,
.offcanvas.text-inverse {
    background: var(--fk-ink) !important;
}

.offcanvas-nav .nav-link {
    color: rgba(255, 255, 255, .85) !important;
}

.offcanvas-nav .nav-link:hover,
.offcanvas-nav .nav-link.active {
    color: var(--fk-mint) !important;
}

/* =============================================================
   Footer — flat ink with a mint glow, compact logo
   ============================================================= */

.wzn-footer-gradient {
    position: relative;
    overflow: hidden;
    background: var(--fk-ink) !important;
    border-top: 1px solid rgba(149, 226, 211, .12);
    color: rgba(255, 255, 255, .72);
}

.wzn-footer-gradient::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 420px;
    background: radial-gradient(60% 100% at 20% 0%, rgba(14, 147, 132, .35) 0%, transparent 70%),
                radial-gradient(50% 100% at 85% 10%, rgba(149, 226, 211, .16) 0%, transparent 70%);
    pointer-events: none;
}

.wzn-footer-gradient > .container {
    position: relative;
    z-index: 1;
}

.wzn-footer-gradient img[alt] {
    width: var(--fk-logo-footer) !important;
    max-width: var(--fk-logo-footer);
    height: auto;
}

.wzn-footer-gradient .widget-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fk-mint) !important;
}

.wzn-footer-gradient .list-unstyled li + li {
    margin-top: 10px;
}

.wzn-footer-gradient a:not(.btn) {
    color: rgba(255, 255, 255, .72);
    transition: color .2s ease;
}

.wzn-footer-gradient a:not(.btn):hover,
.wzn-footer-gradient .list-unstyled li a.active {
    color: var(--fk-mint) !important;
}

.wzn-footer-gradient .display-6 {
    color: #fff;
    font-size: clamp(22px, 2.4vw, 28px);
}

/* Newsletter field */
.wzn-footer-gradient .newsletter_form .input-group {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(149, 226, 211, .22);
    border-radius: var(--fk-r-pill);
    padding: 5px;
    gap: 6px;
}

.wzn-footer-gradient .newsletter_form .form-control {
    background: transparent;
    border: none !important;
    box-shadow: none;
    color: #fff;
    padding-left: 20px;
}

.wzn-footer-gradient .newsletter_form .form-control::placeholder {
    color: rgba(255, 255, 255, .45);
}

.wzn-footer-gradient .newsletter_form .btn {
    border-radius: var(--fk-r-pill);
    background: var(--fk-mint);
    border-color: var(--fk-mint);
    color: var(--fk-ink);
    font-weight: 700;
    padding-inline: 22px;
    box-shadow: none;
}

.wzn-footer-gradient .newsletter_form .btn:hover {
    background: var(--fk-mint-soft);
    border-color: var(--fk-mint-soft);
    color: var(--fk-ink);
}

/* Social pills */
.wzn-landing-social {
    border-radius: var(--fk-r-pill);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* Footer social pills sit in a narrow column — smaller than the landing set. */
.wzn-footer-gradient .nav.social {
    flex-wrap: nowrap;
}

.wzn-footer-gradient .nav.social .wzn-landing-social {
    flex: none;
    width: 34px;
    height: 34px;
    font-size: 14px;
    border-width: 1px;
}

.wzn-footer-gradient .wzn-landing-social:hover,
.offcanvas .wzn-landing-social:hover {
    background: var(--fk-mint) !important;
    color: var(--fk-ink) !important;
    transform: translateY(-2px);
}

/* =============================================================
   Cards, sections, forms — shared modern shape
   ============================================================= */

.card,
.card-custom,
.wzn-plan-card,
.wzn-cat-card,
.wzn-meal-card,
.wzn-why-card,
.wzn-step-card,
.wzn-dash-card,
.wzn-address-card,
.wzn-account-card,
.wzn-table-card,
.wzn-consult-card,
.wzn-landing-card {
    border-radius: var(--fk-r-lg) !important;
    border-color: var(--fk-line) !important;
}

.card-custom {
    box-shadow: var(--fk-shadow) !important;
}

.wzn-plan-card:hover,
.wzn-meal-card:hover,
.wzn-why-card:hover,
.wzn-dash-card:hover,
.wzn-consult-card:hover,
.wzn-landing-card:hover {
    box-shadow: var(--fk-shadow-lg) !important;
}

.wzn-sub-section,
.wzn-account-section {
    background: var(--fk-surface);
}

.form-control,
.form-select {
    border-radius: var(--fk-r-sm);
    border: 1px solid var(--fk-line);
    padding-block: .7rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fk-primary);
    box-shadow: 0 0 0 4px rgba(14, 147, 132, .14);
}

.form-check-input {
    border: 1px solid var(--fk-line);
}

.form-check-input:checked {
    background-color: var(--fk-primary);
    border-color: var(--fk-primary);
}

.form-label {
    color: var(--fk-ink-2);
    font-weight: 600;
}

/* Section rhythm — a touch more air between blocks. */
section {
    scroll-margin-top: calc(var(--fk-nav-h) + 12px);
}

/* Page-title banner tinted to brand instead of the stock photo wash. */
.tf-page-title {
    background-color: var(--fk-ink);
    background-blend-mode: multiply;
}

/* Sticky WhatsApp / book buttons */
.floating_whatsapp_icon,
.floating_book_btn {
    box-shadow: var(--fk-shadow);
}

.floating_book_btn {
    background: var(--fk-primary) !important;
    color: #fff !important;
}

.floating_book_btn:hover {
    background: var(--fk-primary-dark) !important;
}

/* =============================================================
   Page heroes (.wzn-hero-section) — shared modern treatment
   ============================================================= */

.wzn-hero-section {
    position: relative;
    isolation: isolate;
    padding-top: calc(var(--fk-nav-h) + 24px) !important;
}

/* Faint grid so the flat ink surface has some texture behind copy. */
.wzn-hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(149, 226, 211, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(149, 226, 211, .055) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 75%);
    pointer-events: none;
}

.wzn-hero-section > .wrapper > .container,
.wzn-hero-section > .container {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
}

.wzn-hero-section h1 {
    color: #fff;
    letter-spacing: -0.025em;
    line-height: 1.12;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
}

.wzn-hero-section .lead {
    max-width: 40rem;
    margin-inline: auto;
    line-height: 1.7;
}

/* Eyebrow pill used at the top of every page hero */
.fk-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 18px;
    border-radius: var(--fk-r-pill);
    background: rgba(149, 226, 211, .12);
    border: 1px solid rgba(149, 226, 211, .34);
    color: var(--fk-mint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* Eyebrow on a light section */
.fk-eyebrow--light {
    background: var(--fk-mint-tint);
    border-color: rgba(14, 147, 132, .25);
    color: var(--fk-primary);
}

/* =============================================================
   Light sections
   ============================================================= */

.wrapper.bg-light,
section.bg-light {
    background: var(--fk-surface) !important;
}

.bg-soft-primary {
    background: var(--fk-mint-tint) !important;
}

.text-primary {
    color: var(--fk-primary) !important;
}

.bg-primary {
    background-color: var(--fk-primary) !important;
}

/* Theme accents that keyed off the old green */
.icon-list.bullet-bg .bullet-soft-primary,
.bullet-soft-primary i {
    background-color: var(--fk-mint-tint) !important;
    color: var(--fk-primary) !important;
}

figure.rounded,
figure.rounded img,
.rounded img {
    border-radius: var(--fk-r-lg) !important;
}

.shadow {
    box-shadow: var(--fk-shadow) !important;
}

/* Accordion (FAQs) */
.accordion-item {
    border-radius: var(--fk-r) !important;
    border: 1px solid var(--fk-line) !important;
    overflow: hidden;
}

.accordion-button:not(.collapsed) {
    background: var(--fk-mint-tint);
    color: var(--fk-primary);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--fk-line);
}

@media (max-width: 767.98px) {
    .wzn-hero-section > .wrapper > .container,
    .wzn-hero-section > .container {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .fk-eyebrow {
        letter-spacing: .16em;
        font-size: 11px;
    }
}

/* =============================================================
   Navbar container — align brand + nav with page content instead
   of hugging the viewport edge.
   ============================================================= */

header.wrapper .navbar > .container-fluid {
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 28px;
}

@media (max-width: 991.98px) {
    header.wrapper .navbar > .container-fluid {
        padding-inline: 18px;
    }
}

/* Brand column should size to the logo, not claim half the bar. */
@media (min-width: 992px) {
    header.wrapper .navbar-brand.w-100 {
        width: auto !important;
        flex: 0 0 auto;
    }

    header.wrapper .navbar-other.w-100 {
        width: auto !important;
        flex: 0 0 auto;
        margin-left: auto;
    }

    header.wrapper .navbar-collapse.offcanvas-nav {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* =============================================================
   Logo placeholders — the wordmark is mint, so an empty thumb
   must sit on ink or the fallback disappears into the card.
   ============================================================= */

.wzn-plan-thumb.is-empty,
.blog-card__figure.is-empty,
.m2-card-img.is-empty {
    background: var(--fk-ink) !important;
    background-image: radial-gradient(60% 90% at 50% 20%, rgba(14, 147, 132, .35) 0%, transparent 70%);
}

.is-logo-fallback,
img.is-fallback,
.m2-card-img-fallback {
    object-fit: contain !important;
    width: 62% !important;
    height: 62% !important;
    margin: auto;
    padding: 0 !important;
    opacity: .9;
}

/* Theme soft/pale utilities keyed off the old palette */
.bg-pale-primary {
    background-color: var(--fk-mint-tint) !important;
}

.bg-soft-primary,
.bg-soft-grape,
.bg-soft-green,
.bg-soft-leaf {
    background-color: var(--fk-mint-tint) !important;
}

.text-soft-primary,
.counter-wrapper .counter {
    color: var(--fk-primary) !important;
}


/* =============================================================
   Hero headline that must not wrap
   Sized so the longest current line clears col-md-10 at lg+;
   wrapping is restored below lg where a single line cannot fit.
   ============================================================= */
.fk-hero-oneline {
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1.12;
}

@media (min-width: 992px) {
    .fk-hero-oneline {
        white-space: nowrap;
    }
}