/*
Theme Name: Baribar Style
Theme URI: https://baribar.kz
Author: Ербол
Author URI: https://baribar.kz
Description: Modern Steppe Editorial — Қазақ журналистикасына арналған редакциялық минимализм стиліндегі тақырып. Playfair Display + Inter + Source Serif 4.
Version: 1.1.15
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baribar-style
Tags: news, blog, custom-colors, custom-logo, editor-style, featured-images, full-width-template, rtl-language-support, sticky-post, translation-ready
*/

/* =========================================================
   DESIGN TOKENS — Modern Steppe Editorial
   ========================================================= */
:root {
	--wp-admin-bar-offset: 0px;
  /* — Surface colors — */
  --color-paper-white:        #faf9f8;
  --color-surface-cream:      #F3EDE1;
  --color-surface-low:        #f4f3f2;
  --color-surface-container:  #eeeeed;
  --color-surface-high:       #e9e8e7;
  --color-surface-dim:        #dadad9;

  /* — Ink / text — */
  --color-ink-stone:          #1C1917;
  --color-on-surface:         #1a1c1c;
  --color-on-surface-variant: #4d4540;

  /* — Brand accents — */
  --color-terracotta:         #5947a5;
  --color-terracotta-dark:    #473984;
  --color-quote-bg:           #F2F0FA;
  --color-sand-muted:         #A89A82;

  /* — Outline — */
  --color-outline:            #7e7570;
  --color-outline-variant:    #d0c4be;
  --color-divider:            rgba(168, 154, 130, 0.3); /* sand-muted/30 */

  /* — Dark mode surfaces — */
  --color-dm-bg:              #1C1917;
  --color-dm-surface:         #2a2520;
  --color-dm-border:          #2E2A27;
  --color-dm-text:            #F5F4F2;
  --color-dm-text-muted:      #9e9690;

  /* — Typography — */
  --font-display:   'Inter', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-article:   'Inter', system-ui, sans-serif;

  /* — Type scale — */
  --text-hero:      clamp(2.5rem, 5vw, 4.5rem);   /* 40–72px */
  --text-h1:        clamp(2rem, 3.5vw, 3rem);      /* 32–48px */
  --text-h2:        clamp(1.5rem, 2.5vw, 2rem);    /* 24–32px */
  --text-h3:        1.375rem;                       /* 22px */
  --text-body-lg:   1.125rem;                       /* 18px */
  --text-body-md:   1rem;                           /* 16px */
  --text-meta:      0.8125rem;                      /* 13px */
  --text-label:     0.75rem;                        /* 12px */

  /* — Spacing — */
  --space-xs:       0.5rem;     /* 8px */
  --space-sm:       1rem;       /* 16px */
  --space-md:       1.5rem;     /* 24px */
  --space-lg:       2rem;       /* 32px */
  --space-xl:       3rem;       /* 48px */
  --space-2xl:      3rem;       /* 48px */
  --space-3xl:      7.5rem;     /* 120px */

  /* — Container — */
  --container-max:  1200px;
  --container-text: 800px;
  --margin-edge:    clamp(1.2rem, 3vw, 2rem);

  /* — Radius — */
  --radius-sm:  0.125rem;
  --radius-md:  0.375rem;
  --radius-lg:  0.5rem;
  --radius-xl:  0.75rem;

  /* — Shadow — */
  --shadow-editorial: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

/* Dark mode tokens */
[data-theme="dark"],
.dark-mode {
	--color-quote-bg:           #29243d;
  --color-paper-white:        #1f1f1f;
  --color-surface-cream:      #221e1a;
  --color-surface-low:        #2a2520;
  --color-on-surface:         #F5F4F2;
  --color-on-surface-variant: #9e9690;
  --color-divider:            rgba(46, 42, 39, 0.8);
  --color-outline-variant:    #2E2A27;
  --color-ink-stone:          #F5F4F2;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family:      var(--font-body);
  font-size:        var(--text-body-md);
  line-height:      1.6;
  color:            var(--color-on-surface);
  background-color: var(--color-paper-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* WP өзі admin bar биіктігін html margin арқылы қосады. Мұнда тек header орны қалады. */
  padding-top:      4rem;
}

::selection {
  background-color: var(--color-terracotta);
  color: #fff;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }

/* =========================================================
   TYPOGRAPHY HELPERS
   ========================================================= */
.font-display   { font-family: var(--font-display); }
.font-body      { font-family: var(--font-body); }
.font-article   { font-family: var(--font-article); }

.label-caps {
  font-family:    var(--font-body);
  font-size:      var(--text-label);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height:    1;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-edge);
}

/* .wrap — Baribar News-тен көшірілген builder/home-sections кодында
   қолданылатын атау, .container-мен бірдей */
.wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-edge);
}

.container--text {
  max-width: var(--container-text);
  margin-inline: auto;
  padding-inline: var(--margin-edge);
}

/* =========================================================
   SITE HEADER
   ========================================================= */
