/*
  Work Academy IQ — brand fixes on top of the Imfundo theme (loaded last).

  The colour skin (colors/theme-skin-brand.css) swaps the theme's two colour
  slots for the token variables. This file carries what a colour swap cannot:
  the brand fonts, text colours that meet WCAG AA, text on the gold accent in
  ink (never gold text on white, never white text on gold), the shapes of the
  2026 design language (control radius 14, card radius 20, pills), the ink
  header strip and footer with a gold hairline, and RTL corrections.

  Every colour is a token variable from the `<style id="wa-tokens">` rule the
  (site) layout renders (@work-academy/tokens).
*/

/* --- Type and base colours ------------------------------------------------ */
body {
  font-family: var(--font-jakarta), 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--wa-text-muted);
  background-color: var(--wa-surface);
  font-size: 15px;
}
/* Every theme selector that names Open Sans, Montserrat or Roboto (style-main.css)
   gets the brand face instead; the Google Fonts import that loaded them is gone. */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.btn,
button,
input,
select,
textarea,
blockquote p,
.widget-title,
.widget .widget-title,
.sidebar .widget .widget-title,
.widget .post-title a,
.nav-tabs > li > a,
.panel-title a,
.list-group-item,
.breadcrumb,
.font-opensans,
.font-montserrat {
  font-family: var(--font-jakarta), 'Plus Jakarta Sans', system-ui, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--wa-text);
}
[dir='rtl'] body,
[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] h4,
[dir='rtl'] h5,
[dir='rtl'] h6,
[dir='rtl'] .h1,
[dir='rtl'] .h2,
[dir='rtl'] .h3,
[dir='rtl'] .h4,
[dir='rtl'] .h5,
[dir='rtl'] .h6,
[dir='rtl'] .wa-brand,
[dir='rtl'] .btn,
[dir='rtl'] button,
[dir='rtl'] input,
[dir='rtl'] select,
[dir='rtl'] textarea,
[dir='rtl'] blockquote p,
[dir='rtl'] .widget-title,
[dir='rtl'] .widget .widget-title,
[dir='rtl'] .sidebar .widget .widget-title,
[dir='rtl'] .widget .post-title a,
[dir='rtl'] .nav-tabs > li > a,
[dir='rtl'] .panel-title a,
[dir='rtl'] .list-group-item,
[dir='rtl'] .breadcrumb {
  font-family: var(--font-vazirmatn), 'Vazirmatn', 'Noto Naskh Arabic', sans-serif;
}
/* Arabic script sits lower and needs more leading than Latin at the same size. */
[dir='rtl'] body {
  line-height: 1.9;
}
/* Upper case and tracking break Arabic-script joining (same rule as mobile). */
[dir='rtl'] .text-uppercase,
[dir='rtl'] [class*='letter-space'] {
  text-transform: none !important;
  letter-spacing: normal !important;
}

a {
  color: var(--wa-primary-strong);
}
a:hover,
a:focus {
  color: var(--wa-primary-800);
}
/* The theme's greys (#808080, #999) sit under 4.5:1 on white. */
.text-gray,
.text-gray-light,
.text-gray-silver,
.text-gray-lightgray {
  color: var(--wa-text-muted) !important;
}
.bg-silver-light {
  background-color: var(--wa-bg) !important;
}
.border-1px {
  border-color: var(--wa-border) !important;
}
/* The accent is for highlights on dark ground. On light ground its text
   role goes to the primary, which clears 4.5:1. */
.bg-white .text-theme-colored2,
.bg-silver-light .text-theme-colored2,
.bg-lighter .text-theme-colored2 {
  color: var(--wa-primary-strong) !important;
}
.text-theme-colored {
  color: var(--wa-primary-strong) !important;
}

/* Keyboard focus stays visible everywhere. The theme's blanket `outline: none`
   spares :focus-visible (style-main.css), and this is the ring it shows: gold
   outside, ink inside, so it reads on white and on ink alike. A component that
   sets its own box-shadow on focus keeps the ink part with `--wa-focus-ink`
   (theme.css, home.css). `.btn` outranks Bootstrap's `.btn:focus` auto ring. */
