/* ============================================
   CUSTOM HELP SCOUT DOCS CSS
   
   Template CSS for TRMS Help Center
   ============================================ */

/* ============================================
   CSS VARIABLES - Design Tokens
   ============================================ */
:root {
    /* Base palette tokens (from Mode 1.tokens.json) */
    /* berry */
    --berry-100: #FCE0DE;
    --berry-200: #FACECC;
    --berry-300: #F69D98;
    --berry-400: #F1706A;
    --berry-50: #F7EEED;
    --berry-500: #ED453C;
    --berry-600: #E01F15;
    --berry-700: #B11910;
    --berry-800: #83120C;
    --berry-900: #540C08;
    
    /* flamingo */
    --flamingo-100: #FDEDF3;
    --flamingo-200: #F7BFD6;
    --flamingo-300: #F292B8;
    --flamingo-400: #ED649B;
    --flamingo-500: #E7367D;
    --flamingo-600: #D21963;
    --flamingo-700: #A4144E;
    --flamingo-800: #760E38;
    --flamingo-900: #490923;
    
    /* lilac */
    --lilac-100: #EEE0FF;
    --lilac-200: #DFC7FF;
    --lilac-300: #C294FF;
    --lilac-400: #A561FF;
    --lilac-500: #892EFF;
    --lilac-600: #6C00FA;
    --lilac-700: #5800C7;
    --lilac-800: #400094;
    --lilac-900: #2A0061;
    
    /* lime */
    --lime-100: #F8FCF2;
    --lime-200: #E2F3C8;
    --lime-300: #CCEA9E;
    --lime-400: #B6E174;
    --lime-50: #FBFEF8;
    --lime-500: #9ED84A;
    --lime-600: #7AB22F;
    --lime-700: #5C8623;
    --lime-800: #3E5A17;
    --lime-900: #27380E;
    
    /* mint */
    --mint-100: #E6F9F7;
    --mint-200: #C3F0EA;
    --mint-300: #8DE0D6;
    --mint-400: #57D0C2;
    --mint-50: #F1FCFB;
    --mint-500: #38D6C9;
    --mint-600: #1FB1A6;
    --mint-700: #17857D;
    --mint-800: #0F5B55;
    --mint-900: #083632;
    
    /* noir */
    --noir: #000000;
    
    /* november */
    --november-100: #D0D3D5;
    --november-200: #B1B6BB;
    --november-25: #F3F4F5;
    --november-300: #A1A7AB;
    --november-400: #8F969B;
    --november-50: #E8E9EA;
    --november-500: #737A82;
    --november-600: #5B646D;
    --november-700: #444E58;
    --november-800: #2C3843;
    --november-900: #15222E;
    
    /* rainforest */
    --rainforest-100: #BEF4CD;
    --rainforest-200: #91EBA8;
    --rainforest-300: #65E284;
    --rainforest-400: #38D960;
    --rainforest-50: #E9FBED;
    --rainforest-500: #22C550;
    --rainforest-600: #1A983E;
    --rainforest-700: #136C2C;
    --rainforest-800: #0B411A;
    --rainforest-900: #06210D;
    
    /* signatur */
    --signatur-100: #C5E9F8;
    --signatur-200: #89D2EF;
    --signatur-300: #58C0E7;
    --signatur-400: #3CB3E0;
    --signatur-50: #ECF7FD;
    --signatur-500: #3CB3E0;
    --signatur-600: #1A9ED5;
    --signatur-700: #1780AF;
    --signatur-800: #0F5B7B;
    --signatur-900: #083C52;
    
    /* topgolf */
    --topgolf-100: #D0E6FB;
    --topgolf-200: #A0CDF7;
    --topgolf-300: #71B4F3;
    --topgolf-400: #419BEF;
    --topgolf-50: #E8F3FE;
    --topgolf-500: #137FEC;
    --topgolf-600: #0F65BC;
    --topgolf-700: #0B4C8C;
    --topgolf-800: #07325D;
    --topgolf-900: #04192D;
    
    /* traffic */
    --traffic-100: #FCF0CF;
    --traffic-200: #F9E1A0;
    --traffic-300: #F5CB58;
    --traffic-400: #F5B657;
    --traffic-50: #FEF8EB;
    --traffic-500: #F4B93B;
    --traffic-600: #C1630B;
    --traffic-700: #904A08;
    --traffic-800: #603105;
    --traffic-900: #301803;
    
    /* white */
    --white: #FFFFFF;
    
    /* Semantic tokens (from Colors.json) */
    /* General */
    --general-brand-darker: var(--signatur-800);
    --general-brand-primary: var(--signatur-600);
    --general-brand-secondary: var(--signatur-50);
    --general-info: var(--topgolf-700);
    --general-info-darker: var(--topgolf-800);
    --general-negative: var(--berry-600);
    --general-negative-darker: var(--berry-700);
    --general-positive: var(--rainforest-600);
    --general-positive-darker: var(--rainforest-800);
    --general-warning: var(--traffic-500);
    --general-warning-darker: var(--traffic-600);
    
    /* Text */
    --text-text-action: var(--signatur-600);
    --text-text-info: var(--topgolf-700);
    --text-text-inactive: var(--november-300);
    --text-text-mint: var(--mint-800);
    --text-text-negative: var(--berry-700);
    --text-text-positive: var(--rainforest-700);
    --text-text-primary: var(--november-900);
    --text-text-primary-reversed: var(--white);
    --text-text-secondary: var(--november-600);
    --text-text-secondary-reversed: var(--november-100);
    --text-text-tertiary: var(--november-500);
    --text-text-warning: var(--traffic-600);
    
    /* Background */
    --background-bg-accent: var(--november-100);
    --background-bg-primary: var(--white);
    --background-bg-primary-reversed: var(--november-900);
    --background-bg-secondary: var(--november-25);
    --background-bg-secondary-reversed: var(--november-800);
    --background-bg-surface: #F9FDFF;
    --background-bg-tertiary: var(--november-50);
    --background-bg-tertiary-reversed: var(--november-700);
    
    /* Decorative */
    --decorative-deco-brand: var(--signatur-100);
    --decorative-deco-flamingo: var(--flamingo-100);
    --decorative-deco-info: var(--topgolf-100);
    --decorative-deco-lilac: var(--lilac-100);
    --decorative-deco-lime: var(--lime-100);
    --decorative-deco-mint: var(--mint-100);
    --decorative-deco-negative: var(--berry-100);
    --decorative-deco-neutral: var(--november-100);
    --decorative-deco-positive: var(--rainforest-100);
    --decorative-deco-warning: var(--traffic-100);
    
    /* Accent */
    --accent-accent-brand: var(--signatur-500);
    --accent-accent-flamingo: var(--flamingo-500);
    --accent-accent-info: var(--topgolf-500);
    --accent-accent-lilac: var(--lilac-500);
    --accent-accent-lime: var(--lime-500);
    --accent-accent-mint: var(--mint-500);
    --accent-accent-negative: var(--berry-500);
    --accent-accent-positive: var(--rainforest-500);
    --accent-accent-warning: var(--traffic-400);
    --accent-accent-warning-darker: var(--traffic-600);
    
    /* Border */
    --border-border-active: var(--signatur-500);
    --border-border-highlight: var(--november-900);
    --border-border-info: var(--topgolf-700);
    --border-border-inactive: var(--november-300);
    --border-border-negative: var(--berry-500);
    --border-border-positive: var(--rainforest-500);
    --border-border-primary: var(--november-50);
    --border-border-primary-reversed: var(--november-600);
    --border-border-secondary: var(--november-25);
    --border-border-tertiary: var(--white);
    --border-border-transparent: rgba(115, 122, 130, 0.5);
    --border-border-warning: var(--traffic-500);
    
    /* Hover */
    --hover-hover-action: rgba(60, 179, 224, 0.1);
    --hover-hover-info: rgba(11, 76, 140, 0.1);
    --hover-hover-negative: rgba(224, 31, 21, 0.1);
    --hover-hover-positive: rgba(34, 197, 80, 0.1);
    --hover-hover-primary: rgba(21, 34, 46, 0.1);
    --hover-hover-warning: rgba(244, 185, 59, 0.1);
    
    /* Misc */
    --overlay: rgba(0, 0, 0, 0.25);
    --shadow: rgba(21, 34, 46, 0.1);
}

