/*
 * DistroVibe Help Center theme
 * Chatwoot 4.17.1 · "documentation" portal layout
 *
 * Loaded after Chatwoot's compiled portal CSS (see views/layouts/_portal_head.html.erb).
 * Chatwoot's Tailwind tokens are CSS variables (--slate-*, --border-weak, --dynamic-portal-*),
 * so most of the re-skin is done by redefining them. New markup uses `dv-` classes only,
 * because Tailwind classes that are not already in Chatwoot's compiled bundle do not exist.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  --dv-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dv-lime: #e5ff00;
  --dv-violet: #7000ff;
  --dv-radius: 16px;
  --dv-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Light — `:root:not(.dark)` (0,2,0) beats Chatwoot's `:root` and `html.light` */
:root:not(.dark) {
  --slate-1: 255 255 255;
  --slate-2: 250 250 250;
  --slate-3: 244 244 245;
  --slate-4: 236 236 238;
  --slate-5: 228 228 231;
  --slate-6: 216 216 220;
  --slate-7: 200 200 205;
  --slate-8: 170 170 176;
  --slate-9: 140 140 146;
  --slate-10: 113 113 119;
  --slate-11: 82 82 88;
  --slate-12: 10 10 10;
  --border-weak: 234 234 236;
  --border-strong: 220 220 224;
  --alpha-1: 0, 0, 0, .03;
  --alpha-2: 0, 0, 0, .05;

  --dynamic-portal-color: var(--dv-violet);
  --dynamic-portal-color-soft: rgba(112, 0, 255, .08);
  --dynamic-portal-color-faint: rgba(112, 0, 255, .07);
  --dynamic-hover-color: var(--dv-violet);

  --dv-accent: var(--dv-violet);
  --dv-accent-ink: #fff;
  --dv-accent-hover: #5b00d6;
  --dv-glow: rgba(112, 0, 255, .16);
  --dv-bg: #fff;
  --dv-card: #fff;
  --dv-card-hover: #fcfbff;
  --dv-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .08);
  --dv-shadow-hover: 0 2px 4px rgba(0, 0, 0, .04), 0 18px 40px -18px rgba(112, 0, 255, .35);
  --dv-topbar: rgba(255, 255, 255, .82);
  color-scheme: light;
}

/* Dark — `:root.dark` (0,2,0) beats Chatwoot's `.dark` and the inline `html.dark` portal colors */
:root.dark {
  --slate-1: 5 5 5;
  --slate-2: 9 9 9;
  --slate-3: 16 16 16;
  --slate-4: 22 22 22;
  --slate-5: 29 29 29;
  --slate-6: 37 37 37;
  --slate-7: 50 50 50;
  --slate-8: 68 68 68;
  --slate-9: 92 92 92;
  --slate-10: 122 122 122;
  --slate-11: 168 168 168;
  --slate-12: 245 245 245;
  --border-weak: 28 28 28;
  --border-strong: 42 42 42;
  --alpha-1: 255, 255, 255, .03;
  --alpha-2: 255, 255, 255, .07;
  --alpha-3: 10, 10, 10, .96;
  --background-color: 5 5 5;
  --surface-1: 9 9 9;
  --surface-2: 12 12 12;
  --solid-1: 14 14 14;
  --solid-2: 20 20 20;
  --solid-3: 28 28 28;
  --card-color: 12 12 12;

  --dynamic-portal-color: var(--dv-lime);
  --dynamic-portal-color-soft: rgba(229, 255, 0, .10);
  --dynamic-portal-color-faint: rgba(229, 255, 0, .06);
  --dynamic-hover-color: var(--dv-lime);

  --dv-accent: var(--dv-lime);
  --dv-accent-ink: #000;
  --dv-accent-hover: #d4ed00;
  --dv-glow: rgba(229, 255, 0, .18);
  --dv-bg: #050505;
  --dv-card: #0b0b0b;
  --dv-card-hover: #0f0f0d;
  --dv-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
  --dv-shadow-hover: 0 0 0 1px rgba(229, 255, 0, .25), 0 18px 48px -20px rgba(229, 255, 0, .28);
  --dv-topbar: rgba(5, 5, 5, .78);
  color-scheme: dark;
}

