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

/* ── 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;
}

/*
 * Â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 (Webflow 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;
}

/* 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;
}

.an-tattoo-title-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 ───────────────────────────────────── */

h1.mta-title,
h1.heading-13,
h1.heading-14,
h1.heading-8,
h1.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;
}

/* ── 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;
}

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

h1.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-portfolio-grid) ────────────────────────── */

#gk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}

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

.gk-lb-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 92vh;
}

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

.gk-lb-btn {
  position: fixed;
  background: transparent;
  border: none;
  color: rgba(241, 241, 241, 0.65);
  cursor: pointer;
  line-height: 1;
  padding: 0.5rem;
  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: 1.25rem;
  right: 1.25rem;
  font-size: 2rem;
}

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

.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.75rem; right: 0.75rem; }
}

/* ── 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;
}