/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/* =============================================================================
   DOCUMENTATION STYLES
   Consumes Core Framework tokens: --primary, --text-body, --text-title,
   --bg-surface, --text-*, --space-*, --radius-xs.
   Only doc-specific values that have no CF equivalent are defined here.
   Note: CF sets html { font-size: 62.5% } so 1rem = 10px.
         All fixed sizes below are expressed in em (relative to component
         font-size) or use CF fluid tokens to stay correct at every breakpoint.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Doc-specific tokens — no Core Framework equivalent
   ----------------------------------------------------------------------------- */
:root {
  --doc-line-height:               1.75;
  --doc-color-muted:               #6b7280;
  --doc-color-border:              rgba(0, 0, 0, 0.12);
  --doc-color-link-hover:          #8B1B20;
  --doc-color-code-bg:             #1e1e2e;
  --doc-color-code-text:           #cdd6f4;
  --doc-color-callout-bg:          #FDF3F3;
  --doc-color-placeholder-image:   #FAE8E8;
  --doc-color-placeholder-diagram: #dcfce7;
}

/* -----------------------------------------------------------------------------
   Post content typography — scoped to Bricks Post Content element
   ----------------------------------------------------------------------------- */
.brxe-post-content {
  font-size:   var(--text-m);           /* test: ~16–18px fluid */
  line-height: var(--doc-line-height);
  color:       var(--text-body);
}

/* Headings */
.brxe-post-content h2,
.brxe-post-content h3,
.brxe-post-content h4 {
  line-height:   1.3;
  font-weight:   700;
  color:         var(--text-title);
  margin-top:    var(--space-xl);
  margin-bottom: var(--space-s);
}

.brxe-post-content h2 { font-size: var(--text-2xl); }
.brxe-post-content h3 { font-size: var(--text-xl); }
.brxe-post-content h4 { font-size: var(--text-l); }

.brxe-post-content > h2:first-child,
.brxe-post-content > h3:first-child,
.brxe-post-content > h4:first-child {
  margin-top: 0;
}

/* Paragraphs */
.brxe-post-content p {
  margin-top:    0;
  margin-bottom: var(--space-m);
}

/* Links */
.brxe-post-content a {
  color:                 var(--primary);
  text-decoration:       underline;
  text-underline-offset: 0.2em;
}

.brxe-post-content a:hover {
  color: var(--doc-color-link-hover);
}

/* Lists */
.brxe-post-content ul,
.brxe-post-content ol {
  margin-top:    0;
  margin-bottom: var(--space-m);
  padding-left:  1.5em;
}

.brxe-post-content ul { list-style-type: disc; }
.brxe-post-content ol { list-style-type: decimal; }

.brxe-post-content li {
  margin-bottom: var(--space-xs);
}

.brxe-post-content li:last-child {
  margin-bottom: 0;
}

/* Horizontal rule */
.brxe-post-content hr {
  border:        none;
  border-top:    1px solid var(--doc-color-border);
  margin-top:    var(--space-l);
  margin-bottom: var(--space-l);
}

/* Inline code */
.brxe-post-content code {
  font-family:      ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size:        0.875em;
  background-color: var(--bg-surface);
  color:            var(--primary);
  border:           1px solid var(--doc-color-border);
  border-radius:    var(--radius-xs);
  padding:          0.1em 0.35em;
}

/* Strong & em */
.brxe-post-content strong { font-weight: 700; }
.brxe-post-content em     { font-style: italic; }

/* -----------------------------------------------------------------------------
   .doc-code-block — fenced code blocks
   ----------------------------------------------------------------------------- */
.doc-code-block {
  font-family:      ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size:        0.875em;
  line-height:      1.65;
  background-color: var(--doc-color-code-bg);
  color:            var(--doc-color-code-text);
  border-radius:    var(--radius-xs);
  padding:          var(--space-m);
  margin-bottom:    var(--space-m);
  overflow-x:       auto;
  white-space:      pre;
}

.doc-code-block code {
  font-family:      inherit;
  font-size:        inherit;
  background-color: transparent;
  color:            inherit;
  border:           none;
  border-radius:    0;
  padding:          0;
}

/* -----------------------------------------------------------------------------
   .doc-table-wrapper — horizontally scrollable table container
   ----------------------------------------------------------------------------- */
.doc-table-wrapper {
  width:         100%;
  overflow-x:    auto;
  margin-bottom: var(--space-m);
  border-radius: var(--radius-xs);
  border:        1px solid var(--doc-color-border);
}

.doc-table-wrapper table {
  width:           100%;
  min-width:       52rem; /* 520px at 62.5% base */
  border-collapse: collapse;
  font-size:       0.95em;
}

.doc-table-wrapper thead {
  background-color: var(--bg-surface);
}

.doc-table-wrapper th,
.doc-table-wrapper td {
  padding:        0.6em 1em;
  text-align:     left;
  border-bottom:  1px solid var(--doc-color-border);
  vertical-align: top;
}