/* ------------------------------------------------------------- base */

html body,
html .font-inter {
  font-family: var(--dv-font) !important;
  font-feature-settings: "ss01", "cv11";
}

html body {
  background: var(--dv-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--dv-accent);
  color: var(--dv-accent-ink);
}

.font-620 { font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 2px;
}

/* The documentation layout paints its main column white in light mode */
:root.dark .bg-white { background-color: var(--dv-bg); }

/* ----------------------------------------------------------- buttons */

.dv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.25rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--dv-accent);
  color: var(--dv-accent-ink);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--dv-ease), box-shadow .2s var(--dv-ease), transform .2s var(--dv-ease);
}
.dv-btn:hover {
  background: var(--dv-accent-hover);
  box-shadow: 0 0 24px var(--dv-glow);
}
.dv-btn:active { transform: translateY(1px); }

.dv-btn--ghost {
  background: transparent;
  color: rgb(var(--slate-12));
  border-color: rgb(var(--border-strong));
}
.dv-btn--ghost:hover {
  background: rgba(var(--alpha-2));
  border-color: var(--dv-accent);
  box-shadow: none;
}

.dv-btn--lg {
  height: 2.9rem;
  padding: 0 1.5rem;
  font-size: .78rem;
}

.dv-btn [class^="i-"],
.dv-btn [class*=" i-"] {
  width: 1rem;
  height: 1rem;
}

/* ------------------------------------------------------------ topbar */

.dv-topbar {
  background: var(--dv-topbar) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

.dv-brand {
  display: flex;
  flex-shrink: 0; /* longer labels ("Yardım Merkezi") must not slide under the nav */
  align-items: center;
  gap: .75rem;
}

.dv-logo {
  display: block;
  height: 22px;
  width: auto;
}
.dv-logo--on-light { display: none; }
:root:not(.dark) .dv-logo--on-dark { display: none; }
:root:not(.dark) .dv-logo--on-light { display: block; }

/* display comes from the markup's `hidden sm:inline-flex` */
.dv-tag {
  align-items: center;
  height: 1.4rem;
  padding: 0 .55rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--border-strong));
  color: rgb(var(--slate-11));
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dv-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  color: rgb(var(--slate-11));
  font-size: .875rem;
  font-weight: 500;
  transition: color .15s, background-color .15s;
}
.dv-nav-link:hover {
  color: rgb(var(--slate-12));
  background: rgba(var(--alpha-2));
}
.dv-nav-link[aria-current="page"] {
  color: rgb(var(--slate-12));
  background: rgba(var(--alpha-2));
}

/* Between md and ~1100px the topbar search, nav and language picker leave no room for it */
@media (max-width: 1099px) {
  .dv-topbar-cta { display: none; }
}

/* ----------------------------------------------------- search inputs */

#search-wrap form > div,
#search-wrap-hero form > div {
  background: var(--dv-card) !important;
  border-color: rgb(var(--border-strong)) !important;
  color: rgb(var(--slate-11)) !important;
  box-shadow: none !important;
}
#search-wrap form > div { border-radius: 999px; }
#search-wrap form > div:focus-within,
#search-wrap-hero form > div:focus-within {
  border-color: var(--dv-accent) !important;
  box-shadow: 0 0 0 4px var(--dynamic-portal-color-soft) !important;
}
#search-wrap input,
#search-wrap-hero input {
  color: rgb(var(--slate-12)) !important;
}
#search-wrap input::placeholder,
#search-wrap-hero input::placeholder {
  color: rgb(var(--slate-10)) !important;
}

#search-wrap-hero > div { max-width: none; margin: 0; }
#search-wrap-hero form > div {
  height: 3.75rem !important;
  padding-inline: 1.4rem !important;
  border-radius: 999px !important;
  box-shadow: var(--dv-shadow), 0 20px 60px -30px var(--dv-glow) !important;
}
#search-wrap-hero input { font-size: 1.05rem !important; }
#search-wrap-hero svg { color: var(--dv-accent); }

