/**
 * @file
 * CSS styles for Layout Builder
 *
 */

 :root {
	--cardinal: #c8102e;
	--gold: #f1be48;
	--burgundy: #7c2529;
	--dk-gray: #4a4a4a;
	--lt-gray: #f5f5f5;
	--md-gray: #ebebeb;
	--midnight: #003d4c;
	--green: #008540;
}

/* --------------------------------------  */
/* ## ADMIN
/* --------------------------------------  */
.layout-builder {
  background-color: #fff;
  margin-top: 4rem;
  margin-bottom: 2rem;
}
.layout-builder__add-section {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
  padding: 1.5em 0;
  text-align: center;
  outline: 2px dashed #979797;
  background-color: #f7f7f7;
}
.layout-builder__link--add {
  padding-left: 1.3em; /* LTR */
  color: #686868;
  border-bottom: none;
  background: url(/core/misc/icons/787878/plus.svg) transparent center left / 1em no-repeat; /* LTR */
}
a.layout-builder__link--add {
	color: #686868;
	text-decoration: underline;
}
[dir="rtl"] .layout-builder__link--add {
  padding-right: 1.3em;
  padding-left: 0;
  background-position-x: right;
}
.layout-builder__link--add:hover,
.layout-builder__link--add:active,
.layout-builder__link--add:focus {
  color: #000;
  border-bottom-style: none;
}
.layout-builder__section {
  margin-bottom: 1.5em;
}
.layout-builder__section .ui-sortable-helper {
  outline: 2px solid #f7f7f7;
  background-color: #fff;
}
.layout-builder__section .ui-state-drop {
  margin: 20px;
  padding: 30px;
  outline: 2px dashed #fedb60;
  background-color: #ffd;
}
.layout-builder__region {
  outline: 2px dashed #2f91da;
}
.layout-builder__add-block {
  padding: 1.5em 0;
  text-align: center;
  background-color: #eff6fc;
}
.layout-builder__link--remove {
  position: relative;
  z-index: 2;
  display: inline-block;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin-right: 6px; /* LTR */
  margin-left: 6%; /* LTR */
  padding: 0;
  white-space: nowrap;
  text-indent: -9999px;
  border: 1px solid #ccc;
  border-radius: 26px;
  background: url(/core/misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
  font-size: 1rem;
}
[dir="rtl"] .layout-builder__link--remove {
  margin-right: -10px;
  margin-left: 6px;
}
.layout-builder__link--remove:hover {
  background-image: url(/core/misc/icons/787878/ex.svg);
}
form#node-layout-ct-layout-builder-form {
	padding-left: 6%;
	padding-right: 6%;
}
#layout-builder-modal .button:hover:after {
    width: 0;
}
div#block-iastate-theme-local-tasks {
	padding-left: 0%;
	padding-right: 6%;
	padding-top: 10px;
	max-width: 1140px;
	margin: auto;
}
div#block-iastate-theme-page-title--2 {
	padding-left: 0%;
	padding-right: 6%;
	max-width: 1140px;
	margin: auto;
}
div#edit-actions {
	max-width: 1135px;
	margin: auto;
}
/* Fix Overscroll Behavior*/
body #layout-builder-modal {
	overscroll-behavior: none;
}
.layout--content-container--default .layout-content {
	max-width: 1140px;
}

/* "Add a new custom block" changes */
a.inline-block-list__item:hover {
  text-decoration: none !important;
}
a.inline-block-list__item:hover :not(.inline-block-list__item-custom-block-description)   {
  text-decoration: underline;
}
.inline-block-list__item-custom-block-description {
  color: #FFF;
  font-size: 13px;
  margin-left: 10px;
}

/* --------------------------------------  */
/* ## Responsive
/* --------------------------------------  */
@media screen and (max-width : 768px) {
  .layout--content-container--default .layout-content {
		max-width: 768px;
	  	display: inline-block;
	}
}
@media screen and (max-width : 1199px) {
  div#block-iastate-theme-local-tasks {
		padding-left: 0%;
		padding-right: 6%;
		padding-top: 10px;
		max-width: 955px;
		margin: auto;
	}
	div#block-iastate-theme-page-title--2 {
		padding-left: 0%;
		padding-right: 6%;
		max-width: 1140px;
		margin: auto;
	}
	div#edit-actions {
		max-width: 1140px;
		margin: auto;
	}
}

/* --------------------------------------  */
/* ## SECTIONS
/* --------------------------------------  */
.layout--onecol, .layout--threecol-section {
	width: 100%;
}
.layout--threecol-33-34-33 > .layout__region--first, .layout--threecol-33-34-33 > .layout__region--third, .layout--threecol-33-34-33 > .layout__region--second {
	flex: 0 1 31%;
	min-width: 250px;
	margin: 0 0.5rem;
	margin-bottom: 1rem;
	padding: 1rem;
	border: 1px solid #ddd;
}

/* --------------------------------------  */
/* ## BLOCKS
/* --------------------------------------  */

