/**
 * @file        share.css
 * @description The sharing console: card, labelled social buttons, short link, QR
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         263d9c95-2c99-4cf8-9f4a-13a1f1c8927f
 * @version     0.2.0.3
 * @created     2026-09-17
 * @updated     2026-09-17
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary - All rights reserved
 */

/*
 * REBUILT TO THE STITCH COMP'S SHARING CONSOLE. The block was a horizontal rule
 * with three icon circles under it; it is a CARD now, with the heading and the
 * buttons on one row at desktop width and the tools on a divided row beneath.
 *
 * SEMANTIC TOKENS ONLY, never a raw brand token and never a hex value, per
 * DESIGN.md - which is why the comp's `fill-[#0A66C2]` LinkedIn blue and
 * `text-[#1877F2]` Facebook blue are not here. The single exception is the
 * white behind the QR, which is not a colour choice: a QR must sit on white to
 * scan, and --surface-raised is white today but is a surface rather than a
 * promise about contrast with black modules.
 *
 * ONE BLOCK, FOUR CONTEXTS - book, author and event detail pages plus every
 * band of the services index - so it sets no page background and no outer
 * margin that assumes a parent. The including template owns its placement.
 */

.share {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* The heading and the buttons share a row once there is room for both. */
.share__intro {
  margin-block-end: var(--space-4);
}

.share__heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}

/*
 * The comp's subtitle, and it earns its line. A row of logos is decoration; a
 * sentence naming who to send this to is a prompt, and it is the difference
 * between a share block people look at and one they use.
 */
.share__lede {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  max-inline-size: 52ch;
}

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

.share__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.share__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* 44px is the WCAG 2.5.5 target floor. The comp says min-h-[40px]; that is
     the one measurement in it that this project does not follow, because a
     target below 44px is a barrier rather than a style. */
  min-block-size: 44px;
  padding-inline: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.share__link:hover,
.share__link:focus-visible {
  background: var(--surface-raised);
  border-color: var(--text-link);
}

.share__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.share__icon {
  inline-size: 18px;
  block-size: 18px;
  /* Single-path silhouettes taking the control's own colour. The platforms'
     brand guidelines all permit a monochrome mark, and three saturated brand
     blues in a row would out-shout the page they sit on. */
  fill: currentColor;
  flex-shrink: 0;
}

.share__icon--sm {
  inline-size: 16px;
  block-size: 16px;
}

/* The visible platform name. The accessible name is the link's aria-label,
   which says "Share on LinkedIn" rather than just naming the destination. */
.share__label {
  white-space: nowrap;
}

/* ---- Tools row (short link + QR) ------------------------------------------ */

.share__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}

.share__short {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.share__short-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.share__short-url {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  /* Selectable as text is the no-JavaScript path, so this must never become
     user-select: none however decorative it looks. */
  user-select: all;
  word-break: break-all;
}

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

/*
 * HIDDEN UNTIL share.js SAYS OTHERWISE. The class is added to <html> by the
 * script itself, so a page with JavaScript disabled or blocked never shows a
 * button that cannot work. The short link stays visible and selectable and the
 * QR stays present either way, so nothing is withheld - only the automation.
 */
.share__copy {
  display: none;
}

.has-share-copy .share__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding-inline: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-link);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.has-share-copy .share__copy:hover,
.has-share-copy .share__copy:focus-visible {
  border-color: var(--border-subtle);
  background: var(--surface-page);
}

.has-share-copy .share__copy:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- QR disclosure -------------------------------------------------------- */

/*
 * The comp opens the QR in a modal behind an onclick handler. A <details> gets
 * the same collapsed-by-default result with no JavaScript, nothing to trap
 * focus inside, and no way for the QR to become unreachable when scripting is
 * off - which this project tests for (NFR28).
 */
.share__qr-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-link);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.share__qr-summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.share__qr-figure {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
}

.share__qr-image {
  /* Drawn at 180px and displayed at 120px: the extra module density is what
     makes it scan from a phone at arm's length. Never below 96px - the quiet
     zone stops doing its job on a busy background. */
  inline-size: 120px;
  block-size: 120px;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  flex-shrink: 0;
}

.share__qr-caption {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* ---- Status --------------------------------------------------------------- */

.share__status {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: var(--space-3) 0 0;
  /* Reserves the line so an announcement does not reflow the card under the
     pointer that just clicked the button. */
  min-block-size: 1.5em;
}

/* ---- Wide layout ---------------------------------------------------------- */

/*
 * The comp puts the heading and the buttons side by side. Done at a width where
 * both actually fit rather than at a device breakpoint: below this the buttons
 * wrap under the heading, which is the right shape on a phone anyway.
 */
@media (min-width: 48rem) {
  .share {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: var(--space-6);
    padding: var(--space-6);
  }

  .share__intro {
    margin-block-end: 0;
  }

  .share__links {
    justify-content: flex-end;
  }

  .share__tools,
  .share__status {
    grid-column: 1 / -1;
  }
}

@media (max-width: 30rem) {
  .share__qr-figure {
    flex-direction: column;
    align-items: flex-start;
  }

  .share__short-url {
    inline-size: 100%;
  }
}