/* Call / WhatsApp button system refresh (21.10, staging; option reef_cta_v2 → body.rf-cta-v1 / body.rf-cta-v2, see inc/cta-v2.php).
   CSS only: markup, classes and data-cta stay as they are.
   Roles:   call / primary = every .btn that is not navy, white or WhatsApp (tel: links, the lead form submit, plain .btn)
            WhatsApp      = .btn-wa, .btn-wa-ghost and any .btn that links to WhatsApp (footer .btn-block.wa, shop advice button)
   V1  call solid #FF6200 + navy text (6.75:1) · WhatsApp white + hairline + green icon + navy text (20.25:1) · white bar, hairline
   V2  call solid #FF6200 + navy text (6.75:1) · WhatsApp solid #0F7A6E + white text (5.21:1)               · navy bar
   No gradients, no glow, no hover lift; one radius per variant; the pair stays equal in size, primary vs secondary = colour only.
   Every selector starts with :root:not(.reef-hc-dark):not(.reef-hc-light), so the accessibility toolbar's high-contrast modes keep
   their own rules (reef.css §21.9), and so these win over the older !important rules on .btn-wa / .rf-art-cta (max 0,3,1). */

/* ---------- tokens ---------- */
.rf-cta-v1{
  --cta-r:12px;
  --cta-call:#FF6200; --cta-call-h:#F25C00; --cta-call-ink:#060220;
  --cta-wa:#fff; --cta-wa-h:#F4F6FB; --cta-wa-ink:#060220; --cta-wa-ico:#25D366; --cta-wa-line:rgba(6,2,32,.24); --cta-wa-line-h:rgba(6,2,32,.5);
  --cta-bar:#fff; --cta-bar-line:#E6E6EA;
  --cta-on-orange:#060220; --cta-on-orange-ink:#fff; --cta-on-orange-h:#141033;
}
.rf-cta-v2{
  --cta-r:8px;
  --cta-call:#FF6200; --cta-call-h:#F25C00; --cta-call-ink:#060220;
  --cta-wa:#0F7A6E; --cta-wa-h:#0C6E62; --cta-wa-ink:#fff; --cta-wa-ico:#fff; --cta-wa-line:#0F7A6E; --cta-wa-line-h:#0C6E62;
  --cta-bar:#060220; --cta-bar-line:#060220;
  --cta-on-orange:#060220; --cta-on-orange-ink:#fff; --cta-on-orange-h:#141033;
}

/* ---------- every button: flat, one radius, no lift ---------- */
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .btn,
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .btn:hover{
  border-radius:var(--cta-r)!important;box-shadow:none!important;transform:none!important;letter-spacing:0;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}

/* ---------- call / primary: solid brand orange, navy ink ---------- */
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .btn:where(:not(.btn-navy,.btn-white,.btn-wa,.btn-wa-ghost,[href*="whatsapp"])){
  background:var(--cta-call)!important;color:var(--cta-call-ink)!important;border:1px solid var(--cta-call)!important;
}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .btn:where(:not(.btn-navy,.btn-white,.btn-wa,.btn-wa-ghost,[href*="whatsapp"])):hover{
  background:var(--cta-call-h)!important;border-color:var(--cta-call-h)!important;color:var(--cta-call-ink)!important;
}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .btn:where(:not(.btn-navy,.btn-white,.btn-wa,.btn-wa-ghost,[href*="whatsapp"])) svg{fill:currentColor!important}
/* the number inside a call button in regular weight: the label leads, the number reads (FbEinstein 400) */
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .btn[href^="tel:"] .ltr{font-weight:400}

/* ---------- WhatsApp: the quiet one (V1 white + hairline, V2 deep green) ---------- */
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) :is(.btn-wa,.btn-wa-ghost,.btn[href*="whatsapp"]){
  background:var(--cta-wa)!important;color:var(--cta-wa-ink)!important;border:1px solid var(--cta-wa-line)!important;
}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) :is(.btn-wa,.btn-wa-ghost,.btn[href*="whatsapp"]):hover{
  background:var(--cta-wa-h)!important;color:var(--cta-wa-ink)!important;border-color:var(--cta-wa-line-h)!important;
}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) :is(.btn-wa,.btn-wa-ghost,.btn[href*="whatsapp"]) svg{fill:var(--cta-wa-ico)!important;width:21px;height:21px}

