/*

Minimal Publish / MIT License
Copyright (c) 2020-2024 Steph Ango (@kepano)

/* ========== GOOGLE FONT IMPORT ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');



/* ========== 1. BASE: переменные и шрифты ========== */

body {
  --font-default: 'Inter', sans-serif;
  --font-heading: 'Inter', sans-serif;
  --font-text-size: 16px;
  --font-text-size-desktop: 17px;
  --line-height: 1.6;

  --font-small:     13px;
  --font-smaller:   11px;
  --font-smallest:  10px;
  --font-inputs:    13px;

  --normal-weight:  400;
  --bold-weight:    600;
  --link-weight:    inherit;

  --page-title-weight: 500;
  --page-title-line-height: 1.1;

  --h1: 2.8em;
  --h2: 1.4em;
  --h3: 1.05em;
  --h4: 1em;
  --h5: 0.85em;
  --h6: 0.85em;

  --h1-weight: 800;
  --h2-weight: 800;
  --h3-weight: 600;
  --h4-weight: 500;
  --h5-weight: 500;
  --h6-weight: 400;

  --h1-variant: normal;
  --h2-variant: normal;
  --h3-variant: normal;
  --h4-variant: normal;
  --h5-variant: small-caps;
  --h6-variant: small-caps;

  --h1-style: normal;
  --h2-style: normal;
  --h3-style: normal;
  --h4-style: normal;
  --h5-style: normal;
  --h6-style: normal;

  --cards-min-width:    280px;
  --cards-gap:          1.5rem;
  --cards-padding:      1.2em;
  --cards-background:   var(--bg2);
  --cards-border:       1px solid var(--ui1);
  --cards-radius:       12px;

  --image-radius: 8px;
  --img-grid-fit: cover;
  --img-grid-background: transparent;
  --img-grid-gap: 0.5rem;

  --img-zoom-background: rgba(0,0,0,0.6);
  --img-zoom-max-width: 96%;
  --img-zoom-max-height: 90vh;
  --img-zoom-in-cursor: zoom-in;
  --img-zoom-out-cursor: zoom-out;

  --icon-muted: 0.5;
  --border-width: 1px;

  --folding-offset: 16px;
  --nested-padding: 30px;
  --list-padding: 2em;
  --list-spacing: 0.075em;
}

@media (max-width: 767px) {
  .markdown-preview-view {
    font-family: var(--font-default);
    font-size: var(--font-text-size);
    line-height: var(--line-height);
  }
  .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cards-gap);
  }
  .two-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (min-width: 768px) {
  body {
    --font-text-size: var(--font-text-size-desktop);
  }
  .markdown-preview-view {
    font-family: var(--font-default);
    font-size: var(--font-text-size);
    line-height: var(--line-height);
  }
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cards-gap);
  }
  .two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: start; 
  }
}


/* ========== 2. THEME COLORS ========== */

.theme-light,
.theme-dark {
	--red:#d04255; --yellow:#e5b567; --green:#a8c373;
	--orange:#e57e43; --cyan:#73bbb2; --blue:#0051BA;
	--purple:#9e86c8; --pink:#b05279;
}

.theme-light {
	--bg1:#FFF; --bg2:#F5F5F5; --bg3:#E5E5E5;
	--ui1:#E6E6E6; --ui2:#D6D6D6; --ui3:#C2C2C2;
	--tx1:#0F0F0F; --tx2:#828282; --tx3:#B5B5B5;
	--ax1:#0051BA; --ax2:#003080; --ax3:#889EAA;
	--hl1:hsla(201,50%,40%,30%);
	--mono100:black; --mono0:white;
	--interactive-normal:var(--bg1);
	--interactive-accent-rgb:220,220,220;
	--text-highlight-bg:rgba(255, 225, 0, 0.5);
	--text-highlight-bg-active:rgba(0, 0, 0, 0.1);
	--background-modifier-error:rgba(255,0,0,0.14);
	--background-modifier-error-hover:rgba(255,0,0,0.08);
	--shadow-color:rgba(0, 0, 0, 0.1);
	--btn-shadow-color:rgba(0, 0, 0, 0.05);
}

.theme-dark {
	--bg1:#262626; --bg2:#212121; --bg3:hsla(0,0,55%,0.12);
	--ui1:#333333; --ui2:#3B3B3B; --ui3:#595959;
	--tx1:#D1D1D1; --tx2:#999999; --tx3:#595959;
	--ax1:#4D9FFF; --ax2:#A5CBFF; --ax3:#67808E;
	--hl1:hsla(201,70%,40%,30%);
	--mono100:white; --mono0:black;
	--interactive-normal:var(--bg3);
	--interactive-accent-rgb:66,66,66;
	--text-highlight-bg:rgba(255, 177, 80, 0.3);
	--text-highlight-bg-active:rgba(255, 255, 255, 0.1);
	--background-modifier-error:rgba(255,20,20,0.12);
	--background-modifier-error-hover:rgba(255,20,20,0.18);
	--background-modifier-box-shadow:rgba(0, 0, 0, 0.3);
	--shadow-color:rgba(0, 0, 0, 0.3);
	--btn-shadow-color:rgba(0, 0, 0, 0.2);
}

