/* -------------------------------------------------
   Global helpers
   ------------------------------------------------- */

/* Make sure you only have ONE link inside your card 😅 or this will not work!  */
.stretch-link{ position: relative; }
.stretch-link a::after{ content:''; position:absolute; inset:0; }
.stretch-link a:is(:focus-visible)::after{ outline:2px solid; }
.stretch-link a:is(:hover,:focus){ outline:none; }

/* Text truncation utilities */
.text-clamp-3 {
  display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical; 
  line-clamp: 3;
  overflow: hidden;
}

/* Single post layout tweak */
.single-post main#main {
  margin-right: 0 !important;
}

/* Archive grid: enhanced 1st & 10th items (desktop) */
@media (min-width:1023px){
  .gb-loop-item-92106be7:nth-of-type(1),
  .gb-loop-item-92106be7:nth-of-type(10){
    grid-column: span 2;
  }
  
  .gb-loop-item-92106be7:nth-of-type(1) .gb-text.gb-text-cbb38e07,
  .gb-loop-item-92106be7:nth-of-type(10) .gb-text.gb-text-cbb38e07{
    font-size: 1.25rem;
  }
}

/* Нийтлэлчид button on mobile menu */
@media (min-width:768px){
  .nav-mobile-only{ display:none; }
}

/* -------------------------------------------------
   CSS Custom Properties (consolidated)
   ------------------------------------------------- */
