/*
===================================================================
DESIGN SYSTEM — X-Ray Security Solutions
===================================================================
A deliberate visual system for a technical B2B/B2G security-equipment
audience (OEMs, integrators, procurement engineers, government buyers).
Goal: authoritative, precise, restrained — premium through discipline,
not decoration. Loaded last so it can cleanly supersede the generic
theme (style.css) and the old template "skin" (skin.css).

Contents:
  1. Design tokens
  2. Base typography
  3. Accent recolor (deep teal replaces bright template cyan)
  4. Buttons
  5. Eyebrow / section titles
  6. Cards, tags, hairlines
  7. Navigation
  8. Footer + cookie banner
  9. Photo treatment
===================================================================
*/

/* 1. DESIGN TOKENS ------------------------------------------------ */
:root {
    --ink: #0b1620;
    --ink-2: #132430;
    --paper: #f6f5f1;
    --surface: #ffffff;
    --accent: #0e7a85;
    --accent-deep: #0a5b64;
    --accent-bright: #17b8c4;
    --text: #26313a;
    --text-muted: #64707a;
    --border: #e1ded3;
    --border-dark: rgba(255, 255, 255, .14);

    --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 2. BASE TYPOGRAPHY ----------------------------------------------- */
body {
    font-family: var(--font-body);
    color: var(--text);
}

p, li, td, th, label, .btn-text, input, textarea, select {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.btn,
.counter .value,
.menu-cnt > ul > li > a,
.logo-text {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

h1 { font-weight: 600; letter-spacing: -0.02em; }
h2 { font-weight: 600; letter-spacing: -0.015em; }
h3, h4 { font-weight: 600; }

/* Section eyebrow label (the small caps line above every section heading) */
.title p,
.section-home-slider h2 span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .14em;
}

/* 3. ACCENT RECOLOR ------------------------------------------------- */
/* Replace every hardcoded template-cyan usage with the new deep-teal
   accent. Selector groups mirror skin.css exactly so nothing is missed. */

.light .shop-menu .shop-cart .cart-item .cart-content, .btn-video:after, .menu-cnt > ul > li:hover > a, .icon-list li > i, .icon-links:not(.social-colors) a i, .btn.btn-border, .title p,
.accordion-list > li > a:before, nav:not(.menu-transparent) .menu-cnt > ul > li:hover > a, .cnt-box-info .cnt-info > div > span:last-child, .btn-text:after, .menu-cnt > ul > li.nav-label > a,
.cnt-box-top-icon > i, .cnt-box-side-icon > im.btn-border:hover, .icon-links a:hover i, .icon-links-popup:hover > i, .breadcrumb li:not(:last-child):hover a, .pagination li:not(.page):hover a,
.search-bar input[type=submit]:hover, .accordion-list > li:hover > a, .btn-text:hover, .menu-inner li:hover > a, .menu-inner li.active > a, .menu-inner .dropdown ul > li:hover > a,
.album-title > a:hover, .glide__arrow:hover, .mega-menu .icon-list li a:hover, nav.active .menu-btn, .menu-transparent .menu-cnt > ul > li:hover > a, .list-nav a:hover, .counter .value [data-to],
body > header h2, .breadcrumb li:last-child a, .cnt-box-side .extra-field, .cnt-box-team .caption, .timeline .badge span, .cnt-pricing-table .price, .cnt-pricing-table > ul > li:before, .media-box .extra-field,
.album-title > a:before, .accordion-list > li.active > a, .media-box.media-box-reveal .caption h3, .cnt-box-top .extra-field, .list-nav a:first-child:before, .list-nav a:last-child:before,
.cnt-box-testimonials-bubble .thumb-bar span:last-child, .cnt-box-side-icon > i, .countdown-vertical [data-time] > div > span:first-child, .countdown-horizontal [data-time] > div > span:first-child,
.social-feed a {
    color: var(--accent);
}

footer.light a, .cnt-box.light .extra-field, nav.light .menu-cnt > ul > li:hover > a, .section-home-slider [data-to], .section-home-slider h2, .light .title p, body > header.light h2,
.boxed-area.light .text-list-bold li b, .text-color-2 {
    color: var(--accent-bright) !important;
}

.cnt-box-blog-side .blog-date span:last-child, .progress-bar > div > div, footer .icon-list li:before, .shop-menu .cart-buttons a:hover, .cnt-box-blog-top .blog-date span:last-child, .btn-video:empty,
.dropdown ul:not(.icon-list) li:hover > a, .cnt-box-info .extra-field, .menu-cnt > ul > li:hover > a, .lan-menu > li:hover > a, .dropdown > ul:before, .shop-menu-cnt .cart-count, .light .icon-box i, .light .counter i,
.section-color.light .btn:not(.btn-border):hover, .breadcrumb li a:after, .menu-inner li:before, .text-list-base li > div, .text-list-image .content > div, .text-list-side li > div, .text-line:before,
.icon-line li:before, .icon-line span:before, .icon-circle li:before, .media-box-reveal .caption h3:before, .arrows-inner-right .glide__arrow, .light .breadcrumb li a:after, .list-tags a:hover {
    background-color: var(--accent);
}

.btn, .icon-links-grid a:hover, .icon-links-button a, .pagination li.page:hover a, .pagination li.page.active a, .list-nav a.list-archive {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn:hover {
    background-color: var(--accent-deep);
    border-color: var(--accent-deep);
}

.light .glide__bullets > button.glide__bullet--active, .section-home-slider .glide__arrow {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.shop-menu, .menu-cnt > ul li ul li:hover + li > a, nav .menu-right .custom-area, .input-text, .input-select, .input-textarea, .light .glide__bullets > button, .light .text-list-line li hr,
.media-box-half .extra-field + p, .album-box .caption, .media-box-reveal .caption, .cnt-box-top .extra-field, .icon-links-grid a, .cnt-box-testimonials-bubble > p, .light .table-border td {
    border-color: var(--accent);
}

/* Section-color background: warm paper instead of pale template blue */
.cnt-call, .comment-list li, .timeline .panel, .header-base, main > section.section-base.section-color, .section-color .input-text, .section-color .input-select, .section-color .input-textarea {
    background-color: var(--paper);
}

/* Dark ink instead of the template's teal-tinted navy */
main > section[style*="background:#002035"] {
    background-color: var(--ink) !important;
}

/* Interior-page title band (Solutions, etc.) — a compact dark intro
   band instead of a bare transparent strip, echoing the Home hero.
   It absorbs the fixed-nav clearance itself so it sits flush under
   the nav instead of leaving a blank gap above it. */
body.no-hero main:has(> header:not(.header-base)) {
    padding-top: 0;
}

main > header:not(.header-base) {
    background-color: var(--ink);
    padding: 150px 0 50px;
    height: auto;
    display: block;
}

main > header:not(.header-base) h1 {
    color: #fff;
    font-size: 42px;
}

main > header:not(.header-base) h4 {
    color: rgba(255, 255, 255, .68);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    max-width: 720px;
}

/* 4. BUTTONS --------------------------------------------------------- */
.btn {
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.btn-border, body .btn-border {
    color: var(--accent);
}

.btn-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* 5. EYEBROW / SECTION TITLES ----------------------------------------- */
.title {
    position: relative;
}

.title p {
    display: flex;
    align-items: center;
    gap: 10px;
}

.title p::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

/* 6. CARDS, TAGS, HAIRLINES -------------------------------------------- */
/* Flatten the boxed-card look: hairline border instead of heavy shadow at rest */
.cnt-box.boxed {
    border: 1px solid var(--border);
    box-shadow: none;
}

.section-color .cnt-box.boxed .caption, .section-color .cnt-box-top-icon.boxed > i,
.cnt-box.boxed .caption, .cnt-box-side-icon.boxed > i, .cnt-box-top-icon.boxed > i, .boxed-area, .cnt-box-top-icon.boxed, .cnt-box-testimonials-bubble > p, .section-color .icon-box i {
    background-color: var(--surface);
}

/* Info tags (e.g. "On-site / Service / OEMs & end users") — plain labels
   separated by a hairline dot, not bright pill badges */
.cnt-box-info .cnt-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
}

.cnt-box-info .cnt-info > div {
    display: inline-flex;
    width: auto;
    padding: 0;
    border: none;
}

.cnt-box-info .cnt-info > div:not(:last-child)::after {
    content: "·";
    margin-left: 8px;
    color: var(--border);
}

.cnt-box-info .cnt-info > div > span:first-child {
    display: none;
}

.cnt-box-info .cnt-info > div > span:last-child {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* 7. NAVIGATION ---------------------------------------------------- */
.menu-cnt > ul > li > a {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* 8. FOOTER + COOKIE BANNER ------------------------------------------- */
footer.light {
    background-color: var(--ink) !important;
}

footer.light .footer-bar {
    border-top: 1px solid var(--border-dark);
}

footer.light h3 {
    font-family: var(--font-display);
}

#cookie-banner {
    background: var(--ink-2) !important;
    border-top: 2px solid var(--accent) !important;
}

#cookie-banner-text a {
    color: var(--accent-bright) !important;
}

#cookie-accept {
    background: var(--accent) !important;
}

#cookie-essential {
    border-color: var(--border-dark) !important;
}

/* 9. PHOTO TREATMENT -------------------------------------------------- */
/* A single consistent tone across photos from different sources, so the
   site reads as one system instead of a stock-photo grab bag. */
.cnt-box .img-box, .img-box.img-box-caption {
    position: relative;
}

.cnt-box .img-box::after, .img-box.img-box-caption::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 22, 32, 0) 55%, rgba(11, 22, 32, .55) 100%);
    pointer-events: none;
}