/*
Theme Name: Office Docs
Theme URI: https://example.com/office-docs
Author: Office Docs
Author URI: https://example.com
Description: Строгая документационная тема в тёмно-синей офисной палитре. Inter для заголовков и таблиц, Source Serif 4 для текста, JetBrains Mono для кода. Поддержка dark mode и glassmorphism. Совместима с PHP 7.4+ и WordPress 6.x–7.0.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: office-docs
Tags: documentation, two-columns, custom-colors, dark-mode, block-styles, translation-ready
*/

/* =========================================================================
   1. ДИЗАЙН-ТОКЕНЫ
   ========================================================================= */
:root {
  /* --- Бренд-цвета по брифу --- */
  --c-h1:           #002060; /* Заголовки верхнего уровня (Офис) */
  --c-heading:      #001722; /* Остальные заголовки */
  --c-code-bg:      #EDEFF6; /* Фон блоков кода / выделение */
  --c-accent:       #B83A3A; /* Акцент: красный */
  --c-accent-2:     #A85A4A; /* Акцент: краснокоричневый */

  /* --- Таблицы --- */
  --t-header-bg:    #002060;
  --t-header-fg:    #FFFFFF; /* светлый шрифт для шапки */
  --t-row-even:     #FFFFFF;
  --t-row-odd:      #F6F8FC;
  --t-subtotal:     #EDEFF6;
  --t-border:       #DDE2EE;
  --t-border-strong:#C5CDDF;
  --t-cell-fg:      #1A2233; /* единый цвет строк */

  /* --- Поверхности / текст --- */
  --c-bg:           #FFFFFF;
  --c-bg-soft:      #FAFBFE;
  --c-surface:      #FFFFFF;
  --c-text:         #232a36;
  --c-text-muted:   #5b6573;
  --c-border:       #DDE2EE;
  --c-link:         #002060;
  --c-link-hover:   #B83A3A;

  /* --- Glassmorphism --- */
  --glass-bg:       rgba(255, 255, 255, 0.72);
  --glass-border:   rgba(0, 32, 96, 0.12);
  --glass-shadow:   0 8px 32px rgba(0, 23, 34, 0.10);
  --glass-blur:     14px;

  /* --- Типографика --- */
  --font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Метрики --- */
  --radius:    10px;
  --radius-sm: 6px;
  --maxw:      1200px;
  --content:   760px;
  --gap:       clamp(1.25rem, 3vw, 2.5rem);
}

/* --- Тёмная палитра --- */
html[data-theme="dark"] {
  --c-h1:           #8FB2FF; /* светлый синий вместо #002060 для контраста */
  --c-heading:      #C7D2E6;
  --c-code-bg:      #11192b;
  --c-accent:       #E27A6E;
  --c-accent-2:     #D69A86;

  --t-header-bg:    #0a1a3a;
  --t-header-fg:    #E6ECF7;
  --t-row-even:     #0e1626;
  --t-row-odd:      #121d31;
  --t-subtotal:     #16213a;
  --t-border:       #243149;
  --t-border-strong:#34466a;
  --t-cell-fg:      #d3dbe9;

  --c-bg:           #070b14;
  --c-bg-soft:      #0b1120;
  --c-surface:      #0e1424;
  --c-text:         #cdd5e3;
  --c-text-muted:   #8b97ab;
  --c-border:       #1e293f;
  --c-link:         #8FB2FF;
  --c-link-hover:   #E27A6E;

  --glass-bg:       rgba(10, 16, 30, 0.66);
  --glass-border:   rgba(143, 178, 255, 0.16);
  --glass-shadow:   0 8px 32px rgba(0, 0, 0, 0.45);
}

/* Плавный переход тем */
html { color-scheme: light dark; }
html[data-theme="dark"] { color-scheme: dark; }
body, .site-header, .glass, table, pre, code, .doc-card {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* =========================================================================
   2. БАЗА
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--c-text);
  background:
    radial-gradient(1100px 500px at 12% -8%, rgba(0,32,96,0.06), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(184,58,58,0.045), transparent 55%),
    var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(143,178,255,0.08), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(226,122,110,0.06), transparent 55%),
    var(--c-bg);
}

img, svg, video { max-width: 100%; height: auto; }

a {
  color: var(--c-link);
  text-decoration-color: color-mix(in srgb, var(--c-link) 35%, transparent);
  text-underline-offset: 2px;
}
a:hover { color: var(--c-link-hover); }

::selection { background: color-mix(in srgb, var(--c-accent) 22%, transparent); }

/* =========================================================================
   3. ТИПОГРАФИКА
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: var(--c-heading);
  margin: 2.2rem 0 0.9rem;
  scroll-margin-top: 90px;
}
h1 { color: var(--c-h1); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); padding-bottom: .4rem; border-bottom: 1px solid var(--c-border); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 0.98rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); }
h6 { font-size: 0.9rem; color: var(--c-text-muted); }

/* Заголовок страницы / записи — всегда «верхний уровень» */
.entry-title, .page-title { color: var(--c-h1); }

