/* HOME PAGE RELATED STYLES 
-----------------------------------------------------------------------------------*/

/* --- 1. Base Container Styles --- */
.tab-panel {
  max-width: 800px;  /* Prevents list from stretching too wide on large screens */
  margin: 0 auto;    /* Centers the list within your tab component */
}

.vertical-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- 2. Combined Link Styles (UI + Accessibility) --- */
.vertical-nav a {
  /* Layout: Fills horizontal space */
  display: flex;
  justify-content: flex-start; /* Pushes text left, icons/chevrons right */
  align-items: center;
  width: 100%;
  
  /* Sizing: Large hit area (A11y) */
  padding: 16px 20px; 
  margin-bottom: 12px;
  min-height: 60px;    /* Explicitly guarantees a large enough target */
  border-radius: 8px;
  box-sizing: border-box; /* Ensures padding doesn't break the width */
  
  /* Typography & Visuals */
  text-decoration: none;
  color: #1a1a1a;
  background-color: #edededd1; /* Light base for a "button" feel */
  transition: all 0.2s ease;
}
.vertical-nav li a:hover {
	text-decoration: none;
}

/* --- 3. Element Positioning --- */
.nav-icon {
  width: 45px;      /* Consistent size for all icons */
  height: 45px;
  object-fit: contain;
  margin-right: 20px; /* Fixed gap: Text stays right after the icon */
  border: 1px solid black;   /* Light grey border for definition */
  border-radius: 4px;   /* Softens the corners to match modern UI */  
  flex-shrink: 0;   /* Prevents icon from squishing */
}

.link-text {
  /* Pushes the chevron to the far right while keeping text left */
  flex-grow: 1; 
  text-align: left;
  font-weight: 500;
}

.chevron {
  flex-shrink: 0;
  margin-left: 10px;
  color: #666;
}

/* --- 4. Interactive States --- */
.vertical-nav a:hover,
.vertical-nav a:focus-visible {
  background-color: #f0f4f8;
  text-decoration: underline;
  outline: 3px solid #0056b3; /* High-contrast focus (A11y) */
  outline-offset: -3px;
}

/*Overright parent CSS "tabcontent"; reduce right margin*/
#mrgn-reduc {
    margin-right: 0px;
}
/* Adjusted red color to meet 4.5:1 minimum WCAG (AA) standards */
ul.tabs li.selected a, ul.tabs li.selected a:hover {
    color: #E00000 !important;
}

/* 1. Reset the default list styling */
ol.nested-list {
    list-style-type: none;
    counter-reset: section;
    padding-left: 0;
}

/* 2. Create the counter logic */
ol.nested-list li {
    counter-increment: section;
    margin-bottom: 20px;
}

/* 3. Style the number and subtitle */
ol.nested-list li::before {
    content: counters(section, ".") ". ";
    /* font-weight: bold; */
}

/* 4. Formatting for the paragraphs inside the list */
ol.nested-list p {
    margin: 5px 0 5px 25px; /* Indents text so it doesn't sit under the number */
    color: #333;
}

#methodologie ul, #sources ul {
    list-style-type: none;
    padding-left: 0;
}
#methodologie ul li, #sources ul li {
    margin-bottom: 5px;
    padding-left: 1em;
}
#methodologie ol {
    padding-left: 1em;
}
#methodologie li a {
    font-weight: bold;
}
/*#methodologie ol {
    list-style-type: none;
    counter-reset: section;
    padding-left: 0;
}
#methodologie ol li {
    counter-increment: section;
}
#methodologie ol li::before {
    content: counters(section, ".") ". ";
}*/

/* 5. Specific list hyphen */
.list-hyphen {
  list-style-type: "- "; /* Applies to this class only */
  padding-left: 1.5em; /* Reduces the default 40px/2.5em indent */
}

/* Bold the subtitle text specifically */
.subtitle {
    font-weight: bold;
}

/* Underline the text specifically */
.underline {
    text-decoration: underline;
}

/* Base Container */
.sankey-container {
    width: 100%;
    border: 1px solid #ddd;
    /* REMOVED Quick transition for user when switching between scroll and full */
    /* transition: background-color 0.5s ease;  */
}

