/* ══════════════════════════════════════════
   FONTS
══════════════════════════════════════════ */
html,
body,
button,
input,
select,
textarea,
.wfx-btn,
.btn {
  font-family: var(--wfx-font, 'Cairo', sans-serif) !important;
}

body { font-weight: 500; }

/* ══════════════════════════════════════════
   HEADINGS & BRAND
══════════════════════════════════════════ */
.wfx-main-content h1,
.wfx-main-content h2,
.wfx-main-content h3,
.wfx-brand-name {
  font-family: var(--wfx-font, 'Cairo', sans-serif) !important;
  letter-spacing: -0.3px;
}

/* ══════════════════════════════════════════
   ICONS
══════════════════════════════════════════ */
.wfx-fa,
.fas, .far, .fab,
.fa-solid, .fa-regular, .fa-brands {
  font-style: normal;
}

.wfx-btn i,
.btn i,
.wfx-nav-btn i,
.wfx-pages-menu-item i {
  width: 1.15em;
  text-align: center;
}

/* ══════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════ */
.grid  { display: grid; gap: 16px; }
.card  { max-width: 100%; }
.muted { color: var(--wfx-muted); }

/* ══════════════════════════════════════════
   INLINE CODE
══════════════════════════════════════════ */
code {
  padding: 3px 6px;
  border: 1px solid var(--wfx-border);
  border-radius: 6px;
  color: var(--wfx-p);
  background: color-mix(in srgb, var(--wfx-p) 8%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* ══════════════════════════════════════════
   SELECTION
══════════════════════════════════════════ */
::selection {
  color: var(--wfx-txt);
  background: color-mix(in srgb, var(--wfx-p) 55%, transparent);
}

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
.wfx-main-content * {
  scrollbar-color: color-mix(in srgb, var(--wfx-p) 32%, transparent) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar         { width: 9px; height: 9px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  background: color-mix(in srgb, var(--wfx-p) 30%, transparent);
  background-clip: padding-box;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 620px) {
  .wfx-btn,
  .btn { min-height: 46px; }

  .wfx-input,
  input,
  select,
  textarea { font-size: 16px !important; }
}