/* ==========================================================
   gk-shared.css — Overrides compartilhados por TODAS as páginas
   Scroll-fix · Montserrat global · Nav · Footer
   ========================================================== */

/* ── Tokens de design — paleta monocromática ─────────────── */
:root {
  --gk-black:      #000000;
  --gk-surface:    #0a0a0a;
  --gk-text:       #f1f1f1;
  --gk-text-muted: rgba(241, 241, 241, 0.55);
  --gk-border:     rgba(255, 255, 255, 0.85);
  --gk-border-sub: rgba(255, 255, 255, 0.18);
  --gk-focus-ring: rgba(255, 255, 255, 0.35);
  /* Redefinição local: --ink-red não existe globalmente; usar sempre os tokens acima */
}

/* ── Scroll fixes for offline viewing ────────────────────── */

html, body {
  overflow: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
  /* Não usar scroll-behavior: auto !important — impede window.scrollTo({ behavior: "smooth" }) */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Canvas da página (evita faixas laterais cinzentas do tema base / browser) */
html,
body.body-2 {
  background-color: var(--gk-black, #000) !important;
}

/*
 * Âncoras e navbar fixa (~112px):
 * - scroll-padding: ajuda na navegação inicial com hash (ex.: abrir index.html#… a partir de outra página).
 * - scroll-margin no alvo: reforço para scrollIntoView / snap.
 * Cliques na mesma página são corrigidos em gk-anchor-offset.js (o tema base ignora por vezes o padding).
 */
html,
body {
  scroll-padding-top: 112px;
}

#About-Section,
#gk-booking-anchor {
  scroll-margin-top: 112px;
}

body, .wrapper, main, #__next, #app, .page, .content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.loader, .preloader, .loading, [class*="loader"], [class*="preloader"] {
  display: none !important;
  opacity: 0 !important;
}

.word-inner, .char, .line, [data-aos], [data-scroll],
.hero-text span, .hero-fade, [class*="hero"] span {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.translate-y-full, .translate-x-full, .-translate-y-full, .-translate-x-full,
.translate-y-1\/2, .-translate-y-1\/2, .translate-y-\[100\%\], .translate-y-\[110\%\] {
  transform: none !important;
}

.opacity-0, [class*="opacity-0"] {
  opacity: 1 !important;
}

.scale-0, .scale-50, .scale-75 {
  transform: none !important;
}

html.lenis, html.lenis-smooth,
body.lenis, body.lenis-smooth,
.lenis-wrapper, .lenis-content,
[data-lenis-prevent], [data-scroll-container] {
  overflow: visible !important;
  height: auto !important;
}

body.flex.items-center,
body.flex.justify-center {
  align-items: flex-start !important;
  min-height: 100vh;
  height: auto !important;
}

main, #__next, #__nuxt, #app, .main-content {
  overflow: visible !important;
  height: auto !important;
}

/* ── Nav / Menu — Montserrat overrides ───────────────────── */

