@charset "UTF-8";

/* Theme Name : R
   Version    : 2.2
   Author     : Павел Рождественский
   Author URI : https://dokapavel.ru */









/*
    Заметки

    Истользовать селектор .article (или .typo) для обозначения того,
    что к текущему контейнеру будут применяться типографские
    стили (* + * и т. д.)

    Использовать селектор .article.modified (или .typo.mod) чтобы обозначить то,
    что типографские стили модифицированы, примерно так:
    .name.article.modified { (или .name.typo.mod)
        --this-gap: ...;
        --this-line-height: ...;
        и т. д.
    }
*/









/* Подключение дополнительных CSS-файлов */

/*@import "styles/normalize.css?v=8.0.1";*/




:root {
    --site-width           : 1000px;
    --site-indent          : 4%;
    --font-family-a        : 'Play', sans-serif;
    --font-family-b        : ;
    --font-size            : 15px;
    --font-size-3          : 200%;
    --font-size-2          : 150%;
    --font-size-1          : 118.75%;
    --font-size--1         : 81.25%;
    --font-size--2         : 68.75%;
    --line-height          : 140%;
    --line-height-s        : 120%;
    --font-weight          : 400;
    --color                : #1c1d1f;
    --color-link-a         : #c71585;
    --color-link-b         : var(--color);
    --gap                  : var( --font-size );
    --gap-0-25             : calc( var(--gap) / 4 );
    --gap-0-5              : calc( var(--gap) / 2 );
    --gap-1-5              : calc( var(--gap) * 1.5 );
    --gap-2                : calc( var(--gap) * 2 );
    --gap-2-5              : calc( var(--gap) * 2.5 );
    --gap-3                : calc( var(--gap) * 3 );
    --gap-4                : calc( var(--gap) * 4 );
}




/**
 * Современный CSS-reset
 *
 * Remove all the styles of the 'User-Agent-Stylesheet' styles
 * except for the 'display' property
 */
* {
    all: unset;
    display: revert;
}
/* Preferred box-sizing value for web developers these days */
*, *::before, *::after { box-sizing: border-box; }





/**
 * Разметка сайта
 */

/* Рястянуть сайт по высоте */
html { height: 100vh; }
body { min-height: 100vh; }

/* Настройка главных контейнеров сайта
   (главного и контейнера-подвала) */

body {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center; /* вместо margin-right/left: auto */
}

div.site.container {
    display: block;
    width: 100%;
    max-width: calc(var(--site-width) + var(--site-indent) + var(--site-indent));
    padding-right: var(--site-indent);
    padding-left: var(--site-indent);
}




/**
 * Глобальные настройки тегов
 */

html {
    font-family: var(--font-family-a);
    /*font-size: 62.5%;*/ /* 1rem = 10px */
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--font-weight);
    overflow-wrap: break-word;
    overflow-y: scroll;
}

a {
    cursor: pointer;
    transition: all ease .2s;
}

a { color: var(--color-link-a); }
a:hover { color: var(--color-link-b); }

a.inverse { color: var(--color-link-b); }
a.inverse:hover { color: var(--color-link-a); }

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    line-height: var(--line-height-s);
}

h1, .h1 { font-size: var(--font-size-3);  }
h2, .h2 { font-size: var(--font-size-2); }
h3, .h3 { font-size: var(--font-size-1); }
h4, .h4 { font-size: var(--font-size); }
h5, .h5 { font-size: var(--font-size--1); }
h6, .h6 { font-size: var(--font-size--2); }

img {
    display: inline-block;
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}




/**
 * Типографика (разметка статей)
 */

.typo {}

article * + * {
    margin-top: var(--gap);
}

article > header {}

article > header * {
    margin-top: 0;
}

article > header h1 {
    margin-top: var(--gap-0-25);
}

/*article > header time {
    display: block;
    margin-top: var(--gap-0-5);
    font-size: var(--font-size--1);
    line-height: 1;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #d3d3d3;
    border-radius: 2px;
}*/

/*article > header time {
    display: inline-block;
    font-size: var(--font-size--1);
    line-height: 1;
    font-weight: bold;
    color: white;
    padding: var(--gap-0-25) var(--gap-0-5);
    background-color: #00ced1;
    border-radius: 2px;
}*/

