/* ============================================================
   Footer — Câmara Municipal de Seia
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --footer-bg-1:    #2c3e50;
  --footer-bg-2:    #1a2530;
  --footer-bg-3:    #000000;
  --footer-toggle:  #1a2530;   /* igual à section_2 para continuidade visual */
  --footer-title:   #ffffff;
  --footer-text:    #bdc3c7;
  --footer-link:    #3498db;
  --footer-link-hover: #5dade2;
  --alert-bg:       #e74c3c;
  --alert-text:     #ffffff;
  --toggle-speed:   0.25s;
}

/* ── Layout geral ──────────────────────────────────────────── */
#footer {
  width: 100%;
  margin: o auto;

}

/* ── Barra de toggle "Está à procura de outra coisa?" ───────── */
.footer-toggle-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background-color: var(--footer-toggle);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 30px;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--toggle-speed) ease;
}

.footer-toggle-bar:hover {
  background-color: #243342;
}

.footer-toggle-label {
  color: var(--footer-title);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  
}

.footer-toggle-arrow {
  width: 24px;
  height: 24px;
  fill: var(--footer-title);
  flex-shrink: 0;
  transition: transform var(--toggle-speed) ease;
  /* começa a apontar para baixo (▼) */
  transform: rotate(0deg);
}

/* Quando o menu está aberto: seta roda para cima (▲) */
.footer-toggle-bar.is-open .footer-toggle-arrow {
  transform: rotate(180deg);
}

/* ── Section 1: Menus de Navegação (oculta por defeito) ─────── */
.section_1 {
  background-color: var(--footer-bg-1);
  display: none; /* jQuery slideDown/Up trata da animação */
}

.section_1 .content_footer {
  padding: 40px 0 50px;
}

.text_footer {
  color: var(--footer-text);
}

.title_footer {
  font-weight: 700;
  font-size: 1rem;
  color: var(--footer-title);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Menus de navegação */
.text_footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.text_footer ul li {
  margin-bottom: 6px;
}

.text_footer ul li a {
  color: var(--footer-link);
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.2s ease;
}

.text_footer ul li a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* ── Section 2: Morada + Newsletter ────────────────────────── */
.section_2 {
  background-color: var(--footer-bg-2);
}

.section_2 .content_footer {
  padding: 40px 0 20px;
}

.morada {
  font-size: 0.88rem;
  color: var(--footer-text);
  margin-bottom: 4px;
}

a.morada {
  color: var(--footer-link);
  text-decoration: none;
}

a.morada:hover {
  text-decoration: underline;
}

.margin-top-footer {
  margin-top: 20px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ensure the row uses flex so columns can space correctly */
.margin-top-footer .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* right-hand column should stay right-aligned */
.margin-top-footer .col-md-6.text-right {
  text-align: right;
}

.p-priv {
  color: var(--footer-link);
  text-decoration: none;
}

.p-priv:hover {
  text-decoration: underline;
}


/* ── Section 3: Logos / Parceiros ──────────────────────────── */
.section_3 {
  background-color: var(--footer-bg-3);
  
}

.img_section_3 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0 15px 0;
}

.img_section_3 img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* ── Alerts bar ─────────────────────────────────────────────── */
.alerts {
  background-color: var(--alert-bg);
  color: var(--alert-text);
  padding: 8px 0;
}

.alerts .row {
  display: flex;
  align-items: center;
}

.text_alerts {
  flex: 1;
  overflow: hidden;
}

.column_alert {
  color: var(--alert-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 10px;
}

.icon-alert {
  display: flex;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;
}

.icon-alert img {
  filter: brightness(0) invert(1);
}

.circle_alert {
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

/* Tooltip */
.tooltip-alert {
  position: relative;
}

.tooltip-alert .tooltiptext {
  visibility: hidden;
  opacity: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.78rem;
  border-radius: 4px;
  padding: 4px 8px;
  white-space: nowrap;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.tooltip-alert:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Mobile: alterna alertas desktop/mobile */
.mobile_alerts  { display: none; }
.desktop_alerts { display: inline; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .margin-top-50          { margin-top: 30px; }
  .img_section_3 img      { max-height: 40px; }
  .desktop_alerts         { display: none; }
  .mobile_alerts          { display: inline; }
  .footer-toggle-bar      { padding: 14px 20px; }
  .footer-toggle-label    { font-size: 0.9rem; }
}

@media (max-width: 576px) {
  .section_1 .content_footer,
  .section_2 .content_footer { padding: 25px 0; }
  .title_footer               { font-size: 0.82rem; }
  .morada                     { font-size: 0.82rem; }
}