/*
 * css/cms-content.css
 *
 * Framework-neutral baseline for stored rich-text HTML (ADR 0003). Wrap
 * sanitized output in <div class="cms-content"> (news.php, company.php) —
 * never rely on Bootstrap grid/utility classes inside stored HTML, they are
 * stripped by App\Services\RichContentSanitizer's class closed-list filter.
 *
 * Base rules (h1-h6/p/ul/ol/blockquote/a/code/hr/table/img) started from the
 * Stage 2 mockup draft:
 * plans/active/rich-content-sanitization/mockups/pass01/cms-content.css
 * Colors/fonts reused from the site's existing tokens (css/custom.css,
 * css/utility.css .text-trusted-navy) — this does not introduce a new
 * visual language.
 *
 * `.fg`/`.llmo-*`/`.faq-*`/`.skill-heading` rules below are NOT invented —
 * they are adapted (scoped under `.cms-content`, otherwise left as close to
 * the original as possible) from the near-identical `<style>` blocks that
 * ~30 real published articles currently embed per-article (verified against
 * local DB — plans/active/rich-content-sanitization-analysis.md). Those
 * per-article <style> blocks are what Goal 1b's <style>-block filtering
 * phase strips going forward (embedded CSS is exactly the architecture this
 * initiative moves away from) — without this baseline, every article using
 * these classes would silently lose all visual styling the moment
 * sanitize-on-save first runs. This is scope-preserving (existing design,
 * relocated to a shared stylesheet), not a new design.
 */

.cms-content {
	font-family: 'Kanit', 'Noto Sans Thai', sans-serif;
	color: #333333;
	line-height: 1.7;
	word-break: break-word;
}

.cms-content > *:first-child {
	margin-top: 0;
}

.cms-content > *:last-child {
	margin-bottom: 0;
}

.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4,
.cms-content h5,
.cms-content h6 {
	color: #0A48A3; /* matches .text-trusted-navy */
	font-weight: 600;
	margin: 1.5em 0 0.6em;
	line-height: 1.35;
}

.cms-content h2 { font-size: 1.5rem; }
.cms-content h3 { font-size: 1.25rem; }
.cms-content h4 { font-size: 1.1rem; }

.cms-content p {
	margin: 0 0 1em;
}

.cms-content ul,
.cms-content ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

.cms-content li {
	margin-bottom: 0.4em;
}

.cms-content blockquote {
	margin: 1.5em 0;
	padding: 0.75em 1.25em;
	border-left: 4px solid #0A48A3;
	background: #F5F8FC;
	color: #444444;
	font-style: italic;
}

.cms-content blockquote p:last-child {
	margin-bottom: 0;
}

.cms-content a {
	color: #0A48A3;
	text-decoration: underline;
	word-break: break-word;
}

.cms-content a:hover,
.cms-content a:focus {
	color: #07306e;
}

.cms-content strong { font-weight: 700; }
.cms-content em { font-style: italic; }

.cms-content code {
	background: #F1F1F1;
	padding: 0.15em 0.4em;
	border-radius: 3px;
	font-size: 0.9em;
}

.cms-content hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid #E0E0E0;
}

.cms-content table {
	width: 100%;
	margin: 1em 0;
	border-collapse: collapse;
}

.cms-content table th,
.cms-content table td {
	border: 1px solid #E0E0E0;
	padding: 0.5em 0.75em;
	text-align: left;
}

.cms-content img {
	max-width: 100%;
	height: auto;
}

/* Structural HTML5 elements the server allowlist accepts (Goal 1b) when
   used outside the .fg/.llmo-*/.faq-* class systems below — generic
   baseline only, matching plain semantic HTML defaults. */
.cms-content figure {
	margin: 1.5em 0;
}

.cms-content figcaption {
	font-size: 0.9em;
	color: #666666;
	margin-top: 0.5em;
	text-align: center;
}

.cms-content details {
	margin: 1em 0;
	padding: 0.75em 1em;
	border: 1px solid #E0E0E0;
	border-radius: 6px;
}

.cms-content summary {
	cursor: pointer;
	font-weight: 600;
	color: #0A48A3;
}

.cms-content nav ul,
.cms-content nav ol {
	list-style: none;
	padding-left: 0;
}

