/* ==========================================================================
   Strix — components.css
   Shared component styling: keyframes, interactive/hover/focus states,
   responsive breakpoints, footer motion, and media utilities.
   Base reset & tokens live in base.css (loaded first).
   ========================================================================== */

  @keyframes strixMarquee{ from{ transform:translateX(0);} to{ transform:translateX(50%);} }
  @keyframes strixPulse{ 0%,100%{ opacity:.5;} 50%{ opacity:1;} }
  @keyframes strixFloat{ 0%{ transform:translate(0,0);} 50%{ transform:translate(12px,-22px);} 100%{ transform:translate(0,0);} }
  @keyframes strixSpin{ from{ transform:translate(-50%,-50%) rotate(0deg);} to{ transform:translate(-50%,-50%) rotate(360deg);} }
  .cta-field{ transition:border-color .2s,box-shadow .2s,background .2s; text-align:right; }
  .cta-field::placeholder{ text-align:right; }
  .step-card{ transition:transform .35s cubic-bezier(.16,.8,.24,1),background .35s; }
  .step-card:hover{ transform:translateY(-8px);background:rgba(47,212,190,.045); }
  .step-card:hover .step-badge{ border-color:var(--accent,#2FD4BE) !important;box-shadow:0 0 22px -4px rgba(47,212,190,.55); }
  .proj-card{ transition:transform .4s cubic-bezier(.16,.8,.24,1),border-color .4s,box-shadow .4s; }
  /* transform is !important for the same reason border-color is: these cards are
     scroll-reveal targets, so GSAP leaves an inline transform behind when the
     reveal lands and an inline value outranks any plain stylesheet rule. */
  .proj-card:hover{ transform:translateY(-6px) !important;border-color:rgba(47,212,190,.45) !important;box-shadow:0 24px 50px -28px rgba(0,0,0,.9); }

  /* svcMarquee and svcSpin were byte-for-byte copies of strixMarquee / strixSpin
     above; the two call sites now use those. Only the float differs (10/-18). */
  @keyframes svcFloat{ 0%{ transform:translate(0,0);} 50%{ transform:translate(10px,-18px);} 100%{ transform:translate(0,0);} }
  .svc-tile{ transition:transform .4s cubic-bezier(.16,.8,.24,1),border-color .4s,background .4s,box-shadow .4s; }
  .svc-tile:hover{ transform:translateY(-6px) !important; border-color:var(--tile-accent,var(--accent)) !important; box-shadow:0 26px 54px -30px rgba(0,0,0,.9); }
  .svc-tile:hover .svc-ico{ transform:scale(1.06) rotate(-3deg); }
  .svc-ico{ transition:transform .4s cubic-bezier(.16,.8,.24,1); }
  .cmp-card{ transition:transform .4s cubic-bezier(.16,.8,.24,1),border-color .4s; }
  .life-step:hover .life-node{ box-shadow:0 0 26px -4px var(--accent); border-color:var(--accent) !important; }

  @keyframes abFloat{ 0%{ transform:translate(0,0);} 50%{ transform:translate(9px,-16px);} 100%{ transform:translate(0,0);} }
  @keyframes abFloat2{ 0%{ transform:translate(0,0);} 50%{ transform:translate(-11px,-12px);} 100%{ transform:translate(0,0);} }
  /* abSpin was a third copy of strixSpin — .about-orbit uses that one now. */
  @keyframes abPulse{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06);} }
  .val-tile{ transition:transform .4s cubic-bezier(.16,.8,.24,1),border-color .4s,box-shadow .4s; }
  .val-tile:hover{ transform:translateY(-6px) !important; border-color:var(--tile-accent,var(--accent)) !important; box-shadow:0 26px 54px -30px rgba(0,0,0,.9); }
  .val-tile:hover .val-ico{ transform:scale(1.07) rotate(-3deg); }
  .val-ico{ transition:transform .4s cubic-bezier(.16,.8,.24,1); }

  /* Tile shell + icon plate — was a full inline style="" on every tile the
     services and about pages render. Only --tile-accent / --ico-* stay inline. */
  .svc-tile,.val-tile{
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    background:#0E1116;
    display:flex;
    flex-direction:column;
    gap:.7rem;
  }
  .svc-tile{ padding:1.6rem; }
  .val-tile{ padding:1.8rem; }
  .svc-ico,.val-ico{
    border-radius:12px;
    border-width:1px;
    border-style:solid;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .svc-ico{ width:46px;height:46px; }
  .val-ico{ width:48px;height:48px; }

  /* Floating hero chips (services + about) — identical shells; each page's
     sheet supplies only the per-chip berth and drift. */
  .svc-chip,.ab-chip{
    position:absolute;
    display:flex;
    align-items:center;
    gap:.5rem;
    background:#0E1116;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    padding:.55rem 1rem;
    font-size:1rem;
    color:#C3C9D4;
    z-index:3;
  }
  /* The coloured status dot inside a chip or tag — only its fill is editable. */
  .strix-dot{ width:8px;height:8px;border-radius:50%; }
  .strix-dot-sm{ width:7px;height:7px;border-radius:50%; }

  input,textarea{ font-family:'Fredoka',sans-serif; text-align:right; }
  input::placeholder,textarea::placeholder{ text-align:right; }
  /* single source of truth for field focus — an earlier duplicate of this
     selector set outline:none and was fully overridden except its box-shadow,
     which is folded in here. */
  input:focus,textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent !important; box-shadow:0 0 0 3px rgba(47,212,190,.14); }