/* ============================================
   FONT FACE
   ============================================ */
@font-face {
    font-family: ShieldSans Regular;
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(https://s3.topgolf.com/fonts/brand/shieldsans-regular.eot);
    src: url(https://s3.topgolf.com/fonts/brand/shieldsans-regular.eot) format("embedded-opentype"), 
         url(https://s3.topgolf.com/fonts/brand/shieldsans-regular.woff2) format("woff2"), 
         url(https://s3.topgolf.com/fonts/brand/shieldsans-regular.woff) format("woff");
}

@font-face {
    font-family: ShieldSans Bold;
    font-stretch: normal;
    font-style: normal;
    font-weight: 700;
    src: url(https://s3.topgolf.com/fonts/brand/shieldsans-bold.eot);
    src: url(https://s3.topgolf.com/fonts/brand/shieldsans-bold.eot) format("embedded-opentype"), 
         url(https://s3.topgolf.com/fonts/brand/shieldsans-bold.woff2) format("woff2"), 
         url(https://s3.topgolf.com/fonts/brand/shieldsans-bold.woff) format("woff");
}

@font-face {
    font-family: Topgolf Condensed;
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url(https://s3.topgolf.com/fonts/brand/TopgolfCondensed-700.woff2) format("woff2"), url(https://s3.topgolf.com/fonts/brand/TopgolfCondensed-700.woff) format("woff");
}

/* ============================================
   CUSTOM STYLES
   ============================================ */

body {
    background-color: var(--background-bg-surface);
    font-family: "ShieldSans Regular", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: var(--text-text-primary)
}

/* ============================================
   HOME PAGE
   ============================================ */

/* Home Page Title */
#docsSearch h1 {
    font-size: 40px;
    font-family: "Topgolf Condensed";
    font-weight: 300;
    text-align: center;
    margin-top: .4em;
    color: var(--text-text-primary-reversed);
    padding: 10px;
}

/* Home Page Search Bar Background */
#docsSearch {
    background-color: var(--background-bg-primary-reversed);
    margin-bottom: 3em;
    padding: 5em 0;
}

/* Home Page Search Button */
#searchBar button {
    color: #fff;
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
    background: var(--general-brand-primary);
    border-radius: 0 8px 8px 0;
    font-size: 18px;
    font-family: "ShieldSans Bold";
    font-weight: 700;
    padding: 0 1em;
    height: 50px;
    position: absolute;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#searchBar button:hover {
    background: var(--general-brand-darker);
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
}

/* Hide the text span, show only icon */
#searchBar button span {
    display: none;
}

/* Show and style the search icon */
#searchBar button .icon-search {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--text-text-primary-reversed);
    font-size: 18px;
}

#searchBar .search-query {
    border-radius: 8px;
    font-size: 18px;
    font-family: inherit;
    line-height: 22px;
    width: 100%;
    height: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 60px;
    padding-left: 14px;
    margin-bottom: 0;
    font-weight: 100;
    letter-spacing: 0px;
    display: inline-block;
    color: var(--text-text-secondary);
    background-color: #fff;
    border: 1px solid var(--border-border-primary);
    vertical-align: middle;
}

#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, .category-list .category .article-count, .contentWrapper a {
	font-weight: 500;
	letter-spacing: .25px;
	color: var(--text-text-action);
	margin-top: 15px;
	text-decoration: none;
}
#serp-dd .result a:hover, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count, .contentWrapper a {
	font-weight: 500;
	letter-spacing: .25px;
	color: var(--text-text-action);
	margin-top: 8px;
}

strong, b {
    font-family: "ShieldSans Bold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Collections */

.icon-article-doc {
    display: none;
}

.most-pop-articles .popArticles a,
.threeCol .popArticles a,
.twoCol .popArticles a {
    padding: 0;
    list-style-type: none;
}

.most-pop-articles .popArticles li,
.threeCol .popArticles li,
.twoCol .popArticles li {
    margin-bottom: 1em;
    line-height: 18px;
    padding: 0;
    list-style-type: none;
}

.threeCol,
.twoCol {
    text-align: left;
}

.threeCol p, .twoCol p {
    font-size: 15px;
    line-height: 1.5em;
    margin-bottom: 0;
    margin: 0 0 0px;
    text-align: left;
    color: var(--text-text-secondary);
}

.threeCol h2,
.twoCol h2 {
    font-size: 24px;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 8px;
    font-family: "ShieldSans Bold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 18px;
    color: inherit;
    padding-left: 1.75em;
}

.threeCol .collection,
.twoCol .collection {
    background: #fff;
    border: 1px solid var(--border-border-primary);
    border-radius: 8px;
    margin-bottom: 3em;
    display: inline-block;
    vertical-align: top;
    min-height: 200px;
}

.twoCol .collection .collection-body, .twoCol .collection .collection-head {
   padding: 2em;
}

.threeCol .collection .collection-head, .twoCol .collection .collection-head {
   margin-bottom: 0em;
}

.collection-head {
    min-height: 4em;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position-x: 1.5em;
    background-position-y: 1.5em;
}

/*=================
IMAGES FOR COLLECTIONS
===================*/

/*FAQ's id is "collection-4"*/

#collection-4 .collection-head {
    background-image: url(https://i.ibb.co/Zp14HgPH/faq-icon.png);
   }

/*Other resources's id is "collection-39"*/

#collection-39 .collection-head {
    background-image: url(https://i.ibb.co/ycwL9bpZ/other-resources-icon.png);
   }


/*User Manual's id is "collection-1"*/

#collection-1 .collection-head {
    background-image: url(https://i.ibb.co/nq1HJXJm/user-manual-icon.png);
   }


/*What's New's id is "collection-7"*/

#collection-7 .collection-head {
    background-image: url(https://i.ibb.co/QjK6J7mz/whats-new-icon.png);
   }

/*=================
Side navigation when viewing article/category
===================*/

#sidebar h3 {
    text-transform: uppercase;
    font-size: 14px;
    color: var(--text-text-primary);
    margin-bottom: 4px;
}

#sidebar .nav-list a {
    display: inline-block;
    color: var(--text-text-secondary);
    font-size: 1.5em;
    line-height: 1.75em;
}

