/*
 * ITSW customer theme for HESK 3.7.12
 * Layout/brand overrides only. HESK core behaviour is intentionally untouched.
 */
:root {
    /* ITSW CI colors sampled from the current wordmark */
    --itsw-green: #67aa46;
    --itsw-green-dark: #4f8737;
    --itsw-ink: #202421;
    --itsw-muted: var(--font__sec-clr);
    --itsw-border: color-mix(in srgb, var(--itsw-ink) 12%, var(--surface));
    --itsw-soft: color-mix(in srgb, var(--itsw-green) 8%, var(--surface));
    --itsw-shadow: 0 18px 55px rgba(37,49,42,.09);

    /* Main HESK theme colors aligned to the ITSW wordmark. */
    --primary: #202421;
    --secondary: #4f8737;
    --tertiary: #67aa46;

    /* Keep HESK navigation aligned with the light header used on it-sw.org. */
    --header__bg: #ffffff;
    --header_logo__clr: var(--itsw-ink);
    --header_nav__clr: var(--itsw-ink);
    --header_nav__hover_clr: var(--itsw-green-dark);
    --header_profile__clr: var(--itsw-ink);
    --header_profile__user-avatar-bg: var(--itsw-green);
    --header_border__clr: #e4e9e2;
}

html { scroll-behavior: smooth; }
body.cust-help {
    background: var(--main-background);
    color: var(--font__pri-clr);
}

/* Header / wordmark
 * The default HESK selector is .cust-help .header, so we intentionally use
 * the same specificity here. This keeps the support header light like the
 * main ITSW website instead of falling back to HESK's dark navigation bar.
 */
.cust-help .header {
    background: #ffffff;
    border-top: 1px solid #eef1ed;
    border-bottom: 1px solid #dfe5dd;
    box-shadow: 0 4px 18px rgba(32,36,33,.035);
}
.cust-help .header__inner {
    min-height: 72px;
    padding-top: 11px;
    padding-bottom: 11px;
}
.cust-help .header__logo {
    color: var(--itsw-ink) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.cust-help .header__logo:hover { color: var(--itsw-green-dark) !important; }
.itsw-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    line-height: 1;
}
.itsw-wordmark__mark {
    color: var(--itsw-ink);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.8px;
}
.itsw-wordmark__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 11px;
    border-left: 1px solid var(--itsw-border);
}
.itsw-wordmark__title {
    color: var(--itsw-ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1px;
}
.itsw-wordmark__sub {
    color: var(--itsw-muted);
    font-size: 11px;
    font-weight: 400;
}
.cust-help .header .profile__user,
.cust-help .header .language-select,
.cust-help .header a,
.cust-help .header .dropdown-select .label,
.cust-help .header__inner .header__nav .nav-item,
.cust-help .header__inner .header__nav .nav-item.text-only,
.cust-help .header__inner .header__nav .nav-item a {
    color: var(--itsw-ink);
}
.cust-help .header .icon { fill: currentColor; }
.cust-help .header__inner .header__nav .nav-item a:hover,
.cust-help .header__inner .dropdown-select:hover .label span,
.cust-help .header .user__name:hover p span {
    color: var(--itsw-green-dark);
}
.cust-help .header__inner .dropdown-select:hover .label .icon,
.cust-help .header .user__name:hover p .icon-chevron-down {
    fill: var(--itsw-green-dark);
}
.cust-help .header__inner .header__lang {
    padding-left: 18px;
    border-left: 1px solid #e4e9e2;
}
.cust-help .header__inner .header__lang .dropdown-select .label {
    font-weight: 700;
}
.cust-help .header .user__ava {
    background: var(--itsw-green);
}


/* Breadcrumb / content rhythm */
.breadcrumbs {
    background: transparent;
    border-bottom: 0;
}
.breadcrumbs__inner { padding-top: 16px; padding-bottom: 4px; }
.main__content { padding-top: 34px; padding-bottom: 54px; }
.contr { max-width: 1120px; }

/* Branded landing intro */
.itsw-support-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin: 0 0 26px;
    padding: 28px 30px;
    background: var(--surface);
    border: 1px solid var(--itsw-border);
    border-radius: 18px;
    box-shadow: var(--itsw-shadow);
}
.itsw-support-intro__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--itsw-green-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.itsw-support-intro h1 {
    margin: 0 0 8px;
    color: var(--itsw-ink);
    font-size: clamp(27px, 4vw, 42px);
    line-height: 1.12;
    letter-spacing: -.025em;
}
.itsw-support-intro p {
    margin: 0;
    max-width: 720px;
    color: var(--itsw-muted);
    font-size: 16px;
    line-height: 1.65;
}
.itsw-support-intro__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--itsw-soft);
    color: var(--itsw-green-dark);
    font-size: 13px;
    font-weight: 700;
}
.itsw-support-intro__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--itsw-green);
}