/* search result dropdowns (Vue component) */
#search-wrap [class*="shadow"]:not(form *),
#search-wrap-hero [class*="shadow"]:not(form *) {
  background: var(--dv-card) !important;
  border-color: rgb(var(--border-strong)) !important;
  border-radius: 14px;
}

/* --------------------------------------------------------------- hero */

.dv-hero {
  position: relative;
  z-index: 2; /* keeps the search dropdown above the cards below */
  border-bottom: 1px solid rgb(var(--border-weak));
  background: var(--dv-bg);
}

/* Decorations are clipped here instead of on .dv-hero, so the search dropdown can overflow the hero */
.dv-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dv-hero__glow {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(48% 46% at 18% 30%, var(--dv-glow), transparent 70%),
    radial-gradient(36% 40% at 82% 10%, var(--dynamic-portal-color-faint), transparent 70%);
  filter: blur(8px);
}

.dv-hero__grid {
  position: absolute;
  inset: 0;
  color: var(--dynamic-portal-color-faint);
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse at 30% 20%, #000 25%, transparent 75%);
}

.dv-hero__inner {
  position: relative;
  max-width: 52rem;
  padding: 4.5rem 1.5rem 4rem;
}
@media (min-width: 768px) {
  .dv-hero__inner { padding: 6rem 2.5rem 5rem; }
}

.dv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .8rem .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--border-strong));
  background: rgba(var(--alpha-1));
  color: rgb(var(--slate-11));
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dv-dot {
  position: relative;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--dv-accent);
  box-shadow: 0 0 12px var(--dv-accent);
}
@media (prefers-reduced-motion: no-preference) {
  .dv-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--dv-accent);
    animation: dv-ping 2.4s var(--dv-ease) infinite;
  }
}
@keyframes dv-ping {
  0% { transform: scale(1); opacity: .6; }
  80%, 100% { transform: scale(3); opacity: 0; }
}

.dv-hero__title {
  margin-top: 1.5rem;
  color: rgb(var(--slate-12));
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
.dv-hero__title em {
  display: inline-block;
  padding-right: .06em;
  color: var(--dv-accent);
  font-style: italic;
}

.dv-hero__sub {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: rgb(var(--slate-11));
  font-size: 1.125rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.dv-hero__search {
  position: relative;
  z-index: 30;
  max-width: 40rem;
  margin-top: 2.25rem;
}

.dv-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-size: .875rem;
}
.dv-topics__label {
  margin-right: .25rem;
  color: rgb(var(--slate-10));
}

.dv-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--border-strong));
  background: rgba(var(--alpha-1));
  color: rgb(var(--slate-11));
  transition: color .15s, border-color .15s, background-color .15s;
}
.dv-pill:hover {
  border-color: var(--dv-accent);
  color: rgb(var(--slate-12));
  background: var(--dynamic-portal-color-soft);
}

/* ------------------------------------------------------------ cards */

.dv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  border-radius: var(--dv-radius);
  border: 1px solid rgb(var(--border-weak));
  background: var(--dv-card);
  box-shadow: var(--dv-shadow);
  transition: transform .25s var(--dv-ease), border-color .25s var(--dv-ease), box-shadow .25s var(--dv-ease), background-color .25s var(--dv-ease);
}
.dv-card:hover {
  transform: translateY(-2px);
  border-color: var(--dv-accent);
  background: var(--dv-card-hover);
  box-shadow: var(--dv-shadow-hover);
}

.dv-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  border: 1px solid rgb(var(--border-weak));
  background: rgb(var(--slate-3));
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color .25s var(--dv-ease), border-color .25s var(--dv-ease);
}
.dv-card:hover .dv-card__icon {
  background: var(--dynamic-portal-color-soft);
  border-color: transparent;
}

