/* ══════════════════════════════════════════════════════════
   RealLingo — shared site chrome (header, footer, dropdown nav,
   mobile nav, placeholder/"Stay Tuned" pages, section themes)
   Loaded on every page alongside page-specific styles.
══════════════════════════════════════════════════════════ */

:root {
  --yellow:      #ffeb99;
  --yellow-mid:  #f5d96a;
  --yellow-pale: #fff7d6;
  --cream:       #eeede9;
  --cream-white: #fffff2;
  --lavender:    #f2f2ff;
  --dark:        #111216;
  --dark-mid:    #1e2028;
  --blue:        #99adff;
  --blue-dim:    #c4cfff;
  --text:        #111216;
  --text-mid:    #4a4840;
  --text-soft:   #8a8878;
  --border:      rgba(17,18,22,.09);
  --border-sub:  rgba(17,18,22,.05);
  --font-serif:  'Times New Roman', 'Times', Georgia, serif;
  --font-sans:   'Be Vietnam Pro', system-ui, sans-serif;

  /* Section theme tokens — overridden per .theme-* below */
  --theme-bg:    var(--cream);
  --theme-fg:    var(--text);
  --theme-fg-mid:var(--text-mid);
  --theme-accent:var(--dark);
  --theme-accent-fg: var(--yellow);
}

