/* =========================================================
   TECHGIC PRODUCTS
   Uses the Techgic theme variables; the fallbacks keep it tidy with another theme.
   1. Product menu   3. Search results   5. Contact box
   2. Support home   4. Helpful          6. Without the Techgic theme
   ========================================================= */

/* ---------- 1. Product menu ---------- */
.tgp-menu { background: var(--tg-bg, #FCFBFF); border-bottom: 1px solid #EFEDF5; }
.tgp-menu__list { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tgp-menu__list::-webkit-scrollbar { display: none; }
.tgp-menu__list li { margin: 0; flex: none; }
.tgp-menu__list a { display: block; padding: 15px 0 13px; border-bottom: 2px solid transparent; color: var(--tg-muted, #6B6E85); font: 500 15px/1.3 var(--tg-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); text-decoration: none; transition: color .2s, border-color .2s; }
.tgp-menu__list a:hover { color: var(--tg-ink, #262842); }
.tgp-menu__list .current-menu-item > a,
.tgp-menu__list .current_page_item > a { color: var(--tg-p, #A259FF); border-bottom-color: var(--tg-p, #A259FF); }

/* ---------- 2. Support home ---------- */
.tgp-support__body { padding: 48px 0 100px; }
.tgp-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; align-items: start; }
.tgp-topic { background: #fff; border-radius: var(--tg-radius, 14px); box-shadow: 0 0 0 1px #EEEBF5; padding: 26px 28px 18px; }
.tgp-topic__title { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.tgp-topic__list { list-style: none; margin: 0; padding: 0; }
.tgp-topic__list li { margin: 0; border-top: 1px solid #F2F0F7; }
.tgp-topic__list li:first-child { border-top: 0; }
.tgp-topic__list a { display: block; padding: 10px 0; color: var(--tg-text, #3A3C52); font-size: 16px; line-height: 1.45; text-decoration: none; transition: color .2s; }
.tgp-topic__list a:hover { color: var(--tg-p, #A259FF); }

/* ---------- 3. Search results ---------- */
.tgp-results { max-width: 760px; }
.tgp-results__title { font-size: 26px; font-weight: 700; margin: 0 0 20px; }
.tgp-results__list { list-style: none; margin: 0; padding: 0; }
.tgp-result { margin: 0; padding: 20px 0; border-top: 1px solid #EFEDF5; }
.tgp-result__title { color: var(--tg-ink, #262842); font-size: 19px; font-weight: 700; text-decoration: none; }
.tgp-result__title:hover { color: var(--tg-p, #A259FF); }
.tgp-result__excerpt { margin: 6px 0 0; color: var(--tg-muted, #6B6E85); font-size: 16px; }
.tgp-noresults { color: var(--tg-muted, #6B6E85); }
.tgp-noresults p { margin: 0 0 8px; }

/* ---------- 4. Was this helpful? ---------- */
.tgp-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 56px; padding: 22px 0; border-top: 1px solid #EFEDF5; border-bottom: 1px solid #EFEDF5; }
.tgp-helpful__q, .tgp-helpful__thanks { margin: 0; color: var(--tg-ink, #262842); font-weight: 600; }
.tgp-helpful__btns { display: flex; gap: 10px; }
.tgp-helpful__btn { min-width: 76px; padding: 9px 20px; border: 1.5px solid var(--tg-line, #E8D9FF); border-radius: 999px; background: #fff; color: var(--tg-ink, #262842); font: 600 14px/1.2 var(--tg-font, sans-serif); cursor: pointer; transition: border-color .2s, color .2s; }
.tgp-helpful__btn:hover, .tgp-helpful__btn:focus-visible { border-color: var(--tg-p, #A259FF); color: var(--tg-p, #A259FF); }
.tgp-helpful [hidden] { display: none; }

/* ---------- 5. Contact box ---------- */
.tgp-contact { margin-top: 32px; padding: 30px 32px; border-radius: var(--tg-radius, 14px); background: var(--tg-soft, #F8F3FF); }
.tgp-contact__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.tgp-contact__text { color: var(--tg-text, #3A3C52); }
.tgp-contact__text p { margin: 0 0 18px; }

@media (max-width: 600px) {
	.tgp-menu__list { gap: 24px; }
	.tgp-support__body { padding: 32px 0 72px; }
	.tgp-topics { grid-template-columns: minmax(0, 1fr); }
	.tgp-topic { padding: 22px 22px 14px; }
	.tgp-contact { padding: 24px 22px; }
}

/* ---------- 6. Without the Techgic theme ---------- */
.tgp-no-techgic .tg-wrap { width: min(1200px, calc(100% - 40px)); margin-left: auto; margin-right: auto; }
.tgp-no-techgic .tg-pagehead, .tgp-no-techgic .tg-posthead { padding: 48px 0 32px; }
.tgp-no-techgic .tg-pagehead__date { font-size: 13px; color: #6B6E85; }
.tgp-no-techgic .tg-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.tgp-no-techgic .tg-layout { padding: 32px 0 80px; }
.tgp-no-techgic .tg-layout.is-centered .tg-main { max-width: 760px; margin: 0 auto; }
.tgp-no-techgic .tg-layout.has-side { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.tgp-no-techgic .tg-side.is-sticky .tg-side__in { position: sticky; top: 24px; }
.tgp-no-techgic .tg-toc__list { padding-left: 18px; }
.tgp-no-techgic .tg-toc__item.is-h3 { margin-left: 14px; }
.tgp-no-techgic .tg-search { display: flex; gap: 8px; max-width: 620px; margin-top: 20px; }
.tgp-no-techgic .tg-search input { flex: 1; padding: 10px 14px; }
.tgp-no-techgic .btn { display: inline-block; padding: 12px 24px; border-radius: 999px; background: #A259FF; color: #fff; text-decoration: none; }
.tgp-no-techgic .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
@media (max-width: 900px) {
	.tgp-no-techgic .tg-layout.has-side { display: block; }
}