/* Host elements */
signal-bunting,
signal-flag {
  display: inline-block;
}

signal-pattern {
  display: block;
}

/* ---------- Vintage variant knobs ---------- */
:root {
  --sf-vintage-filter: sepia(0.28) saturate(0.78) contrast(0.96) brightness(1.03);
  /* --sf-vintage-bg: rgba(255, 250, 235, 0.85); */
  /* --sf-vintage-border: rgba(31, 58, 95, 0.18); */
}

/* ---------- Size presets (CSP-safe: no inline styles needed) ---------- */
.sf-size-fluid { --sf-size: clamp(22px, 6vw, 48px); } /* responsive default */
.sf-size-16 { --sf-size: 16px; }
.sf-size-20 { --sf-size: 20px; }
.sf-size-24 { --sf-size: 24px; }
.sf-size-28 { --sf-size: 28px; }
.sf-size-32 { --sf-size: 32px; }
.sf-size-36 { --sf-size: 36px; }
.sf-size-40 { --sf-size: 40px; }
.sf-size-48 { --sf-size: 48px; }
.sf-size-56 { --sf-size: 56px; }
.sf-size-64 { --sf-size: 64px; }

/* ---------- Bunting layout ---------- */
.sf-bunting {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;     /* cross-axis */
  justify-content: center; /* main-axis (nice for headers) */
  gap: var(--sf-gap, 8px);
}

/* Optional: vertical/stacked bunting */
.sf-bunting.sf-dir-col {
  flex-direction: column;
  flex-wrap: nowrap;
}

/* Each rendered flag SVG */
.sf-flag {
  display: block;
  flex: 0 0 auto;

  padding: var(--sf-pad, 4px);
  box-sizing: content-box;

  /* IMPORTANT: define width/height so SVG doesn't default to ~300px wide */
  width: var(--sf-size, 48px);
  height: var(--sf-size, 48px);
}

.sf-flag.sf-pennant {
  width: calc(var(--sf-size, 48px) * 1.9);
  height: calc(var(--sf-size, 48px) * 0.75);
}

.sf-flag use {
  pointer-events: none;
}

/* Space between words (bigger than normal gap) */
.sf-space {
  display: block;
  width: var(--sf-word-gap, calc(var(--sf-gap, 8px) * 2 + var(--sf-pad, 4px) * 2));
  height: 1px;
}

/* Vintage styling */
.sf-flag.sf-variant-vintage,
.sf-flag.sf-variant-vintage-plain {
  filter: var(--sf-vintage-filter);
  background: var(--sf-vintage-bg);
  /* border: 1px solid var(--sf-vintage-border); */
  border-radius: 5px;
}

/* ---------- Pattern preview element ---------- */
/* signal-pattern renders a repeating SVG pattern (using /pattern.svg as the tile). */
.sf-pattern {
  position: relative;
  width: 100%;
  min-height: var(--sf-pattern-min-height, 240px);
  border-radius: var(--sf-pattern-radius, 12px);
  overflow: hidden;
}

.sf-pattern > .sf-pattern-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Optional vintage filter for pattern preview */
.sf-pattern-svg.sf-variant-vintage,
.sf-pattern-svg.sf-variant-vintage-plain {
  filter: var(--sf-vintage-filter);
}

/* Gap presets */
.sf-gap-0  { --sf-gap: 0px; }
.sf-gap-2  { --sf-gap: 2px; }
.sf-gap-4  { --sf-gap: 4px; }
.sf-gap-6  { --sf-gap: 6px; }
.sf-gap-8  { --sf-gap: 8px; }
.sf-gap-10 { --sf-gap: 10px; }
.sf-gap-12 { --sf-gap: 12px; }
.sf-gap-14 { --sf-gap: 14px; }
.sf-gap-16 { --sf-gap: 16px; }
.sf-gap-18 { --sf-gap: 18px; }
.sf-gap-20 { --sf-gap: 20px; }
.sf-gap-24 { --sf-gap: 24px; }
.sf-gap-28 { --sf-gap: 28px; }
.sf-gap-32 { --sf-gap: 32px; }


/* Inline flags inserted by the "leading flag" helper */
.sf-inline-leading {
  display: inline-block;
  line-height: 0;

  /* Works in flex layouts too (if your heading is display:flex) */
  align-self: flex-end;

  /* Visual baseline nudge (tweak this value to match your font perfectly) */
  position: relative;
  top: var(--sf-inline-shift, 0.12em);

  margin-right: 0.10em;
}

.sf-inline-leading > svg {
  display: block; /* removes SVG baseline quirks */
}