/* ============================================================
   CSS PERSONALIZADO – TURISME DE LLEIDA
   Paleta de colores basada en el rediseño Figma:
   ------------------------------------------------------------
   1. VARIABLES DE COLOR (CSS Custom Properties)
   2. ESTILOS GENERALES
   3. ENLACES
   4. BOTONES
   5. HEADER Y NAVEGACION
   6. FOOTER
   7. FRONTPAGE
   8. SECCIONES
============================================================ */

/* ============================
   1. VARIABLES DE COLOR
============================= */
:root {
  --color-yellow: #F9B02D;
  --color-yellow-hover: color-mix(in srgb, white 15%, var(--color-yellow));
  --color-GrayScale-100: #433c2f;
  --color-GrayScale-59: #8d8678;
  --color-GrayScale-16: #dbd5cc;
  --color-GrayScale-7: #f2ece6;
  --color-GrayScale-4: #f8f4ee;
}

/* ============================
   2. ESTILOS GENERALES
============================= */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font-family: "Work Sans", sans-serif;
  color: var(--color-GrayScale-100);
}
.bg-black {
    background-color: var(--color-GrayScale-100);
}
.bg-primary {
   background-color: var(--color-yellow);
}
.bg-primary:hover,
.bg-primary:focus{
   background-color: var(--color-yellow-hover) !important;  
}
.bg-primary.text-white {
   color: var(--color-GrayScale-100);
}
.bg-primary.text-white:hover {
   color: var(--color-GrayScale-100);
}
.text-darker {
  color:  var(--color-GrayScale-100);
}
.text-primary {
    color: var(--color-yellow);
}

/* ============================
   3. ENLACES
============================= */
a {
  color: var(--color-GrayScale-100);
  border-color: var(--color-GrayScale-100);
}
a:hover,
a:focus {
  color: var(--color-GrayScale-59);
  border-color: var(--color-GrayScale-59);
}

/* ============================
   4. BOTONES
============================= */
.btn-primary {
  color: var(--color-GrayScale-100);
  background-color: var(--color-yellow);
  border: var(--color-yellow);
}
.btn-primary:hover,
.btn-primary:focus {
  color: var(--color-GrayScale-100);
  background-color: var(--color-yellow-hover);
  border: var(--color-yellow-dark);
}
.btn-black {
  background-color: var(--color-GrayScale-100);
  border: 1px solid var(--color-GrayScale-100);
}
.btn-black:hover,
.btn-black:focus {
  background-color: var(--color-GrayScale-59);
  border: 1px solid var(--color-GrayScale-59);
}
.btn-link {
  color: var(--color-GrayScale-100);
}
.btn-link:focus,
.btn-link:hover,
.btn-link:active {
  color: var(--color-GrayScale-59) !important;
    background-color:transparent !important;
    border-color: transparent !important;
}
.btn-white,
.btn-white.active,
.btn-white:active,
.btn-white:hover,
.open > .btn-white.dropdown-toggle {
    border-color: var(--color-GrayScale-59)
}

.link-parent,
.standalone,
[type="submit"],
button {
  color: var(--color-GrayScale-100);
  background-color: var(--color-yellow-hover);
  border: var(--color-yellow-dark);
}
.active.link-parent,
.link-parent:hover,
.link-parent:active,
.link-parent:focus,
.link-parent:active:hover,
.open > .dropdown-toggle.link-parent:hover,
.open > .dropdown-toggle.link-parent:active,
.open > .dropdown-toggle.link-parent:focus,
.open > .dropdown-toggle.link-parent:active:hover,
.open > .standalone.dropdown-toggle:hover,
.open > .standalone.dropdown-toggle:active,
.open > .standalone.dropdown-toggle:focus,
.open > .standalone.dropdown-toggle:active:hover,
.open > [type="submit"].dropdown-toggle:hover,
.open > [type="submit"].dropdown-toggle:active,
.open > [type="submit"].dropdown-toggle:focus,
.open > [type="submit"].dropdown-toggle:active:hover,
.open > button.dropdown-toggle:hover,
.open > button.dropdown-toggle:active,
.open > button.dropdown-toggle:focus,
.open > button.dropdown-toggle:active:hover,
.standalone.active,
.standalone:hover,
.standalone:active,
.standalone:focus,
.standalone:active:hover,
[type="submit"].active,
[type="submit"]:hover,
[type="submit"]:active,
[type="submit"]:focus,
[type="submit"]:active:hover,
button.active,
button:hover,
button:active,
button:focus,
button:active:hover {
  color: var(--color-GrayScale-100);
  background-color: var(--color-yellow-hover);
  border: var(--color-yellow-dark);
}



