/* Homepage specific styles */

/* Full width break-out section that ignores parent container constraints */
.break-out {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -1rem; /* This counteracts the p-4 (1rem) padding */
  box-sizing: border-box;
  max-width: 100vw !important;
  overflow: hidden;
}

.dashboard-frame {
  border-width: 14px;
  border-color: #d1d5db; /* Tailwind's gray-300 */
  background-color: #d1d5db; /* Tailwind's gray-300 */
}

/* Fix for nested containers within the break-out section */
main .break-out {
  left: calc(50% - 50vw);
  margin-left: 0;
  margin-right: 0;
  width: 100vw;
}

/* Container that spans full width but maintains padding */
.container-fluid {
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

/* Dashboard positioning */
.dashboard-bottom-offset {
  bottom: -20%;
}

/* Dashboard section wrapper */
.dashboard-section {
  position: relative;
  height: 24rem;
  /* z-index: 10; */
  overflow: visible;
  display: flex;
  justify-content: center;
}

/* Dashboard container styling */
.dashboard-container {
  width: 100%;
  position: relative;
  margin-bottom: -15%;
}

/* Dashboard frame styling */
.dashboard-frame {
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* Media queries for responsive layout */
@media (min-width: 768px) {
  .hero-section {
    min-height: 900px;
    padding: 6rem 0;
  }

  .dashboard-section {
    height: 32rem;
  }

  .dashboard-container {
    width: 110%;
  }
}

@media (min-width: 1024px) {
  .hero-section {
    min-height: 1000px;
    padding: 8rem 0;
  }

  .dashboard-section {
    position: absolute;
    top: 50%;
    transform: translateY(-58%);
    right: 0;
    width: 50%;
    height: 900px;
    overflow: visible;
    display: block;
    justify-content: initial;
  }

  .dashboard-container {
    position: absolute;
    bottom: -15%;
    width: 140%;
    transform: translateX(1rem);
    margin-bottom: 0;
  }
}

@media (min-width: 1280px) {
  .dashboard-container {
    width: 160%;
    transform: translateX(3rem);
  }
}

/* Utility for negative margins */
.mt-negative-4 {
  margin-top: -1rem;
}

/* Custom height classes */
.h-128 {
  height: 32rem; /* 512px */
}

.border-14 {
  border-width: 14px;
}

/* Width utilities */
.width-50 {
  width: 50%;
}

/* Hero section */
.hero-section {
  min-height: 800px;
  padding: 4rem 0;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Full width border that breaks out of container */
.border-break-out {
  position: relative;
}

.border-break-out::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  border-top: 1px solid #e5e7eb; /* Tailwind's default border color */
}

:is(.dark) .border-break-out::before {
  border-top-color: #374151; /* Tailwind's gray-700 for dark mode */
}

:is(.dark) .dashboard-frame {
  border-color: #4b5563; /* Tailwind's gray-600 */
}

/* Center absolute positioned elements horizontally */
.center-absolute {
  left: 50%;
  transform: translateX(-50%);
}

/* Tinymce */
.tox .tox-promotion {
  display: none;
}