/* ── Section themes ──────────────────────────────────────── */
.theme-explore  { --theme-bg: var(--yellow); --theme-fg: var(--dark); --theme-fg-mid: #4a4020; --theme-accent: var(--dark); --theme-accent-fg: var(--yellow); }
.theme-business { --theme-bg: var(--dark);   --theme-fg: var(--yellow); --theme-fg-mid: rgba(255,235,153,.62); --theme-accent: var(--yellow); --theme-accent-fg: var(--dark); }
.theme-joinus   { --theme-bg: var(--cream-white); --theme-fg: var(--dark); --theme-fg-mid: var(--text-mid); --theme-accent: var(--dark); --theme-accent-fg: var(--yellow); }
.theme-about    { --theme-bg: var(--cream); --theme-fg: var(--dark); --theme-fg-mid: var(--text-mid); --theme-accent: var(--dark); --theme-accent-fg: var(--yellow); }

/* ══════════════════════════════════════════════════════════
   HEADER / GLOBAL NAV
══════════════════════════════════════════════════════════ */
.site-hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  padding: 1.25rem 4rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  background: var(--yellow-pale);
  transition: background .3s, box-shadow .3s;
}
.site-hdr.scrolled {
  background: rgba(255,247,214,.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}

.site-logo {
  font-size: 1.4rem; text-decoration: none; color: var(--dark);
  display: flex; align-items: center; gap: .02em; line-height: 1; flex-shrink: 0;
}
.site-logo .logo-r { font-family: var(--font-serif); font-style: italic; font-weight: 700; }
.site-logo .logo-l { font-family: var(--font-sans);  font-weight: 800; letter-spacing: -.025em; }
.site-logo-img { height: 26px; width: auto; display: block; }

/* Reusable "RealLingo" wordmark treatment (italic serif "Real" + bold sans
   "lingo") matching the header logo's type style, for use wherever the
   brand name appears emphasized in running text/headings. */
.rl-mark { white-space: nowrap; display: inline-flex; align-items: baseline; gap: .02em; }
.rl-mark .r { font-family: var(--font-serif); font-style: italic; font-weight: 700; }
.rl-mark .l { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.025em; }
.site-ftr-brand .site-logo-img { height: 24px; }

.site-nav { display: flex; align-items: center; gap: 2.25rem; flex: 1 1 auto; margin-left: 2.5rem; }
.site-nav-item { position: relative; }
.site-nav-btn {
  background: none; border: none; cursor: pointer; padding: .4rem 0;
  font-family: var(--font-sans); font-size: .86rem; font-weight: 600;
  color: var(--text-mid); display: flex; align-items: center; gap: .35rem;
  transition: color .2s;
}
.site-nav-btn:hover, .site-nav-item.active .site-nav-btn { color: var(--dark); }
.site-nav-link {
  padding: .4rem 0; font-family: var(--font-sans); font-size: .86rem; font-weight: 600;
  color: var(--text-mid); text-decoration: none; transition: color .2s;
}
.site-nav-link:hover, .site-nav-item.active .site-nav-link { color: var(--dark); }
.site-nav-btn .car { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; opacity: .6; }
.site-nav-item.open .site-nav-btn .car { transform: rotate(225deg) translateY(1px); }

/* "Explore" splits into a real link (label) + a separate caret button so the
   label can navigate straight to Resources while the caret still toggles
   the submenu of other Explore subpages. */
.site-nav-split { display: flex; align-items: center; }
.site-nav-caret {
  background: none; border: none; cursor: pointer; padding: .4rem .1rem .4rem .3rem;
  display: flex; align-items: center; color: var(--text-mid); transition: color .2s;
}
.site-nav-caret:hover { color: var(--dark); }
.site-nav-caret .car { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; opacity: .6; }
.site-nav-item.open .site-nav-caret .car { transform: rotate(225deg) translateY(1px); }

.site-dd {
  position: absolute; top: calc(100% + .9rem); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 220px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: .5rem; box-shadow: 0 18px 40px -12px rgba(17,18,22,.18);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.site-nav-item.open .site-dd { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.site-dd a {
  display: block; padding: .65rem .85rem; border-radius: 9px;
  font-size: .84rem; font-weight: 600; color: var(--text-mid); text-decoration: none;
  transition: background .15s, color .15s;
}
.site-dd a:hover { background: var(--cream); color: var(--dark); }
.site-dd a.current { color: var(--dark); background: var(--yellow); }

/* Pre-filtered "Event Near Me" entries: icon · label · hover arrow, with a
   subtle yellow hover so they read as quick jumps into the Event Directory. */
.site-dd a.site-dd-flt { display: flex; align-items: center; gap: .6rem; }
.site-dd a.site-dd-flt .dd-ic { display: inline-flex; flex: 0 0 auto; color: var(--text-soft); transition: color .15s; }
.site-dd a.site-dd-flt .dd-ic svg { width: 16px; height: 16px; display: block; }
.site-dd a.site-dd-flt .dd-lbl { flex: 1 1 auto; white-space: nowrap; }
.site-dd a.site-dd-flt .dd-arw { flex: 0 0 auto; font-weight: 800; color: var(--dark); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.site-dd a.site-dd-flt:hover { background: var(--yellow-pale); color: var(--dark); }
.site-dd a.site-dd-flt:hover .dd-ic { color: var(--dark); }
.site-dd a.site-dd-flt:hover .dd-arw { opacity: 1; transform: translateX(0); }

/* Nested flyout: a dropdown row (e.g. "Open Source") that reveals its own
   sub-routes to the side on hover/focus, closing on a short delay so the
   cursor can travel from the row into the flyout panel. */
.site-dd-flyout-item { position: relative; }
.site-dd-flyout {
  position: absolute; top: -.5rem; left: 100%; margin-left: .4rem;
  min-width: 200px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: .5rem; box-shadow: 0 18px 40px -12px rgba(17,18,22,.18);
  opacity: 0; pointer-events: none; transform: translateX(6px);
  transition: opacity .18s ease .3s, transform .18s ease .3s;
}
.site-dd-flyout-item:hover .site-dd-flyout,
.site-dd-flyout-item:focus-within .site-dd-flyout {
  opacity: 1; pointer-events: auto; transform: translateX(0);
  transition: opacity .18s ease, transform .18s ease;
}
.site-dd-flyout a {
  display: block; padding: .65rem .85rem; border-radius: 9px;
  font-size: .84rem; font-weight: 600; color: var(--text-mid); text-decoration: none;
  transition: background .15s, color .15s;
}
.site-dd-flyout a:hover { background: var(--cream); color: var(--dark); }
.site-dd-flyout a.current { color: var(--dark); background: var(--yellow); }

@media (max-width: 900px) {
  /* No hover on touch; the flyout collapses into a plain nested list so
     "Application Hub" etc. stay reachable from the mobile accordion. */
  .site-dd-flyout-item { position: static; }
  .site-dd-flyout {
    position: static; opacity: 1; pointer-events: auto; transform: none;
    box-shadow: none; border: none; background: none; border-radius: 0;
    margin: 0 0 0 1rem; padding: 0; transition: none;
  }
  .site-dd-flyout a { padding: .55rem .85rem; font-size: .82rem; }
}

.site-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; margin-left: auto; }
.site-hi { font-size: .82rem; font-weight: 600; color: var(--text-mid); white-space: nowrap; text-decoration: none; cursor: pointer; transition: opacity .15s ease; }
.site-hi:hover { opacity: .7; }
.site-hi b { color: var(--text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.site-hi:hover b { text-decoration-color: currentColor; }
.site-profile-btn { display: flex; align-items: center; gap: .5rem; background: none; border: 1px solid var(--border); border-radius: 100px; padding: .28rem .85rem .28rem .3rem; cursor: pointer; font-family: var(--font-sans); transition: border-color .2s, background .2s, transform .15s; }
.site-profile-btn:hover { border-color: var(--yellow-mid); background: var(--yellow-pale); transform: translateY(-1px); }
.site-profile-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--cream); flex: 0 0 auto; }
.site-profile-ava[data-default="1"] { object-fit: contain; padding: 3px; }
.site-btn-ghost {
  font-size: .84rem; font-weight: 600; color: var(--text-mid); text-decoration: none;
  padding: .6rem 1rem; transition: color .2s;
}
.site-btn-ghost:hover { color: var(--dark); }
.site-btn-solid {
  background: var(--dark); color: var(--yellow); font-family: var(--font-sans);
  font-size: .84rem; font-weight: 700; text-decoration: none;
  padding: .65rem 1.5rem; border-radius: 100px; transition: background .2s, transform .2s;
  display: inline-block;
}
.site-btn-solid:hover { background: var(--dark-mid); transform: translateY(-1px); }

/* Calendar + cart icons shown in the header bar on mobile (next to the logo).
   Hidden on desktop, where .site-actions carries these buttons instead. */
.site-hdr-ic { display: none; width: 40px; height: 40px; padding: 0; border: none; background: none; cursor: pointer; color: var(--dark); align-items: center; justify-content: center; text-decoration: none; }
.site-hdr-ic svg { width: 23px; height: 23px; }

.site-burger {
  display: none; width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.site-burger span { width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform .25s, opacity .25s; }
.site-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-burger.open span:nth-child(2) { opacity: 0; }
.site-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Body padding so fixed header never overlaps content */
.has-site-hdr { padding-top: 82px; }

@media (max-width: 900px) {
  .site-hdr { padding: 1.1rem 1.5rem; }
  .site-nav { position: fixed; inset: 74px 0 0 0; background: var(--cream); flex-direction: column;
    align-items: stretch; gap: 0; margin-left: 0; padding: 1rem 1.5rem 2rem; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s ease; }
  .site-nav.mobile-open { transform: translateX(0); }
  .site-nav-item { border-bottom: 1px solid var(--border-sub); }
  .site-nav-btn { width: 100%; justify-content: space-between; padding: 1rem .25rem; font-size: .95rem; }
  .site-nav-link { display: block; width: 100%; padding: 1rem .25rem; font-size: .95rem; }
  .site-nav-split { width: 100%; justify-content: space-between; }
  .site-nav-split .site-nav-link { width: auto; flex: 1 1 auto; }
  .site-nav-caret { padding: 1rem .5rem; }
  .site-dd {
    position: static; transform: none; opacity: 1; pointer-events: none;
    box-shadow: none; border: none; background: none; padding: 0 0 .5rem .25rem;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .site-nav-item.open .site-dd { pointer-events: auto; max-height: 500px; transform: none; }
  .site-actions { margin-top: 1.5rem; margin-left: 0; flex-direction: column; align-items: stretch; }
  .site-actions .site-btn-solid, .site-actions .site-btn-ghost { text-align: center; }
  .site-actions .site-hi { text-align: center; }
  .site-burger { display: flex; }
  /* show the header calendar + cart icons next to the logo; push the burger to
     the far right; and drop the now-duplicate buttons from inside the menu. */
  .site-hdr-ic { display: inline-flex; }
  .site-cal-mobile { margin-left: .35rem; }
  .site-cart-mobile { margin-right: auto; }
  .site-actions .site-cal-btn { display: none; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER — master catalog
══════════════════════════════════════════════════════════ */
.site-ftr { background: var(--dark); color: rgba(255,255,255,.85); padding: 4rem 4rem 2.25rem; }
/* Brand and the nav columns are two separate flex items (not one flat
   wrapping row) so that when the columns run out of horizontal room and
   wrap, they wrap within their own box to the right of the brand — never
   spilling into the empty space directly beneath it. */
.site-ftr-top { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-bottom: 2.75rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.site-ftr-brand { flex: 1 1 240px; }
.site-ftr-cols { display: flex; flex-wrap: wrap; gap: 2.5rem; flex: 3 1 700px; }
.site-ftr-col { flex: 1 1 140px; }
/* Last in the row, and the one column expected to grow over time as more
   partners are added — a wider basis than the others so new entries have
   room before the list needs to wrap onto extra lines. */
.site-ftr-col--partners { flex: 1.4 1 200px; }
.site-ftr-brand .site-logo { color: var(--yellow); font-size: 1.3rem; }
.site-ftr-tag { margin-top: .85rem; font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.4); max-width: 26ch; }
.site-ftr-col h4 { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 1rem; }
.site-ftr-col ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.site-ftr-col a { font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.62); text-decoration: none; transition: color .2s; }
.site-ftr-col a:hover { color: var(--yellow); }
.site-ftr-ext { display: inline-flex; align-items: center; gap: .3rem; }
.site-ftr-ext-arrow { font-size: .78em; opacity: .55; transition: transform .2s ease, opacity .2s ease; }
.site-ftr-ext:hover .site-ftr-ext-arrow { opacity: 1; transform: translate(1px, -1px); }
.site-ftr-email-btn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: .84rem; font-weight: 500; color: rgba(255,255,255,.62);
  transition: color .2s;
}
.site-ftr-email-btn:hover { color: var(--yellow); }
.site-ftr-email-reveal { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .8rem; }
.site-ftr-email-text { color: var(--yellow); user-select: all; }
.site-ftr-copy-btn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.6);
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.site-ftr-copy-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.site-ftr-copy-btn.copied { background: var(--yellow); border-color: var(--yellow); color: #111216; }

.site-ftr-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.75rem; font-size: .76rem; color: rgba(255,255,255,.3); }
.site-ftr-bottom a { color: rgba(255,255,255,.4); text-decoration: none; }
.site-ftr-bottom a:hover { color: var(--yellow); }

@media (max-width: 900px) {
  .site-ftr { padding: 3rem 1.5rem 1.75rem; }
  .site-ftr-brand { flex: 1 1 100%; }
  .site-ftr-cols { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════
   "STAY TUNED" PLACEHOLDER PAGES
══════════════════════════════════════════════════════════ */
.stay-tuned {
  min-height: 100vh; background: var(--theme-bg); color: var(--theme-fg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8rem 2rem 6rem; font-family: var(--font-sans);
}
.st-crumb { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--theme-fg-mid); margin-bottom: 1.5rem; }
.st-h1 { font-family: var(--font-sans); font-weight: 900; font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -.03em; margin-bottom: 1rem; }
.st-sub { font-size: 1.05rem; color: var(--theme-fg-mid); max-width: 34ch; line-height: 1.6; margin-bottom: 2.5rem; }
.st-children { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }
.st-child-link {
  display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem;
  border-radius: 100px; border: 1.5px solid var(--theme-accent); color: var(--theme-fg);
  text-decoration: none; font-size: .86rem; font-weight: 700; transition: background .2s, color .2s;
}
.st-child-link:hover { background: var(--theme-accent); color: var(--theme-accent-fg); }
.st-back { margin-top: 2.25rem; font-size: .82rem; color: var(--theme-fg-mid); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.st-back:hover { color: var(--theme-fg); }

/* ══════════════════════════════════════════════════════════
   REDIRECT / LOGIN STUB PAGES
══════════════════════════════════════════════════════════ */
.redirect-note { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--cream); font-family: var(--font-sans); color: var(--text-mid); text-align: center; padding: 2rem; }

.login-wrap { min-height: 100vh; background: var(--cream); display: flex; align-items: center; justify-content: center; padding: 8rem 1.5rem 4rem; }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 2.5rem 2.25rem; box-shadow: 0 24px 60px -20px rgba(17,18,22,.15); }
.login-card h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: .5rem; letter-spacing: -.02em; }
.login-card p.lc-sub { font-size: .86rem; color: var(--text-soft); margin-bottom: 1.75rem; }
.lc-field { margin-bottom: 1.1rem; }
.lc-field label { display: block; font-size: .76rem; font-weight: 700; color: var(--text-mid); margin-bottom: .4rem; }
.lc-field input { width: 100%; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 9px; font-family: var(--font-sans); font-size: .88rem; background: var(--cream); }
.lc-submit { width: 100%; margin-top: .5rem; padding: .85rem; border: none; border-radius: 100px; background: var(--dark); color: var(--yellow); font-family: var(--font-sans); font-weight: 700; font-size: .88rem; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.lc-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(17,18,22,.4); }
.lc-submit:disabled { cursor: not-allowed; opacity: .55; }
.lc-note { margin-top: 1.25rem; font-size: .78rem; color: var(--text-soft); text-align: center; }
.lc-note a, .lc-link { color: var(--text); font-weight: 700; text-decoration: none; }
.lc-note a:hover, .lc-link:hover { text-decoration: underline; }

/* Auth pages: password toggle inside a field */
.lc-pw-wrap { position: relative; }
.lc-pw-wrap input { padding-right: 3.4rem; }
.lc-pw-toggle { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: none; padding: .25rem .4rem; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; color: var(--text-soft); cursor: pointer; }
.lc-pw-toggle:hover { color: var(--text); }

/* Remember-me / forgot row */
.lc-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: -.2rem 0 1.1rem; }
.lc-check { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--text-mid); cursor: pointer; user-select: none; }
.lc-check input { width: 15px; height: 15px; accent-color: var(--dark); cursor: pointer; }

/* Inline status message */
.lc-msg { margin: 0 0 1rem; font-size: .8rem; font-weight: 600; min-height: 1.05em; }
.lc-msg.err { color: #c0392b; }
.lc-msg.ok  { color: #1e824c; }

/* Secondary / ghost button in auth cards */
.lc-btn-ghost { width: 100%; margin-top: .6rem; padding: .8rem; border: 1px solid var(--border); border-radius: 100px; background: #fff; color: var(--text); font-family: var(--font-sans); font-weight: 700; font-size: .85rem; cursor: pointer; transition: background .12s; }
.lc-btn-ghost:hover:not(:disabled) { background: var(--cream); }
.lc-btn-ghost:disabled { opacity: .55; cursor: not-allowed; }

/* Verify / status page icon + email chip */
.auth-icon { font-size: 2.6rem; text-align: center; margin-bottom: .75rem; }
.auth-email { font-weight: 700; color: var(--text); word-break: break-all; }
.lc-center { text-align: center; }

/* ── Header "Event Calendar" icon button (logged-in) ─────────────────── */
.site-cal-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 12px; background: transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.site-cal-btn:hover, .site-cal-btn:focus-visible { transform: translateY(-2px) scale(1.05); background: rgba(255,235,153,.2); box-shadow: 0 8px 20px -8px rgba(245,217,106,.85); outline: none; }
.site-cal-btn:active { transform: translateY(0) scale(1); }
.site-cal-btn svg { display: block; transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.site-cal-btn:hover svg, .site-cal-btn:focus-visible svg { transform: rotate(-5deg); }
.site-cal-tip { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-4px); background: #111216; color: #fff; font-size: .74rem; font-weight: 600; padding: .4rem .62rem; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 10px 24px -10px rgba(17,18,22,.55); transition: opacity .18s ease, transform .18s ease; z-index: 10001; }
.site-cal-tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: #111216; }
.site-cal-btn:hover .site-cal-tip, .site-cal-btn:focus-visible .site-cal-tip { opacity: 1; transform: translateX(-50%) translateY(0); }