/************/
/*   ACSS   */
/************/

/* base.css BEGIN */

:root {
  /* Colors */
  --color-1: #323232;
  --color-2: #f4f2e8;
  --color-3: #ef761f; /* Оранжевый */

  /* Fonts */
  /* Взял имеющиеся значения с сайта с body. При переносе хорошо заменить в основном файле. */
  --font-main-ss: 'Wix Madefor Display',
  	system-ui, -apple-system, blinkmacsystemfont, 
    'Segoe UI', roboto, helvetica, arial, sans-serif;
  --base-fs: 18px;
  --base-fs-number: 18; /* Дублирует число размера шрифта без 'px' */
  --base-lh: 1.3;

  /* Offsets */
  --offset-base: 20px;
  --offset-form: 2em;

  /* Width */
  --width-base: 1460px;

  /* Time */
  --tr-dur-base: 0.3s;

  /* z-index */
  --z-index-default: 1;

  @media (min-width: 768px) {
  	--base-fs: 22px;
  	--base-fs-number: 22;	
  }
}

/*
body {
  color: var(--color-main-1);
  font: var(--base-fs) / var(--base-lh) var(--font-main-sans-serif);
}
*/

summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: none;
}

summary {
  cursor: pointer;
}

/* base.css END */

/* main.css BEGIN */

/**
 * .list-graphic-1 BEGIN
 */

.list-graphic-1 {
  --bg-img-y: 50px;
  --col-min-width: 280px;
  --col-var-width: 1fr;

  display: grid;
  font-size: 14px;
  gap: clamp(21px, 42 * 100vw / 768, 63px);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), var(--col-var-width)));

  :where(&) > li {
  	align-items: flex-start;
  	background: var(--color-2);
  	border-radius: 10px;
  	display: flex;
    flex-flow: column nowrap;
    gap: var(--offset-base);
    padding: var(--offset-base);
  }

  /* 
  	Если на .list-graphic-1__content будет задано 'flex-flow: column nowrap',
  	то заменить 'margin-block' на 'margin-bottom', чтобы отступы не суммировались.
  */
  :where(&) p {
    margin-block: var(--offset-base);
  }
}

.list-graphic-1__img {
	flex: 0 0 auto;
  height: 50px;
  width: auto;
}

.list-graphic-1__h {
  color: var(--color-1);
  display: inline-flex;
  font-size: var(--base-fs);
  font-weight: bold;
  margin-bottom: var(--offset-base);

  &:link,
  &:visited {
    color: var(--color-1);
  }

  &:last-child {
    margin-bottom: 0;
  }
}

/**
 * .list-graphic-1 END
 */

/**
 * .menu-1 BEGIN
 */

.menu-1 {
	--fs-menu-1: 16px;

  align-items: flex-start;
  display: flex;
  flex-flow: column nowrap;
  font-size: var(--fs-menu-1);
  gap: 1em;
  line-height: var(--base-lh);

  :where(&) > li {
  	padding-left: 1em;
  	position: relative;

  	:where(&)::before {
  		background: var(--color-1);
  		content: '';
  		height: 4px;
  		left: 0;
  		position: absolute;

  		/* 
  			Половина произведения размера шрифта на высоту строки минус половина высоты элемента 
  			даёт центровку в одной строке при любом размере шрифта и высоты строки
  		*/
  		top: calc(var(--fs-menu-1) * var(--base-lh) / 2 - 2px);
  		width: 4px;
  	}

  	/* Одновременно две вариации в зависимости от наличия ссылки в элементе списка */
  	:where(&:has(>a))::before {
  		background-color: var(--color-1);
      transition: background-color 0.2s;
  	}

    @media (hover) {
      :where(&:has(>a)):hover::before {
        background-color: var(--color-3);
      }
    }
  }

  & a,
  & a:link,
  & a:visited {
  	color: var(--color-1);
  }

  @media (hover) {
    & a:hover {
      color: var(--color-3);
      text-decoration: none;
    }
  }
}

/**
 * .menu-1 END
 */

/**
 * .contents BEGIN
 */

.contents__link,
.contents__link:link,
.contents__link:visited {
  color: var(--color-1);
}

.contents__item {
  &::marker {
    color: var(--color-1);
  }
}

/**
 * .contents END
 */

/**
 * .acc-1 END
 */

.acc-1 {
	/* Свой общий отступ блока, легко переопределить, по-умолчанию равен общему отступу всего сайта */
	--offset-acc-1: var(--offset-base);

  display: flex;
  flex-flow: column nowrap;
  gap: var(--offset-acc-1);
}

.acc-1__head {
  background: var(--color-2) url('../img/acc-1-close_black.svg') no-repeat 
    right var(--offset-acc-1) center / auto calc(2 * var(--offset-acc-1));
  border: 1px solid var(--color-2);
  border-radius: calc(var(--offset-acc-1) / 2);
  font-weight: bold;
  padding: calc(var(--offset-acc-1) - 4px) var(--offset-acc-1);
  padding-right: calc(4 * var(--offset-acc-1));
}

:where([open]) .acc-1__head {
  background-image: url('../img/acc-1-open_black.svg');
  border-bottom: none;
  border-radius: calc(var(--offset-acc-1) / 2) calc(var(--offset-acc-1) / 2) 0 0;
}

