/* Plugin-specific styles for image display */

.field_feature_image img {
	width: 100px !important;
	height: 100px !important;
	object-fit: contain !important;
	border-radius: 4px !important;
	display: block !important;
	margin: 0 auto !important;
}

/* Removed conflicting styles - now handled in modal section below */

.img-wrapper img {
	width: 40px !important;
	height: 40px !important;
	object-fit: contain !important;
	display: block !important;
}

/* Ensure images are visible */
img[src*="default-tool.svg"],
img[src*="data:image/svg"] {
	width: 100px !important;
	height: 100px !important;
	background: #f0f0f0 !important;
	border: 1px solid #ddd !important;
	border-radius: 4px !important;
}

/* Force image dimensions for data URI images */
img[src^="data:image"] {
	min-width: 40px !important;
	min-height: 40px !important;
}

/* Related technologies section - base styles removed, specific styles in modal section */

.related-technologies a,
.related-technologies a.use-ajax {
	display: inline-block !important;
	margin: 5px !important;
	text-decoration: none !important;
	/* Ensure the link doesn't collapse */
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	/* Prevent any transforms */
	transform: none !important;
	scale: 1 !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Periodic table popup styles */
.periodic-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: none;
}

.periodic-popup.active {
	display: block;
}

.periodic-popup .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 10000;
}

.element-full-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	padding: 30px;
	border-radius: 8px;
	max-width: 700px;
	width: 90%;
	max-height: 85vh;
	overflow-y: auto;
	/* Traditional drop shadow */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 10001;
}

/* Main content area - side by side layout */
.element-full-wrapper > .field_feature_image {
	width: 100px !important;
	height: 100px !important;
	float: left;
	margin-right: 20px;
	margin-bottom: 0;
	display: block !important;
	position: relative !important;
}

.element-full-wrapper > .field_feature_image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

/* Content section */
.element-full-wrapper .content {
	overflow: hidden;
	padding-left: 0;
}

.element-full-wrapper .content .title {
	font-size: 24px;
	font-weight: bold;
	margin: 0 0 12px 0;
	color: #000;
}

.element-full-wrapper .content .title span {
	font-weight: bold;
}

.element-full-wrapper .content .body {
	margin-bottom: 15px;
	line-height: 1.6;
	color: #333;
	font-size: 14px;
}

.element-full-wrapper .content .body p {
	margin: 0 0 12px 0;
}

.element-full-wrapper .content .body p:last-child {
	margin-bottom: 0;
}

.element-full-wrapper .content .links {
	margin-top: 12px;
}

.element-full-wrapper .content .links a {
	display: inline-block;
	margin-right: 15px;
	color: #0073aa;
	text-decoration: none;
	font-size: 14px;
}

.element-full-wrapper .content .links a:hover {
	text-decoration: underline;
}

/* Related Technologies - circular logo containers */
.element-full-wrapper .related-technologies {
	clear: both !important;
	margin-top: 30px !important;
	padding-top: 25px !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
}

.element-full-wrapper .related-technologies h3 {
	margin: 0 0 20px 0 !important;
	font-size: 16px !important;
	font-weight: bold !important;
	color: #000 !important;
	text-transform: uppercase !important;
	padding: 0 !important;
}

.element-full-wrapper .related-technologies > a {
	display: inline-block !important;
	margin: 0 8px 12px 0 !important;
	text-decoration: none !important;
	vertical-align: top !important;
	position: relative !important;
}

.element-full-wrapper .related-technologies .field_feature_image {
	width: 70px !important;
	height: 70px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

.element-full-wrapper .related-technologies .field_feature_image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
	padding: 0 !important;
	position: relative !important;
	max-width: 100% !important;
	max-height: 100% !important;
}

/* Close Button */
.close-periodic {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #666;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s ease;
	z-index: 10002;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
}

.close-periodic:hover {
	color: #000;
	background: rgba(0, 0, 0, 0.08);
}

/* Remove any duplicate close button styling from other CSS */
.periodic-popup .close-periodic:before,
.periodic-popup .close-periodic:after {
	display: none !important;
	content: none !important;
}

/* Ensure only one close button is visible */
.element-full-wrapper .close-periodic {
	display: flex !important;
}

