@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");

:root {
    --gp-green: #00a85a;
    --gp-green-dark: #00643b;
    --gp-green-light: #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-dark);
    --gp-link-hover: var(--gp-green);
    --gp-text-color: #000000;
}

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-dark);
    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-dark);
    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);
    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-dark);
}

.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-dark);
    border: 1px solid var(--gp-green);
}

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

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

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

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

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

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

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

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

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

.articleDetail .RightContainer {
    display: none;
}

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

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-dark);
    padding: 0.5em 1em;
}

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

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

.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;
}

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

.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) !important;
    border-color: var(--gp-green) !important;
}

.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-dark) !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-dark) !important;
    display: block !important;
    visibility: visible !important;
    text-align: center;
    white-space: normal;
}

.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;
    }
}

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

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

/* Author Widget Styles */
.author-widget-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.author-widget-bg {
    position: relative;
    width: 100%;
    padding-bottom: 23.53%;
    overflow: hidden;
    background-image: url(https://support.greenparty.org.uk/galleryDocuments/edbsnd474a00ed2fecccc85e366a1eea58f06075d7215f3696c100705d837a9c68173a97c12573c2c0613c3843080ca1000999c71ec391d56f73aa9f08dc4974734d9?inline=true);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M 0.05,0.3 Q 0,0.15 0.08,0.05 Q 0.15,0 0.3,0 Q 0.5,0 0.7,0 Q 0.88,0 0.95,0.08 Q 1,0.15 1,0.35 Q 1,0.5 1,0.65 Q 1,0.82 0.92,0.9 Q 0.82,0.98 0.65,0.98 Q 0.45,0.98 0.28,0.95 Q 0.15,0.9 0.08,0.8 T 0.02,0.5 Q 0.02,0.4 0.05,0.3 Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M 0.05,0.3 Q 0,0.15 0.08,0.05 Q 0.15,0 0.3,0 Q 0.5,0 0.7,0 Q 0.88,0 0.95,0.08 Q 1,0.15 1,0.35 Q 1,0.5 1,0.65 Q 1,0.82 0.92,0.9 Q 0.82,0.98 0.65,0.98 Q 0.45,0.98 0.28,0.95 Q 0.15,0.9 0.08,0.8 T 0.02,0.5 Q 0.02,0.4 0.05,0.3 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.author-widget-text {
    position: absolute;
    left: 9.76%;
    top: 8%;
    width: 52.24%;
    height: 62%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.18%;
    box-sizing: border-box;
}

.author-widget-text p {
    margin: 0;
    color: white;
    font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.4;
    font-size: clamp(12px, 1.88vw, 16px);
    text-align: center;
}

.author-widget-text p span,
.author-widget-text p span.size,
.author-widget-text p span.font,
.author-widget-text p span.colour {
    font-size: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* Remove indent on article pages for widget */
.articleDetail .author-widget-container,
.KbDetailLtContainer .author-widget-container {
    margin-left: -20px;
}

/* Responsive font scaling with more breakpoints */
@media (max-width: 1200px) {
    .author-widget-text p,
    .author-widget-text p span,
    .author-widget-text p span.size,
    .author-widget-text p span.font,
    .author-widget-text p span.colour {
        font-size: 15px !important;
    }
}

@media (max-width: 1000px) {
    .author-widget-text p,
    .author-widget-text p span,
    .author-widget-text p span.size,
    .author-widget-text p span.font,
    .author-widget-text p span.colour {
        font-size: 14px !important;
    }
}

@media (max-width: 900px) {
    .author-widget-text p,
    .author-widget-text p span,
    .author-widget-text p span.size,
    .author-widget-text p span.font,
    .author-widget-text p span.colour {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}

/* Mobile: solid background with expanded safe zone */
@media (max-width: 768px) {
    .author-widget-bg {
        background-image: none;
        background-color: var(--gp-green-dark);
    }
    
    .author-widget-text {
        left: 5%;
        right: 8%;
        top: 2%;
        left: 8%;
        width: 90%;
        height: 90%;
        padding: 2%;
        justify-content: center;
    }
    
    .author-widget-text p {
        font-size: 13px;
        line-height: 1.2;
        text-align: center;
    }
    
    .author-widget-text p span,
    .author-widget-text p span.size,
    .author-widget-text p span.font,
    .author-widget-text p span.colour {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
    
    /* Remove indent on mobile for article pages */
    .articleDetail .author-widget-container,
    .KbDetailLtContainer .author-widget-container {
        margin-left: -16px;
    }
}