/* ==========================================================================
 * Teknodayim - layout & shared components
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Page wrappers
 * #site-content keeps the Bootstrap "container" width the live site has
 * today (1170px incl. 15px gutters). Plugins widen it on their own pages
 * (cart, checkout, single product) with `.page-wrap > .container` rules.
 * ----------------------------------------------------------------------- */
.page-wrap {
	position: relative;
	min-width: 0;
}

.container,
.container-fluid {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--td-gutter);
	padding-left: var(--td-gutter);
}

.container {
	max-width: var(--td-container);
}

.page-area {
	min-width: 0;
}

.site-main {
	display: block;
	min-width: 0;
}

/* Full-width layout: static front page and "Page Builders" template. */
#site-content.td-layout-full {
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

/* --------------------------------------------------------------------------
 * 2. Generic page / post content
 * Bootstrap-era metrics, slightly tightened to the Teknodayim B2B look.
 * Cart / checkout / product plugins hide .single-head on their pages.
 * ----------------------------------------------------------------------- */
.single-head {
	margin: 0;
}

.single-title {
	color: var(--td-dark);
	font-weight: 900;
	letter-spacing: -.3px;
}

.news-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--td-radius-lg);
}

.single-entry-summary::after {
	content: "";
	display: table;
	clear: both;
}

.entry-content .alignleft,
.alignleft {
	float: left;
	margin: 0 18px 12px 0;
}

.entry-content .alignright,
.alignright {
	float: right;
	margin: 0 0 12px 18px;
}

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

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	color: var(--td-muted);
	font-size: 12px;
}

.td-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0;
	font-weight: 800;
}

.td-entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
	color: var(--td-muted);
	font-size: 12px;
	font-weight: 800;
}

/* --------------------------------------------------------------------------
 * 3. Shared UI pieces (cards, buttons, kicker, empty states)
 * ----------------------------------------------------------------------- */
.td-card {
	padding: 16px;
	border: 1px solid var(--td-line-warm);
	border-radius: var(--td-radius-lg);
	background: #fff;
	box-shadow: var(--td-shadow-card);
}

.td-kicker {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--td-orange-tint);
	color: var(--td-orange);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .2px;
	text-transform: uppercase;
}

.td-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid var(--td-line);
	border-radius: 14px;
	background: #fff;
	color: var(--td-dark);
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.td-btn:hover,
.td-btn:focus {
	border-color: rgba(232, 80, 2, .24);
	background: var(--td-orange-soft);
	color: var(--td-orange);
	text-decoration: none;
}

.td-btn-primary {
	border-color: var(--td-orange);
	background: var(--td-orange);
	color: #fff;
}

.td-btn-primary:hover,
.td-btn-primary:focus {
	border-color: var(--td-orange-dark);
	background: var(--td-orange-dark);
	color: #fff;
}

.td-empty-state,
.td-error-404 {
	max-width: 760px;
	margin: 26px auto;
	text-align: center;
}

.td-empty-state .page-title,
.td-error-404 .page-title {
	margin: 10px 0 8px;
	color: var(--td-dark);
	font-size: 28px;
	font-weight: 900;
}

.td-error-404 p,
.td-empty-state p {
	color: var(--td-muted);
	font-weight: 700;
}

.td-error-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 14px 0;
}

/* Search form (get_search_form, HTML5 markup). */
.search-form {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin: 12px auto 0;
}

.search-form label {
	flex: 1 1 auto;
	margin: 0;
	font-weight: 400;
}

.search-form .search-field {
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 14px;
	background: #fff;
}

.search-form .search-submit {
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 14px;
	background: var(--td-orange);
	color: #fff;
	font-weight: 900;
}

/* --------------------------------------------------------------------------
 * 4. Blog lists
 * ----------------------------------------------------------------------- */
.td-archive-header {
	margin: 18px 0 14px;
}

.td-archive-header .page-title {
	margin: 0 0 6px;
	color: var(--td-dark);
	font-size: 28px;
	font-weight: 900;
}

.taxonomy-description {
	color: var(--td-muted);
	font-weight: 700;
}

.td-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	margin: 0 0 30px;
}