/*=================
ARTICLE STYLES
===================*/
/* Headings in articles */
#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5 {
    margin-bottom: .65em;
    color: var(--text-text-primary);
    margin: 9px 0;
    font-family: "ShieldSans Bold";
    line-height: 18px;
}


#fullArticle .title {
    font-size: 36px;
    line-height: 40px;
}

#fullArticle h1 {
    font-size: 32px;
    line-height: 40px;
}

#fullArticle h2 {
    font-size: 24px;
    line-height: 32px;
}

#fullArticle h3 {
    font-size: 18px;
    line-height: 24px;
}

#fullArticle h4 {
    font-size: 18px;
    line-height: 25px;
}



#fullArticle img {
    border: none;
}

#fullArticle blockquote,#fullArticle dd,#fullArticle div,#fullArticle li,#fullArticle ol,#fullArticle p,#fullArticle table,#fullArticle ul {
    font-size: 16px;
    color: var(--text-text-primary);
    margin-bottom: 0.5em;
}

#fullArticle .callout p,#fullArticle .callout-blue p,#fullArticle .callout-green p,#fullArticle .callout-red p,#fullArticle .callout-yellow p,#fullArticle .private-note p {
    font-size: 16px;
    color: var(--text-text-primary)

}



/* Callouts */
#fullArticle .callout,
#fullArticle .callout-blue,
#fullArticle .callout-green,
#fullArticle .callout-red,
#fullArticle .callout-yellow {
    border: 1px solid;
    border-radius: 8px;
    color: var(--text-text-primary);
    font-size: 14px;
    margin-bottom: 2em;
    padding: 16px 25px 16px 20px;
}

