/**
 * d11-fixes.css
 * Bridges Bootstrap 3 → Bootstrap 5 visual differences for galimentaria theme.
 * Ensures D11 renders identically to D7 for header, menu, footer and sidebars.
 */

/* =========================================================
   Bootstrap 5 CSS Custom Properties — valors per defecte
   El validator OAW (CSS2/3) no entén propietats buits com:
   --bs-btn-font-family:;  →  cal valor explícit
   Tots els valors assignats son equivalents visuals al buit.
   ========================================================= */
:root {
  --bs-btn-font-family: inherit;
  --bs-dropdown-box-shadow: none;
  --bs-nav-link-font-weight: normal;
  --bs-card-title-color: inherit;
  --bs-breadcrumb-bg: transparent;
  --bs-btn-close-filter: none;
  --bs-toast-color: inherit;
  --bs-modal-footer-bg: transparent;
  --bs-tooltip-margin: 0;
  --bs-carousel-control-icon-filter: none;
}

/* =========================================================
   HEADER — MENÚ PRINCIPAL (#menusup)
   D7: ul.menu.nav li.leaf > a  →  D11: ul.navbar-nav li.nav-item > a.nav-link
   ========================================================= */

/* Force horizontal layout */
#menusup .navbar-nav {
  float: right;
  flex-direction: row !important;
  flex-wrap: nowrap;
}

/* Items inline, same as D7's  display:inline  rule */
#menusup .navbar-nav > .nav-item {
  display: inline-block;
  position: relative;
}

/* Top-level link styling — matches #menusup .nav > li > a */
#menusup .navbar-nav > .nav-item > .nav-link {
  display: inline-block !important;
  font-size: 18px !important;
  padding-top: 0 !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
  padding-bottom: 5px !important;
  color: #c40a21 !important;
  background-color: transparent !important;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  text-decoration: none;
}

/* Remove Bootstrap 5 caret on top-level items */
#menusup .navbar-nav > .nav-item > .nav-link::after {
  display: none !important;
}

/* Active/current link */
#menusup .navbar-nav > .nav-item > .nav-link.is-active, .nav-link.active,
#menusup .navbar-nav > .nav-item > .nav-link[aria-current="page"] {
  border-bottom: 3px solid #c40a21 !important;
}

/* Hover */
#menusup .navbar-nav > .nav-item > .nav-link:hover,
#menusup .navbar-nav > .nav-item > .nav-link:focus {
  background-color: #fff !important;
  border-bottom: 3px solid #97c00c !important;
  color: #c40a21 !important;
}

/* Show dropdown on hover (D7 behaviour, not click) */
/* CSS handles the visual; JS in custom.js adds Bootstrap's .show class */
#menusup .navbar-nav > .nav-item:hover > .dropdown-menu,
#menusup .navbar-nav > .nav-item.show > .dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove the dropdown-toggle caret / click requirement */
#menusup .nav-item.dropdown > .nav-link.dropdown-toggle {
  pointer-events: auto;
}

/* Social icons: eliminate whitespace-glyph artifacts.
   The block HTML is  <a> <img> </a> <a> …
   The trailing space INSIDE each <a> renders as a visible glyph.
   Solution: font-size:0 on both the <p> and the <a> so all whitespace
   text nodes are zero-width.  Images are unaffected by font-size. */
.region-head-xxss .field__item p,
.region-head-xxss .field__item p a {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}
.region-head-xxss .field__item p a {
  display: inline-block;
  vertical-align: middle;
}
/* Belt-and-braces: nuke any pseudo-element separator */
.region-head-xxss .field__item a + a::before,
.region-head-xxss .field__item p a + a::before {
  content: none !important;
  display: none !important;
}

/* Dropdown menu styles */
#menusup .dropdown-menu {
  border-radius: 0;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  padding: 5px 0;
  min-width: 200px;
}

#menusup .dropdown-menu .nav-item > a,
#menusup .dropdown-menu .dropdown-item {
  color: #343434 !important;
  font-size: 15px;
  padding: 5px 15px;
  white-space: normal;
}

