/* Defaults (English) */
:root {
  --background-image: url('https://sdmx-config.statcan.gc.ca/assets/statcan-stcshared-pceip-int/data-explorer/images/PCEIP-Background.jpg');
  --splash-tooltip-text: "STATCAN Data Explorer";
  --header-image-tooltip-text: "Visit Government of Canada";
  --toolbar-second-item-tooltip-text: "Report of the Pan-Canadian Education Indicators Program";
  --footer-toolbar-first-item-tooltip-text: "SIS-CC";
  --toolbar-language-item-tooltip-text: "Select Language";
}

/* French override */
:lang(fr) {
  --splash-tooltip-text: "Explorateur de données de STATCAN";
  --header-image-tooltip-text: "Visitez Gouvernement du Canada";
  --toolbar-second-item-tooltip-text: "Rapport du Programme d'indicateurs pancanadiens de l'éducation";
  --footer-toolbar-first-item-tooltip-text: "SIS-CC";
  --toolbar-language-item-tooltip-text: "Choisir la langue";
}

/*******************************BACKGROUND IMAGE STYLING**********************************/
/* Styling for the home page background */
#id_home_page {
  background-image: var(--background-image);
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  position: relative; /* Ensure relative positioning for child elements */
}

/* ----------------------------
   HEADER — TOOLBAR
   Detect toolbar that contains the Spotlight input
   ---------------------------- */
/* Header message  */
.MuiToolbar-root.MuiToolbar-regular > :nth-child(2) { 
  font-size: 2rem;
  line-height: 1;
  font-weight: 550;
  border-left: thin solid rgba(0,0,0,0.12);
  padding-left: 15px;
}

/* pipe  */
.MuiToolbar-root.MuiToolbar-regular > :nth-child(3) { 
  flex-grow: 1;
  border-color: #f1f1f1;
}

/* =========================================================
   HEADER IMAGE TOOLTIP (a:has(img[alt="SIS-CC"]) a:has(img[alt="Logo de la communauté de collaboration du système d'information statistique"]))
   ========================================================= */
.MuiToolbar-root.MuiToolbar-regular > :nth-child(1) {
  padding-right: 10px;
  flex-grow:0;
}

/* Tooltip Logo */
a:has(img[alt="Logo de la communauté de collaboration du système d'information statistique"])::after {
  content: var(--header-image-tooltip-text);
  position: absolute;
  left: 10%;
  top: 100%;
  margin-top: 8px;
  color: #000;
  background: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  z-index: 1000;
  visibility: hidden;
}

/* Tooltip arrow */
a:has(img[alt="Logo de la communauté de collaboration du système d'information statistique"])::before {
  display: none;
}

/* Show on hover/focus */
a:has(img[alt="Logo de la communauté de collaboration du système d'information statistique"]):hover::after,
a:has(img[alt="Logo de la communauté de collaboration du système d'information statistique"]):hover::before,
a:has(img[alt="Logo de la communauté de collaboration du système d'information statistique"]):focus-within::after,
a:has(img[alt="Logo de la communauté de collaboration du système d'information statistique"]):focus-within::before {
  opacity: 1;
  visibility: visible;
}


/* Tooltip Logo */
a:has(img[alt="SIS-CC"])::after {
  content: var(--header-image-tooltip-text);
  position: absolute;
  left: 10%;
  top: 100%;
  margin-top: 8px;
  color: #000;
  background: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  z-index: 1000;
  visibility: hidden;
}

/* Tooltip arrow */
a:has(img[alt="SIS-CC"])::before {
  display: none;
}

/* Show on hover/focus */
a:has(img[alt="SIS-CC"]):hover::after,
a:has(img[alt="SIS-CC"]):hover::before,
a:has(img[alt="SIS-CC"]):focus-within::after,
a:has(img[alt="SIS-CC"]):focus-within::before {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   TOOLTIP FOR TOOLBAR "SECOND ITEM" (.toolbar-second-item / p:has(a[target="_blank"]))
   ========================================================= */

.toolbar-second-item::after,
p:has(a[target="_blank"])::after {
  content: var(--toolbar-second-item-tooltip-text);
  position: absolute;
  left: 25%;
  top: 100%;
  margin-top: 8px;
  color: #000;
  background: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  z-index: 1000;
  visibility: hidden;
}

.toolbar-second-item::before,
p:has(a[target="_blank"])::before {
  display: none;
}

.toolbar-second-item:hover::after,
.toolbar-second-item:hover::before,
.toolbar-second-item:focus-within::after,
.toolbar-second-item:focus-within::before,
p:has(a[target="_blank"]):hover::after,
p:has(a[target="_blank"]):hover::before,
p:has(a[target="_blank"]):focus-within::after,
p:has(a[target="_blank"]):focus-within::before {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   LANGUAGE TOOLTIP (.toolbar-language-item / div[aria-labelledby="languages"])
   ========================================================= */

.toolbar-language-item,
div[aria-labelledby="languages"] {
  display: inline-block; /* wrapper width matches link box */
}

/* Tooltip bubble */
.toolbar-language-item::after,
div[aria-labelledby="languages"]::after {
  content: var(--toolbar-language-item-tooltip-text);
  position: absolute;
  left: 60%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 12px;
  color: #000;
  background: #fff;
  padding: 14px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  z-index: 1000;
  visibility: hidden;
}

/* Tooltip arrow */
.toolbar-language-item::before,
div[aria-labelledby="languages"]::before {
  display: none;
}

/* Show on hover/focus */
.toolbar-language-item:hover::after,
.toolbar-language-item:hover::before,
.toolbar-language-item:focus-within::after,
.toolbar-language-item:focus-within::before,
div[aria-labelledby="languages"]:hover::after,
div[aria-labelledby="languages"]:hover::before,
div[aria-labelledby="languages"]:focus-within::after,
div[aria-labelledby="languages"]:focus-within::before {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   SPLASH IMAGE TOOLTIP ( span[role="presentation"])
   ========================================================= */
span[role="presentation"]::after {
  content: var(--splash-tooltip-text);
  color: black;
  background: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  visibility: hidden;
}

/* Tooltip arrow */
span[role="presentation"]::before {
 display: none;
}

/* Show on hover/focus */
span[role="presentation"]:hover::after,
span[role="presentation"]:hover::before,
span[role="presentation"]:focus-within::after,
span[role="presentation"]:focus-within::before {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   Font Size for Accessibility Button Tooltip
   ========================================================= */
.MuiTooltip-tooltip .MuiContainer-root {
  font-size:14px;
}