/*
 * SMH.CPA WhatsApp tab: ported unchanged from holding/src/whatsapp.html (the shipped "Quiet tab").
 * Spec and rebuild notes: holding/WHATSAPP-WIDGET.md. Enqueued in <head> by plugins/smh-core/includes/whatsapp.php
 * (front end only, only while the facts say whatsapp_confirmed). Owner: WP1 chrome. Do not change the design here:
 * change holding/src/whatsapp.html and WHATSAPP-WIDGET.md first, then port again.
 * Host contract (theme): .smh-wa-lane on the footer's last block (legal strip), html{scroll-padding-bottom} in base.css,
 * viewport-fit=cover in functions.php, --smh-wa-font on :root in base.css.
 */
/* WhatsApp tab: tokens. On :root so the host page's reserve rules (lane, gutter) use the same numbers. */
:root{--smh-wa-size:48px;--smh-wa-key:2px;--smh-wa-gap:16px;
  --smh-wa-bottom:max(var(--smh-wa-gap),calc(env(safe-area-inset-bottom,0px) + 8px));
  --smh-wa-left:max(var(--smh-wa-gap),calc(env(safe-area-inset-left,0px) + 8px));
  --smh-wa-right:max(var(--smh-wa-gap),calc(env(safe-area-inset-right,0px) + 8px));
  --smh-wa-lane:calc(var(--smh-wa-bottom) + var(--smh-wa-size) + var(--smh-wa-key) + 16px);
  --smh-wa-gutter:calc(max(var(--smh-wa-left),var(--smh-wa-right)) + var(--smh-wa-size) + var(--smh-wa-key) + 8px)}
@media (min-width:600px){:root{--smh-wa-gap:24px}}
/* state variables: rest = closed; open and dismissed states below only change these */
.smh-wa{--smh-wa-fill:#18566B;--smh-wa-press:#0F3D4C;--smh-wa-fg:#fff;--smh-wa-line:rgba(255,255,255,.7);
  --smh-wa-clip:var(--smh-wa-shut);--smh-wa-lclip:var(--smh-wa-lshut);--smh-wa-edge:var(--smh-wa-edge-shut);
  --smh-wa-dur:.12s;--smh-wa-ease:cubic-bezier(.3,0,1,1);--smh-wa-wait:0s}
/* inline-end corner: bottom-left in Arabic, bottom-right in English. Physical sides on purpose (see spec).
   shut = the link clipped to the tile + its 2px keyline; lshut = the label fill fully clipped; edge-shut = the wall parked on the tile's inner side */
.smh-wa[dir=rtl]{left:var(--smh-wa-left);right:auto;--smh-wa-shut:inset(-2px calc(100% - var(--smh-wa-size) - 2px) -2px -2px);
  --smh-wa-lshut:inset(0 100% 0 0);--smh-wa-edge-shut:calc(2px - 100%)}
.smh-wa[dir=ltr]{right:var(--smh-wa-right);left:auto;--smh-wa-shut:inset(-2px -2px -2px calc(100% - var(--smh-wa-size) - 2px));
  --smh-wa-lshut:inset(0 0 0 100%);--smh-wa-edge-shut:calc(100% - 2px)}
/* layout (doubled class: a theme's element rules cannot reach it) */
.smh-wa.smh-wa{position:fixed;z-index:9000;top:auto;bottom:var(--smh-wa-bottom);box-sizing:border-box;
  display:flex;align-items:stretch;width:auto;height:var(--smh-wa-size);margin:0;padding:0;
  font:500 15px/1 var(--smh-wa-font,"SMH Tajawal","Tajawal",Tahoma,"Segoe UI",sans-serif);
  letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  clip-path:var(--smh-wa-clip);transition:clip-path var(--smh-wa-dur) var(--smh-wa-ease) var(--smh-wa-wait)}
