/* Ficheiro css da página da acomodação do trabalho individual de programação web */
/* NOME: Roxanne João Coelho */

/* seletor universal: retira a margem e o padding e coloca o modelo de bordex-box, 
que faz com que as dimensoes totais dum elemento incluam margem e padding  */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* cabecalho: posição relativa, o que é bom para depois poder posicionar os seus elementos filhos 
e width 100% para ocupar toda a largura da div */
.cabecalho {
    position: relative;
    width: 100%;
}

/* imagem do cabeçalho: tem uma largura de 100% em relaçao ao elemento pai para melhor responsividade 
e poe a altura automaticamente em relacao á largura para não distorcer */
.imagem-cabecalho img {
    width: 100%;
    height: auto;
}

/* titulo do cabeçalho: tem que estar no meio do cabeçalho (top e left 50%, e mais um ajuste do transform), 
centralizado (text-align: center) 
e com uma faixa preta que ocupe a largura toda do elemento pai (width:100%) */
.titulo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%; 
}

/* estilos do título: cor branca, fonte Jura, a negrito (bold), font-size e padding com um tamanho responsivo
o vw é Viewport Width, ou seja, por exemplo 1vw = 1% da largura visível da janela do navegador */
.titulo h1 {
    color: white;
    font-family: "Josefin Slab", serif;
    font-weight: bold;
    font-size: 6vw; 
    white-space: nowrap; /* faz com que o titulo nunca quebre de linha */
    background-color: rgba(0, 0, 0, 0.85); /* faixa preta transparente ao longo da largura do cabecalho */
    padding: 2vw;
}

/* navbar: colocada no canto superior direito do cabecalho de forma responsiva */
.navbar-transparent {
    position: absolute;
    top: 2vw;
    right: 5vw;
}

/* letras da navbar: preto, negrito, com a fonte Josefin Slab,
margem superior e inferior 0, esquerda e direita 2vW para dar um certo espaco entre as palavras
e font size de tamanho responsivo*/
.nav-link {
    color: black;
    font-weight: bold;
    font-family: "Josefin Slab", serif;
    margin: 0 2vw;
    font-size: 1.5vw;  
}

/* botao para ir para a pagina inicial: colocada no canto superior esquerdo do cabecalho de forma responsiva*/
.botao-inicio {
    position: absolute;
    top: 2vw;
    left: 5vw;
    cursor: pointer;
}

/* main: definir cor de fundo amarela com 25% transparência com espacamento responsivo para os elementos nao ficarem colados as bordas*/
.caravana {
    background-color:  rgba(180, 155, 44, 0.25);
    padding: 3vw 5vw;
}

/* espaçamento para as colunas */
.col {
    padding: 2vw;
}

/* estilos para o container-caravana como para o modal-content:
mesmo espacamento, cor de fundo, bordas arredondadas responsivas e uma sombra a direita e em baixo */
.container-caravana, .modal-content {
    padding: 2vw;
    background-color: #e4e2e2; 
    border-radius: 2vw;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
/* estilos para as imagens do container-caravana como a imagem do modal:
 o display black e margin 0 auto centraliza a imagem e a deixa no topo, 
 width para ajustar a largura responsivamente e as bordas arredondadas */
.container-caravana img, .modal-header img{
    display: block;
    margin: 0 auto;
    width: 80vw;
    border-radius: 2vw;
}

/* para os titulos: negrito com uma margem mais reforçada em baixo e texto centrado, com a fonte Jura e preto*/
.container-caravana h2, .modal-title {
    font-weight: bold;
    padding: 1vw;
    margin-bottom: 1vw; 
    text-align: center; 
    font-family: "Jura", serif;
    color: black;
}

/* para os paragrafos, listas e texto do botao alugar: preto com fonte Jura */
.container-caravana p, ul, .modal-body p, .botao-alugar, a{
    color: black;
    font-family: "Jura", serif;
    text-decoration: none;   
}

/*para centralizar o +info e garantir que ele fique no fundo da celula*/
.container-caravana p:last-child {
    text-align: center; 
    margin: auto 0; 
}

/* estilos para a imagem de fundo do modal: colocar a imagem nao cortada (cover) e centrada (center) */
.modal-backdrop {
    background-image: url("imagens_figma/caravana laranja.png");
    background-size: cover;
    background-position: center; 
    opacity: 1 !important; /*força a opacidade total, evitando com que o fundo da pagina das caravanas se veja*/
}

/*para escurecer um pouco a imagem de fundo da caravana no modal usamos um pseudo elemento, todos estes paramentros sao importantes para a escurecimento da imagem*/
.modal-backdrop::before {
    content: ""; /*cria um elemento vazio que é necessario para o before*/
    position: absolute; /*posiciona esse elemento de forma independente do fluxo normal*/
    inset: 0; /* ocupa todo o espaço do .modal-backdrop*/
    background-color: rgba(0, 0, 0, 0.5); /* define a opacidade*/
    z-index: 1; /*o escurecimento da imagem fica acima da imagem mas abaixo do conteudo do modal*/
}

/*conteudo do modal: largura maxima de 60% da largura da tela, 
margem de 2% da largura da tela em cima/baixo 
e centraliza horizonalmente (auto)*/
.modal-dialog {
    max-width: 60vw;
    margin: 2vw auto;
}

/*cabeçalho do modal: organizado em coluna e centralizado */
.modal-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*substituir a bolinha padrao por certos*/
.modal-body .certos li{
    list-style: none;
}
.modal-body .certos li::before {
    content: "✓ ";
}

/* footer do modal: centralizado*/
.modal-footer {
    justify-content: center;
}

/* botao de x, cinzento, redondo, que aparece no canto superior direito*/
.btn-close {
    position: absolute;
    top: 1vw;
    right: 1vw;
    background-color: rgb(92, 87, 87);
    border-radius: 50%;
    z-index: 1;
}
/*estilos do botao alugar*/
.botao-alugar {
    background-color: #686931;
    padding: 1vw;
    width: 20vw;
    border-radius: 1vw;
    cursor: pointer;
    transition: all 0.3s;
}
/* estilos do botao alugar quando passa o rato em cima  */
.botao-alugar:hover {
    background-color: #8f9043;
    transform: scale(1.05);
}

 /* rodapé: fundo preto, cor branca, fonte Jura, padding responsivo, elementos com direçao de coluna e centralizados*/
 .footer {
    background-color: black;
    color: white;
    font-family: "Jura", serif;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vw; 
    text-align: center;
}

/* estilos dos icons das redes sociais */
.social-icons {
    display: flex;
    gap: 1.5vw; 

}
/* para fazer com que só no icon é que é clicavel, colocar o cursor pointer na imagem */
.social-icons img {
    cursor: pointer;
}