/* Flexbox on the body to center everything */
body {
    display: flex;
    justify-content: center;     /* Horizontally center */
    align-items: flex-start;     /* Vertically center */
    height: 100vh;               /* Full viewport height */
    margin: 0;                   /* Remove default margin */
    font-family: Arial, sans-serif; /* Default font family */
}

body.body {
    display: flex;
    justify-content: center;     /* Horizontally center */
    align-items: center;         /* Vertically center */
    height: 100vh;               /* Full viewport height */
    margin: 0;                   /* Remove default margin */
    font-family: Arial, sans-serif; /* Default font family */
}

/* Wrapper to center the content */
.content-wrapper {
    text-align: center;  /* Center text and inline elements */
    display: flex;
    flex-direction: column; /* Stack the logo and menu vertically */
    align-items: center; /* Horizontally center the content */
    justify-content: center; /* Vertically center the content */
}

/* Logo styling */
.logo-head {
    margin-bottom: 30px; /* Space between the logo and the menu */
}

.logo-head img {
    max-width: 100%;   /* Ensure the image is responsive */
    height: auto;      /* Maintain aspect ratio */
    max-height: 20vh;  /* Limit logo size based on viewport height for mobile */
}

/* Menu styling */
.menu ul {
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
    display: flex;  /* Display the menu items horizontally */
    justify-content: center;  /* Center the menu items */
}

.menu li {
    margin: 0 20px;  /* Add some space between the menu items */
}

.menu a {
    text-decoration: none; /* Remove the underline */
    font-size: 18px;  /* Set a default font size */
    color: #333;  /* Set a text color */
    transition: color 0.3s; /* Smooth color transition on hover */
}

.menu a:hover {
    color: #007BFF; /* Change color on hover */
}

/* Styling for .insights */
.insights {
    max-width: 800px;    /* Limit the width to 800px (adjust as needed) */
    width: 100%;         /* Ensure it takes up the full width of the parent */
    padding: 0 20px;     /* Add padding to left and right for better readability */
    margin-top: 30px;    /* Space between insights and menu */
    text-align: start; /* Optional: Improve text alignment */
    box-sizing: border-box; /* Include padding in the element's total width */
}

/* Fedbuster / Iron Gauntlet / secret portfolio pages: a bit more air below the nav */
body.strategy-page .insights {
    margin-top: 38px;
}

.secret-portfolio-found-note {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.45;
    text-align: start;
}

/* --- NEW PORTFOLIO LIST STYLING --- */
.portfolio-lists {
    margin-left: 5%; /* Slight indent from the left margin of the paragraph */
    text-align: left; 
}

.portfolio-lists h3 {
    margin-top: 25px;
    margin-bottom: 0px; 
}

.portfolio-lists h3 + h4 {
    margin-top: 8px; /* Reinstated a slight, controlled gap */
}

.portfolio-lists h4 {
    margin-left: 30px; /* Indent subheadings deeper than the h3 */
    margin-top: 10px; /* Adjusted down from 15px to close the gap */
    margin-bottom: 5px;
}

.portfolio-lists ul {
    margin-top: 5px;
    margin-bottom: 10px; /* Adjusted down from 15px to close the gap */
    padding-left: 40px; /* Standard bullet padding */
}

.portfolio-lists h4 + ul {
    margin-left: 30px; /* Pushes the lists under the subheadings even deeper */
}

.portfolio-lists li {
    margin-bottom: 5px;
}

/* Alternate strategy pages: page title */
.insights-page-title {
    margin: 0 0 1em 0;
    font-size: 1.35rem;
    font-weight: bold;
    text-align: start;
}

/* Single-column lists on secret portfolio pages */
.portfolio-lists--flat {
    margin-left: 0;
}

.portfolio-lists--flat > ul {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 1.5rem;
}

.portfolio-lists--flat li {
    margin-bottom: 8px;
}

/* Secret links: stacked, full width of .insights */
.secret-portfolio-hits {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 0 4px;
    box-sizing: border-box;
    width: 100%;
}

.secret-hit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0;
    line-height: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.secret-hit img {
    display: block;
    width: 100%;
    height: 44px;
    object-fit: cover;
}

/* Styling for #formula */
#formula {
    font-size: 4rem;            /* Increase the font size for the fraction */
    display: block;             /* Make the formula a block element */
    text-align: center;         /* Center the contents inside the block element */
    margin: 0 auto;             /* Center the block element itself */
    width: fit-content;         /* Ensure the width only takes up as much space as needed */
}

#performanceTable {
    text-align: left;
    margin: 50px;
}

/* Media Query for mobile screens */
@media (max-width: 767px) {
    .insights {
        max-width: 100%;    /* Make sure the container doesn't stretch too wide */
        padding: 0 15px;    /* Add padding to the sides for mobile views */
        margin: 20px 10px;   /* Add more margin on top for more space between text and menu */
    }

    body.strategy-page .insights {
        margin-top: 28px;
    }

    .blurbs {
        width: 350px;
        text-align: start;
        padding: 25px 2.5px 25px 2.5px;
    }
}

/* Media Query for larger screens (desktop/laptop) */
@media (min-width: 768px) {
    /* Logo resizing for larger screens */
    .logo-head img {
        max-height: 25vh; /* Increase the logo size on desktop/laptop screens */
    }

    /* Menu items font size for larger screens */
    .menu a {
        font-size: 22px; /* Larger font size for menu items */
    }

    /* Adjust margin between logo and menu */
    .logo-head {
        margin-bottom: 50px; /* Increase space between logo and menu */
    }

    /* Adjust .insights max-width for larger screens */
    .insights {
        max-width: 900px; /* Increase the max width on larger screens */
    }

    .blurbs {
        width: 600px;
        text-align: start;
        padding: 25px 0px 25px 0px;
    }
}

/* Media Query for very large screens (large desktop or wide viewports) */
@media (min-width: 1200px) {
    /* Further adjust logo size */
    .logo-head img {
        max-height: 30vh; /* Even larger logo on wide screens */
    }

    /* Further adjust menu font size */
    .menu a {
        font-size: 24px; /* Increase font size for larger screens */
    }

    /* Further adjust .insights max-width */
    .insights {
        max-width: 1000px; /* Even larger max-width on very large screens */
    }

    .blurbs {
        width: 800px;
        text-align: start;
        padding: 25px 0px 25px 0px;
    }
}

#myChart.portfolio {
    padding-bottom: 50px;
    max-width: 500px;
}

#myChart.performance {
    margin-top: 50px;
    margin-bottom: 0px;
}