/* ---------- on the orange cards (mid-article .rf-cta-mid, blog grid .rf-art-cta): call turns navy, an orange button can't sit on orange ---------- */
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) :is(.rf-cta-mid,.rf-art-cta) .btn[href^="tel:"]{
  background:var(--cta-on-orange)!important;color:var(--cta-on-orange-ink)!important;border-color:var(--cta-on-orange)!important;
}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) :is(.rf-cta-mid,.rf-art-cta) .btn[href^="tel:"]:hover{
  background:var(--cta-on-orange-h)!important;border-color:var(--cta-on-orange-h)!important;color:var(--cta-on-orange-ink)!important;
}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) :is(.rf-cta-mid,.rf-art-cta) .btn[href^="tel:"] svg{fill:#FF6200!important}
/* reef.css paints every span in .rf-cta-mid navy 82% (the card's sub line), which hid the number on the navy call button */
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) :is(.rf-cta-mid,.rf-art-cta) .btn span{color:inherit;font-size:inherit}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) :is(.rf-cta-mid,.rf-art-cta) .btn{min-height:48px;font-size:18px}
:root:not(.reef-hc-dark):not(.reef-hc-light) .rf-cta-v1 :is(.rf-cta-mid,.rf-art-cta,.rf-callbox) :is(.btn-wa,.btn-wa-ghost,.btn[href*="whatsapp"]){border-color:#fff!important}

/* ---------- sizes per place (equal pair everywhere; ~50px instead of 58-62px) ---------- */
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-pair .btn{min-height:50px;font-size:17px;padding-inline:16px}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-hero .rf-pair .btn,
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-pair-xl .btn{min-height:52px;font-size:18px;padding-inline:18px}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-feat .rf-pair .btn{font-size:18px}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-mnav-foot .rf-pair .btn{min-height:48px;font-size:17px;padding-inline:10px}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-pair-s .btn{min-height:44px;font-size:16px;padding:8px 10px}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-form .btn{min-height:50px;font-size:18px}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .btn-block{min-height:52px;font-size:18px;padding-block:12px}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-callbox .btn{min-height:50px;font-size:17px}
/* desktop top bar: a small solid call button in the brand orange (was a white pill) */
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-tbar .btn{min-height:40px;font-size:15px;padding:6px 16px}
@media (max-width:480px){
  :root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-pair .btn{min-height:50px}
  :root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-hero .rf-pair .btn{font-size:clamp(16px,4.6vw,18px);padding-inline:14px}
}

/* ---------- phone sticky bar: 2 equal buttons, ~56px in all ---------- */
@media (max-width:760px){
  :root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2){--bar-h:56px}
  :root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-bar{
    background:var(--cta-bar)!important;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid var(--cta-bar-line);
    gap:8px;padding:5px 10px calc(4px + env(safe-area-inset-bottom));
  }
  :root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .rf-bar .btn{min-height:46px;font-size:17px;padding-inline:10px}
}

/* ---------- focus: a ring that shows on every surface (navy on light, white on the dark hero / top bar / V2 bar) ---------- */
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .btn:focus-visible{outline:3px solid #060220;outline-offset:3px}
:root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) :is(.rf-hero,.rf-tbar) .btn:focus-visible,
:root:not(.reef-hc-dark):not(.reef-hc-light) .rf-cta-v2 .rf-bar .btn:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion:reduce){
  :root:not(.reef-hc-dark):not(.reef-hc-light) :is(.rf-cta-v1,.rf-cta-v2) .btn{transition:none}
}
/* 21.10 Mor 01:06: call buttons show the words only ("חייגו עכשיו" + icon); the number stays on the desktop top-bar pill and in the
   footer line. The link, data-cta and the number in the accessible name (aria-label, inc/helpers.php) are unchanged. */
:is(.rf-cta-v1,.rf-cta-v2) a.btn[href^="tel:"] .ltr{display:none}
:is(.rf-cta-v1,.rf-cta-v2) .rf-tbar a.btn[href^="tel:"] .ltr{display:inline}