/* =====================================================================
   .wysiwyg-article — styles the WP-editable article / service-detail body.
   Plain semantic content (h2/h3/p/ul/ol/blockquote/img/table…) entered in the
   WordPress editor renders as a polished, on-brand editorial layout.
   Loaded by partials/arma-blocks-doc.blade.php after pages.css.

   Element selectors are prefixed with .wysiwyg-article so their specificity
   (0,1,1) beats Tailwind preflight resets (0,0,1) regardless of load order.
   Vertical rhythm between top-level blocks is the wrapper's `space-y-fluid-8`
   utility — block elements set NO vertical margins (margin-top would lose to
   the space-y selector anyway); only nested elements get their own spacing.

   Accent palette: brand orange #ff4501 (+ #ff7a3c for gradients), ink #1a1a1a.
   ===================================================================== */

.wysiwyg-article {
  color: rgba(43, 43, 43, 0.86);
  font-size: clamp(1rem, 0.28vw + 0.94rem, 1.0625rem);
}

/* ---- Lead paragraph: the opening line reads as an editorial lede ---- */
.wysiwyg-article > p:first-of-type {
  font-size: clamp(1.125rem, 0.7vw + 1rem, 1.4375rem);
  line-height: 1.58;
  color: #1f1f1f;
  font-weight: 450;
  letter-spacing: -0.011em;
}

/* ---- Headings ---- */
.wysiwyg-article h2,
.wysiwyg-article h3,
.wysiwyg-article h4,
.wysiwyg-article h5,
.wysiwyg-article h6 {
  color: #1a1a1a;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.wysiwyg-article h2 {
  font-size: clamp(1.875rem, 2.9vw, 2.75rem);
  letter-spacing: -0.046em;
  position: relative;
  padding-bottom: clamp(0.85rem, 1vw + 0.4rem, 1.4rem);
}
.wysiwyg-article h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(52px, 5vw + 1rem, 88px);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4501, #ff8a4c);
}
.wysiwyg-article h3 {
  font-size: clamp(1.375rem, 1.95vw, 1.875rem);
  line-height: 1.25;
  position: relative;
  padding-left: clamp(0.85rem, 1vw, 1.15rem);
}
.wysiwyg-article h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.14em;
  bottom: 0.14em;
  width: 4px;
  border-radius: 999px;
  background: #ff4501;
}
.wysiwyg-article h4 { font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.3; }
.wysiwyg-article h5,
.wysiwyg-article h6 { font-size: clamp(1rem, 1.2vw, 1.125rem); }

