/* Custom Help Scout StyleSheet - Aligned with UPowr Design System */
/* Design tokens from: packages/components/src/themes/light.ts */

@import url('https://fonts.googleapis.com/css?family=Inter:100,200,300,400,400i,500,700');

:root {
    /* Design System Colors */
    --u-primary-color: #1a79ff;
    --u-hero-primary-color: #0068FF;
    --u-hero-primary-dark-color: #003AA5;
    --u-text-color: #323130;
    --u-text-color-secondary: #82828C;
    --u-text-color-muted: #a19f9d;
    --u-text-color-inverse: #ffffff;
    --u-background-color: #ffffff;
    --u-background-color-secondary: #F9F9F9;
    --u-background-color-tertiary: #E3E3E3;
    --u-border-color: #DCDCDC;
    --u-border-color-muted: #EDEBE9;
    --u-border-color-secondary: #c8c6c4;

    /* Typography */
    --u-font-size-xs: 0.75rem; /* 12px */
    --u-font-size-sm: 0.875rem; /* 14px */
    --u-font-size-md: 1rem; /* 16px */
    --u-font-size-lg: 1.125rem; /* 18px */
    --u-font-size-xl: 1.25rem; /* 20px */
    --u-font-size-2xl: 1.375rem; /* 22px */
    --u-font-size-3xl: 2rem; /* 32px */
    --u-font-size-heading-2: 1.5rem; /* 24px */

    /* Font Weights */
    --u-font-weight-regular: 400;
    --u-font-weight-medium: 500;
    --u-font-weight-semi-bold: 600;
    --u-font-weight-bold: 700;

    /* Spacing */
    --u-spacing-small: 4px;
    --u-spacing-medium: 8px;
    --u-spacing-large: 16px;
    --u-spacing-xlarge: 32px;

    /* Border Radius */
    --u-border-radius-tiny: 3px;
    --u-border-radius-small: 6px;
    --u-border-radius-medium: 8px;
    --u-border-radius-large: 10px;
    --u-border-radius-pill: 999px;

    /* Shadows */
    --u-box-shadow-small: 0px 2px 4px -2px rgba(0, 0, 0, 0.18);
    --u-box-shadow-large: 0px 4px 6px -2px rgba(0, 0, 0, 0.10);

    /* Button Design Tokens - Primary Button */
    --u-button-primary-color: #ffffff;
    --u-button-primary-bg-color: var(--u-hero-primary-color);
    --u-button-primary-border-color: var(--u-hero-primary-color);
    --u-button-primary-hover-bg-color: var(--u-hero-primary-dark-color);
    --u-button-primary-hover-color: #ffffff;
    --u-button-primary-hover-border-color: var(--u-hero-primary-dark-color);
    --u-button-primary-active-bg-color: var(--u-hero-primary-dark-color);
    --u-button-primary-active-border-color: var(--u-hero-primary-dark-color);
    --u-button-primary-active-color: #ffffff;
    --u-button-primary-disabled-bg-color: #E3E3E3;
    --u-button-primary-disabled-border-color: transparent;
    --u-button-primary-disabled-color: #82828C;
    --u-button-primary-box-shadow: 0px 0.5px 1px 0px #00000040, 0px -8px 10px -4px #00000017 inset;
    --u-button-primary-focus-ring-color: var(--u-hero-primary-color);
    --u-button-primary-focus-bg-color: var(--u-hero-primary-dark-color);
    --u-button-primary-focus-color: #ffffff;

    /* Input Field Tokens */
    --u-input-border-radius: var(--u-border-radius-small);
    --u-input-border-color: var(--u-border-color);
    --u-input-bg-color: var(--u-background-color);
    --u-input-color: var(--u-text-color);
    --u-input-focus-border-color: var(--u-primary-color);
}

body {
    background: var(--u-background-color-secondary);
    font-family: 'Inter', sans-serif !important;
}

/* Home Page Title */
#docsSearch h1 {
    font-size: var(--u-font-size-3xl);
    font-weight: var(--u-font-weight-regular);
    text-align: center;
    margin-top: .4em;
    font-family: "Inter", sans-serif;
    color: var(--u-text-color);
    padding: var(--u-spacing-medium);
}

.navbar .nav li {
    display: inline-block;
    float: none;
    font-family: "Inter", sans-serif;
    font-size: var(--u-font-size-xs);
    letter-spacing: .1em;
}

.navbar .nav li a, .navbar .icon-private-w {
    font-size: var(--u-font-size-sm);
    font-weight: var(--u-font-weight-regular);
}

/* Header Size */
a.brand > img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    height: 60px;
    margin-left: 15px;
    width: auto;
}

.navbar .navbar-inner {
    height: 60px;
}

