/**
 * Goblin Worker - Content Block Styles
 *
 * Design principles:
 * - Inherit theme fonts and text colors wherever possible
 * - Only set background tints and accent borders
 * - WCAG AA contrast ratios (4.5:1 text, 3:1 large text)
 * - Dark mode via prefers-color-scheme with high-contrast text
 *
 * @package GoblinWorker
 */

/* ==========================================================================
   CALLOUTS - Info/Warning/Tip/Note Boxes
   ========================================================================== */

.gw-callout {
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	border-left: 4px solid;
	border-radius: 4px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: inherit;
}

.gw-callout strong {
	font-weight: 700;
}

/* Info (Blue accent) */
.gw-callout-info {
	background-color: rgba(0, 102, 204, 0.07);
	border-left-color: #0066cc;
}

.gw-callout-info strong {
	color: #0055aa;
}

/* Warning (Orange accent) */
.gw-callout-warning {
	background-color: rgba(204, 102, 0, 0.07);
	border-left-color: #cc6600;
}

.gw-callout-warning strong {
	color: #b35900;
}

/* Tip (Green accent) */
.gw-callout-tip {
	background-color: rgba(46, 125, 50, 0.07);
	border-left-color: #2e7d32;
}

.gw-callout-tip strong {
	color: #256b29;
}

/* Success (Teal accent) */
.gw-callout-success {
	background-color: rgba(0, 137, 123, 0.07);
	border-left-color: #00897b;
}

.gw-callout-success strong {
	color: #00796b;
}

/* Dark mode – keep text light and readable */
@media (prefers-color-scheme: dark) {
	.gw-callout {
		color: #e8e8e8;
	}

	.gw-callout-info {
		background-color: rgba(77, 148, 255, 0.1);
		border-left-color: #4d94ff;
	}

	.gw-callout-info strong {
		color: #7ab3ff;
	}

	.gw-callout-warning {
		background-color: rgba(255, 167, 38, 0.1);
		border-left-color: #ffa726;
	}

	.gw-callout-warning strong {
		color: #ffcc80;
	}

	.gw-callout-tip {
		background-color: rgba(102, 187, 106, 0.1);
		border-left-color: #66bb6a;
	}

	.gw-callout-tip strong {
		color: #a5d6a7;
	}

	.gw-callout-success {
		background-color: rgba(77, 182, 172, 0.1);
		border-left-color: #4db6ac;
	}

	.gw-callout-success strong {
		color: #80cbc4;
	}
}

/* ==========================================================================
   RELATED CALLOUT CARD - Post reference card with optional thumbnail
   ========================================================================== */

.gw-callout-related-card {
	margin: 1.5rem 0;
	border-radius: 6px;
	overflow: hidden;
	border-left: 4px solid #0066cc;
	background-color: rgba(0, 102, 204, 0.05);
	transition: box-shadow 0.2s ease;
}

.gw-callout-related-card:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* When used as wp:group (no image fallback) */
.gw-callout-related-card.wp-block-group {
	padding: 1.25rem 1.5rem;
}

/* When used as wp:columns (with image) */
.gw-callout-related-card.wp-block-columns {
	gap: 0 !important;
	flex-wrap: nowrap;
}

/* Image column */
.gw-callout-related-img-col {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 100%;
}

.gw-callout-related-img {
	margin: 0 !important;
	height: 100%;
}

.gw-callout-related-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 6px 0 0 6px;
}

/* Text column (inside wp:columns) */
.gw-callout-related-card.wp-block-columns > .wp-block-column:last-child {
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gw-callout-related-label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #0066cc;
	margin-bottom: 0.25rem !important;
	margin-top: 0 !important;
}

.gw-callout-related-text {
	font-size: 0.95rem;
	line-height: 1.6;
	color: inherit;
	margin-bottom: 0.25rem !important;
}

.gw-callout-related-cta {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0 !important;
}

.gw-callout-related-cta a {
	text-decoration: none;
}

.gw-callout-related-cta a:hover {
	text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
	.gw-callout-related-card {
		background-color: rgba(77, 148, 255, 0.08);
		border-left-color: #4d94ff;
	}

	.gw-callout-related-label {
		color: #7ab3ff;
	}
}