.foot-social{ transition:all .25s ease; }
.foot-social:hover{ border-color:var(--accent) !important; color:var(--accent) !important; transform:translateY(-3px); box-shadow:0 10px 26px -12px rgba(47,212,190,.6); }


/* ==========================================================================
   Footer — ambient motion & floating decor (was inline <style> in footer.php)
   ========================================================================== */
/* The existing .foot-dot / aurora bar referenced footDrift + footAurora, which were
         never defined anywhere — so they sat frozen. Defining them here brings them to life. */
      @keyframes footDrift { 0%,100% { transform:translate3d(0,0,0); opacity:.45; } 50% { transform:translate3d(0,-14px,0); opacity:1; } }
      @keyframes footAurora { 0% { background-position:0% 50%; } 100% { background-position:200% 50%; } }
      @keyframes footOrb   { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(18px,-24px,0) scale(1.12); } }
      @keyframes footFloat { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(10px,-20px,0) rotate(8deg); } }
      @keyframes footFloat2{ 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(-14px,-17px,0) rotate(-10deg); } }
      @keyframes footSpin  { to { transform:rotate(360deg); } }

      .foot-float { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
      .foot-float .ff-orb   { position:absolute; border-radius:50%; filter:blur(14px); will-change:transform; }
      .foot-float .ff-shape { position:absolute; height:auto; will-change:transform; }
      .foot-float .ff-ring  { position:absolute; border-radius:50%; border-width:1px; border-style:solid; will-change:transform; }
      .foot-float .ff-plus  { position:absolute; width:14px; height:14px; }
      .foot-float .ff-plus::before, .foot-float .ff-plus::after { content:''; position:absolute; background:rgba(47,212,190,.5); }
      .foot-float .ff-plus::before { left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
      .foot-float .ff-plus::after  { top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
      /* small screens stay uncluttered — orbs only; the rest joins in from 64em */
      .foot-float .ff-shape, .foot-float .ff-ring, .foot-float .ff-plus { display:none; }
      .foot-float .ff-orb { opacity:.6; }

@keyframes strixWaPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}}


/* ==========================================================================
   Article cards — one shell for every post card in the theme: the home
   "מאמרים" row, the blog archive, single.php's "עוד בנושא" and the landing
   onward-nav. Three views render it from their own loops and one from
   template-parts/related-cards.php, so the shell lives here (loaded
   everywhere) instead of being copied into each per-view sheet.
   ========================================================================== */
.strix-related-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}

.strix-related-card{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  background:#0E1116;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding-block:1.4rem;
  padding-inline:1.35rem;
  color:inherit;
  text-decoration:none;
  transition:border-color .2s, transform .2s;
}
/* transform is !important because these cards are scroll-reveal targets: GSAP
   leaves an inline transform behind when the reveal lands, and an inline value
   outranks any plain stylesheet rule. */
