/* Personalizações opcionais por site, ligadas por `CUSTOM_*` no .env (catálogo no Centralizador).
   Arquivo próprio, e carregado por TODOS os layouts, porque cada skin carrega só o seu
   `skin-*.css` — regra posta no `fix.css` valeria só na skin complete e falharia calada nas
   outras quatro. */

/* CUSTOM_VEHICLE_TITLE_UPPERCASE — é APRESENTAÇÃO de propósito: o texto real fica intacto, então
   compartilhamento, `alt` e Schema não saem gritando. */
body.has-uppercase-title .card-content__title h3,   /* card, skins complete e basic (mesmo partial vehicle-card.php) */
body.has-uppercase-title .vehicle-title,            /* página do veículo, skin complete */
body.has-uppercase-title .st-card__name,
body.has-uppercase-title .cl-card__name,
body.has-uppercase-title .pr-card__name,
body.has-uppercase-title .tb-card__name,            /* cards das 4 skins */
body.has-uppercase-title .st-row__name,
body.has-uppercase-title .pr-row__name,
body.has-uppercase-title .tb-row__name,             /* modo lista (studio, prestige, turbo) */
body.has-uppercase-title .st-vehicle__name,
body.has-uppercase-title .cl-veh__name,
body.has-uppercase-title .pr-veh__name,
body.has-uppercase-title .tb-veh__name {            /* página do veículo nas 4 skins */
    text-transform: uppercase;
}

/* CUSTOM_UPPERCASE_HEADINGS — títulos de seção e de página (cartão 849, pedido do KD:
   "colocar tudo em maiúsculo", com o print apontando "Veículos em Destaque"). Também é
   APRESENTAÇÃO: o H1/H2 servido continua com a grafia normal, então o que a IA e o buscador
   leem (e o Schema) não sai gritando — mesma decisão do título do veículo. */
body.has-uppercase-headings .section-heading h1,
body.has-uppercase-headings .section-heading h2,      /* complete/basic */
body.has-uppercase-headings .home-intro h1,           /* bloco de apresentação da home */
body.has-uppercase-headings .st-hero__title,
body.has-uppercase-headings .st-section__title,
body.has-uppercase-headings .st-about__title,
body.has-uppercase-headings .st-faq__title,
body.has-uppercase-headings .st-reg__title,
body.has-uppercase-headings .st-contact__title,       /* studio */
body.has-uppercase-headings .cl-hero__title,
body.has-uppercase-headings .cl-section__title,
body.has-uppercase-headings .cl-about__title,         /* classic */
body.has-uppercase-headings .pr-hero__title,
body.has-uppercase-headings .pr-section__title,
body.has-uppercase-headings .pr-about__title,
body.has-uppercase-headings .pr-faq__title,
body.has-uppercase-headings .pr-reg__title,
body.has-uppercase-headings .pr-contact__title,       /* prestige */
body.has-uppercase-headings .tb-hero__title,
body.has-uppercase-headings .tb-section__title,
body.has-uppercase-headings .tb-about__title,
body.has-uppercase-headings .tb-faq__title,
body.has-uppercase-headings .tb-reg__title,
body.has-uppercase-headings .tb-contact__title {      /* turbo */
    text-transform: uppercase;
}

/* CUSTOM_UPPERCASE_CARD_INFO — a linha de infos do card ("25/25 • 8.846 km • Flex"), 2ª seta
   do print. Inclui o formato "Rótulo: valor" da skin basic e o modo lista das skins novas. */
body.has-uppercase-card-info .car-card__meta,
body.has-uppercase-card-info .car-specs--basic,
body.has-uppercase-card-info .car-detail--icons p,    /* complete/basic */
body.has-uppercase-card-info .st-card__specs,
body.has-uppercase-card-info .st-row__specs,          /* studio */
body.has-uppercase-card-info .cl-card__meta,          /* classic */
body.has-uppercase-card-info .pr-card__meta,
body.has-uppercase-card-info .pr-row__meta,           /* prestige */
body.has-uppercase-card-info .tb-card__specs,
body.has-uppercase-card-info .tb-row__specs {         /* turbo */
    text-transform: uppercase;
}

