/*------------------------------------
    #LAYOUT
------------------------------------*/

/**
 * Layout Container
 * 1) Caps the width of the content to the maximum width
 *    and centers the container
 */
.l-container {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--l-max-width);
  padding: 0 var(--spacing);

  @media all and (min-width: 60em) {
    padding: 0 var(--spacing-large);
  }
}

.l-container--xxl,
.container-xxl {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mobile-gutter);
  width: var(--l-max-width-xxl);

  &.full-bleed {
    max-width: var(--l-max-width-xxl);
    width: 100%;
  }
}

.l-container--xl,
.container-xl {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mobile-gutter);
  width: var(--l-max-width-xl);

  &.full-bleed {
    max-width: var(--l-max-width-xl);
    width: 100%;
  }
}

.l-container--lg,
.container-lg {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mobile-gutter);
  width: var(--l-max-width-lg);

  &.full-bleed {
    max-width: var(--l-max-width-lg);
    width: 100%;
  }
}

.l-container--md,
.container-md {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mobile-gutter);
  width: var(--l-max-width);

  &.full-bleed {
    max-width: var(--l-max-width);
    width: 100%;
  }

  &.quicklinks {
    max-width: 950px;
  }
}

.l-container--sm,
.container-sm {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mobile-gutter);
  width: var(--l-max-width-sm);

  &.full-bleed {
    max-width: var(--l-max-width-sm);
    width: 100%;
  }
}

.l-container--xs,
.max-width.narrow,
.container-xs {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mobile-gutter);
  width: var(--l-max-width-xs);

  &.full-bleed {
    max-width: var(--l-max-width-xs);
    width: 100%;
  }
}

.l-container--xxs,
.container-xxs {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--mobile-gutter);
  width: var(--l-max-width-xxs);

  &.full-bleed {
    max-width: var(--l-max-width-xxs);
    width: 100%;
  }
}

 /**
//  * Centered container
//  */

.l-container--text-center {
  text-align: center;
}

/**
 * Padded container
 */

/* All around */
.l-container--padded__all,
.container-padding-all {
  padding: 1rem;

  @media all and (min-width: 47em) {
    padding: 3rem;
  }
}

 /* Top and Bottom */
.l-container--padded__tb,
.container-padding-tb {
  padding-bottom: 1rem;
  padding-top: 1rem;

  @media all and (min-width: 47em) {
    padding-bottom: 3rem;
    padding-top: 3rem;
  }

  &:empty {
    padding: 0;
  }

  + .l-container--padded__tb:not(.block-grey) {
    padding-top: 0;
  }

  + .l-container--padded__tb.block-space {
    padding-top: 3rem;
  }
}

 /* Sides */
