/*
Theme Name: ZENO360
Theme URI: https://kanvasonline.com/zeno360/
Author: Kanvas Design
Author URI: https://kanvasonline.com/
Description: ZENO360 is a high-performance, Elementor-first WordPress theme for industrial, manufacturing and automation companies. It ships with a pixel-perfect port of the ZENO360 design system, a full-width Elementor canvas, dynamic header/footer, custom post types and one-click demo import (via the ZENO360 Elements plugin).
Version: 1.0.3
Requires at least: 5.6
Tested up to: 6.6
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zeno360
Tags: elementor, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, full-width-template, blog, one-column, two-columns, right-sidebar

ZENO360 WordPress Theme, (C) 2024 Kanvas Design.
ZENO360 is distributed under the terms of the GNU GPL v2 or later.

The complete design system lives in assets/css/zeno360.css so that it stays
byte-identical to the original static template (pixel perfect). This file only
adds the WordPress-specific styles that a static HTML template cannot have.
*/

/* ============================================================
   WordPress core classes (accessibility, alignment, captions)
   ============================================================ */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #0057ff;
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link:focus {
	outline: 2px solid #0057ff;
}

.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	width: 100%;
}

.wp-caption,
.wp-caption-text,
.gallery-caption {
	font-size: 13px;
	color: #5c6573;
	margin-top: 8px;
}

.sticky .entry-title::after {
	content: " \2605";
	color: #e11d74;
}

.bypostauthor > .comment-body {
	border-left: 3px solid #0057ff;
	padding-left: 16px;
}

/* ============================================================
   Blog / archive / single (uses the ZENO360 design tokens)
   ============================================================ */

.zeno-main {
	padding-block: 60px 100px;
}

.zeno-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.zeno-blog-card {
	background: #fff;
	border: 1px solid var(--border, #e6e9ef);
	border-radius: var(--radius-card, 20px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s;
}

.zeno-blog-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-md, 0 18px 48px rgba(5, 19, 40, 0.1));
}

.zeno-blog-card .thumb-wrap {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, #eef3ff, #f7f9ff);
}

.zeno-blog-card .thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}

.zeno-blog-card:hover .thumb-wrap img {
	transform: scale(1.06);
}

.zeno-blog-card .body {
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}

.zeno-blog-card .meta {
	font-family: var(--ff-alt, "Poppins", sans-serif);
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--blue, #0057ff);
	font-weight: 600;
}

.zeno-blog-card h2,
.zeno-blog-card h3 {
	font-size: 20px;
	line-height: 1.25;
}

.zeno-blog-card p {
	color: var(--gray, #5c6573);
	font-size: 14.5px;
}

.zeno-entry {
	max-width: 820px;
	margin-inline: auto;
}

.zeno-entry .entry-header {
	margin-bottom: 28px;
}

.zeno-entry .entry-title {
	font-size: 42px;
	margin-bottom: 14px;
}

.zeno-entry .entry-meta {
	color: var(--gray, #5c6573);
	font-size: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.zeno-entry .entry-thumb {
	border-radius: var(--radius, 24px);
	overflow: hidden;
	margin-bottom: 30px;
}

.zeno-entry .entry-content > * + * {
	margin-top: 20px;
}

.zeno-entry .entry-content h2 {
	font-size: 30px;
	margin-top: 36px;
}

.zeno-entry .entry-content h3 {
	font-size: 23px;
	margin-top: 28px;
}

.zeno-entry .entry-content p,
.zeno-entry .entry-content li {
	color: var(--gray, #5c6573);
	font-size: 16.5px;
	line-height: 1.75;
}

.zeno-entry .entry-content ul,
.zeno-entry .entry-content ol {
	padding-left: 22px;
	list-style: disc;
}

.zeno-entry .entry-content ol {
	list-style: decimal;
}

.zeno-entry .entry-content blockquote {
	border-left: 3px solid var(--blue, #0057ff);
	padding: 6px 0 6px 22px;
	font-size: 19px;
	font-family: var(--ff-head, "Montserrat", sans-serif);
}

.zeno-entry .entry-content img {
	border-radius: var(--radius-card, 20px);
}

.zeno-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 50px;
}

.zeno-pagination .page-numbers {
	min-width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0 12px;
	border-radius: 50px;
	border: 1px solid var(--border, #e6e9ef);
	background: #fff;
	font-family: var(--ff-alt, "Poppins", sans-serif);
	font-weight: 600;
	font-size: 14px;
}

.zeno-pagination .page-numbers.current,
.zeno-pagination .page-numbers:hover {
	background: var(--blue, #0057ff);
	color: #fff;
	border-color: transparent;
}

.zeno-sidebar {
	display: grid;
	gap: 24px;
	align-content: start;
}

.zeno-widget {
	background: #fff;
	border: 1px solid var(--border, #e6e9ef);
	border-radius: var(--radius-card, 20px);
	padding: 24px;
}

.zeno-widget .widget-title {
	font-size: 17px;
	margin-bottom: 14px;
}

.zeno-widget ul {
	display: grid;
	gap: 10px;
}

.zeno-widget ul a {
	color: var(--gray, #5c6573);
	font-size: 14.5px;
}

.zeno-widget ul a:hover {
	color: var(--blue, #0057ff);
}

.zeno-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 50px;
	align-items: start;
}

.zeno-comments {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--border, #e6e9ef);
}

.zeno-comments .comment-list {
	display: grid;
	gap: 22px;
	margin-bottom: 34px;
}

.zeno-comments .comment-list ol {
	margin-top: 22px;
	margin-left: 26px;
	display: grid;
	gap: 22px;
}

.zeno-comments .comment-body {
	background: #fff;
	border: 1px solid var(--border, #e6e9ef);
	border-radius: var(--radius-card, 20px);
	padding: 22px 24px;
}

.zeno-comments .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-family: var(--ff-head, "Montserrat", sans-serif);
}

.zeno-comments .comment-author img {
	border-radius: 50%;
}

.zeno-comments .comment-metadata {
	font-size: 12.5px;
	color: var(--gray, #5c6573);
	margin: 6px 0 12px;
}

.zeno-comments input[type="text"],
.zeno-comments input[type="email"],
.zeno-comments input[type="url"],
.zeno-comments textarea,
.zeno-search-form input[type="search"] {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--border, #e6e9ef);
	border-radius: 14px;
	font-family: inherit;
	font-size: 15px;
	background: #fff;
}

.zeno-comments textarea:focus,
.zeno-comments input:focus,
.zeno-search-form input:focus {
	outline: none;
	border-color: var(--blue, #0057ff);
	box-shadow: 0 0 0 4px rgba(0, 87, 255, 0.12);
}

.zeno-comments .form-submit input,
.zeno-search-form button {
	background: var(--blue, #0057ff);
	color: #fff;
	border-radius: 50px;
	padding: 14px 30px;
	font-family: var(--ff-alt, "Poppins", sans-serif);
	font-weight: 600;
	font-size: 15px;
	border: none;
	cursor: pointer;
}

.zeno-search-form {
	display: flex;
	gap: 10px;
}

.zeno-404 {
	text-align: center;
	padding-block: 40px 20px;
}

.zeno-404 h1 {
	font-size: 90px;
	background: linear-gradient(100deg, #0057ff, #e11d74);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (max-width: 1024px) {
	.zeno-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.zeno-with-sidebar {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.zeno-blog-grid {
		grid-template-columns: 1fr;
	}

	.zeno-entry .entry-title {
		font-size: 32px;
	}
}