/*
 * Identidade visual Bereana.
 * Paleta do Brand Book 2023 (time de comunicação); tipografia mantém a do site.
 * Carregar depois de bootstrap.min.css e style.css.
 */

:root {
  /* primárias */
  --brand-orange: #ff4500;
  --brand-orange-2: #fd5718;
  --brand-black: #050100;
  --brand-white: #ffffff;

  /* secundárias: usar em menor proporção, em detalhes */
  --brand-purple: #5f0a95;
  --brand-coral: #fc3a56;
  --brand-pink: #ef1e78;
  --brand-yellow: #ffcd12;

  --brand-light: #f8f5f3;
  --brand-text: #5c5552;

  /* Gotham do brand book: Bold nos títulos, Medium no resto.
     Sem o arquivo licenciado, cai no Montserrat com os mesmos pesos. */
  --font-title: "Gotham", "Montserrat", system-ui, sans-serif;
  --font-body: "Gotham", "Montserrat", system-ui, sans-serif;

  --bs-primary: var(--brand-orange);
  --bs-secondary: var(--brand-black);
  --bs-dark: var(--brand-black);
  --bs-light: var(--brand-light);
  --bs-font-sans-serif: var(--font-body);
}

html,
body {
  overflow-x: hidden;
}

/* Tipografia */
body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--brand-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--brand-black);
  overflow-wrap: break-word;
}

/* Títulos de seção: menores e fluidos pra não estourar no celular */
.display-1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4rem); }
.display-2 { font-size: clamp(1.9rem, 1.3rem + 3vw, 3.5rem); }
.display-3 { font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.4rem); }
.display-6 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); }
.display-1, .display-2, .display-3, .display-6 {
  font-weight: 700;
  line-height: 1.2;
}

h4 { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }

/* Rótulo acima do título ("Nosso lema é:", "Quem somos") */
h4.text-uppercase.text-primary-css,
h4.text-primary-css.text-uppercase {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 0.75rem;
}

/* Cores de utilitários do Bootstrap */
.text-primary { color: var(--brand-orange) !important; }
.text-secondary { color: var(--brand-orange-2) !important; }
.text-dark { color: var(--brand-black) !important; }
.bg-primary { background-color: var(--brand-orange) !important; }
.bg-dark { background-color: var(--brand-black) !important; }
.bg-light { background-color: var(--brand-light) !important; }
.border-primary { border-color: var(--brand-orange) !important; }

a { color: var(--brand-orange); }
a:hover { color: var(--brand-orange-2); }

/* Botões */
.btn-primary {
  color: var(--brand-white);
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: var(--brand-white);
  background-color: var(--brand-black) !important;
  border-color: var(--brand-black) !important;
}

.btn-secondary {
  color: var(--brand-white);
  background-color: var(--brand-black);
  border-color: var(--brand-black);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
  color: var(--brand-white);
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
}

.btn-outline-primary {
  color: var(--brand-orange);
  border-color: var(--brand-orange);
}
.btn-outline-primary:hover {
  color: var(--brand-white);
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}

.btn:focus,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 69, 0, 0.2);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-orange-2);
}
.form-check-input:checked {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
}

/* Selo "4 Anos Missionando" sobre a foto */
.about .about-img .about-exp {
  font-family: var(--font-title);
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
}

/* Rodapé: dias da semana alinhados com o horário embaixo */
.footer h6.text-muted {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Ícones do contador ficam sobre o gradiente: fundo escuro pra manter contraste */
.counter .counter-item .counter-item-icon {
  background: var(--brand-black);
}

/*
 * Animações de entrada mais sutis: o animate.css desloca 100% do elemento,
 * o que faz o card atravessar a tela e vazar pro lado no celular.
 */
.animated {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -24px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .animated { animation: none !important; }
}

/* Celular */
@media (max-width: 575.98px) {
  /* Cards com ícone ao lado: ícone menor pra não espremer o texto */
  .service-item .service-btn,
  .rounded-circle[style*="width: 80px"] {
    width: 56px !important;
    height: 56px !important;
  }
  .service-item .service-btn i,
  .rounded-circle[style*="width: 80px"] i {
    font-size: 1.4em;
  }
  .service-item .ps-4 { padding-left: 1rem !important; }
  .service-item .pe-4,
  .bg-light .pe-4 { padding-right: 1rem !important; }
  .service-item.p-4,
  .bg-light.rounded.p-4 { padding: 1.25rem !important; }

  /* Texto das pregações alinhado à esquerda: à direita fica serrilhado */
  .service-item .service-content.text-end { text-align: left !important; }
}

/* Blog: fotos do Instagram vêm em proporções diferentes, recorte uniforme */
.blog .blog-item .blog-img img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
}

/* Logo: ícone + "Bereana" com "Cupecê" em rótulo embaixo */
.navbar-brand .logo,
.footer-item h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.brand-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.brand-name small {
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-top: 0.35rem;
  padding-left: 0.1em;
}
.footer-item h3 .brand-name { font-size: 1.6rem; }
@media (max-width: 991.98px) {
  .brand-name { font-size: 1.6rem; }
  .brand-name small { font-size: 0.62rem; }
}

/* Botão do Instagram no menu */
.btn-instagram svg { display: block; }
.btn-instagram:hover { transform: translateY(-1px); }