/**********  JTN TMS overrides on the GrowMark template  **********
 *  Loaded after bootstrap.min.css and style.css.
 *  Keeps the template's layout, aligns type, contrast and framing with DESIGN.md.
 ******************************************************************/

:root {
    --jtn-primary: #2cb34a;         /* Command Green   */
    --jtn-primary-strong: #24953e;  /* Dispatch Green  */
    /* Command Green is only 2.74:1 on white — below WCAG AA for text. This darker
       tone of the same hue reaches 4.64:1 and is used wherever green sits on a
       light surface as TEXT. Fills and dark-surface text keep the brand green. */
    --jtn-primary-text: #1f8637;
    --jtn-ink: #2f3032;             /* Control Ink     */
    --jtn-ink-muted: #58595b;       /* Muted Steel     */
    --jtn-mist: #f3f7f3;            /* Operations Mist */
    --jtn-command-ink: #0c1810;     /* Command Ink     */
}

/* ---------- Typography: Manrope for reading, Barlow Condensed for labels ---------- */

body {
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--jtn-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--jtn-ink);
}

.display-1, .display-2, .display-5 { line-height: 0.98; letter-spacing: -0.04em; }

/* Section eyebrow — the template's `<p class="fs-5 fw-medium text-primary">` */
.section-eyebrow {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 0.95rem !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jtn-primary-text);
    margin-bottom: 0.5rem;
}

/* Green TEXT on light surfaces uses the AA-safe tone. */
.text-primary,
a.text-primary,
.service-btn a,
.tile a.text-primary { color: var(--jtn-primary-text) !important; }

/* On dark bands the brand green already clears AA (6.6:1), so restore it. */
.band-dark .section-eyebrow,
.carousel-caption .section-eyebrow,
.page-header .section-eyebrow { color: #b3ff43; }

.band-dark .text-primary,
.trust-strip .text-primary { color: var(--jtn-primary) !important; }

/* ---------- Contrast: the stock template scrims text at 10% black, which fails AA ---------- */

.carousel-caption {
    background: linear-gradient(90deg,
        rgba(6, 17, 10, 0.86) 0%,
        rgba(6, 17, 10, 0.72) 38%,
        rgba(6, 17, 10, 0.30) 68%,
        rgba(6, 17, 10, 0.18) 100%);
}

.page-header {
    background: linear-gradient(90deg, rgba(6, 17, 10, 0.88), rgba(6, 17, 10, 0.62)),
                url(../img/page-header.jpg) center center no-repeat;
    background-size: cover;
}

.about {
    background: linear-gradient(90deg, rgba(6, 17, 10, 0.55), rgba(6, 17, 10, 0.15)),
                url(../img/about.jpg) left center no-repeat;
    background-size: cover;
}

.page-header .breadcrumb-item a { color: #dcecdf; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: #dcecdf; }

/* ---------- Hero ---------- */

#header-carousel .carousel-item { min-height: 560px; }

#header-carousel .carousel-item img {
    height: 560px;
    object-fit: cover;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item,
    #header-carousel .carousel-item img { min-height: 460px; height: 460px; }
}

/* The template's display-1/2 assumes a 3-4 word headline. Ours run long, so
   cap the hero headline rather than letting it fill the whole slide. */
.carousel-caption .display-2 {
    font-size: clamp(2.1rem, 3.6vw, 3.5rem);
    max-width: 20ch;
}

.hero-lede {
    font-size: 1.12rem;
    line-height: 1.6;
    color: #e6f0e8;
    max-width: 34rem;
}

/* Stock controls span 15% of each edge and sit mid-height, straight through
   left-aligned hero copy. Move them into the bottom-right corner instead. */
#header-carousel .carousel-control-prev,
#header-carousel .carousel-control-next {
    width: auto;
    top: auto;
    bottom: 1.75rem;
    align-items: flex-end;
    opacity: 1;
    z-index: 2;
}

#header-carousel .carousel-control-prev { left: auto; right: 5.5rem; }
#header-carousel .carousel-control-next { right: 1.5rem; }

#header-carousel .carousel-control-prev-icon,
#header-carousel .carousel-control-next-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-width: 11px;
}

@media (max-width: 575.98px) {
    #header-carousel .carousel-control-prev,
    #header-carousel .carousel-control-next { display: none; }
}

/* Trust strip under the hero */
.trust-strip {
    background: var(--jtn-command-ink);
    color: #dcecdf;
}

.trust-strip .trust-item {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.95rem;
}

.trust-strip .trust-item i { color: var(--jtn-primary); }

/* ---------- Product screenshots (replaces the template's stock project photos) ---------- */

.project-item img.shot {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    background: var(--jtn-mist);
}

.shot-tag {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--jtn-primary-text);
}

/* ---------- Module / department / capability tiles ---------- */

.tile {
    background: #fff;
    border: 1px solid rgba(47, 48, 50, 0.10);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    transition: 0.3s;
}

.tile:hover {
    border-color: var(--jtn-primary);
    box-shadow: 0 18px 40px -28px rgba(58, 60, 62, 0.35);
}

.tile h5 { margin-bottom: 0.5rem; }
.tile p, .tile span, .tile li { color: var(--jtn-ink-muted); }

.tile-num {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--jtn-primary);
    color: #fff;
    font-weight: 800;
}

.check-list { list-style: none; padding-left: 0; margin: 0; }
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.6rem; }
.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0; top: 0.1rem;
    color: var(--jtn-primary-text);
    font-size: 0.85rem;
}

/* Chips (settings coverage, submodule items) */
.chip {
    display: inline-block;
    background: var(--jtn-mist);
    border: 1px solid rgba(44, 179, 74, 0.22);
    color: var(--jtn-ink);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    margin: 0 0.4rem 0.6rem 0;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ---------- Dark band (used for outcomes / CTA) ---------- */

.band-dark {
    background: var(--jtn-command-ink);
    color: #dcecdf;
}

.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4, .band-dark h5 { color: #fff; }
.band-dark p, .band-dark span, .band-dark li { color: #c4d6c8; }

.band-dark .tile {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(179, 255, 67, 0.18);
}

.band-dark .tile h5 { color: #fff; }
.band-dark .tile p, .band-dark .tile span, .band-dark .tile li { color: #c4d6c8; }

/* ---------- Navbar ---------- */

.navbar .navbar-nav .nav-link { font-weight: 600; }

.navbar-brand img { height: 42px; width: auto; }

.topbar-link { color: #fff; text-decoration: none; }
.topbar-link:hover { color: #b3ff43; }

/* ---------- Embedded CRM demo form ---------- */

.demo-embed {
    width: 100%;
    min-height: 620px;
    border: 0;
    border-radius: 12px;
    background: #fff;
}

/* ---------- Footer ---------- */

.footer .btn-link { text-align: left; }

/* ---------- Motion: honour reduced-motion (WOW.js animations included) ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .wow, .animated { visibility: visible !important; opacity: 1 !important; }
    .carousel-item { transition: none !important; }
}

/* ---------- Focus visibility (template ships none) ---------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 3px solid var(--jtn-primary);
    outline-offset: 2px;
    box-shadow: none;
}

.band-dark a:focus-visible,
.page-header a:focus-visible,
.carousel-caption a:focus-visible,
.trust-strip a:focus-visible { outline-color: #b3ff43; }

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--jtn-primary);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    left: 0;
    top: 0;
    color: #fff;
}