/* =========================================================================
   TURBOARD User Guide — theme overrides
   Custom palette (matches turboard.com), modern typography, embedded mode.
   ========================================================================= */

/* ---- Custom color palette ------------------------------------------------ */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        #1e2350;
  --md-primary-fg-color--light: #2b3170;
  --md-primary-fg-color--dark:  #141834;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:              #ec0f8d;
  --md-accent-fg-color--transparent: rgba(236, 15, 141, 0.10);
  --md-accent-bg-color:              #ffffff;
  --md-accent-bg-color--light:       rgba(255, 255, 255, 0.7);
}

:root {
  --md-typeset-a-color: #3d44c4;            /* body links */
  --tb-radius: 14px;
}

/* ---- Header / tabs: subtle gradient instead of a flat bar ---------------- */
.md-header {
  background: linear-gradient(100deg, #161a38 0%, #1e2350 45%, #2a2f6b 100%);
  box-shadow: 0 2px 14px rgba(15, 18, 45, 0.18);
}

/* Tabs sit just under the header — keep them on the dark brand color so the
   white tab labels stay readable (a transparent bar would make them vanish). */
.md-tabs {
  background-color: #1c2048;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.md-tabs__link {
  opacity: 0.78;
  font-weight: 500;
  transition: opacity 0.2s, color 0.2s;
}

.md-tabs__link:hover,
.md-tabs__item--active > .md-tabs__link,
.md-tabs__link--active {
  opacity: 1;
}

/* Pink underline indicator on the active top tab */
.md-tabs__item {
  position: relative;
}

.md-tabs__item--active > .md-tabs__link::after,
.md-tabs__link--active::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--md-accent-fg-color);
}

/* JAS top-tab icon (mdiFaceWomanShimmerOutline) */
.md-tabs__link.tb-jas-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.md-tabs__link.tb-jas-tab::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 1L18.41 3.41L16 4.5L18.41 5.59L19.5 8L20.6 5.59L23 4.5L20.6 3.41M12 2C6.5 2 2 6.5 2 12V22H22V12C22 10.53 21.67 9.13 21.1 7.87L19.86 10.57C19.95 11.04 20 11.5 20 12C20 16.43 16.43 20 12 20C7.57 20 4 16.43 4 12C4 11.95 4 11.91 4 11.86C6.61 10.89 8.69 8.88 9.74 6.31C11.61 8.61 14.44 10 17.5 10C17.94 10 18.39 9.97 18.83 9.91L17.96 8C17.81 8 17.65 8 17.5 8C14.68 8 12.1 6.5 10.66 4.12C11.1 4.05 11.54 4 12 4C12.5 4 12.96 4.05 13.42 4.13L16.13 2.91C14.87 2.33 13.47 2 12 2M8.09 5C7.46 6.91 6.15 8.5 4.41 9.5C5.04 7.57 6.37 6 8.09 5M9 11.75C8.31 11.75 7.75 12.31 7.75 13C7.75 13.69 8.31 14.25 9 14.25C9.69 14.25 10.25 13.69 10.25 13C10.25 12.31 9.69 11.75 9 11.75M15 11.75C14.31 11.75 13.75 12.31 13.75 13C13.75 13.69 14.31 14.25 15 14.25C15.69 14.25 16.25 13.69 16.25 13C16.25 12.31 15.69 11.75 15 11.75M4 17.97C4.58 18.74 5.26 19.42 6.03 20H4M20 17.97V20H17.97C18.74 19.42 19.42 18.74 20 17.97Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 1L18.41 3.41L16 4.5L18.41 5.59L19.5 8L20.6 5.59L23 4.5L20.6 3.41M12 2C6.5 2 2 6.5 2 12V22H22V12C22 10.53 21.67 9.13 21.1 7.87L19.86 10.57C19.95 11.04 20 11.5 20 12C20 16.43 16.43 20 12 20C7.57 20 4 16.43 4 12C4 11.95 4 11.91 4 11.86C6.61 10.89 8.69 8.88 9.74 6.31C11.61 8.61 14.44 10 17.5 10C17.94 10 18.39 9.97 18.83 9.91L17.96 8C17.81 8 17.65 8 17.5 8C14.68 8 12.1 6.5 10.66 4.12C11.1 4.05 11.54 4 12 4C12.5 4 12.96 4.05 13.42 4.13L16.13 2.91C14.87 2.33 13.47 2 12 2M8.09 5C7.46 6.91 6.15 8.5 4.41 9.5C5.04 7.57 6.37 6 8.09 5M9 11.75C8.31 11.75 7.75 12.31 7.75 13C7.75 13.69 8.31 14.25 9 14.25C9.69 14.25 10.25 13.69 10.25 13C10.25 12.31 9.69 11.75 9 11.75M15 11.75C14.31 11.75 13.75 12.31 13.75 13C13.75 13.69 14.31 14.25 15 14.25C15.69 14.25 16.25 13.69 16.25 13C16.25 12.31 15.69 11.75 15 11.75M4 17.97C4.58 18.74 5.26 19.42 6.03 20H4M20 17.97V20H17.97C18.74 19.42 19.42 18.74 20 17.97Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Search field a touch softer */
.md-search__form {
  border-radius: 10px;
}