p { margin: 0 0 1.15rem; }

/* Числовые / Inter-блоки (метки, подписи, цифры) */
.num, .caption, .eyebrow, .meta, figcaption, .wp-block-table figcaption {
  font-family: var(--font-head);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.eyebrow {
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--c-accent);
}

blockquote {
  margin: 1.6rem 0;
  padding: .4rem 0 .4rem 1.4rem;
  border-left: 3px solid var(--c-accent);
  color: var(--c-text-muted);
  font-style: italic;
}

hr {
  border: 0; height: 1px; margin: 2.4rem 0;
  background: linear-gradient(90deg, transparent, var(--c-border) 18%, var(--c-border) 82%, transparent);
}

/* =========================================================================
   4. КОД (JetBrains Mono)
   ========================================================================= */
code, kbd, samp, pre, .wp-block-code, .wp-block-preformatted {
  font-family: var(--font-mono);
  font-feature-settings: "liga" 0;
}

/* инлайн-код */
:not(pre) > code {
  background: var(--c-code-bg);
  color: var(--c-accent-2);
  font-size: .88em;
  padding: .12em .42em;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
}

/* блок кода */
pre, .wp-block-code, .wp-block-preformatted {
  background: var(--c-code-bg);
  color: var(--c-heading);
  font-size: .9rem;
  line-height: 1.62;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-h1);
  overflow-x: auto;
  margin: 1.4rem 0;
  -webkit-overflow-scrolling: touch;
}
html[data-theme="dark"] pre,
html[data-theme="dark"] .wp-block-code {
  color: #cdd5e3;
  border-left-color: var(--c-h1);
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* =========================================================================
   5. ТАБЛИЦЫ
   Единый размер шрифта для шапки и значений, единый цвет строк,
   светлый шрифт в шапке. Шрифт Inter везде.
   ========================================================================= */
.entry-content table,
.wp-block-table table,
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.6rem 0;
  font-family: var(--font-head);            /* Inter — шапка и текст */
  font-size: 0.95rem;                        /* ЕДИНЫЙ размер */
  line-height: 1.5;
  border: 1px solid var(--t-border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--t-row-even);
}

table caption,
.wp-block-table figcaption {
  font-family: var(--font-head);
  font-size: .82rem;
  color: var(--c-text-muted);
  caption-side: bottom;
  padding-top: .6rem;
  text-align: left;
}

th, td {
  padding: .62rem .9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--t-border);
  font-size: 0.95rem;                        /* тот же размер, что у th */
}

thead th {
  background: var(--t-header-bg);
  color: var(--t-header-fg);                 /* светлый шрифт шапки */
  font-weight: 700;
  font-size: 0.95rem;                        /* совпадает со значениями */
  letter-spacing: .005em;
  border-bottom: 1px solid var(--t-border-strong);
  white-space: nowrap;
}
thead th:first-child { border-top-left-radius: 0; }

/* зебра — единый цвет строк */
tbody tr              { background: var(--t-row-even); }
tbody tr:nth-child(odd){ background: var(--t-row-odd); }
tbody td { color: var(--t-cell-fg); }

/* подытог — класс .is-subtotal на <tr> или последняя строка tfoot */
tbody tr.is-subtotal td,
tfoot tr td {
  background: var(--t-subtotal);
  color: var(--t-cell-fg);
  font-weight: 700;
  border-top: 1px solid var(--t-border-strong);
}

tbody tr:last-child td { border-bottom: 0; }

/* числовые колонки */
td.num, th.num, td[data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; }

/* прокрутка на узких экранах */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6rem 0; }
.table-scroll table { margin: 0; }

/* =========================================================================
   6. КОМПОНОВКА
   ========================================================================= */
.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

.site-content { padding: var(--gap) 0 4rem; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }
.layout.no-sidebar .entry-content { max-width: var(--content); margin-inline: auto; }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .site-sidebar { order: 2; }
}

/* =========================================================================
   7. ШАПКА + GLASSMORPHISM
   ========================================================================= */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
  padding-block: .5rem;
}

.site-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.site-brand__mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--c-h1), #003aa0);
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  box-shadow: 0 4px 14px rgba(0,32,96,.35);
}
.site-brand__text { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; color: var(--c-h1); line-height: 1.1; }
.site-brand__text small { display: block; font-weight: 500; font-size: .72rem; color: var(--c-text-muted); letter-spacing: .02em; }

