/* =========================================================
   KR — base.css (Global resets, tokens, fonts, utilities)
   ========================================================= */

/* -------------------------
   Font faces (local TTF)
   -------------------------- */
@font-face {
  font-family: "InterVar";
  src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVar";
  src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "NotoKufiArabicVar";
  src: url("../fonts/Noto_Kufi_Arabic/NotoKufiArabic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------------
   Theme tokens (Light default)
   -------------------------- */
:root {
  --kr-accent: #D0A058;
  --kr-charcoal: #181818;

  --kr-bg: #ffffff;
  --kr-text: #181818;
  --kr-muted: #5f5f5f;
  --kr-lead: rgba(24,24,24,.78);
  --kr-surface: #ffffff;
  --kr-surface-2: #f6f6f6;
  --kr-border: rgba(24,24,24,.12);
  --kr-hover: rgba(24,24,24,.06);
  --kr-shadow: 0 12px 30px rgba(0,0,0,.08);
  --kr-focus: rgba(208,160,88,.75);

  --kr-max: 1200px;
  --kr-radius: 16px;

  --kr-header-bg: rgba(255,255,255,.92);
  --kr-hero-split: rgba(208,160,88,.10);
  --kr-soft: var(--kr-surface-2);

  --kr-font-latin: "InterVar", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --kr-font-ar: "NotoKufiArabicVar","Noto Kufi Arabic",system-ui,sans-serif;

  --kr-ease: cubic-bezier(.2,.8,.2,1);
}

/* Front-page palette: set via Customizer (Front Page Colors) and output in wp_head. */

/* -------------------------
   Base / Resets
   -------------------------- */
*{ box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  color: var(--kr-text);
  background: var(--kr-bg);
  font-family: var(--kr-font-latin);
  line-height: 1.6;
  transition: background-color .25s var(--kr-ease), color .25s var(--kr-ease);
  color-scheme: light;
}
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
html[lang^="ar"] body,
body.rtl {
  font-family: var(--kr-font-ar);
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }
a:focus { outline: 2px solid var(--kr-focus); outline-offset: 3px; }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.kr-container {
  width: min(var(--kr-max), calc(100% - 2rem));
  margin-inline: auto;
}
.kr-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.kr-skip-link {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.kr-skip-link:focus {
  left: 1rem; top: 1rem;
  width: auto; height: auto;
  background: var(--kr-surface);
  border: 1px solid var(--kr-border);
  padding: .5rem .75rem;
  border-radius: 12px;
  box-shadow: var(--kr-shadow);
  z-index: 9999;
}

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

/* =========================================================
   KEYFRAMES shared (Hero film)
   ========================================================= */
@keyframes kr-hero-film {
  0% { background-position: 0% 50%; transform: translate3d(0,0,0) rotate(0.001deg); }
  50% { background-position: 100% 50%; transform: translate3d(0,-1%,0) rotate(0.001deg); }
  100% { background-position: 0% 50%; transform: translate3d(0,0,0) rotate(0.001deg); }
}

/* =========================================================
   KR — Background Marquee
   ========================================================= */
[data-kr-marquee]{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-kr-marquee] > *{
  position: relative;
  z-index: 1;
}
.kr-marquee__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  display: grid;
  align-content: center;
  gap: clamp(.65rem, 1.6vw, 1.15rem);
  padding-block: clamp(.9rem, 2.6vw, 1.7rem);

  opacity: var(--kr-marquee-opacity, .12);
  filter: saturate(1.05);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.kr-marquee__track{
  display: flex;
  width: max-content;
  white-space: nowrap;
  line-height: .9;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;

  font-size: var(--kr-marquee-size, clamp(3rem, 7vw, 7rem));
  color: var(--kr-marquee-color, rgba(208,160,88,.22));

  will-change: transform;
  animation: kr-marquee var(--kr-marquee-duration, 26s) linear infinite;
  transform: translate3d(0,0,0);
}
.kr-marquee__track--reverse{
  animation-direction: reverse;
  opacity: .8;
}
.kr-marquee__piece{
  flex: 0 0 auto;
  padding-inline: clamp(1.2rem, 3vw, 2.4rem);
}
body.kr-theme-dark .kr-marquee__track{
  color: var(--kr-marquee-color, rgba(208,160,88,.18));
  mix-blend-mode: screen;
}
body:not(.kr-theme-dark) .kr-marquee__track{
  mix-blend-mode: multiply;
}
@keyframes kr-marquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .kr-marquee__track{
    animation: none !important;
    transform: none !important;
  }
  .kr-marquee__bg{
    opacity: .08;
  }
}

/* =========================
   Page transition / loader overlay — dark, full-screen, on load
   ========================= */
.kr-page-transition{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #0a0a0c;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.kr-page-transition::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 40%, rgba(208,160,88,.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 60%, rgba(208,160,88,.03) 0%, transparent 50%);
  pointer-events: none;
}
.kr-page-transition.is-active,
.kr-page-transition.kr-page-transition--show-on-load{ opacity: 1; }

.kr-page-transition__inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Double-ring loader */
.kr-page-transition__spinner-wrap{
  position: relative;
  width: 64px;
  height: 64px;
}
.kr-page-transition__spinner{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--kr-accent, #d0a058);
  animation: krSpin 0.9s linear infinite;
}
.kr-page-transition__spinner--outer{
  inset: -4px;
  border-top-color: transparent;
  border-right-color: rgba(208,160,88,.45);
  border-bottom-color: transparent;
  border-left-color: rgba(208,160,88,.25);
  animation-duration: 1.4s;
  animation-direction: reverse;
}
.kr-page-transition__spinner--inner{
  inset: 6px;
  border-top-color: rgba(208,160,88,.9);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation-duration: 0.7s;
}
.kr-page-transition__spinner-glow{
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(208,160,88,.2), 0 0 48px rgba(208,160,88,.08);
  opacity: 0;
  animation: krLoaderPulse 2s ease-in-out infinite;
}

.kr-page-transition__label{
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  transition: opacity 0.3s ease;
}
.kr-page-transition.is-leaving .kr-page-transition__label,
.kr-page-transition.is-entering .kr-page-transition__label{
  opacity: 0.6;
}

@keyframes krSpin{ to{ transform: rotate(360deg); } }
@keyframes krLoaderPulse{ 0%, 100%{ opacity: 0; } 50%{ opacity: 1; } }