@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");


/* === 1. Design tokens === */

:root {
    --gp-green-fair: #00a85a;
    --gp-green-forest: #00643b;
    --gp-green-strong: #28aa1e;
    --gp-green-apple: #6ab023;
    --gp-green-lime: #97d700;
    --gp-green-highlight: #27e663;
    --gp-green-tint: #e6f4ec;
    --gp-blue-midnight: #001f4e;
    --gp-teal: #00606a;
    --gp-turquoise: #00a499;
    --gp-blue-sky: #41b6e6;
    --gp-violet: #410076;
    --gp-purple: #824ee4;
    --gp-red: #df1317;
    --gp-morello: #bc0c29;
    --gp-pink: #e83e6a;
    --gp-blush: #ff8a8c;
    --gp-yellow: #fae100;
    --gp-peach: #ffc399;
    --gp-orange: #ff5b0f;
    --gp-brown: #713400;
    --gp-black: #231f20;
    --gp-grey-dark: #333333;
    --gp-grey-mid: #999999;
    --gp-grey-100: #f5f5f5;
    --gp-grey-border: #cccccc;
    --gp-white: #ffffff;
    --gp-font: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --gp-link-color: var(--gp-green-forest);
    --gp-link-hover: var(--gp-green-fair);
    --gp-text-color: #000000;
}


/* === 2. Base styles === */

body {
    font-family: var(--gp-font);
    color: var(--gp-text-color);
    line-height: 1.55;
}

[data-id="article_Title"],
.KbDetailLtContainer__detailHeader.commonStyle__detailHeader {
    font-family: 'Bebas Neue', var(--gp-font);
    color: var(--gp-green-forest);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.Header__searchTitle {
    font-family: 'Bebas Neue', var(--gp-font);
    color: var(--gp-white);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

h1,
h2,
h3,
h4 {
    color: var(--gp-green-forest);
    font-family: var(--gp-font);
    font-weight: 700;
    letter-spacing: -0.015em;
}

a {
    color: var(--gp-link-color);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--gp-green-highlight);
    outline-offset: 2px;
}

.Button,
.btn,
.ArticleLayout__main a.button {
    background: var(--gp-green-fair);
    color: var(--gp-white) !important;
    border-radius: 4px;
    padding: 0.65em 1.3em;
    font-weight: 600;
    transition: background 0.15s ease;
}

.Button:hover,
.btn:hover {
    background: var(--gp-green-forest);
}

.Button:focus,
.btn:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
    outline: 2px solid var(--gp-green-highlight);
    outline-offset: 2px;
}

.btn.secondary,
.Button.secondary {
    background: var(--gp-grey-100);
    color: var(--gp-green-forest);
    border: 1px solid var(--gp-green-fair);
}

.btn.secondary:hover,
.Button.secondary:hover {
    background: var(--gp-green-fair);
    color: var(--gp-white);
}

img {
    max-width: 100%;
    height: auto;
}

.inputBox {
    border-radius: 4px;
    border: 1px solid var(--gp-grey-border);
}


/* === 3. Zoho Desk component overrides === */

.Footer {
    background: var(--gp-green-forest);
    color: var(--gp-white);
}

.Footer a {
    color: var(--gp-white);
}

.Footer a:hover {
    color: var(--gp-green-highlight);
}

.Footer__footerQus {
    font-size: 0 !important;
    color: transparent !important;
    display: inline-block !important;
}

.Footer__footerQus::after {
    content: "Can't find what you're looking for?";
    font-size: 36px !important;
    line-height: 1.2 !important;
    font-weight: 700;
    color: var(--gp-green-forest) !important;
    display: block !important;
    visibility: visible !important;
}

.Footer__footerDescription span {
    font-size: 0 !important;
    color: transparent !important;
    display: inline-block !important;
}

.Footer__footerDescription span::after {
    content: "Raise a ticket and a member of the Digital Support team will get back to you.";
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--gp-green-forest) !important;
    display: block !important;
    visibility: visible !important;
    text-align: center;
    white-space: normal;
}

.footer-powered-by,
.powered-by-zoho,
div[class*="poweredby"],
div[class*="poweredBy"],
.Footer__container2 {
    display: none !important;
}

ul.zd_hc_header_tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid var(--gp-green-lime);
}

ul.zd_hc_header_tabs>li {
    display: inline-block;
    margin-right: 0.35em;
}

