/* =========================================================================
   components.css - shared components taken from Figma (frame 1:4).
   Owned by the integrator. Section files may position these, not restyle them.
   ========================================================================= */

/* -------------------------------------------------------------------------
   .rs-cta - Figma CTA (frames 1:50 / 1:59 / 1:126 / 1:164 / 1:82):
   39px disc with a thin arrow, a concave "neck", and a 39px-high pill.
   In RTL the pill comes first (right) and the disc sits on the physical left.
   Markup:
   <a class="rs-cta rs-cta--dark" href="#contact">
     <span class="rs-cta__pill">דברי איתי</span>
     <span class="rs-cta__neck" aria-hidden="true"></span>
     <span class="rs-cta__disc" aria-hidden="true"></span>
   </a>
   Variants: --dark (brown on light), --light (white on caramel/photo),
             --solid (brown filled pill, white text).
   ------------------------------------------------------------------------- */
.rs-cta {
  --cta-h: max(40px, calc(39 * var(--u)));
  --cta-c: var(--fg-brown);        /* line / disc colour */
  --cta-on: #fff;                  /* arrow colour inside the disc */
  --cta-text: var(--fg-brown);
  --cta-fill: transparent;
  display: inline-flex;
  align-items: center;
  block-size: var(--cta-h);
  direction: rtl;
  text-decoration: none;
  color: var(--cta-text);
  font-family: var(--font-heb);
  font-weight: var(--fw-reg);
  font-size: max(16px, calc(24 * var(--u)));
  line-height: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.rs-cta__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  min-inline-size: calc(var(--cta-h) * 3.51);   /* 137 / 39 */
  padding-inline: calc(var(--cta-h) * 0.6);
  border: 1px solid var(--cta-c);
  border-radius: 999px;
  background: var(--cta-fill);
  color: var(--cta-text);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rs-cta__neck {
  inline-size: calc(var(--cta-h) * 0.46);        /* 18 / 39 */
  block-size: calc(var(--cta-h) * 0.313);        /* 12.2 / 39 */
  margin-inline: calc(var(--cta-h) * -0.03);
  background: var(--cta-c);
  -webkit-mask: url(../assets/icons/cta-neck.svg) center / 100% 100% no-repeat;
          mask: url(../assets/icons/cta-neck.svg) center / 100% 100% no-repeat;
  flex: 0 0 auto;
}
.rs-cta__disc {
  position: relative;
  inline-size: var(--cta-h);
  block-size: var(--cta-h);
  border-radius: 50%;
  background: var(--cta-c);
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease);
}
.rs-cta__disc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cta-on);
  -webkit-mask: url(../assets/icons/cta-arrow.svg) center / 100% 100% no-repeat;
          mask: url(../assets/icons/cta-arrow.svg) center / 100% 100% no-repeat;
}
.rs-cta:hover .rs-cta__pill,
.rs-cta:focus-visible .rs-cta__pill { background: var(--cta-c); color: var(--cta-on); }
.rs-cta:hover .rs-cta__disc { transform: rotate(45deg); }
.rs-cta:focus-visible { outline: none; }
.rs-cta:focus-visible .rs-cta__pill { box-shadow: 0 0 0 3px rgba(140, 73, 33, .45); }

.rs-cta--light { --cta-c: #fff; --cta-on: var(--fg-ink); --cta-text: #fff; }
.rs-cta--light:hover .rs-cta__pill,
.rs-cta--light:focus-visible .rs-cta__pill { color: var(--fg-brown); }
.rs-cta--solid { --cta-fill: var(--fg-brown); --cta-text: #fff; }
.rs-cta--solid:hover .rs-cta__pill { background: #3f1b06; }

@media (prefers-reduced-motion: reduce) {
  .rs-cta__disc, .rs-cta__pill { transition: none; }
  .rs-cta:hover .rs-cta__disc { transform: none; }
}

/* Touch screens: 44px targets (WCAG 2.5.5 AAA / Apple HIG), the design keeps 39-40px on mouse. */
@media (pointer: coarse) {
  .rs-cta { --cta-h: max(44px, calc(39 * var(--u))); }
}

/* Footer / legal-bar credits: links that keep the surrounding text look. */
.credit-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.credit-link:hover, .credit-link:focus-visible { border-bottom-color: currentColor; }
.credit-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }