/**
 * MiniCAD -- Base Stylesheet
 *
 * Design tokens, global utilities, typography, buttons, breadcrumbs,
 * scroll reveal, scroll progress, and reduced-motion overrides.
 * Loaded on ALL MiniCAD pages.
 *
 * @package MiniCAD
 */

/* -- Design Tokens ---------------------------------------------- */

:root {
    /* Palette hex (locked) */
    --mc-deep:         #131f26;
    --mc-dark:         #1e3c4d;
    --mc-calypso:      #2b6d7d;
    --mc-keppel:       #3a9ca1;
    --mc-keppel-text:  #2b6d7d;
    --mc-fountain:     #5bc2bf;
    --mc-spray:        #8ff0e4;
    --mc-amber:        #E8A020;
    --mc-amber-hover:  #c78e1a;
    --mc-gray:         var(--mc-calypso);
    --mc-tint:         #f0fafa;
    --mc-light:        #F7F9FC;
    --mc-white:        #ffffff;

    /* RGB channels (for rgba() usage) */
    --mc-deep-rgb:     19, 31, 38;
    --mc-dark-rgb:     30, 60, 77;
    --mc-calypso-rgb:  43, 109, 125;
    --mc-keppel-rgb:   58, 156, 161;
    --mc-fountain-rgb: 91, 194, 191;
    --mc-spray-rgb:    143, 240, 228;
    --mc-amber-rgb:    232, 160, 32;
    --mc-light-rgb:    247, 249, 252;
    --mc-white-rgb:    255, 255, 255;

    /* Semantic colours (non-palette) */
    --mc-error:        #c0392b;
    --mc-error-rgb:    192, 57, 43;
    --mc-error-light:  #dc3545;
    --mc-error-light-rgb: 220, 53, 69;
    --mc-success:      #27ae60;
    --mc-success-rgb:  39, 174, 96;
    --mc-warning:      #b45309;
    --mc-warning-rgb:  180, 83, 9;
    --mc-whatsapp:     #25D366;
    --mc-whatsapp-hover:#20bf5b;
    --mc-whatsapp-rgb: 37, 211, 102;

    /* Master scale — change this ONE value to resize the entire website.
       0.9 = 10% smaller · 1.0 = default · 1.1 = 10% bigger              */
    --mc-scale: 1;

    /* Fonts & layout */
    --mc-font-head: 'Plus Jakarta Sans', sans-serif;
    --mc-font-body: 'Inter', sans-serif;
    --mc-font-mono: 'Courier New', monospace;
    --mc-section-y: calc(52px * var(--mc-scale));
    --mc-section-x: calc(48px * var(--mc-scale));
    --mc-container: calc(1200px * var(--mc-scale));
    --mc-radius:     calc(14px * var(--mc-scale));
    --mc-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --mc-ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1.0);

    /* Font-size scale — all sizes derive from --mc-fs which derives from --mc-scale */
    --mc-fs:      calc(14px * var(--mc-scale));
    --mc-fs-2xs:  calc(var(--mc-fs) * 0.643);  /* ≈9px */
    --mc-fs-xs:   calc(var(--mc-fs) * 0.714);  /* ≈10px */
    --mc-fs-sm:   calc(var(--mc-fs) * 0.857);  /* ≈12px */
    --mc-fs-body: calc(var(--mc-fs) * 0.964);  /* ≈13.5px */
    /* var(--mc-fs) = 14px — buttons, base text */
    --mc-fs-md:   calc(var(--mc-fs) * 1.071);  /* ≈15px */
    --mc-fs-lg:   calc(var(--mc-fs) * 1.143);  /* ≈16px */
    --mc-fs-xl:   calc(var(--mc-fs) * 1.286);  /* ≈18px */
    --mc-fs-2xl:  calc(var(--mc-fs) * 1.429);  /* ≈20px */
    --mc-fs-3xl:  calc(var(--mc-fs) * 1.857);  /* ≈26px */
    --mc-fs-4xl:  calc(var(--mc-fs) * 2.286);  /* ≈32px */

    /* Border radius */
    --mc-radius-sm:   calc(4px * var(--mc-scale));
    --mc-radius-pill: 100px;

    /* Letter spacing */
    --mc-ls-eyebrow: calc(3.5px * var(--mc-scale));
    --mc-ls-label:   calc(1px * var(--mc-scale));

    /* Shadows */
    --mc-shadow-card:       0 2px 10px rgba(var(--mc-dark-rgb), 0.05);
    --mc-shadow-card-hover: 0 12px 36px rgba(var(--mc-dark-rgb), 0.1);
    --mc-shadow-lift:       0 20px 50px rgba(var(--mc-dark-rgb), 0.12);
}

