/**
 * Rules
 *
 * @package    rules
 * @subpackage modules/page/css
 * @since      1.0.0
 * @version    1.0.0
 * @author     Ehsan Zare <darksider.legend@gmail.com>
 * @link       https://code-path.com
 * @copyright  (c) 2024 Code-path web developing team
 */

/*-------------------------------------------------------------------------*/
/* Rules
/*-------------------------------------------------------------------------*/
.rules[rules] {
	--gap: 2rem;
	--padding: 2rem;

	--desc-text-font-size: 1.25rem;

	--rule-title-color: #caebf6;
	--rule-title-font-size: 1.3rem;

	--rule-content-color: #6a7278;

	--rule-section-head-color: #caebf6;
	--rule-section-head-font-size: 1.1rem;

	--rule-section-body-color: #6a7278;

	--menu-title-color: #caebf6;
	--menu-title-font-size: 1.5rem;

	--menu-list-font-size: 1.1rem;

	width: 100%;
	height: auto;

	gap: var(--gap);

	padding: var(--padding);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

/* Rules: List (ol)
/*---------------------------------------------------------------*/
.rules[rules] ol {
	width: 100%;
	height: auto;

	gap: 5px;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;

	list-style: disc;
}

/* Rules: Block (global)
/*---------------------------------------------------------------*/
.rules[rules] .rules__block {
	width: 100%;
	height: auto;
}

/* Rules: Block (desc)
/*---------------------------------------------------------------*/
.rules[rules] .rules__block.rules__block--desc {}

.rules[rules] .rules__block.rules__block--desc .desc__text {
	width: 100%;
	height: auto;

	font-size: var(--desc-text-font-size);
}

/* Rules: Block (item)
/*---------------------------------------------------------------*/
.rules[rules] .rules__block.rules__block--item {
	gap: -webkit-calc(var(--gap) / 1.5);
	gap: -moz-calc(var(--gap) / 1.5);
	gap: calc(var(--gap) / 1.5);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.rules[rules] .rules__block.rules__block--item .item__title {
	width: 100%;
	height: auto;

	color: var(--rule-title-color);

	font-size: var(--rule-title-font-size);
	font-weight: 800;

	text-transform: uppercase;
}

.rules[rules] .rules__block.rules__block--item .item__content {
	width: 100%;
	height: auto;

	color: var(--rule-content-color);
}

.rules[rules] .rules__block.rules__block--item .item__section {
	width: 100%;
	height: auto;

	gap: -webkit-calc(var(--gap) / 5);
	gap: -moz-calc(var(--gap) / 5);
	gap: calc(var(--gap) / 5);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.rules[rules] .rules__block.rules__block--item .item__section .section__head {
	width: 100%;
	height: auto;

	color: var(--rule-section-head-color);

	font-size: var(--rule-section-head-font-size);
	font-weight: 800;
}

.rules[rules] .rules__block.rules__block--item .item__section .section__body {
	width: 100%;
	height: auto;

	color: var(--rule-section-body-color);
}

/* Rules: Block (menu)
/*---------------------------------------------------------------*/
.rules[rules] .rules__block.rules__block--menu {}

.rules[rules] .rules__block.rules__block--menu .menu__title {
	width: 100%;
	height: auto;

	color: var(--menu-title-color);
	font-size: var(--menu-title-font-size);
	text-transform: uppercase;
}

.rules[rules] .rules__block.rules__block--menu .menu__list {
	width: 100%;
	height: auto;

	gap: 5px;

	margin: -webkit-calc(var(--gap) / 5) 0 0 0;
	margin: -moz-calc(var(--gap) / 5) 0 0 0;
	margin: calc(var(--gap) / 5) 0 0 0;

	padding: 0;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;

	font-size: var(--menu-list-font-size);
}

.rules[rules] .rules__block.rules__block--menu .menu__list li {
	width: 100%;
	height: auto;
}

.rules[rules] .rules__block.rules__block--menu .menu__list li a {
	width: auto;
	height: auto;

	display: inline-block;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.2);
}

/* Rules: Block (notice)
/*---------------------------------------------------------------*/
.rules[rules] .rules__block.rules__block--notice {}

.rules[rules] .rules__block.rules__block--notice .notice__text {
	width: 100%;
	height: auto;
}

/* Rules: Responsive
/*---------------------------------------------------------------*/
@media screen and (min-width: 992px) { /* LG */
	.rules[rules] {
		--padding: 0;

		--rule-title-font-size: 2rem;
		--rule-section-head-font-size: 1.3rem;
	}
}