/*
Theme Name: Stoma Journal
Theme URI: https://stomajournal.uz/
Author: Smart Ideas
Description: Научная тема для медицинского журнала «Современная стоматология».
Version: 1.0.0
Text Domain: stomajournal
*/

:root {
  --sj-ink: #18343b;
  --sj-muted: #63777b;
  --sj-teal: #0b5961;
  --sj-teal-dark: #063f47;
  --sj-accent: #18a69d;
  --sj-accent-soft: #dff4f1;
  --sj-paper: #fffdfa;
  --sj-cream: #f5f1e8;
  --sj-line: #dce6e4;
  --sj-white: #ffffff;
  --sj-shadow: 0 18px 50px rgba(12, 63, 70, .10);
  --sj-radius: 18px;
  --sj-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--sj-ink);
  background: var(--sj-paper);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sj-teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sj-accent); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 .65em; color: var(--sj-teal-dark); font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.18; }
h1 { font-size: clamp(2.2rem, 5vw, 4.7rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.8rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
p { margin: 0 0 1.1em; }
.sj-container { width: min(calc(100% - 40px), var(--sj-width)); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.sj-topbar { background: var(--sj-teal-dark); color: rgba(255,255,255,.78); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.sj-topbar__inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sj-topbar a { color: var(--sj-white); text-decoration: none; }
.sj-languages { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sj-languages .current-lang a, .sj-lang--active { color: #7de0d6; }
.sj-languages ul { display: flex; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sj-header { position: sticky; top: 0; z-index: 20; background: rgba(255,253,250,.96); border-bottom: 1px solid var(--sj-line); backdrop-filter: blur(14px); }
.sj-header__inner { min-height: 92px; display: flex; align-items: center; gap: 38px; }
.sj-brand { display: flex; align-items: center; gap: 14px; color: var(--sj-teal-dark); text-decoration: none; min-width: 280px; }
.sj-brand__mark { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; border-radius: 17px 17px 25px 25px; background: linear-gradient(145deg, var(--sj-teal), var(--sj-accent)); color: white; font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700; box-shadow: 0 9px 25px rgba(11,89,97,.22); }
.sj-brand__title { display: block; font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 1.15rem; line-height: 1.1; font-weight: 700; }
.sj-brand__tagline { display: block; margin-top: 5px; color: var(--sj-muted); font-size: .73rem; letter-spacing: .035em; }
.sj-nav { margin-left: auto; }
.sj-nav ul { display: flex; align-items: center; gap: 22px; padding: 0; margin: 0; list-style: none; }
.sj-nav a { color: var(--sj-ink); font-size: .91rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.sj-nav a:hover, .sj-nav .current-menu-item > a { color: var(--sj-accent); }
.sj-search-link { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--sj-accent-soft); color: var(--sj-teal); text-decoration: none; }
.sj-menu-toggle { display: none; margin-left: auto; width: 46px; height: 42px; border: 1px solid var(--sj-line); border-radius: 11px; background: white; color: var(--sj-teal); font-size: 1.35rem; }

.sj-hero { position: relative; overflow: hidden; padding: clamp(78px, 10vw, 140px) 0 95px; background: linear-gradient(125deg, #e8f6f3 0%, #f7f4ec 56%, #fff 100%); }
.sj-hero::before { content: ""; position: absolute; width: 580px; height: 580px; top: -260px; right: -120px; border: 92px solid rgba(24,166,157,.10); border-radius: 50%; }
.sj-hero::after { content: "+"; position: absolute; right: 9%; bottom: -70px; color: rgba(11,89,97,.06); font-size: 25rem; font-weight: 200; line-height: .8; }
.sj-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 70px; align-items: center; }
.sj-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 23px; color: var(--sj-teal); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sj-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--sj-accent); }
.sj-hero p { max-width: 720px; color: #49666a; font-size: clamp(1.05rem, 2vw, 1.24rem); }
.sj-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.sj-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 1px solid var(--sj-teal); border-radius: 12px; background: var(--sj-teal); color: white; font-size: .9rem; font-weight: 750; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.sj-button:hover { color: white; background: var(--sj-accent); border-color: var(--sj-accent); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(24,166,157,.2); }
.sj-button--ghost { background: transparent; color: var(--sj-teal); }
.sj-button--ghost:hover { color: white; }
.sj-hero-card { padding: 31px; border: 1px solid rgba(255,255,255,.75); border-radius: 26px; background: rgba(255,255,255,.72); box-shadow: var(--sj-shadow); backdrop-filter: blur(10px); }
.sj-hero-card__number { color: var(--sj-accent); font-family: Georgia, serif; font-size: 3.2rem; line-height: 1; }
.sj-hero-card__label { margin: 10px 0 20px; color: var(--sj-muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.sj-hero-card ul { margin: 0; padding: 0; list-style: none; }
.sj-hero-card li { padding: 12px 0; border-top: 1px solid var(--sj-line); font-size: .92rem; }

.sj-section { padding: 88px 0; }
.sj-section--tint { background: #f3f7f5; }
.sj-section__head { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 38px; }
.sj-section__head p { max-width: 590px; color: var(--sj-muted); }
.sj-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.sj-card { min-height: 100%; padding: 28px; border: 1px solid var(--sj-line); border-radius: var(--sj-radius); background: white; box-shadow: 0 8px 28px rgba(19, 66, 70, .055); transition: transform .2s, box-shadow .2s; }
.sj-card:hover { transform: translateY(-4px); box-shadow: var(--sj-shadow); }
.sj-card__meta, .sj-entry-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-bottom: 14px; color: var(--sj-muted); font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .045em; }
.sj-card h3 a { color: var(--sj-teal-dark); text-decoration: none; }
.sj-card p { color: var(--sj-muted); font-size: .94rem; }
.sj-card__link { display: inline-flex; margin-top: 8px; color: var(--sj-teal); font-weight: 750; text-decoration: none; }
.sj-empty { grid-column: 1/-1; padding: 42px; border: 1px dashed #abc9c5; border-radius: var(--sj-radius); background: rgba(255,255,255,.65); text-align: center; color: var(--sj-muted); }

.sj-search-panel { margin-top: -34px; position: relative; z-index: 3; }
.sj-search-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 18px; border-radius: 17px; background: white; box-shadow: var(--sj-shadow); }
.sj-search-form input { width: 100%; min-height: 52px; padding: 0 18px; border: 1px solid var(--sj-line); border-radius: 11px; background: #fbfdfc; color: var(--sj-ink); font: inherit; }
.sj-search-form button { min-width: 140px; border: 0; border-radius: 11px; background: var(--sj-accent); color: white; font-weight: 800; cursor: pointer; }

.sj-page-head { padding: 58px 0 48px; background: linear-gradient(130deg, #e8f6f3, #f7f4ec); }
.sj-page-head h1 { max-width: 900px; font-size: clamp(2.1rem, 4.5vw, 3.9rem); }
.sj-breadcrumbs { margin-bottom: 18px; color: var(--sj-muted); font-size: .82rem; }
.sj-breadcrumbs a { text-decoration: none; }
.sj-main { padding: 60px 0 90px; }
.sj-content-layout { display: grid; grid-template-columns: minmax(0, 780px) minmax(250px, 1fr); gap: 55px; align-items: start; }
.sj-prose { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 1.06rem; }
.sj-prose > * + * { margin-top: 1.25em; }
.sj-prose h2, .sj-prose h3 { margin-top: 1.7em; }
.sj-prose blockquote { margin: 2em 0; padding: 18px 24px; border-left: 4px solid var(--sj-accent); background: var(--sj-accent-soft); }
.sj-sidebar { position: sticky; top: 120px; display: grid; gap: 18px; }
.sj-info-box { padding: 24px; border: 1px solid var(--sj-line); border-radius: 16px; background: #f7faf9; }
.sj-info-box h3 { font-size: 1.15rem; }
.sj-info-list { margin: 0; padding: 0; list-style: none; }
.sj-info-list li { display: grid; grid-template-columns: 95px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sj-line); font-size: .86rem; }
.sj-info-list li:last-child { border: 0; }
.sj-info-list strong { color: var(--sj-muted); font-weight: 650; }
.sj-abstract { margin: 34px 0; padding: 28px; border-radius: var(--sj-radius); background: var(--sj-accent-soft); }
.sj-abstract h2 { font-size: 1.5rem; }
.sj-authors { margin: 14px 0 22px; color: var(--sj-teal); font-weight: 700; }
.sj-citation { padding: 22px; border-left: 4px solid var(--sj-teal); background: var(--sj-cream); font-size: .9rem; }
.sj-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.sj-filter a { padding: 7px 13px; border: 1px solid var(--sj-line); border-radius: 999px; background: white; text-decoration: none; font-size: .8rem; font-weight: 700; }
.sj-filter a:hover { border-color: var(--sj-accent); }
.sj-pagination { margin-top: 36px; }

.sj-footer { padding: 62px 0 25px; background: var(--sj-teal-dark); color: rgba(255,255,255,.7); }
.sj-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; }
.sj-footer h3 { color: white; font-family: inherit; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.sj-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.sj-footer ul { margin: 0; padding: 0; list-style: none; }
.sj-footer li { margin: 8px 0; }
.sj-footer__bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: .78rem; }

@media (max-width: 980px) {
  .sj-header__inner { min-height: 78px; }
  .sj-brand { min-width: 0; }
  .sj-brand__tagline { display: none; }
  .sj-menu-toggle { display: block; }
  .sj-search-link { display: none; }
  .sj-nav { display: none; position: absolute; top: 78px; left: 0; right: 0; padding: 20px; background: var(--sj-paper); border-bottom: 1px solid var(--sj-line); box-shadow: var(--sj-shadow); }
  .sj-nav.is-open { display: block; }
  .sj-nav ul { align-items: stretch; flex-direction: column; gap: 6px; }
  .sj-nav a { display: block; padding: 9px; }
  .sj-hero__grid { grid-template-columns: 1fr; gap: 38px; }
  .sj-hero-card { max-width: 540px; }
  .sj-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sj-content-layout { grid-template-columns: 1fr; }
  .sj-sidebar { position: static; }
}

@media (max-width: 650px) {
  body { font-size: 16px; }
  .sj-container { width: min(calc(100% - 28px), var(--sj-width)); }
  .sj-topbar__inner { min-height: 32px; }
  .sj-topbar__note { display: none; }
  .sj-brand__mark { width: 44px; height: 44px; flex-basis: 44px; }
  .sj-brand__title { font-size: .98rem; }
  .sj-hero { padding: 60px 0 68px; }
  .sj-section { padding: 62px 0; }
  .sj-section__head { display: block; }
  .sj-grid { grid-template-columns: 1fr; }
  .sj-search-form { grid-template-columns: 1fr; }
  .sj-search-form button { min-height: 48px; }
  .sj-footer__grid { grid-template-columns: 1fr; gap: 30px; }
}

.sj-back-to-top {
  position: fixed;
  right: max(22px, calc((100vw - var(--sj-width)) / 2 - 68px));
  bottom: 24px;
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--sj-primary);
  color: #fff;
  box-shadow: 0 12px 28px rgba(14, 75, 79, .26);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .2s ease;
}
.sj-back-to-top:hover,
.sj-back-to-top:focus-visible {
  background: var(--sj-accent);
  transform: translateY(-2px);
}
.sj-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 650px) {
  .sj-back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sj-back-to-top {
    transition: none;
  }
}

/* Footer credit */
.sj-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sj-footer__credit { text-align: right; }
.sj-footer__credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 650px) {
  .sj-footer__bottom { flex-direction: column; align-items: flex-start; }
  .sj-footer__credit { text-align: left; }
}

/* Decorative dental emblem in the home hero */
.sj-hero-emblem {
  position: absolute;
  left: clamp(28px, 5vw, 110px);
  bottom: 18px;
  z-index: 0;
  width: clamp(168px, 12vw, 220px);
  aspect-ratio: 1;
  opacity: .62;
  pointer-events: none;
  transform: rotate(-4deg);
  filter: drop-shadow(0 18px 28px rgba(11, 89, 97, .05));
}
.sj-hero-emblem svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sj-hero-emblem__hex { fill: rgba(255, 255, 255, .12); stroke: rgba(24, 166, 157, .24); vector-effect: non-scaling-stroke; }
.sj-hero-emblem__hex--outer { stroke-width: 3; }
.sj-hero-emblem__hex--inner { stroke-width: 1.5; stroke-dasharray: 7 8; }
.sj-hero-emblem__tooth { fill: rgba(255, 255, 255, .42); stroke: rgba(11, 89, 97, .27); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sj-hero-emblem__node { fill: rgba(24, 166, 157, .34); }
@media (max-width: 1500px) {
  .sj-hero-emblem { left: -36px; bottom: 26px; width: 160px; opacity: .38; }
}
@media (max-width: 1180px) {
  .sj-hero-emblem { display: none; }
}


/* Journal issues */
.sj-issues-grid { display: grid; gap: 34px; }
.sj-issue-card { display: grid; grid-template-columns: minmax(220px, 330px) 1fr; gap: clamp(28px, 5vw, 68px); align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--sj-line); border-radius: 28px; background: linear-gradient(135deg, #fff 0%, #f0f8f6 100%); box-shadow: var(--sj-shadow); }
.sj-issue-card__cover { display: block; overflow: hidden; border-radius: 6px 6px 18px 6px; background: var(--sj-teal-dark); box-shadow: 0 24px 55px rgba(6,63,71,.22); text-decoration: none; }
.sj-issue-card__cover img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; transition: transform .35s ease; }
.sj-issue-card:hover .sj-issue-card__cover img { transform: scale(1.02); }
.sj-issue-card__body h2 { margin-top: 18px; }
.sj-issue-card__body h2 a { color: var(--sj-teal-dark); text-decoration: none; }
.sj-issue-card__body p { max-width: 640px; color: var(--sj-muted); }
.sj-issue-badge { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: var(--sj-accent-soft); color: var(--sj-teal); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sj-issue-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sj-line); color: var(--sj-muted); font-size: .84rem; font-weight: 700; }
.sj-issue-hero { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: clamp(34px, 7vw, 82px); align-items: start; }
.sj-issue-hero__cover { margin: 0; overflow: hidden; border-radius: 6px 6px 20px 6px; box-shadow: 0 28px 60px rgba(6,63,71,.2); }
.sj-issue-hero__cover img { display: block; width: 100%; }
.sj-issue-hero__content { padding-top: 20px; }
.sj-issue-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.sj-issue-facts span { padding: 8px 13px; border: 1px solid var(--sj-line); border-radius: 999px; background: white; color: var(--sj-teal); font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: .8rem; font-weight: 750; }
@media (max-width: 980px) {
  .sj-issue-card { grid-template-columns: minmax(180px, 260px) 1fr; }
  .sj-issue-hero { grid-template-columns: minmax(200px, 280px) 1fr; }
}
@media (max-width: 650px) {
  .sj-issue-card, .sj-issue-hero { grid-template-columns: 1fr; }
  .sj-issue-card__cover, .sj-issue-hero__cover { max-width: 320px; margin-inline: auto; }
  .sj-issue-card__footer { align-items: flex-start; flex-direction: column; }
}
