/**
 * Hero Block Styles (Tailwind CSS version)
 *
 * Most styling is now handled via Tailwind utility classes.
 * This file only contains alignment support and edge cases.
 */
.wp-block-ttk-website-hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wp-block-ttk-website-hero[style*="--hero-bg-color"] {
  background-color: var(--hero-bg-color);
}
.wp-block-ttk-website-hero.alignwide {
  width: 100% !important;
  max-width: var(--wp--style--global--wide-size, 1280px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: inherit !important;
}
.wp-block-ttk-website-hero.ttk-hero-full-width {
  color: var(--hero-text-color, #ffffff);
}
.wp-block-ttk-website-hero.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: inherit !important;
}
.wp-block-ttk-website-hero .ttk-hero-bg-image {
  background-image: var(--hero-bg-image-url);
}
.wp-block-ttk-website-hero .ttk-hero-overlay {
  opacity: var(--hero-overlay-opacity, 0.5);
}
.wp-block-ttk-website-hero .ttk-hero-title {
  color: var(--hero-text-color, #ffffff);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.wp-block-ttk-website-hero .ttk-hero-subtitle {
  color: var(--hero-text-color, #ffffff);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.wp-block-ttk-website-hero .ttk-hero-shape {
  position: absolute;
  background-color: var(--hero-shape-color, #B8E6E6);
  top: -2rem;
  bottom: -2rem;
  right: 0;
  width: calc(75% + 2rem);
  transform: translateX(2rem);
}
@media (min-width: 1024px) {
  .wp-block-ttk-website-hero .ttk-hero-shape {
    top: -4rem;
    bottom: -4rem;
    width: calc(75% + 4rem);
    transform: translateX(4rem);
  }
}
.wp-block-ttk-website-hero .ttk-hero-image {
  max-height: 600px;
}

.ttk-hero:not(.alignfull) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: inherit !important;
}
.ttk-hero:not(.alignfull) > div {
  margin-left: auto;
  margin-right: auto;
  max-width: 90rem;
  padding-left: 2rem;
  padding-right: 2rem;
}