.navbar .navbar-inner .container-fluid {
    padding: 0;
    height: 60px;
}

.navbar .brand {
    float: left;
    display: block;
    padding: 0px;
    margin-left: -20px;
    font-size: var(--u-font-size-xl);
    font-weight: var(--u-font-weight-regular);
    color: var(--u-text-color-muted);
}

/* Home Page Search Bar Background */
#docsSearch {
    background: var(--u-background-color);
    border-top: 1px solid var(--u-border-color);
    margin-bottom: 3em;
    padding: 1.5em 0;
}

/* Search Input Box */
input.search-query {
    padding-right: 14px;
    padding-right: 4px \9;
    padding-left: 14px;
    padding-left: 4px \9;
    margin-bottom: 0;
    border-radius: var(--u-border-radius-pill);
    border: 1px solid var(--u-input-border-color);
    background: var(--u-input-bg-color);
    color: var(--u-input-color);
    font-family: "Inter", sans-serif;
    font-size: var(--u-font-size-md);
    font-weight: var(--u-font-weight-regular);
    letter-spacing: 1px;
    transition: border-color 0.2s ease-in-out;
}

input.search-query:focus {
    outline: none;
    border-color: var(--u-input-focus-border-color);
}

/* Home Page Category Title */
.category-list h3 {
    /* color: var(--u-hero-primary-color); */
    font-size: var(--u-font-size-xl);
    font-weight: var(--u-font-weight-regular);
    line-height: 1.3em;
    font-family: "Inter", sans-serif;
}

/* Category Styles */
.category-list .category p {
    color: var(--u-text-color-secondary);
    font-family: "Inter", sans-serif;
    font-weight: var(--u-font-weight-regular);
    font-size: var(--u-font-size-sm);
    letter-spacing: 0.25px;
}

.category-list .category {
    background-color: var(--u-background-color);
    background-position: top 24px center !important;
    background-repeat: no-repeat !important;
    background-size: auto 40px !important;
    box-shadow: var(--u-box-shadow-small);
    box-sizing: border-box;
    border-radius: var(--u-border-radius-medium);
    min-height: 183px;
    padding: 72px 20px 8px;
    position: relative;
    width: 31.5%;
    transition: all 0.2s;
}

.category-list .category:hover {
    text-decoration: none;
    background-color: var(--u-background-color-secondary);
}

.collection-category h2 {
    font-weight: var(--u-font-weight-medium);
    margin: 0 0 var(--u-spacing-large);
    text-align: center;
    padding-left: 0%;
    font-family: "Inter", sans-serif;
    color: var(--u-text-color-secondary);
    font-size: var(--u-font-size-2xl);
    letter-spacing: 1px;
}

.collection-category h2 a {
    color: var(--u-primary-color);
}

.collection-category .category-list {
    margin: 0 0 4em;
    text-align: center;
}

/* Home Page Link Style */
#serp-dd .result a,
#serp-dd .result>li.active,
#full-Article strong a,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a span,
.category-list .category .article-count,
.contentWrapper a {
    font-weight: var(--u-font-weight-medium);
    letter-spacing: .25px;
    color: var(--u-primary-color);
    margin-top: var(--u-spacing-large);
    text-transform: capitalize;
    text-decoration: none;
    font-family: "Inter", sans-serif;
}

#serp-dd .result a:hover,
#serp-dd .result>li.active,
#full-Article strong a:hover,
.collection a:hover,
.contentWrapper a:hover,
.most-pop-articles .popArticles a:hover,
.most-pop-articles .popArticles a:hover span,
.category-list .category:hover .article-count {
    color: var(--u-hero-primary-dark-color);
    text-decoration: underline;
}

/* Home Page Search Button */
#searchBar button {
    color: var(--u-button-primary-color);
    text-shadow: none;
    background: var(--u-button-primary-bg-color);
    border-radius: 0 var(--u-border-radius-small) var(--u-border-radius-small) 0;
    border: 1px solid var(--u-button-primary-border-color);
    box-shadow: var(--u-button-primary-box-shadow);
    font-size: var(--u-font-size-lg);
    padding: 0 1.5em;
    height: 50px;
    position: absolute;
    transition: all 0.2s ease-in-out;
}

#searchBar button:hover {
    color: var(--u-button-primary-hover-color);
    background: var(--u-button-primary-hover-bg-color);
    border: 1px solid var(--u-button-primary-hover-border-color);
    text-shadow: none;
}

#searchBar button:focus {
    color: var(--u-button-primary-focus-color);
    background: var(--u-button-primary-focus-bg-color);
    outline: 1px solid var(--u-button-primary-focus-ring-color);
    outline-offset: 1px;
}

#searchBar button:active {
    color: var(--u-button-primary-active-color);
    background: var(--u-button-primary-active-bg-color);
    border: 1px solid var(--u-button-primary-active-border-color);
}