/* CUSTOM_UPPERCASE_CARD_CTA — os BOTÕES de ação do card ("+ detalhes" e, quando o Credere
   está ligado, "Financiar"), que moram juntos no `partials/vehicle-card-cta`.

   Faltava: com o título e as infos em maiúscula e só o botão em minúscula, o card ficava com
   cara de conserto pela metade — foi o que o KD apontou. É parte própria (e não um pedaço do
   `card_info`) porque botão não é info: quem quer só a linha de dados em caixa alta não
   deveria levar o botão junto. A mestra `CUSTOM_UPPERCASE_ALL` liga as duas.

   ⚠️ Escopo deliberado: SÓ os botões do card. Os demais do site — "Enviar" dos formulários,
   "Veja o estoque completo", WhatsApp — ficam de fora; uppercase neles é outro pedido, com
   outro alcance, e ninguém pediu. */
body.has-uppercase-card-cta .card-content .btn,       /* complete/basic: "+ detalhes", "Financiar" */
body.has-uppercase-card-cta .cl-card__cta,            /* classic */
body.has-uppercase-card-cta .pr-card__cta {           /* prestige */
    text-transform: uppercase;
}

/* CUSTOM_FILTERS_OPEN — filtros já abertos no MOBILE (no desktop eles nunca colapsam).
   Quem abre é a view, pondo `active` no accordion: forçar por CSS deixaria o botão de
   fechar sem efeito, e o cliente perderia a possibilidade de recolher.
   Aqui só o sinal visual: o "+" do cabeçalho nasce como "−". */
body.has-filters-open .filters-heading .accordion-toggle {
    font-size: 0;                     /* esconde o "+" do HTML sem mexer na view */
}
body.has-filters-open .filters-heading .accordion-toggle::after {
    content: "\2212";                 /* − */
    font-size: 1rem;
}

/* CUSTOM_HEADER_STACKED — topo em DUAS faixas: contatos em cima, menu embaixo, os dois à
   esquerda. Formato de loja que quer o telefone e as redes em evidência acima da navegação
   (referência: romaspmultimarcas, que fazia isso editando a view à mão).

   ⚠️ Escopado em `body.skin--complete`: é a única aparência com o arranjo "logo + bloco de
   menu numa linha" que esta regra reorganiza. A `basic` já tem duas faixas por desenho, e as
   outras quatro têm cabeçalho próprio — e nem carregam este arquivo por acaso: ele é carregado
   pelos cinco layouts justamente para uma regra nunca falhar calada numa skin.

   ⚠️⚠️ **`flex-basis: 100%` sem `flex-wrap` no container NÃO quebra linha** — foi o cartão 960,
   em que o topo da basic ficava cortado no celular por causa disso. Por isso o `flex-wrap` vem
   junto, na mesma regra, e não numa linha que alguém possa mover depois.

   Escopo em min-width:65em (= onde o topo ainda é uma barra). Abaixo disso ele vira hambúrguer
   + painel deslizante e "duas faixas" não quer dizer nada; mexer lá quebraria o menu mobile. */
@media only screen and (min-width: 65em) {
    body.skin--complete.has-header-stacked .header__menu {
        flex-wrap: wrap;
        row-gap: 10px;
        justify-content: flex-start;
    }
    /* Contatos primeiro, ocupando a linha inteira. */
    body.skin--complete.has-header-stacked .header__bar-top {
        order: 1;
        flex: 0 0 100%;
        width: 100%;
        justify-content: flex-start;
    }
    /* Menu na linha de baixo. */
    body.skin--complete.has-header-stacked .menu-navigation {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
    }
    body.skin--complete.has-header-stacked .menu-navigation ul:not(.submenu) {
        justify-content: flex-start;
    }
    /* A busca, quando o cliente a mantém no cabeçalho, fecha as duas faixas. */
    body.skin--complete.has-header-stacked .search {
        order: 3;
    }
}

/* CUSTOM_HEADER_SOCIAL_MOBILE — ícones de WhatsApp e redes no topo do CELULAR, ao lado do ☰.
   Por padrão o topo mobile é só logo + ☰ e as redes ficam no rodapé (cartão 973, Rui Car: "no
   celular o Instagram só aparece lá embaixo").

   Só os ÍCONES (`li.header__social`): o telefone por extenso e a busca seguem escondidos, não
   cabem ao lado do logo numa tela de 360px.

   ⚠️ Precisa vencer o `.hide-xl`, que é `display:none!important` abaixo de 64em — por isso o
   `!important` e a classe dupla aqui.
   ⚠️ Abaixo de 56em o `.header__menu` tem `width:95px` e `row-reverse` (é o que põe o ☰ na
   ponta): a lista já fica à esquerda do ☰, mas precisa de largura para existir. */
