/*
  Styles for the layout builder bootstrap layouts
*/

/*** ADMIN CONFIGURATION BAR STYLES ***/

.js-form-item-layout-settings-background-background-color .form-radio:checked,
.js-form-item-layout-settings-layout-column-width .form-radio:checked,
.js-form-item-layout-settings-layout-container-width .form-radio:checked,
.js-form-item-layout-settings-background-overlay-color .form-radio:checked,
.js-form-item-layout-settings-background-background-effect .form-radio:checked,
.js-form-item-layout-settings-background-content-frame-color
  .form-radio:checked,
.js-form-item-layout-settings-background-background-color .form-radio:hover,
.js-form-item-layout-settings-layout-column-width .form-radio:hover,
.js-form-item-layout-settings-layout-container-width .form-radio:hover,
.js-form-item-layout-settings-background-overlay-color .form-radio:hover,
.js-form-item-layout-settings-background-background-effect .form-radio:hover,
.js-form-item-layout-settings-background-content-frame-color .form-radio:hover,
.js-form-item-layout-settings-background-background-color
  .form-radio:hover:focus,
.js-form-item-layout-settings-layout-column-width .form-radio:hover:focus,
.js-form-item-layout-settings-layout-container-width .form-radio:hover:focus,
.js-form-item-layout-settings-background-overlay-color .form-radio:hover:focus,
.js-form-item-layout-settings-background-background-effect
  .form-radio:hover:focus,
.js-form-item-layout-settings-background-content-frame-color
  .form-radio:hover:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.ui-dialog.ui-widget-content button.ui-dialog-titlebar-close::before {
  position: absolute;
  top: calc(50% - 1px);
  left: 50%;
  width: 50%;
  height: 0;
  content: "";
  border-top: solid 2px currentColor;
  transform: translate(-50%, 50%) rotate(-45deg);
}

.ui-dialog.ui-widget-content button.ui-dialog-titlebar-close::after {
  position: absolute;
  top: calc(50% - 1px);
  left: 50%;
  width: 50%;
  height: 0;
  content: "";
  border-top: solid 2px currentColor;
  transform: translate(-50%, 50%) rotate(45deg);
}

/*** LAYOUT STYLES ***/

.ucb-bootstrap-layout__background-color--gold {
  background-color: var(--ucb-gold);
  color: var(--ucb-black);
}

.ucb-bootstrap-layout__background-color--light-gray {
  background-color: var(--ucb-light-gray);
  color: var(--ucb-black);
}

.ucb-bootstrap-layout__background-color--dark-gray {
  background-color: var(--ucb-dark-gray);
  color: var(--ucb-white);
}

.ucb-bootstrap-layout__background-color--black {
  background-color: var(--ucb-black);
  color: var(--ucb-white);
}

.ucb-bootstrap-layout__background-color--tan {
  background-color: var(--ucb-light-gold);
  color: var(--ucb-black);
}

.ucb-bootstrap-layout__background-color--light-blue {
  background-color: var(--ucb-light-blue);
  color: var(--ucb-black);
}

.ucb-bootstrap-layout__background-color--medium-blue {
  background-color: var(--ucb-medium-blue);
  color: var(--ucb-black);
}

.ucb-bootstrap-layout__background-color--dark-blue {
  background-color: var(--ucb-dark-blue);
  color: var(--ucb-white);
}

.ucb-bootstrap-layout__background-color--light-green {
  background-color: var(--ucb-light-green);
  color: var(--ucb-black);
}

.ucb-bootstrap-layout__background-color--brick {
  background-color: var(--ucb-brick);
  color: var(--ucb-white);
}

.ucb-bootstrap-layout__background-color--gold a {
  color: #111111;
  text-decoration: underline;
  text-decoration-color: rgba(68, 68, 68, 0.65);
}

.ucb-bootstrap-layout__background-color--gold a:hover {
  color: #111111;
  text-decoration-color: var(--ucb-black);
}

.ucb-bootstrap-layout__background-color--white a {
  color: var(--ucb-link);
}

.ucb-bootstrap-layout__background-color--white a:hover {
  color: var(--ucb-link-visited);
}

.ucb-bootstrap-layout__background-color--black a {
  color: var(--ucb-gold);
}

.ucb-bootstrap-layout__background-color--black a:hover {
  color: var(--ucb-white);
}

.ucb-bootstrap-layout__background-color--gray a {
  color: var(--ucb-link-dark);
}

.ucb-bootstrap-layout__background-color--gray a:hover {
  color: var(--ucb-link-visited);
}

.ucb-bootstrap-layout__background-color--dark-gray a {
  color: var(--ucb-gold);
}

.ucb-bootstrap-layout__background-color--dark-gray a:hover {
  color: var(--ucb-white);
}

.ucb-bootstrap-layout__background-color--tan a {
  color: var(--ucb-link-dark);
}

.ucb-bootstrap-layout__background-color--tan a:hover {
  color: var(--ucb-link-visited);
}

.ucb-bootstrap-layout__background-color--light-blue a {
  color: var(--ucb-link-dark);
}

.ucb-bootstrap-layout__background-color--light-blue a:hover {
  color: var(--ucb-link-visited);
}

.ucb-bootstrap-layout__background-color--medium-blue a {
  color: var(--ucb-black);
  text-decoration: underline;
}