.navbar-2 .nav-menu .menu-heading-small,
.menu-div-mobile .menu-heading-small-mobile {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Cor branca do menu (refator SEO trocou <h1> por <span>; <h1>{color:var(--off-white)}
   no tema base não é mais herdado, então repomos a cor explicitamente nos <a>
   e nos spans para evitar fallback do browser para link azul / visited roxo). */
.navbar-2 .menu-link,
.navbar-2 .menu-link:link,
.navbar-2 .menu-link:visited,
.navbar-2 .menu-link:hover,
.navbar-2 .menu-link:focus,
.navbar-2 .menu-link:active,
.navbar-2 .menu-link.w--current,
.navbar-2 .menu-link .menu-heading-small,
.navbar-2 .link-block-to-home,
.navbar-2 .link-block-to-home:link,
.navbar-2 .link-block-to-home:visited,
.navbar-2 .link-block-to-home:hover,
.navbar-2 .link-block-to-home:focus,
.navbar-2 .link-block-to-home:active,
.navbar-2 .link-block-to-home .gk-brand-header,
.menu-div-mobile .menu-link-mobile,
.menu-div-mobile .menu-link-mobile:link,
.menu-div-mobile .menu-link-mobile:visited,
.menu-div-mobile .menu-link-mobile:hover,
.menu-div-mobile .menu-link-mobile:focus,
.menu-div-mobile .menu-link-mobile:active,
.menu-div-mobile .menu-link-mobile.w--current,
.menu-div-mobile .menu-link-mobile .menu-heading-small-mobile,
.menu-div-mobile .heading-11,
.bigtestnav .nav-holder-div2 .nav-heading-2 {
  color: var(--off-white, #f1f1f1) !important;
  text-decoration: none !important;
}

/* Spans que substituíram <h1>/<h2> precisam comportar-se como bloco em
   contextos onde o layout dependia do display:block default do heading. */
.menu-div-mobile span.heading-11,
.bigtestnav .nav-holder-div2 span.nav-heading-2 {
  display: block !important;
}

/* Espaçamento entre itens do menu desktop (Portfólio / Lives / Contato não colados) */
.navbar-2 .nav-menu.w-nav-menu > a.menu-link.w-inline-block {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  box-sizing: border-box !important;
}

.navbar-2 .nav-menu.w-nav-menu > a.menu-link.margin-right {
  margin-right: 1rem !important;
}

/* Menu mobile: respiro entre células da grelha */
.menu-div-mobile .w-layout-grid.grid-2 {
  grid-column-gap: 1.25rem !important;
  grid-row-gap: 0.85rem !important;
}

.gk-brand-header,
.heading-11,
.nav-heading-2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ── Montserrat global — fonte padrão do projeto ─────────── */

.body-2 h1, .body-2 h2, .body-2 h3,
.body-2 h4, .body-2 h5, .body-2 h6,
.body-2 p, .body-2 a, .body-2 div,
.body-2 span, .body-2 button,
.body-2 input, .body-2 textarea,
.body-2 label, .body-2 li {
  font-family: 'Montserrat', sans-serif !important;
}

/* ── Títulos de secção ───────────────────────────────────── */

.mta-title,
.heading-13,
.heading-14,
.heading-8,
.get-it-right,
h2.rl-heading-style-h2,
.rl-heading-style-h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ── Bloco Sobre o artista ───────────────────────────────── */

.about-text-div-duplicate-copy .about-description-heading2 {
  font-weight: 600 !important;
}

.about-text-div-duplicate-copy .temp-paragraph + .temp-paragraph {
  margin-top: 1em;
}

/* ── Textos de corpo ─────────────────────────────────────── */

.rl-text-style-regular,
.rl-text-style-medium,
.paragraph-3,
.paragraph-3-copy {
  font-style: normal !important;
}

/* ── FAQ: perguntas ──────────────────────────────────────── */

.rl_faq6_question-text {
  font-weight: 600 !important;
}

/* ── Acessibilidade: oculta visualmente mas mantém para leitores de tela e bots ── */

.gk-sr-only {
  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;
}

/* ── Heading hero das páginas internas (Depoimentos, Portfólio, Lives, Contato) ── */

.heading-16 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(32px, 7vw, 80px) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #f1f1f1 !important;
  margin: 0 !important;
}

/* ── Hero interno (título de página) — Lives, Portfólio, Depoimentos, etc. */

.section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30vh;
  padding-top: 112px;
  background-color: #000;
}

@media screen and (max-width: 991px) {
  .section {
    min-height: 22vh;
  }
}

/* ── CTA Agendamento — componente compartilhado ─────────── */
/*    Usado em: artista-*.html, portfolio.html, depoimentos.html, lives.html */

.gk-portfolio-cta {
  position: relative;
  z-index: 10;
  height: 50vh;
  min-height: 280px;
  background-color: #0a0a0a;
  background-image: linear-gradient(rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.76)),
    url("gk-about-solictar-agendamento.avif");
  background-position: 0 0, 50% 30%;
  background-size: auto, cover;
  background-repeat: no-repeat;
}

.gk-portfolio-cta:hover {
  background-image:
    linear-gradient(135deg, rgba(95, 6, 6, 0.44), transparent 75%),
    linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),
    url("gk-about-solictar-agendamento.avif");
  background-position: 0 0, 0 0, 50% 30%;
  background-size: auto, auto, cover;
}

.gk-portfolio-cta-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  background-color: transparent !important;
  background-image: none !important;
}

.gk-portfolio-cta-link:hover {
  background-color: transparent !important;
  background-image: none !important;
}

.gk-portfolio-cta-heading {
  margin: 0;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(20px, 3.5vw, 36px) !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #f1f1f1 !important;
}

@media screen and (max-width: 991px) {
  .gk-portfolio-cta { height: 40vh; min-height: 220px; }
}