/* -- Global ----------------------------------------------------- */

body { overflow-x: hidden; }

.mc-skip-link {
    position: absolute; top: -44px; left: 8px; z-index: 99999;
    background: var(--mc-amber); color: var(--mc-deep);
    font-family: var(--mc-font-head); font-weight: 700; font-size: var(--mc-fs);
    padding: calc(10px * var(--mc-scale)) calc(20px * var(--mc-scale)); border-radius: calc(6px * var(--mc-scale)); transition: top 0.2s;
}
.mc-skip-link:focus { top: calc(8px * var(--mc-scale)); }
*:focus { outline: 2px solid var(--mc-keppel); outline-offset: 3px; }
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 2px solid var(--mc-keppel); outline-offset: 3px; }

.mc-section, .mc-trust, .mc-brands, .mc-cta {
    font-family: var(--mc-font-body);
    color: var(--mc-gray);
}

.mc-section { padding: var(--mc-section-y) var(--mc-section-x); width: 100%; }
.mc-container { max-width: var(--mc-container); margin: 0 auto; width: 100%; }

/* -- Typography ------------------------------------------------- */

.mc-eyebrow {
    display: inline-block; font-family: var(--mc-font-head);
    font-size: var(--mc-fs-xs); font-weight: 700; letter-spacing: var(--mc-ls-eyebrow);
    text-transform: uppercase; color: var(--mc-keppel-text); margin-bottom: calc(14px * var(--mc-scale));
}
.mc-eyebrow--light { color: rgba(var(--mc-spray-rgb),0.75); }

.mc-heading {
    font-family: var(--mc-font-head); font-size: clamp(var(--mc-fs-3xl),3.2vw,calc(var(--mc-fs) * 2.857));
    font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; margin-bottom: calc(16px * var(--mc-scale));
}
.mc-heading--dark  { color: var(--mc-dark); }
.mc-heading--light { color: var(--mc-light); }
.mc-subtext {
    font-size: var(--mc-fs-lg);
    line-height: 1.75;
    max-width: calc(520px * var(--mc-scale));
    margin-bottom: calc(24px * var(--mc-scale));
}
.mc-subtext--light { color: rgba(var(--mc-light-rgb),0.58); }

/* -- Card base -------------------------------------------------- */

.mc-card {
    background: var(--mc-white);
    border: 1px solid rgba(var(--mc-keppel-rgb), 0.12);
    border-top: 2px solid var(--mc-keppel);
    border-radius: calc(12px * var(--mc-scale));
    box-shadow: var(--mc-shadow-card);
    transition: transform 0.28s var(--mc-ease), box-shadow 0.28s var(--mc-ease), border-color 0.28s ease;
}

@media (hover: hover) {
    .mc-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--mc-shadow-card-hover);
        border-color: rgba(var(--mc-keppel-rgb), 0.22);
        border-top: 2px solid var(--mc-keppel);
    }
}

/* -- Buttons ---------------------------------------------------- */

