*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --space-fluid: clamp(12px, 4vw, 100px);
}

.wp-block-button a:focus {
  outline: 2px solid var(--wp--preset--color--focus-outline);
}

body.theme-digital {
  background-color: var(--wp--preset--color--black-1000);
}
body.theme-digital .wp-block-kolossal-navigation {
  --nav-text: var(--wp--preset--color--white-1000);
  --nav-pill-bg: var(--wp--preset--color--gray-800);
  --nav-pill-hover-bg: var(--wp--preset--color--gray-700);
  --nav-pill-active-bg: var(--wp--preset--color--white-1000);
  --nav-pill-active-color: var(--wp--preset--color--black-1000);
  --nav-chevron-color: var(--wp--preset--color--white-1000);
  --nav-panel-bg: rgba(24, 24, 24, 0.70);
  --nav-active-dropdown-link-color: #FFF;
}
body.theme-digital img.kolossal-navigation__logo,
body.theme-digital .kolossal-navigation__logo-image {
  filter: brightness(0) invert(1);
}
body.theme-digital .kolossal-navigation__logo-text {
  color: var(--wp--preset--color--white-1000);
}
body.theme-branding {
  background-color: var(--wp--preset--color--white-1000);
  color: var(--wp--preset--color--branding-primary);
}
body.theme-content {
  background-color: var(--wp--preset--color--brand-tertiary);
  color: var(--wp--preset--color--black-1000);
}
body.theme-landing {
  background-color: var(--wp--preset--color--brand-primary);
  color: var(--wp--preset--color--black-1000);
}

.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wp-site-blocks > main {
  flex: 1;
}