.site-header {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         100;
  height:          4rem;
  background-color: var(--color-paper-white);
  border-bottom:   1px solid var(--color-divider);
  transition:      background-color 0.3s ease, box-shadow 0.3s ease, top 0.3s ease, transform 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-editorial);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* WP admin bar логин болғанда header-ді итеру (қабаттаспас үшін) */
body.admin-bar {
  --wp-admin-bar-offset: 32px;
}
body.admin-bar .site-header { top: var(--wp-admin-bar-offset); }
body.admin-bar .mega {
  top: calc(4rem + var(--wp-admin-bar-offset));
}
@media screen and (max-width: 782px) {
  body.admin-bar { --wp-admin-bar-offset: 46px; }
}

.site-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  max-width:       var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--margin-edge);
}

/* Logo */
.site-logo {
  font-family:    var(--font-display);
  font-size:      clamp(1.5rem, 3vw, 2.25rem);
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--color-ink-stone);
  text-transform: uppercase;
}

/* Custom logo (uploaded image) — height-ке шектеу қою */
.site-header__brand {
  display:     flex;
  align-items: center;
  max-height:  3rem;
  overflow:    hidden;
}
.custom-logo-link {
  display: block;
  line-height: 0;
}
.custom-logo-link img,
.site-header__brand img {
  max-height: 1.6rem;
  width:      auto;
  height:     auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .custom-logo-link img,
  .site-header__brand img {
    max-height: 1.5rem;
  }
}

/* Logo swap — ашық/қара режим ауысуы */
.logo-swap { display: inline-flex; align-items: center; }
.logo-swap__dark { display: none; }
body.dark-mode .logo-swap__light { display: none; }
body.dark-mode .logo-swap__dark  { display: inline-flex; }

.footer-brand .logo-swap__dark img,
.footer-brand .logo-swap__light img {
  max-height: 2.75rem;
  width:      auto;
}

/* Primary navigation */
.primary-nav {
  display:     none;
  align-items: center;
  gap:         2rem;
}

.primary-nav a {
  font-family:    var(--font-body);
  font-size:      var(--text-label);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-on-surface-variant);
  padding-bottom: 2px;
  transition:     color 0.2s ease;
}

.primary-nav a:hover {
  color: var(--color-terracotta);
}

/* Header actions */
.header-actions {
  display:     flex;
  align-items: center;
  gap:         0.125rem;
}

/* Тіл ауыстыру */
.header-lang {
  color:          var(--color-on-surface-variant);
  transition:     color 0.2s ease;
}
.header-lang:hover {
  color: var(--color-terracotta);
}

.header-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2.25rem;
  height:          2.25rem;
  border-radius:   var(--radius-lg);
  color:           var(--color-on-surface-variant);
  transition:      color 0.2s ease, background-color 0.2s ease;
}

.header-btn:hover {
  color:            var(--color-ink-stone);
  background-color: var(--color-surface-low);
}

/* Mobile menu toggle */
.menu-toggle {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  align-items:    center;
  gap:            5px;
  width:          2.25rem;
  height:         2.25rem;
  padding:        0;
  border-radius:  var(--radius-lg);
  transition:     background-color 0.2s ease;
}
.menu-toggle:hover {
  background-color: var(--color-surface-low);
}

.menu-toggle span {
  display:          block;
  width:            1.25rem;
  height:           2px;
  border-radius:    1px;
  background-color: var(--color-on-surface);
  transition:       transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop nav */
@media (min-width: 768px) {
  .primary-nav { display: flex; }
  /* menu-toggle desktop-та да көрінеді — mega-menu-ді ашады */
}

/* =========================================================
   MAIN CONTENT OFFSET (below fixed header)
   ========================================================= */
.site-main {
  /* padding-top body-де беріледі — ticker бар/жоқ жағдайын дұрыс өңдеу үшін */
}

/* =========================================================
   HERO — Full-bleed featured article
   ========================================================= */
.hero {
  position:   relative;
  width:       100%;
  aspect-ratio: 4 / 3;
  overflow:   hidden;
}

@media (min-width: 768px) {
  .hero { aspect-ratio: 21 / 9; }
}

.hero__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.hero:hover .hero__image {
  transform: scale(1.03);
}

.hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(28, 25, 23, 0.75) 0%, transparent 55%);
  z-index:    1;
}

.hero__content {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  z-index:     2;
  padding:     var(--space-lg) var(--margin-edge);
  max-width:   var(--container-max);
  margin-inline: auto;
}

.hero__category {
  display:          inline-block;
  padding:          0.25rem 0.75rem;
  background-color: var(--color-terracotta);
  color:            #fff;
  font-family:      var(--font-body);
  font-size:        var(--text-label);
  font-weight:      600;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  margin-bottom:    var(--space-sm);
}

.hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 5vw, 4.5rem);
  font-weight:    700;
  line-height:    1.05;
  letter-spacing: -0.02em;
  color:          #fff;
  max-width:      48rem;
}

/* =========================================================
   ARTICLE CARD
   ========================================================= */
.card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.card__image-wrap {
  position:    relative;
  overflow:    hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-low);
}