ul.zd_hc_header_tabs>li>a,
ul.zd_hc_header_tabs>li>.zd_hc_tab_title {
    color: var(--gp-white) !important;
    border-radius: 999px;
    padding: 0.45em 0.9em;
    display: inline-block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

ul.zd_hc_header_tabs>li>a:hover,
ul.zd_hc_header_tabs>li>.zd_hc_tab_title:hover,
ul.zd_hc_header_tabs>li>a:focus,
ul.zd_hc_header_tabs>li>.zd_hc_tab_title:focus {
    color: var(--gp-white) !important;
    background: transparent !important;
    text-decoration: underline;
}

ul.zd_hc_header_tabs>li.zd_hc_active>a,
ul.zd_hc_header_tabs>li.zd_hc_active>.zd_hc_tab_title {
    text-decoration: underline;
    border-bottom: 2px solid var(--gp-green-lime);
    color: var(--gp-white) !important;
}

.breadcrumb {
    background: var(--gp-grey-100);
    color: var(--gp-green-forest);
    padding: 0.5em 1em;
}

.breadcrumb a {
    color: var(--gp-green-forest);
}

.breadcrumb a:hover {
    color: var(--gp-green-fair);
    text-decoration: underline;
}

.kbLanding .Banner {
    background: var(--gp-green-tint);
    padding: 4rem 0;
}

.ArticleCard {
    border-top: 4px solid var(--gp-green-fair);
    box-shadow: none;
    border-radius: 4px;
    background: var(--gp-grey-100);
}

.ArticleListRightContainer__widgetSection {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ArticleListRightContainer__widgetSection .ArticleListRightContainer__fLeft {
    float: none !important;
    flex: 0 0 auto;
}

.ArticleListRightContainer__widgetSection [data-id="category_logo"] {
    width: 88px;
    height: 88px;
    border-radius: 10px;
}

.ArticleListRightContainer__widgetSection [data-id="category_logo"] img[data-id="category_logo_image"] {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    display: block;
}

.ArticleListRightContainer__widgetSection .ArticleListRightContainer__deskHeading {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 12px;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.2;
}

.ArticleListRightContainer__widgetSection .ArticleListRightContainer__categoryDescription,
.ArticleListRightContainer__widgetSection .ArticleListRightContainer__followOption,
.ArticleListRightContainer__widgetSection .ArticleListRightContainer__subscribeDescription,
.ArticleListRightContainer__widgetSection .ArticleListRightContainer__followerCount {
    flex: 0 0 100%;
    margin-left: 0 !important;
    padding-left: 12px;
    margin-top: 8px;
}

.AppContainer__backToTop,
[data-id="toparrow"],
.commonStyle__zt3BrandBg {
    background-color: var(--gp-orange) !important;
    color: var(--gp-white) !important;
}

.AppContainer__backToTop svg,
[data-id="toparrow"] svg,
.commonStyle__zt3BrandBg svg {
    fill: var(--gp-white) !important;
}

button svg,
.btn svg,
.Button svg,
.articleDetail h2:before,
a.button svg {
    fill: var(--gp-white) !important;
}

svg path,
svg circle,
svg rect {
    fill: inherit;
}

input[type="button"]:hover,
input[type="submit"]:hover,
button:hover,
.submit-ticket-button:hover,
[data-id="submit_ticket"]:hover {
    background-color: var(--gp-orange) !important;
    color: var(--gp-white) !important;
    border-color: var(--gp-orange) !important;
}

.pagination .active,
.pagination li.active a {
    background-color: var(--gp-green-fair) !important;
    border-color: var(--gp-green-fair) !important;
}


/* === 4. Article layout === */

@media (min-width: 1024px) {
    .articleDetail .Layout__twoColumn {
        max-width: 1600px !important;
        width: 100% !important;
        margin: 0 auto;
    }
}

.articleDetail .RightContainer {
    display: none;
}

.articleDetail h2:before {
    background: var(--gp-green-fair);
}

.KbDetailLtContainer__articleContent,
.KbDetailLtContainer__description,
.articleDetail .ArticleLayout__main {
    padding-left: 20px !important;
}

@media screen and (max-width: 768px) {

    .Header__navbar,
    #navBar {
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .Header__name {
        font-size: 0 !important;
    }

    .Header__name::before {
        content: "Digital Support";
        font-size: 20px;
        font-weight: 600;
        color: inherit;
        line-height: 1.2;
    }

    .KbDetailLtContainer__articleContent,
    .KbDetailLtContainer__description,
    .articleDetail .ArticleLayout__main {
        padding-left: 16px !important;
    }
}


/* === 5. Accessibility === */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* === 6. BOLD Digital Support widgets === */

/* 6a. Context bar - audience targeting + author info */

.bold-context-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    border: 1px solid var(--gp-grey-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
    background: var(--gp-grey-100);
}

.bold-context-bar__audience-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--gp-green-forest);
    margin-bottom: 8px;
}

