/**
 * SWELL Theme Compatibility CSS
 * cebridge → cebridge-blog migration
 *
 * Extracted from SWELL theme (cebridge.jp) CSS custom properties and block styles.
 * Provides styling for SWELL-specific HTML classes remaining in migrated post content.
 */

/* ============================================================
   CSS Custom Properties (Color Tokens from SWELL)
   ============================================================ */
:root {
  --color_main: #3567bf;
  --color_main_dark: rgba(40, 77, 143, 1);
  --color_main_thin: rgba(66, 129, 239, 0.05);
  --color_text: #333;
  --color_link: #0284ff;
  --color_bg: #fdfdfd;
  --color_border: hsla(0, 0%, 78%, 0.5);
  --color_gray: hsla(0, 0%, 78%, 0.15);

  /* Markers */
  --color_mark_yellow: #fcf69f;
  --color_mark_orange: #ffddbc;
  --color_mark_blue: #b7e3ff;
  --color_mark_green: #bdf9c3;

  /* Deep colors */
  --color_deep01: #e44141;
  --color_deep02: #3d79d5;
  --color_deep03: #63a84d;
  --color_deep04: #f09f4d;

  /* Pale colors */
  --color_pale01: #fff2f0;
  --color_pale02: #f3f8fd;
  --color_pale03: #f1f9ee;
  --color_pale04: #fdf9ee;

  /* FAQ */
  --color_faq_q: #d55656;
  --color_faq_a: #6599b7;

  /* List icons */
  --color_list_check: #3567bf;
  --color_list_good: #86dd7b;
  --color_list_bad: #f36060;
  --color_list_triangle: #f4e03a;
  --color_list_num: #3567bf;

  /* SWELL font sizes */
  --swl-fz--xs: 0.75em;
  --swl-fz--small: 0.9em;
  --swl-fz--normal: 1rem;
  --swl-fz--medium: 1.1em;
  --swl-fz--large: 1.25em;
  --swl-fz--huge: 1.6em;
  --swl-block-margin: 2em;
  --swl-box_shadow: 0 2px 4px rgba(0,0,0,0.05), 0 4px 4px -4px rgba(0,0,0,0.1);
}

/* ============================================================
   Marker (Highlight) — 221 uses
   ============================================================ */
.swl-marker {
  display: inline;
  padding: 2px;
}
.mark_yellow { background: linear-gradient(transparent 60%, var(--color_mark_yellow) 60%); }
.mark_orange { background: linear-gradient(transparent 60%, var(--color_mark_orange) 60%); }
.mark_blue   { background: linear-gradient(transparent 60%, var(--color_mark_blue) 60%); }
.mark_green  { background: linear-gradient(transparent 60%, var(--color_mark_green) 60%); }

/* ============================================================
   Caption Box (cap_box) — 150 uses
   ============================================================ */
.cap_box {
  --capbox-color: var(--color_main);
  --capbox-color--bg: unset;
  position: relative;
  margin-bottom: var(--swl-block-margin);
}
.cap_box_ttl {
  align-items: center;
  background-color: var(--capbox-color);
  color: #fff;
  display: flex;
  gap: 0.5em;
  justify-content: center;
  line-height: 1.5;
  margin-bottom: 0 !important;
  padding: 0.5em;
  position: relative;
  text-align: center;
  z-index: 1;
}
.cap_box_content {
  background-color: var(--capbox-color--bg);
  border: 1px solid var(--capbox-color);
  clear: both;
  margin-top: -2px;
  padding: 1.5em;
  position: relative;
  z-index: 0;
}
.cap_box_content > * {
  margin-bottom: 1em;
}
.cap_box_content > *:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Inline List (swl-inline-list) — 342 uses
   ============================================================ */
