/*
 * Zuricom Blog Layout (Archive + Single)
 * Matches the provided reference layouts while staying Elementor-friendly.
 */

:root{
  --zuri-blog-max: 1180px;
  --zuri-blog-gap: 40px;
  --zuri-muted: rgba(0,0,0,.55);
  --zuri-border: rgba(0,0,0,.10);
}

/* Container helpers */
.zuri-blog-wrap{
  max-width: var(--zuri-blog-max);
  margin-left: auto;
  margin-right: auto;
}

/* Top bar: category menu + search */
.zuri-blog-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 14px 0 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.zuri-blog-cats{
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  margin:0;
  padding:0;
  list-style:none;
}

.zuri-blog-cats a{
  text-decoration:none;
  font-weight: 500;
  color: rgba(0,0,0,.72);
  padding: 6px 8px;
  border-radius: 999px;
}

.zuri-blog-cats a:hover,
.zuri-blog-cats .current-cat > a{
  background: rgba(0,0,0,.04);
}

.zuri-blog-search{
  position:relative;
  width: min(360px, 100%);
  flex: 0 1 360px;
}

.zuri-blog-search input[type="search"]{
  width:100%;
  height: 42px;
  padding: 0 44px 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  outline: none;
}

.zuri-blog-search button{
  position:absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  width: 32px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Grid */
.zuri-blog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
  padding: 36px 0 10px;
}

@media (max-width: 1024px){
  .zuri-blog-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
}
@media (max-width: 640px){
  .zuri-blog-topbar{ flex-direction: column; align-items: stretch; }
  .zuri-blog-search{ flex-basis:auto; width: 100%; }
  .zuri-blog-grid{ grid-template-columns: 1fr; gap: 22px; }
}

/* Card */
.zuri-blog-card{
  background: transparent;
}

.zuri-blog-card__media{
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.03);
}

.zuri-blog-card__media a{ display:block; }

.zuri-blog-card__media img{
  width: 100%;
  height: auto;
  display:block;
}

.zuri-blog-card__title{
  font-size: 20px;
  line-height: 1.25;
  margin: 14px 0 10px;
  font-weight: 600;
}

.zuri-blog-card__title a{
  text-decoration:none;
  color: inherit;
}

.zuri-blog-card__meta{
  font-size: 14px;
  color: var(--zuri-muted);
  margin-bottom: 14px;
}

.zuri-blog-card__excerpt{
  color: rgba(0,0,0,.55);
  line-height: 1.7;
  margin: 0 0 14px;
}

.zuri-blog-card__more a{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-weight: 600;
  text-decoration:none;
}

.zuri-blog-card__more i{ font-size: 18px; }

/* Ensure legacy theme meta doesn't break the new layout */
.zuri-blog-card .post-meta-wrap{
  margin: 0 0 10px;
}
.zuri-blog-card .post-meta{
  margin:0;
  padding:0;
  list-style:none;
  gap: 14px;
}
.zuri-blog-card .post-meta li,
.zuri-blog-card .post-meta a{
  color: var(--zuri-muted);
  text-decoration:none;
  font-size: 14px;
}
.zuri-blog-card .post-meta i{ margin-right: 6px; opacity: .75; }

/* Single post */
.zuri-single{
  max-width: 860px;
  margin: 0 auto;
  padding: 12px 0 30px;
}

.zuri-single__title{
  text-align:center;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  margin: 18px 0 12px;
}

.zuri-single__meta{
  display:flex;
  justify-content:center;
  margin: 0 0 20px;
}

.zuri-single__meta .post-meta{
  justify-content:center;
  flex-wrap:wrap;
  row-gap: 10px;
}

.zuri-single__featured{
  margin: 20px auto 22px;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(0,0,0,.03);
}

.zuri-single__featured img{ width:100%; height:auto; display:block; }

.zuri-single .entry-content,
.zuri-single .content-wrap{
  color: rgba(0,0,0,.62);
  line-height: 1.9;
  font-size: 16px;
}

.zuri-single .entry-content h2,
.zuri-single .entry-content h3{
  color: rgba(0,0,0,.86);
  margin-top: 28px;
}

.zuri-single blockquote{
  background: rgba(0,0,0,.04);
  border-radius: 10px;
  padding: 26px 28px;
  margin: 28px 0;
  position: relative;
}

.zuri-single blockquote:before{
  content: "\201C\201C";
  position: absolute;
  left: 18px;
  top: 8px;
  font-size: 46px;
  opacity: .18;
}

/* Tags + share */
.zuri-single__footer{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  gap: 22px;
  justify-content: space-between;
  align-items: flex-start;
}

.zuri-tags{
  flex: 1 1 50%;
}

.zuri-tags__label,
.zuri-share__label{
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(0,0,0,.72);
}

.zuri-tags a{
  display:inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  margin: 0 10px 10px 0;
  text-decoration:none;
  color: rgba(0,0,0,.6);
  font-size: 14px;
}

