/**
 * ColorDots Base Styles v4.1.1
 * Build: "Grouped Harmony"
 * Date: 2026-02-15
 * 
 * 3 Layout Modes:
 * - FLOAT:  align=left/right, DOT toward content, caption beside
 * - BLOCK:  align=wide/full, caption below, textalign positions group
 * - INLINE: align=center, caption below, single in flow
 * 
 * Changes in 4.1.1:
 * - ADD: Multi-Dot Grouping via WP Group Block
 *   - Group "Row" layout → Dots side by side
 *   - Group "Stack" layout → Dots stacked vertically
 * 
 * Changes in 4.1.0:
 * - FIX: Float DOT position (toward content column)
 * - FIX: Caption alignment (flush against dot)
 * - FIX: Code + Name on one line, both bold
 * - ADD: Line-clamp for block mode descriptions
 * - REDUCE: Block caption max-widths (~1/3 smaller)
 */

/* ================================
   CSS Custom Properties
   ================================ */

:root {
  --colordot-gap: 1em;
  --colordot-caption-width-s: 200px;
  --colordot-caption-width-m: 280px;
  --colordot-caption-width-l: 400px;
  --colordot-caption-width-hero: 560px;
}

/* ================================
   Base Figure Styles
   ================================ */

.wp-block-colordot {
  display: flex;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Dot element shared */
.wp-block-colordot .colordot {
  position: relative;
  width: var(--colordot-size);
  height: var(--colordot-size);
  flex-shrink: 0;
  cursor: pointer;
}

/* Figcaption shared */
.wp-block-colordot figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

/* ================================
   MODE: FLOAT (align=left/right)
   Caption beside dot, away from content
   Multi-dot stacks vertically (COLUMN)
   ================================ */

.wp-block-colordot.colordot--mode-float {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--colordot-gap);
  width: fit-content;
  max-width: 45%;
  margin-bottom: 1em;
}

/* Float left: Dot at left edge of content column */
.wp-block-colordot.colordot--mode-float.alignleft {
  float: left;
  margin-left: 0;
  margin-right: var(--colordot-gap);
}

/* Float right: Dot at right edge of content column */
.wp-block-colordot.colordot--mode-float.alignright {
  float: right;
  margin-right: 0;
  margin-left: var(--colordot-gap);
}

/* Caption BEFORE dot (float left: [Caption][DOT] | Content |) */
.wp-block-colordot.colordot--caption-before figcaption {
  text-align: right; /* flush against dot */
}

/* Caption AFTER dot (float right: | Content | [DOT][Caption]) */
.wp-block-colordot.colordot--caption-after figcaption {
  text-align: left; /* flush against dot */
}

/* Float caption widths by size */
.wp-block-colordot.colordot--mode-float.colordot--size-s figcaption {
  width: var(--colordot-caption-width-s);
}

.wp-block-colordot.colordot--mode-float.colordot--size-m figcaption {
  width: var(--colordot-caption-width-m);
}

.wp-block-colordot.colordot--mode-float.colordot--size-l figcaption {
  width: var(--colordot-caption-width-l);
}

.wp-block-colordot.colordot--mode-float.colordot--hero figcaption {
  width: var(--colordot-caption-width-hero);
}

/* ================================
   MODE: BLOCK (align=wide/full)
   Caption below, flexbox for ROW
   textalign positions the group
   ================================ */

.wp-block-colordot.colordot--mode-block {
  flex-direction: column;
  align-items: center;
  gap: var(--colordot-gap);
  width: 100%;
}

/* Wide alignment */
.wp-block-colordot.colordot--mode-block.alignwide {
  max-width: var(--wp--style--global--wide-size, 1920px);
  margin-left: auto;
  margin-right: auto;
}