/* paint, on every link state at 0,3,0: beats theme rules such as a:hover, a:visited, .entry a:focus */
.smh-wa.smh-wa:any-link{color:var(--smh-wa-fg);background:transparent;text-decoration:none;
  border:0;border-radius:0;outline:0;opacity:1;box-shadow:0 0 0 var(--smh-wa-key) var(--smh-wa-line)}
.smh-wa .smh-wa__tile{flex:none;display:grid;place-items:center;width:var(--smh-wa-size);height:var(--smh-wa-size);background:var(--smh-wa-fill)}
/* the label's fill is revealed by its own clip, which trails the link's clip by exactly the wall's 2px:
   the wall is therefore always drawn over the page ground, like the other three keylines (invisible on white, keyline on petrol) */
.smh-wa .smh-wa__label{position:relative;display:flex;align-items:center;margin:0;padding:0;padding-inline:20px 4px;
  color:inherit;font:inherit;letter-spacing:normal;text-transform:none;text-decoration:none;background:var(--smh-wa-fill);
  clip-path:var(--smh-wa-lclip);transition:clip-path var(--smh-wa-dur) var(--smh-wa-ease) var(--smh-wa-wait)}
/* the band's outer wall: spans the label region (+2px outward) and travels with the clip edges (same duration, curve and delay),
   so the band is closed in every frame; parked on the tile's inner side at rest */
.smh-wa.smh-wa::after{content:"";position:absolute;top:-2px;bottom:-2px;inset-inline-start:-2px;inset-inline-end:var(--smh-wa-size);
  border-inline-start:2px solid var(--smh-wa-line);transform:translateX(var(--smh-wa-edge));pointer-events:none;
  transition:transform var(--smh-wa-dur) var(--smh-wa-ease) var(--smh-wa-wait)}
.smh-wa.smh-wa svg{display:block;width:24px;height:24px;max-width:none;fill:currentColor}
/* open: keyboard focus at once; mouse hover after 80 ms (a pointer crossing the corner does not flash it). Touch never opens. */
.smh-wa:focus-visible{--smh-wa-clip:inset(-2px);--smh-wa-lclip:inset(0);--smh-wa-edge:0px;--smh-wa-dur:.2s;--smh-wa-ease:cubic-bezier(.35,.1,.3,1)}
@media (hover:hover) and (pointer:fine){
  .smh-wa:hover{--smh-wa-clip:inset(-2px);--smh-wa-lclip:inset(0);--smh-wa-edge:0px;--smh-wa-dur:.2s;--smh-wa-ease:cubic-bezier(.35,.1,.3,1);--smh-wa-wait:.08s}}
/* Esc closes it without moving pointer or focus (WCAG 1.4.13); the script sets the class */
.smh-wa.is-dismissed{--smh-wa-clip:var(--smh-wa-shut);--smh-wa-lclip:var(--smh-wa-lshut);--smh-wa-edge:var(--smh-wa-edge-shut);--smh-wa-dur:.12s;--smh-wa-ease:cubic-bezier(.3,0,1,1);--smh-wa-wait:0s}
.smh-wa:active{--smh-wa-fill:var(--smh-wa-press)}
/* focus: a white square inside the tile, drawn on the widget's own fill, so it holds on any page ground */
.smh-wa:focus-visible .smh-wa__tile{outline:2px solid var(--smh-wa-fg);outline-offset:-6px}
.smh-wa-note.smh-wa-note{display:none}
/* phones: step aside while the on-screen keyboard is up (a form field has focus) */
@media (max-width:599px){
  html:has(:is(input:not([type=button],[type=checkbox],[type=color],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=reset],[type=submit]),textarea,select):focus) .smh-wa{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.smh-wa.smh-wa,.smh-wa .smh-wa__label,.smh-wa.smh-wa::after{transition:none}}
@media (forced-colors:active){
  .smh-wa.smh-wa:any-link{outline:2px solid LinkText;outline-offset:0}
  .smh-wa.smh-wa::after{border-color:LinkText}
  .smh-wa:focus-visible .smh-wa__tile{outline-color:Highlight}}
@media print{.smh-wa.smh-wa{display:none}}