/* ---- Typography ---------------------------------------------------------- */
.md-typeset {
  font-feature-settings: "kern", "liga";
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -0.005em;
  margin-top: 1.5em;
}

.md-typeset h3 {
  font-weight: 600;
}

.md-content__inner {
  margin-bottom: 2.5rem;
}

/* ---- Content links — clearly clickable ---------------------------------- */
.md-content a:not(.md-button):not(.md-icon):not(.md-nav__link):not(.md-tabs__link) {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(61, 68, 196, 0.35);
  font-weight: 500;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.md-content a:not(.md-button):not(.md-icon):not(.md-nav__link):not(.md-tabs__link):hover {
  color: var(--md-accent-fg-color);
  text-decoration-color: var(--md-accent-fg-color);
  text-decoration-thickness: 2px;
}

/* ---- Admonitions / tables: gentle modern rounding ----------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--tb-radius);
  border-width: 0 0 0 4px;
  box-shadow: 0 2px 10px rgba(15, 18, 45, 0.06);
}

.md-typeset table:not([class]) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(15, 18, 45, 0.06);
}

/* ---- Embedded videos (responsive 16:9) ---------------------------------- */
.md-typeset .tb-video {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 1.4em auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 28px rgba(15, 18, 45, 0.16);
}

.md-typeset .tb-video iframe,
.md-typeset .tb-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================================
   Home landing — card grid
   ========================================================================= */
.md-typeset .tb-home-cards.grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--tb-radius);
  padding: 1rem 1rem;
  box-shadow: 0 1px 3px rgba(15, 18, 45, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  background: var(--md-default-bg-color);
}

.md-typeset .tb-home-cards.grid.cards > ul > li:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(15, 18, 45, 0.12);
  border-color: rgba(236, 15, 141, 0.35);
}

/* Card icon */
.md-typeset .tb-home-cards .twemoji {
  color: var(--md-accent-fg-color);
}

.md-typeset .tb-home-cards .twemoji.lg svg {
  width: 1.55em;
  height: 1.55em;
}

/* Card heading row (icon + title) */
.md-typeset .tb-home-cards > ul > li > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

/* The "---" divider inside cards */
.md-typeset .tb-home-cards hr {
  margin: 0.5rem 0 0.6rem;
  border-bottom-color: var(--md-default-fg-color--lightest);
}

/* Link list inside each card — no bullets, tappable rows */
.md-typeset .tb-home-cards ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-typeset .tb-home-cards ul ul li {
  margin: 0;
}

.md-typeset .tb-home-cards ul ul li a {
  display: block;
  padding: 0.28rem 0.1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--md-default-fg-color--light);
  border-bottom: 1px solid transparent;
}