.element-full-wrapper .close-periodic:before,
.element-full-wrapper .close-periodic:after {
	display: none !important;
	content: none !important;
}

/* Loading state */
#technology-table-placeholder {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Periodic table element sizing - ensure elements are properly sized */
/* The original CSS has transform:scale(0.2) which makes elements tiny - we need to override it */
/* CRITICAL: All elements must be exactly the same size for consistency */
.periodic-table .periodic-elements .technology-table-element {
	width: 100% !important;
	height: 70px !important; /* Fixed height - all elements must be exactly 70px */
	min-height: 70px !important; /* Fixed minimum height for consistency */
	max-height: 70px !important; /* Prevent elements from growing */
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 1 !important;
	overflow: hidden !important; /* Prevent content overflow */
	/* Add transition for smooth hover effect */
	transition: transform 0.3s ease-in-out !important;
	transform-origin: center center !important;
}

/* Hover effect - enlarge from center */
.periodic-table .periodic-elements .technology-table-element:hover {
	transform: scale(2) !important;
	z-index: 10 !important;
	/* Ensure hovered element appears above others */
	position: relative !important;
}

.periodic-table .periodic-elements .technology-table-element .element-wrapper {
	width: 100% !important;
	height: 70px !important; /* Fixed height - must match parent exactly */
	min-height: 70px !important; /* Fixed minimum height for consistency */
	max-height: 70px !important; /* Prevent wrapper from growing */
	display: flex !important;
	flex-direction: column !important; /* Stack vertically */
	align-items: flex-start !important; /* Align to left */
	justify-content: flex-start !important; /* Align to top */
	box-sizing: border-box !important;
	padding: 6px 5px !important; /* Consistent padding for all elements */
	overflow: hidden !important; /* Prevent content overflow */
	position: relative !important; /* Needed for absolute positioned children */
	/* CRITICAL: Override the transform:scale(0.2) that makes elements tiny */
	transform: scale(1) !important;
	-webkit-transform: scale(1) !important;
	-moz-transform: scale(1) !important;
	-ms-transform: scale(1) !important;
	/* Ensure clicks work */
	cursor: pointer !important;
	pointer-events: auto !important;
	z-index: 2 !important;
	/* Add transition for smooth hover effect on wrapper too */
	transition: transform 0.3s ease-in-out !important;
	transform-origin: center center !important;
	/* Ensure background colors can be applied - don't set a default background */
	background-image: none !important;
}

/* Element ID - top left, absolute positioned - consistent for all elements */
.periodic-table .periodic-elements .technology-table-element .element-id {
	font-size: 9px !important;
	line-height: 1 !important;
	color: #ffffff !important;
	position: absolute !important;
	top: 6px !important; /* Match wrapper padding */
	left: 5px !important; /* Match wrapper padding */
	margin: 0 !important;
	padding: 0 !important;
	z-index: 3 !important; /* Above other content */
	white-space: nowrap !important; /* Prevent wrapping */
	overflow: hidden !important; /* Prevent overflow */
	text-overflow: ellipsis !important; /* Show ellipsis if too long */
	max-width: calc(50% - 5px) !important; /* Take up to half width, leaving room for model */
}

/* Model - top right, absolute positioned - consistent for all elements */
.periodic-table .periodic-elements .technology-table-element .model {
	font-size: 8px !important;
	line-height: 1 !important;
	color: #ffffff !important;
	position: absolute !important;
	top: 6px !important; /* Match wrapper padding */
	right: 5px !important; /* Match wrapper padding */
	margin: 0 !important;
	padding: 0 !important;
	z-index: 3 !important; /* Above other content */
	white-space: nowrap !important; /* Prevent wrapping */
	overflow: hidden !important; /* Prevent overflow */
	text-overflow: ellipsis !important; /* Show ellipsis if too long */
	max-width: calc(50% - 5px) !important; /* Take up to half width, leaving room for element-id */
}