#menusup .dropdown-menu .dropdown-item:hover,
#menusup .dropdown-menu .dropdown-item:focus {
  background-color: #f5f5f5;
  color: #c40a21 !important;
}

/* Nested dropdown (level 3) */
#menusup .dropdown-menu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

/* Hide the toggle expand button in main nav */
#menusup button.dropdown-toggle {
  display: none !important;
}

/* =========================================================
   HEADER — Xarxes Socials (head_xxss region)
   ========================================================= */

.region-head-xxss {
  float: right;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* =========================================================
   SIDEBAR — MENÚ LATERAL
   D7: #block-menu-block-1  →  D11: #block-galimentaria-menu-sidebar
   ========================================================= */

#block-galimentaria-menu-sidebar {
  margin-top: 10px;
}

#block-galimentaria-menu-principal h2,
#block-galimentaria-main-menu h2 {
  display: none !important;
}

/* Make sidebar menu vertical, not horizontal */
#block-galimentaria-menu-sidebar .navbar-nav {
  flex-direction: column !important;
  float: none !important;
  width: 100%;
}

#block-galimentaria-menu-sidebar .nav-item {
  display: block !important;
  width: 100%;
}

#block-galimentaria-menu-sidebar .nav-link,
#block-galimentaria-menu-sidebar .dropdown-item {
  color: #c40a21 !important;
  border-bottom: 3px solid #fff;
  padding: 4px 0;
  font-size: 16px;
  display: block;
  text-decoration: none;
  white-space: normal;
  word-break: break-word;
}

#block-galimentaria-menu-sidebar .nav-link:hover,
#block-galimentaria-menu-sidebar .dropdown-item:hover {
  background-color: #fff !important;
  border-bottom: 3px solid #97c00c;
}

#block-galimentaria-menu-sidebar .nav-link.active,
#block-galimentaria-menu-sidebar .dropdown-item.active,
#block-galimentaria-menu-sidebar .nav-link.is-active,
#block-galimentaria-menu-sidebar .dropdown-item.is-active {
  background-color: #fff !important;
  color: #c40a21 !important;
  font-weight: bold;
  border-bottom: 3px solid #97c00c;
}

#block-galimentaria-menu-sidebar .nav-level-2 > li > a.active ,
#block-galimentaria-menu-sidebar .nav-level-3 > li > a.active {
  background-color: #fff !important;
  color: #595959  !important;
  font-weight: bold;
  border-bottom: 3px solid #97c00c;
}
/* Submenu — always open, no Bootstrap positioning */
#block-galimentaria-menu-sidebar .dropdown-menu {
  position: static !important;
  display: block !important;
  float: none;
  border: none;
  box-shadow: none;
  padding-left: 20px;
  background: transparent;
}

/* L2 items: RED (same as D7) */
#block-galimentaria-menu-sidebar .nav-level-1 > li > a {
  color: #c40a21 !important;
  font-size: 16px;
}

/* L3+ items: GREY (indented, like D7) */
#block-galimentaria-menu-sidebar .nav-level-2 > li > a,
#block-galimentaria-menu-sidebar .nav-level-3 > li > a {
  color: #595959 !important;
  font-size: 16px;
  padding-left: 10px;
  white-space: normal;
  word-break: break-word;
}
.sidebar-section-title a {
  color: #c40a21;
  border-bottom: 5px solid #c00b1e !important;
  font-size: 30px  !important;
  margin-bottom: 10px !important;
  
}
/* L1 section header: slightly larger like D7 */
#block-galimentaria-menu-sidebar .nav-level-0 > li > a.nav-link {
  font-size: 16px !important;
  font-weight: bold;
}

/* Remove caret in sidebar */
#block-galimentaria-menu-sidebar .nav-link::after,
#block-galimentaria-menu-sidebar .dropdown-toggle::after {
  display: none !important;
}

/* JS hides non-active L1 submenus — needs !important to beat .dropdown-menu rule */
#block-galimentaria-menu-sidebar .sidebar-section-hidden {
  display: none !important;
}

/* =========================================================
   PREHEADER BUSCADOR
   Bootstrap 5 removed text-right (now text-end). Fix alignment
   so the search input appears on the right side like D7.
   ========================================================= */

.colbr-input {
  text-align: right !important;
}

