/**
Theme Name: help.xeosoftware
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: help-xeosoftware
Template: astra
*/

/* =========================================================
   Contents
    1. Colours and page background
    2. Header (desktop)
    3. Header (tablet and phone)
    4. Page frame
    5. Layout: Help topics | content | On this page
    6. Help topics menu
    7. Card, titles and breadcrumbs
    8. Homepage and category pages
    9. Article content
   10. Article components: note, result, facts, steps,
       accordion, task cards, related, feedback
   11. On this page
   12. Tablet and phone layout
   ========================================================= */


/* =========================================================
   1. Colours and page background
   ========================================================= */
:root {
    --xh-bg: #F3F6FB;
    --xh-line: #E3E8F0;
    --xh-text: #1B2533;
    --xh-body: #3A4553;
    --xh-muted: #6B7685;
    --xh-link: #1F6FC5;
    --xh-active: #1A3E8C;
    --xh-navy: #0F2F6B;
    --xh-font: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body,
body.xh-help,
body.xh-help.ast-separate-container,
body.xh-help.ast-plain-container,
.xh-help #page,
.xh-help .site-content {
    background-color: var(--xh-bg) !important;
}

html {
    scroll-padding-top: 24px;
}


/* =========================================================
   2. Header (desktop)
   ========================================================= */
/* Logo: fixed size, never squeezed */
.site-header .site-logo-img,
.site-header .custom-logo-link {
    display: block;
    flex-shrink: 0;
}

.site-header .custom-logo-link img {
    display: block;
    height: 40px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
}

/* "Help" label (site title or HTML 2): white, one line */
.site-header .site-branding,
.site-header .ast-site-identity,
.site-header .site-title,
.ast-header-html-2,
.ast-header-html-2 * {
    flex-shrink: 0;
    white-space: nowrap;
}

.site-header .site-title a,
.ast-header-html-2,
.ast-header-html-2 * {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

.ast-header-html-2 {
    margin-left: 16px;
}

/* Search (HTML 1): fills the space, shrinks before the logo does */
.site-header-primary-section-left {
    flex: 1 1 auto;
}

.ast-header-html-1 {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: 520px;
    margin-left: 24px;
}

.ast-header-html-1 .ast-header-html,
.ast-header-html-1 .ast-builder-html-element,
.ast-header-html-1 .betterdocs-search-form-wrapper,
.ast-header-html-1 .betterdocs-live-search {
    width: 100%;
    max-width: none;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.ast-header-html-1 form {
    width: 100% !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ast-header-html-1 input[type="search"],
.ast-header-html-1 input[type="text"] {
    width: 100% !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 0 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 38px !important;
    box-shadow: none !important;
}

.ast-header-html-1 svg {
    width: 16px !important;
    height: 16px !important;
}

.betterdocs-searchform svg.docs-search-icon {
    margin-left: 0 !important;
}

.betterdocs-searchform-input-wrap {
    gap: 10px;
}


/* =========================================================
   3. Header (tablet and phone: Astra's mobile header)
   ========================================================= */
.ast-mobile-header-wrap .ast-builder-grid-row-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.ast-mobile-header-wrap .ast-header-html-1 {
    width: 100%;
    max-width: none;
    margin-left: 0;
}

.ast-mobile-header-wrap .custom-logo-link img {
    height: 34px !important;
}

/* "Help" next to the logo (Astra's own title is hidden so it isn't shown twice) */
.ast-mobile-header-wrap .site-branding,
.ast-mobile-header-wrap .ast-site-identity {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
}

.ast-mobile-header-wrap .ast-site-identity::after {
    content: "Help";
    margin-left: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

.ast-mobile-header-wrap .site-title,
.ast-mobile-header-wrap .ast-header-html-2 {
    display: none !important;
}

/* Menu button (☰) only when a menu has links */
.xh-no-menu [data-section="section-header-mobile-trigger"],
.xh-no-menu .ast-mobile-header-wrap .menu-toggle,
.xh-no-menu .ast-mobile-header-wrap .ast-button-wrap {
    display: none !important;
}


/* =========================================================
   4. Page frame: same width and spacing on every help page
   ========================================================= */
/* Header content lines up with "Help topics" */
.xh-help .site-header .ast-container,
.xh-help .site-header .ast-builder-grid-row-container {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Remove Astra's own boxes and spacing around the content */
.xh-help #content>.ast-container {
    max-width: none !important;
    padding: 0 !important;
    display: block !important;
}

.xh-help #primary {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xh-help #primary article,
.xh-help .ast-article-single,
.xh-help .entry-content {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* No "Help Center" page title on the homepage */
.home .entry-header {
    display: none;
}


/* =========================================================
   5. Layout: Help topics | content | On this page
   ========================================================= */
.xh-home,
.xh-help .entry-content>.xh-home {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    width: 100% !important;
    max-width: 1180px !important;
    margin: 40px auto 60px !important;
    padding: 0 24px !important;
}

.xh-home.xh-has-toc {
    grid-template-columns: 220px minmax(0, 1fr) 190px;
    gap: 40px;
}

/* The card always sits in the content column */
.xh-home>.xh-card {
    grid-column: 2;
}

.xh-home a {
    text-decoration: none !important;
}

/* Inter everywhere on help pages (Astra's heading and button fonts are replaced) */
.xh-home,
.xh-home h1,
.xh-home h2,
.xh-home h3,
.xh-home h4,
.xh-home h5,
.xh-home h6,
.xh-home button,
.xh-home input {
    font-family: var(--xh-font) !important;
}

/* Shared small grey titles: "Help topics", "On this page" */
.xh-home .xh-side-title {
    margin: 0 0 10px;
    padding: 0 8px;
    font-size: 12px;
    color: var(--xh-muted);
}

/* Shared arrow (›) used by the accordions and task cards */
.xh-home .xh-article-body .wp-block-accordion button::after,
.xh-home .xh-article-body .xh-task::after {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease;
    opacity: .55;
}


/* =========================================================
   6. Help topics menu
   ========================================================= */
.xh-home .xh-cats,
.xh-home .xh-sub ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.xh-home .xh-cats>li,
.xh-home .xh-sub li {
    margin: 0;
}

.xh-home .xh-cat {
    display: block;
    padding: 7px 8px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--xh-text);
}

.xh-home .xh-cat:hover {
    color: var(--xh-link);
}

/* Category that opens (accordion) */
.xh-home .xh-acc>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    border-radius: 4px;
}

.xh-home .xh-acc>summary::-webkit-details-marker {
    display: none;
}

.xh-home .xh-acc[open]>summary {
    color: var(--xh-active);
    font-weight: 600;
}

.xh-home .xh-acc>summary:focus-visible {
    outline: 2px solid var(--xh-link);
    outline-offset: 2px;
}

/* Subcategories and articles, on a thin line; the current article is marked in blue */
.xh-home .xh-sub {
    margin: 2px 0 10px 12px;
    border-left: 1px solid var(--xh-line);
}

.xh-home .xh-sub-label {
    margin: 8px 0 2px;
    padding-left: 12px;
    font-size: 12px;
    color: var(--xh-muted);
}

.xh-home .xh-sub a {
    display: block;
    margin-left: -1px;
    padding: 5px 0 5px 12px;
    border-left: 2px solid transparent;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--xh-body);
}

.xh-home .xh-sub a:hover {
    color: var(--xh-link);
}

.xh-home .xh-sub a.is-current {
    border-left-color: var(--xh-link);
    color: var(--xh-link);
    font-weight: 600;
}


/* =========================================================
   7. Card, titles and breadcrumbs
   ========================================================= */
.xh-home .xh-card {
    max-width: 720px;
    padding: 36px 40px 40px;
    background: #fff;
    border: 1px solid var(--xh-line);
    border-radius: 8px;
}

.xh-home .xh-card h1 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--xh-text);
}

.xh-home .xh-lede {
    max-width: 60ch;
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--xh-muted);
}