/* ---- Paragraphs / inline ---- */
.wysiwyg-article p { margin: 0; line-height: 1.72; }
.wysiwyg-article strong,
.wysiwyg-article b { font-weight: 650; color: #1a1a1a; }
.wysiwyg-article em,
.wysiwyg-article i { font-style: italic; }
.wysiwyg-article a {
  color: #ff4501;
  text-decoration: none;
  background-image: linear-gradient(#ff4501, #ff4501);
  background-size: 100% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: color .2s ease, background-size .3s ease;
}
.wysiwyg-article a:hover { color: #1a1a1a; background-size: 100% 2px; background-image: linear-gradient(#1a1a1a, #1a1a1a); }
.wysiwyg-article .text-brand { color: #ff4501; }

/* Lists always read left-aligned — guard against any inherited text-align:center
   so centering can never break list layout (markers + bold stay intact). */
.wysiwyg-article ul,
.wysiwyg-article ol,
.wysiwyg-article li { text-align: left; }

/* ---- Unordered list: brand diamond markers + soft hover rows ---- */
.wysiwyg-article ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.15rem, 0.4vw, 0.35rem);
}
.wysiwyg-article ul > li {
  position: relative;
  /* Block (not flex): inline formatting inside <li> — <strong>, <a>, etc. — must
     flow as normal text. Flex would split each inline run into a separate flex
     item and break the line. Marker sits in a fixed left gutter via padding. */
  padding: clamp(0.5rem, 0.9vw, 0.8rem) clamp(0.5rem, 0.8vw, 0.85rem);
  padding-left: calc(clamp(0.5rem, 0.8vw, 0.85rem) + 0.5rem + clamp(0.75rem, 1.2vw, 1.15rem));
  line-height: 1.5;
  border-radius: 10px;
  transition: background .25s ease;
}
.wysiwyg-article ul > li:hover { background: rgba(255, 69, 1, 0.045); }
.wysiwyg-article ul > li::before {
  content: '';
  position: absolute;
  left: clamp(0.5rem, 0.8vw, 0.85rem);
  top: calc(clamp(0.5rem, 0.9vw, 0.8rem) + 0.5em);
  width: 0.5rem;
  height: 0.5rem;
  background: #ff4501;
  transform: rotate(45deg);
  border-radius: 1px;
  transition: transform .25s ease;
}
.wysiwyg-article ul > li:hover::before { transform: rotate(45deg) scale(1.25); }

/* ---- Ordered list: circular brand number badges ---- */
.wysiwyg-article ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: item;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.7vw, 0.6rem);
}
.wysiwyg-article ol > li {
  position: relative;
  /* Block (not flex) so inline <strong>/<a> inside the item flow as normal text.
     The number badge is absolutely positioned in the left gutter. */
  padding: clamp(0.35rem, 0.8vw, 0.55rem) 0 clamp(0.35rem, 0.8vw, 0.55rem) clamp(3.1rem, 3.6vw, 3.6rem);
  min-height: clamp(2.25rem, 3vw, 2.6rem);
  line-height: 1.5;
}
.wysiwyg-article ol > li::before {
  counter-increment: item;
  content: counter(item);
  position: absolute;
  left: 0;
  /* Centre the badge on the FIRST line (not the whole item) so it stays put
     when the item wraps to several lines. */
  top: calc(clamp(0.35rem, 0.8vw, 0.55rem) + 0.75em);
  transform: translateY(-50%);
  width: clamp(2.1rem, 2.6vw, 2.5rem);
  height: clamp(2.1rem, 2.6vw, 2.5rem);
  border-radius: 50%;
  background: #ff4501;
  color: #fff;
  font-weight: 700;
  font-size: clamp(0.9rem, 1vw, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(255, 69, 1, 0.6);
}
/* honor <ol start="N"> (old WP content sometimes splits a numbered list into
   several <ol> fragments with start offsets) so badges continue 2,3,… */
.wysiwyg-article ol[start="2"]  { counter-reset: item 1; }
.wysiwyg-article ol[start="3"]  { counter-reset: item 2; }
.wysiwyg-article ol[start="4"]  { counter-reset: item 3; }
.wysiwyg-article ol[start="5"]  { counter-reset: item 4; }
.wysiwyg-article ol[start="6"]  { counter-reset: item 5; }
.wysiwyg-article ol[start="7"]  { counter-reset: item 6; }
.wysiwyg-article ol[start="8"]  { counter-reset: item 7; }
.wysiwyg-article ol[start="9"]  { counter-reset: item 8; }
.wysiwyg-article ol[start="10"] { counter-reset: item 9; }
.wysiwyg-article ol[start="11"] { counter-reset: item 10; }
.wysiwyg-article ol[start="12"] { counter-reset: item 11; }
.wysiwyg-article ol[start="13"] { counter-reset: item 12; }
.wysiwyg-article ol[start="14"] { counter-reset: item 13; }
.wysiwyg-article ol[start="15"] { counter-reset: item 14; }

/* nested lists stay simple */
.wysiwyg-article li ul,
.wysiwyg-article li ol { margin-top: 0.4rem; gap: 0; }
.wysiwyg-article li ul > li,
.wysiwyg-article li ol > li { padding-top: 0.2rem; padding-bottom: 0.2rem; min-height: 0; }
.wysiwyg-article li ol > li::before { position: static; transform: none; box-shadow: none; margin-right: 0.6rem; }

/* ---- Blockquote: premium on-brand callout with quote glyph ---- */
.wysiwyg-article blockquote {
  position: relative;
  margin: 0;
  border: 1px solid rgba(255, 69, 1, 0.16);
  border-left: 4px solid #ff4501;
  background: linear-gradient(135deg, rgba(255, 69, 1, 0.055), rgba(255, 69, 1, 0.012));
  border-radius: 0 18px 18px 0;
  padding: clamp(1.25rem, 2.2vw, 1.9rem) clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.2vw, 1.9rem) clamp(2.85rem, 4.2vw, 3.6rem);
  color: #262626;
  font-size: clamp(1.0625rem, 1.1vw, 1.1875rem);
  line-height: 1.6;
}
.wysiwyg-article blockquote::before {
  content: '\201C';
  position: absolute;
  left: clamp(0.7rem, 1.5vw, 1.1rem);
  top: clamp(-0.15rem, 0.5vw, 0.2rem);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  color: rgba(255, 69, 1, 0.3);
  pointer-events: none;
}
.wysiwyg-article blockquote p { margin: 0; }
.wysiwyg-article blockquote p + p { margin-top: 0.7rem; }

/* ---- Media: rounded, elevated, zoomable ---- */
.wysiwyg-article figure { margin: 0; }
.wysiwyg-article img,
.wysiwyg-article video {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: clamp(12px, 1.4vw, 18px);
  box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.4);
}
.wysiwyg-article img {
  cursor: zoom-in;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
.wysiwyg-article img:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 64px -22px rgba(0, 0, 0, 0.5);
}

/* ---- Consecutive images collapse into a horizontal gallery grid instead of a
   vertical stack. Wrapper injected by mu-plugins/arma-article-gallery.php ---- */
.wysiwyg-article .article-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.1vw, 1rem);
  margin: clamp(0.9rem, 1.6vw, 1.6rem) 0;
}
.wysiwyg-article .article-gallery[data-count="2"],
.wysiwyg-article .article-gallery[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}
.wysiwyg-article .article-gallery > p { margin: 0; }
.wysiwyg-article .article-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0;
}
@media (max-width: 900px) {
  .wysiwyg-article .article-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .wysiwyg-article .article-gallery { grid-template-columns: 1fr !important; }
}
.wysiwyg-article a img { cursor: pointer; }
.wysiwyg-article figcaption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: rgba(51, 51, 51, 0.55);
  text-align: center;
  font-style: italic;
}

/* ---- Tables: rounded card, brand header, zebra rows ---- */
.wysiwyg-article table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.28);
  font-size: clamp(0.875rem, 1vw, 1rem);
}
.wysiwyg-article th,
.wysiwyg-article td {
  padding: clamp(0.65rem, 1vw, 0.95rem) clamp(0.85rem, 1.2vw, 1.15rem);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.wysiwyg-article thead th {
  background: #1a1a1a;
  color: #fff;
  font-weight: 650;
  letter-spacing: 0.01em;
  border-bottom: 0;
}
.wysiwyg-article tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.025); }
.wysiwyg-article tbody tr:last-child td { border-bottom: 0; }

/* ---- Divider ---- */
.wysiwyg-article hr {
  border: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 69, 1, 0.5), rgba(0, 0, 0, 0.06) 45%, transparent);
}