/* Symbol/Abbreviation - always aligned at fixed position from top - consistent for all elements */
.periodic-table .periodic-elements .technology-table-element .element-symbol {
	font-size: 20px !important; /* Larger abbreviation - consistent size */
	font-weight: bold !important;
	line-height: 1.1 !important;
	color: #ffffff !important;
	margin: 20px 0 4px 0 !important; /* Fixed top margin to align all abbreviations consistently */
	padding: 0 !important;
	width: 100% !important;
	text-align: left !important;
	flex-shrink: 0 !important; /* Prevent abbreviation from shrinking */
	position: relative !important;
	z-index: 1 !important;
	white-space: nowrap !important; /* Prevent wrapping */
	overflow: hidden !important; /* Prevent overflow */
	text-overflow: ellipsis !important; /* Show ellipsis if too long */
}

/* Element name - below abbreviation, can wrap to multiple lines - consistent for all elements */
.periodic-table .periodic-elements .technology-table-element .element-name {
	font-size: 10px !important; /* Consistent font size */
	line-height: 1.2 !important; /* Consistent line height */
	color: #ffffff !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important; /* Full width of container */
	max-width: 100% !important; /* Never exceed container width */
	flex-grow: 1 !important; /* Allow name to take remaining space */
	flex-shrink: 1 !important; /* Allow name to shrink if needed */
	display: block !important; /* Block display for consistent wrapping */
	position: relative !important;
	z-index: 1 !important;
	overflow: hidden !important; /* Prevent overflow */
	word-wrap: break-word !important; /* Allow word wrapping */
	overflow-wrap: break-word !important; /* Allow word wrapping */
	hyphens: auto !important; /* Allow hyphenation for long words */
	box-sizing: border-box !important; /* Include padding in width calculation */
	/* Calculate max height: total height (70px) - top padding (6px) - symbol top margin (20px) - symbol line height (~22px) - bottom padding (6px) - spacing (4px) */
	max-height: calc(70px - 6px - 20px - 22px - 6px - 4px) !important; /* ~12px for 2 lines of text */
	min-height: 0 !important; /* Allow shrinking */
}

.periodic-elements .technology-table-element .element-name span {
	font-size: 10px !important; /* Consistent font size */
	line-height: 1.2 !important; /* Consistent line height */
	display: block !important;
	color: #ffffff !important;
	width: 100% !important; /* Full width */
	max-width: 100% !important; /* Never exceed container width */
	word-wrap: break-word !important;
	overflow-wrap: break-word !important; /* Allow word wrapping */
	overflow: hidden !important; /* Prevent overflow */
	box-sizing: border-box !important; /* Include padding in width calculation */
	hyphens: auto !important; /* Allow hyphenation for long words */
}

/* Make the legend visible - override the max-height:0 that hides it */
/* Keep legend in its original grid position but constrain height so it doesn't expand rows */
/* Make legend even more compact to fit within its grid position */
.periodic-table .periodic-elements .type-legend {
	max-height: 210px !important; /* Constrain to approximately 3 row heights (3 * 70px) */
	overflow-y: auto !important; /* Allow scrolling if content exceeds */
	overflow-x: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	padding: 5px 8px !important; /* Even more reduced padding */
	box-sizing: border-box !important;
	/* Keep original grid positioning (grid-row: 1 / 4, grid-column: 3 / 13) */
	/* But constrain height so rows don't expand */
	align-self: start !important; /* Align to start of grid area */
	height: auto !important;
	min-height: 0 !important;
	font-size: 10px !important; /* Even smaller font size */
	line-height: 1.2 !important; /* Tighter line height */
	z-index: 5 !important; /* Ensure legend appears above elements */
	position: relative !important; /* Needed for z-index to work */
}

/* Fix legend item spacing - reduce spacing even more for compact look */
.periodic-table .periodic-elements .type-legend > div {
	display: flex !important;
	margin-bottom: 4px !important; /* Even more reduced spacing */
	margin-top: 2px !important; /* Even more reduced spacing */
}

.periodic-table .periodic-elements .type-legend > div:first-child {
	margin-top: 0 !important;
}

.periodic-table .periodic-elements .type-legend > div:last-child {
	margin-bottom: 0 !important;
}

/* Ensure legend trigger spacing - very compact */
.periodic-table .periodic-elements .type-legend .trigger {
	display: flex !important;
	align-items: center !important;
	padding: 1px 0 !important; /* Minimal padding */
	margin: 0 6px 0 0 !important; /* Reduced margin */
}

