/**
 * Component: Callout Boxes (Tip, Warning, Editor, Info)
 * Location: Long Form Content (LFC) — CPTs and Archive pages
 * Design Tokens: Uses tokens from design-tokens-base.css and site-overrides/design-tokens.css
 * Spec: docs/superpowers/specs/2026-04-07-callout-boxes-design.md
 *
 * HTML Contract (generated by KOALA):
 *   <div class="CalloutBox-Tip">
 *     <p>Content here...</p>
 *   </div>
 *
 * Classes: CalloutBox-Tip, CalloutBox-Warning, CalloutBox-Editor, CalloutBox-Info
 */

/* ==========================================================================
   Shared Base Styles (Mobile First)
   ========================================================================== */

[class^="CalloutBox-"] {
  border-width: var(--border-width-medium);
  border-style: solid;
  border-radius: var(--radius-2xl);
  padding: var(--spacing-7) var(--spacing-8);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
  color: var(--color-default-text);
}

/* ::before — icon (background-image) + label (content) */
[class^="CalloutBox-"]::before {
  display: block;
  font-family: var(--font-family-paragraph);
  font-size: var(--font-size-h7);
  line-height: var(--line-height-h7);
  font-weight: var(--font-weight-semibold);
  color: var(--color-default-text);
  margin-bottom: var(--spacing-3);
  background-repeat: no-repeat;
  background-position: left center;
}

/* Body content indent — aligns past the icon */
[class^="CalloutBox-"] p,
[class^="CalloutBox-"] ul,
[class^="CalloutBox-"] ol {
  padding-left: var(--spacing-7);
}

/* ==========================================================================
   Variant: Tip
   Border: solid green | Background: green 10% | Icon: checkmark
   ========================================================================== */

.CalloutBox-Tip {
  border-color: var(--color-semantic-success);
  background-color: rgba(39, 167, 74, 0.1);
}

.CalloutBox-Tip::before {
  content: "Tip";
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2718%27%20height%3D%2718%27%20viewBox%3D%270%200%2018%2018%27%20fill%3D%27none%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20clip-rule%3D%27evenodd%27%20d%3D%27M9%2018C10.1819%2018%2011.3522%2017.7672%2012.4442%2017.3149C13.5361%2016.8626%2014.5282%2016.1997%2015.364%2015.364C16.1997%2014.5282%2016.8626%2013.5361%2017.3149%2012.4442C17.7672%2011.3522%2018%2010.1819%2018%209C18%207.8181%2017.7672%206.64778%2017.3149%205.55585C16.8626%204.46392%2016.1997%203.47177%2015.364%202.63604C14.5282%201.80031%2013.5361%201.13738%2012.4442%200.685084C11.3522%200.232792%2010.1819%200%209%200C6.61305%200%204.32387%200.948211%202.63604%202.63604C0.948212%204.32387%200%206.61305%200%209C0%2011.3869%200.948212%2013.6761%202.63604%2015.364C4.32387%2017.0518%206.61305%2018%209%2018ZM8.768%2012.64L13.768%206.64L12.232%205.36L7.932%2010.519L5.707%208.293L4.293%209.707L7.293%2012.707L8.067%2013.481L8.768%2012.64Z%27%20fill%3D%27%2327A74A%27%2F%3E%3C%2Fsvg%3E");
  background-size: 18px 18px;
  padding-left: 26px; /* 18px icon + 8px gap */
}

/* ==========================================================================
   Variant: Warning
   Border: solid red | Background: red 10% | Icon: triangle exclamation
   ========================================================================== */

.CalloutBox-Warning {
  border-color: var(--color-semantic-error);
  background-color: rgba(220, 54, 69, 0.1);
}

.CalloutBox-Warning::before {
  content: "Warning";
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2720%27%20viewBox%3D%270%200%2022%2020%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M13.0024%201.16326C12.8035%200.810505%2012.5134%200.516747%2012.1619%200.312271C11.8104%200.107795%2011.4103%200%2011.0028%200C10.5952%200%2010.1951%200.107795%209.84362%200.312271C9.49211%200.516747%209.20196%200.810505%209.00307%201.16326L0.291331%2016.6188C0.0964571%2016.9645%20-0.00393141%2017.3547%200.000117819%2017.7507C0.00416705%2018.1467%200.112513%2018.5349%200.314415%2018.8766C0.516316%2019.2183%200.804762%2019.5017%201.15115%2019.6988C1.49754%2019.8958%201.88985%2019.9997%202.28918%2020H19.709C20.1085%2020%2020.501%2019.8964%2020.8477%2019.6994C21.1943%2019.5025%2021.483%2019.2191%2021.6851%2018.8773C21.8872%2018.5356%2021.9957%2018.1474%2021.9999%2017.7512C22.004%2017.355%2021.9036%2016.9646%2021.7087%2016.6188L13.0024%201.16326ZM12.3756%2015.0009C12.3756%2015.3625%2012.2308%2015.7092%2011.973%2015.9649C11.7152%2016.2206%2011.3655%2016.3643%2011.0009%2016.3643C10.6363%2016.3643%2010.2867%2016.2206%2010.0289%2015.9649C9.77108%2015.7092%209.62625%2015.3625%209.62625%2015.0009C9.62625%2014.6393%209.77108%2014.2925%2010.0289%2014.0368C10.2867%2013.7811%2010.6363%2013.6375%2011.0009%2013.6375C11.3655%2013.6375%2011.7152%2013.7811%2011.973%2014.0368C12.2308%2014.2925%2012.3756%2014.6393%2012.3756%2015.0009ZM10.0845%2010.9107V6.36599C10.0845%206.12493%2010.181%205.89374%2010.3529%205.72328C10.5248%205.55282%2010.7579%205.45706%2011.0009%205.45706C11.244%205.45706%2011.4771%205.55282%2011.6489%205.72328C11.8208%205.89374%2011.9174%206.12493%2011.9174%206.36599V10.9107C11.9174%2011.1517%2011.8208%2011.3829%2011.6489%2011.5534C11.4771%2011.7238%2011.244%2011.8196%2011.0009%2011.8196C10.7579%2011.8196%2010.5248%2011.7238%2010.3529%2011.5534C10.181%2011.3829%2010.0845%2011.1517%2010.0845%2010.9107Z%27%20fill%3D%27%23DC3645%27%2F%3E%3C%2Fsvg%3E");
  background-size: 22px 20px;
  padding-left: 30px; /* 22px icon + 8px gap */
}

