/* Thushara Builds — site frame: the centred wordmark header and the footer note. */

.tb-header {
  padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  text-align: center;
}

.tb-brand__mark {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--wp--custom--radius--sm);
  background-color: var(--wp--preset--color--accent);
  box-shadow: var(--wp--custom--shadow--brand);
  color: var(--wp--preset--color--contrast);
  transition: transform var(--wp--custom--duration--base)
    var(--wp--custom--easing--emphasis);
}

.tb-brand__mark .tb-icon {
  inline-size: 60%;
  block-size: 60%;
}

.tb-brand:hover .tb-brand__mark {
  transform: rotate(-8deg) scale(1.08);
}

.tb-brand__name {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: var(--wp--custom--tracking--wider);
  text-transform: uppercase;
}

/* Parent-class prefix so this beats core's later-printed link element styles. */
.tb-brand .tb-brand__name a,
.tb-brand .tb-brand__name a:hover {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.tb-footer {
  max-inline-size: var(--wp--custom--sheet-width);
  margin-inline: auto;
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
  text-align: center;
}

.tb-footer__note {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxs);
  line-height: 1.5;
  color: var(--wp--preset--color--subtle);
}

/* Below 480px the design drops the page gutter and the footer needs its own. */
@media (max-width: 30rem) {
  .tb-header {
    padding-block-start: var(--wp--preset--spacing--60);
  }

  .tb-footer {
    padding-inline: var(--wp--preset--spacing--90);
  }
}