.l-container--padded__lr,
.container-padding-sides {
  padding-left: 1rem;
  padding-right: 1rem;

  @media all and (min-width: 47em) {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

 /* Top */
.l-container--padded__t,
.container-padding-top {
  padding-top: 1rem;

  @media all and (min-width: 47em) {
    padding-top: 3rem;
  }
}

 /* Bottom */
.l-container--padded__b,
.container-padding-bottom {
  padding-bottom: 1rem;

  @media all and (min-width: 47em) {
    padding-bottom: 3rem;
  }
}

 /**
 * Bordered container
 */

 /* All around */
.l-container--border__all,
.container-border {
  border: 1px solid var(--color-neutral-gray-17);
}

 /* Top and Bottom */
.l-container--border__tb,
.container-border-tb {
  border-bottom: 1px solid var(--color-neutral-gray-17);
  border-top: 1px solid var(--color-neutral-gray-17);
}

 /* Sides */
.l-container--border__lr,
.container-border-sides {
  border-left: 1px solid var(--color-neutral-gray-17);
  border-right: 1px solid var(--color-neutral-gray-17);
}

 /**
//  *
//  * 1) This caps the width of text passages
//  *    to achieve a comfortable line length
//  */
.l-linelength-container {
  max-width: var(--l-max-width-xxs);
}

.l-band {
  background: var(--color-neutral-gray-04);
  padding: 2rem 1rem;
}

 /**
//  * 2 column layout
//  */
.l-page-layout--two-column {
  display: flex;
  flex-direction: column;

  @media all and (min-width: 60em) {
    flex-direction: row;
  }
}

.l-page-layout__main {
  .l-page-layout--two-column & {
    @media all and (min-width: 60em) {
      padding-right: var(--spacing);
      width: 70%;
    }
  }
}

 /**
//  * Sidebar
//  */
.l-page-layout__secondary {
  .l-page-layout--two-column & {
    @media all and (min-width: 60em) {
      margin-left: 2rem;
      width: 30%;
    }
  }

  .l-page-layout--reversed & {
    margin-bottom: 2rem;

    @media all and (min-width: 60em) {
      order: 1;
      margin-bottom: 0;
    }
  }
}

.block-gray,
.block-grey {
  background-color: var(--color-neutral-gray-04);

  &.c-find-a-clinic {
    position: relative;
    z-index: 1;
  }

  &.row {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}

.block-gray + .block-gradient,
.block-gray + .block-gradient-gray,
.block-gray + .block-gradient-grey,
.block-grey + .block-gradient,
.block-grey + .block-gradient-gray,
.block-grey + .block-gradient-grey,
.block-gradient + .block-gray,
.block-gradient + .block-grey,
.block-gradient + .block-gradient-gray,
.block-gradient + .block-gradient-grey,
.block-gradient-grey + .block-gray,
.block-gradient-grey + .block-grey,
.block-gradient-grey + .block-gradient,
.block-gradient-gray + .block-gray,
.block-gradient-gray + .block-grey,
.block-gradient-gray + .block-gradient {
  margin-top: 0;
}

 /* this removes the padding between sections so there's no white space */
 /* i.e. /orthotics */
.l-container--padded__tb > .block-grey:first-child,
.l-container--padded__tb > .block-gray:first-child, .no-top-padding {
  margin-top: -1rem;

  @media all and (min-width: 47em) {
    margin-top: -3rem;
  }
}

.block-gradient,
.block-logo-overlay {
  background: var(--color-brand-red-orange);
  background: linear-gradient(to right, var(--color-brand-yellow-orange) 1%, var(--color-brand-red-orange) 100%);
  /* background: linear-gradient(135deg, var(--color-brand-red-orange) 50%, var(--color-brand-yellow-orange) 100%); */
  color: var(--color-neutral-white);

  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    color: var(--color-neutral-white);
  }

  &.overlay {
    background-size: cover;
    position: relative;
    z-index: 1;

    .c-hero--gradient::after {
      background: none;
    }
  }
}

.block-header-image {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  max-width: 100%;

  img {
    height: 300px;
    min-height: 300px;
    width: auto;
    max-width: none;
    transform: translateX(-50%);

    @media all and (min-width: 35em) {
      transform: none;
    }

    @media all and (min-width: 70em) {
      width: 100%;
      height: auto;
    }
  }
}

.container-padding-tb + .block-gradient {
  margin-top: 0;
}

/* this removes the padding between sections so there's no white space */
/* i.e. /orthotics */
.c-main .l-container--padded__tb .block-gradient:last-child {
  margin-bottom: -1rem;

  @media all and (min-width: 47em) {
    margin-bottom: -3rem;
  }
}

.block-gradient-grey,
.block-gradient-gray {
  background: var(--color-neutral-white);
  background: linear-gradient(to bottom, var(--color-neutral-white) 0%, var(--color-neutral-gray-04) 100%);
}

.block-dark {
  background-color: var(--color-brand-blue-dark);
}

.block-light {
  background-color: var(--color-neutral-gray-04);
}

.vertically-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .c-btn {
    align-self: flex-start;
  }
}

.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


 /* this adds a margin for the WP columns on mobile */
.wp-block-column + .wp-block-column {
  margin-top: 2rem;

  @media all and (min-width: 47em) {
    margin-top: 0;
  }
}

 /* Override wordpress' tablet layout with left menues */
@media (min-width: 600px) and (max-width: 781px) {
  .wp-block-columns .wp-block-column:not(:only-child) {
    flex-basis: 100%!important;
  }
}