/* Full alignment */
.wp-block-colordot.colordot--mode-block.alignfull {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Text-align positions the dot (and caption below it) */
.wp-block-colordot.colordot--textalign-left {
  align-items: flex-start;
}

.wp-block-colordot.colordot--textalign-left figcaption {
  text-align: left;
}

.wp-block-colordot.colordot--textalign-center {
  align-items: center;
}

.wp-block-colordot.colordot--textalign-center figcaption {
  text-align: center;
}

.wp-block-colordot.colordot--textalign-right {
  align-items: flex-end;
}

.wp-block-colordot.colordot--textalign-right figcaption {
  text-align: right;
}

/* Block caption widths by size (reduced ~1/3) */
.wp-block-colordot.colordot--mode-block.colordot--size-s figcaption,
.wp-block-colordot.colordot--mode-block.colordot--size-m figcaption {
  max-width: 260px;
}

.wp-block-colordot.colordot--mode-block.colordot--size-l figcaption {
  max-width: 400px;
}

.wp-block-colordot.colordot--mode-block.colordot--hero figcaption {
  max-width: 530px;
}

/* Line clamp for block mode captions */
.wp-block-colordot.colordot--mode-block .colordot-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================
   MODE: INLINE (align=center)
   Single dot in text flow
   ================================ */

.wp-block-colordot.colordot--mode-inline {
  flex-direction: column;
  align-items: center;
  gap: var(--colordot-gap);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.wp-block-colordot.colordot--mode-inline figcaption {
  text-align: center;
  max-width: 400px;
}

/* ================================
   Typography
   ================================ */

/* Figcaption: Code + Name inline, Description below */
.wp-block-colordot figcaption {
  display: block;
}

/* Code + Name on same line */
.wp-block-colordot .colordot-code,
.wp-block-colordot .colordot-name {
  display: inline;
  font-size: var(--wp--preset--font-size--tiny, 14px);
  line-height: 1.3;
  color: var(--wp--preset--color--foreground, #111);
}

/* Code: Bold */
.wp-block-colordot .colordot-code {
  font-family: "Uni Neue Bold", "Uni Neue", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Name: Bold (same as code) */
.wp-block-colordot .colordot-name {
  font-family: "Uni Neue Bold", "Uni Neue", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
}

/* Description: Block, below code+name */
.wp-block-colordot .colordot-description {
  display: block;
  font-family: "Uni Neue", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--wp--preset--font-size--tiny, 14px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--foreground, #111);
  opacity: 0.7;
  margin-top: 0.25em;
}

/* Size L: Larger typography */
.wp-block-colordot.colordot--size-l .colordot-code,
.wp-block-colordot.colordot--size-l .colordot-name {
  font-size: var(--wp--preset--font-size--small, 16px);
}

.wp-block-colordot.colordot--size-l .colordot-description {
  font-size: var(--wp--preset--font-size--small, 16px);
}

/* Size Hero: Even larger */
.wp-block-colordot.colordot--hero .colordot-code,
.wp-block-colordot.colordot--hero .colordot-name {
  font-size: var(--wp--preset--font-size--large, 24px);
}

.wp-block-colordot.colordot--hero .colordot-description {
  font-size: var(--wp--preset--font-size--medium, 18px);
}

/* ================================
   Multi-Dot Grouping (WP Group Block)
   ================================ */

/**
 * User wraps multiple [colordots] in a WordPress Group Block.
 * - Group "Row" layout → Dots side by side
 * - Group "Stack" layout → Dots stacked vertically
 * 
 * WordPress adds .is-layout-flex for Row, .is-layout-flow for Stack.
 */

/* ROW: Group with Flex layout */
.wp-block-group.is-layout-flex > .wp-block-colordot {
  /* Reset float behavior inside flex container */
  float: none !important;
  margin: 0;
}

.wp-block-group.is-layout-flex > .wp-block-colordot.colordot--mode-float,
.wp-block-group.is-layout-flex > .wp-block-colordot.colordot--mode-block {
  /* Let flexbox handle spacing */
  max-width: none;
}

/* ROW: Captions below when in row */
.wp-block-group.is-layout-flex > .wp-block-colordot {
  flex-direction: column;
  align-items: center;
}

.wp-block-group.is-layout-flex > .wp-block-colordot figcaption {
  text-align: center;
}

/* STACK: Group with Flow/Constrained layout */
.wp-block-group.is-layout-flow > .wp-block-colordot,
.wp-block-group.is-layout-constrained > .wp-block-colordot {
  /* Center each dot */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

.wp-block-group.is-layout-flow > .wp-block-colordot:last-child,
.wp-block-group.is-layout-constrained > .wp-block-colordot:last-child {
  margin-bottom: 0;
}

/* ================================
   Clear Floats
   ================================ */

/* Clearfix for content after floated colordots */
.entry-content::after,
.wp-block-post-content::after {
  content: "";
  display: table;
  clear: both;
}

/* ================================
   Responsive
   ================================ */

@media (max-width: 781px) {
  /* Float: Remove float, stack vertically */
  .wp-block-colordot.colordot--mode-float {
    float: none !important;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .wp-block-colordot.colordot--mode-float.colordot--caption-before,
  .wp-block-colordot.colordot--mode-float.colordot--caption-after {
    flex-direction: column;
  }
  
  .wp-block-colordot.colordot--mode-float figcaption {
    text-align: center;
    width: auto;
    max-width: 100%;
  }
  
  /* Block: Center everything */
  .wp-block-colordot.colordot--mode-block {
    align-items: center;
  }
  
  .wp-block-colordot.colordot--mode-block figcaption {
    text-align: center;
  }
  
  /* All caption widths fluid on mobile */
  .wp-block-colordot figcaption {
    width: auto !important;
    max-width: 90vw !important;
  }
}

/* ================================
   Accessibility
   ================================ */

@media (prefers-reduced-motion: reduce) {
  .wp-block-colordot .colordot,
  .wp-block-colordot .colordot * {
    transition: none !important;
    animation: none !important;
  }
}

/* ================================
   Print
   ================================ */

@media print {
  .wp-block-colordot.colordot--mode-float {
    float: none;
    margin: 1em auto;
  }
  
  .wp-block-colordot .colordot__layer,
  .wp-block-colordot .colordot__gradient {
    display: none;
  }
}

/* ================================
   Debug (uncomment for debugging)
   ================================ */

/*
.entry-content,
.wp-block-post-content {
  border: 1px solid red;
}

.wp-block-colordot {
  outline: 2px solid red;
}

.wp-block-colordot figcaption {
  outline: 1px solid blue;
}
*/