@media screen and (max-width: 479px) {
  .gk-portfolio-cta { height: 35vh; min-height: 200px; }
}

/* ── Lightbox ─────────────────────────────────────────────── */

#gk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.95);
  /* grid centra apenas .gk-lb-content; botões e counter estão fora do fluxo (position:fixed) */
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}

#gk-lightbox.gk-lb-open {
  opacity: 1;
  visibility: visible;
}

/* content ocupa a célula central do grid sem competir com outros filhos */
.gk-lb-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 92vh;
  /* garante que não há overflow lateral que puxe a imagem */
  overflow: hidden;
}

.gk-lb-img {
  max-width: min(88vw, 1200px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  transition: opacity 0.15s ease;
}

/* contador: posição fixa no rodapé central — fora do fluxo grid */
.gk-lb-counter {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(241, 241, 241, 0.55);
  pointer-events: none;
  white-space: nowrap;
}

.gk-lb-btn {
  position: fixed;
  background: transparent;
  border: none;
  color: rgba(241, 241, 241, 0.65);
  cursor: pointer;
  line-height: 1;
  padding: 0.75rem;
  transition: color 0.18s;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gk-lb-btn:hover { color: #f1f1f1; }

.gk-lb-close {
  top: 1rem;
  right: 1rem;
  /* dimensão guiada pelo SVG de 22px — sem font-size que interfira */
}

.gk-lb-prev,
.gk-lb-next {
  top: 50%;
  transform: translateY(-50%);
}

.gk-lb-prev { left: 1.25rem; }
.gk-lb-next { right: 1.25rem; }

@media screen and (max-width: 479px) {
  .gk-lb-prev { left: 0.25rem; }
  .gk-lb-next { right: 0.25rem; }
  .gk-lb-close { top: 0.6rem; right: 0.6rem; }
  .gk-lb-img { max-width: 96vw; max-height: 82vh; }
}

/* ── Home: faixa dupla (lightbox sobre BG do tema) ───────── */

section.about-new .gk-portfolio-item {
  position: relative;
  cursor: zoom-in;
}

section.about-new .gk-portfolio-item img.gk-home-strip-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: auto;
}

.gk-home-portfolio-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem 2.75rem;
  position: relative;
  z-index: 2;
}

/* ── Rodapé ──────────────────────────────────────────────── */

.rl_footer3_link {
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.title-small,
.text-block-8 {
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ==========================================================
   MENU MOBILE — navbar bigtestnav + hambúrguer + overlay
   ========================================================== */

/* navbar-2 + bigtestnav: fundo semi-opaco + blur.
   O overflow:hidden no section-home1 criou um stacking context que
   quebra o backdrop-filter nativo do tema base (background:#0000 + blur).
   Forçamos background-color explícito para os dois navbars, garantindo
   visibilidade em todos os breakpoints. */
.navbar-2,
.bigtestnav {
  background-color: rgba(10, 10, 10, 0.72) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* No desktop (>991px): garantir que o menu-button-div custom fica oculto */
@media screen and (min-width: 992px) {
  .menu-button-div {
    display: none !important;
  }
}

/* Em mobile/tablet: esconde o glifo do tema base que falha (retângulo vazio) */
@media screen and (max-width: 991px) {
  .menu-button-div .icon.w-icon-nav-menu,
  .bigtestnav .w-nav-button .w-icon-nav-menu {
    font-size: 0 !important;
    color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    display: block !important;
  }

  /* Wrapper do botão: área de toque mínima + hambúrguer via ::before */
  .menu-button-div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    position: relative !important;
  }

  .menu-button-div::before {
    content: '' !important;
    display: block !important;
    width: 26px !important;
    height: 2px !important;
    background: #f1f1f1 !important;
    border-radius: 2px !important;
    box-shadow:
      0 -8px 0 #f1f1f1,
      0  8px 0 #f1f1f1 !important;
  }

  /* bigtestnav — botão de colapso equivalente */
  .bigtestnav .w-nav-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    position: relative !important;
  }

  .bigtestnav .w-nav-button::before {
    content: '' !important;
    display: block !important;
    width: 26px !important;
    height: 2px !important;
    background: #f1f1f1 !important;
    border-radius: 2px !important;
    box-shadow:
      0 -8px 0 #f1f1f1,
      0  8px 0 #f1f1f1 !important;
  }

  /* Logo: override do transform inline do JS de animação — centra na navbar */
  .navbar-2 .brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    will-change: auto !important;
  }
}

/* ── Overlay do menu mobile ─────────────────────────────── */

/* NÃO sobrepor display — o motor de animação base usa display:none por defeito
   e mostra via JS quando o botão é clicado. Só ajustamos layout interno. */
.menu-div-mobile {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(1.5rem, 6vh, 3.5rem) 1.5rem !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

/* Conteúdo interno: centralizado, largura máxima confortável */
.menu-div-mobile .menu-inner-div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 320px !important;
  gap: 0 !important;
}

/* Logo: proporcional ao ecrã */
.menu-div-mobile .image-2 {
  width: clamp(60px, 18vw, 90px) !important;
  height: auto !important;
  margin-bottom: 0.75rem !important;
}

/* Título "GRENCKELVIN" no overlay */
.menu-div-mobile .heading-11 {
  font-size: clamp(18px, 5vw, 26px) !important;
  letter-spacing: 0.15em !important;
  text-align: center !important;
  margin: 0 0 0.5rem !important;
}

/* Linha decorativa: branca (#fff) — anular vermelho/gradiente do tema base */
.menu-div-mobile .red-line-decal {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 1px !important;
  width: clamp(40px, 20vw, 80px) !important;
  margin: 0.6rem auto 1.2rem !important;
}

/* Grelha de links: centralizada */
.menu-div-mobile .w-layout-grid.grid-2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.65rem !important;
  width: 100% !important;
}