.xh-home .xh-crumbs {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--xh-muted);
}

.xh-home .xh-crumbs a {
    color: var(--xh-muted);
}

.xh-home .xh-crumbs a:hover {
    color: var(--xh-link);
}

.xh-home .xh-crumbs .xh-sep {
    margin: 0 4px;
    opacity: .6;
}


/* =========================================================
   8. Homepage and category pages
   ========================================================= */
/* Two-column topic list (homepage card, [xeo_help_cards], [xeo_help_articles]) */
.xh-home .xh-topics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(var(--xh-rows, 4), auto);
    grid-auto-flow: column;
    column-gap: 32px;
}

/* Lists of links with a title and grey text (topics, category pages, block-built lists) */
.xh-home .xh-topics a,
.xh-home .xh-doclist a,
.xh-home .xh-item {
    display: block;
    padding: 10px 0;
    border-top: 1px solid var(--xh-line);
}

.xh-home .xh-topics strong,
.xh-home .xh-doclist strong,
.xh-home .xh-item p:first-child {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--xh-text);
}

.xh-home .xh-topics span,
.xh-home .xh-doclist span,
.xh-home .xh-item p+p {
    display: block;
    margin-top: 2px !important;
    font-size: 13px;
    line-height: 1.4;
    color: var(--xh-muted);
}

