/* 
COLOR PALETTE
Red: #d7211b
Cream: #f4f2ec

Logo font: Instrument Sans

gris crema: #E1DCCC
rojo más claro: #E7443E
*/

/* GLOBAL STYLES */

/* Uncomment to debug layout issues, leave commented otherwise
Source: https://stackoverflow.com/questions/4617872/white-space-showing-up-on-right-side-of-page-when-background-image-should-extend */

/* 
* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
} 
*/

/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/
apply a natural box layout model to all elements, but allowing components to change */

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

html body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f4f2ec;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 170%;
    /* text-align: justify; */
}

a {
    text-decoration-line: none;
    color: black;
}


/* NAVIGATION BAR */

header {
    background-color: #d7211b;
    padding: 20px;
}

nav ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

nav ul li {
    padding-left: 20px;
    padding-right: 20px;
}

nav ul li a {
    color: #f4f2ec;
    font-weight: bold;
    font-size: 20px;
}

nav ul li a:hover {
    opacity: 0.9;
}


/* LANDING PAGE */

.landing-container {
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-container img {
    /* width: 100%;  */
    /* max-width: 50%; */
    /* height: auto; */
    height: 75vmin;
}

.landing-container a {
    background-color: #d7211b;
    border: 0;
    border-radius: 7px;
    padding: 15px 20px;
    text-align: center;
    color: #f4f2ec;
    font-weight: bold;
    font-size: 1.5em;
}

/* https://a11y-guidelines.orange.com/en/articles/accessible-hiding/     */
.visually-hidden {
    position: absolute;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* ABOUT */

.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    text-align: center;
}

.profile-pic {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 50%;
}


/* DESTINATIONS */

.destinations-container {
    margin: 30px 0;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.destinations-container h1 {
    font-size: 1.75em;
    max-width: 900px;
    padding: 0.3em;
}

.destinations-list {
    list-style-type: none;
    padding-inline-start: 0;
    display: grid;
    grid: auto-flow / repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 0.8em;
    padding: 0 1.5rem;
    /* For the items not to fill vertically */
    align-items: center;
}

.destinations-item {
    padding: 0.80em;
    border: 0.08em solid #d7211b;
    border-radius: 5px;
    /* To align the content vertically to the center */
    display: flex;
    align-items: center; /* aligns the items vertically */

}

.destinations-item-content {
    vertical-align: middle;
}

.destinations-item a:hover {
    opacity: 0.7;
}

.destinations-item img {
    width: 100%;
}

.destinations-item h2 {
    margin: 0;
    font-size: 1.1rem;
}



/* CONTACT */

.contact-container {
    margin: 30px auto;
    text-align: center;
}

.socials {
    list-style-type: none;
    display: flex;
    justify-content: center;
    padding: 0;
}

.socials li {
    padding: 0 1em;
    display: inline-block;
}

.contact-container a:hover {
    opacity: 0.7;
}


/* BLOGS */

#top-btn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color:#d7211b; /* Set a background color */
  color:#f4f2ec; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0.7em; /* Some padding */
  border-radius: 8px; /* Rounded corners */
  font-size: 1.2em; /* Increase font size */
}

#top-btn:hover {
  opacity: 0.8; /* Add a dark-grey background on hover */
}

.blog-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
    text-align: justify;
}

.blog-container img {
    width: 100%;
}

.blog-container a {
    color: #d7211b;
    text-decoration: underline;
}

.blog-container a:hover {
    color: #f4f2ec;
    background-color: #d7211b;
    text-decoration: none;
}

.blog-container h3 {
    font-size: 1.3em;
}

.blog-container h4 {
    font-size: 1.15em;
}

.blog-container h5 {
    font-size: 1em;
}

.recommendation {
    color: #f4f2ec;
    background-color: #d7211b;
    border-radius: 8px;
    padding: 1rem;
}

.logistics {
    border: solid #d7211b;
    border-radius: 8px;
    padding: 1rem;
    margin: 1em 0;

    h3, h4, h5, h6 {
        margin: 0;
        font-size: 1.15em;
    }

    p {
        margin: 0;
    }

    ul {
        margin-bottom: 0;
    }

}

.driving-container {
    display: grid;
    grid: auto-flow / repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 1em;
}

.driving-item {
    background-color: #E1DCCC;
    border-radius: 8px;
    padding: 1em;

    h3, h4, h5 {
        font-size: 1.10em;
        margin: 0;
        padding-bottom: 1em;
    }

    p {
        margin: 0;
    }
}