/* ==========================================================================
   Variant: Editor
   Border: solid gold | Background: gold 10% | Icon: pencil/edit
   ========================================================================== */

.CalloutBox-Editor {
  border-color: var(--color-accent-gold-default);
  background-color: rgba(252, 193, 20, 0.1);
}

.CalloutBox-Editor::before {
  content: "Editor";
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2718%27%20viewBox%3D%270%200%2019.5%2019%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M16%2010C16.7%2010%2017.37%2010.13%2018%2010.35V6L12%200H2C0.89%200%200%200.89%200%202V16C0%2016.5304%200.210714%2017.0391%200.585786%2017.4142C0.960859%2017.7893%201.46957%2018%202%2018H10.35C10.13%2017.37%2010%2016.7%2010%2016C10%2012.69%2012.69%2010%2016%2010ZM11%201.5L16.5%207H11V1.5ZM19.5%2014.25L14.75%2019L12%2016L13.16%2014.84L14.75%2016.43L18.34%2012.84L19.5%2014.25Z%27%20fill%3D%27%23FCC114%27%2F%3E%3C%2Fsvg%3E");
  background-size: 20px 19px;
  padding-left: 28px; /* 20px icon + 8px gap */
}

/* ==========================================================================
   Variant: Info
   Border: DASHED blue | Background: blue 10% | Icon: info circle
   ========================================================================== */

.CalloutBox-Info {
  border-style: dashed;
  border-color: var(--color-primary);
  background-color: rgba(41, 156, 216, 0.1);
}

.CalloutBox-Info::before {
  content: "Info";
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M2.22222%200H17.7778C18.3671%200%2018.9324%200.234126%2019.3491%200.650874C19.7659%201.06762%2020%201.63285%2020%202.22222V17.7778C20%2018.3667%2019.7667%2018.9333%2019.3444%2019.3444C18.9333%2019.7667%2018.3667%2020%2017.7778%2020H2.22222C1.63333%2020%201.06667%2019.7667%200.655555%2019.3444C0.233333%2018.9333%200%2018.3667%200%2017.7778V2.22222C0%200.988889%200.988889%200%202.22222%200ZM10.3333%204.76667C10.1222%205%2010%205.26667%2010%205.55556C10%205.85556%2010.1222%206.11111%2010.3333%206.34444C10.5556%206.55556%2010.8222%206.66667%2011.1111%206.66667C11.4111%206.66667%2011.6667%206.55556%2011.9%206.34444C12.1111%206.11111%2012.2222%205.85556%2012.2222%205.55556C12.2222%205.26667%2012.1111%205%2011.9%204.76667C11.6667%204.56667%2011.4111%204.44444%2011.1111%204.44444C10.8222%204.44444%2010.5556%204.56667%2010.3333%204.76667ZM7.55556%209.96667C7.44445%2010.0667%207.44445%2010.0778%207.52222%2010.1889L7.57778%2010.2778L7.61111%2010.3444C7.68889%2010.4889%207.7%2010.4889%207.82222%2010.4C7.96667%2010.3%208.21111%2010.1444%208.62222%209.9C9.64445%209.24444%209.44445%2010%208.98889%2011.6667C8.74445%2012.5889%208.43333%2013.7667%208.2%2015.1333C7.93333%2017.0778%209.67778%2016.0778%2010.1333%2015.7778C10.5556%2015.5111%2011.6%2014.7778%2011.8444%2014.6111L11.8889%2014.5889C12.0222%2014.4889%2011.9667%2014.4444%2011.8667%2014.2889L11.8%2014.2C11.7111%2014.0778%2011.6222%2014.1667%2011.6222%2014.1667L11.4444%2014.2889C10.9444%2014.6222%2010.2556%2015.1%2010.1444%2014.7222C10.0444%2014.4444%2010.4556%2012.9333%2010.8778%2011.3889C11.0667%2010.7111%2011.2556%2010%2011.4%209.41111L11.4222%209.34444C11.5%208.85556%2011.6667%207.91111%2010.8556%207.97778C9.96667%208.05556%207.55556%209.96667%207.55556%209.96667Z%27%20fill%3D%27%23299CD8%27%2F%3E%3C%2Fsvg%3E");
  background-size: 20px 20px;
  padding-left: 28px; /* 20px icon + 8px gap */
}