#searchBar button:disabled,
#searchBar button[disabled] {
    color: var(--u-button-primary-disabled-color);
    background: var(--u-button-primary-disabled-bg-color);
    border: 1px solid var(--u-button-primary-disabled-border-color);
    cursor: not-allowed;
    opacity: 1;
}

input, button, select, textarea {
    font-family: "Inter", sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Category Images */
/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.

  Example:

  #category-123 {
    background-image: url(https://storage.myhostingprovider.com/public/images/123-getting-started.png);
  }

  #category-456 {
    background-image: url(https://storage.myhostingprovider.com/public/images/456-setup-users.png);
  }
*/

#category-4 {
    background-image: url(https://public.upowr.energy/brand/2025/icons/getting-started.svg);
}

#category-18 {
    background-image: url(https://public.upowr.energy/brand/2025/icons/sales-projects.svg);
}


#category-19 {
    background-image: url(https://public.upowr.energy/brand/2025/icons/service-projects.svg);
}


#category-76 {
    background-image: url(https://public.upowr.energy/brand/2025/icons/console.svg);
}

#category-25 {
    background-image: url(https://public.upowr.energy/brand/2025/icons/installer-app.svg);
}

#category-9 {
    background-image: url(https://public.upowr.energy/brand/2025/icons/integrations.svg);
}

/* Side Bar Styles */
#sidebar .nav-list a {
    display: inline-block;
    color: var(--u-text-color);
    font-size: var(--u-font-size-sm);
    padding: var(--u-spacing-small) var(--u-spacing-large) var(--u-spacing-small) 0;
    line-height: 1.4;
    margin-left: 0;
    font-family: "Inter", sans-serif;
    font-weight: var(--u-font-weight-regular);
}

#sidebar .nav-list .active a,
#sidebar .nav-list .active a:hover,
#sidebar .nav-list .active a:focus {
    font-weight: var(--u-font-weight-bold);
    color: var(--u-text-color);
    background: 0 0;
    text-shadow: none;
}

#sidebar h3 {
    text-transform: uppercase;
    font-size: var(--u-font-size-md);
    color: var(--u-text-color-secondary);
    font-weight: var(--u-font-weight-regular);
    margin-bottom: var(--u-spacing-small);
    font-family: "Inter", sans-serif;
    letter-spacing: 2px;
}

#sidebar form button {
    box-shadow: none;
}

/* Article Styles */

/*
#main-content {
    background: none;
    float: right;
    margin-bottom: 2em;
    padding: var(--u-spacing-xlarge) 0 0 28px;
}

#fullArticle img {
    display: block;
    margin: 1em 0 2em;
    padding: var(--u-spacing-small);
    border-radius: var(--u-border-radius-small);
    box-sizing: border-box;
}

#fullArticle .title, .contentWrapper h1 {
    margin: 0 30px .5em 0;
    font-family: "Inter", sans-serif;
    color: var(--u-hero-primary-color);
    font-weight: 700;
}

#fullArticle .printArticle {
    position: absolute;
    right: 46px;
    top: 40px;
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    color: var(--u-text-color-secondary);
    font-family: "Inter", sans-serif;
    font-size: var(--u-font-size-sm);
    font-weight: var(--u-font-weight-regular);
    letter-spacing: .01em;
}

#categoryHead .sort select {
    width: 150px;
    height: 24px;
    margin: 0;
    line-height: 24px;
    font-size: var(--u-font-size-xs);
    color: var(--u-text-color-secondary);
    font-family: "Inter", sans-serif;
    font-weight: var(--u-font-weight-regular);
} */

/* Style this one if you want bolded article text to have a different color */
/* #fullArticle strong {
    color: var(--u-text-color);
}

#fullArticle h2 {
    font-size: var(--u-font-size-heading-2);
    font-family: "Inter", sans-serif;
    font-weight: var(--u-font-weight-regular);
    color: var(--u-hero-primary-color);
}

#fullArticle h3 {
    font-size: var(--u-font-size-xl);
    font-family: "Inter", sans-serif;
    font-weight: var(--u-font-weight-bold);
    color: var(--u-hero-primary-color);
}

#fullArticle h4 {
    font-size: var(--u-font-size-md);
    font-family: "Inter", sans-serif;
    font-weight: var(--u-font-weight-regular);
    color: var(--u-text-color-secondary);
    font-style: italic;
}

.contentWrapper p {
    margin-top: -4px;
    word-wrap: break-word;
    font-family: "Inter", sans-serif;
    color: var(--u-text-color-secondary);
    font-weight: var(--u-font-weight-regular);
    font-size: var(--u-font-size-md);
    letter-spacing: .01em;
} */