#fullArticle .callout-yellow {
    background: var(--decorative-deco-warning);
    border-color: var(--border-border-warning);
}

#fullArticle .callout-blue {
    background: var(--decorative-deco-info);
    border-color: var(--border-border-info);
}

#fullArticle .callout-green {
    background: var(--decorative-deco-positive);
    border-color: var(--border-border-positive);
}

#fullArticle .callout-red {
    background: var(--decorative-deco-negative);
    border-color: var(--border-border-negative);
}

#fullArticle .callout {
    background: #f1f1f1;
    border-color: var(--border-border-inactive);
}

/* ============================================
   FIX ARTICLE LINK ALIGNMENT ON WRAP
   ============================================ */

/* Ensure article links don't indent when text wraps to new line */
.most-pop-articles .popArticles a,
.threeCol .popArticles a,
.twoCol .popArticles a {
    display: flex;
    align-items: flex-start;
}

.most-pop-articles .popArticles a i,
.threeCol .popArticles a i,
.twoCol .popArticles a i {
    flex-shrink: 0;
    margin-right: 6px;
}

.most-pop-articles .popArticles a span,
.threeCol .popArticles a span,
.twoCol .popArticles a span {
    flex: 1;
}

/* ============================================
   FIX COLLECTION CENTERING
   ============================================ */