/* ============================
   5. HEADER Y NAVEGACION
============================= */
.extraNavBar {
    top: 47px;
}
.extraNavBar__link {
    background-color: #4F4C4C;
}
.extraNavBar__link:focus, .extraNavBar__link:hover {
    background-color: var(--color-GrayScale-100);    
}
.extraNavBar .documentActions a:focus,
.extraNavBar .documentActions a:hover {
    color: var(--color-yellow);
}
#topMenu #home {
    color: var(--color-yellow) !important; 
}
#content-header,
#portal-top {
    background-color: var(--color-GrayScale-100);
}
#content-header .text-darker,
#portal-top .text-darker {
    color: #fff;
}
#portal-top a:hover,
#portal-top button:hover {
    opacity: 0.6 !important;
}
#portal-top {
  border-bottom: 1px solid #fff;
}
#portal-top #languageButton {
    color: #fff;
}
#portal-top #languageButton {
    color: #fff;
}
#portal-top .open > button#languageButton.dropdown-toggle:focus,
#portal-top .open > button#languageButton.dropdown-toggle:focus-within {
    background-color: transparent !important;
    border-color: transparent !important;
}
#portal-top #btn-xeerpa-join,
#portal-top #btn-xeerpa-join:hover,
#portal-top #btn-xeerpa-join:focus {
   background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
}
#portal-top .phoneLink,
#portal-top .searchBox__button{
    background-color: var(--color-GrayScale-59);
}
#portal-top .phoneLink:hover,
#portal-top .phoneLink:focus,
#portal-top .searchBox__button:hover,
#portal-top .searchBox__button:focus {
    background-color: var(--color-GrayScale-59);
    opacity:1 !important;
}
#portal-top #topMenu {
    margin-top: 0 !important;
}
#portal-top .xeerpa-user-info__wrapper {
    margin-bottom: 5px;
}
.portalLogo__paeria > * img.portalLogo__escut {
  filter: brightness(0) invert(1);
}
#mainMenu .nav > li > a {
    color: #fff;
}
#mainMenu .nav > li > a:hover,
#mainMenu .nav > li > a:focus,
#mainMenu .nav > li > a[aria-expanded="true"],
#mainMenu .nav > li.current > a {
    color: var(--color-yellow) !important;
}
#mainMenu .nav > li > a::after,
#mainMenu .nav > li.current > a::after {
    background-color: var(--color-yellow);
}
.subNav__link {
    color: var(--color-GrayScale-100);
}
.subNav__close:hover,
.subNav__close:focus {
    background-color: var(--color-yellow);
    color: var(--color-GrayScale-100);
}
.subNav__link:hover,
.subNav__link:focus{
    color: var(--color-GrayScale-59);
}
.map-container .leaflet-container a {
     color: var(--color-GrayScale-100)
}


/* ============================
   6. FOOTER
============================= */
#portal-footer-wrapper {
    background-color: var(--color-GrayScale-100);
}
#portal-footer-wrapper h2 {
    color: var(--color-yellow);  
}
#portal-footer-wrapper a.text-white:focus,
#portal-footer-wrapper a.text-white:hover {
    color: var(--color-yellow);
}

/* ============================
   7. FRONTPAGE
============================= */
.slideNavWrapper {
     color: var(--color-GrayScale-100);
     background-color: var(--color-yellow);
}
.slideNavWrapper .owl-next,
.slideNavWrapper .owl-prev {
    background-color: transparent;
    color: var(--color-GrayScale-100);
}
.slideNavWrapper .owl-next:hover,
.slideNavWrapper .owl-prev:hover {
    color: var(--color-GrayScale-100);
    background-color: var(--color-yellow-hover);
}
.banners__link::after {
    background-color: var(--color-yellow);
    opacity:0.75;
}

.homeEvents__category a {
    background-color: var(--color-GrayScale-59);
    color: #fff;
}
.homeEvents__category a:hover,
.homeEvents__category a:focus {
    background-color: var(--color-GrayScale-100);
    color: #fff;
}
.homeEvents__link,
.homeEvents__link:hover,
.homeEvents__link:focus {
    color: var(--color-GrayScale-100);
}
.homeEvents__item {
    background-color:var(--color-GrayScale-4);
    border-color: var(--color-GrayScale-7);
}
.homeEvents__item:hover {
   background-color: var(--color-yellow);
   color: var(--color-GrayScale-100);
}
.homeEvents__item:hover .homeEvents__link {
    color: var(--color-GrayScale-100);
}
.socialShare__button,
.socialShare__button:hover,
.socialShare__button:focus {
    background-color: var(--color-yellow);
    color: var(--color-GrayScale-100);
}
.socialShare__button .text-white {
    color: var(--color-GrayScale-100);
}
.socialShare__list a:focus,
.socialShare__list a:hover {
    background-color: var(--color-yellow);
}
.extraNavBar__toggle {
  color: var(--color-GrayScale-100);
  background-color: var(--color-yellow);
  border: var(--color-yellow);
}
.extraNavBar__toggle:hover,
.extraNavBar__toggle:focus {
  color: var(--color-GrayScale-100);
  background-color: var(--color-yellow-hover);
  border: var(--color-yellow-dark);
}
.destacatsBanners__item {
    background-color: #F0ECE6;
    position: relative;
}
.destacatsBanners__item:nth-child(2) {
    background-color: #F7F4EE;
}


