/* ==========================================================================
   JCTech site styles
   Bootstrap 5 (static/vendor) is the base; this file layers the JCTech design
   system on top. Structure:
     1. Design tokens      — colours, spacing, radii, shadows, type
     2. Bootstrap theming  — map tokens onto Bootstrap CSS variables
     3. Base elements      — body, headings, links, focus
     4. Layout             — page header, sections, footer
     5. Components         — cards, badges, buttons, CTA, floating actions
     6. Utilities          — small helpers not in Bootstrap
     7. Responsive         — breakpoint tweaks
   --jc-primary is overridden inline from Site settings (base.html).
   ========================================================================== */


/* 1. Design tokens ------------------------------------------------------- */
:root {
    /* Brand: navy + teal from the JCTech logo */
    --jc-primary: #0b1a4a;
    --jc-accent: #14c4b2;
    --jc-dark: #0b1a4a;
    --jc-surface: #f5f7fb;
    --jc-border: #e3e8ef;
    --jc-text: #1f2933;
    --jc-muted: #5f6b7a;

    --jc-primary-dark: #091538;
    --jc-primary-soft: #e7e9f0;
    --jc-primary-dark: color-mix(in srgb, var(--jc-primary) 82%, black);
    --jc-primary-soft: color-mix(in srgb, var(--jc-primary) 12%, white);

    --jc-radius-sm: .5rem;
    --jc-radius: .875rem;
    --jc-radius-lg: 1.25rem;

    --jc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --jc-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .08);
    --jc-shadow-lg: 0 1rem 2.5rem rgba(15, 23, 42, .14);

    --jc-font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --jc-section-y: 4rem;
    --jc-header-height: 64px;
}


/* 2. Bootstrap theming --------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--jc-primary);
    --bs-primary-rgb: 11, 26, 74;
    --bs-body-font-family: var(--jc-font-sans);
    --bs-body-color: var(--jc-text);
    --bs-secondary-color: var(--jc-muted);
    --bs-border-color: var(--jc-border);
    --bs-link-color: var(--jc-primary);
    --bs-link-hover-color: var(--jc-primary-dark);
    --bs-border-radius: var(--jc-radius-sm);
    --bs-border-radius-lg: var(--jc-radius);
    --bs-border-radius-xl: var(--jc-radius-lg);
    --bs-light-rgb: 245, 247, 251;
}

.btn-primary {
    --bs-btn-bg: var(--jc-primary);
    --bs-btn-border-color: var(--jc-primary);
    --bs-btn-hover-bg: var(--jc-primary-dark);
    --bs-btn-hover-border-color: var(--jc-primary-dark);
    --bs-btn-active-bg: var(--jc-primary-dark);
    --bs-btn-active-border-color: var(--jc-primary-dark);
    --bs-btn-disabled-bg: var(--jc-primary);
    --bs-btn-disabled-border-color: var(--jc-primary);
}

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

.bg-primary { background-color: var(--jc-primary) !important; }
.text-primary { color: var(--jc-primary) !important; }
.border-primary { border-color: var(--jc-primary) !important; }
.badge.text-bg-primary { background-color: var(--jc-primary) !important; }
.bg-primary-subtle { background-color: var(--jc-primary-soft) !important; }
.page-item.active .page-link { background-color: var(--jc-primary); border-color: var(--jc-primary); }
.form-control:focus, .form-select:focus {
    border-color: var(--jc-primary);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--jc-primary) 25%, transparent);
}
.form-check-input:checked { background-color: var(--jc-primary); border-color: var(--jc-primary); }
.nav-pills .nav-link.active { background-color: var(--jc-primary); }


/* 3. Base elements ------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--jc-header-height) + 1rem); }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.01em; color: var(--jc-dark); }
/* Headings keep the dark colour on light pages. On a dark band, inherit
   the parent's text-white instead of painting navy on navy. */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3, .text-white .h4, .text-white .h5, .text-white .h6 {
    color: inherit;
}
a { text-underline-offset: .15em; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--jc-primary) 60%, transparent); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: .5rem 1rem;
    background: var(--jc-primary);
    color: #fff;
}