.td-blog-layout.has-sidebar {
	grid-template-columns: minmax(0, 1fr) 280px;
}

.td-post-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.td-post-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.td-post-card-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.td-post-card-body {
	padding: 14px 16px 16px;
}

.td-post-card .entry-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.25;
}

.td-post-card .entry-title a {
	color: var(--td-dark);
}

.td-post-card .entry-title a:hover {
	color: var(--td-orange);
	text-decoration: none;
}

.td-single-post {
	margin: 18px 0;
}

.entry-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	font-size: 12px;
	font-weight: 800;
}

.entry-footer a {
	display: inline-flex;
	margin: 0 4px 4px 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--td-orange-tint);
	color: var(--td-orange);
}

.post-navigation .nav-links,
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 18px 0;
}

.post-navigation .nav-links {
	justify-content: space-between;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--td-line);
	border-radius: 13px;
	background: #fff;
	color: var(--td-dark);
	font-weight: 900;
}

.pagination .page-numbers.current {
	border-color: var(--td-dark);
	background: var(--td-dark);
	color: #fff;
}

.td-blog-sidebar .widget {
	margin-bottom: 16px;
	padding: 16px;
	border: 1px solid var(--td-line-warm);
	border-radius: var(--td-radius-lg);
	background: #fff;
}

.td-blog-sidebar .widget-title h3 {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 900;
}

/* Comments */
.comments-template {
	margin: 18px 0;
}

.commentlist {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.commentlist .comment-body {
	margin-bottom: 12px;
	padding: 12px;
	border-radius: 14px;
	background: #fafafa;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 12px;
}

.comment-form .submit {
	min-height: 42px;
	padding: 0 18px;
	border: 0;
	border-radius: 14px;
	background: var(--td-orange);
	color: #fff;
	font-weight: 900;
}

/* --------------------------------------------------------------------------
 * 5. Legacy Bootstrap 3 helpers
 * Envo loaded Bootstrap 3 on every page. Page content stored in the
 * database (homepage blocks, custom HTML) may still use these class names,
 * so the minimal subset below keeps that markup laid out without loading
 * Bootstrap itself. Plugins do not use them.
 * ----------------------------------------------------------------------- */
.row {
	margin-right: calc(var(--td-gutter) * -1);
	margin-left: calc(var(--td-gutter) * -1);
}

.row::before,
.row::after,
.clearfix::before,
.clearfix::after {
	content: " ";
	display: table;
}

.row::after,
.clearfix::after {
	clear: both;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
	position: relative;
	min-height: 1px;
	padding-right: var(--td-gutter);
	padding-left: var(--td-gutter);
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; }
.col-xs-1 { width: 8.33333333%; } .col-xs-2 { width: 16.66666667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333%; }
.col-xs-5 { width: 41.66666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333333%; } .col-xs-8 { width: 66.66666667%; }
.col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333%; } .col-xs-11 { width: 91.66666667%; } .col-xs-12 { width: 100%; }

@media (min-width: 768px) {
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }
	.col-sm-1 { width: 8.33333333%; } .col-sm-2 { width: 16.66666667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333333%; }
	.col-sm-5 { width: 41.66666667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333333%; } .col-sm-8 { width: 66.66666667%; }
	.col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333333%; } .col-sm-11 { width: 91.66666667%; } .col-sm-12 { width: 100%; }
}

@media (min-width: 992px) {
	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }
	.col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333%; }
	.col-md-5 { width: 41.66666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333333%; } .col-md-8 { width: 66.66666667%; }
	.col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333%; } .col-md-11 { width: 91.66666667%; } .col-md-12 { width: 100%; }
}

@media (min-width: 1200px) {
	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }
	.col-lg-1 { width: 8.33333333%; } .col-lg-2 { width: 16.66666667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333333%; }
	.col-lg-5 { width: 41.66666667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333333%; } .col-lg-8 { width: 66.66666667%; }
	.col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333333%; } .col-lg-11 { width: 91.66666667%; } .col-lg-12 { width: 100%; }
}

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.list-unstyled { padding-left: 0; list-style: none; }

@media (max-width: 767px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }