/*
Theme Name: misterBIT Blog
Theme URI: https://www.misterbit.co.il
Author: misterBIT
Description: A fresh, Elementor-free theme that mirrors the misterBIT static site (Crumina "Education" design) and adds the blog. RTL / Hebrew only. Reuses the parent site's compiled CSS, fonts, images and SVG sprite.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: misterbit-blog
*/

/* -------------------------------------------------------------
   Only blog-specific glue lives here. The heavy lifting comes
   from the parent site's stylesheets, enqueued in functions.php:
     /css/theme-styles.css, /css/blocks.css, /css/widgets.css,
     /css/style.css, /css/rtl.css
   ------------------------------------------------------------- */

/* page header / hero for blog + archive + single */
.blog-page-header {
  padding: 60px 0 20px;
  text-align: center;
}
.blog-page-header .blog-page-title {
  margin-bottom: 10px;
}
.blog-page-header .blog-page-subtitle {
  color: #6987ab;
  font-size: 18px;
}

/* the listing grid — compact cards */
.blog-grid {
  margin-top: 30px;
}
/* flex row so cards align and wrap; responsive columns: 3 / 2 / 1 */
.blog-grid.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.blog-grid > [class*="col-"] {
  display: flex;
  float: none;
  width: 33.3333%;
  margin-bottom: 30px;
}
@media (max-width: 1024px) {
  .blog-grid > [class*="col-"] { width: 50%; }        /* tablet/laptop: 2 per row */
}
@media (max-width: 767px) {
  .blog-grid > [class*="col-"] { width: 100%; }       /* mobile: 1 per row */
}
.blog-grid .post {
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
/* yellow hover glow on grid cards */
.blog-grid .post:hover {
  box-shadow: 10px 0 50px rgba(255, 203, 5, 0.35);
}
.blog-grid .post-thumb {
  width: 100%;
  aspect-ratio: 1024 / 576;
}
.blog-grid .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-grid .post__content {
  padding: 24px 28px;
  flex: 1 1 auto;
}
.blog-grid .post__title {
  font-size: 18px;
}
.blog-grid .post p {
  font-size: 15px;
  margin-bottom: 16px;
}
.blog-grid .post__date {
  margin-left: 20px;
}
.blog-grid .post__date .number {
  font-size: 30px;
  margin-bottom: 4px;
}
.blog-grid .post-additional-info {
  font-size: 14px;
}
.post-additional-info a .read-more-caret {
  margin-right: 6px;
  font-weight: 700;
  color: inherit;
}

/* thumbnail placeholder when a post has no featured image */
.post-thumb.post-thumb--placeholder {
  background: linear-gradient(135deg, #0083ff 0%, #66b5ff 100%);
  border-radius: 10px 10px 0 0;
  width: 100%;
  aspect-ratio: 1024 / 576;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-thumb.post-thumb--placeholder .utouch-icon,
.post-thumb.post-thumb--placeholder img {
  width: 56px;
  height: 56px;
  fill: #fff;
  opacity: .9;
}

/* pager */
.blog-pagination {
  text-align: center;
  padding: 20px 0 90px;
}
.blog-pagination .page-numbers.next,
.blog-pagination .page-numbers.prev {
  width: auto;
  padding: 0 22px;
  border-radius: 25px;
}

/* single post */
.single-post-body {
  padding: 40px 0 80px;
}
.single-post-body .post__content {
  padding: 0;
}
.single-post-content {
  font-size: 17px;
  line-height: 1.9;
}
.single-post-content p,
.single-post-content ul,
.single-post-content ol {
  font-size: 20px;
}
.single-post-content img { max-width: 100%; height: auto; border-radius: 10px; }
.single-post-thumb img { width: 100%; border-radius: 10px; margin-bottom: 40px; }
.single-post-meta {
  color: #6987ab;
  margin-bottom: 30px;
  font-weight: 700;
}
.single-post-meta a { color: #ffcb05; }

/* "back to blog" above the title */
.back-to-blog {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 18px;
}

/* prev/next: prev on the right, next on the left (RTL), matching site font */
.single-post-body .pagination-arrow {
  direction: rtl;
}
.single-post-body .pagination-arrow .btn-prev-wrap { order: 1; }
.single-post-body .pagination-arrow .btn-next-wrap { order: 2; }
.single-post-body .pagination-arrow a {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: #10141a;
  transition: color .3s ease;
}
.single-post-body .pagination-arrow a:hover { color: #ffcb05; }

/* related posts — full-width section below the post */
.related-posts {
  border-top: 1px solid #e6edf5;
  padding: 50px 0;
}
.related-posts__title {
  margin-bottom: 24px;
  text-align: right;
}

/* keep everything RTL-comfortable */
.blog-grid .post__date { float: right; margin-right: 0; margin-left: 30px; }

/* blue links -> yellow (hover included) across blog content + footer.
   Exclude the .page-numbers pager, whose hover already has a yellow background
   (yellow text on it would be unreadable). */
.content-wrapper a:not(.page-numbers):hover,
.footer .widget a:hover,
.single-post-meta a:hover {
  color: #ffcb05;
}

/* links inside the post body: site yellow + underline */
.single-post-content a {
  color: #ffcb05;
  text-decoration: underline;
}
.single-post-content a:hover {
  color: #ffcb05;
  text-decoration: underline;
}

/* full-width container on small screens (was 710px at <=768px) */
@media (max-width: 768px) {
  .container { width: 100%; }
}

/* mobile-only tweaks */
@media (max-width: 767px) {
  /* single post: clear the fixed header, and drop the article's card shadow */
  .single-post-body {
    padding: 120px 0 40px;
    box-shadow: none !important;
  }
  .single-post-body .blog-page-header { padding-top: 20px; }
  /* blog home (main page): clear the fixed header */
  .home .blog-page-header { padding-top: 120px; }
  /* no extra gap above the grid on mobile */
  .blog-grid { margin-top: 0; }
}

/* -------------------------------------------------------------
   WordPress admin bar (only present when logged in). WP shifts
   <html> down and reserves space via the header-spacer, but our
   position:fixed header ignores that, so push it below the bar.
   Bar height: 32px desktop, 46px <=782px; at <=600px WP makes the
   bar scroll away (position:absolute), so we pin the header to 0.
   ------------------------------------------------------------- */
.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .header { top: 0; }
}