/* Add this to your `style-editor.css` file */

/* -------------- Root Custom Properties ------------------ */

:root {
  --white: #ffffff;
  --black: #000000;
  --info: #6ec3ff;
  --success: #3dd992;
  --warning: #ffb74d;
  --error: #e6546e;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;
  --btn-bg-color: var(--brand-primary);
  --btn-bg-color-hover: var(--brand-primary-dark);
  --btn-border-color: var(--brand-primary);
  --btn-border-color-hover: var(--brand-primary-dark);
  --btn-color: var(--white);
  --btn-color-hover: var(--white);
  --btn-font-w: 600;
  --btn-text-transform: uppercase;
  --font-heading: Inter, sans-serif;
  --font-body: Inter, sans-serif;
  --body-bg: var(--white);
  --border-radius: 3px;
  --form-control-border-color: var(--gray-400);
  --form-control-height: 38px;
  --flex-form-control-border-radius: var(--border-radius);
  --bootstrap-form-control-border-radius: var(--border-radius);
  --brand-primary-dark: #0067c0;
}

/* ------------- Basic ----------------------- */

.editor-styles-wrapper {
  background-color: var(--body-bg);
  color: var(--body-color);
}

.editor-styles-wrapper .wp-block {
  font-family: var(--font-body);
  font-size: 1em;
}

/* ------------- Post Title ----------------------------------- */

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper .wp-block h1,
.editor-styles-wrapper .wp-block h2,
.editor-styles-wrapper .wp-block h3,
.editor-styles-wrapper .wp-block h4,
.editor-styles-wrapper .wp-block h5,
.editor-styles-wrapper .wp-block h6 {
	  font-family: var(--font-heading);
	  color: var(--font-heading-color);
}

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper .wp-block h1 {
  margin-bottom: 2rem;
  font-weight: 700;
  text-align: center;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* --------------- Typography -------------------------------- */

.editor-styles-wrapper .wp-block h2 {
	font-size: 2rem;
}

.editor-styles-wrapper .wp-block h3 {
	font-size: 1.75rem;
}

.editor-styles-wrapper .wp-block h4 {
	font-size: 1.5rem;
}

.editor-styles-wrapper .wp-block h5 {
	font-size: 1.25rem;
}

.editor-styles-wrapper .wp-block h6 {
  font-size: 1rem;
}

/* --------------- Structure --------------------------------- */

/* Main column width */
.wp-block {
  max-width: 1110px;
  /* 30px less, due Boostrap's .container margin on frontend */
}

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
  max-width: 1480px;
}

[data-align="wide"] .wp-block-group > .wp-block-group__inner-container > .wp-block {
  max-width: 1480px;
}

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
  max-width: 100%;
}

[data-align="full"] .wp-block-group > .wp-block-group__inner-container > .wp-block {
  min-width: 100%;
}

.block-editor-block-list__block {
  margin: 0;
}


/* =========================================================== */
/* =================== LAYOUT BLOCKS ========================= */
/* =========================================================== */

/* ----------- Block Group --------------- */
.wp-block-group.has-background {
  border-radius: var(--border-radius);
}


/* --------------- Block cover -------------------- */

.wp-block-cover {
  height: 0;
  margin-bottom: 3rem;
}

.wp-block-cover-image .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container {
  width: auto;
}

.editor-styles-wrapper .wp-block-cover__inner-container p {
  line-height: 1.5;
}


/* =========================================================== */
/* =================== ELEMENT BLOCKS ======================== */
/* =========================================================== */

/* ----------- Block text ---------------- */

.editor-styles-wrapper .wp-block {
  margin-top: 1rem;
  margin-bottom: 1rem;
}


/* ----------- Block button ---------------- */

.wp-block-button {
  margin: 1rem 0;
}

/* Default button definition */
.wp-block-button__link {
  background-color: var(--btn-bg-color);
  color: #FFF;
  border-radius: var(--border-radius);
  letter-spacing: 1px;
  font-weight: var(--btn-font-w);
  text-transform: var(--btn-text-transform);
}

.wp-block-button a.wp-block-button__link:not(.has-text-color) {
  color: #FFF;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  filter: brightness(80%);
  text-decoration: none;
}

/* Outline button */
.wp-block-button.is-style-outline > .wp-block-button__link {
  color: var(--btn-bg-color);
  background-color: transparent;
  border: 1px solid currentcolor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: transparent;
  filter: brightness(80%);
}

/* Squared button */
.wp-block-button.is-style-squared > .wp-block-button__link {
  border-radius: 0;
}


/* --------------- Block image -------------------- */

.wp-block-image {
  margin-bottom: 3em;
}


/* --------------- Block quote -------------------- */

.wp-block-quote,
.wp-block-quote.is-style-large {
  border-left: 4px solid var(--brand-primary);
  margin: 0 0 3rem;
  padding-left: 2em;
  font-style: italic;
}

.wp-block-quote.has-text-align-right {
  border-left: 0;
  border-right: 4px solid var(--brand-primary);
  padding-right: 2rem;
}

.wp-block-quote.is-style-large.has-text-align-right {
  border-left: 0;
  border-right: 4px solid var(--brand-primary);
  padding-right: 2rem;
}

.wp-block-quote .block-editor-rich-text__editable p {
  font-size: 1.2em;
  font-weight: 300;
  margin-bottom: 1rem;
}

.wp-block-quote.is-style-large .block-editor-rich-text__editable p {
  font-size: 1.5em;
}

.wp-block-quote__citation {
  margin-top: 0;
  font-style: italic;
  color: #6c7781;
}

.is-style-large .wp-block-quote__citation {
  font-size: 1.1em;
}

.wp-block-pullquote {
  border-top: 4px solid #2193F2;
  border-bottom: none;
}

.wp-block-pullquote .wp-block-pullquote__citation {
  font-style: italic;
  color: #6c7781;
  text-transform: none;
  font-size: 13px;
}

.wp-block-pullquote.is-style-solid-color {
  border: none;
  background-color: #EEE;
}

.wp-block-pullquote.is-style-solid-color blockquote {
  text-align: center;
}


/* ---------------  Block separator --------------- */

.wp-block-separator {
    border: none;
    border-bottom: 2px solid #EEE;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  max-width: 100px;
}

.wp-block-separator.is-style-wide {
    border-bottom-width: 2px;
}

.wp-block-separator.is-style-dots::before {
  font-size: 30px;
  color: #CCC;
}


/* --------------- Block Gallery ------------------ */

.wp-block-gallery {
  margin-bottom: 3rem;
}

.wp-block-gallery.alignfull {
  padding: 0 2rem;
}


/* --------------- Block video ------------------- */

.wp-block-video {
  margin-bottom: 3rem;
}


/* --------------- Block table ------------------- */

.wp-block-table {
  margin: 3rem;
}

.wp-block-table.alignwide,
.wp-block-table.alignfull {
  max-width: fit-content;
}

.wp-block-table tfoot {
  border-top: 1px solid #EEEEEE;
  font-style: italic;
}

.wp-block-table.is-style-regular td,
.wp-block-table.is-style-regular th,
.wp-block-table.is-style-regular tfoot {
  padding: .7rem;
}

.wp-block-table.is-style-regular td {
  padding: .7rem;
  border-top: 1px solid #EEEEEE;
}

.wp-block-table.is-style-stripes {
  border-bottom: none;
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes tfoot {
  padding: .7rem;
}


/* ------------ Block media text ------------------- */

.wp-block-media-text .wp-block-media-text__content p {
  margin-bottom: 0;
}


/* ----------- Block columns ----------------------- */

.wp-block-columns {
  margin-bottom: 3rem;
}


/* ----------- Block embed ------------------------- */

.wp-block-embed {
  margin-bottom: 3rem;
}


/* ----------- Block categories --------------------- */

.wp-block-categories select {
  height: 38px;
  margin-bottom: 1rem;
}


/* ----------- Block archives ----------------------- */

.editor-styles-wrapper ul.wp-block-archives {
  padding-left: 1rem;
  list-style: none;
  margin-left: 0;
}

.editor-styles-wrapper ul.wp-block-archives li {
  padding-bottom: .5rem;
}

.editor-styles-wrapper ul.wp-block-archives li a {
  text-decoration: none;
}

.wp-block-archives select {
  height: 38px;
  margin-bottom: 1rem;
}


/* ----------- Block calendar ---------------------- */

.wp-block-calendar tbody td,
.wp-block-calendar th {
  padding: .5rem;
  border: 1px solid #bdbdbd;
}

.wp-block-calendar table th {
  font-weight: 500;
  background: var(--brand-primary);
  color: #FFF;
  border-color: var(--brand-primary);
}

.wp-block-calendar table caption {
  text-align: left;
}

.wp-calendar-nav {
  text-align: left;
  margin-bottom: 1rem;
}


/* ----------- Search Block ------------------------- */

.wp-block-search {
  margin-bottom: 1rem;
}

.wp-block-search .wp-block-search__input {
  max-width: 100%;
  height: var(--form-control-height);
  border: 1px solid var(--form-control-border-color);
  border-radius: var(--bootstrap-form-control-border-radius);
  padding: 0 0.8rem;
}

.wp-block-search .wp-block-search__button {
  color: #fff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  border-radius: var(--border-radius);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 1rem 0;
  padding: .5rem 1rem;
}

@media ( min-width: 991.98px ) {
  .wp-block-search .wp-block-search__button {
    margin: 0 0 0 1rem;
  }
}

.wp-block-search .wp-block-search__button:hover {
  color: #fff;
  background-color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}


/* ----------- Latest Comments Block ------------------------- */

.editor-styles-wrapper .wp-block-latest-comments {
  padding-left: 1rem;
  margin-left: 0;
}

.editor-styles-wrapper .wp-block-latest-comments li a {
  text-decoration: none;
}


/* ----------- Latest Posts Block ------------------------- */

.block-editor .wp-block-latest-posts,
.block-editor .wp-block-latest-posts.is-grid {
  padding-left: 1rem;
  margin-left: 0;
}

.block-editor .wp-block-latest-posts li {
  padding-bottom: .5rem;
}

.block-editor .wp-block-latest-posts li a {
  text-decoration: none;
}


/* ----------- Tag Cloud Block ------------------------- */

.block-editor .wp-block-tag-cloud a {
  text-decoration: none;
}


/* ----------- RSS Block ------------------------- */

.block-editor .wp-block-rss {
  padding-left: 1rem;
  list-style: none;
  margin-left: 0;
}

.block-editor .wp-block-rss li {
  padding-bottom: .5rem;
}

.block-editor .wp-block-rss li a {
  text-decoration: none;
}


/* ----------- Woocommerce Block ------------------------- */

/* Product grid */
.wc-block-grid {
  margin-bottom: 3rem;
}

.wc-block-grid.alignfull {
  padding: 0 2rem;
}

.wc-block-sort-select {
  margin-bottom: 2rem;
}

.wc-block-sort-select select {
  border: 1px solid #DDD;
  border-radius: 3px;
  padding: .5rem;
}

/* Category grid */
.wc-block-product-category {
  margin-bottom: 3rem;
}

/* Featured product */
.wc-block-featured-product {
  margin-bottom: 3rem;
}
