/* layout.css: float grid (.c-col-*), containers (.wrapper*), sections, spacers.
   Ported from the source theme (RECON/assets/pretty/style.css), selectors and values kept 1:1. */
@layer custom {
  .section-bg-dark {
    background: var(--clr-dark);
  }
  .c-col-6 {
    width: 50%;
  }
  .c-col-12 {
    width: 100%;
  }
  .hide_desktop {
    display: none;
  }
  #footer > .wrapper:last-of-type {
    margin-bottom: 0;
  }
  #page {
    visibility: visible;
  }
  .c-col-3 {
    width: 25%;
  }
  .a-empty-space {
    display: block;
    width: 100%;
    float: revert;
    clear: both;
  }
  .a-empty-space--25 {
    height: 25px;
  }
  .a-empty-space--30 {
    height: 30px;
  }
  .a-empty-space--50 {
    height: 50px;
  }
  .a-empty-space--70 {
    height: 70px;
  }
  .a-empty-space--100 {
    height: 100px;
  }
  .a-empty-space--130 {
    height: 130px;
  }
  .a-empty-space--250 {
    height: 250px;
  }
  .section {
    position: relative;
    background-size: cover;
    background-position: center;
  }
  .section,
  .wrapper,
  .wrapper-full,
  .wrapper-small {
    width: 100%;
    margin-bottom: 100px;
  }
  .wrapper,
  .wrapper-small {
    margin-right: auto;
    margin-left: auto;
  }
  .wrapper-full:after,
  .wrapper-small:after,
  .wrapper:after {
    display: table;
    clear: both;
    content: "";
  }
  .c-col-12,
  .c-col-3,
  .c-col-4,
  .c-col-6,
  .c-col-8,
  .c-col-9 {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
    box-sizing: border-box;
  }
  .no-gap {
    padding-left: 0;
    padding-right: 0;
  }
  .c-col-4 {
    width: 33.333333%;
  }
  .c-col-8 {
    width: 66.666666%;
  }
  .c-col-9 {
    width: 75%;
  }
  .no-margin {
    margin-bottom: 0 !important;
  }
  @media only screen and (max-width: 576px) {
  .wrapper,
  .wrapper-small {
    max-width: 90%;
    margin-bottom: 25px;
  }
  }
  @media only screen and (max-width: 576px) {
  .wrapper-full {
    margin-bottom: 30px;
  }
  }
  @media only screen and (max-width: 576px) {
  .c-col-12,
  .c-col-3,
  .c-col-4,
  .c-col-6,
  .c-col-8,
  .c-col-9 {
    width: 100%;
    margin-bottom: 35px;
  }
  }
  @media only screen and (max-width: 576px) {
  .a-empty-space--100 {
    height: 30px;
  }
  }
  @media only screen and (max-width: 576px) {
  .a-empty-space--50 {
    height: 20px;
  }
  }
  @media only screen and (min-width: 576px) {
  .wrapper,
  .wrapper-small {
    max-width: 90%;
  }
  }
  @media only screen and (min-width: 768px) {
  .wrapper {
    max-width: 90%;
  }
  }
  @media only screen and (min-width: 768px) {
  .wrapper-small {
    max-width: 88%;
  }
  }
  @media only screen and (min-width: 992px) {
  .wrapper {
    max-width: 1014px;
  }
  }
  @media only screen and (min-width: 992px) {
  .wrapper-small {
    max-width: 790px;
  }
  }
  @media only screen and (min-width: 1200px) {
  .wrapper {
    max-width: 1274px;
  }
  }
  @media only screen and (min-width: 1200px) {
  .wrapper-small {
    max-width: 950px;
  }
  }
  @media only screen and (min-width: 1600px) {
  .wrapper {
    max-width: 1500px;
  }
  }
  @media only screen and (min-width: 1600px) {
  .wrapper-small {
    max-width: 1200px;
  }
  }
  @media (max-width: 767px) {
  .section {
    margin-bottom: 30px;
  }
  }
  @media (min-width: 577px) and (max-width: 1024px) {
  .a-empty-space--130 {
    display: none;
  }
  }
  @media (min-width: 577px) and (max-width: 1024px) {
  .section .c-col-6 {
    width: 100%;
  }
  }
  @media (min-width: 577px) and (max-width: 1024px) {
  .wrapper {
    margin-bottom: 30px;
  }
  }
  @media only screen and (max-width: 450px) {
  .hide_mobile {
    display: none;
  }
  }
  @media only screen and (max-width: 450px) {
  .hide_desktop {
    display: block;
  }
  }
  @media (min-width: 450px) and (max-width: 900px) {
  .c-col-4,
  .c-col-8,
  .c-col-9 {
    width: 100%;
  }
  }
}

/* Foundation utilities */
@layer custom {
  .nowrap { white-space: nowrap; }
  .visually-hidden, .lead__trap, .lead__trap > * {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .lead__trap { inset-inline-start: -100vw; }
}