/* SANKEY INDIVIDUAL PAGE AND CANVAS STYLES 
-----------------------------------------------------------------------------------*/
span.arrow {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  
  /* spacing */
  margin-right: 12px; 
  
  vertical-align: middle;
  position: relative;
  top: -1px; /* Fine-tune centering with the text baseline */
}
.arrow-down {
	transform: rotate(135deg) !important;	/*	override wet4 styling to force arrow downwards	*/
	left: 4px;
}

/* FIT MODE: SVG fills the width of the screen */
.sankey-container.fit {
    overflow: hidden;
}
.sankey-container.fit svg {
    width: 100%;
    height: auto; 
    cursor: default;
}

/* SCROLL MODE: Container stays fixed height, allows internal scrolling */
.sankey-container.scroll {
    overflow: auto !important; /* Forces scrollbars if the SVG inside is large */
    height: 85vh; 
    /* REMOVED */
    /* background-color: #f0f0f0; */
    border: 2px solid #335075 !important; /* Matches button color */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05); /* Adds depth */
    cursor: default; /* Only shows when the 'window' is open */
}

.sankey-container.scroll:active {
    cursor: grabbing; /* Feedback while user is clicking/dragging the scrollbar */
}

.sankey-container:focus {
    outline: 3px solid #ffbf47; /* Standard accessibility 'gold' outline */
    outline-offset: 2px;
}

.item-container {
    padding-bottom: 10px;
    display: flex;
    gap: 10px
}

.item-container-right {
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.download-link, .reset-view-btn {
    margin-top: 10px; 
    margin-bottom: 10px;
    padding: 10px 16px; 
    cursor: pointer; 
    font-family: sans-serif; 
    font-weight: bold; 
    background-color: #eaebed; 
    color: #335075; 
    border: none; 
    border-radius: 4px;
}

#methodology_detail, #notes_detail {
    margin-top: 10px; 
    margin-bottom: 10px;
    padding: 10px 16px; 
    cursor: pointer; 
    font-family: sans-serif; 
    font-weight: bold; 
    background-color: #eaebed; 
    color: #335075; 
    border: none; 
    border-radius: 4px;
}

#download-link a, a:hover {
    text-decoration: none;
}

#methodology_detail a, a:hover {
    text-decoration: none;
}

#notes_detail a, a:hover {
    text-decoration: none;
}

/* #zoomToggle{
    margin-top: 10px; 
    margin-bottom: 10px;
    padding: 10px 16px; 
    cursor: pointer; 
    font-family: sans-serif; 
    font-weight: bold; 
    background-color: #eaebed; 
    color: #335075; 
    border: none; 
    border-radius: 4px;
} */

/* CSS for link navigation to top  */
.jump-to-top {
  display: flex;
  justify-content: flex-start;

}

.container-btm {
    display: flex;
    justify-content: space-between;
}

.left-div {
    float: left;
    margin-top: 20px;
}

.right-div {
    float: right;
}

.consumption-link a, a:hover{
    text-decoration: none !important;
}

/* SANKEY INHERITED SVG-RELATED STYLES 
-----------------------------------------------------------------------------------*/

#SvgSupplementTextWrapper {
  margin: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

#SvgSupplementTextWrapper .modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 32px;
  border: 1px solid #888;
  width: 80%;
}

#SvgSupplementTextWrapper .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#SvgSupplementTextWrapper .close:hover,
#SvgSupplementTextWrapper .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

tspan {
	white-space: pre;
/*	text-align: left;
	margin: 0;
	padding: 0;*/
}

#SvgSankey {
}

#SvgToolTip{
	transition: opacity 1s;
}

.highlighted { 
	filter: url(#highlightFilter);
}

.addOpacity {
	filter: url(#opacityFilter);
}

.hasLink:hover {
	cursor: pointer;
}

.flow:hover {
    cursor:pointer;
}

#SvgToolTipText {
	font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}

#SvgToolTipText .title {
	font-size: 150%;
	font-weight: bold;
}

#SvgToolTipText .caption {
	font-size: 120%;
	font-weight: bold;
}

#SvgToolTipText .section {
	font-weight: bold;
}

#SvgToolTipText .flow {
}

#SvgToolTipText .stock {
	fill: #606060;
}

#SvgToolTipBackground {
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0.8
}

.review_text {
    background-color: yellow; 
    outline: 2px solid red;
}