:root{
  --sx-sticky-top: 64px;
  --sx-thumb: 80px;
  --sx-title-color: var(--base-800, #1f2937);
  --sx-card-h: clamp(375px, 60vh, 600px);
  --sx-head-h: 44px;
}

body.admin-bar{ --sx-sticky-top: 100px; }

@media (max-width:768px){
  :root{
    --sx-thumb: 72px;
    --sx-head-h: 40px;
  }

  .sx-sticky-wrap {
    position: static;
    height: auto;
  }

  .sx-top-bar {
    display: none !important;
  }

  .gb-loop-item-92106be7 {
    grid-column: span 1;
  }

  .wp-block-search__inside-wrapper {
    max-width: 100%;
  }
}

@media (max-width:400px){ 
  :root{ --sx-thumb: 64px; } 
}

/* Dynamic entry copy */
.dynamic-entry-content p {
  text-align: justify;
}

/* Dynamic entry quotes */
.wp-block-quote {
  background-color: var(--brand-10);
}

.dynamic-entry-content blockquote p {
  color: var(--brand);
  text-align: left;
  font-size: 1.25rem;
  font-weight: 300;
}

.wp-block-image, .wp-block-gallery {
  margin-bottom: 1rem;
}

/* -------------------------------------------------
   Right column sticky wrapper
   ------------------------------------------------- */
.sx-sticky-wrap{
  position: sticky;
  top: var(--sx-sticky-top);
  z-index: 5;
  display: block;       /* flex хэрэггүй */
  overflow: visible;    /* гадна тал хориглохгүй */
}

/* -------------------------------------------------
   Sidebar tabs (card)
   ------------------------------------------------- */

.sx-sidebar-tabs{
  display: grid;
  grid-template-rows: auto 1fr; /* 1-р мөр = tabs head, 2-р мөр = scroll area */
  height: var(--sx-card-h);
  padding: 0 8px;
  background: #fff;
}


/* Tabs header (row 1) */
.sx-tabs-head{
  display:flex; gap:8px;
  align-items: center;
  margin: 0 0 8px 0;    /* доод зай */
}
.sx-tab{
  flex:1 1 0;
  padding:8px 12px;
  border-radius:4px;
  background: var(--base-50);
  border:1px solid var(--base-30);
  font-size: 1rem;
  font-weight:500; 
  cursor:pointer;
}
.sx-tab.is-active{ background:var(--brand); color:var(--base-0); border-color:var(--brand); }

/* Panels wrapper (row 2) — Зөвхөн энд гулгана */
.sx-panels{
  min-height: 0;        /* grid child: доторх 1fr shrink зөвшөөрнө */
  overflow: hidden;     /* X scroll хаана */
}
.sx-tab-panel{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.sx-tab-panel[hidden]{ display:none !important; }

/* -------------------------------------------------
   List items (thumb + meta)
   ------------------------------------------------- */
/* List item хэв маяг (таны өмнөхтэй адил) */
.sx-list{ list-style:none; margin:0; padding:0; }
.sx-item{ display:flex; gap:10px; align-items:flex-start; padding:6px 0; border-bottom:1px solid #f1f5f9; }
.sx-item:last-child{ border-bottom:none; }

.sx-thumb{
  flex: 0 0 var(--sx-thumb);
  width: var(--sx-thumb);
  height: var(--sx-thumb);
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.sx-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; }

.sx-title{
  font-size: .9rem;
  font-weight: 400;
  color: var(--sx-title-color);
  line-height: 1.25;
  text-decoration: none;
}
.sx-title:hover{ text-decoration:none; }

/* Apply 3-line clamp to archive card titles; sx-title will use the utility class text-clamp-3 when needed */
.blog-card-archive__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.sx-meta{ display:flex; flex-direction:column; gap:6px; }
.sx-sub{ font-size: 0.75em; color:var(--base-50); }

/* Sticky-д саад болох боломжит overflow-уудыг нээлттэй байлгана */
.gb-container.sx-right, .gb-grid-wrapper, .gb-container{ overflow:visible !important; }

/* Mobile-д sticky OFF болгоё */
@media (max-width:768px){
  .sx-sticky-wrap{ position: static; height:auto; }
}

/* Сүүлд оруулах CSS  */
.gb-text.blog-card-archive__title > a,
.blog-card-archive__title > a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* main.css дээр засварлах: */
@media (min-width: 768px) {
  .gb-loop-item-92106be7:nth-of-type(1),
  .gb-loop-item-92106be7:nth-of-type(10) {
    grid-column: span 2;
  }
  
  .gb-loop-item-92106be7:nth-of-type(1) .gb-text.gb-text-cbb38e07,
  .gb-loop-item-92106be7:nth-of-type(10) .gb-text.gb-text-cbb38e07 {
    font-size: 1.25rem;
  }
  
  .nav-mobile-only { 
    display: none; 
  }
}

@media (max-width: 768px) {
  :root {
    --sx-thumb: 72px;
    --sx-head-h: 40px;
  }

  .sx-sticky-wrap {
    position: static;
    height: auto;
  }

  .sx-top-bar {
    display: none !important;
  }

  .gb-loop-item-92106be7 {
    grid-column: span 1;
  }

  .wp-block-search__inside-wrapper {
    max-width: 100%;
  }
}

@media (min-width: 1023px) {
  .gb-loop-item-92106be7:nth-of-type(1),
  .gb-loop-item-92106be7:nth-of-type(10) {
    grid-column: span 2;
    /* font-size tweak stays here */
  }
}

/* Archive grid: 768px болон түүнээс доош хэмжээнд 1 багана */
@media (max-width: 768px) {
  .gb-loop-item-92106be7 {
    grid-column: span 1;
  }
  
  .sx-sticky-wrap {
    position: static;
    height: auto;
  }
}

.sx-ub-temp {
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}


.comments-title {
  border-top: 1px solid var(--base-20);
  padding-top: 1rem;
  margin-top: 2rem;
}

/* -------------------------------------------------
   Comment form layout
   ------------------------------------------------- */
.comment-form-comment {
  position: relative;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input {
  width: 100%;
  box-sizing: border-box;
}

.comment-char-count {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 0.75rem;
  color: var(--base-50);
}

/* Author + Email wrapper (flex row on desktop) */
.comment-form-author,
.comment-form-email {
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  /* WP wraps fields inside <p>, so we target parent form */
  #commentform {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  #commentform .comment-form-author,
  #commentform .comment-form-email {
    flex: 1 1 calc(50% - 6px);
    margin: 0;
  }

  #commentform .comment-form-comment,
  #commentform .form-submit {
    flex: 1 1 100%;
  }
}

/* Hide avatar in comment list */
#comments .comment-author .avatar,
#comments .comment-meta .avatar {
  display: none;
}

/* Comment body styling */
#comments .comment-body {
  background: transparent;
  border: 0;
  padding: 0 0 1rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--base-30, #eee);
}

/* Nested replies: remove extra borders */
#comments .children .comment-body {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

#comments .children {
  margin: 0;
  padding: 0 0 0 20px;
  border: 0;
  list-style: none;
}

/* Comment author name */
#comments .comment-author .fn {
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

/* Comment text */
#comments .comment-content {
  margin: 0;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  line-height: 1.5;
}

#comments .comment-content p {
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

/* Reply link stays smaller */
#comments .reply {
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
}

#comments .reply a {
  display: inline-block;
  padding-top: 20px;
  color: var(--base-50);
}

#comments .reply a:hover,
#comments .reply a:focus {
  text-decoration: none;
}

/* Hide comment metadata (date, edit link, etc.) */
#comments .comment-metadata {
  display: none;
}

/* Comment list reset */
#comments .comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#comments .comment-list > li {
  margin: 0;
  padding: 0;
}