.card__image-wrap--square { aspect-ratio: 1 / 1; }
.card__image-wrap--portrait { aspect-ratio: 3 / 4; }

.card__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card__image {
  transform: scale(1.04);
}

.card__category {
  font-family:    var(--font-body);
  font-size:      var(--text-label);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-terracotta);
}

.card__title {
  font-family:  var(--font-display);
  font-size:    var(--text-h3);
  font-weight:  600;
  line-height:  1.3;
  color:        var(--color-on-surface);
  transition:   color 0.2s ease;
}

.card:hover .card__title { color: var(--color-terracotta); }

.card__meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  font-size:   var(--text-meta);
  color:       var(--color-on-surface-variant);
}

.card__meta-dot {
  width:            3px;
  height:           3px;
  border-radius:    50%;
  background-color: var(--color-sand-muted);
}

/* Card — horizontal layout */
.card--horizontal {
  flex-direction: row;
  gap:            var(--space-md);
}

.card--horizontal .card__image-wrap {
  flex-shrink:  0;
  width:        6rem;
  height:       6rem;
  aspect-ratio: 1 / 1;
}

/* =========================================================
   SECTION HEADING
   ========================================================= */
.section-heading {
  display:       flex;
  align-items:   center;
  gap:           var(--space-sm);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.section-heading__label {
  font-family:    var(--font-body);
  font-size:      var(--space-md);
  font-weight:    800;
  text-transform: uppercase;
  color:          var(--color-terracotta);
}

.section-heading__line {
  flex:             1;
  height:           1px;
  background-color: var(--color-divider);
}

/* =========================================================
   HOME — CONTENT GRID
   ========================================================= */
/* Жеке мақала беті — wrap padding (header-ден кейінгі жоғарғы аралық) */
.single-wrap {
  padding-top:    40px;
  padding-bottom: var(--space-2xl);
}
@media (max-width: 600px) {
  .single-wrap {
    padding-top: 25px;
    padding-bottom: var(--space-md);
  }
}
.single-wrap .home-grid {
  padding-top: 0;
  padding-bottom: 0;
  gap: 3rem;
}
.home-grid.bs-infinite-article {
  padding-top: 0;
  padding-bottom: 0;
}

.home-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-xl);
  padding-block:         var(--space-2xl);
  align-items:           start;
}

@media (min-width: 900px) {
  .home-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.home-grid__main { display: flex; flex-direction: column; gap: var(--space-xs); }
.home-grid__sidebar {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xl);
  position:       sticky;
  top:            calc(4rem + 16px);
  align-self:     start;
  max-height:     calc(100vh - 4rem - 32px);
  overflow-y:     auto;
  scrollbar-width: none;
}
.home-grid__sidebar::-webkit-scrollbar { display: none; }

body.admin-bar .home-grid__sidebar {
  top: calc(4rem + var(--wp-admin-bar-offset) + 16px);
}

@media (max-width: 899px) {
  .home-grid__sidebar {
    position:   static;
    max-height: none;
    overflow-y: visible;
  }
}

/* Сайдбарсыз — толық ені, ортада, оқуға ыңғайлы ені */
@media (min-width: 900px) {
  .home-grid--full {
    grid-template-columns: 1fr !important;
  }
  .home-grid--full .home-grid__main {
    max-width: 53.75rem; /* 860px */
    margin-inline: auto;
    width: 100%;
  }
}

/* Журнал стилі — header ортада, мазмұн 780px ортада, сурет толық бет ені */
.article-header--mag {
  text-align: center;
  max-width: 48.75rem; /* 780px */
  margin-inline: auto;
}
.article-header--mag .post-author-card {
  justify-content: center;
}
.article-header--mag .article-breadcrumb {
  justify-content: center;
}
.home-grid__main--mag .post-thumbnail--mag {
  width: 100%;
}
.entry-content--mag {
  max-width: 48.75rem;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.bs-post-extras--mag {
  max-width: 48.75rem;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .home-grid--full .home-grid__main--mag {
    max-width: 100%;
  }
}

/* Featured article row (3 columns) */
.featured-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-md);
}

@media (min-width: 640px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .featured-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   SINGLE POST — ARTICLE
   ========================================================= */
.article-header {
}

.article-header__category {
  display:          inline-block;
  font-family:      var(--font-body);
  font-size:        var(--text-label);
  font-weight:      600;
  letter-spacing:   0.1em;
  text-transform:   uppercase;
  color:            var(--color-terracotta);
  margin-bottom:    var(--space-sm);
}

.article-header__title {
  font-family:    var(--font-display);
  font-size:      clamp(1.4rem, 3.5vw, 2.1rem);
  font-weight:    700;
  line-height:    1.2;
  letter-spacing: -0.01em;
  color:          var(--color-ink-stone);
  margin-bottom:  var(--space-md);
}

.article-header__lead {
  font-family:  var(--font-display);
  font-size:    var(--text-h3);
  font-weight:  400;
  font-style:   italic;
  line-height:  1.5;
  color:        var(--color-on-surface-variant);
  margin-bottom: var(--space-lg);
}

.article-meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-md);
}

