/**
 * USOF Editor Toolkit - visual styles shared by the front end and the editor
 */

/* =================================================================
 * 1. Text highlighting (rich-text formats)
 * ================================================================= */

/* Highlighter: half-height smudge effect, mimics a real marker */
.usof-hl-yellow,
.usof-hl-green,
.usof-hl-pink,
.usof-hl-blue {
	padding: 0 0.12em;
	border-radius: 2px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.usof-hl-yellow {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 52%, rgba(255, 235, 59, 0.85) 52%, rgba(255, 235, 59, 0.85) 92%, rgba(255, 255, 255, 0) 92%);
}

.usof-hl-green {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 52%, rgba(165, 214, 167, 0.9) 52%, rgba(165, 214, 167, 0.9) 92%, rgba(255, 255, 255, 0) 92%);
}

.usof-hl-pink {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 52%, rgba(244, 143, 177, 0.85) 52%, rgba(244, 143, 177, 0.85) 92%, rgba(255, 255, 255, 0) 92%);
}

.usof-hl-blue {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 52%, rgba(144, 202, 249, 0.9) 52%, rgba(144, 202, 249, 0.9) 92%, rgba(255, 255, 255, 0) 92%);
}

/* Badge: rounded pill */
.usof-badge,
.usof-badge-red,
.usof-badge-green {
	display: inline-block;
	padding: 0.12em 0.7em;
	margin: 0 0.15em;
	border-radius: 1em;
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.02em;
	vertical-align: baseline;
	white-space: nowrap;
}

.usof-badge {
	background: #e3f2fd;
	border: 1px solid #90caf9;
	color: #1565c0;
}

.usof-badge-red {
	background: #ffebee;
	border: 1px solid #ef9a9a;
	color: #c62828;
}

.usof-badge-green {
	background: #e8f5e9;
	border: 1px solid #a5d6a7;
	color: #2e7d32;
}

/* Red emphasis: bold + wavy underline */
strong.usof-emph {
	color: #d32f2f;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: #ef5350;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

/* =================================================================
 * 2. Callouts and sticky notes (paragraph/group block styles)
 * ================================================================= */

p.is-style-usof-alert-info,
p.is-style-usof-alert-success,
p.is-style-usof-alert-warning,
p.is-style-usof-alert-danger,
.wp-block-group.is-style-usof-alert-info,
.wp-block-group.is-style-usof-alert-success,
.wp-block-group.is-style-usof-alert-warning,
.wp-block-group.is-style-usof-alert-danger {
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 1.2em;
}

.wp-block-group.is-style-usof-alert-info,
.wp-block-group.is-style-usof-alert-success,
.wp-block-group.is-style-usof-alert-warning,
.wp-block-group.is-style-usof-alert-danger {
	padding: 18px 22px;
}

.is-style-usof-alert-info {
	background: #f1f8ff;
	border-left: 4px solid #2196f3;
}

.is-style-usof-alert-success {
	background: #f0faf1;
	border-left: 4px solid #43a047;
}

.is-style-usof-alert-warning {
	background: #fff9e6;
	border-left: 4px solid #ffb300;
}

.is-style-usof-alert-danger {
	background: #fdf3f3;
	border-left: 4px solid #e53935;
}

/* Sticky note: yellow paper + tape on top */
p.is-style-usof-postit,
.wp-block-group.is-style-usof-postit {
	position: relative;
	background: linear-gradient(160deg, #fff9c4, #fff59d);
	border: 1px solid #f0e6a3;
	border-radius: 4px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
	padding: 30px 20px 16px;
	margin: 1.6em 0;
}

p.is-style-usof-postit::before,
.wp-block-group.is-style-usof-postit::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	width: 92px;
	height: 22px;
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(0, 0, 0, 0.04);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* =================================================================
 * 3. List styles
 * ================================================================= */

ul.is-style-usof-list-check,
ul.is-style-usof-list-times,
ul.is-style-usof-list-arrow {
	list-style: none;
	padding-left: 0.4em;
}

ul.is-style-usof-list-check > li,
ul.is-style-usof-list-times > li,
ul.is-style-usof-list-arrow > li {
	padding-left: 1.5em;
	position: relative;
}

ul.is-style-usof-list-check > li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #2e7d32;
	font-weight: 700;
}

ul.is-style-usof-list-times > li::before {
	content: '✗';
	position: absolute;
	left: 0;
	color: #c62828;
	font-weight: 700;
}

ul.is-style-usof-list-arrow > li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: #1565c0;
	font-weight: 700;
}

/* =================================================================
 * 4. Text buttons (native button block styles)
 * ================================================================= */

.wp-block-button.is-style-usof-btn-primary .wp-block-button__link,
.wp-block-button.is-style-usof-btn-success .wp-block-button__link,
.wp-block-button.is-style-usof-btn-outline .wp-block-button__link,
.wp-block-button.is-style-usof-btn-download .wp-block-button__link {
	display: inline-block;
	border-radius: 999px;
	font-weight: 700;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	cursor: pointer;
}

.wp-block-button.is-style-usof-btn-primary .wp-block-button__link {
	background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
	color: #fff;
	padding: 14px 38px;
	border: none;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.wp-block-button.is-style-usof-btn-primary .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 20px rgba(37, 99, 235, 0.45);
	color: #fff;
}

.wp-block-button.is-style-usof-btn-success .wp-block-button__link {
	background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
	color: #fff;
	padding: 14px 38px;
	border: none;
	box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}

.wp-block-button.is-style-usof-btn-success .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 20px rgba(22, 163, 74, 0.45);
	color: #fff;
}

.wp-block-button.is-style-usof-btn-outline .wp-block-button__link {
	background: transparent;
	color: #2563eb;
	padding: 12px 36px;
	border: 2px solid #2563eb;
	box-shadow: none;
}

.wp-block-button.is-style-usof-btn-outline .wp-block-button__link:hover {
	background: #2563eb;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

.wp-block-button.is-style-usof-btn-download .wp-block-button__link {
	background: #1e293b;
	color: #fff;
	padding: 14px 34px;
	border: none;
	box-shadow: 0 4px 12px rgba(30, 41, 59, 0.35);
}

.wp-block-button.is-style-usof-btn-download .wp-block-button__link::before {
	content: '⬇ ';
}

.wp-block-button.is-style-usof-btn-download .wp-block-button__link:hover {
	background: #0f172a;
	transform: translateY(-2px);
	color: #fff;
}

/* =================================================================
 * 5. Big button (turns a link in a paragraph/group into a CTA button)
 * ================================================================= */

p.is-style-usof-cta,
.wp-block-group.is-style-usof-cta {
	text-align: center;
	margin: 1.6em 0;
}

p.is-style-usof-cta a,
.wp-block-group.is-style-usof-cta a {
	display: inline-block;
	padding: 0.85em 2.6em;
	border-radius: 999px;
	background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
	color: #fff;
	font-weight: 700;
	font-size: 1.05em;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

p.is-style-usof-cta a:hover,
.wp-block-group.is-style-usof-cta a:hover {
	transform: translateY(-2px);
	box-shadow: 0 9px 24px rgba(37, 99, 235, 0.45);
	color: #fff;
}