.acc-1__body {
  background-color: white;
  border: 1px solid var(--color-2);
  border-radius: 0 0 calc(var(--offset-acc-1) / 2) calc(var(--offset-acc-1) / 2);
  border-top: none;
  padding: var(--offset-acc-1);

  :where(&) :is(h1, h2, p, ul, ol) {
    margin-block: var(--offset-acc-1);
  }

  :where(&) :is(ul, ol) {
    padding-left: 1.2em;
  }

  :where(& ul) li {
    list-style: disc;
  }

  :where(& ol) li {
    list-style: decimal;
  }

  /* Если нужно изменить размер шрифта на заголовке */

  /* :where(&) h2 {
    font-size: 24px;
  } */
}

/**
 * .acc-1 END
 */

/**
 * .text-content BEGIN
 */

.text-content {
  :where(& :is(ul, ol)) li {
    margin-bottom: 5px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  :where(& ul) li {
    list-style: disclosure-closed;

    &::marker {
      color: var(--color-3);
    }
  }

  :where(& ol) li {
    list-style: decimal;
  }

  :where(&) :is(ul, ol) {
    margin-bottom: 15px;
    padding-left: 1.15em;

    &:last-child {
      margin-bottom: 0;
    }
  }

  :where(&) h2 {
    margin-block: 20px;

    @media (min-width: 768px) {
      margin-block: 40px;
    }

    @media (min-width: 1240px) {
      margin-block: 60px;
    }

    :where(&):first-child {
      margin-top: 0;
    }

    :where(&):last-child {
      margin-bottom: 0;
    }
  }
}

/**
 * .text-content END
 */

/**
 * .form-search-1 BEGIN
 */

.form-search-1 {
  align-items: center;
  display: flex;
  font: 18px / 1.5 'Wix Madefor Display', sans-serif;
  position: relative;
}

.form-search-1__input {
  border: 1px solid #d0d9d9;
  border-radius: 15px;
  height: 50px;
  padding-inline: 20px;
  transition-duration: 0.2s;
  width: 100%;

  :where(&):is(:hover, :focus) {
    border-color: #8aa0a1;
    outline: none;
  }
}

.form-search-1__button {
  align-items: center;
  background-color: #d0d9d9;
  border: none;
  border-radius: 15px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 50px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.form-search-1--wrap {
  background: rgb(255 255 255 / 40%);
  backdrop-filter: blur(45px);
  border-radius: 20px;
  max-width: 940px;
  padding: 20px;

  /* Если понадобится можно переделать в контейнерные запросы */
  @media (min-width: 768px) {
    border-radius: 40px;
    padding: 60px;
  }

  @media (min-width: 1200px) {
    padding: 90px 120px;
  }
}

.form-search-1--wrap__text {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.5;
  margin-bottom: 20px;

  @media (min-width: 768px) {
    font-size: 32px;
  }
}

/**
 * .form-search-1 END
 */

/**
 * .overlay-1 BEGIN
 */

.overlay-1 {
  background: linear-gradient(180deg, #f4f2e8, #cfd5cf);
  border-radius: 20px;
  padding: 20px;

  @container main (inline-size >= 768px) {
    border-radius: 40px;
    padding: 60px 60px 20px;
  }

  @container main (inline-size >= 1200px) {
    padding: 80px 60px 46px;
  }
  /* breakpoint - 2 * 20px */
  @container main (inline-size >= 1660px) {
    padding: 80px 120px 46px;
  }
}

/**
 * .overlay-1 END
 */

/* main.css END */

/* groups.css BEGIN */

.bold {
  font-weight: bold;
}

.mb-30px {
  margin-bottom: 30px;
}

.mb-120px {
  margin-bottom: 120px;
}

/* 
	Безразмерные единицы определяют любой желаемый отступ.
	.mb-1 уже занято bootstrap, .mb-10 занято в стилях, поэтому взял разряд сотен. Это просто номер.
	Через какое-то время задал имя как 3 числа через дефис:
	20px -- 360
	40px -- 768
	60px -- 1920
*/
.mb-60px-100px-120px {
	/* 60px на viewport 360, 100px на 768, 120px на 1920 всё в одной строке */
	margin-bottom: clamp(60px, 100 * 100vw / 768, 120px);
}

/* 
  Пусть по-умолчанию как в примере выше значения такого класса изменяются непрерывно.
  Для прерывистого изменения по медиа запросам добавляется суффикс '-dm' от сокращения '-discrete-media'
*/
.mb-30px-60px-160px-dm {
  margin-bottom: 30px;

  @media (min-width: 768px) {
    margin-bottom: 60px;
  }

  @media (min-width: 1200px) {
    margin-bottom: 160px;
  }
}

/* Основной класс контейнера с именем 'main' */
.cq--main {
  container: main / inline-size;
}

/**
 * .layout-500 BEGIN
 */

.layout-500 {
  --offset-layout-500: var(--offset-base);

  /* Пусть будет общее имя контейнера */
  container: main / inline-size;
}

.layout-500__cols-2 {
  display: grid;
  gap: var(--offset-layout-500);

  @container main (inline-size >= 1020px) {
    grid-template-columns: 1fr 1fr; 
  }
}

/**
 * .layout-500 END
 */

/* groups.css END */