/* 4. Layout -------------------------------------------------------------- */
.navbar-dark.bg-dark { --bs-dark-rgb: 11, 26, 74; }
.navbar-logo { height: 40px; width: auto; }
.footer-logo { height: 44px; width: auto; }
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link.active { color: #fff; text-decoration: underline; text-decoration-color: var(--jc-accent); text-decoration-thickness: 2px; text-underline-offset: .45em; }

.section { padding-top: var(--jc-section-y); padding-bottom: var(--jc-section-y); }
.section-title { font-weight: 700; margin-bottom: .5rem; }
.section-subtitle { color: var(--jc-muted); max-width: 42rem; }
.section-title + .section-subtitle { margin-bottom: 2rem; }

.page-header { background: var(--jc-surface); }
.page-header .breadcrumb { margin-bottom: .5rem; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: var(--jc-muted); }

.page-content { line-height: 1.75; }
.page-content h2, .page-content h3 { margin-top: 2rem; }
.page-content img { border-radius: var(--jc-radius); }

footer.bg-dark { --bs-dark-rgb: 11, 26, 74; }
footer a.link-light:hover { color: var(--jc-accent) !important; }

.inbox-card {
    border: 1px solid var(--jc-border, rgba(11, 26, 74, .08));
    border-radius: var(--jc-radius);
    background: #fff;
    padding: 1.1rem 1.15rem;
    height: 100%;
}
.inbox-card a { overflow-wrap: anywhere; }


/* 5. Components ---------------------------------------------------------- */
.card { border-radius: var(--jc-radius); }
.card.shadow-sm { box-shadow: var(--jc-shadow-sm) !important; }
.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover, .card-hover:focus-within { transform: translateY(-4px); box-shadow: var(--jc-shadow) !important; }
.card-img-top { border-top-left-radius: var(--jc-radius); border-top-right-radius: var(--jc-radius); }

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--jc-radius-sm);
    font-size: 1.4rem;
    color: var(--jc-primary);
    background: var(--jc-primary-soft);
}
.icon-badge--lg { width: 64px; height: 64px; font-size: 1.9rem; border-radius: var(--jc-radius); }

.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-weight: 600;
    color: #fff;
    background: var(--jc-primary);
}

.star-rating { letter-spacing: .05em; }

.cta-band {
    /* Headings use var(--jc-dark); remap it here so they cannot stay navy. */
    --jc-dark: #d7dde8;
    --bs-heading-color: #d7dde8;
    background: linear-gradient(135deg, #0b1a4a, #0d5368);
    background: linear-gradient(135deg, var(--jc-primary), color-mix(in srgb, var(--jc-primary) 65%, var(--jc-accent)));
    color: #d7dde8;
}
.cta-band .cta-band__title {
    font-size: 1.5rem;
    line-height: 1.3;
    color: #d7dde8 !important;
}
.cta-band .cta-band__text {
    opacity: 1;
    color: #c2cad8 !important;
}

.availability-banner { border-left: 4px solid #c9a227; }

/* Teal accent for secondary actions and highlights */
.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--jc-accent);
    --bs-btn-border-color: var(--jc-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--jc-accent) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--jc-accent) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--jc-accent) 75%, black);
}
.icon-badge { color: #0d8f86; background: #e6f8f6; }
.icon-badge { color: color-mix(in srgb, var(--jc-accent) 70%, var(--jc-dark)); background: color-mix(in srgb, var(--jc-accent) 14%, white); }
.stats-strip .display-6 { color: var(--jc-primary) !important; }

.hero { position: relative; overflow: hidden; }
.hero.bg-surface {
    background-image:
        radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--jc-accent) 18%, transparent), transparent 40%),
        radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--jc-primary) 10%, transparent), transparent 35%);
}
.hero--image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: linear-gradient(rgba(11, 37, 69, .72), rgba(11, 37, 69, .55));
}
.hero--image > .container { position: relative; }
.hero--image .lead { color: rgba(255, 255, 255, .85); }
.py-lg-6 { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 992px) { .py-lg-6 { padding-top: 5.5rem; padding-bottom: 5.5rem; } }

.hero-product-stack { display: flex; flex-direction: column; gap: 1rem; }
.hero-product-chip {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    color: var(--jc-text);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.hero-product-chip:hover { transform: translateX(6px); box-shadow: var(--jc-shadow); color: var(--jc-text); }
.hero-product-chip:nth-child(2) { margin-left: 1.5rem; }
.hero-product-chip:nth-child(3) { margin-left: 3rem; }

.stats-strip { background: #fff; }
.about-stats { background: linear-gradient(135deg, var(--jc-dark), color-mix(in srgb, var(--jc-dark) 70%, var(--jc-accent))); }

/* Timeline (About page) */
.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 44rem; position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: color-mix(in srgb, var(--jc-accent) 45%, var(--jc-border));
}
.timeline-item { position: relative; padding-left: 4.25rem; padding-bottom: 2rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--jc-primary);
    border: 2px solid var(--jc-accent);
    font-size: 1.2rem;
}
.timeline-date { display: block; font-weight: 600; color: var(--jc-accent); font-size: .9rem; margin-bottom: .25rem; }

.product-hero-image { max-height: 420px; }
.product-hero-fallback {
    min-height: 280px;
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
}
.product-screenshot { height: 200px; }

.team-photo { width: 112px; height: 112px; font-size: 2rem; }
.team-card a:hover { color: var(--jc-accent) !important; }
.values-list li + li { border-top: 1px dashed var(--jc-border); padding-top: .5rem; }

.partner-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem 3rem;
}
.partner-logos img {
    max-height: 48px;
    max-width: 160px;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .2s ease, opacity .2s ease;
}
.partner-logos a:hover img, .partner-logos img:hover { filter: none; opacity: 1; }

.floating-actions {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
}
.floating-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #fff;
    background: var(--jc-primary);
    box-shadow: var(--jc-shadow);
    transition: transform .15s ease;
}
.floating-btn:hover, .floating-btn:focus-visible { transform: scale(1.06); color: #fff; }
.floating-btn--whatsapp { background: #25d366; }
.floating-btn--top { width: 44px; height: 44px; font-size: 1.2rem; background: var(--jc-dark); }
.floating-btn[hidden] { display: none; }

.chatbot { position: relative; }
.chatbot-toggle .chatbot-toggle__close { display: none; }
.chatbot.is-open .chatbot-toggle .bi-chat-dots { display: none; }
.chatbot.is-open .chatbot-toggle .chatbot-toggle__close { display: inline; }
.chatbot-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + .75rem);
    display: flex;
    flex-direction: column;
    width: 22.5rem;
    max-width: calc(100vw - 2rem);
    width: min(22.5rem, calc(100vw - 2rem));
    height: 32rem;
    max-height: calc(100vh - 8rem);
    height: min(32rem, calc(100vh - 8rem));
    background: #fff;
    color: var(--jc-text);
    border: 1px solid var(--jc-border);
    border-radius: var(--jc-radius-lg);
    box-shadow: var(--jc-shadow-lg);
    opacity: 0;
    transform: translateY(12px) scale(.96);
    transform-origin: bottom right;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.chatbot.is-open .chatbot-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}
