/*!
Theme Name: larson child
Theme URI: https://bslthemes.site/larson/
Author: beshleyua
Author URI: https://themeforest.net/user/beshleyua
Description: Larson - Architecture WordPress Theme
Version: 1.1.0
License: General Public License
License URI: http://www.gnu.org/licenses/gpl.html
Template: larson
Text Domain: larson-child
Tags: full-width-template, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, theme-options
*/

/* NÃO quebre dentro das palavras */
:where(body, .site, .entry-content, .widget, .breadcrumbs,
       .menu, .menu a, .nav, .nav a, .header, .footer,
       h1,h2,h3,h4,h5,h6, p, li, .btn, .card-title){
  word-break: normal !important;        /* evita break-all */
  overflow-wrap: break-word !important; /* só quebra se realmente precisar */
  hyphens: manual !important;           /* ou 'none' se preferir sem hifenização */
  white-space: normal !important;
}

/* Menus (garante que não parta palavras) */
:where(.menu a, .nav a, .main-navigation a){
  word-break: keep-all !important;
}

/* 1) Nunca quebre dentro das palavras */
.main-navigation a,
.menu a,
.nav a,
.breadcrumbs,
.entry-title,
h1,h2,h3,h4,h5,h6,
.btn, .button, .card-title, .widget a, .site-title {
  word-break: keep-all !important;     /* impede 'break-all' */
  overflow-wrap: normal !important;    /* não inventa quebra no meio da palavra */
  hyphens: auto !important;            /* se precisar, usa hifenização; exige lang="pt-BR" */
  white-space: normal !important;
}

/* 2) Melhora de tipografia (opcional) */
h1,h2,h3 { text-wrap: balance; }       /* títulos quebram mais 'bonito' */
p,li     { text-wrap: pretty; }


