/* Coach Portal preview trigger + full-screen overlay styles, for
   coach-preview-embed.html's <link> tag on winfinityfitness.com.

   Hosted externally rather than an inline <style> block for the same
   reason arsenal-embed.js is external (see arsenal-embed.html's own
   comment): WordPress's content pipeline can silently rewrite plain quote
   characters wherever it finds them in pasted content -- harmless in
   prose, but it can turn 'Segoe UI' into curly smart quotes and break the
   font-family declaration. A <link href> pointing at a GitHub-Pages-hosted
   file is immune to that; the browser fetches those bytes exactly as
   committed, never passing through WordPress's post-content rendering. */

#wfCoachPreviewBtn {
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.82rem; color: #ff9f43; text-decoration: underline;
  text-underline-offset: 3px;
}
#wfCoachPreviewBtn:hover { color: #ffb668; }

/* Full-viewport takeover -- reads as the actual app opening, not a modal
   floating over the marketing page, and identical on mobile and desktop
   (no separate "shrink into a phone frame" treatment on wider screens). */
.wf-coach-preview-overlay {
  position: fixed; inset: 0; z-index: 9999; background: #0a0d12;
}
/* WordPress's own theme stylesheet loads after the browser's built-in
   [hidden]{display:none} rule and can carry equal specificity (a class
   selector vs. an attribute selector are both 0,1,0) -- whichever comes
   LAST in the cascade wins a tie, which previously let an unconditional
   display rule on .wf-coach-preview-overlay beat the hidden attribute
   outright. This raises specificity for the hidden state specifically so
   it always wins regardless of stylesheet order. */
.wf-coach-preview-overlay[hidden] { display: none !important; }

.wf-coach-preview-overlay iframe {
  width: 100%; height: 100%; border: none; display: block; background: #0a0d12;
}

/* Floating close button, pinned to the top-right corner over the iframe --
   env(safe-area-inset-*) keeps it clear of the notch/status bar cutout on
   iOS when this is opened as a real full-screen takeover. */
.wf-coach-preview-close {
  position: fixed; z-index: 2;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(10,13,18,0.78); color: #e8ecf1; font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45); backdrop-filter: blur(4px);
}
.wf-coach-preview-close:hover { background: rgba(10,13,18,0.94); }