/* ==========================================================================
   Rosh Hashanah 5787 greeting, michalpeerskincare.com
   Added 11.09.2026. Self-expires after 17.09.2026 (see rh-greeting.js).
   Design B: blush field, white paper, inset gold hairline, single-line gold
   pomegranate, Frank Ruhl Libre headline, Assistant body.

   Every selector is namespaced under #rh-greeting, so nothing on the site can
   be reached by accident and nothing on the site can reach in. The single
   exception is the html.rhg-open .wa-sticky rule at the bottom, which nudges
   the site's own floating WhatsApp button out of the way while the greeting is
   open. It is transform-only and fully reversible.

   Note on specificity. The reset below is #rh-greeting * , which is (1,0,0).
   Every component rule therefore has to carry the id prefix as well, or the
   reset silently wins and all the padding collapses. That is not tidiness,
   it is the reason the card has a height.

   Layout contract (Google "avoid intrusive interstitials"):
     - no full-screen layer, no scrim, no scroll lock
     - mobile  : bottom sheet, well under 30% of the viewport height
     - desktop : small corner card, under 10% of a 1280x900 window
   ========================================================================== */

/* Frank Ruhl Libre is declared inline and preloaded on 12 of the 13 pages, so
   this block resolves to the same already-cached URL and costs nothing there.
   It exists for 404.html, the one page that never declares the serif.
   Descriptors match the site's own declaration exactly so the two faces cannot
   fight over weight matching. */
@font-face{
  font-family:'Frank Ruhl Libre';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('/frl-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

#rh-greeting{
  /* Brand tokens as hard hex on purpose. 404.html redefines --cream, --gold
     and --ink to different values, so var() from the page is never safe. */
  --rhg-paper:#FFFFFF;
  --rhg-blush:#F5E8DF;
  --rhg-line:#E9DACC;
  --rhg-gold:#B0894F;
  --rhg-gold-ink:#7A5B2C;
  --rhg-ink:#33261F;
  --rhg-soft:#6E584A;
  --rhg-terra:#9C5138;
  --rhg-serif:'Frank Ruhl Libre','FrankRuehl','David',Georgia,serif;
  --rhg-sans:'Assistant','Segoe UI',system-ui,sans-serif;

  /* The highest z-index anywhere on the site is 100, the two lightboxes. */
  position:fixed;
  z-index:2147483000;
  inset-inline:0;
  bottom:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:var(--rhg-sans);
  text-align:start;
  /* 404.html sets body{display:flex;align-items:center}. position:fixed keeps
     this out of that flex context; flex:none is belt and braces. */
  flex:none;
  /* Hard ceiling. 28vh is 187px on a 375x667 phone and 179px on 360x640.
     The design lands at 159px, so this is a net and not the normal state. */
  max-height:28vh;
  opacity:0;
  transform:translateY(12px);
  will-change:opacity,transform;
}

/* Strong reset, so the host page's own p, div and button rules cannot leak in.
   404.html for instance sets p{margin:0 0 22px}. */
#rh-greeting *{
  box-sizing:border-box;
  margin:0;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:inherit;
  letter-spacing:normal;
  -webkit-appearance:none;
  appearance:none;
}

#rh-greeting.rhg-in{opacity:1;transform:translateY(0)}
#rh-greeting.rhg-out{opacity:0;transform:translateY(8px)}

@media (prefers-reduced-motion:no-preference){
  #rh-greeting{transition:opacity .24s ease-out,transform .24s ease-out}
}
@media (prefers-reduced-motion:reduce){
  #rh-greeting{transition:none;transform:none}
  #rh-greeting.rhg-out{transform:none}
}

/* ---------- blush field ---------- */
#rh-greeting .rhg-frame{
  background:var(--rhg-blush);
  border-top:1px solid var(--rhg-line);
  border-radius:16px 16px 0 0;
  box-shadow:0 -10px 30px -18px rgba(51,38,31,.30);
  padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
}

/* ---------- white paper ---------- */
#rh-greeting .rhg-paper{
  position:relative;
  background:#FFFFFF;
  border:1px solid var(--rhg-line);
  border-radius:3px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
}

/* The inset gold hairline, the design's signature double rule. */
#rh-greeting .rhg-paper::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(176,137,79,.40);
  border-radius:2px;
  pointer-events:none;
}

/* ---------- pomegranate ---------- */
#rh-greeting .rhg-pom{
  display:block;
  flex:0 0 auto;
  width:58px;
  height:auto;
  color:var(--rhg-gold);
}
@media (max-width:479px){
  /* Under about 90px rendered width a 2.2 stroke goes sub-pixel and greys out.
     Only the root stroke is raised, so the thinner vein and cut arc keep their
     proportion. */
  #rh-greeting .rhg-pom{stroke-width:2.8}
}

/* ---------- text ---------- */
#rh-greeting .rhg-text{
  flex:1 1 auto;
  min-width:0;
  /* Clears the 48x48 close button, whose glyph reaches 35px in from the
     paper's inline-end edge. */
  padding-inline-end:26px;
}

