/*
Alignment Support for Content, Wide, and Full Width
Based on theme.json contentSize (1200px) and wideSize (1400px)
*/

/* Default content width */
.wp-block {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Wide alignment */
.alignwide {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Full alignment */
.alignfull {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Center alignment */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Left and right alignments for smaller blocks */
.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

/* Clear floats */
.alignleft::after,
.alignright::after {
  content: "";
  display: table;
  clear: both;
}

/* Container should not constrain aligned blocks */
.wp-site-blocks > .alignwide,
.wp-site-blocks > .alignfull {
  margin-left: auto;
  margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 1440px) {
  .alignwide {
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 40px);
  }
}

@media (max-width: 768px) {
  .alignleft,
  .alignright {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}