:root {
  --wa-focus-ink: 0 0 0 5px var(--wa-ink);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--wa-accent);
  outline-offset: 2px;
  box-shadow: var(--wa-focus-ink);
}

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  border-radius: var(--wa-r-control);
  font-weight: 700;
}
.btn-round,
.btn.btn-round {
  border-radius: var(--wa-r-pill) !important;
}
.btn-theme-colored,
.btn-theme-colored:link,
.btn-theme-colored:visited {
  color: var(--wa-primary-fg) !important;
}
.btn-theme-colored2,
.btn-theme-colored2:link,
.btn-theme-colored2:visited,
.btn-theme-colored2:hover,
.btn-theme-colored2:focus,
.btn-theme-colored2:active,
.bg-theme-colored2,
.bg-theme-colored2 a,
.bg-hover-theme-colored2:hover,
.bg-hover-theme-colored2:hover * {
  color: var(--wa-ink) !important;
}
.btn-theme-colored2:hover,
.btn-theme-colored2:focus {
  background-color: color-mix(in srgb, var(--wa-accent) 85%, var(--wa-ink)) !important;
  border-color: color-mix(in srgb, var(--wa-accent) 85%, var(--wa-ink)) !important;
}
.btn-outline-brand,
.btn-outline-brand:link,
.btn-outline-brand:visited {
  border: 2px solid var(--wa-primary);
  color: var(--wa-primary-strong);
  background: transparent;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background: var(--wa-primary);
  border-color: var(--wa-primary);
  color: var(--wa-primary-fg);
}

/* Site components that sit on theme classes (.btn, .form-control). */
.btn.wa-search-btn {
  flex: 0 0 44px;
  height: 44px;
  padding: 0;
}
.btn.wa-filter-toggle {
  display: none;
  margin-bottom: 4px;
  border: 1px solid var(--wa-border-strong);
  background: var(--wa-surface);
  color: var(--wa-text);
  min-height: 44px;
}
@media (max-width: 991px) {
  .btn.wa-filter-toggle {
    display: block;
  }
}
.wa-price-card .btn-block {
  margin-top: 14px;
}
.btn-lg {
  min-height: 48px;
}

/* --- Header: ink utility strip with a gold hairline ------------------------ */
.header-top.wa-ink {
  background-color: var(--wa-ink) !important;
  border-top: 2px solid var(--wa-accent);
}
.header-top.wa-ink a,
.header-top.wa-ink .text-white {
  color: rgba(255, 255, 255, 0.86) !important;
}
.header-top.wa-ink a:hover,
.header-top.wa-ink a:focus {
  color: var(--wa-accent) !important;
}

/* --- Inner page header ------------------------------------------------------ */
/* The band itself is the site's (theme.css, .wa-inner-header); the theme's own
   overlay pseudo-elements and breadcrumb colours are switched off here. */
.inner-header.wa-inner-header .breadcrumb {
  display: none;
}

/* --- Bands -------------------------------------------------------------------- */
.bg-theme-colored {
  background-color: var(--wa-primary) !important;
}
.bg-theme-colored .text-theme-colored2 {
  color: var(--wa-accent) !important;
}

/* --- Footer: ink with a gold hairline -------------------------------------- */
.footer.wa-ink {
  background-color: var(--wa-ink) !important;
  border-top: 2px solid var(--wa-accent);
}
.footer.wa-ink .footer-bottom {
  background-color: color-mix(in srgb, var(--wa-ink) 80%, #000) !important;
}
.footer.wa-ink .widget .list li a,
.footer.wa-ink .widget.dark .list li a {
  color: rgba(255, 255, 255, 0.82);
}
.footer.wa-ink .widget .list li a:hover,
.footer.wa-ink .widget .list li a:focus {
  color: var(--wa-accent);
}
.footer.wa-ink .widget-title {
  color: #fff;
}
.footer.wa-ink .list.angle-double-right li::before {
  color: var(--wa-accent);
}
.footer.wa-ink .text-theme-colored2 {
  color: var(--wa-accent) !important;
}

/* --- Course cards ------------------------------------------------------------ */
/* The card is styled in the site's theme.css with `.course-single-item.wa-course-card`
   selectors, which outrank the theme's own `.course-single-item …` rules. */

/* --- Forms ---------------------------------------------------------------- */
.form-control {
  border-radius: var(--wa-r-control);
  border-color: var(--wa-border-strong);
  color: var(--wa-text);
  box-shadow: none;
  height: 44px;
}
/* A field in focus: the primary border and a ring (as the app's own fields).
   The class is doubled to outrank the theme's `form input[type=…]:focus`
   (0,2,2), which would leave a faint grey glow and no colour change. */
.form-control.form-control:focus {
  border-color: var(--wa-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-primary) 22%, transparent);
  color: var(--wa-text);
}
select.form-control {
  padding-inline-end: 28px;
}

/* An English document shown on a Kurdish or Arabic page keeps the Latin face. */
[dir='rtl'] [dir='ltr'].wa-legal,
[dir='rtl'] [dir='ltr'].wa-legal h3 {
  font-family: var(--font-jakarta), 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.8;
}