/* ==========================================================================
   Kargadan Branding: refinement layer (loaded after Tailwind runtime)
   Brand palette is untouched: navy #010B14 / #051321, gold #C9A227.
   Scope: typography rhythm, focus & accessibility, calmer motion, mobile ergonomics.
   ========================================================================== */

:root{
  --kg-navy:#010B14;
  --kg-navy-2:#051321;
  --kg-gold:#C9A227;
  --kg-gold-soft:#E8C547;          /* already used by the announcement bar */
  --kg-ease:cubic-bezier(.22,1,.36,1);  /* expo-out: confident, no bounce */
  --kg-header:72px;
}

/* ---- Base: no sideways scroll, crisp Persian text ---------------------- */
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  line-height:1.85;
  font-feature-settings:"kern" 1;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
::selection{background:var(--kg-gold);color:var(--kg-navy)}

/* Anchored sections clear the fixed header */
[id]{scroll-margin-top:calc(var(--kg-header) + 16px)}

/* ---- Typography: editorial hierarchy ----------------------------------- */
h1,h2,h3{line-height:1.35;text-wrap:balance;letter-spacing:0}
h1{line-height:1.25}
h4,h5,h6{line-height:1.5}
p,li{text-wrap:pretty}
main p.text-sm,section p.text-sm{font-size:.9375rem;line-height:2}
main p.text-xs,section p.text-xs{line-height:1.9}
/* Justified Persian on narrow screens creates rivers of white space */
@media (max-width:767px){
  .text-justify{text-align:start!important}
  h1.text-4xl{font-size:2.125rem}
}
/* Latin wordmark keeps its tracking; Persian never gets letter-spacing */
:lang(fa) .kg-latin{letter-spacing:.2em}

/* ---- Gold accent: solid, calm, consistent ------------------------------ */
.gold-shine{
  background:none!important;
  color:var(--kg-gold)!important;
  -webkit-text-fill-color:currentColor!important;
  animation:none!important;
}
/* Logo light sweep only on intent (hover/focus), never on a loop */
.logo-sweep::after{animation:none!important;left:-150%;transition:left 1.1s var(--kg-ease)}
.logo-sweep:hover::after,.logo-sweep:focus-visible::after{left:200%}

/* ---- Motion: subtle and meaningful ------------------------------------- */
.animate-blob{animation:none!important}
.reveal-up,.reveal-right,.reveal-left,.reveal-zoom{
  transform:translate3d(0,24px,0)!important;
  transition:opacity .9s var(--kg-ease),transform .9s var(--kg-ease)!important;
}
.reveal-up.in-view,.reveal-right.in-view,.reveal-left.in-view,.reveal-zoom.in-view{transform:none!important}
/* hover lift instead of scale jumps on interactive text */
nav a,nav button{transition:color .25s var(--kg-ease),border-color .25s var(--kg-ease),background-color .25s var(--kg-ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal-up,.reveal-right,.reveal-left,.reveal-zoom{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ---- Accessibility ------------------------------------------------------ */
.kg-skip{
  position:fixed;top:12px;right:12px;z-index:100;
  padding:.75rem 1.25rem;border-radius:.75rem;
  background:var(--kg-gold);color:var(--kg-navy);font-weight:700;font-size:.875rem;
  transform:translateY(-200%);transition:transform .3s var(--kg-ease);
}
.kg-skip:focus{transform:none;outline:2px solid #fff;outline-offset:2px}
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--kg-gold)!important;
  outline-offset:3px;
  border-radius:6px;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:1px}
main:focus{outline:none}
/* placeholder contrast on dark inputs (WCAG AA) */
input::placeholder,textarea::placeholder{color:rgb(148 163 184 / .85)}
.text-slate-500{color:rgb(139 152 172)}  /* lifts #64748b to AA on navy */

/* ---- Forms: RTL/LTR correctness ---------------------------------------- */
input[dir="ltr"]{text-align:left}
input[dir="ltr"]::placeholder{text-align:right;direction:rtl}
input[type="number"]{direction:ltr;text-align:left}
/* iOS zooms the page when inputs are smaller than 16px */
@media (max-width:767px){
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
}

/* ---- Header & mobile navigation ---------------------------------------- */
#site-nav{font-size:.8125rem}
@media (max-width:767px){
  #site-nav.flex a,#site-nav.flex button{
    min-height:48px;display:flex;align-items:center;
    padding:.75rem 1rem!important;font-size:1rem;border-radius:.75rem;
    border-bottom:1px solid rgb(255 255 255 / .05);
  }
  #site-nav.flex a[aria-current="page"]{background:rgb(201 162 39 / .08)}
}
/* comfortable touch targets for icon controls */
button,a,[role="button"]{touch-action:manipulation}
@media (pointer:coarse){
  button:has(> i.fas:only-child),button:has(> i.fab:only-child),a:has(> i.fab:only-child){min-width:44px;min-height:44px}
}

/* ---- Media: prevent layout shift & broken-image boxes ------------------- */
img[width][height]:not([class*="h-full"]):not([class*="object-"]){height:auto}

/* ---- Scrollbar: quiet, on-brand ----------------------------------------- */
@supports (scrollbar-color:auto){html{scrollbar-color:rgb(201 162 39 / .35) var(--kg-navy);scrollbar-width:thin}}