.article-meta__author {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
}

.article-meta__avatar {
  width:         2.75rem;
  height:        2.75rem;
  border-radius: 50%;
  object-fit:    cover;
  border:        1px solid var(--color-outline-variant);
}

.article-meta__name {
  font-family:    var(--font-body);
  font-size:      var(--text-label);
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--color-terracotta);
}

.article-meta__role {
  font-size: var(--text-meta);
  color:     var(--color-on-surface-variant);
}

.article-meta__dot {
  width:            3px;
  height:           3px;
  border-radius:    50%;
  background-color: var(--color-sand-muted);
  flex-shrink:      0;
}

.article-meta time,
.article-meta > span {
  font-size: var(--text-meta);
  color:     var(--color-on-surface-variant);
}

/* =========================================================
   BREADCRUMB — Басты бет / Санат(тар) / Дата
   ========================================================= */
.article-breadcrumb {
  display:        flex;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            0;
  font-size:      0.8125rem;
  color:          var(--color-on-surface-variant);
  margin-bottom:  0.75rem;
  line-height:    1.4;
}
.article-breadcrumb__home {
  color:       var(--color-on-surface-variant);
  font-weight: 400;
  transition:  color 0.15s ease;
}
.article-breadcrumb__home:hover { color: var(--color-ink-stone); }
.article-breadcrumb a {
  color:      var(--color-on-surface-variant);
  font-weight: 400;
  transition: opacity 0.15s ease;
}
.article-breadcrumb a:hover { opacity: 0.75; }
.article-breadcrumb__sep {
  color: var(--color-outline-variant);
  margin: 0 6px;
}
.article-breadcrumb__date { color: var(--color-on-surface-variant); }

/* =========================================================
   POST AUTHOR CARD — Baribar News стилі
   ========================================================= */

.post-author-card {
  display:        inline-flex;
  align-items:    center;
  gap:            0.75rem;
  transition:     opacity 0.15s ease;
}
.post-author-card:hover { opacity: 0.8; }

.post-author-card__avatar {
  width:         3rem;
  height:        3rem;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--color-surface-low);
}
.post-author-card__info {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
}
.post-author-card__name {
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--color-ink-stone);
  line-height: 1.2;
}
.post-author-card__role {
  font-size: 0.8125rem;
  color:     var(--color-on-surface-variant);
  line-height: 1.2;
}

/* =========================================================
   AUTHOR ARCHIVE PAGE — arc-author-card (Baribar News стилі)
   ========================================================= */
.arc-author-card {
  display:        flex;
  align-items:    center;
  gap:            1.5rem;
  padding:        var(--space-lg) 0;
  margin-bottom:  var(--space-lg);
}
@media (max-width: 640px) {
  .arc-author-card { flex-direction: column; align-items: center; text-align: center; }
}
.arc-author-card__avatar {
  width:         8rem;
  height:        8rem;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--color-surface-low);
  box-shadow:    0 2px 16px rgba(0,0,0,.1);
}
.arc-author-card__info { flex: 1; min-width: 0; }
.arc-author-card__label {
  display:        block;
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-terracotta);
  margin-bottom:  0.5rem;
}
.arc-author-card__name {
  font-family:    var(--font-display);
  font-size:      clamp(1.4rem, 3vw, 2rem);
  font-weight:    800;
  color:          var(--color-ink-stone);
  letter-spacing: -0.02em;
  line-height:    1.15;
  margin-bottom:  0.375rem;
}
.arc-author-card__role {
  font-size:     0.875rem;
  color:         var(--color-on-surface-variant);
  font-weight:   500;
  margin-bottom: 0.625rem;
}
.arc-author-card__expertise {
  font-size:     0.8125rem;
  line-height:   1.5;
  color:         var(--color-on-surface-variant);
  margin-bottom: 0.625rem;
}
.arc-author-card__expertise span {
  font-weight: 700;
  color:       var(--color-ink-stone);
}
.arc-author-card__bio {
  font-size:   0.875rem;
  line-height: 1.65;
  color:       var(--color-on-surface);
  max-width:   35rem;
  margin-bottom: 0.625rem;
}
.arc-author-card__socials {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
  margin-top: 0.875rem;
}
.arc-author-card__soc-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            2.25rem;
  height:           2.25rem;
  border-radius:    50%;
  background:       var(--color-surface-low);
  color:            var(--color-on-surface-variant);
  transition:       background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  flex-shrink:      0;
}
.arc-author-card__soc-btn:hover {
  background: var(--color-ink-stone);
  color:      #fff;
  transform:  translateY(-2px);
}

.article-meta__date,
.article-meta__read-time {
  display:     flex;
  align-items: center;
  gap:         0.375rem;
  font-size:   var(--text-meta);
  color:       var(--color-on-surface-variant);
}

/* Article body */
.entry-content {
  font-family:   var(--font-body);
  font-size:     1.0625rem;
  line-height:   1.8;
  color:         var(--color-ink-stone);
}

