/* =============================================================
   JFC Carnide — Tema Institucional
   custom.css  |  v1.2.0  |  2026-03-25
   Carregado por último — overrides seguros sobre o vanilla.
   ============================================================= */

/* -------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   ------------------------------------------------------------- */
:root {
  /* Verdes principais */
  --jfc-green-primary:  #5a7c2f;
  --jfc-green-light:    #8aab45;
  --jfc-green-dark:     #3d5a1f;
  --jfc-green-group:    #6e9636; /* títulos de grupo — entre primary e light */

  /* Fundos e bordas */
  --jfc-bg-soft:        #f2f6e8;
  --jfc-border:         #bdd18c;

  /* Texto */
  --jfc-text-main:      #1a2e0a;
  --jfc-text-muted:     #4a5e2a;

  /* Sombras */
  --jfc-shadow:         0 2px 8px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.06);
  --jfc-shadow-hover:   0 0 0 2px var(--jfc-green-primary), 0 10px 28px rgba(0,0,0,0.14);

  /* Raio de canto */
  --jfc-radius:         6px;
}

/* -------------------------------------------------------------
   2. Tipografia base
   ------------------------------------------------------------- */
body,
.container,
.survey-container {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: var(--jfc-text-main);
  background-color: #ffffff;
}

/* -------------------------------------------------------------
   3. Fundo do formulário
   ------------------------------------------------------------- */
body {
  background-color: var(--jfc-bg-soft);
}

.survey-container,
#outerframeContainer,
.panel.panel-default {
  background-color: #ffffff;
  border: 1px solid var(--jfc-border);
  border-radius: var(--jfc-radius);
  box-shadow: var(--jfc-shadow);
}

/* -------------------------------------------------------------
   4. Botão primário (Seguinte / Submeter)
   ------------------------------------------------------------- */
.btn-primary,
input[type="submit"].btn-primary,
button.btn-primary {
  background-color: var(--jfc-green-primary);
  border-color: var(--jfc-green-dark);
  color: #ffffff;
  border-radius: var(--jfc-radius);
  font-weight: 600;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--jfc-green-dark);
  border-color: var(--jfc-green-dark);
  color: #ffffff;
  box-shadow: var(--jfc-shadow-hover);
}

/* -------------------------------------------------------------
   5. Campos de formulário
   ------------------------------------------------------------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
  border-color: var(--jfc-border);
  border-radius: var(--jfc-radius);
  color: var(--jfc-text-main);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--jfc-green-primary);
  outline: 2px solid var(--jfc-green-primary);
  outline-offset: 1px;
  box-shadow: none;
}

/* -------------------------------------------------------------
   6. Barra de progresso
   ------------------------------------------------------------- */
.progress-bar {
  background-color: var(--jfc-green-primary);
}

/* -------------------------------------------------------------
   7. Tabelas (herança do vanilla — mantém bordas correctas)
   ------------------------------------------------------------- */
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border: 1px solid var(--jfc-border);
}

/* -------------------------------------------------------------
   8. Header institucional JFC
   ------------------------------------------------------------- */
.jfc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: var(--jfc-green-primary);
  min-height: 80px;
  display: flex;
  align-items: stretch;
}

.jfc-header--image {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Overlay escuro sobre a imagem para garantir legibilidade */
.jfc-header--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(30, 55, 10, 0.62);
  z-index: 0;
}

.jfc-header-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.jfc-logo-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.jfc-logo {
  height: 56px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* torna o logo branco */
}

.jfc-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jfc-entity-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  line-height: 1.2;
}

.jfc-survey-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

/* Barra de ferramentas abaixo do header JFC */
.jfc-nav-tools {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 1029;
}

/* Mobile */
@media (max-width: 768px) {
  .jfc-header {
    min-height: 64px;
  }
  .jfc-logo {
    height: 40px;
  }
  .jfc-survey-title {
    font-size: 0.95rem;
  }
  .jfc-entity-name {
    display: none;
  }
  .jfc-nav-tools {
    top: 64px;
  }
}

/* -------------------------------------------------------------
   9. Footer institucional JFC
   ------------------------------------------------------------- */
.jfc-footer {
  background-color: var(--jfc-green-dark);
  color: rgba(255,255,255,0.85);
  padding: 24px 20px;
  margin-top: 40px;
  font-size: 0.85rem;
}

.jfc-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.jfc-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}

.jfc-footer-logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.jfc-footer-name {
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.jfc-footer-links a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.15s;
}

.jfc-footer-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.jfc-footer-copy {
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  width: 100%;
}

@media (max-width: 768px) {
  .jfc-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .jfc-footer-name {
    font-size: 0.82rem;
  }
}

/* -------------------------------------------------------------
   10. Questões: contentor e radio/checkbox
   NOTA: Regras activas via custom_header.twig (cache asset manager).
         Este bloco serve como fonte/documentação.
   ------------------------------------------------------------- */

/* Contentor de questão com tokens JFC (override dos cinzentos vanilla) */
.question-container {
  border-color: var(--jfc-border);
  background-color: #ffffff;
}

/* Checkmark dos checkboxes (Awesome Bootstrap Checkboxes)
   — substitui azul Bootstrap (#337ab7) por verde JFC */
label::after {
  background-color: var(--jfc-green-primary);
}

/* Radio e checkbox nativos do browser — accent-color para o preenchimento */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--jfc-green-primary);
}

/* Botões de escolha múltipla seleccionados — trocar azul por verde */
.btn-check:checked + .btn-primary,
.btn-check:focus:checked + .btn-primary {
  background-color: var(--jfc-green-primary);
  border-color: var(--jfc-green-dark);
  color: #ffffff;
  box-shadow: none;
}

/* Foco em botão não seleccionado — anel verde em vez de azul */
.btn-check:focus + .btn-primary {
  background-color: var(--jfc-green-primary);
  border-color: var(--jfc-green-dark);
  box-shadow: 0 0 0 3px rgba(90, 124, 47, 0.35);
  color: #ffffff;
}

/* -------------------------------------------------------------
   11. Título de grupo de questões
   NOTA: Regras activas via custom_header.twig (cache asset manager).
         Este bloco serve como fonte/documentação.
   ------------------------------------------------------------- */

/* Verde ligeiramente mais claro que o header (#5a7c2f) e o footer (#3d5a1f).
   CORRECÇÃO v1.2.1: .group-title-container não existe no markup renderizado;
   a div tem .group-title. Adicionado .question-title-container para cada questão. */
.group-title,
.question-title-container {
  background-color: var(--jfc-green-group);
  color: #ffffff !important;
  border-radius: var(--jfc-radius) var(--jfc-radius) 0 0;
  padding: 0.6em 1em !important;
  margin-bottom: 0;
}

.group-title *,
.question-title-container * {
  color: #ffffff !important;
}