.container {
  width: 100%;
  --container-max-width: 100.25rem;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

.padding-block {
  --space-100-40: clamp(2.5rem, 1.4829rem + 5.0847vw, 6.25rem);
  --space-100-12: clamp(0.75rem, -0.7415rem + 7.4576vw, 6.25rem);
  padding: var(--space-100-40) var(--space-100-12);

  @media (min-width: 768px) {
    padding: var(--space-100-40);
    }
}

.row {
  --cols: 6;
  --gap: var(--space-fluid);

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

.row > * {
  min-width: 0;
  margin-block-start: 0;
}

.editor-styles-wrapper .wp-block-group.row > .wp-block {
  margin-block-start: 0;
}

.align-self-start { align-self: start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: end; }
.justify-self-start { justify-self: start; }
.justify-self-center { justify-self: center; }
.justify-self-end { justify-self: end; }

.col-1 { grid-column: var(--col-start, auto) / span 1; }
.col-2 { grid-column: var(--col-start, auto) / span 2; }
.col-3 { grid-column: var(--col-start, auto) / span 3; }
.col-4 { grid-column: var(--col-start, auto) / span 4; }
.col-5 { grid-column: var(--col-start, auto) / span 5; }
.col-6 { grid-column: var(--col-start, auto) / span 6; }

.col-start-1 { --col-start: 1; }
.col-start-2 { --col-start: 2; }
.col-start-3 { --col-start: 3; }
.col-start-4 { --col-start: 4; }
.col-start-5 { --col-start: 5; }
.col-start-6 { --col-start: 6; }


@media (min-width: 440px) {
  .row {
    --cols: 6;
  }

  .col-sm-1 { grid-column: var(--col-start-sm, var(--col-start, auto)) / span 1; }
  .col-sm-2 { grid-column: var(--col-start-sm, var(--col-start, auto)) / span 2; }
  .col-sm-3 { grid-column: var(--col-start-sm, var(--col-start, auto)) / span 3; }
  .col-sm-4 { grid-column: var(--col-start-sm, var(--col-start, auto)) / span 4; }
  .col-sm-5 { grid-column: var(--col-start-sm, var(--col-start, auto)) / span 5; }
  .col-sm-6 { grid-column: var(--col-start-sm, var(--col-start, auto)) / span 6; }

  .col-start-sm-1 { --col-start-sm: 1; }
  .col-start-md-2 { --col-start-md: 2; }
  .col-start-sm-3 { --col-start-sm: 3; }
  .col-start-sm-4 { --col-start-sm: 4; }
  .col-start-sm-5 { --col-start-sm: 5; }
  .col-start-sm-6 { --col-start-sm: 6; }
}

@media (min-width: 768px) {
  .row {
    --cols: 8;
  }

  .col-md-1 { grid-column: var(--col-start-md, var(--col-start, auto)) / span 1; }
  .col-md-2 { grid-column: var(--col-start-md, var(--col-start, auto)) / span 2; }
  .col-md-3 { grid-column: var(--col-start-md, var(--col-start, auto)) / span 3; }
  .col-md-4 { grid-column: var(--col-start-md, var(--col-start, auto)) / span 4; }
  .col-md-5 { grid-column: var(--col-start-md, var(--col-start, auto)) / span 5; }
  .col-md-6 { grid-column: var(--col-start-md, var(--col-start, auto)) / span 6; }
  .col-md-7 { grid-column: var(--col-start-md, var(--col-start, auto)) / span 7; }
  .col-md-8 { grid-column: var(--col-start-md, var(--col-start, auto)) / span 8; }

  .col-start-md-1 { --col-start-md: 1; }
  .col-start-md-2 { --col-start-md: 2; }
  .col-start-md-3 { --col-start-md: 3; }
  .col-start-md-4 { --col-start-md: 4; }
  .col-start-md-5 { --col-start-md: 5; }
  .col-start-md-6 { --col-start-md: 6; }
  .col-start-md-7 { --col-start-md: 7; }
  .col-start-md-8 { --col-start-md: 8; }
}

@media (min-width: 1280px) {
  .row {
    --cols: 12;
    --gap: 80px;
  }

  .col-lg-1  { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 1; }
  .col-lg-2  { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 2; }
  .col-lg-3  { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 3; }
  .col-lg-4  { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 4; }
  .col-lg-5  { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 5; }
  .col-lg-6  { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 6; }
  .col-lg-7  { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 7; }
  .col-lg-8  { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 8; }
  .col-lg-9  { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 9; }
  .col-lg-10 { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 10; }
  .col-lg-11 { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 11; }
  .col-lg-12 { grid-column: var(--col-start-lg, var(--col-start-md, var(--col-start, auto))) / span 12; }

  .col-start-lg-1  { --col-start-lg: 1; }
  .col-start-lg-2  { --col-start-lg: 2; }
  .col-start-lg-3  { --col-start-lg: 3; }
  .col-start-lg-4  { --col-start-lg: 4; }
  .col-start-lg-5  { --col-start-lg: 5; }
  .col-start-lg-6  { --col-start-lg: 6; }
  .col-start-lg-7  { --col-start-lg: 7; }
  .col-start-lg-8  { --col-start-lg: 8; }
  .col-start-lg-9  { --col-start-lg: 9; }
  .col-start-lg-10 { --col-start-lg: 10; }
  .col-start-lg-11 { --col-start-lg: 11; }
  .col-start-lg-12 { --col-start-lg: 12; }
}

@media (min-width: 1920px) {
  .row {
    --gap: 100px;
  }
}

.debug .row {
  position: relative;
}

.debug .row::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;

  --col-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));

  background-image: repeating-linear-gradient(
    to right,
    rgb(255 105 180 / 0.22) 0,
    rgb(255 105 180 / 0.22) var(--col-width),
    transparent var(--col-width),
    transparent calc(var(--col-width) + var(--gap))
  );
}

/* Header group is not a content section; avoid theme variation white fill. */
.wp-block-group.site-header {
  background-color: transparent;
  pointer-events: none;
}

.wp-block-group.site-footer .wp-block-site-title a {
  color: inherit;
  text-decoration: none;
}

