body.nav-open *:not(.nav-content):not(.nav-content *) {
  pointer-events: none;
}

body.js-not-ready .header .container {
  opacity: 0;
  transition: opacity .3s ease;
}

body.js-ready .header .container {
  opacity: 1;
}

body.js-not-ready aside.ascora-shop-sidebar {
  opacity: 0;
  transition: opacity .3s ease;
}

body.js-ready aside.ascora-shop-sidebar {
  opacity: 1;
}

/*
WordPress Default HTML elements css
*/
.wp-caption {
  max-width: 100%;
  text-align: center;
  margin: 1em 0;
}

.wp-caption-text {
  font-size: 0.9em;
  color: #555;
}

.gallery-caption {
  text-align: center;
  font-style: italic;
  font-size: 0.9em;
  color: #666;
}

.bypostauthor {
  border-left: 3px solid #e1b12c;
  padding-left: 10px;
}

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

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

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
} */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* লোডিং স্পিনার (যদি প্রয়োজন হয়) */
#loading {
  display: none;
}

.loader {
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: calc(100% / 3) 100%;
  animation: l7 1s infinite linear;
}

@keyframes l7 {
  33% {
    background-size: calc(100% / 3) 0%, calc(100% / 3) 100%, calc(100% / 3) 100%;
  }

  50% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 0%, calc(100% / 3) 100%;
  }

  66% {
    background-size: calc(100% / 3) 100%, calc(100% / 3) 100%, calc(100% / 3) 0%;
  }
}

/******************************
-	Single Page	-
********************************/
/* navigation */
.single-post .nav-next,
.single-post .nav-previous {
  display: inline-block;
}

/* Title*/

/* Abou Author*/
.about-author .authot-name h2 {
  font-size: 35px;
  color: #333;
  font-weight: 600;
}

.about-author .authot-name h2 a {
  font-size: 35px;
  color: #333;
  font-weight: 600;
}

.about-author .d-flex .author-pick {
  margin-right: 10px;
}

.author-pic img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

/* Socail Share*/
.social-share {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.social-share .social-share-icon a {
  margin: 5px;
}

/* Related Post*/
.author-related-post {
  margin: 30px auto;
}

.author-related-post h3.related-title {
  font-size: 35px;
  color: #333;
  font-weight: 600;
}

.author-related-post .media img {
  height: 220px;
}

/* Comments*/
#comments h3.comment-title {
  font-size: 35px;
  color: #333;
  font-weight: 600;
}

#comment-list li {
  margin: 5px auto;
}

#comments ol.comment-list {
  list-style: none;
  margin-left: 0;
  padding: 0;
}

#comments ol.children {
  list-style: none;
  margin-left: 50px;
}

#comments .comment-author img {
  border-radius: 50%;
  margin-right: 10px;
}

#comments .the-comment {
  margin: 20px auto;
}

#comments .comment-box {
  width: 100%;
}

#comments .comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

#comments .comment-author .float-end {
  margin-left: auto;
}

#comments .comment-box .meta a {
  text-decoration: none;
  color: #333;
}

/* comment_form */
.comment-respond h3.comment-reply-title {
  font-size: 35px;
  color: #333;
  font-weight: 600;
}

.comment-respond textarea {
  width: 100%;
}

.comment-respond .col input {
  width: 100%;
}

/* কন্টেইনার */
.comment-form .comment-input {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

/* প্রতিটি ইনপুট গ্রুপ */
.comment-form .comment-input .input-group {
  position: relative;
  width: 32%;
  margin-bottom: 20px;
}

/* ইনপুট ফিল্ড */
.comment-form .comment-input .input-group input {
  width: 100%;
  padding: 12px 10px;
  font-size: 16px;
  border: 2px solid #560bad;
  border-radius: 5px;
  outline: none;
  transition: all 0.3s ease-in-out;
  background: white;
  position: relative;
  z-index: 1;
}

/* লেভেল */
.comment-form .comment-input .input-group label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  background: white;
  padding: 0 5px;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  z-index: 2;
}

/* যখন ইনপুট খালি থাকবে */
.comment-form .comment-input .input-group input:placeholder-shown+label {
  top: 50%;
  font-size: 16px;
  color: #999;
}

/* যখন ইনপুটে কিছু লেখা হবে বা ফোকাস করা হবে */
.comment-form .comment-input .input-group input:not(:placeholder-shown)+label,
.comment-form .comment-input .input-group input:focus+label {
  top: 0;
  font-size: 12px;
  color: #560bad;
}

/* Textarea */

.comment-textarea {
  position: relative;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.comment-textarea textarea {
  width: 100%;
  padding: 12px 10px;
  font-size: 16px;
  border: 2px solid #560bad;
  border-radius: 5px;
  outline: none;
  transition: all 0.3s ease-in-out;
  background: white;
  resize: vertical;
  position: relative;
  z-index: 1;
}

.comment-textarea label {
  position: absolute;
  left: 10px;
  top: 15px;
  font-size: 16px;
  color: #999;
  background: white;
  padding: 0 5px;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  z-index: 2;
}

.comment-textarea textarea:placeholder-shown+label {
  top: 15px;
  font-size: 16px;
  color: #999;
}

.comment-textarea textarea:not(:placeholder-shown)+label,
.comment-textarea textarea:focus+label {
  top: -6px;
  font-size: 12px;
  color: #560bad;
}

/* ====== Bootom TO top ======== */
#scrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.3s ease;
}

#scrollToTop.show {
  opacity: 1;
  visibility: visible;
}

/*
Pagination Blog
*/
.pagination a,
.pagination .nav-links a {
  text-decoration: none;
  padding: 8px 15px;
  margin-right: 0;
  color: var(--pagination_text_color) !important;
  font-size: var(--pagination_font_size);
}

.pagination a.prev {
  padding: 8px 25px;
}

.pagination a.next {
  padding: 8px 25px;
}

.pagination span {
  padding: 8px 15px;
  color: var(--pagination_active_color);
  cursor: not-allowed;
  background-color: var(--pagination_active_hover);
}

.pagination a:hover,
.single-post .nav-links a:hover {
  background-color: var(--pagination_active_hover);
  color: var(--pagination_active_color) !important;
}


.ascora-post {
  margin: 30px auto;
}

#posts-container .blog-article {
  margin: 20px auto;
}

/* */
.blog-attr {
  margin-bottom: 10px;
}

.blog-attr span,
.blog-attr a {
  font-size: var(--blog_meta_font_size);
  text-decoration: none;
}

a:focus,
button:focus,
input:focus {
  outline: 2px solid #e1b12c;
  /* Ascora accent color */
  /* outline-offset: 2px; */
}


.skip-link.screen-reader-text {
  border: 0;
  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, .6);
  clip: auto !important;
  clip-path: none;
  color: #333;
  display: block;
  font-size: 1rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000
}

/* 404 Page */
.error-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-primary {
  background-color: var(--color-primary, #273c75);
  color: #fff;
}

.btn-secondary {
  background-color: var(--color-secondary, #e1b12c);
  color: #fff;
}

.smooth-scroll {
  scroll-behavior: smooth;
}

.error-image {
  width: 80%;
  margin: 25px auto;
}

.error-image img {
  width: 100%;
  height: auto;
}

/* Archive Page */
.archive-page {
  border-bottom: 5px double #555;
}

.archive-main {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.archive-main .row {
  gap: 2rem;
}

/* Author Page */
.author-page {
  border-bottom: 5px double #555;
}

.cat-title a,
.authot-name a {
  text-decoration: none;
}

.author-main {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.author-main .row {
  gap: 2rem;
}

.author-card.d-flex {
  align-items: end;
}