/*
 Theme Name:   Twenty Twenty-One Child
 Theme URI:    https://diviextended.com/
 Description:  A child theme of Twenty Twenty-One WordPress theme.
 Author:       Elicus Technologies
 Author URI:   https://elicus.com
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url("../twentytwentyone/style.css");


/* Custom design */
.portfolio-list:hover .portfolio-list-heading .elementor-heading-title{color: #d3b575;}

/* Base header styles */
#header_pop {
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: opacity, transform;
}

/* Hidden state */
#header_pop.header-hide {
  opacity: 0;
  transform: translateY(-20px); /* slight upward fade */
  pointer-events: none; /* prevent blocking clicks */
}


/* Sidebar list (if you use a recent-posts-with-thumbs plugin, keep its CSS) */
.widget .wp-block-latest-posts__list,
.zw-recent-list { list-style:none; margin:0; padding:0; }
.zw-related-posts{ margin-top:48px; }
.zw-related-posts .zw-section-title{ font-size:1.25rem; margin:0 0 .75rem; }

.zw-cards{ display:grid; gap:28px; }
.zw-cards.cols-1{ grid-template-columns:1fr; }
.zw-cards.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.zw-cards.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1024px){ .zw-cards.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .zw-cards{ grid-template-columns:1fr; } }

.zw-card{ background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; }
.zw-thumb img{ width:100%; height:240px; object-fit:cover; display:block; }
.zw-card-title{ font-size:1.25rem; margin:14px 16px 6px; line-height:1.25; }
.zw-card-title a{ text-decoration:none; }

.zw-meta{ list-style:none; margin:0 16px 8px; padding:0; display:flex; flex-wrap:wrap; gap:12px; color:#6a6a6a; font-size:.92rem; }
.zw-meta-cats a{ text-decoration:none; }
.zw-excerpt{ margin:0 16px 16px; color:#333; }

.zw-btn{
  display:inline-block; margin:0 16px 18px; padding:10px 16px;
  background:#d1b35b; color:#111; text-decoration:none; font-weight:600; border-radius:6px;
}
.zw-btn:hover{ opacity:.9; }

/* Make related-post thumbs a neat 16:9 crop */
.zw-cards .zw-thumb{ display:block; aspect-ratio:16/9; overflow:hidden; border-radius:8px; }
.zw-cards .zw-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* If you used the class zw-related-thumb instead of the wrapper above, use this: */
.zw-related-posts .zw-related-thumb{ width:100%; height:220px; object-fit:cover; border-radius:8px; display:block; }

/* Responsive grid that fills the row nicely */
.zw-cards{ display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }