/*!
 * OSM Facebook Page — responsive shell for the official Facebook Page Plugin.
 * Framework-agnostic: used verbatim by the WordPress plugin and the Payload plugin.
 * Theme by overriding the --osmfb-* custom properties on .osmfb (or on :root).
 */

.osmfb {
  --osmfb-max: 500px;
  --osmfb-radius: 12px;
  --osmfb-border: #dddfe2;
  --osmfb-bg: #ffffff;
  --osmfb-fg: #1c1e21;
  --osmfb-muted: #65676b;
  --osmfb-accent: #1877f2;
  --osmfb-accent-fg: #ffffff;
  --osmfb-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  --osmfb-pad: 16px;
  --osmfb-font: inherit;

  display: block;
  width: 100%;
  font-family: var(--osmfb-font);
}

.osmfb *,
.osmfb *::before,
.osmfb *::after { box-sizing: border-box; }

.osmfb__inner {
  width: 100%;
  max-width: var(--osmfb-max);
  margin-left: auto;
  margin-right: auto;
}

.osmfb--align-left .osmfb__inner { margin-left: 0; margin-right: auto; }
.osmfb--align-right .osmfb__inner { margin-left: auto; margin-right: 0; }

.osmfb__heading {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--osmfb-fg);
}

.osmfb--align-center .osmfb__heading { text-align: center; }
.osmfb--align-right .osmfb__heading { text-align: right; }

/* ---- frame -------------------------------------------------------------- */

.osmfb__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--osmfb-radius);
  background: var(--osmfb-bg);
}

.osmfb--framed .osmfb__frame {
  border: 1px solid var(--osmfb-border);
  box-shadow: var(--osmfb-shadow);
}

/* Absolute so the iframe's own 180px minimum never feeds back into layout:
   a transform only scales the paint, not the box, so an in-flow iframe would
   widen narrow flex/grid columns instead of fitting inside them. The frame
   always carries an explicit height, set by the server and by JS. */
.osmfb__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border: 0;
  overflow: hidden;
  background: transparent;
  transform-origin: 0 0; /* set by JS when the container is narrower than FB's 180px floor */
  max-width: none;       /* defeat theme rules like `iframe { max-width:100% }` */
}

/* ---- skeleton ----------------------------------------------------------- */

.osmfb__skeleton {
  position: absolute;
  inset: 0;
  padding: var(--osmfb-pad);
  background: var(--osmfb-bg);
  pointer-events: none;
}

.osmfb__skeleton span {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, #e9ebee 25%, #f3f4f6 37%, #e9ebee 63%);
  background-size: 400% 100%;
  animation: osmfb-shimmer 1.4s ease infinite;
}

.osmfb__skeleton span:nth-child(1) { height: 76px; border-radius: 8px; margin-bottom: 14px; }
.osmfb__skeleton span:nth-child(2) { height: 14px; width: 55%; margin-bottom: 10px; }
.osmfb__skeleton span:nth-child(3) { height: 12px; width: 35%; }

@keyframes osmfb-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .osmfb__skeleton span { animation: none; }
}

.osmfb.is-loaded .osmfb__skeleton,
.osmfb.is-blocked .osmfb__skeleton { display: none; }

/* ---- consent gate ------------------------------------------------------- */

.osmfb__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--osmfb-pad);
  text-align: center;
  background: var(--osmfb-bg);
  color: var(--osmfb-fg);
}

.osmfb__consent p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--osmfb-muted);
}

.osmfb.is-consented .osmfb__consent { display: none; }

/* Without JavaScript the gate cannot do anything, so skip straight to the
   fallback card rather than showing a dead button. */
.osmfb:not(.is-js) .osmfb__consent { display: none; }

/* ---- buttons ------------------------------------------------------------ */

.osmfb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--osmfb-accent);
  color: var(--osmfb-accent-fg);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.osmfb__btn:hover,
.osmfb__btn:focus-visible { filter: brightness(.94); color: var(--osmfb-accent-fg); }
.osmfb__btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* ---- fallback card ------------------------------------------------------ */

.osmfb__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: var(--osmfb-pad);
  border: 1px solid var(--osmfb-border);
  border-radius: var(--osmfb-radius);
  background: var(--osmfb-bg);
  color: var(--osmfb-fg);
  text-align: center;
}

.osmfb__fallback-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #e9ebee;
}

.osmfb__fallback-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.osmfb__fallback-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--osmfb-muted);
}

/* The fallback is the no-JS / blocked state. With JS it stays hidden until we
   actually know the iframe failed, so it never flashes on a healthy load. */
.osmfb.is-js .osmfb__fallback { display: none; }
.osmfb.is-js.is-blocked .osmfb__fallback { display: flex; }
.osmfb.is-js.is-blocked .osmfb__frame { display: none; }

/* ---- visibility --------------------------------------------------------- */

@media (max-width: 781px) {
  .osmfb--hide-mobile { display: none !important; }
}

@media (min-width: 782px) {
  .osmfb--hide-desktop { display: none !important; }
}

/* ---- dark skin ---------------------------------------------------------- */

.osmfb--dark {
  --osmfb-border: #3a3b3c;
  --osmfb-bg: #242526;
  --osmfb-fg: #e4e6eb;
  --osmfb-muted: #b0b3b8;
  --osmfb-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.osmfb--dark .osmfb__skeleton span {
  background: linear-gradient(90deg, #3a3b3c 25%, #4a4b4c 37%, #3a3b3c 63%);
  background-size: 400% 100%;
}

.osmfb--dark .osmfb__fallback-avatar { background: #3a3b3c; }