/* ==== THEME VARIABLES (scoped to the article) ==== */
#post-section > div > div > article {
  --po-bg: #ffffff;
  --po-surface: #f7f7f7;
  --po-text: #111111;
  --po-muted: #666666;
  --po-border: #e5e5e5;
  --po-link: #0a58ca;
  --po-link-hover: #084298;

  background: var(--po-bg);
  color: var(--po-text);
}

/* Dark overrides */
#post-section > div > div > article[data-theme="dark"] {
  color-scheme: dark;
  --po-bg: #0f0f10;
  --po-surface: #17181a;
  --po-text: #f1f1f1;
  --po-muted: #b8b8b8;
  --po-border: #2b2d31;
  --po-link: #7ab0ff;
  --po-link-hover: #a9c8ff;
}

/* Typical inner elements */
#post-section > div > div > article a {
  color: var(--po-link);
}
#post-section > div > div > article a:hover,
#post-section > div > div > article a:focus {
  color: var(--po-link-hover);
}

#post-section > div > div > article hr,
#post-section > div > div > article .wp-block-separator,
#post-section > div > div > article .separator {
  border-color: var(--po-border);
}

#post-section > div > div > article .card,
#post-section > div > div > article .widget,
#post-section > div > div > article .po-site-settings__panel {
  background: var(--po-surface);
  color: var(--po-text);
  border-color: var(--po-border);
}

/* ================ Category Styles ================ */
/* ---------- category cards */
a.po-cat-card__media {
  display: flex;
  justify-content: center;
}
img.attachment-medium.size-medium {
  max-width: 225px;
  border-radius: 5px;
}

a.po-cat-card__media {
  background: #fff;
  padding-bottom: 2rem;
  padding-top: 2rem;
}

article.po-cat-card {
  filter: drop-shadow(2px 4px 6px lightgrey);
}

/* ---------- Responsive Grid driven by .cols-N ---------- */
/* Base: phones <576px = 1 col */
.po-cat-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* ≥576px (Bootstrap sm): up to 2 cols max */
@media (min-width: 576px) {
  .po-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .po-cat-grid.cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* ≥768px (Bootstrap md): use the author's max columns (1..6) */
@media (min-width: 768px) {
  .po-cat-grid.cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .po-cat-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .po-cat-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .po-cat-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .po-cat-grid.cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .po-cat-grid.cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Cards (use your variables; fixed a var name) */
.po-cat-card {
  background: var(--po-surface, #f7f7f7); /* was --po-card-bg */
  border: 1px solid var(--po-border, #e5e5e5);
  border-radius: 0.75rem;
  overflow: hidden;
}
.po-cat-card__media img {
  display: block;
  width: 100%;
  height: auto;
}
.po-cat-card__body {
  padding: 0.75rem 1rem;
}
.po-cat-title {
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.po-cat-desc {
  margin: 0;
  color: var(--po-muted, #555);
}

/* Language visibility */
body.po-lang-en .po-text--fa {
  display: none;
}
body.po-lang-fa .po-text--en {
  display: none;
}

/* Read-more */
.po-readmore {
  font-weight: 600;
  text-decoration: underline;
}

/* Default: hide both until language is known (prevents flash) */
.po-text--en,
.po-text--fa {
  display: none;
}

/* FA pages */
html[lang^="fa"] .po-text--fa,
body.po-lang-fa .po-text--fa {
  display: inline;
}
html[lang^="fa"] .po-text--en,
body.po-lang-fa .po-text--en {
  display: none;
}

/* EN pages (or fallback) */
html[lang^="en"] .po-text--en,
body.po-lang-en .po-text--en {
  display: inline;
}
html[lang^="en"] .po-text--fa,
body.po-lang-en .po-text--fa {
  display: none;
}

/* Safe default if some theme sets a different lang code */
html:not([lang^="fa"]):not([lang^="en"]) .po-text--en {
  display: inline;
}

/*----------- Some more theme refinements */
html[lang^="fa"] .nav-links {
  direction: ltr;
}

/* Flip the whole panel in FA mode */
html[dir="rtl"] .po-site-settings.po-site-settings--panel-only {
  direction: rtl;
  text-align: right;
}

/* Row layout: label on the right, control on the left */
html[dir="rtl"] #po-ss-1-panel .po-site-settings__section,
html[dir="rtl"] #po-ss-2-panel .po-site-settings__section {
  text-align: end;
}

/* Make labels RTL (Persian groups) */
html[dir="rtl"] #po-ss-1-panel .po-site-settings__label,
html[dir="rtl"] #po-ss-1-panel .po-site-settings__sub-label,
html[dir="rtl"] #po-ss-2-panel .po-site-settings__label,
html[dir="rtl"] #po-ss-2-panel .po-site-settings__sub-label {
  direction: rtl !important;
  unicode-bidi: plaintext;
  text-align: right !important;
}

/* Keep the EN group's sub-label LTR so Latin reads naturally */
#po-ss-1-panel [data-language="en"] .po-site-settings__sub-label,
#po-ss-2-panel [data-language="en"] .po-site-settings__sub-label {
  direction: ltr !important;
  text-align: left !important;
}

/* (Already added earlier) Make selects RTL in FA mode */
html[dir="rtl"] #po-ss-1-panel .po-site-settings__select,
html[dir="rtl"] #po-ss-2-panel .po-site-settings__select {
  direction: rtl !important;
  text-align: right !important; /* Chrome/Edge */
  text-align-last: right !important; /* Firefox */
  unicode-bidi: plaintext !important;
  padding-inline: 0.5rem 0.75rem;
}
html[dir="rtl"] #po-ss-1-panel .po-site-settings__select option,
html[dir="rtl"] #po-ss-2-panel .po-site-settings__select option {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext !important;
}

/* Keep EN group's select LTR */
#po-ss-1-panel [data-language="en"] .po-site-settings__select,
#po-ss-1-panel [data-language="en"] .po-site-settings__select option,
#po-ss-2-panel [data-language="en"] .po-site-settings__select,
#po-ss-2-panel [data-language="en"] .po-site-settings__select option {
  direction: ltr !important;
  text-align: left !important;
  text-align-last: left !important;
  unicode-bidi: plaintext !important;
}

/* Font-size controls look correct in RTL */
html[dir="rtl"] #po-ss-1-panel .po-site-settings__font-size-controls,
html[dir="rtl"] #po-ss-2-panel .po-site-settings__font-size-controls {
  direction: rtl;
  justify-content: flex-start;
  gap: 0.5rem;
}