.mc-btn {
    display: inline-flex; align-items: center; gap: calc(8px * var(--mc-scale));
    font-family: var(--mc-font-head); font-weight: 700; font-size: var(--mc-fs);
    line-height: 1; padding: calc(14px * var(--mc-scale)) calc(32px * var(--mc-scale)); border-radius: calc(8px * var(--mc-scale)); border: none;
    cursor: pointer; text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s;
    white-space: nowrap; position: relative; overflow: hidden;
    text-transform: capitalize;
}
.mc-btn--lg { font-size: var(--mc-fs-lg); padding: calc(16px * var(--mc-scale)) calc(40px * var(--mc-scale)); border-radius: calc(9px * var(--mc-scale)); }
.mc-btn--amber { background: var(--mc-amber); color: var(--mc-deep); position: relative; }
.mc-btn--amber:hover { background: var(--mc-amber-hover); color: var(--mc-deep); transform: translateY(-2px); }
.mc-btn--amber:active::before {
    background: radial-gradient(circle at 50% 50%, rgba(var(--mc-white-rgb),0.28) 0%, transparent 65%);
    animation: mc-ripple 0.45s ease-out forwards;
}
@keyframes mc-ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }
.mc-btn--ghost { background: transparent; color: var(--mc-fountain); padding: calc(14px * var(--mc-scale)) calc(4px * var(--mc-scale)); }
.mc-btn--ghost:hover { color: var(--mc-keppel); }
.mc-btn--outline { background: transparent; border: 1px solid rgba(var(--mc-keppel-rgb),0.4); color: var(--mc-keppel); padding: calc(11px * var(--mc-scale)) calc(26px * var(--mc-scale)); }
.mc-btn--outline:hover { background: var(--mc-keppel); border-color: var(--mc-keppel); color: var(--mc-white); }

/* Breadcrumbs */

.mc-breadcrumbs { padding: calc(20px * var(--mc-scale)) 0 0; }
.mc-breadcrumbs__list {
    display: flex; align-items: center; gap: 0;
    list-style: none; padding: 0; margin: 0;
    font-family: var(--mc-font-head); font-size: var(--mc-fs-sm); font-weight: 600;
    color: var(--mc-calypso);
}
.mc-breadcrumbs__item { display: flex; align-items: center; }
.mc-breadcrumbs__item + .mc-breadcrumbs__item::before {
    content: '/'; margin: 0 calc(8px * var(--mc-scale)); color: rgba(var(--mc-calypso-rgb), 0.35);
}
.mc-breadcrumbs__list a {
    color: var(--mc-calypso); text-decoration: none;
    transition: color 0.2s ease;
}
.mc-breadcrumbs__list a:hover { color: var(--mc-keppel); }
.mc-breadcrumbs__item--current { color: var(--mc-dark); }

/* -- Shared Page Hero ------------------------------------------- */

.mc-page-hero {
    position: relative; overflow: hidden;
    background: var(--mc-deep);
    background-image:
        linear-gradient(rgba(var(--mc-keppel-rgb), .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--mc-keppel-rgb), .06) 1px, transparent 1px);
    background-size: 80px 80px;
    padding: 0 var(--mc-section-x) calc(45px * var(--mc-scale));
}
.mc-page-hero--pricing {
    padding-bottom: calc(44px * var(--mc-scale));
}
.mc-page-hero::before {
    content: ''; position: absolute; top: -100px; right: -80px;
    width: 500px; height: 500px; pointer-events: none;
    background: radial-gradient(ellipse, rgba(var(--mc-keppel-rgb), 0.14) 0%, transparent 60%);
}
.mc-page-hero::after {
    content: ''; position: absolute; bottom: -60px; left: 20%;
    width: 380px; height: 380px; pointer-events: none;
    background: radial-gradient(ellipse, rgba(var(--mc-amber-rgb), 0.06) 0%, transparent 60%);
}
.mc-page-hero .mc-container { position: relative; z-index: 1; }