.ucb-bootstrap-layout__background-color--medium-blue a:hover {
  color: var(--ucb-black);
  text-decoration: underline;
}

.ucb-bootstrap-layout__background-color--dark-blue a {
  color: var(--ucb-white);
  text-decoration: underline;
}

.ucb-bootstrap-layout__background-color--dark-blue a:hover {
  color: var(--ucb-white);
  text-decoration: underline;
}

.ucb-bootstrap-layout__background-color--light-green a {
  color: var(--ucb-link-dark);
}

.ucb-bootstrap-layout__background-color--light-green a:hover {
  color: var(--ucb-link-visited);
}

.ucb-bootstrap-layout__background-color--brick a {
  color: var(--ucb-white);
  text-decoration: underline;
  text-decoration-color: rgba(221, 221, 221, 0.65);
}

.ucb-bootstrap-layout__background-color--brick a:hover {
  color: var(--ucb-white);
  text-decoration: underline;
  text-decoration-color: rgba(221, 221, 221, 0.65);
}

.ucb-bootstrap-layout-section-overlay-dark {
  color: var(--ucb-white);
}

.ucb-bootstrap-layout-section-overlay-dark a {
  color: var(--ucb-gold);
  text-decoration: none;
}

.ucb-bootstrap-layout-section-overlay-dark a:hover {
  color: var(--ucb-white);
  text-decoration: none;
}

.ucb-bootstrap-layout-section-overlay-light {
  color: var(--ucb-black);
}

.ucb-bootstrap-layout-section-overlay-light a {
  color: var(--ucb-link);
  text-decoration: none;
}

.ucb-bootstrap-layout-section-overlay-light a:hover {
  color: var(--ucb-link-visited);
  text-decoration: none;
}

.ucb-bootstrap-layout-section .column, .ucb-sidebar, .ucb-above-content-region .block, .ucb-below-content-region .block {
  --bs-gutter-y: 3rem;
  margin-top: calc(var(--bs-gutter-y)* .5);
  margin-bottom: calc(var(--bs-gutter-y)* .5);
}

.ucb-bootstrap-layout-section .ucb-edge-to-edge .column {
  margin-top: 0;
  margin-bottom: 0;
}

.content-frame-styled .column {
  padding-top: calc(var(--bs-gutter-y)* .25);
  padding-bottom: calc(var(--bs-gutter-y)* .25);
}

.container.ucb-page-title.bs-background-unstyled.block.ucb-page-title {
  margin-bottom: 0;
}

.ucb-bootstrap-layout-section .column .block, .ucb-sidebar .block, .ucb-above-content-region .block, .ucb-below-content-region .block  {
  --bs-gutter-y: 3rem;
  padding-top: calc(var(--bs-gutter-y) * .5);
  padding-bottom: calc(var(--bs-gutter-y) * .5);
  margin-bottom: calc(var(--bs-gutter-y) *.5);
}

.ucb-bootstrap-layout-section .column .block.bs-background-unstyled {
  padding-top: 0;
  padding-bottom: 0;
}

.ucb-bootstrap-layout-section .column .block:last-child, .ucb-sidebar .block:last-child{
  margin-bottom: 0
}

.ucb-bootstrap-layout-section .column .block.ucb-system-menu-block {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

/*** Content Frame ***/
.content-frame-styled {
  margin: 0;
}

.content-frame-white .column {
  background: var(--ucb-white);
  color: var(--ucb-black);
  margin: 20px 0;
}

.content-frame-light-gray .column {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ucb-black);
  margin: 20px 0;
}

.content-frame-light-gray a,
.content-frame-white a {
  color: var(--ucb-link);
}

.content-frame-light-gray a:hover,
.content-frame-white a:hover {
  color: var(--ucb-link-visited);
}

.content-frame-black .column {
  background: var(--ucb-black);
  color: var(--ucb-white);
  margin: 20px 0;
}

.content-frame-dark-gray .column {
  background: rgba(0, 0, 0, 0.75);
  color: var(--ucb-white);
  margin: 20px 0;
}

.content-frame-dark-gray a,
.content-frame-black a {
  color: var(--ucb-gold);
}

.content-frame-dark-gray a:hover,
.content-frame-black a:hover {
  color: var(--ucb-white);
}

/*** EDGE-TO-EDGE FIXES ***/
.ucb-contained-row .bs-background-unstyled.container {
  --bs-gutter-x: 0;
}

.ucb-contained-row .ucb-hero-unit-content {
  --bs-gutter-y: 1.5rem;
  --bs-gutter-x: 1.5rem;
}

.ucb-contained-row .ucb-hero-outer-wrapper,
.ucb-edge-to-edge .ucb-hero-outer-wrapper {
  --bs-gutter-x: 0;
}

.ucb-sidebar-container .ucb-contained-row {
  --bs-gutter-x: 0;
}

/*** !important needed to override inline background image styles ***/

.scrolling-background {
  background-attachment: scroll !important;
}

.scrolling-background {
  background-attachment: fixed !important;
}

.jarallax {
  position: relative;
  z-index: 0;
}

.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/*** Admin Editor Styles ***/
.contextual-region .contextual .contextual-links a {
  color: #333 !important;
}

[data-layout-content-preview-placeholder-label*="Links"],
[data-layout-content-preview-placeholder-label*="Title"],
[data-layout-content-preview-placeholder-label*="Body"] {
  background-color: transparent;
}