/*
 * KII modern theme layer. Loaded AFTER the original Elementor stylesheets.
 * Rule of thumb: refine (colour, type, radius, shadow, focus, spacing inside components),
 * never move sections. Legacy colours in the Elementor CSS are already mapped to these
 * tokens at import time (config/brand-color-map.json).
 */

/* Tokens live in /kii/kii-tokens.css (loaded before the original stylesheets). */

/* ------------------------------------------------------- base & type */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 120px;
  overflow-x: clip;
}
body.kii-site {
  background: var(--kii-surface);
  color: var(--kii-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Arabic & Sorani: Poppins has no Arabic glyphs; use a good system Arabic face and a looser line height. */
:lang(ar) body.kii-site,
:lang(ckb) body.kii-site,
:lang(ar) .kii-site :is(p, li, h1, h2, h3, h4, h5, h6, a, span, label, input, textarea, select, button),
:lang(ckb) .kii-site :is(p, li, h1, h2, h3, h4, h5, h6, a, span, label, input, textarea, select, button) {
  font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Geeza Pro', 'Poppins', sans-serif;
}
:lang(ar) .elementor-widget-text-editor,
:lang(ckb) .elementor-widget-text-editor {
  line-height: 1.9;
}
.elementor-widget-text-editor {
  line-height: 1.7;
}
.elementor-widget-text-editor p {
  margin-block-end: 0.9em;
}
.elementor-heading-title {
  text-wrap: balance;
}
.elementor-widget-text-editor a,
.elementor-widget-text-editor a:visited {
  color: var(--kii-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.elementor-widget-text-editor a:hover {
  color: var(--kii-blue-deep);
  text-decoration-thickness: 2px;
}
::selection {
  background: var(--kii-yellow);
  color: var(--kii-ink);
}

/* -------------------------------------------------------------- focus */
.kii-site :focus-visible {
  outline: 3px solid var(--kii-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.kii-site .elementor-location-header :focus-visible,
.kii-site .elementor-location-footer :focus-visible,
.kii-site .kii-popup :focus-visible {
  outline-color: var(--kii-yellow);
}
#main:focus {
  outline: none;
}

/* ------------------------------------------------------------- header */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
}
/* Elementor's JS sticky placeholder is not used. */
.elementor-location-header .elementor-sticky__spacer {
  display: none !important;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item {
  border-radius: var(--kii-radius-sm);
  transition: color 0.2s var(--kii-ease), background-color 0.2s var(--kii-ease);
}
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-item:focus-visible {
  color: var(--kii-yellow) !important;
  fill: var(--kii-yellow) !important;
}
/* Selected navigation state: brand blue */
/* A compact pill centred on the label (the link itself is as tall as the header bar). */
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
.kii-popup .elementor-nav-menu .elementor-item.elementor-item-active {
  background: linear-gradient(var(--kii-blue), var(--kii-blue)) center / 100% 2.3em no-repeat !important;
  color: #fff !important;
}
.elementor-location-header .elementor-nav-menu a[aria-disabled='true'] {
  cursor: default;
}
/* Polylang language links: current language highlighted */
.kii-site a[data-locale-link][aria-current='true'] {
  color: var(--kii-yellow) !important;
  font-weight: 600;
}
.elementor-search-form__container {
  border-radius: var(--kii-radius-sm) !important;
  overflow: hidden;
}
.elementor-search-form__input:focus {
  box-shadow: inset 0 0 0 2px var(--kii-blue) !important;
}
/* Burger dropdown */
.elementor-menu-toggle {
  border-radius: var(--kii-radius-sm);
  cursor: pointer;
}
.elementor-nav-menu--dropdown a {
  transition: background-color 0.15s, color 0.15s;
}
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a.elementor-item-active {
  background-color: var(--kii-blue) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------ buttons */
.kii-site .elementor-button,
.kii-site .elementor-kit-10 .elementor-button,
.kii-site .wpforms-submit,
.kii-site .wpforms-page-button,
.kii-site .elementor-cta__button,
.kii-site .e-form__buttons button {
  border-radius: var(--kii-radius) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: var(--kii-shadow-sm);
  transition:
    background-color 0.2s var(--kii-ease),
    color 0.2s var(--kii-ease),
    border-color 0.2s var(--kii-ease),
    box-shadow 0.2s var(--kii-ease),
    transform 0.2s var(--kii-ease);
}
.kii-site .elementor-button:hover,
.kii-site .wpforms-submit:hover,
.kii-site .wpforms-page-button:hover,
.kii-site .elementor-cta__button:hover {
  box-shadow: var(--kii-shadow);
  transform: translateY(-1px);
}
/* Kit button: blue fill; hover keeps the original "outline" idea but in brand blue. */
.kii-site.elementor-kit-10 .elementor-button,
.elementor-kit-10 .kii-site .elementor-button {
  background-color: var(--kii-blue);
  border-color: var(--kii-blue);
  color: #fff;
}
.elementor-kit-10.kii-site .elementor-button:hover,
.elementor-kit-10.kii-site .elementor-button:focus-visible {
  background-color: var(--kii-blue-deep);
  border-color: var(--kii-blue-deep);
  color: #fff;
}
.kii-site .elementor-button:active {
  transform: translateY(0);
}

/* --------------------------------------------------- images & cards */
.kii-site .elementor-widget-image img {
  border-radius: var(--kii-radius);
}
.elementor-location-header .elementor-widget-image img,
.elementor-location-footer .elementor-widget-image img,
.elementor-widget-theme-site-logo img {
  border-radius: 0;
}
.kii-site .elementor-cta {
  border-radius: var(--kii-radius-lg);
  overflow: hidden;
  box-shadow: var(--kii-shadow);
  transition: box-shadow 0.25s var(--kii-ease), transform 0.25s var(--kii-ease);
}
.kii-site .elementor-cta:hover {
  box-shadow: var(--kii-shadow-lg);
  transform: translateY(-3px);
}
.kii-site .elementor-cta__title {
  text-wrap: balance;
}
.kii-site .elementor-post__card {
  border-radius: var(--kii-radius) !important;
  box-shadow: var(--kii-shadow-sm);
  transition: box-shadow 0.2s var(--kii-ease);
}
.kii-site .elementor-post__card:hover {
  box-shadow: var(--kii-shadow);
}
.kii-site .elementor-post__read-more {
  color: var(--kii-blue) !important;
  font-weight: 600;
}
.kii-site .elementor-post__title a:hover {
  color: var(--kii-blue) !important;
}
.kii-site .elementor-pagination .page-numbers.current {
  color: var(--kii-green-deep) !important;
}
.kii-site .elementor-social-icon {
  border-radius: var(--kii-radius-sm);
  transition: transform 0.2s var(--kii-ease), opacity 0.2s;
}
.kii-site .elementor-social-icon:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}
.kii-site .elementor-icon-list-icon i,
.kii-site .elementor-icon-list-icon svg {
  transition: color 0.2s;
}

/* -------------------------------------------------------------- footer */
/* Accent links on the dark footer: blue would fail contrast there, so use light text + yellow hover. */
.elementor-location-footer a {
  transition: color 0.2s var(--kii-ease);
}
.elementor-location-footer a:not(.elementor-social-icon):not(.elementor-button) {
  color: #e8edf7;
}
.elementor-location-footer a:not(.elementor-social-icon):not(.elementor-button):hover {
  color: var(--kii-yellow);
}
.elementor-location-footer .footer-menu dt a {
  display: inline-block;
  padding-block: 2px;
}

/* --------------------------------------------------------------- forms */
.kii-site .elementor-field-group .elementor-field-textual,
.kii-site .wpforms-form input:not([type='radio']):not([type='checkbox']):not([type='file']):not([type='hidden']),
.kii-site .wpforms-form select,
.kii-site .wpforms-form textarea {
  border-radius: var(--kii-radius-sm) !important;
  border: 1px solid #b9c1ce;
  background-color: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.kii-site .elementor-field-group .elementor-field-textual:focus,
.kii-site .wpforms-form :is(input, select, textarea):focus {
  border-color: var(--kii-blue) !important;
  box-shadow: 0 0 0 3px rgb(31 75 193 / 0.2) !important;
  outline: none;
}
.kii-site [aria-invalid='true'] {
  border-color: #b42318 !important;
}
.kii-field-error,
.kii-site .wpforms-form em.wpforms-error {
  display: block;
  color: #b42318;
  font-size: 0.875rem;
  font-style: normal;
  margin-top: 4px;
}
.kii-field-error:empty {
  display: none;
}
.kii-form-status {
  margin-top: 12px;
  font-weight: 500;
  color: var(--kii-green-deep);
}
.kii-form-status:empty {
  display: none;
}
.kii-hp {
  /* Spam trap: invisible without a large offset (a -10000px offset breaks right-to-left pages). */
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* WPForms application form */
.kii-site .wpforms-page-indicator-page-progress {
  background-color: var(--kii-blue) !important;
  border-radius: 999px;
  transition: width 0.3s var(--kii-ease);
}
.kii-site .wpforms-page-indicator-page-progress-wrap {
  border-radius: 999px;
  overflow: hidden;
}
.kii-site .wpforms-form .wpforms-page-button,
.kii-site .wpforms-form .wpforms-submit {
  background-color: var(--kii-blue) !important;
  border-color: var(--kii-blue) !important;
  color: #fff !important;
  padding: 10px 22px;
}
.kii-site .wpforms-form .wpforms-page-prev {
  background-color: #fff !important;
  color: var(--kii-blue) !important;
}
.kii-site .wpforms-form .wpforms-page-button:hover,
.kii-site .wpforms-form .wpforms-submit:hover {
  background-color: var(--kii-blue-deep) !important;
  color: #fff !important;
}
.kii-site .wpforms-form select[multiple] {
  min-height: 9em;
}
.kii-site .wpforms-uploader {
  position: relative;
  border-radius: var(--kii-radius) !important;
  border: 2px dashed #b9c1ce !important;
  background: var(--kii-surface-alt) !important;
  transition: border-color 0.15s, background-color 0.15s;
}
.kii-site .wpforms-uploader:hover,
.kii-site .wpforms-uploader:focus-within {
  border-color: var(--kii-blue) !important;
  background: var(--kii-blue-tint) !important;
}
.kii-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.kii-file-name {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  color: var(--kii-green-deep);
  text-align: center;
}
.kii-site .wpforms-field-repeater-display-blocks-buttons button {
  color: var(--kii-blue);
}

/* --------------------------------------------- popups (no Elementor JS) */
body > [data-elementor-type='popup']:not(.kii-popup-ready) {
  display: none !important;
}
.kii-popup[hidden] {
  display: none !important;
}
.kii-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kii-popup .dialog-widget-content {
  pointer-events: all;
  box-shadow: var(--kii-shadow-lg);
}
/* Visibility of the close button stays per popup (Elementor setting); only its look is refined. */
.kii-popup .dialog-close-button {
  position: absolute;
  z-index: 2;
  top: 8px;
  inset-inline-end: 8px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
body.kii-popup-open {
  overflow: hidden;
}

/* ----------------------------------- slides, slideshows, background video */
.kii-slides {
  position: relative;
}
.kii-slides .swiper-wrapper {
  display: grid !important;
  transform: none !important;
}
.kii-slides .swiper-slide {
  grid-area: 1 / 1;
  width: 100% !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--kii-ease), visibility 0.6s;
}
.kii-slides .swiper-slide.kii-slide-active {
  opacity: 1;
  visibility: visible;
}
.kii-slides-dots {
  position: absolute;
  bottom: 14px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}
.kii-slides-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.55);
  cursor: pointer;
}
.kii-slides-dots button[aria-current='true'] {
  background: var(--kii-yellow);
}
.kii-bg-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.kii-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: bottom center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.kii-bg-slide.kii-slide-active {
  opacity: 1;
}
.kii-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* ------------------------------------------ animations without Elementor JS */
html:not(.js) .elementor-invisible {
  visibility: visible !important;
}

/* ---------------------------------------------------------- utilities */
.kii-skip-link {
  position: fixed;
  inset-inline-start: 8px;
  top: -100px;
  z-index: 10000;
  padding: 8px 16px;
  border-radius: var(--kii-radius-sm);
  background: var(--kii-blue);
  color: #fff !important;
  font-weight: 600;
}
.kii-skip-link:focus {
  top: 8px;
}
.kii-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kii-build-banner {
  background: var(--kii-ink);
  color: #fff;
  font: 12px/1.6 ui-monospace, Consolas, monospace;
  text-align: center;
  padding: 4px 12px;
}
.kii-search-status {
  margin: 16px auto;
  max-width: 1415px;
  padding-inline: 16px;
  font-weight: 500;
}
.kii-404-notices {
  max-width: 900px;
  margin: 0 auto 64px;
  padding-inline: 16px;
}
.kii-404-notice {
  border-top: 1px solid var(--kii-line);
  padding-block: 24px;
}
.kii-404-notice h2 {
  font-size: 1.5rem;
  margin: 0 0 8px;
  color: var(--kii-blue);
}
.kii-404-notice a {
  color: var(--kii-blue);
  font-weight: 600;
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 767px) {
  .kii-site .elementor-button {
    min-height: 44px; /* touch target */
  }
  .elementor-location-header .elementor-menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .elementor-nav-menu--dropdown a {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kii-site *,
  .kii-site *::before,
  .kii-site *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Post thumbnails: Elementor fitted them with JavaScript (elementor-fit-height); object-fit does the same in CSS. */
.kii-site .elementor-posts-container .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  top: 0;
  left: 0;
}