.xh-home .xh-topics a:hover strong,
.xh-home .xh-doclist a:hover strong,
.xh-home .xh-item p:first-child a:hover {
    color: var(--xh-link);
}

.xh-home .xh-item p {
    margin: 0 !important;
}

.xh-home .xh-item p:first-child a {
    color: var(--xh-text);
}

/* Columns block with class "xh-list" (each item a Group with class "xh-item") */
.xh-home .wp-block-columns.xh-list {
    column-gap: 32px;
    row-gap: 0;
    margin: 16px 0 28px !important;
}

.xh-home .xh-list .wp-block-column>* {
    margin: 0 !important;
}

.xh-home .xh-article-body .xh-topics {
    margin: 16px 0 28px;
}

/* Category page */
.xh-home .xh-group {
    margin: 28px 0 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.xh-home .xh-group a {
    color: var(--xh-muted);
}

.xh-home .xh-doclist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.xh-home .xh-doclist li {
    margin: 0;
}

.xh-home .xh-empty {
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--xh-line);
    color: var(--xh-muted);
}


/* =========================================================
   9. Article content
   ========================================================= */
.xh-home .xh-article .xh-lede {
    margin-bottom: 6px;
    color: var(--xh-body);
}

.xh-home .xh-updated {
    margin: 0 0 24px;
    font-size: 12px;
    color: var(--xh-muted);
}

.xh-home .xh-article-body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--xh-text);
}

.xh-home .xh-article-body p {
    margin: 0 0 14px;
}

/* Section headings ("What's on this page", "Related", ...) */
.xh-home .xh-article-body h2,
.xh-home .xh-article-body h3,
.xh-home .xh-related-title {
    margin: 28px 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--xh-text);
}

.xh-home .xh-article-body>h2:first-child {
    margin-top: 0;
}

.xh-home .xh-article-body a {
    color: var(--xh-link);
}

.xh-home .xh-article-body a:hover {
    text-decoration: underline !important;
}

.xh-home .xh-article-body strong {
    color: var(--xh-text);
}

.xh-home .xh-article-body ul {
    margin: 0 0 16px;
    padding-left: 22px;
}

.xh-home .xh-article-body img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--xh-line);
    border-radius: 6px;
}


/* =========================================================
   10. Article components
   ========================================================= */
/* Numbered steps: every numbered list shows navy circles */
.xh-home .xh-article-body ol {
    list-style: none;
    counter-reset: xh-step;
    margin: 4px 0 14px;
    padding: 0;
}

.xh-home .xh-article-body ol>li {
    position: relative;
    counter-increment: xh-step;
    margin: 0 0 10px;
    padding-left: 30px;
    line-height: 1.6;
}

.xh-home .xh-article-body ol>li::before {
    content: counter(xh-step);
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--xh-navy);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

/* Setup note (blue) and Result (grey) boxes */
.xh-home .xh-article-body .xh-note,
.xh-home .xh-article-body .xh-result {
    margin: 0 0 20px !important;
    padding: 10px 14px;
    border-left: 3px solid var(--xh-link);
    border-radius: 2px;
    background: #EEF4FB;
}

.xh-home .xh-article-body .xh-result {
    margin: 12px 0 14px !important;
    border-left-color: var(--xh-navy);
    background: #F4F6FA;
}

.xh-home .xh-article-body .xh-note p,
.xh-home .xh-article-body .xh-result p {
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.5;
    color: var(--xh-body);
}

/* Tables in a light box (Table block with class "xh-facts", "xh-compare" or "xh-status").
   The box (border and rounded corners) is drawn on the block's outer element,
   so no theme table style can remove it. */