/* Hero breadcrumbs (light variant) */
.mc-page-hero .mc-breadcrumbs--light .mc-breadcrumbs__list { color: rgba(var(--mc-spray-rgb),0.7); }
.mc-page-hero .mc-breadcrumbs--light a { color: rgba(var(--mc-spray-rgb),0.7); }
.mc-page-hero .mc-breadcrumbs--light a:hover { color: var(--mc-spray); }
.mc-page-hero .mc-breadcrumbs__item--current { color: rgba(var(--mc-light-rgb),0.9); }
.mc-page-hero .mc-breadcrumbs__item + .mc-breadcrumbs__item::before { color: rgba(var(--mc-spray-rgb),0.3); }

.mc-page-hero__header { margin-bottom: 0; }
.mc-page-hero__subtext {
    font-family: var(--mc-font-body); font-size: var(--mc-fs-lg); line-height: 1.75;
    color: rgba(var(--mc-light-rgb), 0.58); max-width: calc(520px * var(--mc-scale)); margin-bottom: 0;
}

/* Curved overlap into hero — shared across all standalone pages */
.mc-page-hero ~ .mc-section::before {
    content: ''; position: absolute; top: calc(-24px * var(--mc-scale)); left: 0; right: 0;
    height: calc(24px * var(--mc-scale)); z-index: 4;
    background: var(--mc-tint); border-radius: calc(20px * var(--mc-scale)) calc(20px * var(--mc-scale)) 0 0;
}
/* When hero-extras sits between hero and section, disable the base curve
   (the order page CSS handles its own transition). */
.mc-page-hero~.mc-of__hero-extras+.mc-section::before {
    content: none;
}

/* -- Scroll Reveal ---------------------------------------------- */

/* Default: visible (no-JS fallback) */
.mc-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s var(--mc-ease-out), transform 0.45s var(--mc-ease-out);
}

/* When JS is present: start hidden (set before first paint via inline <script>) */
html.mc-js .mc-reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
}

.mc-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay cascade */
.mc-reveal--delay-1 { transition-delay: 0.05s; }
.mc-reveal--delay-2 { transition-delay: 0.10s; }
.mc-reveal--delay-3 { transition-delay: 0.15s; }

/* Eyebrow letter-spacing enhancement */
html.mc-js .mc-eyebrow:not(.is-visible) { letter-spacing: var(--mc-ls-label); }
.mc-eyebrow.is-visible {
    letter-spacing: var(--mc-ls-eyebrow);
    transition: letter-spacing 0.45s var(--mc-ease-out), opacity 0.45s var(--mc-ease-out), transform 0.45s var(--mc-ease-out);
}

/* -- Scroll Progress -------------------------------------------- */

@supports (animation-timeline: scroll()) {
    .mc-scroll-progress {
        position: fixed; top: 0; left: 0; height: 2px; width: 100%;
        background: var(--mc-keppel); z-index: 9998;
        transform-origin: left;
        animation: mc-scroll-grow linear;
        animation-timeline: scroll();
    }
}
@keyframes mc-scroll-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* -- 404 Page --------------------------------------------------- */

.mc-404 {
    min-height: 60vh; display: flex; align-items: center; justify-content: center;
    padding: calc(80px * var(--mc-scale)) var(--mc-section-x);
}
.mc-404__inner { text-align: center; max-width: calc(520px * var(--mc-scale)); margin: 0 auto; }
.mc-404__code {
    font-family: var(--mc-font-head); font-size: clamp(4rem, 12vw, 6rem);
    font-weight: 800; color: var(--mc-keppel); line-height: 1; margin: 0 0 calc(16px * var(--mc-scale));
}
.mc-404__heading { margin: 0 0 calc(12px * var(--mc-scale)); }
.mc-404__text { margin: 0 auto calc(32px * var(--mc-scale)); max-width: none; }
.mc-404__actions { display: flex; gap: calc(12px * var(--mc-scale)); justify-content: center; flex-wrap: wrap; }