.layout-builder-block {
  padding: 1.5em;
  cursor: move;
  overflow: auto;
}
.layout-builder-block [tabindex="-1"] {
  pointer-events: none;
}
.layout-builder__message .messages {
  background-repeat: no-repeat;
}
.layout-builder__message--defaults .messages {
  background-image: url(/core/misc/icons/73b355/globe.svg);
}
.layout-builder__message--overrides .messages {
  background-image: url(/core/misc/icons/73b355/location.svg);
}
.layout-builder-block__content-preview-placeholder-label {
  margin: 0;
  text-align: center;
  font-size: 1.429em;
  line-height: 1.4;
}
.layout-builder--content-preview-disabled .layout-builder-block {
  margin: 0;
  border-bottom: 2px dashed #979797;
}

/* --------------------------------------  */
/* ## CONFIG TRAY
/* --------------------------------------  */
#drupal-off-canvas-wrapper .layout-selection li {
  display: block;
  padding-bottom: 1em;
}
#drupal-off-canvas-wrapper .layout-selection li a {
  display: block;
  padding-top: 0.55em;
}
#drupal-off-canvas-wrapper .inline-block-create-button {
  display: block;
  padding: 24px;
  padding-left: 44px;
  color: #eee;
  border-bottom: 1px solid #333;
  background: url(/core/misc/icons/bebebe/plus.svg) transparent 16px no-repeat;
  font-size: 16px;
}
#drupal-off-canvas-wrapper .inline-block-create-button,
#drupal-off-canvas-wrapper .inline-block-list__item {
  margin: 0 -20px;
  background-color: #444;
}
#drupal-off-canvas-wrapper .inline-block-create-button:hover,
#drupal-off-canvas-wrapper .inline-block-list__item:hover {
  background-color: #333;
}
#drupal-off-canvas-wrapper .inline-block-list {
  margin-bottom: 15px;
}
#drupal-off-canvas-wrapper .inline-block-list__item {
  display: block;
  padding: 15px 0 15px 25px;
}
#drupal-off-canvas-wrapper button, #drupal-off-canvas-wrapper .button {
	border: #006ba6;
	padding: 7px;
	background: #006ba6;
	color: #ffffff;
	border-radius: 3px;
	margin: 0 0 3px;
}
#drupal-off-canvas-wrapper button:hover, #drupal-off-canvas-wrapper input[type="reset"]:hover, #drupal-off-canvas-wrapper input[type="submit"]:hover, #drupal-off-canvas-wrapper input[type="button"]:hover {
	background-color: #ffffff;
	border-color: #006ba6;
	color: #006ba6;
}
.layout-builder__add-section.is-layout-builder-highlighted {
  margin-bottom: calc(1.5em - 8px);
  outline: none;
}
.layout-builder__layout.is-layout-builder-highlighted,
.layout-builder-block.is-layout-builder-highlighted,
.layout-builder__add-block.is-layout-builder-highlighted {
  position: relative;
  z-index: 1;
  margin: -4px -2px;
}
.layout-builder__add-block.is-layout-builder-highlighted,
.layout-builder__add-section.is-layout-builder-highlighted,
.layout-builder__layout.is-layout-builder-highlighted:before,
.layout-builder__layout.is-layout-builder-highlighted,
.layout-builder-block.is-layout-builder-highlighted {
  border: 4px solid #000;
}

/* Highlight the active block in the Move Block dialog. */
#drupal-off-canvas-wrapper .layout-builder-components-table__block-label--current {
  padding-left: 17px;
  border-left: solid 5px;
}

/**
 * @todo remove in https://www.drupal.org/project/drupal/issues/3042127
 *   This rule ensures the row weight dropdowns in the Move Block dialog
 *   maintain the background color of their container when they are hovered
 *   over or are inside the active row.
 */
#drupal-off-canvas-wrapper .layout-builder-components-table__row .form-item {
  background-color: transparent;
}
.layout-builder__region-label,
.layout-builder__section-label {
  display: none;
}
.layout-builder--move-blocks-active .layout-builder__region-label {
  display: block;
}
.layout-builder--move-blocks-active .layout-builder__section-label {
  display: inline;
}
.layout__region-info {
  padding: 0.5em;
  text-align: center;
  border-bottom: 2px dashed #979797;
}

/**
 * Remove "You have unsaved changes" warning because Layout Builder always has
 * unsaved changes until "Save layout" is submitted.
 * @todo create issue for todo.
 */
.layout-builder-components-table .tabledrag-changed-warning {
  display: none !important;
}