.entry-content > * { margin-bottom: 1.35rem; }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content p { margin-bottom: 1.35rem; }

.entry-content h2 {
  font-family:    var(--font-display);
  font-size:      1.45rem;
  font-weight:    700;
  line-height:    1.25;
  letter-spacing: -0.01em;
  color:          var(--color-ink-stone);
  margin-top:     2.2rem;
  margin-bottom:  0.75rem;
}

.entry-content h3 {
  font-family:  var(--font-display);
  font-size:    1.2rem;
  font-weight:  700;
  line-height:  1.3;
  color:        var(--color-ink-stone);
  margin-top:   1.8rem;
  margin-bottom: 0.6rem;
}

.entry-content h4 {
  font-family: var(--font-display);
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--color-ink-stone);
  margin-top:  1.5rem;
  margin-bottom: 0.5rem;
}

.entry-content h5 {
  font-family:   var(--font-display);
  font-size:     17px;
  line-height:   25px;
  font-weight:   700;
  color:         var(--color-ink-stone);
  margin-top:    1.3rem;
  margin-bottom: 1.35rem;
}

.entry-content blockquote {
  position:       relative;
  margin-block:   2rem;
  padding:        1.5rem 1.5rem 1.5rem 1.75rem;
  background:     var(--color-quote-bg);
  border-left:    5px solid var(--color-terracotta);
  border-radius:  0 var(--radius-lg) var(--radius-lg) 0;
  font-size:      1.05rem;
  line-height:    1.75;
  color:          var(--color-on-surface);
}

.entry-content blockquote p {
  margin-bottom: 0;
  font-weight:   600;
  font-style:    normal;
}

.entry-content blockquote cite {
  display:        block;
  margin-top:     0.625rem;
  font-family:    var(--font-body);
  font-size:      0.8125rem;
  font-weight:    600;
  color:          var(--color-on-surface-variant);
  font-style:     normal;
}

.entry-content a {
  color:           var(--color-terracotta);
  text-decoration: none;
  border-bottom:   1px solid var(--color-terracotta);
  transition:      color 0.2s ease, border-color 0.2s ease;
}

.entry-content a:hover {
  color:               var(--color-terracotta-dark);
  border-bottom-color:  transparent;
}

.entry-content figure {
  margin-block: var(--space-xl);
}

.entry-content figure img,
.entry-content img {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: var(--radius-lg);
  margin-block:  1.6rem;
}

/* YouTube: WordPress embed және FlyingPress preview екеуі де контейнерден аспайды. */
.entry-content .wp-block-embed-youtube,
.entry-content .wp-block-embed-youtube .wp-block-embed__wrapper,
.entry-content .flying-press-youtube {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.entry-content .wp-block-embed-youtube .wp-block-embed__wrapper,
.entry-content .flying-press-youtube {
  position: relative;
}

.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtube-nocookie.com"] {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
}

.entry-content .wp-block-embed-youtube .wp-block-embed__wrapper > iframe,
.entry-content .flying-press-youtube > iframe {
  position: absolute;
  inset: 0;
  height: 100% !important;
}

.entry-content .flying-press-youtube > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
  font-size:  0.875rem;
  color:      var(--color-on-surface-variant);
  line-height: 1.5;
  margin-top: 0.5rem;
  text-align: left;
}

.entry-content ul,
.entry-content ol {
  padding-left:  0;
  margin-bottom: 1.35rem;
  list-style:    none;
}

.entry-content ul li,
.entry-content ol li {
  position:      relative;
  padding-left:  1.25rem;
  margin-bottom: 0.55rem;
  line-height:   1.7;
}

.entry-content ul li::before {
  content:          '';
  position:         absolute;
  left:             0;
  top:              0.65em;
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background-color: var(--color-ink-stone);
}

.entry-content ol { counter-reset: bs-ol; }
.entry-content ol li {
  counter-increment: bs-ol;
  padding-left:       1.75rem;
}
.entry-content ol li::before {
  content:     counter(bs-ol) '.';
  position:    absolute;
  left:        0;
  top:         0;
  font-size:   0.92em;
  font-weight: 700;
  color:       var(--color-ink-stone);
  line-height: 1.7;
}

/* Журнал стиліндегі Gutenberg columns/gallery мәтін еніне қысылмай, бет еніне жайылады. */
.home-grid__main--mag .entry-content--mag > .wp-block-columns,
.home-grid__main--mag .entry-content--mag > figure.wp-block-gallery.has-nested-images,
.home-grid__main--mag .entry-content--mag > figure.wp-block-image.size-full:not(.is-resized),
.home-grid__main--mag .entry-content--mag > figure.wp-block-image:not([class*="size-"]):not(.is-resized) {
  width: min(
    calc(100vw - var(--margin-edge) - var(--margin-edge)),
    calc(var(--container-max) - var(--margin-edge) - var(--margin-edge))
  );
  max-width: none;
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}

