/**
 * Knowledge base stylesheets are not part of the packaged build, instead they
 * are referenced directly by Helpscout
 *
 * icon assets are stored in the lighter-landing-photos AWS bucket and accessed via cloudfront
 * https://s3.console.aws.amazon.com/s3/buckets/lighter-landing-photos/knowledgebase/?region=us-east-1
 * http://d343jh43gp38r6.cloudfront.net/knowledgebase/
 *
 * References:
 * https://docs.helpscout.com/article/92-stylesheet-dropbox -> how to reference a custom stylesheet from Helpscout
 * https://docs.helpscout.com/article/562-branding-examples
 */

body {
    font-family: 'Montserrat', sans-serif;
}

.navbar .nav a {
    font-size: 14px;
}

.navbar .nav li a, 
.navbar .nav li a:hover, 
.navbar .icon-private-w, 
.navbar .icon-private-w:hover {
    color: #9c9c9c;
}

.navbar .nav .active a,
.navbar .nav .active a:hover {
    font-size: 14px;
    color: black;
}

.navbar .nav .active .caret {
    right: 25%;
    border-bottom: 15px solid #fdd96a;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

#docsSearch {
    background-color: #fdd96a;
    padding-top: 3em;
}

#docsSearch h1 {
    width: 620px;
    margin: auto;
    text-align: left;
    font-weight: bold;
}

@media (max-width: 768px) {
    #docsSearch h1 {
        width: 90%;
    }
}

#docsSearch button {
    padding: 0 3.5em;
    background-color: black;
}

@media (max-width: 480px) and (max-width: 768px) {
    #docsSearch button {
        width: 80px;
        padding: 0;
    }

    #searchBar button .icon-search {
        position: absolute;
        left: 33%;
        font-size: 24px;
    }
}

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

.category-list .category,
.category-list .category:hover {
    position: relative;
    height: 140px;
    width: 250px;
    margin: 15px 25px;
    border: 0;
    padding: 0;
    background-position: top 5px center;
    background-repeat: no-repeat;
    background-size: 125px;
}

.category-list h3 {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.category-list .article-count {
    display: none;
}

/* Beginner Guide */
#category-303 {
    background-color: #fdd96a;
    background-image: url(https://d343jh43gp38r6.cloudfront.net/knowledgebase/helpscout_beginnersguide.png);
}

/* FAQ */
#category-160 {
    background-color: #6bc3ea;
    background-image: url(https://d343jh43gp38r6.cloudfront.net/knowledgebase/helpscout_FAQ.png);
}

/* From Marco */
#category-60 {
    background-color: #fcebd8;
    background-image: url(https://d343jh43gp38r6.cloudfront.net/knowledgebase/helpscout_marco.png);
}

/* Nutrition and Health */
#category-35 {
    background-color: #f473b4;
    background-image: url(https://d343jh43gp38r6.cloudfront.net/knowledgebase/helpscout_nutrition.png);
}

/* Recipes */
#category-13 {
    background-color: #6cbc4d;
    background-image: url(https://d343jh43gp38r6.cloudfront.net/knowledgebase/helpscout_recipes.png);
}

/* Tech Support */
#category-14 {
    background-color: #fdd96a;
    background-image: url(http://d343jh43gp38r6.cloudfront.net/knowledgebase/helpscout_tech+support.png);
}

/* Tips and Tricks */
#category-28 {
    background-color: #6bc3ea;
    background-image: url(http://d343jh43gp38r6.cloudfront.net/knowledgebase/helpscout_tips.png);
}

/* Using the Meal Planner */
#category-15 {
    background-color: #fcebd8;
    background-image: url(http://d343jh43gp38r6.cloudfront.net/knowledgebase/helpscout_planner.png);
}

/* Deals */
#category-1368 {
	background-color: #fcebd8;
    background-image: url(https://d343jh43gp38r6.cloudfront.net/knowledgebase/helpscout_deals.png);
}