.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; display: flex; gap: .35rem; margin: 0; padding: 0; }
.main-nav a {
  font-family: var(--font-head); font-weight: 500; font-size: .92rem;
  color: var(--c-text); text-decoration: none;
  padding: .45rem .8rem; border-radius: var(--radius-sm);
  display: block;
}
.main-nav a:hover,
.main-nav .current-menu-item > a {
  background: color-mix(in srgb, var(--c-h1) 9%, transparent);
  color: var(--c-h1);
}
html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav .current-menu-item > a {
  background: color-mix(in srgb, var(--c-h1) 16%, transparent);
}

/* переключатель темы */
.theme-toggle {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-heading);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--c-h1); color: var(--c-h1); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* бургер */
.nav-toggle { display: none; flex: none; width: 40px; height: 40px; border: 1px solid var(--c-border);
  background: var(--c-surface); border-radius: var(--radius-sm); cursor: pointer; color: var(--c-heading); }
@media (max-width: 760px) {
  .nav-toggle { display: grid; place-items: center; }
  .main-nav { position: fixed; inset: 64px 0 auto 0; margin: 0;
    background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border); padding: .8rem 1.25rem;
    transform: translateY(-130%); transition: transform .28s ease; }
  .main-nav.is-open { transform: translateY(0); }
  .main-nav ul { flex-direction: column; gap: .15rem; }
  .main-nav a { padding: .7rem .8rem; }
}

/* =========================================================================
   8. КАРТОЧКИ ДОКУМЕНТОВ / HERO
   ========================================================================= */
.page-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 1rem; }
.page-hero .eyebrow { margin-bottom: .7rem; }
.page-hero p.lede { font-size: 1.18rem; color: var(--c-text-muted); max-width: 60ch; }

.doc-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 1px 2px rgba(0,23,34,.04);
}
.doc-card .entry-title { margin-top: 0; font-size: 1.4rem; }
.doc-card .entry-title a { text-decoration: none; }
.doc-meta { font-family: var(--font-head); font-size: .82rem; color: var(--c-text-muted); margin-bottom: .5rem; }
.doc-meta a { color: inherit; }
.doc-excerpt { margin-bottom: .8rem; }

.read-more {
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  color: var(--c-accent); text-decoration: none;
}
.read-more::after { content: " →"; }

/* список + блок «оглавление» в записи */
.entry-content ul, .entry-content ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
.entry-content li { margin-bottom: .35rem; }
.entry-content ul li::marker { color: var(--c-accent); }

.callout {
  font-family: var(--font-body);
  background: color-mix(in srgb, var(--c-code-bg) 80%, var(--c-bg));
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-h1);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}
.callout.is-accent { border-left-color: var(--c-accent); }

/* =========================================================================
   9. SIDEBAR / WIDGETS
   ========================================================================= */
.site-sidebar { position: sticky; top: 84px; }
.widget {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
}
.widget-title {
  font-family: var(--font-head); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--c-h1);
  margin: 0 0 .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--c-border);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin-bottom: .45rem; font-family: var(--font-head); font-size: .92rem; }
.widget a { text-decoration: none; }

.search-form { display: flex; gap: .4rem; }
.search-form input[type="search"] {
  flex: 1; min-width: 0; font-family: var(--font-head); font-size: .92rem;
  padding: .55rem .7rem; border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text);
}
.search-form button {
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  padding: .55rem .9rem; border: 0; border-radius: var(--radius-sm);
  background: var(--c-h1); color: #fff; cursor: pointer;
}
.search-form button:hover { background: var(--c-accent); }

/* =========================================================================
   10. ПАГИНАЦИЯ / FOOTER / КОММЕНТАРИИ
   ========================================================================= */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2.4rem; font-family: var(--font-head); }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .6rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--c-text); font-size: .92rem;
}
.pagination .page-numbers.current { background: var(--c-h1); color: #fff; border-color: var(--c-h1); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--c-h1); color: var(--c-h1); }

.site-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-soft);
  padding: 2.5rem 0;
  font-family: var(--font-head);
  font-size: .9rem;
  color: var(--c-text-muted);
}
.site-footer__grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--c-link); text-decoration: none; }

.comments-area { margin-top: 3rem; }
.comment-list { list-style: none; padding: 0; }
.comment-body { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; background: var(--c-surface); }
.comment-author .fn { font-family: var(--font-head); font-weight: 700; color: var(--c-heading); }
.comment-metadata { font-family: var(--font-head); font-size: .8rem; color: var(--c-text-muted); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; font-family: var(--font-body); padding: .6rem .7rem; margin-bottom: .8rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text);
}
.comment-form input[type="submit"], .wp-block-button__link, button.submit {
  font-family: var(--font-head); font-weight: 600; padding: .6rem 1.2rem; border: 0;
  border-radius: var(--radius-sm); background: var(--c-h1); color: #fff; cursor: pointer;
}
.comment-form input[type="submit"]:hover { background: var(--c-accent); }

/* =========================================================================
   11. ДОСТУПНОСТЬ
   ========================================================================= */
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-h1); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-head);
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}