.doc-table-wrapper th {
  font-weight:    600;
  font-size:      0.8em;
  color:          var(--doc-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space:    nowrap;
}

.doc-table-wrapper tbody tr:last-child td {
  border-bottom: none;
}

.doc-table-wrapper tbody tr:hover {
  background-color: var(--bg-surface);
}

/* -----------------------------------------------------------------------------
   .doc-callout — blockquote callout / note block
   ----------------------------------------------------------------------------- */
.doc-callout {
  margin:           0 0 var(--space-m);
  padding:          var(--space-s) var(--space-m);
  background-color: var(--doc-color-callout-bg);
  border-left:      4px solid var(--primary);
  border-radius:    0 var(--radius-xs) var(--radius-xs) 0;
}

.doc-callout p {
  margin-bottom: 0;
  color:         var(--text-body);
  font-size:     0.95em;
}

/* -----------------------------------------------------------------------------
   .doc-placeholder — image & diagram placeholder figures
   ----------------------------------------------------------------------------- */
.doc-placeholder {
  margin: 0 0 var(--space-m);
}

.doc-placeholder__box {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-xs);
  padding:          var(--space-l) var(--space-m);
  border:           2px dashed rgba(0, 0, 0, 0.25);
  border-radius:    var(--radius-xs);
  background-color: var(--bg-surface);
  text-align:       center;
  min-height:       14rem; /* ~140px at 62.5% base */
}

.doc-placeholder--image .doc-placeholder__box {
  background-color: var(--doc-color-placeholder-image);
  border-color:     #E8A0A2;
}

.doc-placeholder--diagram .doc-placeholder__box {
  background-color: var(--doc-color-placeholder-diagram);
  border-color:     #86efac;
}

.doc-placeholder__icon {
  font-size:   2em;
  line-height: 1;
}

.doc-placeholder__caption {
  font-size:   0.8em;
  font-weight: 500;
  color:       var(--doc-color-muted);
  max-width:   80%;
}

/* -----------------------------------------------------------------------------
   .doc-toc — table of contents navigation
   ----------------------------------------------------------------------------- */
.doc-toc {
  background-color: var(--bg-surface);
  border:           1px solid var(--doc-color-border);
  border-radius:    var(--radius-xs);
  padding:          var(--space-m) var(--space-l);
  margin-bottom:    var(--space-xl);
}

.doc-toc h2 {
  margin-top:     0;
  margin-bottom:  var(--space-s);
  font-size:      0.9em;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--doc-color-muted);
}

.doc-toc__list {
  margin:         0;
  padding-left:   1.25em;
  display:        flex;
  flex-direction: column;
  gap:            0.375em;
}

.doc-toc__list li {
  margin-bottom: 0;
  font-size:     0.95em;
}

.doc-toc__list a {
  color:           var(--primary);
  text-decoration: none;
  font-weight:     500;
}

.doc-toc__list a:hover {
  text-decoration:       underline;
  text-underline-offset: 0.2em;
}

/* -----------------------------------------------------------------------------
   Nav dropdown — active ancestor fix
   Bricks applies itemBackgroundColorActive to the inner trigger, which lacks
   the padding and border-radius set on the dropdown wrapper. This restores
   both properties on the active (current-menu-ancestor) dropdown trigger.
   ----------------------------------------------------------------------------- */
#brxe-xxgeqm .brxe-dropdown:has(> .brx-submenu-toggle.aria-current) {
  border-radius:    var(--brxw-radius-s) !important;
  background-color: var(--primary) !important;
}

/* -----------------------------------------------------------------------------
   .doc-diagram — embedded D2/SVG workflow diagrams
   ----------------------------------------------------------------------------- */
.doc-diagram {
  margin:    var(--space-l) 0;
  text-align: center;
}

.doc-diagram img {
  max-height:  50rem; /* ~500px — prevents oversized vertical diagrams */
  width:       auto;
  height:      auto;
  display:     block;
  margin-left: auto;
  margin-right: auto;
}

/* -----------------------------------------------------------------------------
   .blog-inline-image — inline content images with editorial caption
   ----------------------------------------------------------------------------- */
.blog-inline-image {
  margin: var(--space-l) 0;
}

.blog-inline-image img {
  width:         100%;
  height:        auto;
  border-radius: var(--radius-xs);
  display:       block;
}

.blog-inline-image figcaption {
  margin-top: var(--space-xs);
  font-size:  0.875em;
  line-height: 1.5;
}

.blog-inline-image figcaption strong {
  font-weight: 700;
  color:       var(--text-title);
}

.blog-inline-image .photo-credit {
  font-style:  italic;
  font-weight: 400;
  color:       var(--doc-color-muted);
}

/* -----------------------------------------------------------------------------
   Responsive adjustments
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .brxe-post-content h2 { font-size: var(--text-xl); }
  .brxe-post-content h3 { font-size: var(--text-l); }
  .brxe-post-content h4 { font-size: var(--text-m); }

  .doc-toc {
    padding: var(--space-s) var(--space-m);
  }

  .doc-placeholder__box {
    min-height: 10rem;
    padding:    var(--space-m);
  }
}