article > header time {
    display: inline-block;
    font-size: var(--font-size--1);
    line-height: var(--gap-1-5);
    font-weight: bold;
    color: #a5a5a5;
    padding-left: var(--gap-2-5);
    background-image: url(assets/date.svg);
    background-repeat: no-repeat;
    background-position: center left;
}

article > header + * {
    margin-top: var(--gap-3);
}




/**
 * Универсальные классы
 */

[role~="presentation"],
ul.presentation,
ol.presentation {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    list-style-image: none;
}




/**
 * Модули
 */

ul.cards {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--gap-2);
    align-items: stretch;
}

li.card {
    padding: var(--gap-2);
    border: 1px solid #cfcfcd;
    border-radius: 2px;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-rows: auto 1fr;
    align-items: start;
}

li.card div.cats {
    line-height: var(--line-height-s);
}

li.card div.cats a {
    font-weight: bold;
}

li.card div.cats a:not(:hover) {
    color: #483d8b;
}

li.card a.outer {
    margin-top: var(--gap);
    display: block;
}

li.card h3 {
    line-height: var(--line-height-s);
    font-weight: bold;
}

li.card div.box {
    margin-top: var(--gap-3);
    align-self: end;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
}

li.card img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}

li.card time {
    line-height: 1;
    margin-left: var(--gap);
    font-size: var(--font-size--1);
    font-weight: bold;
    color: #a5a5a5;
}




/**
 * Main
 */

main.site + * {
    margin-top: var(--gap-2);
}

main.site > *:first-child ~ * {
    margin-top: var(--gap-2);
}




/**
 * Header
 */

header.site {
    margin-top: var(--gap-4);
}

header.site + * {
    margin-top: var(--gap-4);
}

header.site {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
}

div.site.logo {
    line-height: 1;
}

div.site.logo * {
    margin: 0;
    padding: 0;
}

div.site.logo * + * {
    margin-top: var(--gap-0-5);
}

div.site.logo a:not(:hover) {
    color: #483d8b;
}

h1.site.name,
p.site.name,
p.site.description {}

h1.site.name,
p.site.name {
    text-transform: uppercase;
}

p.site.description {
    text-transform: lowercase;
}




/**
 * Хлебные крошки
 */

nav.breadcrumb + * {
    margin-top: var(--gap-2);
}

nav.breadcrumb {
    font-weight: bold;
}

nav.breadcrumb * {
    display: inline;
}

nav.breadcrumb li + li::before {
    content: "";
    display: inline-block;
    margin-right: var(--gap);
    margin-left: var(--gap);
    transform: rotate(15deg);
    border-right: 1px solid #cfcfcd;
    height: 0.8em;
}




/**
 * Навигация
 */

nav.menu.primary {
    line-height: 1;
    font-weight: bold;
    display: grid;
    align-content: end;
}

nav.menu.primary * {}

nav.menu.primary ul {
    display: grid;
    justify-content: end;
    grid-auto-flow: column;
}

nav.menu.primary li {}

nav.menu.primary a {
    padding: var(--gap);
}




/**
 * Пагинация
 */

nav.pagination {
    display: grid;
    grid-auto-flow: column;
    grid-gap: var(--gap);
    justify-content: center;
    font-weight: bold;
}

nav.pagination > * {
    width: 7ch;
    height: 7ch;
    border: 1px solid;
    border-radius: 2px;
    display: grid;
    justify-items: center;
    align-items: center;
    font-size: var(--font-size--1);
}

nav.pagination > *:not(a) {
    border-color: #cfcfcd;
    color: #a5a5a5;
}




/**
 * Галерея в записях
 */

.gallery * {
    margin: 0;
    padding: 0;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: -10px;
    margin-bottom: -10px;
}

.gallery a {
    margin-right: 10px;
    margin-bottom: 10px;
}

.gallery img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}




/**
 * Footer
 */

footer.site {
    margin-top: var(--gap-3);
    margin-bottom: var(--gap-3);
    line-height: 1;
}

footer.site * {}

p.site.date { text-align: center; }

span.dash { margin: 0 .1em; }