/*
 * Q1Store — brand theme for the public site (q1store.me).
 *
 * Layers on top of `assets/css/rede5.css`, which is the shared public-site
 * theme: it defines the `r5-*` component classes and the `:root` palette
 * tokens. This file is loaded only for this brand (see Config\Sites -> styles)
 * and is scoped to `body.site-q1store`, so it cannot leak into the other
 * brands or into the admin panel.
 *
 * The palette comes from the brand mark (blue #2b5cff over the deep navy
 * #0e1a45), with a single warm accent (#ff7a1a) reserved for the highlighted
 * plan and the QR seal. Text and button roles use #2b5cff (~5:1 on white,
 * WCAG AA); the brighter blue of the mark is only used on dark surfaces,
 * where it clears AA comfortably.
 *
 * Everything below is ADDITIVE: the components the other brands already use
 * (`.r5-hero`, `.r5-card`, `.r5-section`, `.r5-btn*`) are reused as they are,
 * and only the new blocks this brand introduces get their own rules.
 */

body.site-q1store {
    --r5-blue-900: #0e1a45;   /* hero gradient start, footer */
    --r5-blue-700: #1c3fd6;   /* hover states */
    --r5-blue-600: #2b5cff;   /* primary button, links, icons (AA on white) */
    --r5-q1s-accent: #ff7a1a; /* decorative only: highlighted plan, QR seal */
    --r5-q1s-ink: #0b1436;
}

/* Header ------------------------------------------------------------------ */

/* Duas acoes no cabecalho ("Comecar gratis" e "Falar com vendas"): elas vem
   de `header_actions` na config e sao renderizadas por layouts/public.php.
   O cabecalho da Q1Store nao usa o botao unico do painel. */
body.site-q1store .r5-header-actions .r5-btn {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

body.site-q1store .r5-header .r5-logo {
    height: 40px;
}

body.site-q1store .r5-footer .r5-logo {
    height: 48px;
    background: transparent;
    padding: 0;
    border-radius: 12px;
}

body.site-q1store .r5-card-icon {
    background: rgba(43, 92, 255, 0.12);
}

body.site-q1store .r5-hero::after {
    background: radial-gradient(circle, rgba(255, 122, 26, 0.32), transparent 62%);
}

/* Faixa de atalhos -------------------------------------------------------- */

.r5-shortcuts {
    background: #fff;
    border-bottom: 1px solid var(--r5-slate-200);
}

.r5-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1.35rem 0.75rem;
    text-align: center;
    color: var(--r5-slate-900);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--ch-radius);
    transition: var(--ch-transition);
}

.r5-shortcut:hover,
.r5-shortcut:focus-visible {
    color: var(--r5-blue-700);
    background: var(--r5-slate-50);
}

.r5-shortcut i {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: rgba(43, 92, 255, 0.1);
    color: var(--r5-blue-600);
}

/* Grade de recursos ------------------------------------------------------- */

.r5-feature-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--r5-slate-200);
    border-radius: var(--ch-radius);
    overflow: hidden;
    box-shadow: var(--ch-shadow-sm);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.r5-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ch-shadow);
    border-color: rgba(43, 92, 255, 0.35);
}

.r5-feature-media {
    height: 132px;
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--r5-blue-900), var(--r5-blue-600));
}

.r5-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r5-feature-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.r5-feature-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.r5-feature-body p {
    color: var(--r5-slate-600);
    font-size: 0.94rem;
    flex: 1;
}

.r5-feature-link {
    font-weight: 600;
    color: var(--r5-blue-600);
    text-decoration: none;
    font-size: 0.92rem;
}

.r5-feature-link:hover {
    text-decoration: underline;
}

/* Planos ------------------------------------------------------------------ */

.r5-plan {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--r5-slate-200);
    border-radius: var(--ch-radius);
    padding: 1.6rem;
    box-shadow: var(--ch-shadow-sm);
}

.r5-plan-featured {
    border-color: var(--r5-q1s-accent);
    box-shadow: 0 12px 28px rgba(255, 122, 26, 0.16);
}

.r5-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.r5-plan-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.r5-plan-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--r5-q1s-accent);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    white-space: nowrap;
}

.r5-plan-price {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--r5-slate-900);
    margin-bottom: 0.15rem;
}

.r5-plan-period {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--r5-slate-600);
}

.r5-plan-text {
    color: var(--r5-slate-600);
    font-size: 0.9rem;
    margin: 0.75rem 0 1rem;
}

.r5-plan-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    flex: 1;
    display: grid;
    gap: 0.55rem;
}

.r5-plan-list li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--r5-slate-600);
    font-size: 0.9rem;
}

.r5-plan-list i {
    color: #16a34a;
    margin-top: 0.15rem;
}

.r5-plans-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--r5-slate-600);
    margin-top: 2rem;
}

/* Tabela comparativa ------------------------------------------------------ */

.r5-plan-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--r5-slate-200);
    border-radius: var(--ch-radius);
    background: #fff;
    box-shadow: var(--ch-shadow-sm);
}

/* Foco visivel na area rolavel: sem isso o teclado nao consegue alcancar as
   colunas que ficam fora da tela no celular (WCAG 2.2 AA). */
.r5-plan-table-wrap:focus-visible {
    outline: 3px solid var(--r5-blue-600);
    outline-offset: 2px;
}

.r5-plan-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.r5-plan-table th,
.r5-plan-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--r5-slate-200);
    text-align: center;
    vertical-align: middle;
}