.md-typeset .tb-home-cards ul ul li a:hover {
  color: var(--md-accent-fg-color);
}

/* =========================================================================
   Embedded mode (inside turboard.com/guide iframe)
   Class added by javascripts/embed.js as early as possible.
   ========================================================================= */

/* Hide the duplicate brand — turboard.com already shows its own header.
   Keep tabs + search so navigation/search still work. */
.turboard-embedded .md-header__button.md-logo,
.turboard-embedded .md-header__title {
  display: none;
}

/* Pull search to the right cleanly when the title is gone */
.turboard-embedded .md-header__option {
  margin-left: auto;
}

/* Trim the footer down inside the embed */
.turboard-embedded .md-footer-meta {
  display: none;
}

.turboard-embedded .md-content__inner:first-child {
  padding-top: 0.5rem;
}

/* Single-scrollbar mode: the parent iframe is sized to the guide's full content
   height, so the guide itself must not create its own scroll contexts. Drop the
   sticky sidebars to static flow so the measured height tracks real content
   (short pages stay short instead of inheriting a tall viewport-based sidebar). */
.turboard-embedded .md-sidebar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 3.2rem !important; /* height of the top tabs bar */
  height: calc(100vh - 3.5rem) !important;
  width: 12.1rem;
  align-self: flex-start;
}

.turboard-embedded .md-sidebar__scrollwrap {
  height: 100% !important;
  overflow-y: auto !important;
  margin: 0;
}

.turboard-embedded .md-sidebar--secondary {
  width: 12.1rem;
}

/* Prevent horizontal scrollbars inside the iframe */
html.turboard-embedded,
body.turboard-embedded {
  overflow-x: clip !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Prevent default vertical gutter mismatch */
html.turboard-embedded {
  overflow-y: auto !important;
}

/* Expand layout containers to 100% width */
.turboard-embedded .md-grid {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 1.5rem !important;
}

.turboard-embedded .md-main__inner {
  max-width: 100% !important;
}

.turboard-embedded .md-content {
  max-width: 100% !important;
}

/* =========================================================================
   Arabic (RTL) — typography and layout
   Material sets dir=rtl when locale is ar; these rules refine readability.
   ========================================================================= */

html[lang="ar"],
[dir="rtl"] {
  --md-text-font: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

html[lang="ar"] .md-typeset,
[dir="rtl"] .md-typeset {
  font-feature-settings: "kern", "liga", "calt";
  line-height: 1.85;
}

html[lang="ar"] .md-typeset h1,
html[lang="ar"] .md-typeset h2,
html[lang="ar"] .md-typeset h3,
[dir="rtl"] .md-typeset h1,
[dir="rtl"] .md-typeset h2,
[dir="rtl"] .md-typeset h3 {
  letter-spacing: 0;
}

html[lang="ar"] .md-typeset .tb-home-cards > ul > li > p:first-child,
[dir="rtl"] .md-typeset .tb-home-cards > ul > li > p:first-child {
  flex-direction: row-reverse;
}

html[lang="ar"] .md-typeset table:not([class]),
[dir="rtl"] .md-typeset table:not([class]) {
  direction: rtl;
}

html[lang="ar"] .md-typeset .admonition,
html[lang="ar"] .md-typeset details,
[dir="rtl"] .md-typeset .admonition,
[dir="rtl"] .md-typeset details {
  border-width: 0 4px 0 0;
}

html[lang="ar"] .md-tabs__item--active > .md-tabs__link::after,
html[lang="ar"] .md-tabs__link--active::after,
[dir="rtl"] .md-tabs__item--active > .md-tabs__link::after,
[dir="rtl"] .md-tabs__link--active::after {
  left: 0.8rem;
  right: 0.8rem;
}

html[lang="ar"] .turboard-embedded .md-header__option,
[dir="rtl"] .turboard-embedded .md-header__option {
  margin-left: 0;
  margin-right: auto;
}