/* Gallery аралықтары көлденең/тігінен бірдей. */
.entry-content > figure.wp-block-gallery.has-nested-images {
  gap: var(--space-sm) !important;
}
.entry-content > figure.wp-block-gallery.has-nested-images > figure.wp-block-image {
  margin-block: 0;
}
.entry-content > figure.wp-block-gallery.has-nested-images > figure.wp-block-image img {
  margin-block: 0;
}

/* columns-2 галереясы: жоғарыда 2 сурет, тақ санды соңғы сурет төменде толық енде. */
.entry-content > figure.wp-block-gallery.has-nested-images.columns-2 > figure.wp-block-image {
  flex: 0 0 calc(50% - 0.5rem) !important;
  width: calc(50% - 0.5rem) !important;
}
.entry-content > figure.wp-block-gallery.has-nested-images.columns-2 > figure.wp-block-image:nth-child(odd):last-child {
  flex-basis: 100% !important;
  width: 100% !important;
}

/* Columns ішіндегі сурет margin-дері келесі тақырыпқа артық бос орын қоспайды. */
.entry-content > .wp-block-columns {
  margin-block: var(--space-md);
}
.entry-content > .wp-block-columns figure.wp-block-image,
.entry-content > .wp-block-columns figure.wp-block-image img {
  margin-block: 0;
}
.entry-content > .wp-block-columns + h2 {
  margin-top: var(--space-md);
}

/* Редакторда is-resized арқылы берілген inline width өзгеріссіз қалады. */
.entry-content figure.wp-block-image.is-resized img {
  max-width: 100%;
}

/* baribar.kz мақала типографиясы — ұялы экран */
@media (max-width: 600px) {
  .entry-content,
  .entry-content--mag {
    font-size: 15px;
    line-height: 1.75;
  }
  .entry-content h2 {
    font-size: 1.15rem;
    line-height: 1.25;
  }
  .entry-content h3 {
    font-size: 1.05rem;
  }
  .entry-content h4 {
    font-size: 1rem;
  }
  .entry-content h5 {
    font-size: 15px;
    line-height: 24px;
  }
  .entry-content blockquote {
    font-size: 16px;
    line-height: 1.75;
  }
  .post-author-card__name {
    font-size: 13px;
  }
  .post-author-card__role {
    font-size: 11px;
  }
  .entry-content > .wp-block-columns {
    flex-wrap: nowrap !important;
    gap: var(--space-sm);
  }
  .entry-content > .wp-block-columns > .wp-block-column {
    flex: 1 1 0 !important;
    min-width: 0;
  }
}

/* =========================================================
   FEATURED IMAGE (Single post)
   ========================================================= */
.post-thumbnail {
  width:     100%;
  border-radius: var(--radius-lg);
  margin-top:    0;
  margin-bottom: var(--space-sm);
  overflow:  hidden;
}

/* Журнал стилінде сурет толық ені, бірақ биіктігі де бақыланады (жайылмайды) */
.post-thumbnail--mag {
  aspect-ratio: auto;
  height: auto;
}
.post-thumbnail--mag img {
  height: auto;
  object-fit: contain;
}

.post-thumbnail__caption {
  font-size:  0.875rem;
  color:      #848484;
  line-height: 1.5;
  margin-top: 0.5rem;
  padding-inline: 0.25rem;
}

.post-thumbnail img {
  width:      100%;
  height:     auto;
  display:    block;
  border-radius: var(--radius-lg);
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar-widget {}

.sidebar-widget--popular {
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  background: var(--color-quote-bg);
  border-radius: 5px;
  border-bottom: 1px solid var(--color-divider);
}

.widget-title {
  font-family:    var(--font-body);
  font-size:      var(--text-label);
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-terracotta);
  padding-bottom: var(--space-sm);
  border-bottom:  2px solid var(--color-terracotta);
  margin-bottom:  var(--space-md);
  display:        inline-block;
}

/* =========================================================
   CATEGORY BADGE
   ========================================================= */
.badge {
  display:          inline-flex;
  align-items:      center;
  padding:          0.2rem 0.6rem;
  background-color: var(--color-terracotta);
  color:            #fff;
  font-family:      var(--font-body);
  font-size:        var(--text-label);
  font-weight:      600;
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  border-radius:    var(--radius-sm);
}

.badge--outline {
  background-color: transparent;
  border:           1px solid var(--color-sand-muted);
  color:            var(--color-on-surface-variant);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.5rem;
  padding:          0.75rem 1.5rem;
  font-family:      var(--font-body);
  font-size:        var(--text-label);
  font-weight:      600;
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  border-radius:    var(--radius-lg);
  transition:       background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  cursor:           pointer;
}

.btn--primary {
  background-color: var(--color-terracotta);
  color:            #fff;
}

.btn--primary:hover { background-color: var(--color-terracotta-dark); }

.btn--secondary {
  background-color: transparent;
  border:           1px solid var(--color-sand-muted);
  color:            var(--color-on-surface-variant);
}

.btn--secondary:hover {
  border-color: var(--color-ink-stone);
  color:        var(--color-ink-stone);
}

/* =========================================================
   SHARE BAR
   ========================================================= */