.zuri-share{
  flex: 1 1 40%;
  text-align:right;
}

.zuri-share__buttons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  text-decoration:none;
  margin-left: 10px;
}

@media (max-width: 768px){
  .zuri-single__footer{ flex-direction: column; }
  .zuri-share{ text-align:left; }
  .zuri-share__buttons a{ margin-left: 0; margin-right: 10px; }
}

/* ==========================================================================
   Zuricom native blog layout stabilization
   Used when Pro templates provide only header/footer.
   ========================================================================== */

/* Keep blog and single post pages inside a real centered content frame. */
body.blog #primary.content-area.container,
body.archive.category #primary.content-area.container,
body.archive.tag #primary.content-area.container,
body.date #primary.content-area.container,
body.author #primary.content-area.container,
body.single-post #primary.content-area.container {
	width: min(1180px, calc(100% - 48px));
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Make the Bootstrap row behave normally even if another template CSS disturbed it. */
body.blog #primary > .row,
body.archive.category #primary > .row,
body.archive.tag #primary > .row,
body.date #primary > .row,
body.author #primary > .row,
body.single-post #primary > .row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-left: -15px;
	margin-right: -15px;
}

/* Add breathing space inside the content/sidebar columns. */
body.blog #primary > .row > [class*="col-"],
body.archive.category #primary > .row > [class*="col-"],
body.archive.tag #primary > .row > [class*="col-"],
body.date #primary > .row > [class*="col-"],
body.author #primary > .row > [class*="col-"],
body.single-post #primary > .row > [class*="col-"] {
	padding-left: 15px;
	padding-right: 15px;
}

/* The blog topbar already has search. Hide the fallback sidebar search only on listing/archive pages. */
body.blog #secondary .widget_search,
body.archive.category #secondary .widget_search,
body.archive.tag #secondary .widget_search,
body.date #secondary .widget_search,
body.author #secondary .widget_search {
	display: none;
}

/* Keep sidebar typography closer to the blog design instead of huge fallback headings. */
body.blog #secondary .widget,
body.archive.category #secondary .widget,
body.archive.tag #secondary .widget,
body.date #secondary .widget,
body.author #secondary .widget,
body.single-post #secondary .widget {
	margin-bottom: 2.4rem;
}

body.blog #secondary .widget-title,
body.archive.category #secondary .widget-title,
body.archive.tag #secondary .widget-title,
body.date #secondary .widget-title,
body.author #secondary .widget-title,
body.single-post #secondary .widget-title,
body.blog #secondary h2,
body.archive.category #secondary h2,
body.archive.tag #secondary h2,
body.date #secondary h2,
body.author #secondary h2,
body.single-post #secondary h2,
body.blog #secondary h3,
body.archive.category #secondary h3,
body.archive.tag #secondary h3,
body.date #secondary h3,
body.author #secondary h3,
body.single-post #secondary h3 {
	margin: 0 0 1.2rem;
	color: rgba(0, 0, 0, .82);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.25;
}

body.blog #secondary ul,
body.archive.category #secondary ul,
body.archive.tag #secondary ul,
body.date #secondary ul,
body.author #secondary ul,
body.single-post #secondary ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.blog #secondary li,
body.archive.category #secondary li,
body.archive.tag #secondary li,
body.date #secondary li,
body.author #secondary li,
body.single-post #secondary li,
body.blog #secondary a,
body.archive.category #secondary a,
body.archive.tag #secondary a,
body.date #secondary a,
body.author #secondary a,
body.single-post #secondary a {
	font-size: 1.4rem;
	line-height: 1.7;
}

/* Restore the theme blog topbar search to the compact pill design. */
.zuri-blog-search {
	position: relative;
	width: min(360px, 100%);
	flex: 0 1 360px;
}

.zuri-blog-search input[type="search"] {
	width: 100%;
	height: 42px;
	padding: 0 44px 0 16px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	background: #fff;
	font-size: 1.4rem;
	line-height: 42px;
	box-shadow: none;
}

.zuri-blog-search button {
	position: absolute;
	top: 50%;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(0, 0, 0, .62);
	box-shadow: none;
	transform: translateY(-50%);
	cursor: pointer;
}

.zuri-blog-search button:hover,
.zuri-blog-search button:focus {
	background: rgba(0, 0, 0, .04);
	color: var(--secondary-color);
}

/* Keep any remaining sidebar search compact on single posts. */
body.single-post #secondary .widget_search form,
body.single-post #secondary .search-form {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

body.single-post #secondary .widget_search input[type="search"],
body.single-post #secondary .search-form input[type="search"] {
	height: 42px;
	padding: 0 14px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	font-size: 1.4rem;
	box-shadow: none;
}

