{# ============================================================================
   atoms.html — Jinja macros for every atomic primitive

   Import in templates: `{% from 'atoms.html' import wordmark, glyph, pill %}`
   Every atom is pure markup — no inline CSS, all classes come from
   components.css.
   ============================================================================ #}

{# glyph — red typographic punctuation. Use for ★ / → / ▲ / + / →·← inside body flow #}
{% macro glyph(char) -%}
<span class="wf-glyph">{{ char }}</span>
{%- endmacro %}

{# arrow — lead arrow (→, →→, →▪) rendered in accent. Use inside labels / meta pointers #}
{% macro arrow(char='→') -%}
<span class="wf-arrow">{{ char }}</span>
{%- endmacro %}

{# label — uppercase eyebrow above a section head or card #}
{% macro label(text) -%}
<span class="wf-label">{{ text }}</span>
{%- endmacro %}

{# wordmark — brand name typeset in-place with optional red glyph + optional trademark tail.
   size: sm | md | default | lg | xl (default maps to no modifier; 18px) #}
{% macro wordmark(brand, glyph_char='', size='', tm=false, with_break=false) -%}
<span class="wf-wordmark{% if size %} {{ size }}{% endif %}">
  {{ brand }}{% if with_break %}<br>{% endif %}{% if glyph_char %} <span class="wf-glyph">{{ glyph_char }}</span>{% endif %}{% if tm %}<sup style="font-size:0.5em;vertical-align:super;">™</sup>{% endif %}
</span>
{%- endmacro %}

{# pill — compliance / status badge. variant: solid | outline | dark #}
{% macro pill(text, variant='solid') -%}
<span class="wf-pill {{ variant }}">{{ text }}</span>
{%- endmacro %}

{# button — filled dark CTA. variant: '' | ghost | small #}
{% macro button(label, variant='') -%}
<button class="wf-btn{% if variant %} {{ variant }}{% endif %}">{{ label }}</button>
{%- endmacro %}

{# link-arrow — the default wireframe CTA. variant: '' (→▪) | plain (→) #}
{% macro link_arrow(label, variant='') -%}
<a class="wf-link-arrow{% if variant %} {{ variant }}{% endif %}">{{ label }}</a>
{%- endmacro %}

{# media-box — plain grey placeholder (NO X cross-lines).
   variant: '' | dark | tall | wide
   label: optional text rendered inside the box (e.g. "UI Image Snippet") #}
{% macro media_box(label='', variant='') -%}
<div class="wf-media-box{% if variant %} {{ variant }}{% endif %}">{% if label %}{{ label }}{% endif %}</div>
{%- endmacro %}

{# avatar — testimonial identity stub; no image, just a disc #}
{% macro avatar() -%}
<span class="wf-avatar"></span>
{%- endmacro %}

{# input — hairline-underlined email/text field. No visible border by default (the form molecule provides the underline) #}
{% macro input(placeholder='', type='text') -%}
<input class="wf-input" type="{{ type }}" placeholder="{{ placeholder }}">
{%- endmacro %}

{# hairline — standalone divider. variant: '' | accent (red) #}
{% macro hairline(variant='') -%}
<div class="wf-hr{% if variant %} {{ variant }}{% endif %}"></div>
{%- endmacro %}

{# cert-badge — circular compliance stamp. body: list of lines to stack inside #}
{% macro cert_badge(lines) -%}
<div class="wf-cert-badge">
  {% for line in lines -%}
    <span{% if loop.last and lines|length > 1 %} class="lg"{% endif %}>{{ line }}</span>
  {% endfor -%}
</div>
{%- endmacro %}

{# browser-dots — the traffic-light dots in the top strip #}
{% macro browser_dots() -%}
<div class="wf-browser-dots"><span></span><span></span><span></span></div>
{%- endmacro %}