.dv-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  margin-bottom: .8rem;
  color: rgb(var(--slate-10));
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dv-card__title {
  color: rgb(var(--slate-12));
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.dv-card__icon + .dv-card__title { margin-top: 1.1rem; font-size: 1.15rem; }

.dv-card__text {
  margin-top: .45rem;
  color: rgb(var(--slate-11));
  font-size: .875rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dv-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1.25rem;
}

.dv-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgb(var(--slate-11));
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .2s;
}
.dv-card__cta [class*="i-lucide"] { transition: transform .2s var(--dv-ease); }
.dv-card:hover .dv-card__cta { color: var(--dv-accent); }
:root:not(.dark) .dv-card:hover .dv-card__cta { color: var(--dv-violet); }
.dv-card:hover .dv-card__cta [class*="i-lucide"] { transform: translateX(3px); }

/* A lone card on the last grid row spans the row and lays out horizontally,
   so 7 categories in a 3-column grid don't leave one orphan. */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(2n + 1) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 1.1rem;
    align-items: center;
  }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(2n + 1) .dv-card__icon { grid-row: 1 / 3; }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(2n + 1) .dv-card__title { margin-top: 0; align-self: end; }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(2n + 1) .dv-card__text { align-self: start; }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(2n + 1) .dv-card__foot { grid-column: 3; grid-row: 1 / 3; padding-top: 0; margin-top: 0; }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(2n + 1) .dv-card__foot > span:empty { display: none; }
}
@media (min-width: 1024px) {
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(3n + 1) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 1.1rem;
    align-items: center;
  }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(3n + 1) .dv-card__icon { grid-row: 1 / 3; }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(3n + 1) .dv-card__title { margin-top: 0; align-self: end; }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(3n + 1) .dv-card__text { align-self: start; }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(3n + 1) .dv-card__foot { grid-column: 3; grid-row: 1 / 3; padding-top: 0; margin-top: 0; }
  .grid > .dv-card:has(.dv-card__icon):last-child:not(:first-child):nth-child(3n + 1) .dv-card__foot > span:empty { display: none; }
}

/* Section headings ("Browse by topic", "Popular articles") */
main section > header h2 {
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

/* Turkish uppercasing turns i into İ. Chatwoot leaves these headings in English on /tr
   ("TOPİC") and the eyebrow carries the brand name ("DİSTROVİBE"), so keep their case. */
:lang(tr) main section > header h2,
:lang(tr) .dv-eyebrow {
  text-transform: none;
}
:lang(tr) .dv-eyebrow { letter-spacing: .04em; font-size: .75rem; }

/* ---------------------------------------------------------- sidebar */

aside nav a.bg-n-portal-soft,
aside nav summary.text-n-portal {
  font-weight: 700;
}
:root.dark aside nav .border-n-portal { border-color: var(--dv-lime); }

/* ---------------------------------------------------------- article */

#cw-article-content {
  font-size: 1.0625rem;
  line-height: 1.75;
}
#cw-article-content :is(h1, h2, h3, h4) {
  letter-spacing: -.025em;
  font-weight: 800;
}
#cw-article-content a {
  color: var(--dv-accent) !important;
  text-decoration: underline;
  text-decoration-color: var(--dynamic-portal-color-soft);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
:root:not(.dark) #cw-article-content a { color: var(--dv-violet) !important; }
#cw-article-content a:hover { text-decoration-color: currentColor; }
#cw-article-content :is(ul, ol) > li::marker { color: var(--dv-accent); }
#cw-article-content blockquote {
  border-left: 3px solid var(--dv-accent);
  border-radius: 0 12px 12px 0;
  background: var(--dynamic-portal-color-faint);
  padding: .75rem 1.25rem;
  font-style: normal;
}
#cw-article-content code:not(pre code) {
  padding: .15em .4em;
  border-radius: 6px;
  background: rgb(var(--slate-3));
  font-size: .9em;
}
#cw-article-content code:not(pre code)::before,
#cw-article-content code:not(pre code)::after { content: none; }
#cw-article-content img { border-radius: 14px; border: 1px solid rgb(var(--border-weak)); }

/* table of contents (Vue) */
#cw-hc-toc a { transition: color .15s; }

/* ---------------------------------------------------- help CTA band */