.theme-dark, .theme-light {
	--background-primary: var(--bg1);
	--background-primary-alt: var(--bg2);
	--background-secondary: var(--bg2);
	--background-secondary-alt: var(--bg1);
	--background-tertiary: var(--bg3);
	--background-table-rows: var(--bg2);
	--background-modifier-form-field: var(--bg1);
	--background-modifier-form-field-highlighted: var(--bg1);
	--background-modifier-accent: var(--ax3);
	--background-modifier-border: var(--ui1);
	--background-modifier-border-hover: var(--ui2);
	--background-modifier-border-focus: var(--ui3);
	--background-modifier-success: var(--color-green);
	--background-divider: var(--ui1);
	--interactive-hover: var(--ui1);
	--interactive-accent: var(--ax3);
	--interactive-accent-hover: var(--ax3);
	--quote-opening-modifier: var(--ui2);
	--modal-border: var(--ui2);
	--icon-color: var(--tx2);
	--icon-color-hover: var(--tx2);
	--icon-color-active: var(--tx1);
	--icon-hex: var(--mono0);
	--text-normal: var(--tx1);
	--text-bold: var(--tx1);
	--text-italic: var(--tx1);
	--text-muted: var(--tx2);
	--text-faint: var(--tx3);
	--text-accent: var(--ax1);
	--text-accent-hover: var(--ax2);
	--text-on-accent: white;
	--text-selection: var(--hl1);
	--text-code: var(--tx4);
	--text-error: var(--color-red);
	--text-blockquote: var(--tx2);
	--title-color: var(--tx1);
	--title-color-inactive: var(--tx2);
}

/* ========== 3. TYPOGRAPHY ========== */


.markdown-preview-view {
  font-family: var(--font-default);
  font-size: var(--font-text-size);
  line-height: var(--line-height);
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-family: var(--font-heading);
  border-bottom: none !important;
  margin-top: 0;
  margin-bottom: 0.3em;
  padding-bottom: 0 !important;
}

h1.publish-article-heading {
  margin-top: 0.5em !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

.h1-borders h1 {
  border-bottom:1px solid var(--ui1);
  padding-bottom:.5em;
}

.hide-title.markdown-preview-view div:nth-child(4) h1 {
  margin-top: 0;
  font-variant:var(--page-title-variant);
  letter-spacing:-.015em;
  line-height:var(--page-title-line-height);
  font-size:var(--page-title-size);
  color:var(--page-title-color);
  font-weight:var(--page-title-weight);
  font-style:var(--page-title-style);
  font-family:var(--page-title-font);
  border:none;
}

.markdown-preview-view .tag:not(.token){
  background-color:transparent;
  border:1px solid var(--ui1);
  color:var(--tx2);
  font-size:var(--font-small);
}

.markdown-preview-view code {
  color: var(--tx4);
  font-size: .85em;
}

/* ========== 4. LAYOUT ========== */

.published-container {
  --outline-heading-color-active:var(--tx1);
  --sidebar-left-background:var(--bg1);
}

.alt-title .page-header,
.hide-title .page-header {
  display:none;
}

/* ========== 5. COMPONENTS ========== */

a.button {
  display: inline-block;
  padding: 0.6em 1.2em;
  background-color: #0051BA;
  color: white;
  text-decoration: none;
  border-radius: 0px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}
a.button:hover {
  background-color: #003f94;
}

.plaque-text {
  background-color: #f0f0f0;
  color: #444;
  padding: 1em 1.5em;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 500;
  margin: 1em 0;
}

.scroll-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.plaque {
  flex: 0 0 300px;
  min-width: 150px;
  background-color: #f0f0f0;
  color: #444;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.95em;
  font-weight: 500;
  scroll-snap-align: start;
}

/* ========== 6. SPECIAL ELEMENTS ========== */

.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}
.profile-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.profile-text {
  flex: 1;
}

.global-footer {
  text-align: center;
  padding: 0 0 1em;
  color: #777;
  font-size: 0.8em;
  border-top: 1px solid #ccc;
  margin-top: 3em;
}
.global-footer a {
  color: #555;
  text-decoration: none;
}

.markdown-preview-view img[alt="Photo_AVA_blue.png"] {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.media-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 1400px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.media-images {
  display: flex;
  flex: 1 1 75%;
  flex-wrap: wrap;
  gap: 1rem;
}
.media-images img {
  flex: 1 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
  height: auto;
  display: block;
}
.media-caption {
  flex: 1 1 30%;
  font-size: 1rem;
  line-height: 1.5;
  color: #000;
}
.media-caption strong {
  color: red;
}

/* ========== 7. OVERRIDES ========== */

/* Пример: отключение рамок у заголовков, таблиц, стилей inline и т.п. */

.tooltip { display: none; }

/* ========== 8. MEDIA QUERIES ========== */

@media (max-width: 767px) {
  .media-block {
    flex-direction: column;
  }
  .media-images {
    flex-direction: column;
  }
  .media-images img {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .media-caption {
    margin-top: 1rem;
  }
}


/* ========== 10. CARD STYLE ========== */


.card {
  background-color: var(--cards-background);
  border: var(--cards-border);
  border-radius: var(--cards-radius);
  padding: var(--cards-padding);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card h3 {
  margin-top: 0 !Important;
}

.card p {
  margin-top: 0;
  margin-bottom: 0;
}