/* ============================================================
   BLUE CODE — brand components (logo, diamond, buttons, tags)
   Requires colors_and_type.css.
   ============================================================ */

/* ---- Diamond motif (rotated rounded square) ---- */
.bc-diamond {
  display: inline-block;
  width: 0.52em; height: 0.52em;
  background: currentColor;
  border-radius: 22%;
  transform: rotate(45deg);
  vertical-align: middle;
  margin: 0 0.04em;
}

/* ---- Blocky square brackets (crop-mark style) ---- */
.bc-brk {
  display: inline-block;
  width: 0.34em; height: 0.92em;
  border: 0.16em solid currentColor;
  box-sizing: border-box;
}
.bc-brk--l { border-right: none; }
.bc-brk--r { border-left: none; }

/* ---- Wordmark lockup: [ BLUE ◆ CODE ] ----
   NOTE: the official logo is shipped as SVGs in assets/logo/
   (bluecode-wordmark-{blue|white|ink|gray|yellow}.svg and
   bluecode-iso-{...}.svg). Prefer those <img>s for any real usage.
   The CSS lockup below is a decorative fallback only. */
.bc-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--bc-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
  line-height: 1;
}
.bc-logo .bc-diamond { width: 0.46em; height: 0.46em; }
.bc-logo.on-dark { color: #fff; }
.bc-logo.yellow { color: var(--bc-yellow); }

/* ---- ISO mark: [◆] compact ---- */
.bc-iso {
  display: inline-flex; align-items: center; gap: 0.18em;
  color: var(--bc-blue);
  line-height: 1;
}

/* ============ BUTTONS ============ */
/* Primary outline — sharp corners, 2px border (signature) */
.bc-btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  padding: 16px 26px;
  border: 2px solid var(--bc-blue);
  background: transparent;
  color: var(--bc-blue);
  border-radius: 0;            /* sharp — brand default */
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background var(--dur) var(--ease-std), color var(--dur) var(--ease-std);
  text-decoration: none;
}
.bc-btn:hover { background: var(--bc-blue); color: #fff; }
.bc-btn:active { transform: translateY(1px); }

.bc-btn--yellow { border-color: var(--bc-yellow); color: var(--bc-yellow); }
.bc-btn--yellow:hover { background: var(--bc-yellow); color: #000; }

.bc-btn--white { border-color: #fff; color: #fff; }
.bc-btn--white:hover { background: #fff; color: #000; }

/* Filled solid */
.bc-btn--solid { background: var(--bc-blue); color: #fff; border-color: var(--bc-blue); }
.bc-btn--solid:hover { background: #0a1fbf; border-color: #0a1fbf; }

/* Header pill CTA — rounded outline */
.bc-btn--pill { border-radius: var(--radius-pill); padding: 12px 24px; font-size: 16px; }

/* Round arrow button — blue disc, white arrow (strong contrast on any surface) */
.bc-btn--round {
  width: 54px; height: 54px; padding: 0; border-radius: 50%;
  background: var(--bc-blue); border: none; color: #fff;
  font-size: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-std), color var(--dur) var(--ease-std);
}
.bc-btn--round:hover { transform: rotate(45deg); background: var(--bc-yellow); color: #000; }
/* Light variant for dark/colour backgrounds: white disc, blue arrow */
.bc-btn--round.is-light { background: #fff; color: var(--bc-blue); }
.bc-btn--round.is-light:hover { background: var(--bc-yellow); color: #000; }