.strix-related-card:hover{
  border-color:color-mix(in srgb, var(--la,#2FD4BE) 45%, transparent);
  transform:translateY(-3px) !important;
}
.strix-related-card:focus-visible{
  outline:2px solid var(--la,var(--accent,#2FD4BE));
  outline-offset:3px;
}
.strix-related-card-title{
  font-size:1.1rem;
  font-weight:600;
  color:#ECEFF4;
  margin:0;
  line-height:1.35;
  transition:color .2s;
}
.strix-related-card:hover .strix-related-card-title,
.strix-related-card:focus-visible .strix-related-card-title{
  color:var(--la,var(--accent,#2FD4BE));
}
/* Featured image bleeds to the card edges: negative margins cancel the card
   padding, and the flex gap alone spaces it off the heading. The accent tint
   shows through whenever the post has no image of its own. */
.strix-related-card-media{
  display:block;
  overflow:hidden;
  margin-block-start:-1.4rem;
  margin-inline:-1.35rem;
  border-start-start-radius:15px;
  border-start-end-radius:15px;
  aspect-ratio:16 / 9;
  background:linear-gradient(135deg, color-mix(in srgb, var(--la,#2FD4BE) 16%, #0E1116), #0E1116);
}
.strix-related-card-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}
.strix-related-card:hover .strix-related-card-media img{
  transform:scale(1.04);
}
/* Capped at three lines so a row of cards stays even — the browser puts the
   ellipsis in itself, and short blurbs get none. */
.strix-related-card-desc{
  font-size:.98rem;
  line-height:1.65;
  color:#B9C0CE;
  margin:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}
/* Pinned to the card foot so the cue lines up across a row of uneven cards. */
.strix-related-card-cue{
  margin-block-start:auto;
  padding-block-start:.9rem;
  color:var(--la,var(--accent,#2FD4BE));
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:600;
  font-size:.95rem;
  transition:transform .2s;
}
.strix-related-card-cue svg{
  display:block;
}
/* Nudges towards the start edge — the icon already points RTL-forward. */
.strix-related-card:hover .strix-related-card-cue{
  transform:translateX(-4px);
}


/* ==========================================================================
   Shared media utilities (cover images / illustrations)
   ========================================================================== */
.strix-media-cover{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top; }
.strix-media-cover-plain{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }


/* ==========================================================================
   Page shell primitives — the centred column, breadcrumb, eyebrow, CTA pair
   and hero decor, each of which every per-view sheet used to spell out in
   full. Per-view sheets load after this one and now carry only their deltas.
   One-off variants (faq, 404, landing, projects CTA) keep their own rule.
   ========================================================================== */

/* --- Centred content column --- */
.home-container,.home-hero-inner,.home-faq-inner,.home-contact-inner,
.about-hero-container,.about-statement-container,.about-container,.about-cta-container,
.services-hero-container,.services-pillars-container,.services-lifecycle-container,
.services-why-container,.services-cta-container,
.contact-container,.faq-container,
.projects-hero-inner,.projects-container,.projects-cta-inner,
.thank-you-inner{
  margin:0 auto;
  padding-inline:clamp(1.25rem,5vw,3.5rem);
}

/* --- Breadcrumb --- */
.about-breadcrumb,.services-breadcrumb,.contact-breadcrumb,.faq-breadcrumb,
.projects-breadcrumb,.single-breadcrumb,.landing-breadcrumb{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#8A93A6;
  margin-bottom:2rem;
}
.about-breadcrumb,.services-breadcrumb{ font-size:1rem; }
.contact-breadcrumb,.faq-breadcrumb,.projects-breadcrumb{ font-size:.9rem;color:#6B7383; }
.single-breadcrumb{ font-size:.95rem;margin-bottom:1.6rem; }
.landing-breadcrumb{ flex-wrap:wrap;gap:.4rem;font-size:.85rem;margin-bottom:1.6rem; }

.about-breadcrumb-link,.services-breadcrumb-link,.contact-breadcrumb-link,
.faq-breadcrumb-link,.projects-breadcrumb-link,.single-breadcrumb-link,
.landing-breadcrumb-link{ color:#8A93A6; }

.about-breadcrumb-current,.services-breadcrumb-current,.contact-breadcrumb-current,
.faq-breadcrumb-current,.projects-breadcrumb-current,.single-breadcrumb-current{ color:#C3C9D4; }
.landing-breadcrumb-current{ color:#ECEFF4; }

/* --- Eyebrow (the small uppercase kicker above every section heading) --- */
.home-hero-eyebrow,.home-eyebrow,.home-about-eyebrow,.home-faq-eyebrow,.home-contact-eyebrow,
.about-eyebrow,.about-section-eyebrow,.about-cta-eyebrow,
.services-hero-eyebrow,.services-section-eyebrow,.services-why-eyebrow,.services-cta-eyebrow,
.thank-you-eyebrow,.landing-eyebrow{
  font-family:'Fredoka',sans-serif;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent,#2FD4BE);
  margin-bottom:1rem;
}
/* Hero eyebrows sit on one line beside their leading rule/dot. */
.home-hero-eyebrow,.about-eyebrow,.services-hero-eyebrow,.thank-you-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
}
/* Section eyebrows are start-aligned inside the RTL column. */
.home-eyebrow,.home-about-eyebrow,.about-section-eyebrow,.services-section-eyebrow{ text-align:right; }
/* Per-view deltas. */
.home-hero-eyebrow,.home-eyebrow,.home-about-eyebrow,.home-faq-eyebrow,.home-contact-eyebrow{ font-size:.74rem; }
.home-hero-eyebrow{ margin-bottom:1.6rem; }
.home-about-eyebrow{ color:#0f766e; }
.home-contact-eyebrow,.about-cta-eyebrow,.services-cta-eyebrow{ margin-bottom:1.4rem; }
.about-eyebrow,.services-hero-eyebrow{ margin-bottom:1.5rem; }
.thank-you-eyebrow{ font-size:.8rem;margin-bottom:1.3rem; }
.landing-eyebrow{ font-size:.82rem;letter-spacing:.18em; }

/* --- CTA buttons --- */
.home-hero-cta-primary,.about-hero-cta-primary,.about-cta-primary,
.services-hero-cta-primary,.services-cta-primary,.thank-you-cta-primary{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--accent,#2FD4BE);
  color:#04140F;
  font-weight:700;
  border-radius:999px;
  transition:transform .25s,box-shadow .25s;
}
.home-hero-cta-secondary,.about-hero-cta-secondary,.about-cta-secondary,
.services-hero-cta-secondary,.services-cta-secondary,.thank-you-cta-secondary{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid rgba(255,255,255,.18);
  color:#ECEFF4;
  font-weight:600;
  border-radius:999px;
  transition:border-color .25s,background .25s;
}
/* Sizes — the only thing that ever differed between views. */
.home-hero-cta-primary{ font-size:1.05rem;padding:.95rem 1.7rem; }
.home-hero-cta-secondary{ font-size:1.05rem;padding:.95rem 1.6rem; }
.about-hero-cta-primary,.services-hero-cta-primary{ font-size:1.08rem;padding:.95rem 1.7rem; }
.about-hero-cta-secondary,.services-hero-cta-secondary{ font-size:1.08rem;padding:.95rem 1.6rem; }
.about-cta-primary,.services-cta-primary{ font-size:1.1rem;padding:1rem 1.9rem; }
.about-cta-secondary,.services-cta-secondary{ font-size:1.1rem;padding:1rem 1.7rem; }
.thank-you-cta-primary{ font-size:1.08rem;padding:.95rem 1.9rem; }
.thank-you-cta-secondary{ font-size:1.08rem;padding:.95rem 1.7rem; }

/* --- Hero decor: the ambient glow blob and the masked grid overlay --- */
.home-hero-glow,.home-contact-glow,
.about-hero-glow,.about-statement-glow,.about-cta-glow,
.services-hero-glow,.services-lifecycle-glow,.services-cta-glow,
.contact-hero-glow,.thank-you-hero-glow,.landing-hero-glow,.landing-cta-glow{
  position:absolute;
  pointer-events:none;
}
.about-hero-grid-overlay,.services-hero-grid-overlay,.thank-you-grid-overlay,
.projects-hero-grid,.e404-grid-overlay{
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
}
.projects-hero-grid,.e404-grid-overlay{
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
}


/* ==========================================================================
   Interactive states. Each was an inline onmouseover/onmouseout pair on the
   markup — 29 of them across 11 templates, none reachable by keyboard. The
   transition they animate against is declared on the element's own rule.
   ========================================================================== */

/* :is(…):is(:hover,:focus-visible) keeps the (0,2,0) specificity a plain
   .class:hover has, which is what lets these outrank base.css's a:hover. */

/* Accent-filled buttons: lift + accent shadow. */
:is(.home-hero-cta-primary,.about-hero-cta-primary,.services-hero-cta-primary,
    .thank-you-cta-primary):is(:hover,:focus-visible){
  transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(47,212,190,.65);
}
:is(.about-cta-primary,.services-cta-primary):is(:hover,:focus-visible){
  transform:translateY(-2px);box-shadow:0 16px 36px -14px rgba(47,212,190,.65);
}
.home-contact-submit:is(:hover,:focus-visible){
  transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(47,212,190,.6);
}
.site-footer-submit:is(:hover,:focus-visible){
  transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(47,212,190,.6);
}
.site-header-cta:is(:hover,:focus-visible){
  transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(47,212,190,.6);
}
/* Lift only — these carry no shadow in their resting state. */
:is(.home-about-cta,.contact-submit,.projects-cta-lg):is(:hover,:focus-visible){
  transform:translateY(-2px);
}

/* Outlined buttons — three tints, matching what each view asked for inline. */
:is(.home-hero-cta-secondary,.about-hero-cta-secondary,
    .services-hero-cta-secondary):is(:hover,:focus-visible){
  border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03);
}
:is(.about-cta-secondary,.services-cta-secondary,
    .thank-you-cta-secondary):is(:hover,:focus-visible){
  border-color:var(--accent,#2FD4BE);background:rgba(47,212,190,.06);
}
:is(.faq-cta-secondary,.e404-cta-secondary):is(:hover,:focus-visible){
  border-color:var(--accent,#2FD4BE);background:rgba(255,255,255,.03);
}

/* Contact rows, footer links, burger and the WhatsApp bubble. */
.contact-method:is(:hover,:focus-visible){ border-color:rgba(47,212,190,.45); }
:is(.site-footer-contact-link,.site-footer-nav-link):is(:hover,:focus-visible){ color:#fff; }
.site-header-burger:hover{ border-color:var(--accent,#2FD4BE);background:rgba(255,255,255,.08); }
.site-footer-wa-float:is(:hover,:focus-visible){
  transform:scale(1.08);box-shadow:0 12px 30px -6px rgba(37,211,102,.75);
}


/* ==========================================================================
   Breakpoints — one block per breakpoint, ascending
   ========================================================================== */
@media (min-width: 40em){
  .strix-related-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width: 64em){
  /* The sheet is opened by setting an inline display:flex (strix-theme.js), so
     forcing it shut on desktop needs !important to outrank that inline style. */
  #mobile-sheet{ display:none !important; }
  .strix-related-grid{ grid-template-columns:repeat(3,1fr); }
  /* Footer decor — small screens stay uncluttered (orbs only); the rest joins in here. */
  .foot-float .ff-shape, .foot-float .ff-ring, .foot-float .ff-plus { display:block; }
  .foot-float .ff-orb { opacity:1; }
}


/* ==========================================================================
   Feature queries — last on purpose. Reduced-motion is an accessibility
   override and must win over every base and breakpoint rule above.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .strix-ring{ animation:none !important; }
  .strix-float span{ animation:none !important; }
  .svc-chip,.svc-orbit{ animation:none !important; }
  .ab-chip,.ab-orbit,.ab-emblem-glow{ animation:none !important; }
  .foot-float *, .foot-dot { animation:none !important; }
  .strix-related-card,
  .strix-related-card-media img,
  .strix-related-card-cue{ transition:none !important; }
  .strix-related-card:hover{ transform:none !important; }
  .strix-related-card:hover .strix-related-card-media img,
  .strix-related-card:hover .strix-related-card-cue{ transform:none !important; }
}