@media only screen and (max-width: 64em) {
    body.skin--complete.has-header-social-mobile .header__bar-top li.header__social.hide-xl {
        display: inline-block !important;
        visibility: visible;
        width: auto;
    }
    body.skin--complete.has-header-social-mobile .header__menu {
        width: auto;
        flex: 0 0 auto;
        gap: 10px;
    }
    body.skin--complete.has-header-social-mobile .header__bar-top {
        width: auto;
    }
    body.skin--complete.has-header-social-mobile .header__bar-top ul {
        gap: 10px;
        margin: 0;
        flex-wrap: nowrap;
    }
    body.skin--complete.has-header-social-mobile .header__bar-top ul li {
        margin-left: 0;
    }
    body.skin--complete.has-header-social-mobile .open-panel {
        width: auto;
    }
}

/* CUSTOM_CARD_BUTTON — botão extra no card do veículo.

   ⚠️ **Nenhuma COR aqui, de propósito.** A primeira versão desta regra cravava o verde do
   WhatsApp, e a medição do site que originou o pedido (romaspmultimarcas) mostrou o contrário
   do que se supunha: lá o botão de WhatsApp usa a cor do TEMA e o verde é o do financiamento.
   Cravar cor inverteria as duas naquele site. Agora a cor vem de `CUSTOM_CARD_BUTTON_COLOR`,
   num `style` inline escrito pela view, porque ela é POR SITE e este arquivo é servido igual
   para a frota inteira.

   O que fica aqui é só a FORMA e o caso SEM cor escolhida: fundo da marca e a tinta legível que
   o gerador já calcula para ela. Quando há cor escolhida, a view escreve fundo E tinta no
   `style`, usando o `tintaLegivel()` — senão um amarelo claro viraria botão branco no branco,
   que é o defeito que já custou 8 sites (ver a 168ª leva). */
.btn--card-custom {
    background-color: var(--main-primary-color);
    color: var(--main-primary-color-ink, #fff);
    border: none;
    text-align: center;
}
.btn--card-custom:hover {
    filter: brightness(0.92);
}

/* CUSTOM_BANNER_BUTTON: faixa com botão logo abaixo do banner (cartão 990).
   Mesma regra do botão do card: nenhuma COR cravada. Sem cor escolhida, a da marca e a tinta
   que o gerador já calcula; com cor, a view escreve fundo E tinta no `style`. A faixa em si usa
   o fundo e o texto da página, para não parecer um bloco enxertado entre o banner e o conteúdo. */
.banner-cta {
    background-color: var(--main-bg-color, #fff);
    color: var(--main-bg-color-ink, #222);
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, .08));
}
.banner-cta__wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    padding-top: 14px;
    padding-bottom: 14px;
    text-align: center;
}
.banner-cta__texto {
    margin: 0;
    font-size: 1.05em;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.banner-cta__btn,
.btn--vehicle-custom {
    background-color: var(--main-primary-color);
    color: var(--main-primary-color-ink, #fff);
    border: none;
    text-align: center;
}
.banner-cta__btn { white-space: nowrap; }
.banner-cta__btn:hover,
.btn--vehicle-custom:hover {
    filter: brightness(0.92);
}

/* Faixa de chamadas com foto CONFIGURADA pela loja (1.22.0, cartão 988), no lugar da faixa de
   sempre. Mesmo desenho dela (foto cobrindo, véu escuro, texto branco, a foto inteira clicável),
   em 1 a 3 colunas lado a lado no desktop e empilhadas no celular. */
.ctas-rodape {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin-top: 20px;
}
.ctas-rodape__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-secondary-color, #333);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
}
/* O véu só onde há texto: numa chamada só com foto ele apagaria a foto (ver o partial). */
.ctas-rodape__item:not(.ctas-rodape__item--so-foto)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .6);
    transition: .4s;
}
.ctas-rodape__item:hover::before {
    background-color: rgba(0, 0, 0, .5);
}
.ctas-rodape__link {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4em 2em;
    color: #fff;
    text-decoration: none;
}
.ctas-rodape__link > * {
    position: relative;
    z-index: 3;
}
/* A foto inteira é clicável, como na faixa antiga (fix.css, "stretched link"). */
a.ctas-rodape__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}
.ctas-rodape__link h4 { margin: 0; color: #fff; }
.ctas-rodape__link p { margin: 0; color: #fff; overflow-wrap: anywhere; }
@media only screen and (max-width: 64em) {
    .ctas-rodape { flex-direction: column; }
    .ctas-rodape__item { min-height: 240px; }
}