.chatbot-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--jc-primary);
    color: #fff;
    border-radius: var(--jc-radius-lg) var(--jc-radius-lg) 0 0;
}
.chatbot-title { font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; color: #fff; }
.chatbot-category { max-width: 12rem; }
.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--jc-surface);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.chatbot-bubble { max-width: 92%; }
.chatbot-bubble--user { align-self: flex-end; }
.chatbot-bubble--bot { align-self: flex-start; }
.chatbot-bubble__who { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--jc-muted); margin-bottom: .2rem; }
.chatbot-bubble--user .chatbot-bubble__who { text-align: right; }
.chatbot-bubble__body {
    padding: .65rem .85rem;
    border-radius: var(--jc-radius);
    background: #fff;
    border: 1px solid var(--jc-border);
    box-shadow: var(--jc-shadow-sm);
}
.chatbot-bubble--user .chatbot-bubble__body { background: var(--jc-primary); color: #fff; border-color: transparent; }
.chatbot-hint { font-size: .8rem; color: var(--jc-muted); margin: 0 0 .4rem; }
.chatbot-suggestions, .chatbot-actions, .chatbot-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.chatbot-suggestion {
    border: 1px solid var(--jc-border);
    background: #fff;
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .8rem;
    text-align: left;
}
.chatbot-suggestion:hover, .chatbot-suggestion:focus-visible { border-color: var(--jc-accent); color: var(--jc-primary); }
.chatbot-form {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    border-top: 1px solid var(--jc-border);
    background: #fff;
    border-radius: 0 0 var(--jc-radius-lg) var(--jc-radius-lg);
}
.chatbot-form .form-control { font-size: 16px; }
@media (max-width: 575.98px) {
    .chatbot-panel {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: min(85vh, 36rem);
        max-height: calc(100vh - env(safe-area-inset-top, 0px));
        border-radius: 1.1rem 1.1rem 0 0;
        transform: translateY(16px);
    }
    .chatbot.is-open .chatbot-panel { transform: none; }
    .chatbot-header { border-radius: 1.1rem 1.1rem 0 0; }
}

.alert { border-radius: var(--jc-radius-sm); }
.payment-method-card { cursor: pointer; }
.payment-method-card.is-selected,
.payment-method-card:focus-within,
.payment-method-card:has(input:checked) { outline: 2px solid #14c4b2; outline: 2px solid var(--jc-accent); }
@media print {
    .no-print { display: none !important; }
    .receipt-sheet { box-shadow: none !important; }
}


/* 6. Utilities ----------------------------------------------------------- */
.object-fit-cover { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.bg-surface { background-color: var(--jc-surface) !important; }
.text-accent { color: var(--jc-accent) !important; }
.shadow-jc { box-shadow: var(--jc-shadow) !important; }
.rounded-jc { border-radius: var(--jc-radius) !important; }
.share-bar .btn { min-width: 2.25rem; }
.share-bar .btn.copied { border-color: var(--jc-accent); color: var(--jc-accent); }
.line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }


/* 7. Responsive ---------------------------------------------------------- */
/* Breakpoints match Bootstrap 5 and the Phase 5 device list:
   phones   max-width 575.98px
   tablets  max-width 767.98px / 991.98px
   laptops  min-width 992px
   desktops min-width 1200px
   large    min-width 1400px
*/
html { overflow-x: hidden; overflow-x: clip; }
.page-content, .chatbot-messages { -webkit-overflow-scrolling: touch; }
.navbar.sticky-top {
    z-index: 1030;
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
.sticky-aside { top: calc(var(--jc-header-height) + 0.75rem); }

/* CMS / long content must not blow out the viewport */
.page-content img,
.page-content video,
.page-content iframe { max-width: 100%; height: auto; }
.page-content pre,
.page-content table { display: block; max-width: 100%; overflow-x: auto; }
.page-content, .card, .breadcrumb { overflow-wrap: break-word; }
.accordion-button { overflow-wrap: anywhere; }
.pagination { flex-wrap: wrap; }

/* Curriculum / lesson rows wrap instead of overflowing */
.curriculum .list-group-item { flex-wrap: wrap; gap: .5rem; }
.lesson-nav .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.floating-actions {
    right: max(1.25rem, env(safe-area-inset-right, 0px));
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}

@media (max-width: 991.98px) {
    .hero-product-chip:nth-child(2),
    .hero-product-chip:nth-child(3) { margin-left: 0; }

    .navbar-collapse .navbar-actions { width: 100%; }
    .navbar-collapse .navbar-actions .btn { width: 100%; }
    .navbar-collapse .language-form,
    .navbar-collapse .language-form .form-select { width: 100%; }
}

@media (max-width: 767.98px) {
    :root { --jc-section-y: 2.75rem; --jc-header-height: 56px; }
    .display-4 { font-size: 2.15rem; }
    .display-5 { font-size: 1.85rem; }
    .display-6 { font-size: 1.5rem; }
    .lead { font-size: 1.05rem; }
    .navbar-logo { height: 34px; }
    .page-header { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .card.p-4 { padding: 1.25rem !important; }
    .form-control, .form-select { font-size: 16px; } /* stop iOS zoom on focus */
    .hero .btn-lg,
    .cta-band .btn-lg { width: 100%; }
    .floating-actions { right: max(.875rem, env(safe-area-inset-right, 0px)); bottom: max(.875rem, env(safe-area-inset-bottom, 0px)); }
    .floating-btn { width: 46px; height: 46px; font-size: 1.3rem; }
    .product-hero-image { max-height: 240px; }
    .product-hero-fallback { min-height: 180px; }
}

@media (max-width: 575.98px) {
    .lesson-nav { flex-direction: column; }
    .lesson-nav .btn { width: 100%; white-space: normal; }
}

@media (min-width: 1200px) {
    :root { --jc-section-y: 4.5rem; }
}

@media (min-width: 1400px) {
    :root { --jc-section-y: 5rem; --jc-header-height: 72px; }
    .navbar-logo { height: 44px; }
    .container { max-width: 1280px; }
}

@media (hover: none) {
    .card-hover:hover, .card-hover:focus-within { transform: none; }
    .hero-product-chip:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .card-hover, .floating-btn, .hero-product-chip, .chatbot-panel { transition: none; }
    .card-hover:hover { transform: none; }
}

@media print {
    .navbar, footer, .floating-actions, .cta-band, .skip-link, .no-print { display: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}