/* ============================================================
   Syriana Journeys — base styles ported verbatim from the
   reference design (reset, selection, scrollbar, keyframes).
   Primary/secondary brand colours are exposed as CSS variables
   so the admin "Theme colors" settings reflect on the site.
   ============================================================ */
:root{
  --sj-primary:#B8924A;   /* gold      */
  --sj-secondary:#102A25; /* deep green */
}

[x-cloak]{display:none !important}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#FBF8F2;font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;color:#211D17;-webkit-font-smoothing:antialiased}
::selection{background:#E7D4A8;color:#3D2F17}
input,textarea,select,button{font-family:inherit}
button{transition:transform .16s ease, box-shadow .22s ease, background .2s ease, opacity .18s ease, color .18s ease}
a{color:inherit;text-decoration:none;transition:color .16s ease}
select{cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D6C8B2;border-radius:8px}

@keyframes sjFade{from{opacity:0}to{opacity:1}}
@keyframes sjUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sjPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes sjSpin{to{transform:rotate(360deg)}}
@keyframes sjFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sjGlow{0%,100%{box-shadow:0 6px 18px rgba(184,146,74,.28)}50%{box-shadow:0 8px 30px rgba(184,146,74,.6)}}
@keyframes sjPulse{0%{box-shadow:0 10px 30px rgba(31,164,99,.4),0 0 0 0 rgba(31,164,99,.5)}70%{box-shadow:0 10px 30px rgba(31,164,99,.4),0 0 0 14px rgba(31,164,99,0)}100%{box-shadow:0 10px 30px rgba(31,164,99,.4),0 0 0 0 rgba(31,164,99,0)}}

/* Animation helpers (the reference applied these inline) */
.sj-fade{animation:sjFade .4s ease}
.sj-up{animation:sjUp .5s ease}
.sj-glow{animation:sjGlow 2.8s ease-in-out infinite}
.sj-float{animation:sjFloat 3.8s ease-in-out infinite}
.sj-pulse{animation:sjPulse 2.6s ease-out infinite}

/* ---- image-slot (real image upload replacing the design <image-slot>) ---- */
.sj-slot{position:relative;overflow:hidden;display:block;background-color:transparent}
.sj-slot--empty{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background-color:rgba(16,42,37,.04);
}
.sj-slot--empty::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:url('/assets/sj-pattern.png');background-size:300px;
}
.sj-slot__ph{
  position:relative;z-index:1;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.78);padding:0 12px;
  text-shadow:0 1px 8px rgba(10,28,25,.5);
}
.sj-slot--empty.on-light .sj-slot__ph{color:#9C8E78;text-shadow:none}

/* ---- Responsive header (desktop-first; collapses to a burger menu) ---- */
.sj-burger{display:none}
@media (max-width:980px){
  .sj-desktop-nav{display:none !important}
  .sj-head-cta{display:none !important}
  .sj-lang-desktop{display:none !important}
  .sj-burger{display:flex !important;align-items:center;justify-content:center}
}

/* ---- Responsive grids: collapse multi-column layouts on small screens ---- */
@media (max-width:900px){
  .sj-grid-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .sj-grid-3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .sj-grid-2{grid-template-columns:1fr !important}
  .sj-split{grid-template-columns:1fr !important}
  .sj-blog-grid{grid-template-columns:1fr !important}
  .sj-footer-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width:620px){
  .sj-grid-4{grid-template-columns:1fr !important}
  .sj-grid-3{grid-template-columns:1fr !important}
  .sj-cards-2{grid-template-columns:1fr !important}
  .sj-footer-grid{grid-template-columns:1fr !important}
  .sj-hero-h1{font-size:42px !important}
}

/* Hover utilities used across cards/buttons (grow + lift) */
.sj-lift{transition:transform .22s ease, box-shadow .22s ease}
.sj-card{transition:transform .25s, box-shadow .25s}
.sj-zoom-wrap .sj-zoom{transition:transform .55s ease}
.sj-zoom-wrap:hover .sj-zoom{transform:scale(1.09)}

/* ---- Animated hero slider ---- */
.sj-hero-bg{opacity:0;transition:opacity 1.1s ease;transform:scale(1.06);will-change:opacity,transform}
.sj-hero-bg--on{opacity:1;transform:scale(1);transition:opacity 1.1s ease, transform 7s ease}
.sj-hero-enter{opacity:0;transform:translateY(22px)}
.sj-hero-enter-active{transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}
.sj-hero-leave-active{transition:opacity .45s ease, transform .45s ease}
.sj-hero-leave-to{opacity:0;transform:translateY(-14px)}
.sj-hero-dot{transition:width .3s ease, background .3s ease}

/* ---- Scroll-reveal (progressive enhancement: armed by JS, so no-JS = visible) ---- */
.sj-reveal.sj-armed{opacity:0;transform:translateY(24px)}
.sj-reveal.sj-armed.sj-inview{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.sj-reveal.sj-armed.sj-zoomin{transform:scale(.97)}
.sj-reveal.sj-armed.sj-zoomin.sj-inview{transform:none}
/* Stagger helpers (applied to children of a revealed grid) */
.sj-stagger.sj-armed > *{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}
.sj-stagger.sj-armed.sj-inview > *{opacity:1;transform:none}
.sj-stagger.sj-armed.sj-inview > *:nth-child(2){transition-delay:.07s}
.sj-stagger.sj-armed.sj-inview > *:nth-child(3){transition-delay:.14s}
.sj-stagger.sj-armed.sj-inview > *:nth-child(4){transition-delay:.21s}
.sj-stagger.sj-armed.sj-inview > *:nth-child(5){transition-delay:.28s}
.sj-stagger.sj-armed.sj-inview > *:nth-child(6){transition-delay:.35s}

/* Generic hover polish (opt-in via class; pairs with inline handlers already in views) */
.sj-grow{transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease}
.sj-grow:hover{transform:translateY(-4px) scale(1.02)}
.sj-social:hover{box-shadow:0 8px 20px rgba(184,146,74,.32)}

@media (prefers-reduced-motion: reduce){
  .sj-reveal.sj-armed, .sj-stagger.sj-armed > *{opacity:1 !important;transform:none !important}
}