/*
  CONTACTOS — réplica da página do protótipo Global Santos
  Só variáveis do tema. Usa também .container, .stack, .sec--titulo, .eyebrow, .btn
  definidos no sobre.css (carregado em todas as páginas).
*/

#conteudo .lead{ font-size: 19px; max-width: 680px; }

/* ---- Layout: formulário + lateral ---- */
#conteudo .contacto-layout{
    display: flex;
    flex-wrap: wrap;
    gap: 48px 64px;
    align-items: flex-start;
    padding-bottom: 88px;
}
#conteudo .contacto-form{ flex: 2 1 520px; }

/* ---- Formulário ---- */
#conteudo .form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#conteudo .linha{ display: flex; flex-wrap: wrap; gap: 20px; }
#conteudo .linha .campo{ flex: 1 1 240px; }
#conteudo .form > .campo{ flex: none; }   /* sem altura mínima nos campos em coluna */
#conteudo .campo{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#conteudo .campo label{ font-weight: 600; font-size: 15px; margin: 0; }
#conteudo .campo input,
#conteudo .campo select,
#conteudo .campo textarea{
    font: inherit;
    font-size: 16px;
    color: var(--primaryTextColor);
    background: var(--secondaryColor);
    border: 2px solid var(--primaryColor);
    border-radius: 8px;
    padding: 12px 14px;
    min-height: 48px;
    width: 100%;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#conteudo .campo textarea{ resize: vertical; }

#conteudo .rgpd{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15px;
}
#conteudo .rgpd input{
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex: 0 0 22px;
    accent-color: var(--primaryColor);
}
#conteudo .rgpd label{ margin: 0; cursor: pointer; }
#conteudo .rgpd a{
    color: var(--primaryColor);
    text-decoration: underline;
    text-decoration-color: var(--terciaryColor);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease, color .2s ease;
}

/* ---- Mensagens ---- */
#conteudo .sucesso{
    background: var(--primaryColor);
    color: var(--secondaryTextColor);
    padding: 40px 32px;
    border-radius: 0 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}
#conteudo .sucesso h2{ color: var(--secondaryTextColor); font-size: 28px; }

#conteudo .alerta{
    border: 2px solid var(--primaryColor);
    border-left-width: 8px;
    border-radius: 8px;
    padding: 14px 18px;
    font-weight: 600;
}

/* ---- Coluna lateral ---- */
#conteudo .lateral{
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
/* Conteúdo da página: cada <h2> abre um bloco com linha em cima (Morada, Telefone e email, Horário...) */
#conteudo .lateral .conteudo > *{ margin: 0; }
#conteudo .lateral .conteudo > * + *{ margin-top: 10px; }
#conteudo .lateral .conteudo h2,
#conteudo .lateral .conteudo h3{
    font-size: 18px;
    border-top: 4px solid var(--terciaryColor);
    padding-top: 20px;
    margin-top: 28px;
}
#conteudo .lateral .conteudo > :first-child{ margin-top: 0; }
#conteudo .lateral .conteudo a{
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease, color .2s ease;
}
#conteudo .lateral .conteudo a:hover{ color: var(--primaryColor); text-decoration-color: var(--terciaryColor); }

/* ---- Mapa (Leaflet) ---- */
#conteudo .mapa{
    position: relative;
    z-index: 0;            /* mantém as camadas do Leaflet por baixo do header fixo */
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
}
#conteudo .mapa img{ max-width: none; }
#conteudo .mapicon{ background: transparent; border: 0; }
#conteudo .mapicon svg{
    width: 40px;
    height: 40px;
    fill: var(--primaryColor);
}

/* ---- Efeitos ---- */
#conteudo .campo input:hover,
#conteudo .campo select:hover,
#conteudo .campo textarea:hover{ border-color: var(--terciaryColor); }
#conteudo .campo input:focus,
#conteudo .campo select:focus,
#conteudo .campo textarea:focus{
    border-color: var(--terciaryColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--terciaryColor) 35%, transparent);
    outline: none;
}
#conteudo .campo select, #conteudo .rgpd input{ cursor: pointer; }
#conteudo .rgpd a:hover{ text-decoration-color: var(--primaryColor); }

/* ---- Responsivo ---- */
@media (max-width: 991.98px){
    #conteudo .contacto-layout{ gap: 40px 48px; padding-bottom: 64px; }
}
@media (max-width: 640px){
    #conteudo .contacto-layout{ gap: 36px; padding-bottom: 56px; }
    #conteudo .sucesso{ padding: 32px 24px; }
    #conteudo .mapa{ height: 260px; }
}
@media (max-width: 480px){
    #conteudo .form .btn{ width: 100%; }
}