/* Subwebs fetes amb eXeLearning (linkat/ i ia/) vestides amb l'estil de Tecnocat.
   Substitueix base.css, content.css i nav.css d'eXe. Va després d'estil.css. */

body.exe-web-site { background: var(--fons); max-width: none; padding: 0; }
.engruna { max-width: 950px; margin: 30px auto -16px; padding: 0 15px; }

#content { max-width: 950px; margin: 40px auto; padding: 0 15px; background: none; }
#content > * { min-width: 0; }

/* Ocults */
#skipNav, .sr-av, .toggle-idevice, #siteFooter, #made-with-eXe, #toggle-nav, #nav-toggler, .js-hidden,
.translate-tooltip-mtz, .translate-button-mtz, audio.audio-for-speech { display: none !important; }
a[name="main"] { display: none; }

/* Títol de la subweb */
#header, #emptyHeader {
  background: var(--paper); box-shadow: 0 0 15px #cccccc57; margin: 0 0 20px; padding: 26px 20px;
  text-align: center; font: 700 26px/1.3 var(--serif); color: var(--fosc); border: 0; border-radius: 0; height: auto; min-height: 0;
}
#headerContent { padding: 0; font: inherit; color: inherit; background: none; }

/* Índex de la subweb: tecnocat.js el posa dins un desplegable (details.index-subweb) */
.index-subweb { background: var(--paper); box-shadow: 0 0 15px #cccccc57; margin: 0 0 20px; }
.index-subweb summary {
  list-style: none; cursor: pointer; padding: 14px 22px; display: flex; gap: 12px; align-items: baseline;
  font: 13px var(--sans); color: var(--suau);
}
.index-subweb summary::-webkit-details-marker { display: none; }
.index-subweb summary::before { content: "☰"; color: var(--verd); font-size: 16px; }
.index-subweb summary b { font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--fosc); }
.index-subweb summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.index-subweb summary::after { content: "▾"; margin-left: auto; color: var(--suau); }
.index-subweb[open] summary::after { content: "▴"; }
.index-subweb[open] summary { border-bottom: 1px dashed var(--linia); }
#siteNav { float: none; width: auto; margin: 0; padding: 10px 22px 16px; background: var(--paper); font-size: 14px; border: 0; }
#siteNav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 30px; }
#siteNav li { margin: 0; padding: 0; break-inside: avoid; }
#siteNav a {
  display: block; padding: 7px 4px; border-bottom: 1px dashed var(--linia); background: none;
  color: var(--text); font-size: 14px; line-height: 1.45;
}
#siteNav a:hover, #siteNav a:focus { color: var(--blau); text-decoration: none; background: none; }
#siteNav a.main-node { font-weight: 700; color: var(--fosc); }
#siteNav a.active, #siteNav #active > a { color: var(--blau); font-weight: 700; }
#siteNav ul ul { columns: 1; }
#siteNav ul ul a { padding-left: 16px; }

/* Paginació anterior / següent */
.pagination { font: 12px var(--sans); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 20px; display: flex; justify-content: space-between; gap: 10px; color: transparent; }
.pagination .sep { display: none; }
.pagination a { background: var(--verd); color: #fff; padding: 0 16px; line-height: 36px; display: inline-block; }
.pagination a:hover { background: #4d6545; text-decoration: none; }
.pagination a.next { margin-left: auto; }
#bottomPagination .pagination { margin-top: 24px; }

/* Contingut */
#main-wrapper { padding: 0; }
#main { background: var(--paper); box-shadow: 0 0 15px #cccccc57; padding: 40px 44px; width: auto; min-height: 0; }
#nodeDecoration { padding: 0; margin: 0 0 24px; border: 0; background: none; text-align: center; }
#nodeDecoration::after { content: ""; display: block; height: 20px; width: 62px; margin: 16px auto 0; background: var(--blau) url(../imatges/tema/shape1.png) no-repeat center; }
#nodeTitle { margin: 0; padding: 0; color: var(--fosc); font: 700 28px/1.3 var(--serif); letter-spacing: 0; text-shadow: none; }

#main p { text-align: justify; }
#main span[style] { font-family: inherit !important; font-size: inherit !important; }
#main font { font-family: inherit !important; font-size: inherit !important; }
#main img { max-width: 100%; height: auto; }
#main table { max-width: 100%; border-collapse: collapse; }
#main td, #main th { padding: 6px 10px; vertical-align: top; }
#main pre { white-space: pre-wrap; background: #f3f5f6; padding: 12px; }

.iDevice_wrapper { margin: 0 0 28px; }
.iDevice { border: 0; padding: 0; background: none; }
.iDevice.emphasis1 { border-top: 1px dashed var(--linia); padding-top: 22px; }
.iDevice_icon { float: left; width: 32px; height: 32px; margin: 0 12px 0 0; }
.iDeviceTitle, #main .iDevice_header h1.iDeviceTitle {
  font: 700 20px/1.35 var(--serif); color: var(--fosc); margin: 2px 0 16px; padding: 0; background: none; border: 0;
}
.iDevice_header { background: none; padding: 0; min-height: 0; }
.iDevice_inner, .iDevice_content_wrapper { clear: both; padding: 0; }
.iDevice_content { padding: 0; }
.exe-text { overflow: hidden; }

/* Galeries d'imatges */
.exeImageGallery { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.exeImageGallery li { margin: 0; padding: 0; width: 140px; }
.exeImageGallery a { display: block; padding: 6px; border: 1px solid var(--linia); background: #fafbfa; }
.exeImageGallery a:hover { border-color: var(--blau); }
.exeImageGallery img { display: block; width: 128px; height: 128px; object-fit: cover; margin: 0 auto; }
.exeImageGallery .tit { display: block; font-size: 11px; line-height: 1.35; margin-top: 6px; color: var(--suau); height: 3.9em; overflow: hidden; }

/* Botons de realimentació, etc. */
.iDevice_buttons input, .feedbackbutton, #main input[type=button], #main input[type=submit] {
  background: var(--verd); color: #fff; border: 0; font: 12px/34px var(--sans); text-transform: uppercase; letter-spacing: .08em; padding: 0 16px; cursor: pointer;
}
.feedback { margin-top: 12px; padding: 14px 18px; background: #f7f9fa; border-left: 3px solid var(--verd); }

/* Llicència al final */
#content > p[align="center"], #content > p:last-of-type { font: 12px var(--sans); color: var(--suau); text-align: center; margin: 20px 0 0; }

@media (max-width: 767px) {
  #content { margin: 24px auto; padding: 0 16px; }
  #main { padding: 26px 18px; }
  #main p { text-align: left; }
  #header, #emptyHeader { font-size: 22px; }
  #nodeTitle { font-size: 23px; }
  #siteNav ul { columns: 1; }
  .exeImageGallery li { width: calc(50% - 6px); }
  .exeImageGallery img { width: 100%; height: auto; aspect-ratio: 1; }
}

/* Visor d'imatges d'eXe (lightbox): mesura la imatge a mida real, així que no li ha d'afectar
   el max-width:100% general ni el box-sizing d'estil.css */
.lightbox, .lightbox *, .lightboxOverlay { box-sizing: content-box; }
.lightbox img, .lightbox .lb-image { max-width: none; }