/* -------------------------------------------------------------------
 * `.fg` content-design system (FAQ accordion, TOC, author bio, stat
 * callout, definition/snippet boxes) — adapted from the shared per-article
 * <style> block, scoped under `.cms-content` instead of relying on the
 * article re-declaring it every time.
 * ------------------------------------------------------------------- */
.cms-content .fg {
	--fg-blue: #1DADFC;
	--fg-navy: #0A48A3;
	--fg-navy-d: #062E6A;
	--fg-grad-a: #226EC5;
	--fg-grad-b: #56C0BD;
	--fg-green: #20C92F;
	--fg-teal: #56D8D5;
	--fg-ink: #132235;
	--fg-muted: #55607A;
	--fg-muted-2: #8B94A6;
	--fg-line: rgba(10, 27, 51, .09);
	--fg-line-2: rgba(10, 27, 51, .16);
	--fg-canvas: #F6FAFE;
	--fg-r: 14px;
	--fg-gap: 34px;
	--fg-sh: 0 10px 30px -24px rgba(10, 72, 163, .3);
	font-weight: 400;
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--fg-ink);
	max-width: 74ch;
	margin: 0 auto;
}
.cms-content .fg *,
.cms-content .fg *::before,
.cms-content .fg *::after { box-sizing: border-box; }
.cms-content .fg > * + * { margin-top: var(--fg-gap); }
.cms-content .fg > * + .fg-note,
.cms-content .fg > .fg-note + * { margin-top: 20px; }
.cms-content .fg p { margin: 0; }
.cms-content .fg p + p { margin-top: 18px; }
.cms-content .fg strong,
.cms-content .fg b { font-weight: 600; color: var(--fg-navy-d); }
.cms-content .fg a {
	color: var(--fg-navy);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 rgba(29, 173, 252, .45);
	transition: color .15s, box-shadow .15s;
}
.cms-content .fg a:hover { color: var(--fg-blue); box-shadow: inset 0 -1px 0 var(--fg-blue); }
.cms-content .fg h2,
.cms-content .fg h3,
.cms-content .fg h4 {
	font-family: 'KotoriRose', 'Kanit', serif;
	font-weight: 600;
	color: var(--fg-navy-d);
	margin: 0;
	letter-spacing: -.01em;
}
.cms-content .fg h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.45; }
.cms-content .fg h3 { font-size: 18.5px; line-height: 1.55; }
.cms-content .fg h4 { font-size: 16.5px; line-height: 1.55; }
.cms-content .fg img { max-width: 100%; display: block; height: auto; }
.cms-content .fg-ico {
	width: 18px;
	height: 18px;
	vertical-align: -3px;
	margin-right: 7px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cms-content .fg-fig { margin: 0; }
.cms-content .fg-fig img { width: 100%; border-radius: var(--fg-r); }
.cms-content .fg-fig figcaption {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--fg-muted-2);
	margin-top: 10px;
	text-align: center;
}
.cms-content .fg-lead { font-size: 19.5px; line-height: 1.7; color: var(--fg-muted); }
.cms-content .fg-sec { scroll-margin-top: 88px; margin-top: 52px; }
.cms-content .fg-sec > * + * { margin-top: 28px; }
.cms-content .fg-sec > h2 { margin-bottom: 4px; }
.cms-content .fg-toc {
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-r);
	background: var(--fg-canvas);
	padding: 24px 26px;
	box-shadow: var(--fg-sh);
}
.cms-content .fg-toc-t {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg-muted-2);
	margin-bottom: 12px;
}
.cms-content .fg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: fgtoc; display: grid; gap: 2px; }
.cms-content .fg-toc li { counter-increment: fgtoc; }
.cms-content .fg-toc a {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 7px 10px;
	margin: 0 -10px;
	border-radius: 9px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--fg-ink);
	box-shadow: none;
}
.cms-content .fg-toc a::before {
	content: counter(fgtoc, decimal-leading-zero);
	font-family: 'KotoriRose', 'Kanit', serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--fg-blue);
	flex: none;
}
.cms-content .fg-toc a:hover { background: #fff; color: var(--fg-navy-d); box-shadow: none; }
.cms-content .fg-note {
	border-radius: var(--fg-r);
	padding: 22px 26px;
	background: var(--fg-canvas);
	border: 1px solid var(--fg-line);
	border-left: 3px solid var(--fg-blue);
	box-shadow: var(--fg-sh);
}
.cms-content .fg-note-t {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.6;
	color: var(--fg-navy);
	margin-bottom: 10px;
}
.cms-content .fg-note p { font-size: 16.5px; line-height: 1.7; color: var(--fg-ink); }
.cms-content .fg-note.fg-stat { background: rgba(86, 192, 189, .08); border-color: rgba(86, 192, 189, .3); border-left-color: var(--fg-green); }
.cms-content .fg-note.fg-stat .fg-note-t { color: #107471; }
.cms-content .fg-note.fg-eeat { background: rgba(34, 110, 197, .07); border-color: rgba(34, 110, 197, .22); border-left-color: var(--fg-grad-a); }
.cms-content .fg-note.fg-eeat .fg-note-t { color: #1A5BA8; }
.cms-content .fg-note.fg-def,
.cms-content .fg-note.fg-snip { padding: 0; background: #fff; overflow: hidden; }
.cms-content .fg-note.fg-def { border-color: rgba(10, 72, 163, .2); border-left-color: var(--fg-navy); }
.cms-content .fg-note.fg-snip { border-color: rgba(86, 216, 213, .4); border-left-color: var(--fg-teal); }
.cms-content .fg-nh { display: block; padding: 14px 26px; font-size: 15.5px; font-weight: 600; letter-spacing: .12em; line-height: 1.6; margin: 0; }
.cms-content .fg-def .fg-nh { background: #E0EDFF; color: var(--fg-navy); }
.cms-content .fg-snip .fg-nh { background: #E6F9F8; color: #0F7A78; }
.cms-content .fg-nb { padding: 20px 26px; }
.cms-content .fg-snip .fg-nb ol,
.cms-content .fg-snip .fg-nb ul { margin: 0; padding-left: 20px; }
.cms-content .fg-snip .fg-nb li { font-size: 16.5px; line-height: 1.7; color: var(--fg-muted); margin-bottom: 7px; }
.cms-content .fg-snip .fg-nb li:last-child { margin-bottom: 0; }
.cms-content .fg-n { color: var(--fg-blue); font-family: 'KotoriRose', 'Kanit', serif; font-weight: 600; font-size: 20px; flex: none; }
.cms-content .fg-defs { display: grid; gap: 30px; }
.cms-content .fg-defs h3 { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.cms-content .fg-defs p { font-size: 16.5px; line-height: 1.7; color: var(--fg-muted); }
.cms-content .fg-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cms-content .fg-list > li { position: relative; padding: 0 0 30px 34px; border-left: 1px solid var(--fg-line-2); margin-left: 6px; }
.cms-content .fg-list > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.cms-content .fg-list > li::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 7px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid var(--fg-blue);
}
.cms-content .fg-list > li > * + * { margin-top: 8px; }
.cms-content .fg-list h3 { display: flex; gap: 10px; align-items: baseline; }
.cms-content .fg-list p { font-size: 16.5px; line-height: 1.7; color: var(--fg-muted); }
.cms-content .fg-tablewrap { overflow-x: auto; border: 1px solid var(--fg-line); border-radius: var(--fg-r); -webkit-overflow-scrolling: touch; }
.cms-content .fg table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15.5px; }
.cms-content .fg thead th {
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .03em;
	color: #fff;
	background: var(--fg-navy);
	padding: 13px 18px;
	white-space: nowrap;
}
.cms-content .fg tbody td { padding: 14px 18px; border-top: 1px solid var(--fg-line); color: var(--fg-muted); line-height: 1.75; vertical-align: top; }
.cms-content .fg tbody td:first-child { color: var(--fg-navy-d); font-weight: 600; white-space: nowrap; }
.cms-content .fg tbody tr:nth-child(even) { background: var(--fg-canvas); }
.cms-content .fg-faq { display: grid; gap: 9px; }
.cms-content .fg-faq details { border: 1px solid var(--fg-line); border-radius: 12px; background: #fff; }
.cms-content .fg-faq details[open] { background: var(--fg-canvas); border-color: rgba(29, 173, 252, .35); }
.cms-content .fg-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 17px 20px;
	font-weight: 600;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--fg-navy-d);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-start;
}
.cms-content .fg-faq summary::-webkit-details-marker { display: none; }
.cms-content .fg-faq summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	margin-top: 8px;
	border-right: 2px solid var(--fg-blue);
	border-bottom: 2px solid var(--fg-blue);
	transform: rotate(45deg);
	transition: transform .2s;
}
.cms-content .fg-faq details[open] summary::after { transform: rotate(-135deg); }
.cms-content .fg-faq .fg-a { padding: 0 20px 20px; font-size: 16px; line-height: 1.7; color: var(--fg-muted); }
.cms-content .fg-cta { border-radius: 16px; padding: 30px 32px; background: linear-gradient(120deg, var(--fg-grad-a), var(--fg-grad-b)); color: #fff; }
.cms-content .fg-cta p { font-size: 16.5px; line-height: 1.7; color: rgba(255, 255, 255, .94); }
.cms-content .fg-cta strong { color: #fff; }
.cms-content .fg-cta a { color: #fff; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6); }
.cms-content .fg-cta a:hover { color: #fff; box-shadow: inset 0 -1px 0 #fff; }
.cms-content .fg-cta .fg-btn,
.cms-content .fg-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	padding: 13px 26px;
	border-radius: 99px;
	font-weight: 600;
	font-size: 15px;
	background: #fff;
	color: var(--fg-navy-d);
	box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .25);
}
.cms-content .fg-cta .fg-btn:hover,
.cms-content .fg-btn:hover { color: var(--fg-navy-d); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .28); }
.cms-content .fg-author { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border-radius: 16px; background: var(--fg-canvas); border: 1px solid var(--fg-line); margin-top: 52px; }
.cms-content .fg-av {
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: 'KotoriRose', 'Kanit', serif;
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	background: linear-gradient(135deg, var(--fg-grad-a), var(--fg-grad-b));
}
.cms-content .fg-author .fg-k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted-2); margin-bottom: 5px; }
.cms-content .fg-author p { font-size: 14.5px; line-height: 1.75; color: var(--fg-muted); margin-top: 6px; }

@media (max-width: 520px) {
	.cms-content .fg { font-size: 16.5px; }
	.cms-content .fg-cta,
	.cms-content .fg-note,
	.cms-content .fg-toc { padding-left: 18px; padding-right: 18px; }
	.cms-content .fg-nh,
	.cms-content .fg-nb { padding-left: 18px; padding-right: 18px; }
}

/* -------------------------------------------------------------------
 * `.llmo-*` content-design system — same purpose as `.fg` (AEO-style
 * BLUF/definition/snippet/stats/E-E-A-T/TOC/CTA/author boxes), a separate
 * naming convention used by a smaller subset of articles. Adapted from the
 * shared per-article <style> block the same way as `.fg` above.
 * ------------------------------------------------------------------- */
.cms-content .llmo-box { max-width: 800px; margin: 1.5rem auto; border-radius: 8px; overflow: hidden; line-height: 1.7; }
.cms-content .llmo-box p { margin-bottom: .5rem; }
.cms-content .llmo-box p:last-child { margin-bottom: 0; }
.cms-content .llmo-label { font-weight: 700; display: block; margin-bottom: .25rem; }
.cms-content .llmo-bluf { background: #E8F8FF; border-left: 4px solid #1DADFC; padding: 1rem 1.5rem; }
.cms-content .llmo-bluf .llmo-label { color: #0A48A3; }
.cms-content .llmo-definition { border: 1px solid #bfdbfe; border-left: 4px solid #0A48A3; }
.cms-content .llmo-definition-header { padding: .75rem 1.5rem; background: #E0EDFF; font-weight: 600; color: #0A48A3; }
.cms-content .llmo-definition-body { padding: 1rem 1.5rem; color: #444; }
.cms-content .llmo-snippet { border: 1px solid #b2f5ea; border-left: 4px solid #56D8D5; }
.cms-content .llmo-snippet-header { padding: .75rem 1.5rem; background: #E6F9F8; font-weight: 600; color: #226EC5; }
.cms-content .llmo-snippet-body { padding: 1rem 1.5rem; color: #444; }
.cms-content .llmo-snippet-body ol,
.cms-content .llmo-snippet-body ul { padding-left: 1.5rem; margin: .5rem 0; }
.cms-content .llmo-snippet-body li { margin-bottom: .25rem; }
.cms-content .llmo-stats { background: #EBF2FF; border-left: 4px solid #226EDD; padding: 1rem 1.5rem; }
.cms-content .llmo-stats .llmo-label { color: #0A48A3; }
.cms-content .llmo-eeat { background: #E6F7F6; border-left: 4px solid #56C0BD; padding: 1rem 1.5rem; }
.cms-content .llmo-eeat .llmo-label { color: #226EC5; }
.cms-content .llmo-toc { border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; padding: 1rem 1.5rem; max-width: 800px; margin: 1.5rem auto; }
.cms-content .llmo-toc-header { font-weight: 700; color: #374151; margin-bottom: .75rem; font-size: 1.05rem; }
.cms-content .llmo-toc-list { list-style: none; padding: 0; margin: 0; }
.cms-content .llmo-toc-list li { padding: .35rem 0; border-bottom: 1px solid #f3f4f6; }
.cms-content .llmo-toc-list li:last-child { border-bottom: none; }
.cms-content .llmo-toc-list a { color: #2563eb; text-decoration: none; font-weight: 500; }
.cms-content .llmo-toc-list a:hover { text-decoration: underline; }
.cms-content .llmo-cta { background: #EBF2FF; border: 2px solid #226EC5; border-radius: 8px; padding: 1.5rem; text-align: center; margin: 2rem auto; max-width: 800px; }
.cms-content .llmo-cta p { font-size: 1.05rem; margin-bottom: .75rem; }
.cms-content .llmo-cta p:last-child { margin-bottom: 0; }
.cms-content .llmo-cta a { color: #226EC5; font-weight: 600; }
.cms-content .llmo-author { max-width: 800px; margin: 2.5rem auto; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.cms-content .llmo-author-header { background: #1e293b; color: #fff; padding: .6rem 1.5rem; font-weight: 700; font-size: .95rem; }
.cms-content .llmo-author-body { padding: 1.25rem 1.5rem; background: #f8fafc; line-height: 1.7; }
.cms-content .llmo-author-name { font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem; }
.cms-content .llmo-author-name a { color: #2563eb; text-decoration: none; }
.cms-content .llmo-author-name a:hover { text-decoration: underline; }
.cms-content .llmo-author-title { font-weight: 400; color: #475569; margin-bottom: .5rem; font-size: .85rem; }
.cms-content .llmo-author-bio { color: #334155; margin-bottom: .5rem; }
.cms-content .llmo-author-edu { color: #64748b; font-size: .9rem; font-style: italic; }

/* -------------------------------------------------------------------
 * `.faq-*` FAQ accordion — same rationale as above, adapted from the
 * shared per-article <style> block.
 * ------------------------------------------------------------------- */
.cms-content .faq-section { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
.cms-content .faq-container { display: flex; flex-direction: column; gap: 1rem; }
.cms-content .faq-item { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; }
.cms-content .faq-item summary {
	padding: 1rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f9f9f9;
	transition: background .3s ease;
}
.cms-content .faq-item summary:hover { background: #f0f0f0; }
.cms-content .faq-item summary::after { content: "+"; font-size: 1.5rem; font-weight: 300; transition: transform .3s ease; }
.cms-content .faq-item[open] summary::after { transform: rotate(45deg); }
.cms-content .faq-item summary::-webkit-details-marker { display: none; }
.cms-content .faq-answer { padding: 1rem 1.5rem; line-height: 1.7; color: #444; }
.cms-content .faq-answer p { margin-bottom: .75rem; }
.cms-content .faq-answer p:last-child { margin-bottom: 0; }

/* `skill-heading` — table section-divider row (Recruitments/News tables
   using a plain <table> to lay out skill/experience groups). */
.cms-content .skill-heading {
	background-color: #e0e0e0;
	font-weight: bold;
}