:root {
	--color-title: darkorange;
    --color-nav: #FFE5CC;
    --color-title-darker: orangered;
    --color-arrowup-hover: orange;
    --color-separator: #8B4000;
    --menu-section: #ffdab95e;
    --menu-link: rgb(237, 199, 166);
    --darkest: black;
    --dark: #333;
    --middle-dark: grey;
    --soft-dark: #d3d3d3;
    --image-padding: #fff3e0;
    --margin-image: 16px 0;
    --margin-image-center: 16px auto;
    --color-title-translucid: rgba(255, 123, 0, 0.5);
}
article {
    overflow: hidden; /* Amaga el contingut que excedeix el contenidor */
}
article section.content {
    text-align: left;
    scroll-margin-top: 55px; /* desplacament per evitar sticky nav */
    padding-bottom: 10px;
    margin-bottom: 10px;
}
article section.content:not(#intro) {
    border-top: 1px solid var(--color-separator);
}
article section.content h3 {
    padding-top: 20px;
    margin-top: 20px;
}
article section.content code:not(pre code) {
    background-color: var(--soft-dark);
}
article section.content pre {
    background-color: var(--dark);
    color: var(--image-padding);
    overflow-x: auto; /* Afegeix una barra de desplacament horitzontal si cal */
    text-align: left;
}

nav {
    position: -webkit-sticky; /* Per a compatibilitat amb Safari */
    position: sticky;
    top: 0;
    /*background-color: var(--background-color-body);*/
    z-index: 1000;
}
nav .icon-container-div {
    margin: 0 auto;
}

nav #titlePageDiv {
    float: right;
    white-space: nowrap;
    display: flex;
    align-items: flex-end; /* Alinea els elements amb la base inferior del contenidor */
}
nav #titlePageDiv #imgStickyNavId:hover {
    cursor: pointer;
}

article section.menu {
    background-color: var(--menu-section);
    padding: 10px 15px;
    margin: 20px 0 50px 0;
}

article section.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

article section.menu ul li {
    display: inline;
}

article section.menu ul li a {
    text-decoration: none;
    color: var(--darkest);
    background-color: var(--menu-link);
    border-radius: 4px;
    padding: 4px;
    display: block;
    transition: background-color 0.3s ease;
}

article section.menu ul li:not(:last-child) a {
    margin-bottom: 4px;
}

article section.menu ul li a:hover {
    background-color: var(--color-title);
}

/* scroll */

.scroll-to-top {
    position: fixed;
	display: none;
    bottom: 15px;
    right: 10px;
    z-index: 1000;
}

.scroll-link {
    display: block;
    width: 30px;
    height: 30px;
    background-color: var(--color-title-translucid);
    border-radius: 50%;
    border: 1px var(--middle-dark) solid;
    text-align: center;
    line-height: 30px;
    text-decoration: none;
}

.scroll-link:hover {
    background-color: var(--color-arrowup-hover);
}

.scroll-icon {
    width: 20px;
    height: 20px;
    margin-top: 4px;
}

/* menu desplegable */

.chevron-icon {
    width: 20px;
    height: 20px;
    margin-top: 4px;
}
#imgStickyNavId {
    margin-left: 10px;
    margin-right: 0px !important;
    margin-top: 0px;
    margin-bottom: -5px;
}

.titleBar {
    background-color: var(--color-nav);
    border: solid 2px var(--color-title);
    color: var(--color-title);
    padding: 10px;
    border-radius: 8px;
    /* text-align: center; */
    /* position: relative; */
    display: flex; /* Utilitza flexbox per alinear els elements dins de la barra */
    /* align-items: center; */
    /* justify-content: center; */
}

#txtBar {
    flex: 1; /* Permet que el text s expandeixi ocupant tot l espai disponible */
    /* text-align: center; */
}

.dropdown {
    position: relative;
    /* display: inline-block; */
    /* margin-left: auto; */
}

#imgBar {
    cursor: pointer;
    padding: 0 8px 0 8px;
}

/* Contingut desplegable (ocult per defecte) */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0; /* Assegura que el contingut desplegable estigui alineat amb imgBar */
    background-color: var(--dark);
    /*min-width: 150px;*/
    /*max-width: 250px;*/
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
    z-index: 1;
    font-size: 15px;
    overflow: hidden;
    word-wrap: break-word;
}

