/* ============================================
   CUSTOM HELP SCOUT DOCS CSS

   Template CSS for TRMS Help Center
   ============================================ */

/* ============================================
   CSS VARIABLES - Design Tokens
   ============================================ */
:root {
    /* Base palette tokens (from Mode 1.tokens.json) — only the shades
       actually referenced by the semantic tokens below are kept. */
    --berry-100: #FCE0DE;
    --berry-500: #ED453C;
    --november-50: #E8E9EA;
    --november-100: #D0D3D5;
    --november-300: #A1A7AB;
    --november-600: #5B646D;
    --november-900: #15222E;
    --rainforest-100: #BEF4CD;
    --rainforest-500: #22C550;
    --signatur-600: #1A9ED5;
    --signatur-800: #0F5B7B;
    --topgolf-100: #D0E6FB;
    --topgolf-700: #0B4C8C;
    --traffic-100: #FCF0CF;
    --traffic-500: #F4B93B;
    --white: #FFFFFF;

    /* Semantic tokens (from Colors.json) — trimmed to the ones this
       file actually uses. */
    /* General */
    --general-brand-darker: var(--signatur-800);
    --general-brand-primary: var(--signatur-600);

    /* Text */
    --text-text-action: var(--signatur-600);
    --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);

    /* Background */
    --background-bg-primary-reversed: var(--november-900);
    --background-bg-surface: #F9FDFF;

    /* Decorative */
    --decorative-deco-info: var(--topgolf-100);
    --decorative-deco-negative: var(--berry-100);
    --decorative-deco-positive: var(--rainforest-100);
    --decorative-deco-warning: var(--traffic-100);

    /* Border */
    --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-warning: var(--traffic-500);
}

/* ============================================
   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);
   }

/*Troubleshooting's id is "collection-160"*/

#collection-160 .collection-head {
    background-image: url(https://i.ibb.co/20XRyHH8/rangeoperations-icon.png);
   }

/*App's id is "collection-189"*/

#collection-189 .collection-head {
    background-image: url(https://i.ibb.co/9mHNK27D/app-icon.png);
   }

/*Games's id is "collection-233"*/

#collection-233 .collection-head {
    background-image: url(https://i.ibb.co/NgLGm5wW/games-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;
    }

    /* Related articles (shown above the sidebar's search/category list on
       article pages) sit in a different container than #sidebar and don't
       inherit its padding, so on mobile they render flush against the left
       edge instead of lined up with the categories below them. Match
       #sidebar's inset so both blocks align. */
    #main-content .related {
        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);
    }
}


/* ════════════════════════════════════════════════════════════════
   NAVBAR CUSTOMIZATIONS  (added June 2026)
   - Hide collections from top nav; align logo/links/switcher
   - Mobile menu button placement + open/close animation
     (animation also needs the "menu toggle" script in
      Insert <head> Code — it drives the .in class so the CSS
      max-height transition can run)
   - Nav link typography (bold, white, 16px, grey hover)
   Notes:
   * "App" (/collection/189-) left VISIBLE. To hide:
       #mainNav .nav li a[href^="/collection/189-"]{display:none;}
   * Weglot language switcher styling (the navbar pill design) now
     lives in Weglot's own dashboard Custom CSS field, not here —
     see Weglot Dashboard > Settings > Language Switcher > Advanced
     Options > Custom CSS. The two rules just below are the only
     Weglot-adjacent pieces left in this file, because they're really
     general navbar stacking rules (needed so the switcher's dropdown,
     wherever it's styled, can overflow above the search hero).
   ════════════════════════════════════════════════════════════════ */

/* ----------------------------------------------
   NAVBAR (proposed additions)
   ---------------------------------------------- */

/* 1) Hide collections from the top navigation.
   Targets the collection ID in the URL, so it survives renames
   (nav li IDs like #trms change when a collection is renamed).
   Cosmetic only: collections stay reachable via cards/search/URLs. */

#mainNav .nav li a[href^="/collection/1-"],
#mainNav .nav li a[href^="/collection/160-"],
#mainNav .nav li a[href^="/collection/39-"] {
    display: none;
}

/* 2) Navbar layout (all widths): a wrapping flex row.
   Replaces the base float/absolute layout, which pins the nav to the
   navbar's bottom edge on desktop and the burger to the top on mobile.
   Row 1: brand + burger, vertically centered against each other.
   Row 2 (mobile): the collapsible menu, full width. */

#mainNav .navbar-inner > .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* the base clearfix pseudo-elements would become stray flex items */
#mainNav .navbar-inner > .container-fluid::before,
#mainNav .navbar-inner > .container-fluid::after {
    content: none;
}

#mainNav .brand {
    float: none;
    padding-top: 12px;    /* base: 31px top / 11px bottom */
    padding-bottom: 12px;
}

@media (min-width: 769px) {
    #mainNav .nav-collapse.collapse {
        position: static;
    }

    #mainNav .nav {
        position: static;   /* base pins it to bottom: 0 */
        margin: 0;
    }
}

/* 3) Mobile: burger in normal flow (never moves), menu animates
   open AND close.

   NOTE: replaces the earlier "height: auto !important" hardening
   snippet — remove that if it was added. height: auto cannot be
   transitioned (which is why opening snapped while closing animated);
   max-height drives both directions from the class toggle alone. */

@media (max-width: 768px) {
    .navbar .btn-navbar {
        position: static;   /* base: absolute, top 0 — caused drift and
                               overlap once the menu expanded */
        margin: 0 20px 0 auto; /* auto pushes it right; 20px matches the
                                  content gutter below the navbar */
        -webkit-transform: none;
        transform: none;
    }

    #mainNav .nav-collapse {
        flex: 1 1 100%;     /* menu takes its own full-width row */
    }

    #mainNav .nav-collapse.collapse {
        height: auto !important;   /* take height out of the equation */
        max-height: 0;             /* closed state */
        overflow: hidden;
        -webkit-transition: max-height .35s ease;
        transition: max-height .35s ease;
    }

    #mainNav .nav-collapse.collapse.in {
        max-height: 320px;  /* > tallest possible menu; tune if items
                               are added — a large gap adds a small
                               delay before the close becomes visible */
    }

    /* Once the menu is fully open, stop clipping so the language
       switcher's dropdown can overflow the menu box. During the
       open/close transition overflow stays hidden (rule above) so
       the animation still clips cleanly; only the settled-open
       state releases it. */
    #mainNav .nav-collapse.collapse.in {
        overflow: visible;
    }
}

/* 4) Nav link typography: bold, white, 16px, light-grey hover.
   Overrides the branding-settings colors (#63c3ec / #b1e1f5);
   the #mainNav prefix outweighs those selectors. */

#mainNav .nav li a {
    color: var(--text-text-primary-reversed);
    font-family: "ShieldSans Bold", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
}

#mainNav .nav .active a {
    color: var(--text-text-primary-reversed);
}

#mainNav .nav li a:hover,
#mainNav .nav li a:focus,
#mainNav .nav .active a:hover,
#mainNav .nav .active a:focus {
    color: var(--text-text-secondary-reversed);  /* november-100, #D0D3D5 */
}

/* Lift the whole navbar above the search hero (#docsSearch) so the
   language switcher's open dropdown — which overflows the navbar —
   stacks over the search field instead of being painted behind it.
   Kept here (rather than moved into Weglot's Custom CSS) because it's
   general page stacking, not switcher-specific styling. */
#mainNav {
    position: relative;
    z-index: 100;
}
#docsSearch {
    position: relative;
    z-index: 1;
}