/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */

/* Dashboard Page */
.demo-reset-his-divs-parent {
	display: flex;
	flex-wrap: wrap;
}

.demo-reset-his-div {
	width: 255px;
	height: 120px;
	border: 1px solid black;
	margin: 5px;
}

.demo-reset-his-div p {
	margin: 10px;
}

/* Reset Runners Page */
.runner-info-divs-parent {
	display: flex;
	flex-wrap: wrap;
}

.runner-info-div {
	flex-grow: 1;
	min-height: 500px;
	border: 1px solid black;
	margin: 5px;
}

#runner-info-div-notes {
	width: 275px;
}

#runner-info-div-url {
	width: 625px;
}

#runner-info-div-rest-url {
	width: 600px;
}

.runner-info-div ul {
	margin-left: 30px;
}

h3,
.runner-info-div p {
	margin: 20px;
}

.runner-info-div p {
	font-size: 15px;
	text-align: justify;
}

/* Demo Reset Admin Bar Notice */
#wp-admin-bar-demo-reset-notice > .ab-item {
    cursor: pointer;
}

#wp-admin-bar-demo-reset-notice .ab-sub-wrapper {
    display: none;
}

#wp-admin-bar-demo-reset-notice:hover .ab-sub-wrapper {
    display: block;
}

#wp-admin-bar-demo-reset-notice .ab-sub-wrapper .ab-item {
    padding-left: 10px;
    height: 26px !important;
}

/* Concept and Help Page */
.demo-reset-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-top: 22px;
}

.demo-reset-tabs input[type="radio"] {
	display: none;
}

.demo-reset-tabs label {
	font-size: 15px;
	font-weight: bold;
	padding: 10px 12px;
	margin-right: 5px;
	cursor: pointer;
	border: 1px solid #c3c4c7;
	border-radius: 10px 10px 0px 0px;
	border-bottom: none;
	background-color: #f1f1f1;
	transition: background-color 0.3s ease;
}

.demo-reset-tabs input[type="radio"]:checked + label {
	background-color: #cccccc;
	border-bottom: 2px solid #ffffff;
}

.demo-reset-tab-content {
	display: none;
	width: 100%;
	padding: 12px;
	border: 1px solid #c3c4c7;
}

.demo-reset-tab-content h3 {
	margin: 30px 0px 0px 0px;
}

.demo-reset-tab-content p,
.demo-reset-tab-content ul li {
	font-size: 17px;
}

#demo-reset-tab-1:checked ~ #demo-reset-tab-content-1,
#demo-reset-tab-2:checked ~ #demo-reset-tab-content-2,
#demo-reset-tab-3:checked ~ #demo-reset-tab-content-3,
#demo-reset-tab-4:checked ~ #demo-reset-tab-content-4,
#demo-reset-tab-5:checked ~ #demo-reset-tab-content-5,
#demo-reset-tab-6:checked ~ #demo-reset-tab-content-6 {
	display: block;
}

#demo-reset-concept-div,
#demo-reset-concept-img,
#demo-reset-use-cases-div,
#demo-reset-use-cases-img,
#demo-reset-hooks-and-cons-div {
	width: 100%;
}

#demo-reset-concept-img,
#demo-reset-use-cases-img {
	height: auto;
}

#demo-reset-concept-div,
#demo-reset-use-cases-div {
	margin-bottom: 30px;
	text-align: justify;
}

/* Help Resources Tab */
#demo-reset-help-res-h2 {
	margin-bottom: 0px;
}

#demo-reset-help-res-div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.demo-reset-help-div {
	flex: 1 1 auto;
	margin: 10px;
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #f9f9f9;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.demo-reset-help-text-div {
    min-height: 180px;
}

.demo-reset-help-iframe {
    width: 100%;
    min-width: 560px;
    max-width: 1120px;
    min-height: 315px;
    max-height: 630px;
    aspect-ratio: 16 / 9;
    margin-top: 20px;
    border: 1px solid #000000;
}

/* Hooks & Constants Tab */
#demo-reset-hooks-and-cons-div {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	justify-content: center;
	align-items: start;
}

.demo-reset-hooks-cons-div {
	margin: 10px;
	border: 1px solid #cccccc;
	border-radius: 8px;
	padding: 15px;
	background-color: #ffffff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.demo-reset-hooks-cons-div h3 {
	word-break: break-all;
	overflow-wrap: break-word;
}

.demo-reset-hooks-cons-text-div,
.demo-reset-hooks-cons-text-div code,
.demo-reset-hooks-cons-text-div a {
	word-break: break-word;
	overflow-wrap: anywhere;
	white-space: normal;
}


/* Styles for screens 2100px and larger */
@media screen and (min-width: 2100px) {

	/* Concept Tab */
	#demo-reset-concept-div {
		float: left;
		width: 20%;
		height: auto;
		margin-bottom: 0px;
	}

	#demo-reset-concept-img {
		float: left;
		width: 78%;
		height: 100%;
		margin-left: 2%;
		object-fit: contain;
	}

	.demo-reset-clearfix-2100px::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Styles for screens 1800px and larger */
@media screen and (min-width: 1800px) {

	/* Use Cases Tab */
	#demo-reset-use-cases-div {
		float: left;
		width: 50%;
		height: auto;
		margin-bottom: 0px;
	}

	#demo-reset-use-cases-img {
		float: left;
		width: 48%;
		height: 100%;
		margin-left: 2%;
		object-fit: contain;
	}

	/* Pro vs Free Tab and THAWED vs FROZEN state Tab */
	#demo-reset-pro-div,
	.demo-reset-thawed-div {
		float: left;
		width: 49%;
	}

	#demo-reset-free-div,
	.demo-reset-frozen-div {
		float: left;
		width: 49%;
		margin-left: 2%;
	}

	.demo-reset-clearfix-1800px::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Styles for screens 662px and smaller */
@media (max-width: 662px) {

	/* Help Resources Tab */
	.demo-reset-help-iframe {
		min-width: 0;
		min-height: 0;
	}
}