.dv-help {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 2.5rem 1.5rem 0;
  padding: 2rem;
  border-radius: 24px;
  border: 1px solid rgb(var(--border-weak));
  background: var(--dv-card);
}
@media (min-width: 768px) {
  .dv-help { margin: 3rem 2.5rem 0; padding: 2.5rem 2.75rem; }
}
.dv-help::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 120% at 100% 0%, var(--dv-glow), transparent 60%);
}
.dv-help__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.dv-help__title {
  color: rgb(var(--slate-12));
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.dv-help__title em { color: var(--dv-accent); font-style: italic; }
.dv-help__text {
  max-width: 30rem;
  margin-top: .75rem;
  color: rgb(var(--slate-11));
  font-size: .95rem;
  line-height: 1.6;
}
.dv-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* ----------------------------------------------------------- footer */

.dv-footer {
  margin-top: auto;
  padding: 3rem 1.5rem 2rem;
  border-top: 1px solid rgb(var(--border-weak));
}
.dv-help + .dv-footer { margin-top: 3rem; }
@media (min-width: 768px) {
  .dv-footer { padding: 3.5rem 2.5rem 2rem; }
}

.dv-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 1.5rem;
}
@media (min-width: 900px) {
  .dv-footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
}

.dv-footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .dv-footer__brand { grid-column: auto; padding-right: 2rem; }
}
.dv-footer__brand .dv-logo { height: 26px; }
.dv-footer__tagline {
  max-width: 20rem;
  margin-top: 1rem;
  color: rgb(var(--slate-11));
  font-size: .875rem;
  line-height: 1.6;
}

.dv-footer__heading {
  margin-bottom: 1rem;
  color: rgb(var(--slate-12));
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dv-footer__links { display: grid; gap: .65rem; }
.dv-footer__links a {
  color: rgb(var(--slate-11));
  font-size: .875rem;
  transition: color .15s;
}
.dv-footer__links a:hover { color: var(--dv-accent); }
:root:not(.dark) .dv-footer__links a:hover { color: var(--dv-violet); }

.dv-socials { display: flex; gap: .25rem; margin-top: 1.25rem; margin-left: -.5rem; }
.dv-socials a {
  display: inline-flex;
  padding: .5rem;
  border-radius: 999px;
  color: rgb(var(--slate-10));
  transition: color .15s, background-color .15s;
}
.dv-socials a:hover { color: rgb(var(--slate-12)); background: rgba(var(--alpha-2)); }
.dv-socials [class*="i-ri-"] { display: block; width: 1.05rem; height: 1.05rem; }

.dv-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(var(--border-weak));
  color: rgb(var(--slate-10));
  font-size: .75rem;
}
.dv-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.dv-footer__bottom a { transition: color .15s; }
.dv-footer__bottom a:hover { color: rgb(var(--slate-12)); }

/* ----------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .dv-card, .dv-card:hover { transform: none; }
  .dv-btn, .dv-card, .dv-card__cta [class*="i-lucide"] { transition: none; }
}

/* ------------------------------------------------- right-to-left (Arabic) */

/* Chatwoot sets <html lang="ar"> but no dir attribute, so text would run left-to-right.
   Flip the reading content only; the sidebar and topbar keep Chatwoot's LTR layout. */
html[lang="ar"] #cw-article-content,
html[lang="ar"] main article header,
html[lang="ar"] main section > header,
html[lang="ar"] .dv-hero__inner,
html[lang="ar"] .dv-card,
html[lang="ar"] .dv-help,
html[lang="ar"] .dv-footer {
  direction: rtl;
  text-align: right;
}
html[lang="ar"] .dv-hero__title,
html[lang="ar"] .dv-help__title,
html[lang="ar"] main section > header h2 {
  text-transform: none;
  letter-spacing: 0;
}
html[lang="ar"] #cw-article-content blockquote {
  border-left: 0;
  border-right: 3px solid var(--dv-accent);
  border-radius: 12px 0 0 12px;
}
html[lang="ar"] .dv-card__cta [class*="i-lucide-arrow"] { transform: scaleX(-1); }

/* Language picker flags (topbar). 4:3 SVGs from flag-icons. */
.dv-flag {
  width: 20px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
}
.dark .dv-flag { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16); }