.swl-inline-list {
  display: inline-block;
  line-height: 1.5;
  padding: 2px 0 2px 1.5em;
  position: relative;
}
.swl-inline-list[data-icon="dot"]::before {
  background-color: currentcolor;
  border-radius: 50%;
  content: "";
  display: block;
  height: 6px;
  left: 0.5em;
  position: absolute;
  top: calc(0.75em - 1px);
  width: 6px;
}
.swl-inline-list[data-icon="check"]::before {
  color: var(--color_list_check);
  content: "\2713";
  display: block;
  left: 0.25em;
  position: absolute;
  top: 2px;
  width: 1em;
}
.swl-inline-list[data-icon="circle"]::before {
  color: var(--color_list_good);
  content: "\25CB";
  display: block;
  left: 0.25em;
  position: absolute;
  top: 2px;
}
.swl-inline-list[data-icon="close"]::before {
  color: var(--color_list_bad);
  content: "\2717";
  display: block;
  left: 0.25em;
  position: absolute;
  top: 2px;
}
.swl-inline-list[data-icon="triangle"]::before {
  color: var(--color_list_triangle);
  content: "\25B2";
  display: block;
  left: 0.25em;
  position: absolute;
  top: 2px;
  font-size: 0.8em;
}

/* ============================================================
   Color Classes — 56+ uses
   ============================================================ */
.has-swl-main-color           { color: var(--color_main) !important; }
.has-swl-main-thin-color      { color: var(--color_main_thin) !important; }
.has-swl-deep-01-color        { color: var(--color_deep01) !important; }
.has-swl-deep-02-color        { color: var(--color_deep02) !important; }
.has-swl-deep-03-color        { color: var(--color_deep03) !important; }
.has-swl-deep-04-color        { color: var(--color_deep04) !important; }
.has-swl-pale-01-color        { color: var(--color_pale01) !important; }
.has-swl-pale-02-color        { color: var(--color_pale02) !important; }
.has-swl-pale-03-color        { color: var(--color_pale03) !important; }
.has-swl-pale-04-color        { color: var(--color_pale04) !important; }