/* Mobile: stack image on top, text below */
@media (max-width: 768px) {
	.gw-callout-related-card.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.gw-callout-related-card.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.gw-callout-related-img img {
		border-radius: 6px 6px 0 0;
		max-height: 200px;
	}
}

/* ==========================================================================
   STEP LISTS - Step-by-Step Instructions
   ========================================================================== */

.gw-step-list {
	counter-reset: step-counter;
	list-style: none;
	padding-left: 0;
	margin: 1.5rem 0;
}

.gw-step-list .gw-step-item {
	position: relative;
	padding: 1.25rem 1.5rem 1.25rem 4rem;
	margin-bottom: 1.5rem;
	background-color: rgba(0, 0, 0, 0.03);
	border-left: 3px solid #0066cc;
	border-radius: 6px;
	counter-increment: step-counter;
}

.gw-step-list .gw-step-item::before {
	content: counter(step-counter);
	position: absolute;
	left: 1rem;
	top: 1.25rem;
	width: 2rem;
	height: 2rem;
	background: #0066cc;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
}

.gw-step-title {
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	line-height: 1.4;
}

.gw-step-description {
	margin: 0;
	line-height: 1.6;
	font-size: 0.95rem;
	opacity: 0.85;
}

.gw-step-list .gw-step-item:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 2rem;
	top: 3.5rem;
	bottom: -1.5rem;
	width: 2px;
	background: linear-gradient(to bottom, #0066cc, transparent);
}

@media (prefers-color-scheme: dark) {
	.gw-step-list .gw-step-item {
		background-color: rgba(255, 255, 255, 0.04);
		border-left-color: #4d94ff;
	}

	.gw-step-list .gw-step-item::before {
		background: #4d94ff;
		color: #000;
	}
}

@media (max-width: 640px) {
	.gw-step-list .gw-step-item {
		padding-left: 3.5rem;
	}

	.gw-step-list .gw-step-item::before {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.85rem;
		left: 0.875rem;
	}

	.gw-step-list .gw-step-item::after {
		left: 1.75rem;
	}
}

/* ==========================================================================
   COMPARISON TABLES - Feature Comparisons
   ========================================================================== */

.gw-comparison-table {
	margin: 2rem 0;
	overflow-x: auto;
}

.gw-comparison-table table {
	width: 100%;
	border-collapse: collapse;
}

.gw-comparison-table thead th {
	background: #0066cc;
	color: white;
	font-weight: 600;
	text-align: left;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
}