/* Enllacos del menu desplegable */
.dropdown-content a {
    color: var(--color-title);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Canviar el color en passar per sobre */
.dropdown-content a:hover {
    background-color: var(--image-padding);
}

/*
.dropdown:hover .dropdown-content {
    display: block;
}
*/

/* Marc */
.marc-informatiu {
	border: 1px solid var(--color-arrowup-hover); border-radius:6px;
	padding: 10px;
	max-width: 100%;
	margin-bottom: 15px;
}

/* Highlighted text */
.text-ressaltat {
    background-color: var(--color-title);
	color: white;
    padding: 2px 4px;
}

/* form, label */
article section.content form { margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 600px; width: 100%; box-sizing: border-box; }
article section.content label { font-weight: bold; }
@media (max-width: 480px) {
  article section.content form {
    grid-template-columns: 1fr;
  }
}

/* button, select, input */
article section.content button:not(#no-button button), article section.content select, article section.content input {
	padding: 7px;
}

article section.content button:hover:not(#no-button button) {
	background-color: var(--color-title);
}

article section.content button:not(#no-button button) {
	background-color: var(--menu-link);
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* table */
article section.content table {
	border-collapse: collapse; width: 100%;  margin-top: 20px; margin-bottom: 20px;
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}
article section.content table thead,
article section.content table tbody,
article section.content table tr,
article section.content table th,
article section.content table td {
  width: 100%;
  box-sizing: border-box;
}
article section.content th, article section.content td { border: 1px solid var(--color-title); padding: 8px; text-align: left; }
article section.content th { background-color: var(--color-nav); }

/* video */

.video-container {
	width: 100%;
	margin: 12px auto;
}
video {
	width: 100%;
	height: auto;
	max-height: 600px;
	border-radius: 12px;
	border: 2px solid var(--menu-section);
	/*box-shadow: 0 2px 5px rgba(0,0,0,0.2);*/
	box-sizing: border-box;
	display: block;
}
video:hover {
	border-color: var(--color-arrowup-hover);
}

/* model 3D */

.model3D {
	margin: 12px auto;
	border: 3px solid var(--menu-section); border-radius:12px;
	position: relative;
	padding-bottom: 40%;
}

model-viewer {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/*** big-image-container ***/

article section.content .big-image-container , article section.content .medium-image-container {
    text-align: center;
    background-color: var(--image-padding);
    margin: var(--margin-image);
}
article section.content .big-image-container img {
    vertical-align: bottom;
    width: calc(100% - (220 * (100vw - 1000px) / 500));
    max-width: 100%;
    height: auto;
}

/*** medium-image-container ***/

article section.content .medium-image-container img {
    vertical-align: bottom;
    width: calc((100% - (220 * (100vw - 1000px) / 500)) / 1,5);
    max-width: 100%;
    height: auto;
}

/*** double-image-container ***/

article section.content .triple-image-container ,
article section.content .double-image-container {
    text-align: center;
    background-color: var(--image-padding);
    margin: var(--margin-image);
}
article section.content .triple-image-container img ,
article section.content .double-image-container img {
    vertical-align: bottom;
    display: inline-block;
    margin: 0;
    height: auto;
}
@media (min-width: 950px) { /* En pantalles iguals o majors de 950px */
    article section.content .double-image-container img {
        width: 45%;
    }
    article section.content .double-image-container img:first-child {
        margin-right: 2%; /* Espai entre imatges*/
    }
}
@media (max-width: 882px) { /* En pantalles iguals o menors de 882px */
    article section.content .double-image-container img:first-child {
        margin-bottom: 10px;
    }
    article section.content .double-image-container img {
        max-width: 100%;
    }
}

/*** triple-image-container ***/

article section.content .triple-image-container .img-box {
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

article section.content .triple-image-container img {
    width: 100%;
    display: block;
}

@media (min-width: 900px) { /* En pantalles iguals o majors de 900px */
    article section.content .triple-image-container .img-box {
        width: 31%;
    }
    article section.content .triple-image-container .img-box + .img-box {
        margin-left: 2%;
    }
}
@media (min-width: 700px) and (max-width: 900px) { /* En pantalles entre 700px i 900px */
    article section.content .triple-image-container .img-box {
        width: 75%;
    }
    article section.content .triple-image-container .img-box + .img-box {
        margin-top: 10px;
    }
}
@media (min-width: 500px) and (max-width: 700px) { /* En pantalles entre 500px i 700px */
    article section.content .triple-image-container .img-box {
        width: 90%;
		text-align: center;
    }
    article section.content .triple-image-container .img-box + .img-box {
        margin-top: 10px;
    }
}
@media screen and (max-width: 499px) { /* En pantalles menors de 500px */
    article section.content .triple-image-container .img-box {
        width: 100%;
		text-align: center;
    }
    article section.content .triple-image-container .img-box + .img-box {
        margin-top: 5px;
    }
}

/*** small-float-image-container ***/

article section.content .small-float-image-container {
    float: right;
}
article section.content .small-float-image-container img {
    margin-left: 20px;
    /*margin-top: 6px;*/
    max-width: 200px;
    height: auto;
    vertical-align: bottom;
}
@media (max-width: 599px) {
    article section.content .small-float-image-container {
        float: none;
        text-align: center;
        background-color: var(--image-padding);
        margin: var(--margin-image);
    }
    article section.content .small-float-image-container img {
        margin: 0;
        max-width: 100%;
        display: inline-block;
    }
}

/*** small-image-container ***/

article section.content .small-image-container , article section.content .small-image-container-text {
    display: inline-block; /* Alinea divs horitzontalment */
    vertical-align: top; /* Alinea divs per la part superior */
    box-sizing: border-box; /* Padding i border al width del div */
}
article section.content .small-image-container {
    width: 31%;
    margin-left: 3%;
}
article section.content .small-image-container img {
    width: 100%;
}
article section.content .small-image-container-text {
    width: 65%;
}
/*
@media (min-width: 700px) and (max-width: 899px) {
    article section.content .small-image-container {
        width: 41%;
    }
    article section.content .small-image-container-text {
        width: 55%;
    }
}
    */
@media (max-width: 900px) {
    article section.content .small-image-container ,
    article section.content .small-image-container-text{
        width: 100%;
        display: block;
        margin-left: 0;
    }
    article section.content .small-image-container {
        background-color: var(--image-padding);
        text-align: center;
        margin: var(--margin-image);
    }
    article section.content .small-image-container img {
        width: calc(80% + (20 * (700px - 100vw) / 50));
        max-width: 100%;
        vertical-align: bottom;
    }
}

/*** small-image-center ***/

article section.content .small-image-center  {
    display: block;
    margin: var(--margin-image-center);
    text-align: center;
}

article section.content .small-image-center img {
    border: 1px solid var(--color-separator);
    max-width: 100%;
}