/* Article Footers */
/* .articleFoot p, .articleFoot time {
    color: var(--u-text-color-secondary);
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-weight: var(--u-font-weight-regular);
    font-style: italic;
} */

/* Page Footers */
footer p a {
    color: var(--u-text-color-secondary);
    font-family: "Inter", sans-serif;
    font-weight: var(--u-font-weight-regular);
}

/* Contact Modal */
/* #contactModal h2, .abuse h2 {
    background: var(--u-background-color);
    margin: 0;
    padding: var(--u-spacing-medium) 0 var(--u-spacing-medium) var(--u-spacing-large);
    font-size: var(--u-font-size-2xl);
    border-bottom: 1px solid var(--u-border-color);
    border-top-left-radius: var(--u-border-radius-small);
    border-top-right-radius: var(--u-border-radius-small);
    font-family: "Inter", sans-serif;
    color: var(--u-primary-color);
    font-weight: var(--u-font-weight-regular);
}

#contactModal .control-label {
    width: 110px;
    font-family: "Inter", sans-serif;
    font-size: var(--u-font-size-sm);
    font-weight: var(--u-font-weight-regular);
    color: var(--u-text-color-secondary);
}

.btn {
    color: var(--u-button-primary-color);
    text-shadow: none;
    background: var(--u-button-primary-bg-color);
    border-radius: var(--u-border-radius-small);
    border: 1px solid var(--u-button-primary-border-color);
    box-shadow: var(--u-button-primary-box-shadow);
    font-size: var(--u-font-size-sm);
    padding: .5em;
    transition: all 0.2s ease-in-out;
}

.btn:hover {
    color: var(--u-button-primary-hover-color);
    background: var(--u-button-primary-hover-bg-color);
    border: 1px solid var(--u-button-primary-hover-border-color);
    text-shadow: none;
}

.btn:focus {
    color: var(--u-button-primary-focus-color);
    background: var(--u-button-primary-focus-bg-color);
    border: 1px solid var(--u-button-primary-hover-border-color);
    outline: 1px solid var(--u-button-primary-focus-ring-color);
    outline-offset: 1px;
    text-shadow: none;
}

.btn:active,
.btn.active {
    color: var(--u-button-primary-active-color);
    background: var(--u-button-primary-active-bg-color);
    border: 1px solid var(--u-button-primary-active-border-color);
    text-shadow: none;
}

.btn.disabled,
.btn[disabled] {
    color: var(--u-button-primary-disabled-color);
    background: var(--u-button-primary-disabled-bg-color);
    border: 1px solid var(--u-button-primary-disabled-border-color);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
    text-shadow: none;
}

#search-query .btn:hover {
    color: var(--u-button-primary-hover-color);
    background: var(--u-button-primary-hover-bg-color);
    border-radius: var(--u-border-radius-small);
    border: 1px solid var(--u-button-primary-hover-border-color);
    font-size: var(--u-font-size-lg);
    padding: 0 1.5em;
    height: 50px;
    text-shadow: none;
}

.category-list {
    text-align: center;
} */

/* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */
@media screen and (max-width: 1105px) {
    section.category-list .category {
        width: 48.2%;
    }
}

@media screen and (max-width: 760px) {
    section.category-list .category {
        box-sizing: border-box;
        margin: 0 0 var(--u-spacing-large);
        background-position: top 24px center !important;
        padding: 72px var(--u-spacing-large) 8px;
        width: 100%;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .navbar .btn-navbar {
        margin-top: 16px;
        right: -10px;
    }
    .related {
        padding: 30px 25px 25px;
    }
    .related ul {
        margin-left: 0;
    }
    .related h3 {
        padding-left: 0;
    }
    .related ul>li a {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    #searchBar button {
        color: transparent;
        text-shadow: 0;
        background: transparent;
        border-radius: 0 5px 5px 0;
        border: 0;
        font-size: 18px;
        padding: 0 1.5em;
        height: 50px;
        position: absolute;
    }
    #searchBar button .icon-search {
        display: block;
        text-shadow: none;
        margin-top: 15px;
    }
    #searchBar button:hover .icon-search:hover {
        display: block;
        text-shadow: none;
        margin-top: 15px;
        background-color: transparent;
    }
}

@media (max-width: 480px) {
    #fullArticle .title, .contentWrapper h1 {
        font-size: var(--u-font-size-heading-2);
    }
    #fullArticle h2 {
        font-size: var(--u-font-size-xl);
    }
}

/* Collection Titles  */
.collection-category h2 a {
    color: var(--u-text-color);
}

.collection-category h2 {
    font-weight: var(--u-font-weight-regular);
    margin: 0 0 var(--u-spacing-large);
    padding-left: .65%;
    font-family: "Inter", sans-serif;
    text-align: center;
}