.xh-home .xh-article-body figure.xh-facts,
.xh-home .xh-article-body figure.xh-compare,
.xh-home .xh-article-body figure.xh-status {
    box-sizing: border-box;
    margin: 2px 0 12px !important;
    padding: 10px 16px !important;
    background: #fff;
    border: 1px solid var(--xh-line) !important;
    border-radius: 6px;
}

.xh-home .xh-article-body .xh-facts table,
.xh-home .xh-article-body .xh-compare table,
.xh-home .xh-article-body .xh-status table {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}

.xh-home .xh-article-body .xh-facts td,
.xh-home .xh-article-body .xh-compare th,
.xh-home .xh-article-body .xh-compare td,
.xh-home .xh-article-body .xh-status th,
.xh-home .xh-article-body .xh-status td {
    padding: 7px 0 !important;
    border: 0 !important;
    background: none !important;
    vertical-align: top;
    text-align: left;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 20px;
    color: #2A3441;
}

/* Facts: grey labels on the left, text on the right (two columns) */
.xh-home .xh-article-body .xh-facts td:first-child {
    width: 156px;
    padding-right: 16px !important;
    font-size: 12.5px;
    color: #7A8494;
}

/* Comparison and Status tables: grey column titles, a line between rows */
.xh-home .xh-article-body figure.xh-compare,
.xh-home .xh-article-body figure.xh-status {
    overflow-x: auto;
    /* wide tables scroll sideways inside the box on phones */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.xh-home .xh-article-body .xh-compare table,
.xh-home .xh-article-body .xh-status table {
    min-width: 480px;
    table-layout: fixed;
}

.xh-home .xh-article-body .xh-compare th,
.xh-home .xh-article-body .xh-compare td,
.xh-home .xh-article-body .xh-status th,
.xh-home .xh-article-body .xh-status td {
    padding: 11px 16px 11px 0 !important;
}

.xh-home .xh-article-body .xh-compare thead th,
.xh-home .xh-article-body .xh-status thead th {
    font-size: 12.5px;
    color: #7A8494;
}

.xh-home .xh-article-body .xh-compare tbody tr>*,
.xh-home .xh-article-body .xh-status tbody tr>* {
    border-top: 1px solid var(--xh-line) !important;
}

/* Comparison: bold row titles in the first quarter */
.xh-home .xh-article-body .xh-compare tr> :first-child {
    width: 25%;
}

.xh-home .xh-article-body .xh-compare tbody tr> :first-child {
    font-weight: 600;
    color: var(--xh-text);
}

/* Status: column widths, and the first column shown as coloured labels */
.xh-home .xh-article-body .xh-status tr> :nth-child(1) {
    width: 22%;
}

.xh-home .xh-article-body .xh-status tr> :nth-child(2) {
    width: 40%;
}

.xh-home .xh-badge {
    display: inline-block;
    padding: 0 8px;
    border: 1px solid #D9DCE1;
    border-radius: 4px;
    background: #F1F2F4;
    color: #5F6670;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
}

.xh-home .xh-badge--orange {
    border-color: #F6D9AC;
    background: #FFF5E6;
    color: #DB8A10;
}

.xh-home .xh-badge--green {
    border-color: #CFE8C6;
    background: #EEF8EA;
    color: #3E8A2E;
}

.xh-home .xh-badge--blue {
    border-color: #C9DAF3;
    background: #EEF4FB;
    color: var(--xh-link);
}

.xh-home .xh-badge--red {
    border-color: #F2C9C9;
    background: #FDF0F0;
    color: #C23B3B;
}

/* Accordion (WordPress Accordion block): thin lines, arrow on the right */
.xh-home .xh-article-body .wp-block-accordion {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--xh-line);
}

.xh-home .xh-article-body .xh-note+.wp-block-accordion {
    margin-top: 0 !important;
}

/* Accordion blocks placed one after another look like one list (a single line between them) */
.xh-home .xh-article-body .wp-block-accordion:has(+ .wp-block-accordion) {
    margin-bottom: 0 !important;
    border-bottom: 0;
}