.gw-comparison-table tbody tr {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.gw-comparison-table tbody tr:hover {
	background-color: rgba(0, 0, 0, 0.03);
}

.gw-comparison-table tbody td {
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.gw-comparison-table tbody td:first-child {
	font-weight: 600;
}

.gw-comparison-table td.positive {
	color: #2e7d32;
}

.gw-comparison-table td.negative {
	color: #c62828;
}

@media (prefers-color-scheme: dark) {
	.gw-comparison-table thead th {
		background: #2962a3;
	}

	.gw-comparison-table tbody tr {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}

	.gw-comparison-table tbody tr:hover {
		background-color: rgba(255, 255, 255, 0.04);
	}

	.gw-comparison-table td.positive {
		color: #81c784;
	}

	.gw-comparison-table td.negative {
		color: #e57373;
	}
}

@media (max-width: 768px) {
	.gw-comparison-table thead th,
	.gw-comparison-table tbody td {
		padding: 0.75rem 0.875rem;
		font-size: 0.85rem;
	}
}

/* ==========================================================================
   TABLE SCROLL WRAPPER - Mobile-friendly tables
   ========================================================================== */

.gw-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   PRO/CON GROUPS - Advantage/Disadvantage boxes
   ========================================================================== */

.gw-procon {
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	border-radius: 6px;
	border-left: 4px solid;
	color: inherit;
}

.gw-procon-pro {
	background-color: rgba(46, 125, 50, 0.07);
	border-left-color: #2e7d32;
}

.gw-procon-con {
	background-color: rgba(198, 40, 40, 0.07);
	border-left-color: #c62828;
}

.gw-procon-heading {
	margin-top: 0;
}

.gw-procon-list {
	margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
	.gw-procon {
		color: #e8e8e8;
	}

	.gw-procon-pro {
		background-color: rgba(102, 187, 106, 0.1);
		border-left-color: #66bb6a;
	}

	.gw-procon-con {
		background-color: rgba(229, 115, 115, 0.1);
		border-left-color: #e57373;
	}
}

/* ==========================================================================
   FAQ GROUPS - Modern accordion
   ========================================================================== */

.gw-faq {
	margin: 2rem 0;
}

.gw-faq-title {
	margin: 0 0 0.75rem 0;
	font-size: 1.2rem;
	font-weight: 700;
}

.gw-faq-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 0;
}

.gw-faq-item:last-of-type {
	border-bottom: none;
}

.gw-faq-item summary {
	padding: 1rem 0;
	font-weight: 600;
	cursor: pointer;
	list-style: revert;
	transition: opacity 0.15s ease;
}

.gw-faq-item summary:hover {
	opacity: 0.7;
}

.gw-faq-item p {
	padding: 0 0 1rem 1.25rem;
	margin: 0;
	line-height: 1.7;
	opacity: 0.88;
}

@media (prefers-color-scheme: dark) {
	.gw-faq-item {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
}

/* ==========================================================================
   RELATED POSTS - Internal Link Cards with Thumbnails (Shortcode)
   ========================================================================== */

.gw-related {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	background-color: rgba(0, 102, 204, 0.05);
	border-left: 4px solid #0066cc;
	border-radius: 6px;
	transition: box-shadow 0.2s ease;
}

.gw-related:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.gw-related-thumb {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
}

.gw-related-text {
	flex: 1;
	min-width: 0;
}

.gw-related-title {
	margin: 0 0 0.5rem 0;
	font-size: 1.05rem;
	line-height: 1.4;
}

.gw-related-teaser {
	margin: 0 0 0.75rem 0;
	font-size: 0.9rem;
	line-height: 1.5;
	opacity: 0.8;
}

.gw-related-link {
	margin: 0;
	font-size: 0.9rem;
}

.gw-related-link a {
	font-weight: 600;
	text-decoration: none;
}

.gw-related-link a:hover {
	text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
	.gw-related {
		background-color: rgba(77, 148, 255, 0.08);
		border-left-color: #4d94ff;
	}
}

@media (max-width: 640px) {
	.gw-related {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.gw-related-thumb {
		width: 100px;
		height: 100px;
	}

	.gw-related-text {
		width: 100%;
	}
}

/* ==========================================================================
   RELATED POSTS WIDGET - Sidebar Shortcode [goblin_related_posts]
   ========================================================================== */

.gw-related-posts-widget {
	border-radius: 8px;
	padding: 1.25rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.gw-rp-heading {
	margin: 0 0 1rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid currentColor;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	opacity: 0.9;
}

.gw-rp-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gw-rp-item {
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.gw-rp-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.gw-rp-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease;
}

.gw-rp-link:hover {
	opacity: 0.75;
}

.gw-rp-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 4px;
}

.gw-rp-title {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
}

.gw-rp-link:hover .gw-rp-title {
	text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
	.gw-related-posts-widget {
		border-color: rgba(255, 255, 255, 0.1);
	}

	.gw-rp-item {
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}
}

/* ==========================================================================
   SOURCES - Collapsible reference list
   ========================================================================== */

.gw-sources {
	margin: 2.5rem 0 1.5rem;
}

.gw-sources-details summary {
	padding: 0.75rem 0;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.gw-sources-details summary:hover {
	opacity: 0.7;
}

.gw-sources-list {
	margin: 0;
	padding: 0.75rem 0 0 1.5rem;
	font-size: 0.9rem;
	line-height: 1.8;
}

.gw-sources-list li {
	padding: 0.125rem 0;
}

.gw-sources-list a {
	text-decoration: none;
}

.gw-sources-list a:hover {
	text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
	.gw-sources-details summary {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
	.gw-callout,
	.gw-step-list .gw-step-item,
	.gw-procon,
	.gw-faq-item {
		page-break-inside: avoid;
	}

	.gw-callout {
		border: 2px solid #000;
	}

	.gw-sources-list a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		opacity: 0.6;
	}
}