/* Remove extra padding/margin that causes left alignment */
.twoCol.row-fluid {
    margin-left: 0;
    text-align: center;
}

.twoCol .collection {
    margin-left: 12px;
    margin-right: 12px;
}




/* ============================================
   RESPONSIVE - MOBILE LAYOUT
   ============================================ */

@media (max-width: 768px) {

    /* Prevent horizontal overflow on mobile */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .contentWrapper {

        padding-left: 4em;
        padding-right: 4em;
    }

    #sidebar {
        padding-left: 2em;
        padding-right: 2em;
    }

    .twoCol .collection,
    .threeCol .collection {
        margin-left: 0;
    }


}
    

    body {
        padding-left: 0;
        padding-right: 0;
    }

    /* Reset row-fluid margin to prevent horizontal overflow */
    .twoCol.row-fluid {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Make collections stack vertically and full width */
    .twoCol .collection,
    .threeCol .collection {
        margin-bottom: 2em;
        box-sizing: border-box;
        padding: 0 !important;
    }
    
    /* Ensure content area doesn't overflow 
    #contentArea {
        overflow-x: hidden;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    */
    
    /* Reduce padding on mobile for better space utilization */
    .twoCol .collection .collection-body,
    .threeCol .collection .collection-body {
        padding: 1.5em !important;
    }
    
    /* Reduce collection head padding on mobile */
    .twoCol .collection .collection-head,
    .threeCol .collection .collection-head {
        padding: 1.5em !important;
    }
    
    /* Override base.css first-child special case - ensure all collections look the same */
    .threeCol .collection:first-child,
    .twoCol .collection:first-child {
        padding: 0 !important;
        padding-top: 0 !important;
    }
    
    .threeCol .collection:first-child .collection-head,
    .twoCol .collection:first-child .collection-head {
        padding: 1.5em !important;
        padding-top: 1.5em !important;
    }
    
    /* Maintain consistent title spacing with icon */
    .threeCol h2,
    .twoCol h2 {
        padding-left: 1.75em;
        margin-top: 0;
        margin-bottom: 8px;
    }
    
    /* Adjust icon positioning for smaller padding */
    #collection-113 .collection-head,
    #collection-104 .collection-head,
    #collection-107 .collection-head,
    #collection-110 .collection-head {
        background-position-x: 1.5em;
        background-position-y: 1.5em;
    }


/* ============================================
   MOBILE SEARCH BUTTON ICON
   ============================================ */

@media (max-width: 480px) {
    /* Only apply these styles to the home page (index) with #docsSearch */
    #docsSearch {
        padding: 2em 20px 1.5em !important;
    }

    #searchBar {
        width: 80%;
    }
    
    /* Adjust searchBar on home page to use available width better */
    #docsSearch #searchBar {
        padding: 0;
        margin: 0 auto;
        max-width: 100%;
        position: relative;
    }
    
    /* Make search button more square and properly aligned - HOME PAGE ONLY */
    #docsSearch #searchBar button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 50px !important;
        height: 50px !important;
        padding: 0 !important;
        border-radius: 0 8px 8px 0 !important;
        background: var(--general-brand-primary) !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        border: 1px solid var(--general-brand-primary) !important;
    }
    
    #docsSearch #searchBar button:hover {
        background: var(--general-brand-darker) !important;
        border-color: var(--general-brand-darker) !important;
    }
    
    /* Hide the text span completely - HOME PAGE ONLY */
    #docsSearch #searchBar button span {
        display: none !important;
    }
    
    /* Fix search icon color and centering on mobile - HOME PAGE ONLY */
    #docsSearch #searchBar button .icon-search {
        color: var(--text-text-primary-reversed);
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 18px;
        position: relative;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    
    #docsSearch #searchBar button .icon-search:before {
        display: block;
        line-height: 1;
        text-align: center;
    }
    
    /* Adjust search input to work with square button - HOME PAGE ONLY */
    #docsSearch #searchBar .search-query {
        margin-right: 0 !important;
        padding-right: 60px !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Better spacing for search title - HOME PAGE ONLY */
    #docsSearch h1 {
        padding: 0 0 0.5em 0 !important;
        margin-bottom: 0.5em;
    }
    
    /* Sidebar search button (article/category pages) - keep icon visible on all devices */
    #sidebar #searchBar button .icon-search {
        color: var(--text-text-primary-reversed);
    }
}