@font-face {
  font-family: 'Estedad';
  src: url('../fonts/Estedad.woff2') format('woff2-variations'),
       url('../fonts/Estedad.woff2') format('woff2'),
       url('../fonts/Estedad.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lalezar';
  src: url('../fonts/Lalezar.woff2') format('woff2'),
       url('../fonts/Lalezar.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cascadia Mono';
  src: url('../fonts/CascadiaMono.woff2') format('woff2-variations'),
       url('../fonts/CascadiaMono.woff2') format('woff2'),
       url('../fonts/CascadiaMono.woff') format('woff');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* ======================================================================== */
:root,
[data-bs-theme=light] {

  --bs-font-sans-serif:          'Estedad', sans-serif;
  --bs-font-monospace:           'Cascadia Mono', monospace;

  --bs-border-radius:            .25rem;
  --bs-body-color:               #000;
  --bs-body-color-rgb:           0, 0, 0;
  --bs-body-bg:                  #f0f4f8;
  --bs-body-bg-rgb:              240, 244, 248;
  --bs-highlight-color:          #5a4080;
  --bs-highlight-bg:             #00000000;
  --bs-quote-bg:                 #444;
  --bs-quote-bg-img:             url('data:image/svg+xml,<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><rect width="64" height="64" x="0" y="0" fill="%23ffffffb0"/></svg>');

}

[data-bs-theme=dark] {

  --bs-body-color:               #fff;
  --bs-body-color-rgb:           255, 255, 255;
  --bs-body-bg:                  #202428;
  --bs-body-bg-rgb:              32, 36, 40;
  --bs-highlight-color:          #a888d8;
  --bs-highlight-bg:             #00000000;
  --bs-quote-bg:                 #ddd;
  --bs-quote-bg-img:             url('data:image/svg+xml,<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><rect width="64" height="64" x="0" y="0" fill="%23000000b0"/></svg>');

}

.aside {
  --bs-body-color:               #000;
  --bs-body-color-rgb:           0, 0, 0;
  --bs-body-bg:                  #d0d4d8;
  --bs-body-bg-rgb:              208, 212, 216;
  --bs-quote-bg:                 #000;
}

[data-bs-theme=dark] .aside {
  --bs-body-color:               #fff;
  --bs-body-color-rgb:           255, 255, 255;
  --bs-body-bg:                  #404448;
  --bs-body-bg-rgb:              64, 68, 72;
  --bs-quote-bg:                 #fff;
}

/* ---- Buttons ---- */

[data-bs-theme=dark] .btn-primary   { color: #1a0e2a; }
[data-bs-theme=dark] .btn-secondary { color: #1a1816; }
[data-bs-theme=dark] .btn-success   { color: #0a1e10; }
[data-bs-theme=dark] .btn-warning   { color: #1a1000; }
[data-bs-theme=dark] .btn-danger    { color: #1a0806; }
[data-bs-theme=dark] .btn-info      { color: #041018; }

/* ================================================================================== */

body {
  background-color: #888;
  background-image: url("../img/bg.png");
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-bottom: 1rem;
  font-weight: bold;
}

h1, .h1 {
  font-family: Lalezar;
  font-weight: normal;
}

a {
  text-decoration: none;
}

mark {
    padding: 0;
}

blockquote {
    margin-top: 1rem;
    padding: 1.25rem;
    background-color: var(--bs-quote-bg);
    background-image: var(--bs-quote-bg-img);
    border-color: rgba(var(--bs-body-color-rgb),.1);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--bs-border-radius);
}

blockquote p {
    margin : 0;
}

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

table {
	border-collapse: collapse;
	margin: 0.75em 0;
	width: 100%;
	border-top: 2px solid var(--bs-border-color);
	border-bottom: 2px solid var(--bs-border-color);
	text-indent: 0;
}

table thead {
    background-color: var(--bs-secondary-bg-subtle);
}

table th {
	border-bottom: 1px solid black;
	font-weight: 600;
	padding: 0.75em 0;
}

table td {
	border-bottom: 1px solid black;
	padding: 0.75em 0; 
}

table caption {
	margin-bottom: .5em
}

/* Audio player */
audio::-webkit-media-controls-enclosure {
  opacity: .75; 
  border-radius: 0;
}

/* Video Subtitle */
::cue {
  font-family: 'Estedad', sans-serif;
  font-weight: bold;
  color: #ffffff;
  background: transparent;
  text-shadow: 4px 0 4px #000, -4px 0 4px #000, 0 4px 4px #000, 0 -4px 4px #000;
}

/* Editor ======================================================================= */

body.mce-content-body {
    background: #f0f4f8 !important;
    color: #000000 !important;
    font-family: 'Estedad', sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
}

body.mce-content-body code {
    direction: ltr !important;
    text-align: left !important;
    font-family: 'Cascadia Mono', monospace !important;
    background-color: #222 !important;
    color: #bbb !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;

}

.mce-preview-object {
  width: 100%;
}

/* Classes --------------------------------------------- */

.content{
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

.content, .entry-content {
    font-size: 1.125rem;
    line-height: 2;
    letter-spacing: -0.02em;
}

.content p, .entry-content p {
    text-align: justify;
}

.content ol, .entry-content ol {
    list-style-type: persian;
}

.custom-editor-alert p {
  margin-bottom: 0;
}

.alignleft {
	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright, .wp-block-image .alignright {
	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter, .wp-block-image .aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

.carousel-caption {
  background-image: linear-gradient(transparent,rgba(var(--bs-body-color-rgb),.5),rgba(var(--bs-body-color-rgb),.75));
  padding: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.carousel-item {
    position: relative;
}
.carousel-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}