/* ============================
   8. SECCIONES
============================= */
#portal-column-one .portlet.portletNavigationTree nav.portletContent > ul > li.navTreeCurrentNode,
 #portal-column-one .portlet.portletNavigationTree nav.portletContent > ul > li.navTreeCurrentNode.navTreeFolderish,
#portal-column-one .portlet.portletNavigationTree nav.portletContent > ul > li.navTreeItemInPath{
    background-color: var(--color-yellow);
}
#portal-column-one .portlet.portletNavigationTree nav.portletContent > ul > li.navTreeCurrentNode a,
#portal-column-one .portlet.portletNavigationTree nav.portletContent > ul > li.navTreeCurrentNode.navTreeFolderish a,
#portal-column-one .portlet.portletNavigationTree nav.portletContent > ul > li.navTreeItemInPath a {
    color: var(--color-GrayScale-100);
}
.pagination ul > .active > a, .pagination ul > .active > a:focus,
.pagination ul > .active > a:hover, .pagination ul > .active > span,
.pagination ul > .active > span:focus, .pagination ul > .active > span:hover {
  background-color: var(--color-GrayScale-100);
  border-color: var(--color-GrayScale-100);
}
.pagination ul > li > a,
.pagination ul > li > span,
.pagination ul > li > a:focus, .pagination ul > li > a:hover,
.pagination ul > li > span:focus, .pagination ul > li > span:hover {
    color: var(--color-GrayScale-100);
}
.label {
  color: var(--color-GrayScale-100);
}
.liveSearchForm .pattern-pickadate-wrapper::before {
    color: var(--color-GrayScale-100)
}
.selectorEvents.btn-primary,
.selectorEvents:focus,
.selectorEvents:hover {
    background-color: var(--color-GrayScale-59);
}
.selectorEvents.btn-primary:focus,
.selectorEvents.btn-primary:hover {
    background-color: var(--color-GrayScale-100);
    color: #fff;
}
.searchEvents__item {
    border-color: var(--color-GrayScale-7);
    background-color: var(--color-GrayScale-4);
}
.searchEvents__item:focus-within,
.searchEvents__item:hover {
    background-color: var(--color-yellow);
    color: var(--color-GrayScale-100);
}
.searchEvents__date {
    background-color: var(--color-yellow);
    color: var(--color-GrayScale-100);
}
.searchEvents__link:focus,
.searchEvents__link:hover {
    color: var(--color-GrayScale-100);
}
#category .link-category:focus, #category .link-category:hover {
   background-color: var(--color-GrayScale-100);
}
.map-container .map-menu {
   background-color: var(--color-GrayScale-16);
    color: var(--color-GrayScale-100);
}
.leaflet-marker-icon {
  filter: sepia(1);
}
.leaflet-popup {
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  bottom: 45px !important;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  box-shadow: none;
}
.multimediaItem__icon {
    background-color: var(--color-yellow);
    color: var(--color-GrayScale-100);
}
.multimediaItem figcaption {
    background-color: var(--color-yellow);
    color: var(--color-GrayScale-100);
}
#search-results-wrapper .autotabs .autotoc-nav a.active {
    color: var(--color-yellow);
  border-bottom: .3rem solid var(--color-yellow);
}
body.template-contact-info .view-name-contact-info #form-buttons-send {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
    color: var(--color-GrayScale-100);
}
#form-buttons-send.active,
#form-buttons-send:active,
#form-buttons-send:hover,
.open > #form-buttons-send.dropdown-toggle {
    color: var(--color-GrayScale-100);
    background-color: var(--color-yellow-hover);
    border-color: var(--color-yellow-hover);
}
body.section-ambaixadors .easyformForm input[type="submit"] {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
    color: var(--color-GrayScale-100);
}
.open > body.section-ambaixadors .easyformForm input[type="submit"].dropdown-toggle,
body.section-ambaixadors .easyformForm input[type="submit"].active,
body.section-ambaixadors .easyformForm input[type="submit"].focus,
body.section-ambaixadors .easyformForm input[type="submit"]:active,
body.section-ambaixadors .easyformForm input[type="submit"]:focus,
body.section-ambaixadors .easyformForm input[type="submit"]:hover,
body.section-ambaixadors .easyformForm input[type="submit"]:active:hover {
  color: var(--color-GrayScale-100);
  background-color: var(--color-yellow-hover);
  border-color: var(--color-yellow-hover);
}
#cookieklaro .cookie-modal a, #cookieklaro .text-primary {
 color: var(--color-yellow) !important;
}