/* Links de menu: proporcionais */
.menu-div-mobile .menu-heading-small-mobile {
  font-size: clamp(14px, 4vw, 18px) !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Botão de fechar (X) — tamanho proporcional e bem posicionado */
.x-out-of-menu {
  position: absolute !important;
  top: clamp(0.75rem, 3vh, 1.25rem) !important;
  right: clamp(0.75rem, 3vw, 1.25rem) !important;
}

.x-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer !important;
}

/* Imagem do ícone X: tamanho controlado */
.x-button .image-3 {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
}

/* ==========================================================
   PALETA MONOCROMÁTICA — overrides de cor P&B globais
   ========================================================== */

/* ── Botões primários — "Falar no WhatsApp" e similares ──── */
/* Padrão: fundo preto, texto branco, borda branca */
.general-button.booking,
.gk-about-booking-submit,
a.general-button.booking {
  background-color: #000 !important;
  color: #f1f1f1 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 4px !important;
}

.general-button.booking:hover,
.gk-about-booking-submit:hover,
a.general-button.booking:hover {
  background-color: #f1f1f1 !important;
  color: #000 !important;
  border-color: #f1f1f1 !important;
}

/* ── Botão "Solicitar agendamento" (FAQ + Sobre + outras secções) ── */
/* Variante outline: fundo branco, texto e borda pretos */
a.general-button.booking[href="#gk-booking-anchor"],
.rl_faq6_heading-wrapper a.general-button.booking,
.about-text-div-duplicate-copy a.general-button.booking,
.gk-btn-outline-dark {
  background-color: #f1f1f1 !important;
  color: #0a0a0a !important;
  border: 1.5px solid #0a0a0a !important;
}

a.general-button.booking[href="#gk-booking-anchor"]:hover,
.rl_faq6_heading-wrapper a.general-button.booking:hover,
.about-text-div-duplicate-copy a.general-button.booking:hover,
.gk-btn-outline-dark:hover {
  background-color: #0a0a0a !important;
  color: #f1f1f1 !important;
  border-color: #f1f1f1 !important;
}

/* ── FAQ — ícone +/x e brilho em hover ───────────────────── */
.rl_faq6_icon,
.rl_faq6_icon svg,
.rl_faq6_icon use {
  color: #f1f1f1 !important;
}

/* Remover brilho vermelho do hover; substituir por brilho branco suave */
.rl_faq6_accordion:hover,
.rl_faq6_accordion:focus-within {
  box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.12) !important;
}

/* ── CTA "SOLICITAR AGENDAMENTO" (banner de fundo) ──────── */
/* Remover gradiente avermelhado no hover */
.gk-portfolio-cta:hover {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),
    url("gk-about-solictar-agendamento.avif") !important;
  background-position: 0 0, 50% 30% !important;
  background-size: auto, cover !important;
}

/* Reforço final: menu mobile — linha separadora sempre branca (especificidade vs. CSS do tema base) */
body.body-2 .menu-div-mobile .menu-inner-div .red-line-decal {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}