.bold-context-bar__audience p {
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.bold-context-bar__audience p:last-child {
    margin-bottom: 0;
}

.bold-context-bar__audience a {
    color: var(--gp-green-fair);
}

.bold-context-bar__updated {
    color: var(--gp-grey-mid);
    margin-top: 12px;
}

.bold-context-bar__meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bold-context-bar__meta-text {
    text-align: right;
}

.bold-context-bar__meta-text strong {
    display: block;
}

.bold-context-bar__meta-text span {
    color: var(--gp-grey-mid);
}

.bold-context-bar__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .bold-context-bar {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bold-context-bar__meta {
        justify-content: flex-start;
    }

    .bold-context-bar__meta-text {
        text-align: left;
    }
}

/* 6b. Alternative guides nav - reusable icon grid for linking between parallel guides */

.bold-alt-nav__label {
    font-weight: 600;
    color: var(--gp-grey-dark);
    margin-bottom: 12px;
}

.bold-alt-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.bold-alt-nav__btn {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    border: 2px solid var(--gp-grey-border);
    background: var(--gp-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    transition: border-color 0.15s ease;
}

.bold-alt-nav__btn:hover {
    border-color: var(--gp-green-fair);
    text-decoration: none;
}

.bold-alt-nav__btn:focus-visible {
    outline: 2px solid var(--gp-green-highlight);
    outline-offset: 2px;
}

.bold-alt-nav__btn-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gp-grey-dark);
    margin-top: 4px;
    text-align: center;
    line-height: 1.2;
}

.bold-alt-nav__btn--current {
    border-color: var(--gp-green-fair);
    background: rgba(0, 168, 90, 0.04);
}

.bold-alt-nav__btn--current .bold-alt-nav__btn-label {
    color: var(--gp-green-fair);
    font-weight: 700;
}

.bold-alt-nav__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gp-green-forest);
    color: var(--gp-white);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Scoped SVG fill - prevents the global fill:inherit rule from blanking inline icons */
.bold-alt-nav__btn svg {
    fill: var(--gp-green-fair);
}

.bold-alt-nav__btn svg [fill="white"],
.bold-alt-nav__btn svg [fill="#ffffff"],
.bold-alt-nav__btn svg [fill="#fff"] {
    fill: var(--gp-white) !important;
}

@media screen and (max-width: 768px) {
    .bold-alt-nav__btn {
        width: 84px;
        height: 84px;
    }
}

/* 6c. Callouts */

.bold-callout {
    border-radius: 6px;
    padding: 16px 20px;
    margin: 16px 0;
    border-left: 4px solid;
}

.bold-callout__title {
    font-weight: 700;
    margin-bottom: 4px;
}

.bold-callout__text {
    margin: 0;
    line-height: 1.55;
}

.bold-callout--tip {
    border-left-color: var(--gp-green-fair);
    background: rgba(0, 168, 90, 0.06);
}

.bold-callout--important {
    border-left-color: var(--gp-orange);
    background: rgba(255, 91, 15, 0.06);
}

.bold-callout--warning {
    border-left-color: var(--gp-red);
    background: rgba(223, 19, 23, 0.06);
}

.bold-callout--success {
    border-left-color: var(--gp-green-fair);
    background: rgba(0, 168, 90, 0.06);
}

.bold-callout--reminder {
    border-left-color: var(--gp-blue-sky);
    background: rgba(65, 182, 230, 0.06);
}

.bold-callout--note {
    border-left-color: var(--gp-grey-mid);
    background: var(--gp-grey-100);
}

.bold-callout--gdpr {
    border-left-color: var(--gp-green-fair);
    background: rgba(0, 168, 90, 0.06);
}

/* 6d. Changelog badges */

.bold-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    vertical-align: middle;
}

.bold-badge--new {
    background: var(--gp-green-forest);
    color: var(--gp-white);
}

.bold-badge--updated {
    background: var(--gp-blue-sky);
    color: var(--gp-white);
}