/*
 * Theme Name: BEM Generator
 * Version: 1.0.1
 * Author: Yurii Cherniievskyi <info@miditaur.net>
 * License: MIT
 */

:root {
  --ecl-color-blue: #0046b8;
  --ecl-color-blue-dark: #002f6c;
  --ecl-color-blue-darker: #001f4d;
  --ecl-color-yellow: #ffcc00;
  --ecl-color-yellow-dark: #e6b800;
  --ecl-color-white: #fff;
  --ecl-color-grey-5: #f5f5f5;
  --ecl-color-grey-10: #ebebeb;
  --ecl-color-grey-25: #cfcfcf;
  --ecl-color-grey-50: #707070;
  --ecl-color-grey-75: #404040;
  --ecl-color-black: #1f1f1f;
  --ecl-color-success: #467a39;
  --ecl-color-error: #da2131;
  --ecl-color-info: #006fb4;
  --ecl-space-2xs: .25rem;
  --ecl-space-xs: .5rem;
  --ecl-space-s: .75rem;
  --ecl-space-m: 1rem;
  --ecl-space-l: 1.5rem;
  --ecl-space-xl: 2rem;
  --ecl-space-2xl: 3rem;
  --ecl-radius: 2px;
  --ecl-focus: 3px solid #ffcc00;
  --ecl-font: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }
body.ecl-typography {
  margin: 0;
  color: var(--ecl-color-black);
  background: var(--ecl-color-white);
  font-family: var(--ecl-font);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}