.share-bar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-md);
  padding-block:   var(--space-sm);
  border-top:      1px solid var(--color-divider);
  border-bottom:   1px solid var(--color-divider);
  margin-block:    var(--space-xl);
}

.share-bar__btn {
  display:         flex;
  align-items:     center;
  gap:             0.375rem;
  font-size:       var(--text-meta);
  color:           var(--color-on-surface-variant);
  transition:      color 0.2s ease;
}

.share-bar__btn:hover { color: var(--color-terracotta); }

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         var(--space-xs);
  padding-block: var(--space-2xl);
}

.page-numbers {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  min-width:        2.5rem;
  height:           2.5rem;
  padding-inline:   0.75rem;
  font-family:      var(--font-body);
  font-size:        var(--text-meta);
  font-weight:      600;
  color:            var(--color-on-surface-variant);
  border:           1px solid var(--color-outline-variant);
  border-radius:    var(--radius-md);
  transition:       all 0.2s ease;
}

.page-numbers:hover,
.page-numbers.current {
  background-color: var(--color-terracotta);
  border-color:     var(--color-terracotta);
  color:            #fff;
}

.page-numbers.dots { border: none; }

@media (max-width: 480px) {
  .archive-pagination { flex-wrap: wrap; padding-block: 0.75rem 1rem; }
  .archive-pagination .page-numbers { min-width: 2.25rem; height: 2.25rem; padding-inline: 0.625rem; }
}

/* =========================================================
   COMMENTS
   ========================================================= */
.comments-area {
  padding-top:    var(--space-2xl);
  border-top:     1px solid var(--color-divider);
  margin-top:     var(--space-2xl);
}

.comments-title,
.comment-reply-title {
  font-family:  var(--font-display);
  font-size:    var(--text-h2);
  font-weight:  600;
  color:        var(--color-ink-stone);
  margin-bottom: var(--space-lg);
}

.comment-list { display: flex; flex-direction: column; gap: var(--space-lg); }

.comment-body {
  display:   flex;
  gap:       var(--space-md);
  padding:   var(--space-md);
  background-color: var(--color-surface-low);
  border-radius:    var(--radius-xl);
}

.comment-author .avatar {
  width:         3rem;
  height:        3rem;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
}

.comment-meta { margin-bottom: var(--space-xs); }

.comment-author-name {
  font-weight: 600;
  font-size:   var(--text-meta);
  color:       var(--color-ink-stone);
}

.comment-date {
  font-size: var(--text-meta);
  color:     var(--color-on-surface-variant);
}

/* Comment form */
.comment-form { display: flex; flex-direction: column; gap: var(--space-md); }

.comment-form label {
  font-family:    var(--font-body);
  font-size:      var(--text-label);
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--color-on-surface-variant);
  display:        block;
  margin-bottom:  0.375rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width:            100%;
  padding:          0.75rem 1rem;
  background-color: var(--color-surface-cream);
  border:           none;
  border-radius:    var(--radius-lg);
  font-family:      var(--font-body);
  font-size:        var(--text-body-md);
  color:            var(--color-on-surface);
  outline:          none;
  transition:       box-shadow 0.2s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
  box-shadow: 0 0 0 2px var(--color-terracotta);
}

.comment-form textarea { min-height: 8rem; resize: vertical; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background-color: var(--color-ink-stone);
  color:            rgba(255,255,255,.75);
  margin-top:       0;
  padding-top:      20px;
}

[data-theme="dark"] .site-footer,
.dark-mode .site-footer {
  background-color: #141414;
}

.footer-main { padding-block: 24px; }

.footer-row {
  display:         flex;
  align-items:     center;
  gap:             24px;
}

.footer-brand__logo { display: block; width: 120px; text-decoration: none; flex-shrink: 0; line-height: 0; }
.footer-brand__text {
  font-family:    var(--font-display);
  font-size:      1.5rem;
  font-weight:    700;
  color:          #fff;
  letter-spacing: -0.02em;
}
.footer-brand__img { display: block; width: 120px; height: auto; max-height: none; object-fit: contain; }

.footer-nav-inline {
  display:         flex;
  align-items:     center;
  gap:             0;
  justify-content: center;
  flex:            1;
}
.footer-link-item {
  display:     block;
  padding:     4px 12px;
  font-size:   .875rem;
  color:       rgba(255,255,255,.65);
  transition:  color .15s;
}
.footer-link-item:hover { color: #fff; }

.footer-socials {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}
.footer-soc-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  border:          1.5px solid rgba(255,255,255,.2);
  color:           rgba(255,255,255,.75);
  transition:      border-color .15s, color .15s;
}
.footer-soc-btn svg { width: 1rem; height: 1rem; }
.footer-soc-btn:hover { border-color: #fff; color: #fff; }

.footer-about {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             24px;
  margin-top:      24px;
  padding-top:     24px;
  border-top:      1px solid rgba(255,255,255,.1);
}
.footer-about__left { flex: 1; min-width: 0; }
.footer-about__text {
  font-size:   15px;
  color:       rgba(255,255,255,.55);
  line-height: 1.6;
}
.footer-about__text a { color: rgba(255,255,255,.75); text-decoration: underline; }
.footer-contacts {
  display:        flex;
  align-items:    center;
  gap:            20px;
  flex-shrink:    0;
}
.footer-contact-item {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  font-size:   .875rem;
  color:       rgba(255,255,255,.75);
  transition:  color .15s;
}
.footer-contact-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.footer-contact-item:hover { color: #fff; }

.footer-bottom {
  border-top:    1px solid rgba(255,255,255,.1);
  padding-block: 14px;
  background:    transparent;
}
.footer-bottom__inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-sm);
  font-size:       12px;
  color:           rgba(255,255,255,.4);
}