.xh-home .xh-article-body .wp-block-accordion-item {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-top: 1px solid var(--xh-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.xh-home .xh-article-body .wp-block-accordion-heading,
.xh-home .xh-article-body .wp-block-accordion-item h2,
.xh-home .xh-article-body .wp-block-accordion-item h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* The clickable row is a button: remove Astra's yellow button style */
.xh-home .xh-article-body .wp-block-accordion button,
.xh-home .xh-article-body .wp-block-accordion button:hover,
.xh-home .xh-article-body .wp-block-accordion button:focus {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    background: transparent !important;
    color: var(--xh-text) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

.xh-home .xh-article-body .wp-block-accordion button * {
    text-decoration: none !important;
}

.xh-home .xh-article-body .wp-block-accordion button:hover {
    color: var(--xh-link) !important;
}

.xh-home .xh-article-body .wp-block-accordion button:focus-visible {
    outline: 2px solid var(--xh-link) !important;
    outline-offset: 2px;
}

.xh-home .xh-article-body .wp-block-accordion-heading__toggle-icon {
    display: none !important;
    /* the "+" is replaced by the arrow */
}

.xh-home .xh-article-body .wp-block-accordion button::after {
    margin: 0 4px 0 12px;
}

.xh-home .xh-article-body .wp-block-accordion button[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

/* Text inside an open item */
.xh-home .xh-article-body .wp-block-accordion-panel {
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.6;
    color: var(--xh-body);
}

.xh-home .xh-article-body .wp-block-accordion-item.is-open .wp-block-accordion-panel {
    padding-bottom: 10px;
}

.xh-home .xh-article-body .wp-block-accordion-panel>* {
    margin: 0 0 10px !important;
}

.xh-home .xh-article-body .wp-block-accordion-panel> :last-child {
    margin-bottom: 0 !important;
}

/* Closed items stay closed while the page is loading */
.xh-home .xh-article-body .wp-block-accordion-item:has(button[aria-expanded="false"])>.wp-block-accordion-panel,
.xh-home .xh-article-body .wp-block-accordion-panel[hidden] {
    display: none !important;
}

/* "What do you want to do?" task cards (Group with class "xh-task") */
.xh-home .xh-article-body .xh-task {
    position: relative;
    margin: 0 0 8px !important;
    padding: 11px 40px 11px 14px;
    background: #fff;
    border: 1px solid var(--xh-line);
    border-left: 3px solid var(--xh-link);
    border-radius: 4px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.xh-home .xh-article-body .xh-task:hover {
    border-color: #C9D3E3;
    border-left-color: var(--xh-link);
    box-shadow: 0 1px 3px rgba(27, 37, 51, .06);
}

.xh-home .xh-article-body .xh-task::after {
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -4px;
    color: var(--xh-muted);
}

.xh-home .xh-article-body .xh-task p {
    margin: 0 !important;
}

.xh-home .xh-article-body .xh-task p:first-child {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}

.xh-home .xh-article-body .xh-task p:first-child a {
    color: var(--xh-text);
    text-decoration: none !important;
}

.xh-home .xh-article-body .xh-task p:first-child a::before {
    content: "";
    position: absolute;
    inset: 0;
    /* the whole card is clickable */
}

.xh-home .xh-article-body .xh-task:hover p:first-child a {
    color: var(--xh-link);
}

.xh-home .xh-article-body .xh-task p+p {
    margin-top: 2px !important;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--xh-muted);
}

/* Related (automatic, or chosen with the "Related links" pattern) */
.xh-home .xh-related-links {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.xh-home .xh-related-links li {
    margin: 0;
    border-top: 1px solid var(--xh-line);
}

.xh-home .xh-related-links a {
    display: block;
    padding: 9px 0;
    font-size: 14.5px;
    color: var(--xh-link);
}

.xh-home .xh-related-links a:hover {
    text-decoration: underline !important;
}

/* Did this help? */
.xh-home .xh-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--xh-line);
    font-size: 13px;
    color: var(--xh-body);
}

.xh-home .xh-feedback [hidden] {
    display: none !important;
}

.xh-home .xh-feedback button,
.xh-home .xh-feedback button:focus {
    margin: 0;
    padding: 4px 14px !important;
    background: #fff !important;
    color: var(--xh-text) !important;
    border: 1px solid var(--xh-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

.xh-home .xh-feedback button:hover {
    background: #fff !important;
    border: 1px solid var(--xh-link) !important;
    color: var(--xh-link) !important;
}

.xh-home .xh-feedback button:focus-visible {
    outline: 2px solid var(--xh-link);
    outline-offset: 2px;
}


/* =========================================================
   11. On this page
   ========================================================= */
.xh-home .xh-toc {
    position: sticky;
    top: 24px;
}

.xh-home .xh-toc[hidden] {
    display: none;
}

.xh-home .xh-toc .xh-side-title {
    padding: 0;
}

.xh-home .xh-toc ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 12px;
    border-left: 1px solid var(--xh-line);
}

.xh-home .xh-toc li {
    margin: 0;
}

.xh-home .xh-toc li.is-sub {
    padding-left: 12px;
}

.xh-home .xh-toc a {
    display: block;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--xh-body);
}

.xh-home .xh-toc a:hover {
    color: var(--xh-link);
}

/* Narrow laptops: no room for "On this page" */
@media (max-width: 1100px) {
    .xh-home.xh-has-toc {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .xh-home .xh-toc {
        display: none;
    }
}


/* =========================================================
   12. Tablet and phone layout
   Applies whenever Astra shows its mobile header (Astra adds
   "ast-header-break-point" to the page), so the search is
   always in exactly one place.
   ========================================================= */
/* Hidden on desktop */
.xh-home .xh-nav-toggle,
.xh-home .xh-msearch {
    display: none;
}

.ast-header-break-point.xh-help .site-header .ast-container,
.ast-header-break-point.xh-help .site-header .ast-builder-grid-row-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* One column */
.ast-header-break-point .xh-home,
.ast-header-break-point .xh-home.xh-has-toc,
.ast-header-break-point.xh-help .entry-content>.xh-home {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px !important;
    padding: 0 16px !important;
}

.ast-header-break-point .xh-home>.xh-card {
    grid-column: 1;
    max-width: none;
    padding: 24px;
}

.ast-header-break-point .xh-home .xh-topics {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
}

.ast-header-break-point .xh-home .xh-facts td {
    display: block;
    width: auto !important;
    padding: 0 !important;
}

.ast-header-break-point .xh-home .xh-facts td:first-child {
    padding-top: 10px !important;
}

/* Search box (one box; everything BetterDocs puts inside it is plain) */
.ast-header-break-point .xh-home .xh-msearch {
    display: flex;
    align-items: center;
    position: relative;
    height: 46px;
    margin-bottom: 12px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--xh-line);
    border-radius: 8px;
}

.ast-header-break-point .xh-home .xh-msearch:focus-within {
    border-color: var(--xh-link);
}

.ast-header-break-point .xh-home .xh-msearch>*,
.ast-header-break-point .xh-home .xh-msearch .betterdocs-search-form-wrapper,
.ast-header-break-point .xh-home .xh-msearch .betterdocs-live-search,
.ast-header-break-point .xh-home .xh-msearch form,
.ast-header-break-point .xh-home .xh-msearch form div,
.ast-header-break-point .xh-home .xh-msearch form label,
.ast-header-break-point .xh-home .xh-msearch input {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.ast-header-break-point .xh-home .xh-msearch form {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}

.ast-header-break-point .xh-home .xh-msearch input[type="search"],
.ast-header-break-point .xh-home .xh-msearch input[type="text"] {
    height: 44px !important;
    font-size: 16px !important;
    /* 16px stops iPhones zooming in */
    line-height: 44px !important;
    color: var(--xh-text) !important;
}

.ast-header-break-point .xh-home .xh-msearch svg {
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

/* "Help topics" button that opens the menu */
.ast-header-break-point .xh-home button.xh-nav-toggle,
.ast-header-break-point .xh-home button.xh-nav-toggle:hover,
.ast-header-break-point .xh-home button.xh-nav-toggle:focus {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 12px 16px !important;
    background: #fff !important;
    color: var(--xh-text) !important;
    border: 1px solid var(--xh-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

.ast-header-break-point .xh-home button.xh-nav-toggle:focus-visible {
    outline: 2px solid var(--xh-link);
    outline-offset: 2px;
}

.ast-header-break-point .xh-home .xh-nav-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    opacity: .6;
}

.ast-header-break-point .xh-home .xh-navwrap.is-open .xh-nav-toggle::after {
    transform: rotate(-135deg);
}

.ast-header-break-point .xh-home .xh-navwrap .xh-nav {
    display: none;
    margin-top: 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--xh-line);
    border-radius: 8px;
}

.ast-header-break-point .xh-home .xh-navwrap.is-open .xh-nav {
    display: block;
}

.ast-header-break-point .xh-home .xh-nav .xh-side-title {
    display: none;
}