.r5-plan-table thead th {
    background: var(--r5-slate-50);
    color: var(--r5-slate-900);
    font-weight: 700;
    white-space: nowrap;
}

.r5-plan-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--r5-slate-900);
    white-space: nowrap;
}

.r5-plan-table tbody tr:last-child th,
.r5-plan-table tbody tr:last-child td {
    border-bottom: 0;
}

.r5-plan-table .r5-plan-table-yes {
    color: #16a34a;
    font-size: 1.05rem;
}

.r5-plan-table .r5-plan-table-no {
    color: var(--r5-slate-200);
    font-size: 1.05rem;
}

.r5-plan-table .r5-plan-table-text {
    color: var(--r5-slate-600);
}

/* Faixa de CTA ------------------------------------------------------------ */

.r5-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--r5-blue-900) 0%, var(--r5-blue-700) 100%);
    color: #fff;
    padding: 3.5rem 0;
}

.r5-cta::after {
    content: "";
    position: absolute;
    inset: -60% -10% auto auto;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(255, 122, 26, 0.3), transparent 62%);
    pointer-events: none;
}

.r5-cta h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.r5-cta p {
    color: rgba(255, 255, 255, 0.82);
}

.r5-cta-note {
    color: rgba(255, 255, 255, 0.7);
}

/* =========================================================================
 * HOME — composicao do mockup do dono
 *
 * As secoes `store_*` (public/sections/store_*.php) desenham a home do
 * q1store.me. O titulo delas e o `q1s-h2` do DS; o destaque dentro dele e o
 * `q1s-hl` nas secoes claras e o `q1s-hl-inverse` no hero escuro.
 * ========================================================================= */

/* Hero --------------------------------------------------------------------- */

/* Espaco extra embaixo: a faixa de atalhos sobe e cobre a emenda. O `h1`
   do hero e o `q1s-display` do DS — o `.r5-hero h1` compartilhado nao manda
   aqui, porque o DS carrega depois do `rede5.css`. */
body.site-q1store .r5-hero-store {
    padding-bottom: 6rem;
}

@media (min-width: 768px) {
    body.site-q1store .r5-hero-store {
        padding-bottom: 8rem;
    }
}

/* A sobrancelha, as checagens, a composicao de aparelhos e os chips vivem no
   DS (`q1s-hero__*`, `q1s-hero-visual`, `q1s-hero-chip`): mesma composicao,
   vocabulario do sistema. */

/* A ilustracao do hero: largura cheia da coluna, travada em 620px. Nos
   cards de recurso a ilustracao preenche a midia 16/9 (`q1s-resource__media`
   e do DS; o tamanho do desenho e especifico desta pagina). */
body.site-q1store .r5-art {
    display: block;
    width: 100%;
    height: auto;
}

body.site-q1store .r5-art-hero {
    max-width: 620px;
    margin: 0 auto;
}

body.site-q1store .q1s-resource__media .r5-art {
    aspect-ratio: 16 / 9;
}

/* Faixa de atalhos --------------------------------------------------------- */

body.site-q1store .r5-strip {
    position: relative;
    z-index: 3;
    margin-top: -4rem;
}

@media (min-width: 768px) {
    body.site-q1store .r5-strip {
        margin-top: -5.5rem;
    }
}

/* O cartao, os itens e os icones da faixa vivem no DS (`q1s-strip__*`):
   mesma composicao, vocabulario do sistema. Aqui fica so a sobreposicao na
   emenda do hero, que e posicionamento especifico desta pagina. */

/* Grade de recursos e motivos ------------------------------------------------ */

/* Na variante `wide` (pagina /recursos) o texto fica na coluna da direita,
   alinhado pela base do titulo. */
body.site-q1store .q1s-section-head--split .q1s-section-head__aside {
    padding-bottom: 0.35rem;
}

/* Os cards de recurso, os motivos, os segmentos e os pontos do CTA vivem no
   DS (`q1s-resource`, `q1s-reason`, `q1s-seg*`, `q1s-cta-points`): mesma
   composicao, vocabulario do sistema. */

/* O grafico ao lado dos pontos do CTA: tamanho fixo, o resto e do DS. */
body.site-q1store .q1s-cta-points .r5-art {
    flex: none;
    width: 56px;
    height: 56px;
}

/* Cabecalho e rodape: assinatura completa ---------------------------------- */

/* O mockup mostra a assinatura COMPLETA ("Q1Store" + "QR • CATALOGO • LOJA"),
   nao so o simbolo quadrado. O simbolo continua sendo o favicon e a imagem de
   compartilhamento (`q1store.svg`), entao a assinatura entra como BACKGROUND
   do link da marca e do bloco do rodape: e decorativa, nao entra na arvore de
   acessibilidade, e o nome do link continua vindo do `alt` da imagem.

   O caminho e relativo (`../../img/...`: sobe de `css/brands/` para
   `assets/`) de proposito — resolve a partir desta folha, sem depender da
   baseURL da requisicao. */
body.site-q1store .r5-header nav > a:first-child {
    background: url("../../img/sites/q1store-wordmark.svg") no-repeat 46px center / auto 30px;
    padding-right: 132px;
}

body.site-q1store .r5-footer .r5-logo {
    background: url("../../img/sites/q1store-wordmark.svg") no-repeat 56px center / auto 34px;
    padding-right: 150px;
    max-width: 100%;
}