/**
 * FlashGuideHub — Classic Editor Tools
 *
 * Shared styles for markup inserted by the "FGH Tools" editor button.
 * Loaded both as an editor style (so it looks right inside the Classic
 * Editor's TinyMCE iframe) and as a front-end stylesheet, so what you see
 * while writing matches what visitors see.
 */

/* ── Inline button ─────────────────────────────────────────────────── */

.fgh-inline-btn {
	display: inline-block;
	vertical-align: middle;
	margin: 0 2px;
	padding: 0.45em 1.1em;
	background: #2271b1;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.4;
	text-decoration: none !important;
	border-radius: 6px;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.fgh-inline-btn:hover,
.fgh-inline-btn:focus {
	background: #135e96;
	color: #fff !important;
	transform: translateY(-1px);
}

/* ── Callout box ───────────────────────────────────────────────────── */

.fgh-callout {
	margin: 1.25em 0;
	padding: 1em 1.25em;
	border-left: 4px solid #2271b1;
	background: #f0f6fc;
	border-radius: 4px;
}
.fgh-callout p:first-child { margin-top: 0; }
.fgh-callout p:last-child { margin-bottom: 0; }
.fgh-callout--info    { border-left-color: #2271b1; background: #f0f6fc; }
.fgh-callout--warning { border-left-color: #dba617; background: #fcf6e8; }
.fgh-callout--success { border-left-color: #2a9d58; background: #eef8f1; }
.fgh-callout--danger  { border-left-color: #cc1818; background: #fbeaea; }

/* ── Copy-code block ───────────────────────────────────────────────── */

.fgh-code-copy {
	position: relative;
	margin: 1.25em 0;
}
.fgh-code-copy pre {
	margin: 0;
	padding: 1em 5.5em 1em 1.25em;
	background: #1e1e1e;
	color: #e5e5e5;
	border-radius: 6px;
	overflow-x: auto;
	font-size: 0.9em;
	line-height: 1.5;
}
.fgh-code-copy code {
	background: none;
	color: inherit;
	padding: 0;
	font-family: Consolas, Monaco, "Courier New", monospace;
}
.fgh-code-copy__btn {
	position: absolute;
	top: 0.6em;
	right: 0.6em;
	padding: 0.35em 0.8em;
	background: #333;
	color: #fff;
	border: 1px solid #555;
	border-radius: 4px;
	font-size: 0.8em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.fgh-code-copy__btn:hover { background: #444; }
.fgh-code-copy__btn--copied { background: #2a9d58; border-color: #2a9d58; }

/* ── Table of contents ─────────────────────────────────────────────── */

.fgh-toc {
	margin: 1.5em 0;
	padding: 1.1em 1.4em;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}
.fgh-toc__title { margin: 0 0 0.5em; font-weight: 700; }
.fgh-toc__list { margin: 0; padding-left: 1.25em; }
.fgh-toc__item { margin: 0.25em 0; }
.fgh-toc__item--h3 { margin-left: 1em; }
.fgh-toc__item--h4 { margin-left: 2em; }
.fgh-toc__list a { text-decoration: none; }
.fgh-toc__list a:hover { text-decoration: underline; }

/* ── Collapsible section ───────────────────────────────────────────── */

.fgh-collapsible {
	margin: 1.25em 0;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	overflow: hidden;
}
.fgh-collapsible summary {
	cursor: pointer;
	padding: 0.85em 2.2em 0.85em 1.1em;
	font-weight: 600;
	background: #f6f7f7;
	list-style: none;
	position: relative;
}
.fgh-collapsible summary::-webkit-details-marker { display: none; }
.fgh-collapsible summary::after {
	content: "+";
	position: absolute;
	right: 1.1em;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
}
.fgh-collapsible[open] summary::after {
	content: "\2212"; /* minus sign */
}
.fgh-collapsible__content {
	padding: 1em 1.1em;
	border-top: 1px solid #dcdcde;
}
.fgh-collapsible__content p:last-child { margin-bottom: 0; }

/* ── Call-to-action ────────────────────────────────────────────────── */

.fgh-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 1.5em 0;
	padding: 1.25em 1.5em;
	background: #f0f6fc;
	border: 1px solid #c5dcf0;
	border-radius: 8px;
}
.fgh-cta__body { flex: 1 1 260px; min-width: 0; }
.fgh-cta__heading {
	margin: 0 0 0.25em;
	font-size: 1.15em;
	font-weight: 700;
}
.fgh-cta__desc {
	margin: 0;
	color: #3c434a;
}
.fgh-cta__btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 0.7em 1.5em;
	background: #2271b1;
	color: #fff !important;
	font-weight: 600;
	text-decoration: none !important;
	border-radius: 6px;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.fgh-cta__btn:hover,
.fgh-cta__btn:focus {
	background: #135e96;
	color: #fff !important;
	transform: translateY(-1px);
}
@media ( max-width: 480px ) {
	.fgh-cta { flex-direction: column; align-items: stretch; text-align: center; }
	.fgh-cta__btn { text-align: center; }
}

/* ── Table ─────────────────────────────────────────────────────────── */

.fgh-table-wrap {
	margin: 1.25em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.fgh-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
}
.fgh-table th,
.fgh-table td {
	padding: 0.6em 0.9em;
	border: 1px solid #dcdcde;
	text-align: left;
	vertical-align: top;
}
.fgh-table thead th {
	background: #f0f6fc;
	font-weight: 700;
}
.fgh-table tbody tr:nth-child(even) {
	background: #f9f9f9;
}

/* ── Notice boxes (author / disclaimer / affiliate) ───────────────── */

.fgh-disclosure {
	margin: 1.25em 0;
	padding: 0.85em 1.1em;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #f6f7f7;
	font-size: 0.92em;
	color: #3c434a;
}
.fgh-disclosure p { margin: 0; }
.fgh-disclosure--disclaimer {
	border-color: #f0d58c;
	background: #fcf6e8;
}
.fgh-disclosure--affiliate {
	border-color: #cfe0ce;
	background: #eef8f1;
}

/* ── Anchor offset ─────────────────────────────────────────────────── */

/* Keeps a jumped-to heading from landing flush under a sticky header. */
h2[id], h3[id], h4[id] {
	scroll-margin-top: 100px;
}

/* ── Checklist ─────────────────────────────────────────────────────── */

.fgh-checklist {
	margin: 1.5em 0;
	padding: 1.1em 1.4em;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}
.fgh-checklist__heading {
	margin: 0 0 0.6em;
	font-weight: 700;
	font-size: 1.05em;
}
/* !important throughout this list block is deliberate: this theme's own
   article CSS (guide.css) sets its own list-style rules on <ul>/<li>
   elsewhere on the page, and a plain .fgh-checklist__list rule can lose
   that cascade depending on where the checklist is inserted. Forcing it
   here guarantees this component always looks the same regardless of
   what the surrounding article CSS does to lists. */
.fgh-checklist__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	list-style-type: none !important;
}
.fgh-checklist__list li {
	display: flex !important;
	align-items: flex-start;
	gap: 0.65em;
	margin: 0 0 0.55em !important;
	padding: 0 !important;
	line-height: 1.5;
	list-style: none !important;
}
.fgh-checklist__list li::marker { content: none; }
.fgh-checklist__list li:last-child { margin-bottom: 0 !important; }
/* The tick is drawn with plain CSS borders (a rotated-box checkmark)
   rather than a Unicode glyph in `content` (font-dependent — can render
   as an empty block on some systems) or an inline <svg> in the actual
   post content (fragile if anything in the site's content pipeline ever
   round-trips post HTML through server-side HTML parsing). A CSS-only
   shape on an empty <span> can't be stripped or mangled by either. */
.fgh-checklist__icon {
	position: relative;
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.18em;
	background: #1c7c3f;
	border-radius: 4px;
}
.fgh-checklist__icon::after {
	content: "";
	position: absolute;
	left: 0.36em;
	top: 0.2em;
	width: 0.3em;
	height: 0.56em;
	border: solid #fff;
	border-width: 0 0.15em 0.15em 0;
	transform: rotate(45deg);
}
.fgh-checklist__text {
	flex: 1 1 auto;
	min-width: 0;
}