@media (max-width: 700px) {
  .footer-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-brand__logo { padding-bottom: 15px; }
  .footer-nav-inline { width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; }
  .footer-link-item { padding: 4px 0; }
  .footer-socials { width: 100%; gap: 8px; }
  .footer-about { flex-direction: column; gap: 12px; }
  .footer-about__text { font-size: 14px; line-height: 1.6; }
  .footer-contacts { align-items: center; gap: 20px; }
  .footer-bottom__inner { gap: 4px; }
}


/* =========================================================
   404 PAGE
   ========================================================= */
.error-404 {
  min-height:      70vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  gap:             var(--space-md);
  padding-block:   var(--space-3xl);
}

.error-404__code {
  font-family:    var(--font-display);
  font-size:      clamp(5rem, 15vw, 12rem);
  font-weight:    700;
  line-height:    1;
  letter-spacing: -0.05em;
  color:          var(--color-surface-dim);
}

.error-404__title {
  font-family: var(--font-display);
  font-size:   var(--text-h1);
  font-weight: 600;
  color:       var(--color-ink-stone);
}

.error-404__desc {
  font-size:  var(--text-body-md);
  color:      var(--color-on-surface-variant);
  max-width:  30rem;
  line-height: 1.6;
}

/* =========================================================
   SEARCH FORM
   ========================================================= */
.search-form {
  display:   flex;
  gap:       0;
  max-width: 30rem;
}

.search-form__input {
  flex:             1;
  padding:          0.75rem 1rem;
  background-color: var(--color-surface-cream);
  border:           none;
  border-radius:    var(--radius-lg) 0 0 var(--radius-lg);
  font-family:      var(--font-body);
  font-size:        var(--text-body-md);
  color:            var(--color-on-surface);
  outline:          none;
}

.search-form__input:focus {
  box-shadow: inset 0 0 0 2px var(--color-terracotta);
}

.search-form__btn {
  padding:          0.75rem 1.25rem;
  background-color: var(--color-terracotta);
  color:            #fff;
  border-radius:    0 var(--radius-lg) var(--radius-lg) 0;
  transition:       background-color 0.2s ease;
}

.search-form__btn:hover { background-color: var(--color-terracotta-dark); }

/* =========================================================
   SEARCH MODAL — толық экранды, қою қараңғы фон (Baribar News-тен)
   ========================================================= */
.srch-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(15, 15, 18, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.srch-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.srch-overlay__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.srch-overlay__close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.srch-overlay__form {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  max-width: 40rem;
  border-bottom: 2.5px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
}
.srch-overlay__form input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 500;
  color: #fff;
  padding: 0.5rem 0;
}
.srch-overlay__form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.srch-overlay__hint {
  margin-top: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}

/* =========================================================
   UTILITIES
   ========================================================= */
.visually-hidden {
  position:   absolute;
  width:       1px;
  height:      1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
}

.text-terracotta { color: var(--color-terracotta); }
.text-muted      { color: var(--color-on-surface-variant); }
.text-ink        { color: var(--color-ink-stone); }

.divider {
  height:           1px;
  background-color: var(--color-divider);
  border:           none;
  margin-block:     var(--space-xl);
}

@media (max-width: 600px) {
  .divider { margin-block: var(--space-md); }
}

/* WordPress alignment classes */
.alignnone  { margin: 0.25rem 1rem 1rem 0; }
.aligncenter { display: block; margin: var(--space-md) auto; }
.alignright { float: right; margin: 0.25rem 0 1rem 1rem; }
.alignleft  { float: left; margin: 0.25rem 1rem 1rem 0; }

/* WordPress image sizes */
img.aligncenter { display: block; margin: 0 auto; }

/* Clearfix */
.cf::after { content: ''; display: table; clear: both; }

/* Screen reader */
.screen-reader-text {
  border:     0;
  clip:       rect(1px, 1px, 1px, 1px);
  clip-path:  inset(50%);
  height:     1px;
  overflow:   hidden;
  position:   absolute;
  white-space: nowrap;
  width:       1px;
}

/* =========================================================
   SKELETON LOADING — суреттер жүктелгенде тек фон түсі
   (shimmer анимациясы CLS туғызады — алынды)
   ========================================================= */
img:not(.is-loaded) {
  background: var(--color-surface-low);
}
@media (prefers-reduced-motion: reduce) {
  img:not(.is-loaded) { background: var(--color-surface-low); }
}