/* -- Standalone section spacing --------------------------------- */

/* -- Chatway plugin override ------------------------------------ */
.system-icon {
    width: 3rem;
    height: 3rem;
}

.mc-section:first-child {
    padding-top: calc(32px * var(--mc-scale));
}

/* -- Reduced Motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.mc-js .mc-reveal:not(.is-visible),
    .mc-reveal { opacity: 1; transform: none; transition: none; }
    .mc-btn--amber:active::before { display: none; }
    .mc-scroll-progress { display: none; }
}

/* -- Responsive ------------------------------------------------- */

@media (max-width: 1100px) {
    :root {
        --mc-section-y: calc(48px * var(--mc-scale));
        --mc-section-x: calc(36px * var(--mc-scale));
    }
}
@media (max-width: 1024px) {
    :root {
            --mc-section-y: calc(44px * var(--mc-scale));
            --mc-section-x: calc(32px * var(--mc-scale));
        }
}

@media (max-width: 768px) {
    :root {
            --mc-section-y: calc(32px * var(--mc-scale));
            --mc-section-x: calc(20px * var(--mc-scale));
        }
    .mc-btn--lg { font-size: var(--mc-fs); padding: calc(14px * var(--mc-scale)) calc(24px * var(--mc-scale)); width: 100%; justify-content: center; box-sizing: border-box; }
                .mc-page-hero {
                    padding: calc(28px * var(--mc-scale)) var(--mc-section-x) calc(36px * var(--mc-scale));
                }
        .mc-page-hero__subtext {
            font-size: var(--mc-fs-md);
        }
    .mc-404 { min-height: 50vh; padding: calc(60px * var(--mc-scale)) var(--mc-section-x); }
    .mc-404__actions { flex-direction: column; align-items: center; }
    .mc-404__actions .mc-btn { width: 100%; justify-content: center; max-width: 280px; box-sizing: border-box; }
}

@media (max-width: 480px) {
    :root {
            --mc-section-y: calc(28px * var(--mc-scale));
            --mc-section-x: calc(16px * var(--mc-scale));
            --mc-radius: calc(12px * var(--mc-scale));
        }
    .mc-heading { font-size: calc(var(--mc-fs) * 1.571); }
        .mc-subtext {
            font-size: var(--mc-fs);
            margin-bottom: calc(18px * var(--mc-scale));
        }
    
        .mc-page-hero {
            padding: calc(24px * var(--mc-scale)) var(--mc-section-x) calc(28px * var(--mc-scale));
        }
    
        .mc-page-hero__subtext {
            font-size: var(--mc-fs);
        }
    
        .mc-btn {
            padding: calc(12px * var(--mc-scale)) calc(24px * var(--mc-scale));
            font-size: calc(var(--mc-fs) * 0.929);
        }
    
        .mc-btn--lg {
            padding: calc(13px * var(--mc-scale)) calc(20px * var(--mc-scale));
        }
    .mc-404 { min-height: 40vh; padding: calc(48px * var(--mc-scale)) var(--mc-section-x); }
    .mc-404__text { margin-bottom: calc(24px * var(--mc-scale)); }

        .mc-eyebrow {
            font-size: var(--mc-fs-2xs);
            letter-spacing: calc(2.5px * var(--mc-scale));
            margin-bottom: calc(10px * var(--mc-scale));
        }
    
        .mc-breadcrumbs__list {
            font-size: calc(var(--mc-fs) * 0.786);
        }
        }
    
        @media (max-width: 320px) {
            :root {
                --mc-section-x: calc(12px * var(--mc-scale));
            }
    
            .mc-heading {
                font-size: calc(var(--mc-fs) * 1.357);
            }
    
            .mc-btn {
                padding: calc(11px * var(--mc-scale)) calc(16px * var(--mc-scale));
                font-size: calc(var(--mc-fs) * 0.857);
            }
}