/* ===== KaraWeb Theme — Performance & A11y tuned ===== */

/* Root background/text are defined in fonts.css variables */
.bg-app{ background: var(--kw-bg); color: var(--kw-text) }

/* ========== A11y & Base Resets ========== */

/* Focus states: clear & consistent */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--kw-primary);
  outline-offset: 2px;
  transition: outline-color .15s ease;
}

/* Better link focus/hover contrast */
a{
  color: var(--kw-primary);
  text-decoration: none;
}
a:hover, a:focus-visible{
  color: var(--kw-primary-hover);
  text-decoration: underline;
}

/* Prevent image layout shift: make images block-level & constrain */
img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* Utility: skip link style (see layout) */
.visually-hidden-focusable{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible{
  position:static!important;
  width:auto!important;height:auto!important;
  padding:.5rem .75rem!important;margin:.5rem!important;
  clip:auto!important;overflow:visible!important;
  background:#fff;color:#000;border-radius:.5rem;
  box-shadow:0 0 0 .25rem rgba(255,47,85,.25);
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* JS presence hook (set in layout): remove no-js specific tweaks if needed */
.no-js .js-only{ display:none !important; }

/* ========== Header ========== */

.kw-header{
  background: linear-gradient(180deg, #0b1220 0%, #0b1220 70%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: saturate(120%) blur(4px);
}
.kw-topbar{ font-size:.875rem; color: var(--kw-text-dim) }
.kw-topbar a{ color: var(--kw-text-dim); text-decoration:none }
.kw-topbar a:hover{ color: var(--kw-text) }

.navbar-dark .navbar-nav .nav-link{
  color: var(--kw-text-dim);
  padding: .75rem .9rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.show{
  color: var(--kw-text);
}

/* ✅ Fix: Logo size in header (override generic img rule safely) */
.kw-header .navbar-brand img{
  height: 32px;
  max-height: 32px;
  width: auto;
  display: block;
}

/* ========== Hero ========== */

.kw-hero{
  background: var(--kw-bg-2);
  color: var(--kw-text);
}
.kw-hero .lead{ color: var(--kw-text-dim) }

.kw-hero .form-control{
  background-color: #121a2e;
  border-color: #1a2440;
  color: var(--kw-text);
}
.kw-hero .form-control::placeholder{ color:#8e99b2 }

.kw-hero .btn-cta{
  background: var(--kw-primary);
  border-color: var(--kw-primary);
  color: #fff;
}
.kw-hero .btn-cta:hover{
  background: var(--kw-primary-hover);
  border-color: var(--kw-primary-hover);
}

/* Make hero images high priority if tagged; otherwise lazy via HTML */
img.kw-hero-img{
  content-visibility: auto;
  contain-intrinsic-size: 1000px 560px; /* helps CLS until image is loaded; adjust to your hero aspect */
}

/* ========== Feature cards ========== */

.kw-feature{
  background:#0e172b;
  border:1px solid rgba(255,255,255,.06);
  border-radius: .75rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.kw-feature:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* ========== Footer ========== */

.kw-ribbon{
  background:#0d1527;
  color: var(--kw-text-dim);
  border-top: 1px solid rgba(255,255,255,.06);
}
footer .nav-link{ color: var(--kw-text-dim) }
footer .nav-link:hover,
footer .nav-link:focus-visible{ color: var(--kw-text) }

/* ========== Flags (Optional) ========== */
.flag-circle{
  width: 18px; height: 18px;
  border-radius:50%;
  object-fit:cover;
  display:inline-block;
  vertical-align:middle;
}

/* ========== Badges ========== */
.badge-soft{
  background: rgba(255,255,255,.06);
  color: var(--kw-text);
  border: 1px solid rgba(255,255,255,.08);
}

/* ========== Buttons (Generic helpers) ========== */
.btn-ghost{
  background: transparent;
  color: var(--kw-text);
  border:1px solid rgba(255,255,255,.2);
}
.btn-ghost:hover, .btn-ghost:focus-visible{
  border-color: rgba(255,255,255,.4);
  color: #fff;
}

/* ========== Containers & spacing tweaks (optional) ========== */
.section{ padding-block: 3rem; }
.section-sm{ padding-block: 1.5rem; }
.section-lg{ padding-block: 5rem; }

.container-narrow{ max-width: 860px; margin-inline: auto; }

/* RTL adjustments for Bootstrap utilities (only small fixes if needed) */
html[dir="rtl"] .me-auto{ margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .ms-auto{ margin-right: 0 !important; margin-left: auto !important; }