/* Make legend labels even smaller */
.periodic-table .periodic-elements .type-legend > div .trigger label {
	font-size: 10px !important; /* Even smaller font */
	line-height: 1.2 !important; /* Tighter line height */
	margin: 0 !important;
}

/* Ensure legend is visible on desktop */
@media (min-width: 1024px) {
	.periodic-table .periodic-elements .type-legend {
		max-height: 500px !important;
		overflow: visible !important;
	}
}

/* Tool type colors are now generated dynamically from taxonomy term colors */
/* Static color rules have been removed - see class-term-colors.php for dynamic generation */
/* This ensures colors can be managed from the WordPress admin */

/* Ensure legend trigger has a before pseudo-element for the color square */
/* Use full selector path to match periodictable.css specificity */
/* Make color squares even smaller to match very compact legend */
.periodic-table .periodic-elements .type-legend > div .trigger:before {
	content: '' !important;
	display: block !important;
	width: 14px !important; /* Even smaller size to match very compact legend */
	height: 14px !important; /* Even smaller size to match very compact legend */
	margin: 0 5px 0 0 !important; /* Reduced margin */
	border-radius: 2px !important;
	flex-shrink: 0 !important; /* Prevent shrinking */
}

/* Loading spinner animation */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Periodic table grid - all rows same height */
.periodic-table .periodic-elements {
	display: grid !important;
	grid-template-columns: repeat(18, 1fr) !important;
	grid-template-rows: repeat(10, 70px) !important; /* Fixed row height - all rows same height */
	grid-column-gap: 2px !important;
	grid-row-gap: 2px !important;
	position: relative !important;
	width: 100% !important;
	margin: 48px 0 0 0 !important;
}

/* Ensure all grid cells have consistent minimum height */
.periodic-table .periodic-elements .technology-table-element {
	min-height: 70px !important; /* Match wrapper min-height */
}

/* Hide periodic table initially, show after load */
.periodic-table .periodic-elements.slow {
	transition: opacity 0.5s ease-in !important;
	/* Keep grid display even when hidden to maintain layout */
	visibility: hidden !important;
	opacity: 0 !important;
}

