/* Font Imports */

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-Thin.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-ThinItalic.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-Light.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-LightItalic.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-Regular.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-RegularItalic.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-Medium.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-MediumItalic.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-Bold.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-BoldItalic.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-Black.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../assets/fonts/Aeonik-BlackItalic.woff2') format('woff2'),
         url('../assets/fonts/Aeonik-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'PPEditorialNew';
    src: url('../assets/fonts/PPEditorialNew-Italic.woff2') format('woff2'),
         url('../assets/fonts/PPEditorialNew-Italic.woff') format('woff');
    font-style: italic;
    font-display: swap;
}

.main-content {
    max-width: 1440px !important;  /* Prevents content from stretching beyond 1440px */
    margin: auto;      /* Centers content in the viewport */
    padding: 50px 0 80px 0;
    width: 100%;         /* Allows responsiveness below 1440px */
}

/* General styling for responsiveness */
html, body {
    font-family: 'Aeonik', Arial, sans-serif;
    margin: 0;  /* Remove margin to keep full-width elements aligned */
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    background-color: white;
}

/* Prevent scrolling on homepage */
html.homepage-active, body.homepage-active {
    overflow: hidden;
    height: 100vh;
    max-height: 100vh;
}

/* Ensures space at the bottom of the page */
/* body::after {
    content: "";
    display: block;
    height: 50px;  
} */

