/**
 * NSN Social & Google News — front-end block styles.
 *
 * All selectors are scoped under `.nsn-sgn-block` to avoid leaking into the
 * host theme. The block is layout-driven via data attributes:
 *   data-layout="stacked|inline"
 *   data-size="default|compact"
 *   data-icon-style="simple|colored"
 *   data-theme="light|dark"
 *   data-labels="on|off"
 *
 * Mobile (<= 640px) always stacks regardless of the desktop layout, with
 * 44px minimum touch targets for share buttons.
 */

/* Screen-reader-only utility — keeps live regions invisible but readable by assistive tech. */
.nsn-sgn-sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.nsn-sgn-block {
  --nsn-sgn-fg: #1f2328;
  --nsn-sgn-fg-muted: #5f6368;
  --nsn-sgn-bg: #f6f7f9;
  --nsn-sgn-border: #e3e5e8;
  --nsn-sgn-button-bg: #ffffff;
  --nsn-sgn-button-border: #dadce0;
  --nsn-sgn-accent: var(--accentuation, #1a73e8);
  --nsn-sgn-text-on-accent: var(--textcolor-secondary, #ffffff);

  /* Brand colors used in icon_style="colored" mode. */
  --nsn-sgn-fb: #1877F2;
  --nsn-sgn-li: #0A66C2;
  --nsn-sgn-x: #000000;
  --nsn-sgn-wa: #25D366;
  --nsn-sgn-copy: #5F6368;

  background: var(--nsn-sgn-bg);
  border: 1px solid var(--nsn-sgn-border);
  border-radius: 12px;
  color: var(--nsn-sgn-fg);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-block: 1.5rem;
  margin-inline: 0;
  padding: 1rem 1.25rem;
}

.nsn-sgn-block[data-theme='dark'] {
  --nsn-sgn-fg: #f1f3f4;
  --nsn-sgn-fg-muted: #bdc1c6;
  --nsn-sgn-bg: #1f1f1f;
  --nsn-sgn-border: #3c4043;
  --nsn-sgn-button-bg: #2d2d2d;
  --nsn-sgn-button-border: #5f6368;
  --nsn-sgn-x: #ffffff;
}

.nsn-sgn-block[data-size='compact'] {
  padding: 0.625rem 0.875rem;
  gap: 0.5rem 1rem;
}

/* --- Layout: stacked (default) ------------------------------------------- */
.nsn-sgn-block[data-layout='stacked'] {
  flex-direction: column;
  align-items: flex-start;
}

/* --- Layout: inline ------------------------------------------------------ */
.nsn-sgn-block[data-layout='inline'] {
  align-items: center;
  justify-content: flex-start;
}

/* ---- Google News block -------------------------------------------------- */
.nsn-sgn-gnews {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.nsn-sgn-gnews__label {
  color: var(--nsn-sgn-fg-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.nsn-sgn-block[data-layout='stacked'] .nsn-sgn-gnews {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.nsn-sgn-gnews__link {
  align-items: center;
  background: transparent;
  border-radius: 8px;
  color: var(--nsn-sgn-fg);
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.25rem 0.375rem;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.nsn-sgn-gnews__link:hover,
.nsn-sgn-gnews__link:focus-visible {
  background-color: rgba(26, 115, 232, 0.08);
  color: var(--nsn-sgn-fg);
  text-decoration: none;
}

.nsn-sgn-gnews__link:focus-visible {
  outline: 2px solid var(--nsn-sgn-accent);
  outline-offset: 2px;
}

.nsn-sgn-gnews__image {
  display: block;
  flex: 0 0 auto;
  height: auto;
  width: auto;
}

.nsn-sgn-gnews__image--full {
  height: 50px;
  max-height: 50px;
}

.nsn-sgn-gnews__image--icon {
  height: 80px;
  max-height: 80px;
}

.nsn-sgn-block[data-size='compact'] .nsn-sgn-gnews__image--full {
  height: 40px;
  max-height: 40px;
}

.nsn-sgn-block[data-size='compact'] .nsn-sgn-gnews__image--icon {
  height: 60px;
  max-height: 60px;
}

/* Per-layout image swap: stacked shows the horizontal wordmark, inline shows the badge+text lockup. */
.nsn-sgn-block[data-layout='stacked'] .nsn-sgn-gnews__image--icon { display: none; }
.nsn-sgn-block[data-layout='inline']  .nsn-sgn-gnews__image--full { display: none; }

/* Inline layout: keep label + icon stacked vertically inside the gnews block so the whole article
   row (gnews + share) still fits on one line. */
.nsn-sgn-block[data-layout='inline'] .nsn-sgn-gnews {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

/* Colored icon style: wrap the Google News logo in a clean card-style button.
   Symmetric padding + modest border-radius so the logo is never clipped by rounded corners. */
.nsn-sgn-block[data-icon-style='colored'] .nsn-sgn-gnews__link {
  background-color: #fff;
  border: 1px solid #dadce0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
  padding: 0.625rem 1.25rem;
  justify-content: center;
}

.nsn-sgn-block[data-icon-style='colored'] .nsn-sgn-gnews__link:hover,
.nsn-sgn-block[data-icon-style='colored'] .nsn-sgn-gnews__link:focus-visible {
  background-color: #fff;
  border-color: #c6c8cb;
  box-shadow: 0 2px 8px rgba(60, 64, 67, 0.15);
  transform: translateY(-1px);
}

/* Inline layout: keep the colored card compact for the vertical badge lockup. */
.nsn-sgn-block[data-icon-style='colored'][data-layout='inline'] .nsn-sgn-gnews__link {
  padding: 0.5rem 1rem;
  border-radius: 14px;
}

/* ---- Share block -------------------------------------------------------- */
.nsn-sgn-share {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.625rem 0.875rem;
}

.nsn-sgn-block[data-layout='stacked'] .nsn-sgn-share {
  width: 100%;
}

.nsn-sgn-block[data-layout='inline'] .nsn-sgn-share {
  margin-inline-start: auto;
}

.nsn-sgn-share__label {
  color: var(--nsn-sgn-fg-muted);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.nsn-sgn-share__list {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nsn-sgn-share__item {
  margin: 0;
  padding: 0;
}

.nsn-sgn-share__button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--nsn-sgn-fg);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.375rem 0.5rem;
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.nsn-sgn-share__button:hover,
.nsn-sgn-share__button:focus-visible {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--nsn-sgn-fg);
}

.nsn-sgn-block[data-theme='dark'] .nsn-sgn-share__button:hover,
.nsn-sgn-block[data-theme='dark'] .nsn-sgn-share__button:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
}

.nsn-sgn-share__button:focus-visible {
  outline: 2px solid var(--nsn-sgn-accent);
  outline-offset: 2px;
}

.nsn-sgn-share__button:active {
  transform: scale(0.96);
}

.nsn-sgn-share__icon {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  line-height: 0;
  position: relative;
  width: 32px;
}

.nsn-sgn-share__icon > svg {
  transition: opacity 0.15s ease;
}

.nsn-sgn-block[data-size='compact'] .nsn-sgn-share__icon {
  height: 26px;
  width: 26px;
}

.nsn-sgn-share__icon svg {
  display: block;
  height: 20px;
  width: 20px;
}

.nsn-sgn-block[data-size='compact'] .nsn-sgn-share__icon svg {
  height: 16px;
  width: 16px;
}

.nsn-sgn-share__name {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
}

.nsn-sgn-block[data-labels='off'] .nsn-sgn-share__name {
  display: none;
}

/* When labels are off, only the icon chip remains — give it the full button background. */
.nsn-sgn-block[data-labels='off'] .nsn-sgn-share__button {
  padding: 0;
}

/* --- Icon style: colored — chip-only (default) --------------------------- */
.nsn-sgn-block[data-icon-style='colored'] .nsn-sgn-share__button[data-network='facebook'] .nsn-sgn-share__icon { background-color: var(--nsn-sgn-fb); color: #fff; }
.nsn-sgn-block[data-icon-style='colored'] .nsn-sgn-share__button[data-network='linkedin'] .nsn-sgn-share__icon { background-color: var(--nsn-sgn-li); color: #fff; }
.nsn-sgn-block[data-icon-style='colored'] .nsn-sgn-share__button[data-network='x']        .nsn-sgn-share__icon { background-color: var(--nsn-sgn-x);  color: #fff; }
.nsn-sgn-block[data-icon-style='colored'] .nsn-sgn-share__button[data-network='whatsapp'] .nsn-sgn-share__icon { background-color: var(--nsn-sgn-wa); color: #fff; }
.nsn-sgn-block[data-icon-style='colored'] .nsn-sgn-share__button[data-network='copy']     .nsn-sgn-share__icon { background-color: var(--nsn-sgn-copy); color: #fff; }

.nsn-sgn-block[data-icon-style='colored'][data-theme='dark'] .nsn-sgn-share__button[data-network='x'] .nsn-sgn-share__icon {
  background-color: #ffffff;
  color: #000000;
}

/* --- Icon style: colored + labels on → full-pill button (desktop only) -- */
/* Mobile always hides labels, so the chip-only treatment above stays right at <=640px. */
@media (min-width: 641px) {
  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'] .nsn-sgn-share__button {
    padding: 0.375rem 0.875rem;
    color: #fff;
  }

  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'] .nsn-sgn-share__button .nsn-sgn-share__icon {
    background-color: transparent;
    color: #fff;
    height: auto;
    width: auto;
  }

  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'] .nsn-sgn-share__button[data-network='facebook'] { background-color: var(--nsn-sgn-fb); }
  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'] .nsn-sgn-share__button[data-network='linkedin'] { background-color: var(--nsn-sgn-li); }
  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'] .nsn-sgn-share__button[data-network='x']        { background-color: var(--nsn-sgn-x); }
  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'] .nsn-sgn-share__button[data-network='whatsapp'] { background-color: var(--nsn-sgn-wa); }
  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'] .nsn-sgn-share__button[data-network='copy']     { background-color: var(--nsn-sgn-copy); }

  /* X in dark theme: brand color is white, so the pill flips to a dark fill. */
  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'][data-theme='dark'] .nsn-sgn-share__button[data-network='x'] { color: #000; }
  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'][data-theme='dark'] .nsn-sgn-share__button[data-network='x'] .nsn-sgn-share__icon { color: #000; }

  /* Hover feedback: brand bg stays, slight darken for tactility. */
  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'] .nsn-sgn-share__button:hover,
  .nsn-sgn-block[data-icon-style='colored'][data-labels='on'] .nsn-sgn-share__button:focus-visible {
    filter: brightness(0.92);
  }
}

/* --- Feedback (copy link) ------------------------------------------------ */
/* Lives inside .nsn-sgn-share__icon so the chip background stays constant during the copy state —
   only the SVG swaps via opacity, no flashy color overlay. */
.nsn-sgn-share__feedback {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.15s ease;
}

.nsn-sgn-share__feedback svg {
  display: block;
  height: 20px;
  width: 20px;
}

.nsn-sgn-block[data-size='compact'] .nsn-sgn-share__feedback svg {
  height: 16px;
  width: 16px;
}

.nsn-sgn-share__button[data-copied='true'] .nsn-sgn-share__icon > svg {
  opacity: 0;
}

.nsn-sgn-share__button[data-copied='true'] .nsn-sgn-share__feedback {
  opacity: 1;
}

/* --- Mobile (always stack, larger tap targets) --------------------------- */
@media (max-width: 640px) {
  .nsn-sgn-block,
  .nsn-sgn-block[data-layout='inline'] {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
  }

  .nsn-sgn-block[data-size='compact'] {
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
  }

  .nsn-sgn-gnews,
  .nsn-sgn-share {
    width: 100%;
  }

  .nsn-sgn-block[data-layout='inline'] .nsn-sgn-share {
    margin-inline-start: 0;
  }

  .nsn-sgn-share__list {
    gap: 0.625rem;
  }

  /* On mobile, labels next to icons get noisy fast — always hide them
     regardless of the desktop setting. */
  .nsn-sgn-share__name {
    display: none;
  }

  .nsn-sgn-share__button {
    padding: 0;
  }

  .nsn-sgn-share__icon {
    height: 40px;
    width: 40px;
  }

  .nsn-sgn-share__icon svg {
    height: 22px;
    width: 22px;
  }

  /* Make the un-colored icon chip visible on mobile so the row feels like a toolbar. */
  .nsn-sgn-block[data-icon-style='simple'] .nsn-sgn-share__icon {
    background-color: var(--nsn-sgn-button-bg);
    border: 1px solid var(--nsn-sgn-button-border);
  }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .nsn-sgn-share__button,
  .nsn-sgn-gnews__link {
    transition: none;
  }

  .nsn-sgn-share__button:active {
    transform: none;
  }
}