@layer reset, base, layout, components, blocks, utilities;

@layer reset {
  :where(*, *::before, *::after) { box-sizing: border-box; }
  :where(body) { margin: 0; }
  :where(img, video) { max-width: 100%; height: auto; }
  :where(button, input, textarea, select) { font: inherit; }
}
@layer base {
  :where(body, .editor-styles-wrapper) {
    overflow-wrap: break-word;
    & :where(a) { text-underline-offset: .2em; }
    & :where(:focus-visible) {
      outline: 3px solid var(--wp--preset--color--vermelho);
      outline-offset: 4px;
    }
  }
}
@layer layout {
  .gl-shell {
    width: min(calc(100% - 2 * var(--wp--preset--spacing--lg)), var(--wp--style--global--wide-size));
    margin-inline: auto;
  }
  .gl-site-header, .gl-site-footer { padding-block: var(--wp--preset--spacing--xl); }
  .gl-main { min-height: 55vh; padding-block: var(--wp--preset--spacing--2xl); }
  .gl-entry {
    margin-block-end: var(--wp--preset--spacing--xl);
    & > :where(:not(.alignwide, .alignfull)) {
      max-width: var(--wp--style--global--content-size);
      margin-inline: auto;
    }
  }
}
@layer components {
  .gl-site-name {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--headline-md);
    font-weight: 800;
    text-decoration: none;
    color: var(--wp--preset--color--cafe);
  }
  .custom-logo { width: auto; max-height: 5rem; }
  .gl-skip-link {
    position: absolute;
    inset: var(--wp--preset--spacing--md) auto auto var(--wp--preset--spacing--md);
    z-index: 100000;
    padding: var(--wp--preset--spacing--md);
    background: var(--wp--preset--color--branco);
    transform: translateY(-200%);
    &:focus { transform: none; }
  }
}
@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}