.is-style-theme-branding {
	.wp-block-button {
		&.is-style-secondary a {
			background-color: var(--wp--preset--color--white-1000);

			&:hover {
				background-color: var(--wp--preset--color--gray-200);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-100);
			}
		}

		&.is-style-ghost a {
			&:hover {
				background-color: var(--wp--preset--color--gray-200);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-100);
			}

			&:focus {
				background-color: var(--wp--preset--color--white-1000);
			}
		}

		&.is-style-contrast a {
			color: var(--wp--preset--color--white-1000);

			&:hover, &:active {
				color: var(--wp--preset--color--white-1000);
			}
		}

		&.is-style-outline a {
			background-color: transparent;
			color: var(--wp--preset--color--black-1000);
			border-color: var(--wp--preset--color--black-1000);

			&:hover {
				background-color: var(--wp--preset--color--gray-200);
			}

			&:focus {
				background-color: var(--wp--preset--color--black-1000);
				color: var(--wp--preset--color--white-1000);
			}

			&:focus {
				background-color: var(--wp--preset--color--gray-100);
			}
		}
	}
}

.is-style-theme-digital {
	.wp-block-button {
		&.is-style-secondary a {
			background-color: var(--wp--preset--color--gray-900);
			color: var(--wp--preset--color--gray-100);
			border-color: var(--wp--preset--color--gray-100);

			&:hover {
				background-color: var(--wp--preset--color--gray-1000);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-800);
			}
		}

		&.is-style-ghost a {
			color: var(--wp--preset--color--white-1000);

			&:hover {
				background-color: var(--wp--preset--color--gray-1000);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-800);
			}

			&:focus {
				background-color: var(--wp--preset--color--black-1000);
			}
		}

		&.is-style-contrast a {
			background-color: var(--wp--preset--color--white-1000);
			color: var(--wp--preset--color--black-1000);

			&:hover {
				background-color: var(--wp--preset--color--white-1000);
				color: var(--wp--preset--color--black-1000);
			}

			&:active {
				background-color: var(--wp--preset--color--white-700);
				color: var(--wp--preset--color--black-1000);
			}
		}

		&.is-style-outline a {
			background-color: transparent;
			color: var(--wp--preset--color--white-1000);
			border-color: var(--wp--preset--color--white-1000);

			&:focus {
				background-color: var(--wp--preset--color--white-1000);
				color: var(--wp--preset--color--black-1000);
			}

			&:hover {
				background-color: var(--wp--preset--color--black-1000);
				color: var(--wp--preset--color--white-1000);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-800);
			}
		}
	}
}

.is-style-theme-content {
	.wp-block-button {
		&.is-style-secondary a {
			background-color: var(--wp--preset--color--brand-tertiary);

			&:hover {
				background-color: var(--wp--preset--color--brand-tertiary-300);
			}

			&:active {
				background-color: var(--wp--preset--color--brand-tertiary-100);
			}
		}

		&.is-style-ghost a {
			&:hover {
				background-color: var(--wp--preset--color--brand-tertiary);
			}

			&:active {
				background-color: var(--wp--preset--color--brand-tertiary-100);
			}

			&:focus {
				background-color: var(--wp--preset--color--brand-tertiary);
			}
		}

		&.is-style-contrast a {
			color: var(--wp--preset--color--brand-tertiary);

			&:hover, &:active {
				color: var(--wp--preset--color--brand-tertiary);
			}
		}

		&.is-style-outline a {
			background-color: transparent;
			color: var(--wp--preset--color--brand-tertiary);
		}

		&:hover {
			background-color: var(--wp--preset--color--brand-tertiary);
			color: var(--wp--preset--color--white-1000);
		}

		&:active {
			background-color: var(--wp--preset--color--brand-tertiary-100);
		}

		&:focus {
			background-color: var(--wp--preset--color--black-1000);
			color: var(--wp--preset--color--brand-tertiary);
		}
	}
}

/* Services / Departments: keep content grouped on 8-col layouts, split on 12-col layouts. */
.services-departments__content {
  display: block;
}

.services-departments__content > * {
  margin-block-start: 0;
}

.services-departments__content > * + * {
  margin-block-start: var(--wp--preset--spacing--16);
}

@media (min-width: 1280px) {
  .services-departments__content {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .services-departments__content > * + * {
    margin-block-start: 0;
  }

  .services-departments__heading {
    grid-column: span 3;
  }

  .services-departments__body {
    grid-column: span 7;
  }
}