body.single-post #secondary .widget_search input[type="submit"],
body.single-post #secondary .search-form input[type="submit"],
body.single-post #secondary .widget_search button,
body.single-post #secondary .search-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 80px;
	height: 42px;
	padding: 0 16px;
	border-radius: 4px;
	font-size: 1.4rem;
	line-height: 1;
}

/* Prevent global .btn rules from making comment/reply controls oversized. */
body.single-post .comment-reply-link,
body.single-post #respond input#submit,
body.single-post .form-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	height: auto;
	padding: .8rem 1.6rem;
	border-radius: 4px;
	font-size: 1.4rem;
	line-height: 1.2;
}

/* Single post content should remain centered and readable. */
body.single-post .zuri-single {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* Responsive blog/sidebar stacking. */
@media (max-width: 991px) {
	body.blog #primary.content-area.container,
	body.archive.category #primary.content-area.container,
	body.archive.tag #primary.content-area.container,
	body.date #primary.content-area.container,
	body.author #primary.content-area.container,
	body.single-post #primary.content-area.container {
		width: min(100% - 32px, 1180px);
	}

	body.blog .zuricom-shop-sidebar,
	body.archive.category .zuricom-shop-sidebar,
	body.archive.tag .zuricom-shop-sidebar,
	body.date .zuricom-shop-sidebar,
	body.author .zuricom-shop-sidebar,
	body.single-post .zuricom-shop-sidebar {
		margin-top: 3rem;
	}

	.zuri-blog-topbar {
		flex-direction: column;
		align-items: stretch;
	}

	.zuri-blog-search {
		width: 100%;
		flex-basis: auto;
	}
}

/* ==========================================================================
   Blog sidebar search + comment reply polish
   ========================================================================== */

/* Make the sidebar search more visible and properly sized */
body.single-post #secondary .widget_search form,
body.single-post #secondary .search-form {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 360px;
	gap: 8px;
}

body.single-post #secondary .widget_search input[type="search"],
body.single-post #secondary .search-form input[type="search"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 220px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid rgba(0, 0, 0, .16);
	border-radius: 6px;
	background: #fff;
	color: #333;
	font-size: 1.4rem;
	line-height: 42px;
	box-shadow: none;
}

body.single-post #secondary .widget_search input[type="search"]:focus,
body.single-post #secondary .search-form input[type="search"]:focus {
	border-color: var(--secondary-color);
	outline: none;
	box-shadow: 0 0 0 3px rgba(162, 89, 255, .12);
}

body.single-post #secondary .widget_search input[type="submit"],
body.single-post #secondary .search-form input[type="submit"],
body.single-post #secondary .widget_search button,
body.single-post #secondary .search-form button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 78px;
	height: 42px;
	padding: 0 16px;
	border: 0;
	border-radius: 6px;
	background: var(--secondary-color);
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: none;
}

/* Make the comment reply button compact instead of block-like */
body.single-post .comment-reply-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	padding: .45rem 1.1rem !important;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 999px;
	background: #fff;
	color: var(--secondary-color);
	font-size: 1.3rem !important;
	font-weight: 600;
	line-height: 1.2 !important;
	text-decoration: none;
	box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .04);
}

body.single-post .comment-reply-link:hover,
body.single-post .comment-reply-link:focus {
	border-color: var(--secondary-color);
	background: var(--secondary-color);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .08);
}

/* Remove oversized grey box effect around reply link if inherited by comment layout */
body.single-post .comment-content .reply,
body.single-post .comment-body .reply {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	min-width: 0;
	margin-top: .8rem;
	padding: 0;
	background: transparent;
}

/* ==========================================================================
   Blog comment form submit button polish
   ========================================================================== */

body.single-post #respond .form-submit {
	margin-top: 2rem;
  margin-bottom: 2rem;
}

body.single-post #respond input#submit,
body.single-post .comment-form input[type="submit"],
body.single-post .form-submit input[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 150px;
	height: 44px;
	padding: 0 2.2rem !important;
	border: 0;
	border-radius: 6px;
	background: var(--secondary-color);
	color: #fff !important;
	font-size: 1.4rem !important;
	font-weight: 700;
	line-height: 1 !important;
	letter-spacing: .02em;
	text-transform: none;
	text-decoration: none;
	box-shadow: 0 .8rem 1.8rem rgba(162, 89, 255, .22);
	cursor: pointer;
	transition: all .25s ease;
}

body.single-post #respond input#submit:hover,
body.single-post #respond input#submit:focus,
body.single-post .comment-form input[type="submit"]:hover,
body.single-post .comment-form input[type="submit"]:focus,
body.single-post .form-submit input[type="submit"]:hover,
body.single-post .form-submit input[type="submit"]:focus {
	background: #222;
	color: #fff !important;
	box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .16);
	transform: translateY(-1px);
}

body.single-post #respond input#submit:active,
body.single-post .comment-form input[type="submit"]:active,
body.single-post .form-submit input[type="submit"]:active {
	transform: translateY(0);
	box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .12);
}