body.ecl-menu-open { overflow: hidden; }
a { color: var(--ecl-color-blue); }
a:hover { color: var(--ecl-color-blue-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: var(--ecl-focus); outline-offset: 2px; }
code { padding: .125rem .25rem; background: var(--ecl-color-grey-5); font-family: Consolas, Monaco, monospace; }

.ecl-u-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.ecl-skip-link { position: fixed; left: 1rem; top: -6rem; z-index: 1000; padding: .75rem 1rem; background: #fff; color: var(--ecl-color-blue-dark); font-weight: 700; }
.ecl-skip-link:focus { top: 1rem; }

.ecl-container { width: 100%; max-width: 1368px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.ecl-row { display: flex; flex-wrap: wrap; margin-left: -.75rem; margin-right: -.75rem; }
[class*="ecl-col-"] { width: 100%; padding-left: .75rem; padding-right: .75rem; }
.ecl-col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .ecl-col-m-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 996px) {
  .ecl-col-l-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .ecl-col-l-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}
@media (min-width: 1140px) {
  .ecl-col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .ecl-col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}

.ecl-u-type-heading-2, .ecl-page-header__title { margin: 0 0 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.ecl-page-header__title { font-size: clamp(2rem, 4vw, 3rem); }
.ecl-u-type-heading-2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.ecl-u-type-paragraph { max-width: 75ch; margin: 0 0 1.5rem; }

@media (min-width: 996px) {
  [data-i18n="ui.referenceDescription"] {
    max-width: none;
    width: 100%;
  }
}

.ecl-link { color: var(--ecl-color-blue); text-decoration: underline; text-underline-offset: .15em; }
.ecl-link--standalone { text-decoration: none; }
.ecl-link--standalone:hover { text-decoration: underline; }
.ecl-link--inverted { color: #fff; }
.ecl-link--inverted:hover { color: #fff; }

.ecl-site-header { background: #fff; border-bottom: 1px solid var(--ecl-color-grey-25); }
.ecl-site-header__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.ecl-site-header__logo-link { display: inline-flex; align-items: center; gap: .75rem; color: var(--ecl-color-blue-dark); }
.ecl-site-header__logo-link:hover { color: var(--ecl-color-blue-dark); text-decoration: none; }
.ecl-site-header__logo-image { display: block; width: 56px; height: 56px; object-fit: contain; flex: none; }
.ecl-site-header__brand-name { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.ecl-site-header__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
.ecl-site-header__language-label { font-weight: 700; }
.ecl-site-header__site-name { padding: .75rem 0 1rem; color: var(--ecl-color-blue-dark); font-size: 1.5rem; font-weight: 700; }
.ecl-select, .ecl-text-input, .ecl-text-area { width: 100%; min-height: 44px; border: 2px solid var(--ecl-color-grey-50); border-radius: 0; background: #fff; color: var(--ecl-color-black); font: inherit; padding: .625rem .75rem; }
.ecl-site-header__language-select { width: auto; min-width: 7rem; }
.ecl-search-form { display: flex; max-width: 25rem; }
.ecl-search-form__text-input { min-width: 10rem; }
.ecl-search-form__button { flex: none; }

.ecl-menu { position: relative; border-top: 1px solid var(--ecl-color-grey-10); }
.ecl-menu__toggle, .ecl-menu__close { display: none; }
.ecl-menu__list { display: flex; margin: 0; padding: 0; list-style: none; }
.ecl-menu__item { margin: 0; }
.ecl-menu__link { display: block; padding: 1rem 1.25rem; color: var(--ecl-color-blue-dark); font-weight: 700; text-decoration: none; border-bottom: 4px solid transparent; }
.ecl-menu__link:hover, .ecl-menu__link:focus-visible { background: var(--ecl-color-grey-5); color: var(--ecl-color-blue-dark); }
.ecl-menu__item--current .ecl-menu__link { border-bottom-color: var(--ecl-color-blue); }
.ecl-menu__overlay { display: none; }
@media (max-width: 767px) {
  .ecl-site-header__top { align-items: flex-start; flex-direction: column; }
  .ecl-site-header__actions { width: 100%; justify-content: flex-start; }
  .ecl-search-form { width: 100%; max-width: none; }
  .ecl-search-form__text-input { flex: 1; }
  .ecl-menu { padding-bottom: .75rem; }
  .ecl-menu__toggle { display: inline-flex; }
  .ecl-menu__container { position: fixed; inset: 0 0 0 auto; z-index: 1001; width: min(88vw, 24rem); padding: 1rem; background: #fff; box-shadow: -8px 0 28px rgba(0,0,0,.2); transform: translateX(105%); transition: transform .2s ease; }
  .ecl-menu__container[aria-hidden="false"] { transform: translateX(0); }
  .ecl-menu__close { display: inline-flex; margin-left: auto; margin-bottom: 1rem; }
  .ecl-menu__list { display: block; }
  .ecl-menu__link { border-bottom: 1px solid var(--ecl-color-grey-10); }
  .ecl-menu__item--current .ecl-menu__link { border-left: 4px solid var(--ecl-color-blue); border-bottom-color: var(--ecl-color-grey-10); }
  .ecl-menu__overlay:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.5); }
}

.ecl-page-header { padding: 1.5rem 0 2rem; background: var(--ecl-color-grey-5); border-bottom: 1px solid var(--ecl-color-grey-10); }
.ecl-breadcrumb__container { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: .875rem; }
.ecl-breadcrumb__segment + .ecl-breadcrumb__segment::before { content: "/"; margin-right: .5rem; color: var(--ecl-color-grey-50); }
.ecl-page-header__description { max-width: 70ch; margin: 0; font-size: 1.125rem; }

@media (min-width: 996px) {
  .ecl-page-header__description {
    max-width: none;
    width: 100%;
  }
}
.ecl-main-layout { padding-top: 2rem; padding-bottom: 3rem; }
.ecl-content-block { margin-bottom: 3rem; }

.ecl-form-grid { row-gap: 1.25rem; }
.ecl-form-group { margin-bottom: .25rem; }
.ecl-form-label { display: block; margin-bottom: .375rem; font-weight: 700; }
.ecl-help-block { margin-top: .375rem; color: var(--ecl-color-grey-75); font-size: .875rem; }
.ecl-text-area { resize: vertical; }
.ecl-feedback-message { min-height: 1.5rem; margin: 1rem 0; font-weight: 700; }
.ecl-feedback-message--error { color: var(--ecl-color-error); }
.ecl-feedback-message--success { color: var(--ecl-color-success); }
.ecl-button-group { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.ecl-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 2px solid transparent; border-radius: 0; padding: .625rem 1rem; font: inherit; font-weight: 700; line-height: 1.25; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.ecl-button:disabled { opacity: .55; cursor: not-allowed; }
.ecl-button--primary { background: var(--ecl-color-blue); color: #fff; border-color: var(--ecl-color-blue); }
.ecl-button--primary:hover { background: var(--ecl-color-blue-dark); border-color: var(--ecl-color-blue-dark); color: #fff; }
.ecl-button--secondary { background: #fff; color: var(--ecl-color-blue); border-color: var(--ecl-color-blue); }
.ecl-button--secondary:hover { background: var(--ecl-color-grey-5); color: var(--ecl-color-blue-dark); border-color: var(--ecl-color-blue-dark); }
.ecl-button--tertiary { background: transparent; color: var(--ecl-color-blue); border-color: transparent; }
.ecl-button--tertiary:hover { background: var(--ecl-color-grey-5); color: var(--ecl-color-blue-dark); }
.ecl-button--cta { background: var(--ecl-color-yellow); color: var(--ecl-color-blue-darker); border-color: var(--ecl-color-yellow); }
.ecl-button--cta:hover { background: var(--ecl-color-yellow-dark); color: var(--ecl-color-blue-darker); border-color: var(--ecl-color-yellow-dark); }

/* Mobile menu controls must never leak into the desktop navigation.
   This rule intentionally follows the generic .ecl-button declaration. */
@media (min-width: 768px) {
  .ecl-menu .ecl-menu__toggle,
  .ecl-menu .ecl-menu__close,
  .ecl-menu .ecl-menu__overlay {
    display: none !important;
  }

  .ecl-menu .ecl-menu__container {
    position: static;
    inset: auto;
    width: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
  }
}

.ecl-notification { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--ecl-color-info); background: #eaf6fb; }
.ecl-output { row-gap: 1rem; margin-top: 2rem; }
.ecl-highlight-box { padding: 1.5rem; border-top: 4px solid var(--ecl-color-blue); background: var(--ecl-color-grey-5); }
.ecl-highlight-box__title { margin: 0 0 .75rem; font-size: 1.25rem; }
.ecl-highlight-box__description { margin: 0; }

.ecl-table-responsive { width: 100%; overflow-x: auto; }
.ecl-table { width: 100%; border-collapse: collapse; border-spacing: 0; text-align: left; }
.ecl-table__caption { padding: 0 0 .75rem; font-weight: 700; text-align: left; }
.ecl-table__header { padding: .875rem 1rem; border-bottom: 3px solid var(--ecl-color-blue); background: #fff; color: var(--ecl-color-black); font-weight: 700; text-transform: none; }
.ecl-table__cell { padding: .875rem 1rem; border-bottom: 1px solid var(--ecl-color-grey-25); vertical-align: top; }
.ecl-table--zebra .ecl-table__body .ecl-table__row:nth-child(even) { background: var(--ecl-color-grey-5); }
.ecl-table__tokens { display: flex; flex-wrap: wrap; gap: .35rem; }
.ecl-table__token { display: inline-block; padding: .125rem .375rem; background: #fff; border: 1px solid var(--ecl-color-grey-25); }

/* BEM naming examples: valid names are green-tinted, invalid names are pink-tinted. */
.ecl-table__row > .ecl-table__cell:nth-child(2) .ecl-table__token {
  background: #e8f5e9;
  border-color: #9ccc9c;
  color: #1b5e20;
}

.ecl-table__row > .ecl-table__cell:nth-child(3) .ecl-table__token {
  background: #fdecef;
  border-color: #e6a4b1;
  color: #8a1538;
}
@media (max-width: 767px) {
  .ecl-table[data-ecl-table-enhanced] .ecl-table__head { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .ecl-table[data-ecl-table-enhanced], .ecl-table[data-ecl-table-enhanced] .ecl-table__body, .ecl-table[data-ecl-table-enhanced] .ecl-table__row, .ecl-table[data-ecl-table-enhanced] .ecl-table__cell { display: block; width: 100%; }
  .ecl-table[data-ecl-table-enhanced] .ecl-table__row { margin-bottom: 1rem; border: 1px solid var(--ecl-color-grey-25); }
  .ecl-table[data-ecl-table-enhanced] .ecl-table__cell { display: grid; grid-template-columns: minmax(7.5rem, 35%) 1fr; gap: 1rem; border-bottom: 1px solid var(--ecl-color-grey-10); }
  .ecl-table[data-ecl-table-enhanced] .ecl-table__cell::before { content: attr(data-ecl-table-header); font-weight: 700; }
  .ecl-table[data-ecl-table-enhanced] .ecl-table__cell:last-child { border-bottom: 0; }
}

.ecl-site-footer { background: var(--ecl-color-blue-dark); color: #fff; }
.ecl-site-footer__container { padding-top: 2rem; padding-bottom: 2rem; }
.ecl-site-footer__title { margin-bottom: .5rem; font-size: 1.25rem; font-weight: 700; }
.ecl-site-footer__description, .ecl-site-footer__copyright { margin: .5rem 0 0; }
@media (min-width: 768px) {
  .ecl-site-footer__container { text-align: center; }
  .ecl-site-footer__cookie,
  .ecl-site-footer__version,
  .ecl-site-footer__description,
  .ecl-site-footer__copyright,
  .ecl-site-footer__title { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}