/**
 * Camden Honeycomb Scale — print + screen styles (v0.10).
 *
 * Owns:
 *   1. Print stylesheet (CSS `mm` units → guaranteed real mm on paper)
 *   2. Screen-side variable defaults + dark-mode adaptive overrides
 *   3. Calibration + print UI button styling
 *   4. Mobile responsive breakpoints
 *
 * v0.10 added: dark mode adaptation via CSS custom properties scoped
 * to .cm-honeycomb-figure, button styling for action row.
 */

/* ─────────────────────────────────────────────────────────────────── */
/* SCREEN — variable defaults + scoped tokens                          */
/* ─────────────────────────────────────────────────────────────────── */

.cm-honeycomb-figure {
  /* SVG element fills/strokes resolve these at render time */
  --hc-cell-fill:     #FFFFFF;       /* hex interior */
  --hc-cell-text:     #061645;       /* size title, dimensions */
  --hc-page-bg:       transparent;   /* surrounding bg (theme provides) */
  --hc-bee-opacity:   0.55;          /* scattered decorative bees */

  /* Action button tokens */
  --hc-btn-bg:        transparent;
  --hc-btn-bg-hover:  #FFB300;       /* gold on hover */
  --hc-btn-border:    #FFB300;
  --hc-btn-text:      #061645;
  --hc-btn-text-hover:#FFFFFF;
}

/* Dark mode — chart adapts to dark backgrounds without becoming a
   white spotlight. */
@media (prefers-color-scheme: dark) {
  .cm-honeycomb-figure {
    --hc-cell-fill:     rgba(248, 245, 239, 0.05);  /* subtle cream tint */
    --hc-cell-text:     #F8F5EF;                     /* cream text on dark hex */
    --hc-bee-opacity:   0.70;
    --hc-btn-text:      #F8F5EF;
  }
}

/* If the theme uses a [data-theme="dark"] attribute, support that too */
[data-theme="dark"] .cm-honeycomb-figure,
[data-mode="dark"]  .cm-honeycomb-figure,
.dark-mode .cm-honeycomb-figure,
.dark      .cm-honeycomb-figure {
  --hc-cell-fill:     rgba(248, 245, 239, 0.05);
  --hc-cell-text:     #F8F5EF;
  --hc-bee-opacity:   0.70;
  --hc-btn-text:      #F8F5EF;
}

/* ─────────────────────────────────────────────────────────────────── */
/* ACTION BUTTONS — calibrate + print                                  */
/* ─────────────────────────────────────────────────────────────────── */

.cm-hc-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 8px;
}

.cm-hc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--hc-btn-border);
  border-radius: 6px;
  background: var(--hc-btn-bg);
  color: var(--hc-btn-text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 80ms ease;
  line-height: 1;
}

.cm-hc-btn:hover,
.cm-hc-btn:focus-visible {
  background: var(--hc-btn-bg-hover);
  color: var(--hc-btn-text-hover);
  transform: translateY(-1px);
  outline: none;
}

.cm-hc-btn:active {
  transform: translateY(0);
}

.cm-hc-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.30);
}

.cm-hc-btn-secondary {
  --hc-btn-bg-hover: rgba(255, 179, 0, 0.12);
  --hc-btn-text-hover: var(--hc-btn-text);
}

.cm-hc-btn-icon {
  flex-shrink: 0;
  display: block;
}

/* Per-cell SKU CTA hover */
.cm-hc-cta {
  cursor: pointer;
}
.cm-hc-cta text {
  transition: fill 200ms ease;
}
.cm-hc-cta:hover text {
  fill: #E89A00 !important;
}

/* Scattered decorative bees */
.cm-hc-scattered-bee {
  opacity: var(--hc-bee-opacity);
  transition: opacity 300ms ease;
}

/* ─────────────────────────────────────────────────────────────────── */
/* MOBILE RESPONSIVE                                                   */
/* ─────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .cm-honeycomb-figure {
    margin-left: 0;
    margin-right: 0;
  }
  .cm-honeycomb-figcaption__title {
    font-size: 22px;
  }
  .cm-honeycomb-figcaption__sub {
    font-size: 13px;
    line-height: 1.45;
  }
  .cm-hc-actions {
    flex-direction: column;
    align-items: stretch;
    margin-left: 24px;
    margin-right: 24px;
  }
  .cm-hc-btn {
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .cm-honeycomb-figcaption__title {
    font-size: 19px;
  }
  .cm-honeycomb-figcaption__sub {
    font-size: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────── */
/* PRINT — true millimetres on paper                                   */
/* ─────────────────────────────────────────────────────────────────── */

@media print {
  .cm-honeycomb-figure .cm-honeycomb-svg {
    transform: none !important;
    margin-bottom: 0 !important;
  }
  .cm-honeycomb-svg {
    width: 100% !important;
    max-width: 200mm;
    height: auto !important;
  }
  .cm-hc-actions,
  #cm-hc-cal-modal {
    display: none !important;
  }
  .cm-honeycomb-figcaption {
    color: #061645;
  }
  .cm-honeycomb-figcaption__title {
    font-size: 28pt;
    margin-bottom: 4mm;
  }
  .cm-honeycomb-figcaption__sub {
    font-size: 10pt;
    color: #061645;
    opacity: 0.85;
  }
  .cm-honeycomb-figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .cm-honeycomb-figure::after {
    content: "Printed at 100% scale = true millimetres. Verify by measuring the £1 coin reference (23.43 mm).";
    display: block;
    font-size: 8pt;
    margin-top: 6mm;
    text-align: center;
    color: #061645;
    opacity: 0.75;
  }
  /* Force scattered bees to print at low opacity for printer ink savings */
  .cm-hc-scattered-bee {
    opacity: 0.45 !important;
  }
  header, footer, nav, .site-header, .site-footer, .nav, aside {
    display: none !important;
  }
}