/* =========================================================
   FOOTER BANNERS (banners_peu view)
   D7: Bootstrap 3 float-based col-md-2 → 6 logos per row.
   D11: replicate with flex items at 16.667% each (= col-md-2).
   ========================================================= */

.view-id-banners_peu .view-content {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}

/* Flatten the rows so all cells participate directly in the flex container */
.view-id-banners_peu .views-row {
  display: contents;
}

/* Each views-field is one logo cell — 1/6 of container width */
.view-id-banners_peu .views-field {
  flex: 0 0 16.667%;
  max-width: 16.667%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
}

.view-id-banners_peu .field-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Each col-md-2 wrapper */
.view-id-banners_peu .col-md-2 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0;
  text-align: center;
}

/* Scale images to match D7 col-md-2 logo size */
.view-id-banners_peu img {
  width: auto !important;
  max-width: 200px !important;
  height: auto !important;
  max-height: 90px !important;
  display: block;
  margin: 0 auto;
}

/* =========================================================
   BANNER HOME 2a-2d (zona-img / zona-text)
   D7: .zona-text at top:-70px overlays the image
   ========================================================= */

.region-home-central-2a .views-field-nothing,
.region-home-central-2b .views-field-nothing,
.region-home-central-2c .views-field-nothing,
.region-home-central-2d .views-field-nothing {
  position: relative;
}

/* =========================================================
   NOT-FRONT body class — H1 page title
   D7: body.not-front h1.page-header
   D11: adds not-front via preprocess, so rule should apply
   ========================================================= */

.not-front h1.page-header {
  font-size: 35px;
  font-weight: bold;
  margin-top: 15px;
  border-bottom: 5px solid #c00b1e;
  margin-bottom: 30px;
}

/* =========================================================
   Bootstrap 5 "visually-hidden" on block titles
   — hide menu block h2 labels in header
   ========================================================= */

#block-galimentaria-menu-principal .visually-hidden,
.region-menu-principal .visually-hidden {
  display: none !important;
}

/* =========================================================
   BREADCRUMB — Bootstrap 5 uses ol.breadcrumb
   ========================================================= */

.breadcrumb {
  background-color: #fff;
  margin-top: 10px;
  padding-left: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* =========================================================
   REGION CONTENT links
   ========================================================= */

.region-content a,
.region-content a:hover,
.region-content a:visited {
  color: #4a6300;
}

/* =========================================================
   SLIDER CAROUSEL — Bootstrap 3 .item → Bootstrap 5 .carousel-item
   The slider_home view outputs rows with class="item" (Bootstrap 3).
   Bootstrap 5 needs .carousel-item for CSS display and JS cycling.
   CSS aliases .item as .carousel-item; JS in custom.js adds the class
   so Bootstrap 5 JS can properly cycle the slides.
   ========================================================= */

#myCarousel .carousel-inner .item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .6s ease-in-out;
}

#myCarousel .carousel-inner .item.active,
#myCarousel .carousel-inner .item.carousel-item-next,
#myCarousel .carousel-inner .item.carousel-item-prev {
  display: block;
}

/* Ensure carousel images fill the full width */
#myCarousel img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   SIDEBAR WELL (D7 had .well class on sidebar region)
   ========================================================= */

.region-sidebar-first {
  background-color: #fff;
  border: 0;
  padding-left: 15px;
}

/* =========================================================
   VISTA DONANTS — Grid 4 columnes (replica D7 col-md-3)
   ========================================================= */

.view-donants .view-content {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.view-donants .views-row {
  width: 25%;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}

.view-donants .views-row a img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .view-donants .views-row { width: 33.33%; }
}
@media (max-width: 575px) {
  .view-donants .views-row { width: 50%; }
}

/* =========================================================
   ACCESSIBILITAT — Focus visible (override Bootstrap 5)
   Bootstrap 5 usa box-shadow per als formularis però l'OAW
   detecta outline:0. Afegim outline explícit com a complement.
   ========================================================= */

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-range:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #be0b20 !important;
  outline-offset: 0 !important;
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid #be0b20 !important;
  outline-offset: 2px !important;
}

header {
  margin-top: 16px;
}