/* --------------------------------------  */
/* ## BACKGROUNDS
/* --------------------------------------  */
.layout--background--red {
  background-color: var(--cardinal);
}
.layout--background--green {
background-color: var(--green);
}
.layout--background--green a {
color: #fff;
text-decoration: none;
}
.layout--background--red a {
color: #fff;
text-decoration: none;
}
.layout--background--red a:hover {
text-decoration: underline;
}
.layout--background--green a:hover {
text-decoration: underline;
}
.layout--background--red span.btn.btn-outline-danger a {
color: var(--cardinal);
}
.layout--background--red span.btn.btn-outline-danger a:hover {
color: var(--midnight);
}
.layout--background--red .btn-outline-danger:hover {
background-color: var(--gold);
}
.layout--background--gray {
  background-color: var(--lt-gray);
}
.layout--background--blue {
  background-color: var(--midnight);
}

/* Background Overlays. */
.layout--background-overlay--red {
	position: relative;
}
.layout--background-overlay--red:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(to right, rgba(200,16,46,0.7), 50%, rgba(200, 16, 46, 1));
	z-index: 0;
}
.layout--background-overlay--red>* {
	z-index: 100;
	position: relative;
}
.layout-builder-block.layout--background-overlay--dark-light a, .layout-builder-block.layout--background-overlay--dark a, .layout-builder-block.layout--background-overlay--darker a {
	background-color: var(--cardinal);
	border-color: var(--cardinal);
	font-weight: 700;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2 ease;
	padding: 7px;
	white-space: break-spaces;
	color: #fff;
	text-decoration: none;
}
.layout-builder-block.layout--background-overlay--dark-light a:hover, .layout-builder-block.layout--background-overlay--dark a:hover, .layout-builder-block.layout--background-overlay--darker a:hover {
	background-color: #000000;
	border-color: #000000;
}
.layout-builder-block.layout--background-overlay--red a {
	background-color: var(--midnight);
	border-color: var(--midnight);
	font-weight: 700;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2 ease;
	padding: 7px;
	white-space: break-spaces;
	color: #ffffff;
	text-decoration: none;
}
.layout-builder-block.layout--background-overlay--red a:hover {
	background-color: var(--gold);
	border-color: var(--gold);
	color: var(--midnight);
}
.layout--background-overlay--green {
	position: relative;
}
.layout--background-overlay--green:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(to right, rgba(82,71,39,0.7), 50%, rgba(82,71,39,1));
	z-index: 0;
}
.layout--background-overlay--green>* {
	z-index: 100;
	position: relative;
}
.layout-builder-block.layout--background-overlay--dark-light a, .layout-builder-block.layout--background-overlay--dark a, .layout-builder-block.layout--background-overlay--darker a {
	background-color: var(--green);
	border-color: var(--green);
	font-weight: 700;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2 ease;
	padding: 7px;
	white-space: break-spaces;
	color: #fff;
	text-decoration: none;
}
.layout-builder-block.layout--background-overlay--green a {
	background-color: var(--gold);
	border-color: var(--gold);
	font-weight: 700;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2 ease;
	padding: 7px;
	white-space: break-spaces;
	color: #ffffff;
	text-decoration: none;
}
.layout-builder-block.layout--background-overlay--green a:hover {
	background-color: var(--midnight);
	border-color: var(--midnight);
	color: var(--gold);
}

/* --------------------------------------  */
/* ## SECTION CONFIG
/* --------------------------------------  */

/* Section Height. */
.layout-height-100vh {
	min-height: 100vh;
}
.layout-height-80vh {
	min-height: 80vh;
}
.layout-height-60vh {
	min-height: 60vh;
}
.layout-height-40vh {
	min-height: 40vh;
}

/* Aligns Block Title Border */
.layout--alignment--left .isu-block-title {
	font-weight: 700; 
	padding: 0 0 13px 0;
	letter-spacing: 0;
	font-family: Merriweather,serif;
	border-bottom: #fff;
}
.layout--alignment--right .isu-block-title {
	font-weight: 700; 
	padding: 0 0 13px 0;
	letter-spacing: 0;
	font-family: Merriweather,serif;
	border-bottom: #fff;
}
.layout--alignment--center .isu-block-title {
	font-weight: 700; 
	padding: 0 0 13px 0;
	letter-spacing: 0;
	font-family: Merriweather,serif;
	border-bottom: #fff;
}
.layout--alignment--justify .isu-block-title {
	font-weight: 700; 
	padding: 0 0 13px 0;
	letter-spacing: 0;
	font-family: Merriweather,serif;
	border-bottom: #fff;
}
.layout--alignment--center h2.isu-block-title.h4:after {
	left: 50%;
	margin-left: -25px;
}

/* Section Color */
.layout--color--white h2.isu-block-title.h4 {
	color: #fff;
}

.layout--color--white h2, .layout--color--white .h2, .layout--color--white h3, .layout--color--white .h3, .layout--color--white h4, .layout--color--white .h4, .layout--color--white h5, .layout--color--white .h5, .layout--color--white h6, .layout--color--white .h6 {
	color: white;
}

.layout--color--black h2, .layout--color--black .h2, .layout--color--black h3, .layout--color--black .h3, .layout--color--black h4, .layout--color--black .h4, .layout--color--black h5, .layout--color--black .h5, .layout--color--black h6, .layout--color--black .h6 {
	color: #000;
}