@font-face {
	font-family: "Gyst";
	src: url("assets/fonts/Gyst-Regular.woff2") format("woff2"), url("assets/fonts/Gyst-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
  font-family: "Gyst";
  src: url("assets/fonts/Gyst-Italic.woff2") format("woff2"),
       url("assets/fonts/Gyst-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gyst";
  src: url("assets/fonts/Gyst-Bold.woff2") format("woff2"),
       url("assets/fonts/Gyst-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gyst";
  src: url("assets/fonts/Gyst-BoldItalic.woff2") format("woff2"),
       url("assets/fonts/Gyst-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* COR DO SCROOL LATERAL */
:root { --brand-accent: #ffb74d; }

/* Firefox */
* {
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: var(--brand-accent) rgba(0,0,0,.12); /* thumb | track */
}

/* WebKit (Chrome, Edge, Safari desktop) */
::-webkit-scrollbar {
  width: 10px;          /* largura da barra vertical */
  height: 10px;         /* altura da barra horizontal */
}
::-webkit-scrollbar-track {
  background: rgba(0,0,0,.08);
}
::-webkit-scrollbar-thumb {
  background: var(--brand-accent);
  border-radius: 8px;
  border: 2px solid transparent;  /* cria “almofada” */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffa726;            /* leve highlight */
}

.gyst,
.heading, 
.m-title,
.card__heading,
.reviews-carousel__title,
.project-meta__item-title,
.project-designer__title,
.steps__item-title,
.services-provided__column-heading,
.services__title,
.services__item-title,
.post-sb-page__main-pic--inner .post-sb-page__heading,
.post-sb__title,
.post-sb__text h1,
.post-sb__text h2,
.post-sb__text h3,
.post-sb__text h4,
.post-sb__text h5,
.post-sb__text h6,
.comment-item__text h1,
.comment-item__text h2,
.comment-item__text h3,
.comment-item__text h4,
.comment-item__text h5,
.comment-item__text h6,
.post-related__title span,
.post-related__title a,
.comment__title,
.comment-form__title,
.quote p,
blockquote p,
.post-sb__text blockquote p,
.post-sb__text blockquote p,
.comment-item__text blockquote p,
.comment-item__text blockquote p,
.service-card__heading,
.single-service-block h2,
.contact-block__heading,
.contact-block__heading span,
.about-block__inner::before,
.article__project-text h2,
.welcome__title,
.parallax__title,
.services__title,
.services__item-title,
.slider-parallax__title,
.contact-parallax__title { 
  font-family: "Gyst"; 
  word-break: normal !important;        /* evita break-all */
  overflow-wrap: break-word !important; /* só quebra se realmente precisar */
  hyphens: manual !important;           /* ou 'none' se preferir sem hifenização */
  white-space: normal !important;
}

/* Child theme: larson-child/style.css */
@media (min-width: 1200px) {
  .about-block--columns .about-block__header{
    max-width: 240px;         /* +20px */
    flex-basis: 240px;        /* garante a largura no flex */
  }
}

/* HOME – zera o espaçamento do banner hero (Larson + Elementor) */
.home .webpage__main-slider.main-slider{
  margin-bottom: 0 !important;   /* se o tema der margem no slider */
}

.home .elementor-widget[data-widget_type="larson-hero-starter.default"],
.home .elementor-widget[data-widget_type="larson-hero-starter.default"] .elementor-widget-container{
  margin: 0 !important;          /* widget do Elementor */
  padding: 0 !important;         /* se o tema tiver padding extra */
}

/* (opcional) se ainda sobrar gap da primeira seção depois do slider */
.home .elementor-section:first-of-type{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* ============================
   HERO (header slider) — versão consolidada
   ============================ */

/* Variáveis globais */
:root{
  --hero-w: 16;                          /* largura de referência */
  --hero-h: 6;                           /* altura de referência (16:6 ≈ 2.66:1) */
  --hero-gutter: clamp(16px, 4vw, 70px); /* borda lateral: máx. 70px */
}

/* 0) O wrapper do Elementor não deve cortar sombras/setas */
.webpage__main-slider .elementor-widget-container{
  overflow: visible !important;
}

/* 1) Caixa do hero (remove vh no desktop, centraliza e limita as bordas) */
@media (min-width: 768px){
  .webpage__main-slider.main-slider{
    height: auto !important;
  }
}
.webpage__main-slider.main-slider{
  width: calc(100% - (var(--hero-gutter) * 2));  /* bordas iguais */
  margin-inline: auto;                           /* centraliza */
  border-radius: 14px;
  overflow: hidden;                              /* cantos arredondados */
  min-height: 420px;                             /* segurança visual */
}
@media (min-width: 1400px){
  .webpage__main-slider.main-slider{ min-height: 520px; }
}

/* 2) Proporção fixa — navegadores modernos */
@supports (aspect-ratio: 1 / 1){
  .webpage__main-slider.main-slider{
    aspect-ratio: var(--hero-w) / var(--hero-h);
  }
  .webpage__main-slider .swiper,
  .webpage__main-slider .swiper-container,
  .webpage__main-slider .swiper-wrapper,
  .webpage__main-slider .swiper-slide{
    height: 100% !important;                     /* ocupa a caixa toda */
  }
  .webpage__main-slider img,
  .webpage__main-slider video{
    display: block;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;  /* cobre sem distorcer */
  }
}

/* 3) Fallback — browsers sem aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .webpage__main-slider.main-slider{ position: relative; }
  .webpage__main-slider.main-slider::before{
    content: "";
    display: block;
    padding-top: calc(var(--hero-h) / var(--hero-w) * 100%); /* 37.5% (16:6) */
  }
  .webpage__main-slider.main-slider > *{ position: absolute; inset: 0; }
  .webpage__main-slider img,
  .webpage__main-slider video{
    width: 100%; height: 100%; object-fit: cover; object-position: center;
  }
}

/* 4) Setas respeitam o gutter (ficam dentro do hero) */
.webpage__main-slider .swiper-button-prev{ left:  var(--hero-gutter) !important; }
.webpage__main-slider .swiper-button-next{ right: var(--hero-gutter) !important; }

/* 5) Opcional: proporção mais alta no mobile */
@media (max-width: 767.98px){
  :root{ --hero-w: 16; --hero-h: 10; }  /* mostra mais da imagem no celular */
}

:root{ --hero-arrow-inset: max(8px, calc(var(--hero-gutter) - 40px)); }
/* ajuste o 40px para mais/menos conforme desejar */

.webpage__main-slider .swiper-button-prev{ left:  var(--hero-arrow-inset) !important; }
.webpage__main-slider .swiper-button-next{ right: var(--hero-arrow-inset) !important; }

/* quanto quer cortar da altura do hero */
:root{ --hero-cut: 160px; }  /* mude pra 0px se quiser voltar */

/* quando usamos o recuo/gutter lateral */
@supports (aspect-ratio: 1 / 1){
  /* em vez de aspect-ratio, usa altura explícita - corte */
  .webpage__main-slider.main-slider{
    aspect-ratio: auto; /* desliga o ratio pra valer o height abaixo */
    height: calc(
      (100vw - (var(--hero-gutter) * 2)) * (var(--hero-h) / var(--hero-w))
      - var(--hero-cut)
    );
  }
}

/* === DEV KNOBS p/ altura do HERO === */

/* 1) FATOR DE ESCALA — 1.00 = igual; 0.95 = -5%; 1.10 = +10% */
:root{ --hero-scale: 0.64; }  /* mude aqui: 0.92, 0.98, 1.06… */

/* aplica o scale sobre a altura calculada pelo ratio */
@supports (aspect-ratio: 1 / 1){
  .webpage__main-slider.main-slider{
    aspect-ratio: auto !important; /* libera o height abaixo */
    height: calc(
      ((100vw - (var(--hero-gutter) * 2)) * (var(--hero-h) / var(--hero-w)))
      * var(--hero-scale)
    ) !important;
  }
}

/* limites mínimos continuam valendo */
.webpage__main-slider.main-slider{
  min-height: 320px;
}
@media (min-width: 1400px){
  .webpage__main-slider.main-slider{ min-height: 420px; }
}

/* empurra o HERO pra baixo quando o header cobre o topo */
@media (max-width: 1024px){
  .webpage__main-slider.main-slider{
    margin-top: var(--rc-header-off, 0px);
  }
}

:root { --rc-header-h: 0px; }

/* só aplica o recuo quando <html> tiver a classe (ligada pelo JS) */
.rc-offset-on .webpage__main-slider.main-slider {
  margin-top: var(--rc-header-h);
}

/* em modo editor do Elementor, não empurra o hero */
.elementor-editor-active .webpage__main-slider.main-slider {
  margin-top: 0 !important;
}

/* --- SINGLE DE EMPREENDIMENTO: usar só nosso slider --- */

/* 1) Esconde setas/paginação internas do tema no single */
.single-portfolio .swiper-button-prev,
.single-portfolio .swiper-button-next,
.single-portfolio .swiper-pagination,
.single-portfolio .project-single__nav,
.single-portfolio .slider__nav {
  display: none !important;
}