/* Ensure Text Has Padding from Edges */
.dash-text {
    max-width: 67%; /* More readable while still responsive */
    margin-bottom: 20px !important; /* Adds space below paragraph */
    margin: auto;
    padding: 0; /* Slightly increase left/right padding */
    text-align: center; /* Improves readability for long text blocks */
    line-height: 1.6; /* Enhances text clarity */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.heading-text {
    max-width: 67%; /* More readable while still responsive */
    margin-bottom: 20px !important; /* Adds space below paragraph */
    margin: auto;
    padding: 0; /* Slightly increase left/right padding */
    text-align: center; /* Improves readability for long text blocks */
    line-height: 1.6; /* Enhances text clarity */
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.graph-title {
    max-width: 100%; /* More readable while still responsive */
    padding-top: 10px;
    margin : 0px !important;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.description-text {
    margin-bottom: 20px !important; /* Adds space below paragraph */
    margin: auto;
    line-height: 1.6; /* Enhances text clarity */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.override-left {
    text-align: left !important;
    margin-left: 0px !important;
    margin-right: 0 !important;
    padding: 5px 0;
    /* or margin-right: auto if you want it flush-left with some room on the right */
}

.less-margin-left {
    margin-left: 0px !important;
}

.override-left-dd{
    /* Force horizontal row alignment */
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-left: 0px !important;
}

/* Bold and Centered Strong Text (Matches dash-text) */
.strong-text {
    font-family: 'Aeonik', sans-serif;
    font-size: 18px;
    text-align: center;
    display: block; 
    line-height: 1.3; /* Reduce line height */
    margin: 5px auto 2px auto; /* Smaller bottom margin */
    max-width: 100%;
    padding: 0; /* Reduce padding */
}

.strong-text-bottom {
    font-family: 'Aeonik', sans-serif;
    font-size: 11px;
    text-align: left;
    display: block; 
    line-height: 1.3; /* Reduce line height */
    margin: 5px auto 2px auto; /* Smaller bottom margin */
    font-weight: 600; /* Make it bold */
}

.dash-text-bottom {
    font-family: 'Aeonik', sans-serif;
    margin: auto;
    text-align: left; /* Improves readability for long text blocks */
    line-height: 1.6; /* Enhances text clarity */
    font-size: 11px;
}
.specific-layout-background {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    position: relative;
    padding: 0 0 60px 0;
    overflow: visible;
    z-index: 1;
}


/* Center the entire unordered list while keeping bullet points left-aligned */
.dash-list {
    list-style-type: disc; /* Ensures bullet points appear */
    display: flex; 
    flex-direction: column; /* Ensures items are stacked vertically */
    align-items: center; /* Centers the list as a block */
    justify-content: center; /* Ensures the list stays centered */
    margin: auto; /* Center the container */
    max-width: 100%; /* Matches .dash-text width */
    padding-left: 0; /* Removes default padding */
}

/* Ensures list items match .dash-text styling */
.dash-list li {
    font-family: 'Aeonik', sans-serif; /* Matches .dash-text */
    font-size: clamp(0.9rem, 1vw, 1rem); /* Responsive font size */
    line-height: 1.6; /* Improved readability */
    text-align: left; /* Forces left alignment for bullet points */
    width: 100%; /* Ensures text doesn't stretch */
    max-width: 600px; /* Prevents overly wide lists */
    margin-bottom: 5px; /* Adds spacing between list items */
}

.hr-line {
    width: 100%;       /* Full width */
    height: 1px;       /* Thickness of the line */
    background-color: black !important; /* Black color */
    border: none;       /* Remove any default borders */
    margin: 50px auto; 
    opacity: 1;
}

.overview-title {
    font-family: 'Aeonik', sans-serif;
    text-align: left;
    font-size: clamp(3.5rem, 5.5vw, 6.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #000000;
    margin-top: 0;
    margin-bottom: 0.4em;
}

/* Homepage-specific title styling with width restriction */
.homepage-title {
    font-size: clamp(3.5rem, 5.5vw, 6.5rem);
    line-height: 1;
    max-width: 60%;
    white-space: normal;
    position: relative;
    z-index: 2;
}

.overview-page-button-headers {
    font-family: 'Aeonik', sans-serif;
    text-align: left;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: -0.02em;
    margin-bottom: -0.1em;
}

.tab-title {
    font-family: 'Aeonik', sans-serif; /* Change 'serif' to 'sans-serif' */
    text-align: left;
    font-size: clamp(3.2rem, 4.8vw, 5.6rem);
    font-weight: 500;
    padding: 5px 0;
    line-height: 1.2;
    color: #000000;
    letter-spacing: -0.02em;
}

.button-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.icon-style {
    width: 65px;
    height: 65px;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 4px;
}

.button-text-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Nav pill link - capsule shaped button */
.nav-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #000;
    border-radius: 999px;
    padding: 10px 12px 10px 24px;
    background-color: transparent;
    transition: background-color 0.2s ease;
    width: fit-content;
}

.nav-pill-link:hover {
    background-color: #000;
}

.nav-pill-link:hover .nav-pill-text {
    color: #fff;
}

.nav-pill-link:hover .nav-pill-arrow {
    background-color: #fff;
    color: #000;
}

/* Nav pill text label */
.nav-pill-text {
    font-family: 'Aeonik', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #000;
    white-space: nowrap;
}

/* Nav pill circular arrow */
.nav-pill-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Homepage card description text override */
.grid-container .dash-text {
    max-width: 100%;
    font-size: 19px;
    line-height: 1.5;
    margin-bottom: 0 !important;
    color: #333;
}

/* Explore the Data Section */
.explore-container {
    margin-bottom: 40px;
}

/* Disable Bootstrap's default blue hover/focus effect */
.explorer-button:hover,
.explorer-button:focus,
.explorer-button:active {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Base button style */
.explorer-button {
    width: 100%;
    height: auto;
    display: block;
    text-align: left;
    font-size: 1rem;
    color: #333 !important;
    background-color: transparent !important;
    border: none;
    box-shadow: none;
    outline: none;
    padding: 0;
    overflow: visible;
    white-space: normal;
}

.overview-page-button-headers {
    position: relative;
    display: inline-block;
    color: inherit;
}

/* Underline effect */
.overview-page-button-headers::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: black;
    transition: width 0.3s ease;
}

/* Hover: expand underline */
.explorer-button:hover .overview-page-button-headers::after {
    width: 100%;
}

/* Optional: active underline */
.explorer-button.active .overview-page-button-headers::after {
    width: 100%;
}


.grid-container {
    width: 100%;
    margin: 0;
    row-gap: 20px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.grid-container > .row {
    margin-left: 0;
    margin-right: 0;
}

.homepage-card {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
}

.grid-container > .row:last-child {
    margin-top: 0;
}


.smaller-text {
    font-size: .9rem;
    margin-top: 5px;
    max-width: 67%;
}

/* Prevent Bootstrap from overriding styles on click */
.explorer-button:focus,
.explorer-button:active {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.section-header {
    font-weight: bold;
    text-transform: uppercase;
}

/* Headings */
h1 {
    font-family: 'Aeonik', sans-serif;
    text-align: center;
    font-size: clamp(1.8rem, 2.3vw, 2.8rem);
    margin: 10px 0;
    padding: 10px 0;
}

h2, h3 {
    font-family: 'Aeonik', sans-serif;
    text-align: center;
    font-size: clamp(1.5rem, 2vw, 2.5rem);
    margin: 10px 0;
    padding: 10px 0;
}

.dropdown-style,
.Select-control {
    font-family: 'Aeonik', sans-serif;
    font-size: .9rem;
    text-transform: uppercase;
    width: 100%;      /* Ensures full container width */
    min-width: 220px; /* Prevents shrinking too much */
    
    /* top and bottom padding */
    padding: 1px 8px; 
    
    /* margin  */
    margin: 2px auto; 

    /* Adjust line height to reduce overall height */
    line-height: 1.2; 
    
    /* Make background transparent and only have a bottom border */
    background-color: transparent;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    position: relative; /* Needed for ::after */
}

/* Modifier: shorter version */
.dropdown-style.shorter {
    max-width: 200px !important;
}

/* Add a manually drawn bottom line */
.dropdown-style::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 90%;
    height: 1px;
    background-color: #000000;
}

.dropdown-container {
    display: flex;
    gap: 10px;  /* Small spacing for a compact layout */
    flex-wrap: wrap;  /* Prevents wrapping on larger screens */
    justify-content: flex-start;
}

/* Ensures dropdowns stack vertically */
.stacked-dropdowns {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between dropdowns */
    width: 100%;
}

/* Fix Dropdown Row Layout */
.dropdown-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Ensures good spacing between dropdowns */
    width: 100%; /* Makes sure it takes full space */
}

.underline-link {
    text-decoration: none;
}

.underline-link:hover {
    text-decoration: underline !important;
}

/* Ensure Dropdown Columns Stack Properly */
.dropdown-col {
    flex: 1; /* Allows columns to adjust dynamically */
    max-width: 300px; /* Prevents excessive stretching */
    min-width: 250px; /* Ensures it doesn't shrink too much */
    margin: auto; /* Centers dropdowns */
}

/* Style for the OPTIONAL label */
.dropdown-label {
    font-size: 14px;
    color: #3e3e3e; /* Light grey */
    margin: 0;
    z-index: 10;
    position: absolute; /* Ensures it doesn't shift dropdown */
    top: -7px; /* Moves it slightly above without affecting layout */
    left: 0; /* Aligns it to the left of its column */
}

/* Selected value (multi-select chips) */
.Select--multi .Select-value {
    background-color: transparent !important;
    border: 1px solid #ccc;
    color: black !important;
}

/* Selected value label text */
.Select--multi .Select-value-label {
    color: black !important;
}

/* Remove the default blue X icon hover background */
.Select--multi .Select-value-icon {
    background-color: transparent !important;
}

/* Optional: Style the dropdown options on hover and selection */
.VirtualizedSelectOption {
    color: black;
}

.VirtualizedSelectFocusedOption {
    background-color: #f0f0f0;
    color: black;
}

.VirtualizedSelectSelectedOption {
    background-color: #e0e0e0;
    color: black;
}

/* Tables */
.responsive-table-container {
    max-width: 95%;
    margin: auto;
    overflow-x: auto !important;
    display: flex;
    justify-content: center;
    padding: 0px;
}

.dash-table {
    max-width: 95%;
    margin: auto;
    font-family: 'Aeonik', sans-serif;
    font-size: clamp(0.8rem, 1vw, 1rem);
    overflow-x: auto;
    padding: 10px;
}

.dash-table th {
    background-color: rgb(230, 230, 230);
    font-weight: bold;
    font-family: 'Aeonik', sans-serif;
    padding: 10px;
}

/* Graph Styling */
.dash-graph-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px !important; /* Remove extra padding */
}

/* Default Graph Styling (Large Screens) */
.dash-graph {
    width: 100% !important;  /* Keeps width dynamic */
    max-width: 100% !important; /* Prevents excessive stretching */
    margin: 0 !important;
    padding-top: 20px !important; /* Ensures good spacing */
    padding: 0 !important;
    box-sizing: border-box; /* Prevents padding from affecting width */
    overflow: visible !important;
}

/* Layout Fixes */
.dash-row, .dash-col {
    flex-wrap: wrap !important;
    max-width: 95%;
    margin: auto;
    padding: 10px;
}

/* Updated Navbar Container */
.navbar-container {
    width: 100%;
    max-width: none;
    padding: 12px 0;
    background-color: #F5F5F5; /* New background */
    display: flex;
    align-items: center;
    justify-content: center; /* Center align links */
    transition: all 0.3s ease;
    position: relative;
    z-index: 1000; /* Ensure navbar is always on top */
}

/* Enhanced Navbar Styles */
.navbar {
    background-color: #F5F5F5 !important; /* New background */
    transition: all 0.3s ease;
    padding: 12px 0;
    position: relative;
    z-index: 1000; /* Ensure navbar is always on top */
}

/* Center Navbar Items */
.nav-menu {
    display: flex;
    justify-content: center; /* Centres the items */
    width: 100%; /* Ensures full width */
}

/* Ensure Navbar Links Are Uppercase */
.nav-link {
    text-transform: uppercase; /* Makes text uppercase */
    text-align: center;
}

/* Navbar Links */
.nav-link {
    color: black !important; /* New text colour */
    font-size: 0.9rem;
    position: relative;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    margin: 0 8px;
}

/* Underline Effect When Hovering */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: black; /* Underline should be black */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 90%; /* Expands the underline on hover */
}

/* Active/Selected Link */
.nav-link.active {
    border-bottom: 1px solid black; /* Keeps the underline effect */
    transform: translateY(-2px); /* Slight movement when active */
}

.circle-toggler {
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #333;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* Optional hover effect */
.circle-toggler:hover {
    background-color: #eaeaea;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  }

/* Buttons */
button, input, select {
    font-family: 'Aeonik', sans-serif;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.button-style {
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.button-style:hover {
    background-color: #e0e0e0;
}

/* Default cluster button */
.cluster-button {
    padding: 12px 18px;
    border: none;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    background-color: #f5f5f5;  /* Default inactive state */
    color: black;
    font-weight: 500;
    transition: transform 0.2s ease-in-out, filter 0.3s ease-in-out, background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
}

/* Hover effect */
.cluster-button:hover {
    filter: brightness(90%); /* Slightly darken the background */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Active button styling (selected state) */
.cluster-button.active {
    background-color: #333!important;  /* Dark grey for active state */
    color: white;
    transform: scale(1.05);  /* Keep slight zoom effect when active */
}

.cluster-button.selected {
    background-color: #333!important;  /* Dark grey for active state */
    color: white;
    transform: scale(1.05);  /* Keep slight zoom effect when active */
}

/* Remove blue underline from dcc.Link */
a {
    text-decoration: none !important;
    color: inherit !important;
}

/* Keep methodology links visibly clickable despite global anchor reset */
.methodology-paper-link {
    color: #1a73e8 !important;
    text-decoration: underline !important;
    cursor: pointer;
}

.methodology-paper-link:hover {
    color: #1558b0 !important;
    text-decoration: underline !important;
}

/* Ensure buttons inside links do not get underlines */
.grid-button {
    display: block;
}

.grid-button a {
    text-decoration: none !important;
    display: block;
}

/* Prevent hover underline */
.grid-button a:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* Ensure buttons inside links do not get blue highlight */
.explorer-button {
    text-decoration: none !important;
    /* color: white !important; Keeps text color consistent */
}

/* Page Toggle Buttons (VC Investment) */
.page-toggle-container {
    display: flex;
    width: 100%;
    border-bottom: 2px solid #dee2e6;
}

.page-toggle-btn {
    flex: 1;
    padding: 12px 20px;
    font-size: 16px;
    font-family: 'Aeonik', sans-serif;
    font-weight: 400;
    border: 2px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
    background-color: #e9ecef;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
    position: relative;
}

.page-toggle-btn:first-child {
    border-radius: 8px 0 0 0;
    border-right: 1px solid #dee2e6;
}

.page-toggle-btn:last-child {
    border-radius: 0 8px 0 0;
}

.page-toggle-btn.active {
    background-color: white;
    color: #000000;
    font-weight: 600;
    border-bottom: 2px solid white;
    margin-bottom: -2px;
    z-index: 1;
}

.page-toggle-btn:not(.active):hover {
    background-color: #d3d7db;
}

/* Data Toggle Buttons (AI/Non-AI, etc.) */
.data-toggle-container {
    display: inline-flex;
    gap: 0;
}

.data-toggle-btn {
    padding: 6px 16px;
    font-size: 14px;
    font-family: 'Aeonik', sans-serif;
    font-weight: 400;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
}

.data-toggle-btn:first-child {
    border-radius: 5px 0 0 5px;
    border-right: none;
}

.data-toggle-btn:last-child {
    border-radius: 0 5px 5px 0;
}

.data-toggle-btn.active {
    background-color: #000000;
    color: white;
    font-weight: 600;
    border-color: #000000;
}

.data-toggle-btn:not(.active):hover {
    background-color: #e9ecef;
}

/* Make checkboxes and radio buttons black */
input[type="radio"], 
input[type="checkbox"] {
    accent-color: black !important; /* Changes the default color to black */
}

/* Remove tap highlight on mobile */
button, input, select {
    -webkit-tap-highlight-color: transparent;
}
/* Remove default blue focus outline */
input[type="radio"]:focus, 
input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Mid-range desktop/laptop adjustments */
@media screen and (max-width: 1280px) {
    .specific-layout-background {
        padding: 0 0 40px 0;
    }

    .homepage-title {
        max-width: 55%;
        font-size: clamp(3rem, 5vw, 5rem);
        margin-bottom: 0.3em;
    }

    .icon-style {
        width: 55px;
        height: 55px;
    }

    .grid-container .dash-text {
        font-size: 15px;
    }

    .button-content {
        gap: 14px;
    }
}

@media screen and (max-width: 1024px) {
    .specific-layout-background {
        padding: 0 0 30px 0;
    }

    .homepage-title {
        max-width: 50%;
        font-size: clamp(2.5rem, 4.5vw, 4rem);
    }

    .icon-style {
        width: 45px;
        height: 45px;
    }

    .nav-pill-text {
        font-size: 13px;
    }

    .nav-pill-arrow {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .nav-pill-link {
        padding: 7px 10px 7px 18px;
        gap: 8px;
    }

    .grid-container .dash-text {
        font-size: 14px;
        line-height: 1.4;
    }

    .button-content {
        gap: 12px;
    }

    .button-text-container {
        gap: 6px;
    }

    .homepage-card {
        padding: 12px;
    }
}

/* Mobile-friendly font classes (desktop defaults) */
.mobile-body-text { font-size: 18px; }
.mobile-section-header { font-size: 28px; }
.mobile-card-title { font-size: 20px; }
.mobile-chart-title { font-size: 16px; }

/* Spacing when sidebar stacks below chart (lg breakpoint) */
@media (max-width: 991px) {
    .card-body .row > [class*="col-lg-4"],
    .card-body .row > [class*="col-lg-3"] {
        margin-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .dash-text {
        max-width: 100%;
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .heading-text {
        max-width: 100%;
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .strong-text {
        font-size: 1rem;
        max-width: 100%;
        margin: 8px auto;
        padding: 5px 0;
    }

    .graph-title {
        font-size: 14px;
    }

    .overview-page-button-headers {
        font-size: 16px
    }

    .description-text {
        font-size: 14px;
    }

    .dash-table {
        font-size: 0.85rem;
        padding: 4px;
        max-width: 100%;
    }

    h2, h3 {
        font-size: 1.3rem;
        margin: 6px 0;
        padding: 6px 0;
    }

    .dash-graph-container {
        flex-direction: column;
        align-items: center;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .dash-graph {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .dropdown-style, .Select-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 0.9rem !important;
        margin: 5px auto 0 auto;
    }

    .dropdown-col {
        width: 100% !important;
        max-width: none !important;
    }

    .dropdown-container {
        flex-wrap: wrap;
    }

    .dropdown-row {
        flex-direction: column;
        gap: 10px;
    }

    .dropdown-col {
        width: 100%;
        max-width: 100%;
    }

    .main-content {
        margin: 0 auto;
        padding: 8px 6px 0 6px;
        width: 100%;
    }

    /* Use full width for rows and columns on mobile */
    .dash-row, .dash-col {
        max-width: 100%;
        padding: 4px 0;
    }

    .responsive-table-container {
        max-width: 100%;
        padding: 0;
    }

    /* Override inline padding on page content wrappers */
    #vc-page-content,
    .page-container {
        padding: 8px !important;
    }

    .grid-container {
        max-width: 100%;
    }

    /* Reduce Bootstrap g-5 gutter on mobile */
    .grid-container .row.g-5 {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        margin-top: 0 !important;
    }

    .grid-container .row > [class*="col"] {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .homepage-card {
        padding: 8px 4px;
        margin-bottom: 0;
    }

    .grid-button {
        width: 100%;
    }

    .button-content {
        gap: 12px;
    }

    .button-text-container {
        gap: 4px;
    }

    .grid-container .dash-text {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .grid-container p {
        margin-bottom: 0 !important;
    }

    .specific-layout-background {
        background-image: none !important;
        padding: 0 0 20px 0 !important;
        min-height: 100vh;
        overflow: visible;
    }

    .overview-title {
        padding: 5px 0;
        font-size: clamp(1.75rem, 6.5vw, 3.5rem);
        white-space: normal;
        word-wrap: break-word;
    }

    .homepage-title {
        font-size: clamp(2.5rem, 8vw, 3.5rem);
        max-width: 100%;
        margin-bottom: 0.3em;
    }

    .tab-title {
        font-size: clamp(2.2rem, 5.2vw, 3.7rem); /* Adjust font size for smaller screens */
        padding: 2px 0;
    }

    .button-text {
        font-size: 0.8rem;
        margin-top: 5px;
    }

    .explorer-button {
        height: auto;
        width: 100%;
        font-size: 1rem;
        padding: 0;
    }

    .navbar-container {
        padding: 0 !important;
    }

    #navbar-collapse {
        width: 100% !important;
    }

    .nav-menu {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding-left: 0px !important;
        width: 100% !important;
    }

    .nav-item {
        width: 100% !important;
    }

    .nav-link {
        text-align: left !important;
        width: 100% !important;
        padding-left: 0 !important;
    }

    /* Stacked chart pairs spacing */
    .card-body .row > [class*="col-md-"]:not(:first-child) {
        margin-top: 0;
    }

    /* Fix asymmetric padding when stacked */
    .card-body .row.g-0 > [class*="col-md-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Description text */
    .description-text { font-size: 14px; }

    /* Radio items stack vertically */
    .form-check-inline {
        display: block !important;
        margin-bottom: 4px;
    }

    /* Mobile font size classes */
    .mobile-body-text { font-size: 15px; }
    .mobile-section-header { font-size: 20px; }
    .mobile-card-title { font-size: 16px; }
    .mobile-chart-title { font-size: 13px !important; }

    /* Reduce sidebar padding */
    [style*="padding-left: 20px"] {
        padding-left: 8px !important;
    }

    /* Let mobile charts auto-size to match Plotly figure height */
    .dash-graph {
        height: auto !important;
    }

    /* Reduce card body padding on mobile */
    .card-body {
        padding: 6px !important;
    }

    /* Cards use full width on mobile */
    .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Reduce horizontal rule margins on mobile */
    .hr-line {
        margin: 25px auto;
    }

    /* Reduce H4 bottom margin */
    .card-body h4 {
        margin-bottom: 12px !important;
    }

    /* Resize homepage icons */
    .icon-style {
        width: 45px;
        height: 45px;
    }

    .nav-pill-text {
        font-size: 12px;
    }

    .nav-pill-link {
        padding: 6px 8px 6px 16px;
        gap: 6px;
    }

    .nav-pill-arrow {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .typewriter-container {
        margin: 8px 0 12px 0 !important;
        height: 45px !important;
        width: 90% !important;
    }
}

/* Custom black radio buttons for country toggles */
.custom-radio-black .form-check-input:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.custom-radio-black .form-check-input {
    border-color: #666666 !important;
}

.custom-radio-black .form-check-input:focus {
    border-color: #000000 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25) !important;
}

.custom-radio-black .form-check-label {
    color: #000000 !important;
    vertical-align: middle;
    line-height: 1.5;
}

.custom-radio-black .form-check {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
}

/* Custom black switch toggle */
.custom-switch-black .form-check-input:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.custom-switch-black .form-check-input {
    border-color: #666666 !important;
}

.custom-switch-black .form-check-input:focus {
    border-color: #000000 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25) !important;
}

/* =========================================
   STORYTELLING
   ========================================= */

.story-card-button {
    font-family: 'Aeonik', sans-serif;
    transition: background 0.15s ease;
}

.story-card-button:hover {
    background: #f0f7fa !important;
}

.story-card-button:focus {
    outline: none;
}

/* Story navigation scrollable container */
.story-navigation {
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.story-navigation::-webkit-scrollbar {
    width: 4px;
}

.story-navigation::-webkit-scrollbar-track {
    background: transparent;
}

.story-navigation::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

.story-navigation::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

/* Reset view button hover */
#reset-view-button:hover {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
}

/* =========================================
   PILL BUTTONS
   ========================================= */

.pill-button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    position: relative;
    z-index: 2;
}

.pill-button {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 12px;
    font-family: 'Aeonik', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.pill-button:hover {
    background-color: #f0f0f0;
}

.pill-button.active {
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
}

.pill-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.pill-arrow:hover {
    background-color: #f0f0f0;
}

.pill-helper-text {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    font-family: 'Aeonik', sans-serif;
}

@media screen and (max-width: 768px) {
    .pill-button-row {
        gap: 6px;
    }

    .pill-button {
        font-size: 10px;
        padding: 6px 12px;
    }

    .pill-arrow {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .data-toggle-btn {
        padding: 3px 8px;
        font-size: 11px;
    }

    .toggle-btn-group .form-check-label {
        padding: 3px 8px;
        font-size: 11px;
    }
}

.mobile-annotation-box {
    max-width: 95%;
    margin: 10px auto 0 auto;
    font-size: 12px;
    padding: 12px 16px;
    background: #f0f4f8;
    border: 1px solid #b0bec5;
    border-left: none;
    border-radius: 4px;
    line-height: 1.5;
    color: #333;
    text-align: left;
    font-family: 'Aeonik', sans-serif;
}

@media (max-width: 767px) {
    #indices-annotation-box {
        min-height: 170px;
    }
}

/* ═══════════════════════════════════════════════════════════
   TOGGLE BUTTON RADIO GROUP  (matches data-toggle-btn look)
   Turns dcc.RadioItems / dbc.RadioItems into segmented buttons
   ═══════════════════════════════════════════════════════════ */
.toggle-btn-group {
    display: inline-flex !important;
    gap: 0 !important;
}

.toggle-btn-group .form-check {
    padding: 0 !important;
    margin: 0 !important;
}

.toggle-btn-group .form-check-input {
    display: none !important;          /* hide the radio circle */
}

.toggle-btn-group .form-check-label {
    padding: 6px 16px;
    font-size: 14px;
    font-family: 'Aeonik', sans-serif;
    font-weight: 400;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
    display: block;
    line-height: 1.4;
}

/* First button – left rounded corners */
.toggle-btn-group .form-check:first-child .form-check-label {
    border-radius: 5px 0 0 5px;
    border-right: none;
}

/* Middle buttons – no rounding, collapse borders */
.toggle-btn-group .form-check:not(:first-child):not(:last-child) .form-check-label {
    border-radius: 0;
    border-right: none;
}

/* Last button – right rounded corners */
.toggle-btn-group .form-check:last-child .form-check-label {
    border-radius: 0 5px 5px 0;
}

/* Active / checked state */
.toggle-btn-group .form-check-input:checked + .form-check-label {
    background-color: #000000;
    color: white;
    font-weight: 600;
    border-color: #000000;
}

/* Hover on inactive */
.toggle-btn-group .form-check-input:not(:checked) + .form-check-label:hover {
    background-color: #e9ecef;
}

/* ── Bottom tab navigator ── */
.bottom-tab-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0 0;
}

.bottom-tab-nav a {
    text-decoration: none;
    color: inherit;
}

.bottom-tab-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bottom-tab-nav-label {
    font-family: 'Aeonik', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #000;
}