.periodic-table .periodic-elements.slow.loaded {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Embed Code and Guidelines Modals */
/* Override periodictable.css rules with higher specificity */
.periodic-table .embed-code-popup,
.periodic-table .guidelines-popup,
.embed-code-popup,
.guidelines-popup {
	display: none !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.7) !important;
	z-index: 10000 !important;
	overflow-y: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Show popups when popup-on class is added - match periodictable.css specificity */
/* REMOVED body.popup-on rules - they were causing periodic table to open guidelines modal */
.periodic-table .embed-code-popup.popup-on,
.periodic-table .guidelines-popup.popup-on,
.embed-code-popup.popup-on,
.guidelines-popup.popup-on {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}

.embed-code-popup .popup-content,
.guidelines-popup .popup-content {
	background: #fff !important;
	border-radius: 8px !important;
	max-width: 600px !important;
	width: 100% !important;
	max-height: 90vh !important;
	overflow-y: auto !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
	position: relative !important;
	margin: 0 auto !important;
}

.embed-code-popup .popup-header,
.guidelines-popup .popup-header {
	padding: 20px !important;
	border-bottom: 1px solid #eee !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	background: #f9f9f9 !important;
	border-radius: 8px 8px 0 0 !important;
}

.embed-code-popup .popup-header h3,
.guidelines-popup .popup-header h3 {
	margin: 0 !important;
	font-size: 24px !important;
	color: #333 !important;
	font-weight: 600 !important;
}

.embed-code-popup .popup-close,
.guidelines-popup .popup-close {
	font-size: 32px !important;
	line-height: 1 !important;
	color: #999 !important;
	cursor: pointer !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	width: 30px !important;
	height: 30px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: color 0.3s !important;
}

.embed-code-popup .popup-close:hover,
.guidelines-popup .popup-close:hover {
	color: #333 !important;
}

.embed-code-popup .popup-body,
.guidelines-popup .popup-body {
	padding: 20px !important;
	color: #333 !important;
	line-height: 1.6 !important;
}

.embed-code-popup .popup-body textarea {
	width: 100% !important;
	min-height: 120px !important;
	padding: 10px !important;
	border: 1px solid #ddd !important;
	border-radius: 4px !important;
	font-family: 'Courier New', Courier, monospace !important;
	font-size: 14px !important;
	margin: 15px 0 !important;
	resize: vertical !important;
	box-sizing: border-box !important;
	background: #f9f9f9 !important;
}

.embed-code-popup .popup-body .copy-embeded {
	background: #0073aa !important;
	color: #fff !important;
	border: none !important;
	padding: 12px 24px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	transition: background 0.3s !important;
	display: inline-block !important;
	margin-top: 10px !important;
}

.embed-code-popup .popup-body .copy-embeded:hover {
	background: #005a87 !important;
}

.guidelines-popup .popup-body h4 {
	margin-top: 0 !important;
	margin-bottom: 15px !important;
	color: #0073aa !important;
	font-size: 20px !important;
	font-weight: 600 !important;
}

.guidelines-popup .popup-body h5 {
	margin-top: 20px !important;
	margin-bottom: 10px !important;
	color: #333 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

.guidelines-popup .popup-body p {
	margin: 10px 0 !important;
	color: #555 !important;
}

.guidelines-popup .popup-body ul {
	margin: 10px 0 !important;
	padding-left: 20px !important;
}

.guidelines-popup .popup-body li {
	margin: 8px 0 !important;
	line-height: 1.6 !important;
	color: #555 !important;
}

.guidelines-popup .popup-body a {
	color: #0073aa !important;
	text-decoration: none !important;
}

.guidelines-popup .popup-body a:hover {
	text-decoration: underline !important;
}

/* ==========================================================================
Mobile Responsive Styles for Periodic Table
Override the base periodictable.css mobile behavior to show the actual
periodic table instead of hiding it and showing a separate mobile UI.
========================================================================== */

@media screen and (max-width: 1024px) {
	/* CRITICAL: Show the periodic table on mobile using flexbox */
	.periodic-table .periodic-elements {
		display: flex !important;
		flex-wrap: wrap !important;
		flex-direction: row !important;
		align-content: flex-start !important;
		gap: 6px !important;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
		background: transparent !important;
		z-index: auto !important;
		margin: 0 !important;
		padding: 10px !important;
		overflow: visible !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Hide the legacy mobile trigger UI */
	.periodic-table .mobile-trigger {
		display: none !important;
	}

	/* Hide mobile legend overlay header and footer */
	.periodic-table .periodic-elements .mobile-legend-head,
	.periodic-table .periodic-elements .mobile-legend-submit {
		display: none !important;
	}

	/* Legend: full width, appears first */
	.periodic-table .periodic-elements .type-legend {
		flex: 0 0 100% !important;
		width: 100% !important;
		order: -1 !important;
		display: block !important;
		position: relative !important;
		padding: 12px !important;
		margin: 0 0 15px 0 !important;
		background: #f5f5f5 !important;
		border-radius: 8px !important;
		border: 1px solid #ddd !important;
		box-sizing: border-box !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* Legend items: 2-column layout */
	.periodic-table .periodic-elements .type-legend > div {
		display: inline-block !important;
		width: calc(50% - 5px) !important;
		margin: 0 0 8px 0 !important;
		vertical-align: top !important;
	}

	.periodic-table .periodic-elements .type-legend > div:nth-child(odd) {
		margin-right: 5px !important;
	}

	.periodic-table .periodic-elements .type-legend > div .trigger {
		display: flex !important;
		align-items: center !important;
		padding: 2px 0 !important;
	}

	.periodic-table .periodic-elements .type-legend > div .trigger:before {
		width: 12px !important;
		height: 12px !important;
		min-width: 12px !important;
		margin: 0 6px 0 0 !important;
		border-radius: 2px !important;
		flex-shrink: 0 !important;
	}

	.periodic-table .periodic-elements .type-legend > div .trigger label {
		font-size: 10px !important;
		line-height: 1.3 !important;
		cursor: pointer !important;
		margin: 0 !important;
	}

	/* Hide branding */
	.periodic-table .periodic-elements .branding {
		display: none !important;
	}

	/* Periodic table elements: 3 columns */
	.periodic-table .periodic-elements .technology-table-element {
		flex: 0 0 calc(33.333% - 4px) !important;
		max-width: calc(33.333% - 4px) !important;
		min-height: 65px !important;
		height: auto !important;
		margin: 0 !important;
		display: block !important;
	}

	/* Element wrapper styling */
	.periodic-table .periodic-elements .technology-table-element .element-wrapper {
		width: 100% !important;
		height: 100% !important;
		min-height: 65px !important;
		padding: 6px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		transform: none !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-symbol {
		font-size: 18px !important;
		line-height: 1.2 !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-name {
		font-size: 8px !important;
		line-height: 1.2 !important;
		margin-top: 2px !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-id,
	.periodic-table .periodic-elements .technology-table-element .model {
		font-size: 7px !important;
	}

	/* Disable hover scale effect on mobile */
	.periodic-table .periodic-elements .technology-table-element:hover {
		transform: none !important;
	}
}

/* Smaller mobile screens - 2 columns instead of 3 */
@media screen and (max-width: 600px) {
	.periodic-table .periodic-elements {
		gap: 5px !important;
	}

	/* 2 columns on small phones */
	.periodic-table .periodic-elements .technology-table-element {
		flex: 0 0 calc(50% - 3px) !important;
		max-width: calc(50% - 3px) !important;
	}

	/* Smaller legend on very small screens */
	.periodic-table .periodic-elements .type-legend {
		padding: 8px !important;
	}

	.periodic-table .periodic-elements .type-legend > div .trigger:before {
		width: 10px !important;
		height: 10px !important;
		min-width: 10px !important;
		margin-right: 4px !important;
	}

	.periodic-table .periodic-elements .type-legend > div .trigger label {
		font-size: 9px !important;
	}

	.periodic-table .periodic-elements .technology-table-element {
		min-height: 55px !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-wrapper {
		min-height: 55px !important;
		padding: 4px !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-symbol {
		font-size: 14px !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-name {
		font-size: 7px !important;
	}
}

/* Modal styling for mobile */
@media (max-width: 768px) {
	/* Adjust modal for mobile */
	.element-full-wrapper {
		width: 95% !important;
		max-width: 95% !important;
		padding: 20px !important;
		max-height: 90vh !important;
	}

	/* Stack main image and content on mobile */
	.element-full-wrapper > .field_feature_image {
		float: none !important;
		margin: 0 auto 20px auto !important;
		display: block !important;
	}

	.element-full-wrapper .content {
		padding-left: 0 !important;
	}

	/* Adjust related technologies for mobile */
	.element-full-wrapper .related-technologies .field_feature_image {
		width: 60px !important;
		height: 60px !important;
	}

	/* Ensure no elements are hidden or collapsed on mobile */
	.periodic-table .periodic-elements .technology-table-element * {
		visibility: visible !important;
	}

	/* Force elements to have content and be visible */
	.periodic-table .periodic-elements .technology-table-element:empty {
		display: none !important;
	}

	/* Ensure wrapper has proper dimensions */
	.periodic-table .periodic-elements .technology-table-element .element-wrapper {
		min-width: 100% !important;
		width: 100% !important;
	}
}

/* Tablet styles - 2-3 columns in predictable rows */
@media (min-width: 769px) and (max-width: 1024px) {
	/* On tablet, periodic table takes full width (legend below) */
	.periodic-table .periodic-elements {
		width: 100% !important; /* Full width on tablet */
	}

	/* On tablet, position legend below the table */
	.periodic-table .periodic-elements .type-legend {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 30px !important;
	}

	/* Ensure elements are visible on tablet */
	.periodic-table .periodic-elements.slow {
		visibility: visible !important;
		opacity: 1 !important;
	}

	.periodic-table .periodic-elements.slow.loaded {
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Use flexbox with wrapping for predictable 2-3 column layout */
	.periodic-table .periodic-elements {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		gap: 12px !important;
		margin: 24px 0 0 0 !important;
	}

	/* Override all grid positioning - elements will flow naturally */
	.periodic-table .periodic-elements .technology-table-element[data-position] {
		grid-row: auto !important;
		grid-column: auto !important;
		position: relative !important;
		flex: 0 0 calc(50% - 6px) !important; /* 2 columns with gap */
		max-width: calc(50% - 6px) !important;
	}

	/* For larger tablets, use 3 columns */
	@media (min-width: 900px) and (max-width: 1024px) {
		.periodic-table .periodic-elements .technology-table-element[data-position] {
			flex: 0 0 calc(33.333% - 8px) !important; /* 3 columns with gap */
			max-width: calc(33.333% - 8px) !important;
		}
	}

	/* Ensure elements are visible and properly sized */
	.periodic-table .periodic-elements .technology-table-element {
		width: 100% !important;
		min-height: 70px !important;
		height: auto !important;
		display: block !important;
		position: relative !important;
		margin: 0 !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-wrapper {
		width: 100% !important;
		min-height: 70px !important;
		height: auto !important;
		padding: 10px !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-symbol {
		font-size: 18px !important;
		margin-right: 10px !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-name {
		font-size: 13px !important;
		flex: 1 !important;
	}

	.periodic-table .periodic-elements .technology-table-element .element-id {
		font-size: 11px !important;
		margin-right: 6px !important;
	}

	.periodic-table .periodic-elements .technology-table-element .model {
		font-size: 10px !important;
		margin-left: auto !important;
	}

	/* Disable hover scale effect on tablet */
	.periodic-table .periodic-elements .technology-table-element:hover {
		transform: scale(1) !important;
	}

	/* Ensure no elements are hidden */
	.periodic-table .periodic-elements .technology-table-element * {
		visibility: visible !important;
	}
}

/* Single DevOps Tool Page Styles */
.dai-single-devops-tool {
	padding: 40px 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.dai-devops-tool-single {
	background: #fff;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.dai-devops-tool-single .entry-header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 2px solid #eee;
}

.dai-devops-tool-single .entry-title {
	margin: 0 0 15px 0;
	font-size: 2.5em;
	color: #333;
}

.tool-abbreviation,
.tool-sort-order {
	display: inline-block;
	margin-right: 20px;
	color: #666;
	font-size: 0.9em;
}

.tool-featured-image {
	float: right;
	margin: 0 0 20px 30px;
	max-width: 200px;
}

.tool-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tool-content {
	margin-bottom: 30px;
	line-height: 1.8;
	font-size: 1.1em;
}

.tool-taxonomies,
.tool-licenses,
.tool-links,
.related-tools {
	margin: 30px 0;
	padding: 20px;
	background: #f9f9f9;
	border-radius: 6px;
}

.tool-taxonomies h3,
.tool-licenses h3,
.tool-links h3,
.related-tools h3 {
	margin: 0 0 15px 0;
	font-size: 1.3em;
	color: #333;
}

.tool-type-list,
.license-list,
.links-list,
.related-tools-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tool-type-list li,
.license-list li,
.links-list li,
.related-tools-list li {
	margin: 10px 0;
	padding: 10px;
	background: #fff;
	border-radius: 4px;
}

.tool-type-list a,
.license-list a,
.links-list a,
.related-tools-list a {
	text-decoration: none;
	color: #0073aa;
	font-weight: 500;
	display: flex;
	align-items: center;
}

.tool-type-list a:hover,
.license-list a:hover,
.links-list a:hover,
.related-tools-list a:hover {
	color: #005177;
	text-decoration: underline;
}

.link-icon {
	margin-right: 8px;
	font-size: 1.2em;
}

.entry-footer {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #eee;
	color: #666;
	font-size: 0.9em;
}

@media (max-width: 768px) {
	.tool-featured-image {
		float: none;
		margin: 0 0 20px 0;
		max-width: 100%;
	}

	.dai-devops-tool-single .entry-title {
		font-size: 1.8em;
	}
}

/* ==========================================================================
Embed Mode Styles
Additional styles for when the periodic table is embedded via iframe.
The general mobile responsive styles above apply to both regular pages
and embed mode. This section only adds embed-specific overrides.
========================================================================== */

/* Embed mode: ensure clean presentation without page chrome */
.periodic-table .periodic-elements.embed-mode {
	margin: 0 !important;
	padding: 10px !important;
}