/**
 * Marketing site (website_app) — foco por teclado nos CTAs.
 * Anel azul alinhado ao restante do site (app.min: outline #007bff); halo branco fino no hero escuro para contraste.
 */

/*
 * Skip link (#main-content): o foco deve cair num alvo mínimo, não em <main>.
 * Com tabindex no landmark inteiro, Windows Narrator desenha um retângulo à volta de todo o main.
 */
body main {
    position: relative;
}

.website-main-skip-target {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.website-main-skip-target:focus,
.website-main-skip-target:focus-visible {
    outline: none;
}

/* Ghost/outline CTAs no hero e zonas escuras */
.btn.btn-cta:focus-visible,
a.btn.btn-cta:focus-visible {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(0, 123, 255, 0.95) !important;
    outline: 3px solid #007bff !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) !important;
}

/* Roxos — fundo sólido; anel de foco azul (sem âmbar) */
.btn.btn-cta-purple:focus-visible,
a.btn.btn-cta-purple:focus-visible,
.btn.btn-purple:focus-visible,
a.btn.btn-purple:focus-visible {
    background: #a03eea !important;
    background-color: #a03eea !important;
    color: #fff !important;
    opacity: 1 !important;
    border-color: #007bff !important;
    --bs-btn-bg: #a03eea;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #007bff;
    --bs-btn-hover-bg: #912ae8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #007bff;
    --bs-btn-focus-shadow-rgb: 0, 123, 255;
    outline: 3px solid #007bff !important;
    outline-offset: 3px;
    box-shadow: none !important;
}

/* Skip links — homepage pode ter dois; empilhar quando visíveis */
.skip-links-cluster > .skip-to-main:not(:focus-visible):not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    left: -10000px !important;
    top: auto !important;
}

.skip-links-cluster > .skip-to-main:focus-visible {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background-color: #1976d2 !important;
    color: #fff !important;
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
    z-index: 10002 !important;
}

.skip-links-cluster > .skip-to-home-sections:focus-visible {
    top: 52px !important;
}

/* Banner CTA — mesmo foco nos H2 das páginas marketing */
#cta-banner-heading {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: top;
}

#cta-banner-heading:focus,
#cta-banner-heading:focus-visible {
    outline: 3px solid #007bff !important;
    outline-offset: 4px;
    border-radius: 4px;
}

/*
 * Homepage: H1/H2 com tabindex nos marcos das secções.
 * Como headings são display:block, Edge/Narrator podem desenhar o retângulo de foco
 * à largura inteira da coluna (área “vazia” à direita do texto). Inline-block
 * aproxima o highlight ao conteúdo visível — mesmo padrão que #cta-banner-heading.
 * Nota: navegação por *landmark* na <section> pode continuar a usar o retângulo da
 * região completa (comportamento do leitor de ecrã, não do outline destes títulos).
 */
body.page-website-home #hero-heading,
body.page-website-home section.spacing-section h2.title-default[tabindex="0"] {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: top;
}

body.page-website-home #hero-heading:focus,
body.page-website-home #hero-heading:focus-visible,
body.page-website-home section.spacing-section h2.title-default[tabindex="0"]:focus,
body.page-website-home section.spacing-section h2.title-default[tabindex="0"]:focus-visible {
    outline: 3px solid #007bff !important;
    outline-offset: 4px;
    border-radius: 4px;
}