/* Page structure: container and grid, footer, blog, Beaver Builder hooks.
   The header is in header.css. */

/* container and grid */
.container {
  max-width: 1136px;
  margin: 0 auto;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 40px;
  width: 100%;
}

.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }

/* footer */
:root {
  --footer-bg-color: var(--gray-900);
  --footer-meta-color: var(--gray-600);
  --footer-border: 1px solid light-dark(var(--gray-300), var(--gray-800));
  --footer-border-radius: 9px;
  --footer-link-color: light-dark(var(--gray-500), var(--gray-300));
  --footer-link-hover-color: light-dark(var(--gray-600), var(--gray-400));
}

footer {
  background-color: var(--footer-bg-color);
  overflow: hidden;
}

.container:has(footer) {
  z-index: 214000;

  @media (width <= 960px) {
    padding-inline: var(--space-20);
  }
}

.footer {
  padding-inline: var(--space-32);
  position: relative;
  border-radius: var(--footer-border-radius);
  box-shadow: var(--shadow-soft-1);
  border: var(--footer-border);
}

.footer__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--grid-gap);

  @media (width <= 720px) {
    grid-template: "a" "b";
  }
}

.footer__column {
  color: var(--true-white);

  @media (width <= 720px) {
    max-width: 100%;
  }
}

@media (width <= 720px) {
  .footer__column-a { grid-area: a; }
  .footer__column-b { grid-area: b; }
}

.footer__description {
  width: 100%;
  max-width: 300px;
}

.footer__menu-area {
  display: flex;
  gap: 40px;
  justify-content: end;
  font-size: var(--font-size-sm);

  @media (width <= 720px) {
    justify-content: space-between;
    flex-flow: wrap;
  }
}

/* the colored "speed lines" that slide in when the footer scrolls into view */
.footer__funnel {
  position: relative;
  height: 80px;
  left: -32px;
  width: auto;
  overflow: hidden;

  .p-absolute {
    width: 1200px;
    right: 100%;
    transition: right 0.7s ease-out;

    &.animate {
      right: 25%;

      @media (width <= 720px) {
        right: 15%;
      }
    }

    svg {
      height: 80px;
    }
  }
}

.footer__menu {
  h3 {
    margin-bottom: 12px;
    color: var(--true-white);
  }

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  ul li {
    margin-bottom: 12px;
  }

  a {
    font-family: var(--font-family-mono);
    color: var(--footer-link-color);

    &:hover {
      color: var(--footer-link-hover-color);
      text-decoration: underline;
    }
  }
}

.footer-meta {
  display: flex;
  flex-direction: row;
  column-gap: 40px;
  position: relative;
  z-index: 1;
  padding-block: 16px;
  font-size: 12px;
  color: var(--footer-meta-color);
  font-family: var(--font-family-mono);

  a {
    font-family: var(--font-family-mono);
    color: var(--footer-link-hover-color);

    &:hover {
      color: var(--footer-link-hover-color);
      text-decoration: underline;
    }
  }

  ul {
    display: flex;
    gap: var(--space-16);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media (width <= 720px) {
    flex-direction: column;
    row-gap: var(--space-16);
  }
}

/* blog */
.blog__article {
  p,
  ol,
  ul {
    margin-bottom: var(--space-24);
  }

  :is(ul, ol) li {
    margin-bottom: var(--space-8);
  }

  p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  :is(h2, h3, h4, h5) + p {
    margin-top: 8px;
  }

  blockquote {
    margin-block: 48px;
    padding-block: 24px;
    font-family: var(--font-family-sans-serif);
    font-weight: var(--font-weight-bold);
    border-top: 3px solid var(--black);
    border-bottom: 3px solid var(--black);
    text-align: center;

    p {
      margin-bottom: 0;
      font-size: 2vw;
    }
  }
}

.article-img {
  border: var(--border-base);
  border-radius: var(--radius-large);
}

/* from WordPress's get_avatar(), so it never shows up in templates or the DB */
.avatar {
  border-radius: var(--radius-base);
}

.page-blog-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 16px;

  @media (width <= 960px) {
    padding-inline: var(--padding-base);
  }

  .row {
    grid-column: span 3;
    width: 100%;
  }

  @media (width <= 720px) {
    .row--sticky {
      grid-gap: 0px;

      [class*="col-"] {
        grid-column: span 12;
        max-width: 100%;
      }
    }

    .card--blog {
      grid-column: span 3;
    }
  }
}

.blog__post .fl-post-grid-post:hover {
  transform: translate(0px, -1px);

  .fl-post-grid-title {
    text-decoration: underline;
  }
}

/* Beaver Builder */

/*
 * Mobile overflow guardrails. Mobile browsers widen the whole layout when
 * one element overflows, so a single fixed-width module makes every page
 * scroll sideways.
 */

/* Box modules are grid/flex containers, and their children default to
   min-width: auto, so they can't shrink below their content. Let them
   shrink, and cap fixed widths (e.g. width: 800px) at the column.
   Scoped to BB's medium breakpoint and below: on desktop, min-width: auto
   was quietly overriding some Box width settings (e.g. the /customers/
   hero heading), and those layouts are already approved as they look. */
@media (width <= 992px) {
  .fl-module-box {
    max-width: 100%;
    min-width: 0;

    > * {
      min-width: 0;
    }
  }
}

/* fixed-size SVGs and videos pasted into HTML and text modules */
:is(.fl-module-html, .fl-rich-text) :is(svg, video) {
  max-width: 100%;
  height: auto;
}

/* long URLs and words in tables and text */
:is(.fl-module-html, .fl-rich-text) {
  overflow-wrap: break-word;

  table {
    max-width: 100%;
  }

  :is(td, th) {
    overflow-wrap: anywhere;
  }
}

/* Last resort: clip anything that still pokes out rather than letting the
   page scroll sideways. `clip` doesn't create a scroll container (unlike
   `hidden`), so the sticky header keeps working. */
html,
body {
  overflow-x: clip;
}

/* keep shadow buttons from being clipped by BB's row stacking context */
body:not(.fl-builder-edit) .fl-row-content-wrap:has([class*="button--shadow-"]) {
  z-index: 0;
}

.fl-rich-text {
  p {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  :is(ul, ol) > li {
    padding-bottom: 8px;

    &:last-child {
      padding-bottom: 0px;
    }
  }
}