/**
 * Studio Takaya — footer.
 */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.site-footer a {
  color: var(--color-footer-link);
}

/*
 * Olivero gives .site-footer a `border-inline-start: solid var(--content-
 * left) var(--color--black)` at wide widths (core/themes/olivero/css/
 * components/footer.css) -- a 90px decorative bar meant to align with its
 * default social-bar sidebar. It's invisible here (black-on-near-black
 * against --color-footer-bg) but still occupies layout space, insetting
 * .site-footer__inner's containing block by 90px and throwing its
 * margin-inline:auto centering off by half that (45px each side) --
 * confirmed live via getBoundingClientRect. Same --content-left gutter
 * already removed for .main-content/.social-bar in nav.css; remove it here
 * too since the wireframe has no such sidebar.
 */
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-footer {
    border-inline-start: 0;
  }
}

/*
 * .site-footer__inner carries Olivero's .container class (max-width, no
 * centering) -- add the margin-inline:auto Olivero itself never sets, same
 * gap already found on .main-content__container (see nav.css). Without it
 * the whole footer hugs the left edge on any viewport wider than the
 * container's max-width.
 */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 2rem;
  margin-inline: auto;
}

/*
 * Olivero auto-assigns every region (including footer_top/footer_bottom)
 * `grid-full layout--pass--content-medium` classes -- a CSS Grid system
 * meant for narrow article-body reading width (web/core/themes/olivero/css/
 * layout/layout-content-medium.css), which insets the region's actual
 * content wrapper to a `grid-column: 3 / 13` track instead of its parent's
 * full width. Confirmed live: .region--footer_top__inner measured ~447px
 * inside a 1350px container -- which is also why the 3 footer columns
 * (brand/menu/social, each already `flex: 1` per Olivero's own
 * .region--footer_top__inner rule in layout-footer.css) never spread out:
 * flex:1 only divides up whatever narrow space the grid inset left them.
 * Same root cause/fix already used for .takaya-hero-slider in blocks.css.
 */
.region--footer_top__inner,
.region--footer_bottom__inner {
  grid-column: 1 / -1;
  width: 100%;
}

/*
 * Layout: Contact form fills the left half, full height. Brand sits top-
 * right; Navigation and Social sit side by side underneath Brand (each a
 * quarter of the total width). 4 equal column tracks make that possible --
 * contact spans all 4 rows, brand spans the right 2 columns on row 1, menu
 * and social each take one of those same 2 columns on row 2.
 */
.region--footer_top__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

#block-takayatheme-footer-contact {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

#block-takayatheme-footer-brand {
  grid-column: 3 / 5;
  grid-row: 1;
}

#block-takayatheme-footer-menu {
  grid-column: 3;
  grid-row: 2;
}

#block-takayatheme-footer-social {
  grid-column: 4;
  grid-row: 2;
}

.region--footer_bottom__inner {
  border-top: 1px solid rgb(255 255 255 / 20%);
  padding-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
}

/*
 * Footer contact form column (4th flex:1 item alongside brand/menu/social --
 * .region--footer_top__inner's flex:1 children already adapt to any item
 * count, see comment above). Inputs/textarea default to a fixed `size`-based
 * width which overflows a narrow flex column without this.
 */
#block-takayatheme-footer-contact .form-item {
  margin-block: 0.5rem;
}

#block-takayatheme-footer-contact input[type="text"],
#block-takayatheme-footer-contact input[type="email"],
#block-takayatheme-footer-contact textarea {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .region--footer_top__inner {
    grid-template-columns: 1fr;
  }

  #block-takayatheme-footer-contact,
  #block-takayatheme-footer-brand,
  #block-takayatheme-footer-menu,
  #block-takayatheme-footer-social {
    grid-column: 1;
    grid-row: auto;
  }
}