/* Search and cards */
.help-search {
    border-radius: 18px;
    background: transparent;
    padding-top: 10px;
}
.search__title { color: var(--itsw-ink); letter-spacing: -.015em; }
#kb_search,
.form-control,
.selectize-input {
    border-radius: 10px !important;
    border-color: var(--itsw-border) !important;
    box-shadow: none !important;
}
.form-control:focus,
.selectize-input.focus {
    border-color: var(--itsw-green) !important;
    box-shadow: 0 0 0 3px var(--itsw-soft) !important;
}
.nav { gap: 18px; }
.navlink,
.preview,
.article,
.ticket-create,
.form--ticket,
.table-wrap,
.notification {
    border-radius: 14px;
}
.navlink {
    /* Keep the primary actions clearly recognizable even without hover. */
    background: var(--surface);
    border: 1px solid #b8d6aa;
    box-shadow: 0 8px 26px rgba(37,49,42,.085);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.navlink:hover {
    transform: translateY(-2px);
    background: #f5faf2;
    border-color: var(--itsw-green);
    box-shadow: 0 13px 35px rgba(37,49,42,.12);
}
.navlink:focus-visible {
    outline: 3px solid rgba(103,170,70,.28);
    outline-offset: 3px;
    border-color: var(--itsw-green-dark);
}
.navlink .icon-in-circle {
    background: var(--itsw-green);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79,135,55,.20);
}
.navlink .icon-in-circle .icon {
    fill: #ffffff;
}
.navlink:hover .icon-in-circle {
    background: var(--itsw-green-dark);
}
.navlink:hover .icon-in-circle .icon {
    fill: #ffffff;
}
.article__heading .icon-in-circle {
    background: var(--itsw-soft);
    color: var(--itsw-green-dark);
}
.navlink .navlink__title {
    color: var(--itsw-green-dark);
}
.navlink .navlink__descr {
    color: var(--itsw-muted);
}
.preview__title { color: var(--itsw-ink); }

/* Buttons */
.btn { border-radius: 9px; }
.btn-full {
    min-height: 44px;
    border: 1px solid var(--itsw-green-dark);
    background: var(--itsw-green);
    color: var(--surface);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(93,132,45,.16);
}
.btn-full:hover,
.btn-full:focus {
    background: var(--itsw-green-dark);
    border-color: var(--itsw-green-dark);
}
.btn-border,
.btn--blue-border {
    border-radius: 9px;
}

/* Forms */
.form-submit-ticket,
.page-form .form,
.page-login .form,
.page-register .form {
    max-width: 820px;
}
.form-submit-ticket {
    margin: 0 auto;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--itsw-border);
    border-radius: 16px;
    box-shadow: var(--itsw-shadow);
}
.page-create-ticket .article__heading--form {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.page-create-ticket .article-heading-tip {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.label { color: var(--itsw-ink); font-weight: 700; }
.divider { border-color: var(--itsw-border); }

/* Footer */
.itsw-site-footer {
    margin-top: 14px;
    border-top: 1px solid var(--itsw-border);
    background: var(--surface);
}
.itsw-site-footer__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.itsw-site-footer__brand { color: var(--itsw-ink); font-weight: 800; }
.itsw-site-footer__brand strong { color: var(--itsw-green); }
.itsw-site-footer__text { margin-top: 5px; color: var(--itsw-muted); font-size: 13px; }
.itsw-site-footer__links { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.itsw-site-footer__links a {
    color: var(--itsw-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}
.itsw-site-footer__links a:hover { color: var(--itsw-green-dark); }
.footer { background: var(--surface) !important; }
.footer p { color: var(--itsw-muted); }

@media (max-width: 720px) {
    .cust-help .header__inner { min-height: 64px; }
    .itsw-wordmark__mark { font-size: 23px; }
    .itsw-wordmark__copy { display: none; }
    .main__content { padding-top: 24px; padding-bottom: 38px; }
    .itsw-support-intro { grid-template-columns: 1fr; padding: 22px; border-radius: 14px; }
    .itsw-support-intro__badge { justify-self: start; }
    .form-submit-ticket { padding: 20px; }
    .itsw-site-footer__inner { flex-direction: column; align-items: flex-start; }
}