.has-swl-main-background-color      { background-color: var(--color_main) !important; color: #fff; }
.has-swl-main-thin-background-color { background-color: var(--color_main_thin) !important; color: #333; }
.has-swl-gray-background-color      { background-color: var(--color_gray) !important; }
.has-swl-deep-01-background-color   { background-color: var(--color_deep01) !important; color: #fff; }
.has-swl-deep-02-background-color   { background-color: var(--color_deep02) !important; color: #fff; }
.has-swl-deep-03-background-color   { background-color: var(--color_deep03) !important; color: #fff; }
.has-swl-deep-04-background-color   { background-color: var(--color_deep04) !important; color: #fff; }
.has-swl-pale-01-background-color   { background-color: var(--color_pale01) !important; color: #333; }
.has-swl-pale-02-background-color   { background-color: var(--color_pale02) !important; color: #333; }
.has-swl-pale-03-background-color   { background-color: var(--color_pale03) !important; color: #333; }
.has-swl-pale-04-background-color   { background-color: var(--color_pale04) !important; color: #333; }

.swl-inline-color { --color_link: currentcolor; }

/* ============================================================
   FAQ Block — 12 uses
   ============================================================ */
.swell-block-faq {
  --swl-faq_icon_radius: 0;
  margin-bottom: var(--swl-block-margin);
}
.swell-block-faq .swell-block-faq__item + .swell-block-faq__item {
  margin-top: 1em;
}
.swell-block-faq .faq_q {
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  padding: 1em 1em 1em 3em;
  position: relative;
}
.swell-block-faq .faq_q::before {
  border-radius: var(--swl-faq_icon_radius);
  content: "Q";
  display: block;
  font-family: Arial, sans-serif;
  font-weight: 400;
  left: 0;
  line-height: 2;
  position: absolute;
  text-align: center;
  top: 0.75em;
  width: 2em;
}
.swell-block-faq .faq_a {
  line-height: 1.5;
  padding: 1em 1em 1em 3em;
  position: relative;
}
.swell-block-faq .faq_a::before {
  border-radius: var(--swl-faq_icon_radius);
  content: "A";
  display: block;
  font-family: Arial, sans-serif;
  left: 0;
  line-height: 2;
  position: absolute;
  text-align: center;
  top: 0.75em;
  width: 2em;
}
.faq_a > * {
  margin-bottom: 1em;
}
[data-q="fill-custom"] .faq_q::before { background-color: var(--color_faq_q); color: #fff; }
[data-a="col-main"] .faq_a::before { box-shadow: 0 0 0 1px currentcolor; color: var(--color_main); }
[data-a="fill-custom"] .faq_a::before { background-color: var(--color_faq_a); color: #fff; }
[data-q="col-main"] .faq_q::before { box-shadow: 0 0 0 1px currentcolor; color: var(--color_main); }
[data-q="fill-main"] .faq_q::before { background-color: var(--color_main); color: #fff; }
[data-a="fill-main"] .faq_a::before { background-color: var(--color_main); color: #fff; }

/* ============================================================
   Button Block — 12 uses
   ============================================================ */
.swell-block-button {
  margin-bottom: var(--swl-block-margin);
}
.swell-block-button a {
  text-align: center;
}
.swell-block-button__link {
  display: inline-block;
  padding: 0.75em 2em;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 700;
  transition: opacity 0.3s;
}
.swell-block-button__link:hover {
  opacity: 0.8;
}

/* ============================================================
   Step Block — 9 uses
   ============================================================ */
.swell-block-step {
  counter-reset: step;
  margin-bottom: var(--swl-block-margin);
}
.swell-block-step__item {
  margin-bottom: 0 !important;
  padding: 0 0 3em 64px;
  position: relative;
}
.swell-block-step__item::before {
  border-left: 1px dashed var(--color_border);
  content: "";
  display: block;
  height: 100%;
  left: 23px;
  position: absolute;
  top: 0;
  width: 0;
}
.swell-block-step__item:last-child::before {
  content: none;
}
.swell-block-step__number {
  box-sizing: content-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 48px;
  justify-content: center;
  left: 0;
  line-height: 1;
  position: absolute;
  text-align: center;
  top: 0;
  width: 48px;
  background-color: var(--color_main);
  border-radius: 50%;
}
.swell-block-step__number .__label {
  display: block;
  font-size: 10px;
  padding-bottom: 1px;
}
.swell-block-step__number::after {
  content: counter(step);
  counter-increment: step;
  display: block;
  font-size: 20px;
}
.swell-block-step__title {
  font-weight: 700;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
}
.swell-block-step__title + .swell-block-step__body {
  margin-top: 1em;
}
.swell-block-step__body > * {
  margin-bottom: 1em;
}

/* ============================================================
   Table Cell Background — 38 uses
   ============================================================ */
.swl-cell-bg {
  background-color: var(--the-cell-bg, unset);
  display: inline-block;
  line-height: 1;
  position: static;
  width: 0;
}
.swl-cell-bg::before {
  background-color: inherit;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* ============================================================
   Font Size Utilities — 10 uses
   ============================================================ */
.swl-fz { font-size: var(--swl-fz--normal); }
.has-xs-font-size, .u-fz-xs  { font-size: var(--swl-fz--xs) !important; }
.has-small-font-size, .u-fz-s { font-size: var(--swl-fz--small) !important; }
.has-medium-font-size, .u-fz-m { font-size: var(--swl-fz--medium) !important; }
.has-large-font-size, .u-fz-l { font-size: var(--swl-fz--large) !important; }
.has-huge-font-size, .u-fz-xl { font-size: var(--swl-fz--huge) !important; }

/* ============================================================
   Review Stars (shortcode replacement)
   ============================================================ */
.c-reviewStars {
  color: #f5a623;
  font-size: 1.1em;
  letter-spacing: 2px;
}