/* The ambassador corner badge — injected at the edge onto a creator's page
   (functions/lib/amb-badge.js cornerBadgeHTML) and drawn by the creator
   dashboard's style chooser from the SAME markup, so the preview is the page.

   It lands on 67 templates we don't control, so every property that matters is
   set explicitly and nothing leans on inheritance: a template's `a{}` or `img{}`
   rule would otherwise restyle it. Specificity stays at two classes (.wp-amb.x)
   and the few properties templates love to set globally carry !important.

   Five looks:
     seal       the medal alone — smallest footprint
     pill       medal + tier name on cream (reads on any page)
     pill-dark  the same on espresso, for light-on-dark pages
     tab        a tab rising from the bottom edge, medal half over it
     ribbon     a sash across the corner at 45°, in the tier's metal
   Two corners: br / bl. Never the top — that is every template's nav. */

.wp-amb {
  position: fixed !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9990;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
  font: 600 13px/1.15 'SN Pro', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #241C16;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s cubic-bezier(.2,.7,.3,1), opacity .18s;
}
.wp-amb.wp-amb--br { right: 16px; left: auto; }
.wp-amb.wp-amb--bl { left: 16px; right: auto; }
.wp-amb:hover { transform: translateY(-2px); }
.wp-amb:focus-visible { outline: 3px solid #8F2D56; outline-offset: 3px; }

.wp-amb .wp-amb__medal {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  background: none !important;
  object-fit: contain;
  flex: none;
}
.wp-amb .wp-amb__txt { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.wp-amb .wp-amb__txt b { font: inherit !important; font-weight: 700 !important; color: inherit !important; }
.wp-amb .wp-amb__txt small {
  font: 600 10px/1 'Bebas Neue', 'Oswald', Impact, sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: inherit !important;
  opacity: .62;
}

/* seal — medal only, a soft lift so it reads off any background */
.wp-amb.wp-amb--seal .wp-amb__medal { width: 52px !important; height: 52px !important; filter: drop-shadow(0 4px 10px rgba(9,3,2,.28)); }
.wp-amb.wp-amb--seal:hover .wp-amb__medal { filter: drop-shadow(0 7px 14px rgba(9,3,2,.32)); }

/* pill — cream chip */
.wp-amb.wp-amb--pill, .wp-amb.wp-amb--pill-dark {
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(9,3,2,.08), 0 10px 24px -8px rgba(9,3,2,.35);
}
.wp-amb.wp-amb--pill { background: #F8F4E3; color: #241C16; border: 1px solid #E6D9C0; }
.wp-amb.wp-amb--pill .wp-amb__medal, .wp-amb.wp-amb--pill-dark .wp-amb__medal { width: 36px !important; height: 36px !important; }
.wp-amb.wp-amb--pill-dark { background: #241C16; color: #F8F4E3; border: 1px solid #3A2A20; }

/* tab — rises from the bottom edge; the medal sits half above it */
.wp-amb.wp-amb--tab {
  bottom: 0;
  padding: 8px 18px calc(10px + env(safe-area-inset-bottom, 0px)) 62px;
  border-radius: 14px 14px 0 0;
  background: #F8F4E3;
  color: #241C16;
  border: 1px solid #E6D9C0;
  border-bottom: 0;
  box-shadow: 0 -6px 22px -10px rgba(9,3,2,.35);
}
.wp-amb.wp-amb--tab .wp-amb__medal {
  position: absolute;
  left: 10px;
  top: -18px;
  width: 46px !important;
  height: 46px !important;
  filter: drop-shadow(0 3px 6px rgba(9,3,2,.25));
}
.wp-amb.wp-amb--tab:hover { transform: translateY(-3px); }

/* ribbon — a sash across the corner at 45°, in the tier's metal. The band hangs
   off both screen edges on purpose: the viewport clips it, which is what makes it
   read as a ribbon folded round the corner. A fixed box outside the viewport adds
   no scroll (and the build contract clips overflow-x anyway). The band's centre
   sits 70px in from each edge: a 45° band shows 2·70·√2 ≈ 198px between the two
   screen edges, enough for "Diamond Ambassador" and its medal. */
.wp-amb.wp-amb--ribbon {
  bottom: 53px;
  width: 290px;
  height: 34px;
  justify-content: center;
  gap: 7px;
  padding: 0 34px;
  color: #241C16;
  background: linear-gradient(180deg, #F2E7D3, #D9C7A8);
  box-shadow: 0 6px 16px -4px rgba(9,3,2,.45), inset 0 1px 0 rgba(255,255,255,.55);
  outline: 1px dashed rgba(9,3,2,.28);
  outline-offset: -4px;
  font-size: 12px !important;
  letter-spacing: .02em !important;
}
.wp-amb.wp-amb--ribbon.wp-amb--br { right: -75px; left: auto; transform: rotate(-45deg); }
.wp-amb.wp-amb--ribbon.wp-amb--bl { left: -75px; right: auto; transform: rotate(45deg); }
.wp-amb.wp-amb--ribbon.wp-amb--br:hover { transform: rotate(-45deg) scale(1.04); }
.wp-amb.wp-amb--ribbon.wp-amb--bl:hover { transform: rotate(45deg) scale(1.04); }
.wp-amb.wp-amb--ribbon .wp-amb__medal { width: 24px !important; height: 24px !important; }
.wp-amb.wp-amb--ribbon .wp-amb__txt { flex-direction: row; }
.wp-amb.wp-amb--ribbon:focus-visible { outline: 3px solid #8F2D56; outline-offset: 2px; }
.wp-amb.wp-amb--ribbon.wp-amb--t-ambassador { color: #F8F4E3; background: linear-gradient(180deg, #5A4032, #2A1D15); outline-color: rgba(248,244,227,.35); }
.wp-amb.wp-amb--ribbon.wp-amb--t-bronze { color: #3A1E0B; background: linear-gradient(180deg, #F2C08E, #C98446); }
.wp-amb.wp-amb--ribbon.wp-amb--t-silver { color: #2B3036; background: linear-gradient(180deg, #FFFFFF, #BFC6CF); }
.wp-amb.wp-amb--ribbon.wp-amb--t-gold { color: #3F2A02; background: linear-gradient(180deg, #FFF1B8, #E3B03A); }
.wp-amb.wp-amb--ribbon.wp-amb--t-platinum { color: #0B3532; background: linear-gradient(180deg, #E6FFFB, #5FBFB3); border: 1px solid rgba(19,74,70,.45); }
/* diamond — the one animated tier, matching its medal: an iridescent band whose
   colours drift along it, and a glint of light that sweeps across every few
   seconds. The glint is a clipped pseudo-element so it never widens the band. */
.wp-amb.wp-amb--ribbon.wp-amb--t-diamond {
  color: #1F2B55;
  /* saturated enough to read on a white page; the edge keeps it off the background */
  background: linear-gradient(100deg, #DDF0FF 0%, #A9D4FF 18%, #CDB9FF 36%, #F2F8FF 50%, #9EDCFF 64%, #FFC9EA 82%, #DDF0FF 100%);
  background-size: 200% 100%;
  border: 1px solid rgba(74,99,174,.55);
  animation: wp-amb-iri 7s linear infinite;
  overflow: hidden;
}
.wp-amb.wp-amb--ribbon.wp-amb--t-diamond::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -30%;
  width: 22%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
  transform: skewX(-20deg);
  animation: wp-amb-glint 4.2s cubic-bezier(.45,0,.25,1) infinite;
  pointer-events: none;
}
@keyframes wp-amb-iri { to { background-position: -200% 0; } }
@keyframes wp-amb-glint { 0% { left: -30%; } 45%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .wp-amb.wp-amb--ribbon.wp-amb--t-diamond, .wp-amb.wp-amb--ribbon.wp-amb--t-diamond::after { animation: none; }
  .wp-amb.wp-amb--ribbon.wp-amb--t-diamond::after { display: none; }
}

/* Small screens: the medal keeps its size (it IS the badge), the words shrink. */
@media (max-width: 480px) {
  .wp-amb.wp-amb--br { right: 12px; }
  .wp-amb.wp-amb--bl { left: 12px; }
  .wp-amb { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 12px !important; }
  .wp-amb.wp-amb--tab { bottom: 0; }
  .wp-amb.wp-amb--seal .wp-amb__medal { width: 44px !important; height: 44px !important; }
  /* the ribbon's offsets are geometry, not margins — the 12px gutter above must not reach it */
  .wp-amb.wp-amb--ribbon { bottom: 53px; }
  .wp-amb.wp-amb--ribbon.wp-amb--br { right: -75px; }
  .wp-amb.wp-amb--ribbon.wp-amb--bl { left: -75px; }
}
@media (prefers-reduced-motion: reduce) { .wp-amb, .wp-amb:hover { transition: none; transform: none; } }
@media print { .wp-amb { display: none !important; } }
/* The editor's own bar owns the bottom of the screen while editing. */
body:has(#wp-editbar) .wp-amb { display: none !important; }