#rh-greeting .rhg-h{
  font-family:var(--rhg-serif);
  font-weight:700;
  font-size:21px;
  line-height:1.18;
  color:var(--rhg-ink);
  text-wrap:balance;
  padding-inline-end:12px;
}

#rh-greeting .rhg-year{
  font-family:var(--rhg-sans);
  font-weight:600;
  font-size:11px;
  line-height:1.4;
  letter-spacing:.28em;
  /* Text with tracking leaves the trailing gap on the visual left, so pad the
     start back by half a tracking unit. */
  padding-inline-start:.28em;
  color:var(--rhg-terra);
  margin-top:4px;
}

#rh-greeting .rhg-line{
  font-family:var(--rhg-sans);
  font-weight:500;
  font-size:14px;
  line-height:1.5;
  color:var(--rhg-soft);
  margin-top:4px;
  text-wrap:balance;
}

#rh-greeting .rhg-sign{
  font-family:var(--rhg-serif);
  font-weight:700;
  font-size:12px;
  line-height:1.5;
  letter-spacing:.03em;
  color:var(--rhg-gold-ink);
  margin-top:6px;
}

/* ---------- logo, desktop only ---------- */
#rh-greeting .rhg-logo{display:none}

/* ---------- close ---------- */
#rh-greeting .rhg-close{
  position:absolute;
  top:0;
  inset-inline-end:0;
  /* 48x48 is Google's recommended touch target, far above the WCAG 2.2
     SC 2.5.8 floor of 24x24 CSS px. */
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  cursor:pointer;
  color:var(--rhg-gold-ink);   /* 6.2:1 on white */
}
#rh-greeting .rhg-close svg{
  display:block;
  width:21px;
  height:21px;
  pointer-events:none;
}
#rh-greeting .rhg-close:hover{color:var(--rhg-terra)}
#rh-greeting .rhg-close:focus-visible{
  outline:2px solid var(--rhg-gold-ink);
  outline-offset:-5px;
}

/* ==========================================================================
   TABLET AND DESKTOP, from 760px up: a small corner card, no longer a sheet.
   760px is the site's own breakpoint, the exact width at which .wa-sticky
   stops being displayed. Matching it means the bottom sheet exists only where
   the floating WhatsApp button exists, and the corner card only where it does
   not, so the two can never fight.
   The site is dir="rtl", so inset-inline-end lands on the visual left, the
   trailing edge, where it covers the least content.
   ========================================================================== */
@media (min-width:760px){
  #rh-greeting{
    inset-inline:auto;
    inset-inline-end:24px;
    bottom:24px;
    width:340px;
    max-height:none;
  }

  #rh-greeting .rhg-frame{
    border:1px solid var(--rhg-line);
    border-radius:16px;
    box-shadow:0 24px 60px -28px rgba(51,38,31,.35);
    padding:11px;
  }

  #rh-greeting .rhg-paper{
    display:block;
    text-align:center;
    padding:14px 16px;
  }
  #rh-greeting .rhg-paper::before{inset:7px}

  #rh-greeting .rhg-pom{
    width:62px;
    margin:2px auto 7px;
  }

  #rh-greeting .rhg-text{padding-inline-end:0}

  #rh-greeting .rhg-h{font-size:26px;line-height:1.18;padding-inline-end:0}
  #rh-greeting .rhg-year{font-size:11px;margin-top:5px}
  #rh-greeting .rhg-line{font-size:15px;margin-top:5px}
  #rh-greeting .rhg-sign{font-size:13px;margin-top:8px}

  #rh-greeting .rhg-logo{
    display:block;
    width:40px;
    height:40px;
    margin:7px auto 0;
    /* The mask dissolves the logo's light square into the paper so the mark
       reads as printed rather than pasted. Load-bearing, do not drop it. */
    -webkit-mask-image:radial-gradient(circle,#000 66%,transparent 78%);
            mask-image:radial-gradient(circle,#000 66%,transparent 78%);
  }
  #rh-greeting .rhg-logo img{display:block;width:100%;height:100%;object-fit:contain}

  #rh-greeting .rhg-close{width:44px;height:44px}
  #rh-greeting .rhg-close svg{width:19px;height:19px}
}

@media (min-width:1100px){
  #rh-greeting{width:364px}
  #rh-greeting .rhg-h{font-size:28px}
  #rh-greeting .rhg-pom{width:68px}
}

/* ==========================================================================
   The site's own floating WhatsApp button is position:fixed bottom:0 z-index:60
   and is visible only under 760px, where the greeting would sit on top of it.
   Lift it while the greeting is open. Transform only, so it contributes
   nothing to CLS, and it is undone on close.
   --rhg-h is written by rh-greeting.js from the measured card height.
   ========================================================================== */
html.rhg-open .wa-sticky{
  transform:translateY(calc(-1 * var(--rhg-h,170px)));
}
@media (prefers-reduced-motion:no-preference){
  .wa-sticky{transition:transform .24s ease-out}
}