/* ======= Layout ======= */
/* Handles macro page structure, preset button container, and the main flex container for columns. */

/* ======= Overall Page Structure ======= */
html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow: hidden;
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; /* Ensure minimum height of viewport */
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* min-height:0 (not height:100%) so main fills the space ABOVE the copyright
       footer rather than the full body height, which would push the footer out
       of the overflow:hidden viewport. The columns inside still flex-grow to
       fill main, so their sizing is unchanged. */
    min-height: 0;
}

/* ======= App Header Bar ======= */
/* Horizontal header replacing the former right-hand nav column. Holds the
   site title on the left and the About / Reset data actions on the right. */
.app-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Transparent background plus the frosted-glass blur, matching the
       former right-hand nav column (a glass column section). */
    background-color: rgba(0, 0, 0, 0.0);
    backdrop-filter: var(--glass-backdrop-filter);
    -webkit-backdrop-filter: var(--glass-backdrop-filter);
    /* Horizontal padding aligns the title and actions with the start of the
       text inside the columns below. Left = assets column margin + section
       padding + content-wrapper padding; right mirrors the insight column,
       which trims its section right-padding to var(--space-2). */
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    padding-left: calc(var(--space-6) + var(--space-4) + var(--space-4));
    padding-right: calc(var(--space-6) + var(--space-2) + var(--space-4));
}

.app-header-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-text-white-primary);
    margin: 0;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* about: a plain text header action (no fill/border) mirroring the bare
   "allocatr" wordmark opposite it. margin:0 clears the .btn base margins so it
   sits vertically centred against the title (header align-items: center). Hover
   is a subtle opacity lift only -- no background, no underline. */
.app-header-actions .nav-btn {
    width: auto;
    margin: 0;
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: none;
    color: var(--color-text-white-primary);
    font-size: var(--font-size-base);
    line-height: 1.2;
    opacity: 0.8;
}

.app-header-actions .nav-btn:hover {
    opacity: 1;
}

/* ======= Preset Button Bar Styles ======= */
#preset-button-container {
    padding: var(--space-4) var(--space-6) 0 var(--space-6);
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

/* ======= Main Content Columns Container ======= */
.main-content-columns {
    display: flex;
    flex-grow: 1;
    padding: 0 var(--space-6) var(--space-6) var(--space-6);
    overflow: hidden;
    height: 100%; /* Ensure full height */
    min-height: 0; /* Allow flex items to shrink below content size */
}

/* ======= Global Utility & Component Styles ======= */

/* General .section-title - if used ONLY in columns, move to columns.css */
.section-title { 
    margin-bottom: var(--space-6);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-dark);
}

/* Chart Layout Utilities (General) */
.chart-row {
    display: flex;
    gap: var(--space-6); 
    margin-bottom: var(--space-6); 
    align-items: flex-start; 
}

.chart-item {
    flex: 1; 
    min-width: 0;
    display: flex; 
    flex-direction: column; 
}

.chart-item > div[id^="plotly-"] { 
    flex-grow: 1; 
    min-height: var(--chart-item-min-height); 
}

.chart-title {
    font-size: var(--font-size-chart-title);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-3);
    color: var(--color-text-white-secondary);
    flex-shrink: 0; 
}

/* Custom Scrollbar Styles (Global) */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-height);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--radius-medium);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-color-hover);
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

* {
  scrollbar-width: var(--scrollbar-firefox-width);
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Plotly hover tooltip corner rounding. Plotly draws the hover box as an SVG path with no
   border-radius/corner-radius option, so the corners are rounded via the path's stroke join
   (radius is roughly half the stroke-width). The stroke colour is the hoverlabel bordercolor
   set in chartsCommon.getBasePlotlyLayout. */
.js-plotly-plot .hoverlayer .hovertext > path {
  stroke-linejoin: round;
  stroke-width: 6px;
}

/* Utility class */
.column-hidden {
    display: none !important; 
}

/* Removed .container, .hero, footer, .card-grid, .color-grid, .animation-showcase, blog layout, etc. */
/* Removed general section styling to avoid conflicts. Specific section styling is in columns.css for the column layout. */
/* Removed custom page backgrounds like .kawaii-background as per assumption of unused template remnants. */

/* ======= Original Content from layout.css (to be pruned) ======= */
/* Original .container - evaluate if still needed globally or only within specific non-column contexts */
.container {
    width: var(--container-width);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--space-5) 0; /* This might conflict with column content wrapper padding */
}

/* Original section and section-title - evaluate for global use vs. column-specific */
section { /* This general rule will conflict with columns.css styling for sections inside .main-content-columns */
    margin-bottom: var(--space-16);
}

.section-title { /* This is likely a general utility class */
    margin-bottom: var(--space-6);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary-dark);
}

/* Hero Section - Keep if used outside columns, otherwise simplify/remove if only for old design */
.hero {
    padding: var(--space-16) 0;
    text-align: center;
    margin-bottom: var(--space-16);
    position: relative;
    z-index: var(--z-index-hero);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: var(--hero-negative-space);
    left: var(--hero-negative-space);
    right: var(--hero-negative-space);
    bottom: var(--hero-negative-space);
    background-image: url('../background.jpg'); /* fallback where image-set is unsupported */
    background-image: image-set(
        url('../background.webp') type('image/webp'),
        url('../background.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: var(--z-index-background-image);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-overlay-background);
    z-index: var(--z-index-background-overlay);
    backdrop-filter: var(--hero-backdrop-filter);
    -webkit-backdrop-filter: var(--hero-backdrop-filter);
}

.hero h2 {
    font-size: var(--font-size-h1);
    margin-bottom: var(--space-6);
    color: var(--color-text-white-primary);
    font-weight: var(--font-weight-semibold);
    position: relative;
}

.hero .lead {
    font-size: var(--font-size-lead);
    line-height: var(--line-height-lead);
    margin-bottom: var(--space-8);
    color: var(--color-text-white-secondary);
    max-width: var(--hero-content-max-width);
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Grid Systems - Keep if used outside columns, prune if column-specific */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min-width), 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    justify-content: center;
}

.card-grid .card {
    animation: cardFadeIn var(--animation-timing-cardFadeIn);
    opacity: 0;
    transform: translateY(var(--card-animation-y-offset));
}

.card-grid .card:nth-child(1) { animation-delay: var(--animation-delay-card-1); }
.card-grid .card:nth-child(2) { animation-delay: var(--animation-delay-card-2); }
.card-grid .card:nth-child(3) { animation-delay: var(--animation-delay-card-3); }
.card-grid .card:nth-child(4) { animation-delay: var(--animation-delay-card-4); }
.card-grid .card:nth-child(5) { animation-delay: var(--animation-delay-card-5); }

@keyframes cardFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--color-grid-min-width), 1fr));
    gap: var(--space-4);
}

.animation-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--animation-showcase-min-width), 1fr));
    gap: var(--space-6);
}

/* Blog Layout Specific - Keep if used, prune if not or if tied to old column structure */
.blog-layout {
    padding: var(--space-8) 0;
}

.hero + .section.dark-theme {
    margin-top: var(--dark-theme-negative-margin);
    padding-top: calc(-1 * var(--dark-theme-negative-margin));
    position: relative;
    z-index: 1;
}

.hero + .section.dark-theme::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-background-color);
    z-index: -1;
}

main > .section.dark-theme:last-child {
    margin-bottom: 0;
    padding-bottom: var(--space-16);
}

main > .section.dark-theme:last-child + #footer-placeholder,
main > .section.dark-theme:last-child + footer {
    margin-top: 0;
    position: relative;
    z-index: 1;
    background: var(--gradient-footer-background);
    border-top: none;
}

.blog-grid {
    display: grid;
    grid-template-columns: var(--blog-content-columns);
    gap: var(--space-8);
}

.blog-main {
    margin-bottom: var(--space-8);
}

.article-content {
    margin-bottom: var(--space-8);
}

.article-footer {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
    padding-top: var(--space-6);
    border-top: var(--border-width-standard) solid var(--glass-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-tag-background);
    color: var(--color-text-white-primary);
    border-radius: var(--radius-small);
    font-size: var(--font-size-small);
}

.share-buttons {
    display: flex;
    gap: var(--space-2);
}

.comments {
    margin-top: var(--space-8);
}

.comment {
    margin-bottom: var(--space-4);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.comment-date {
    color: var(--color-text-comment-date);
    font-size: var(--font-size-small);
}

.comment-form {
    margin-top: var(--space-6);
}

@media (max-width: var(--breakpoint-mobile)) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        order: -1;
    }
}

/* Original Section Styles - evaluate conflicts */
/* .section { This was already commented out in my prompt for new content, but if present generally, it needs care } */
/* .section::before { display: none; } */ /* This is fine if it's a general reset for sections */

/* Chart Layout Adjustments - Keep general .chart-row, .chart-item, .chart-title */
.chart-row {
    display: flex;
    gap: var(--space-6); 
    margin-bottom: var(--space-6); 
    align-items: flex-start; 
}

.chart-item {
    flex: 1; 
    min-width: 0; 
    min-height: var(--chart-item-min-height);
}

.chart-title {
    font-size: var(--font-size-chart-title);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-3);
    color: var(--color-text-white-secondary);
}

/* Specific layout for hypothetical comparison chart row */
#hypothetical-comparison-column .chart-row > .chart-item {
    flex: 1 1 var(--chart-item-flex-basis-hypothetical); /* Allow items to shrink and grow, aiming for roughly 1/3 width */
    min-width: var(--chart-item-min-width-hypothetical); /* Ensure charts don't get too small */
}

/* ======= Navigation Container ======= */
.top-nav-container {
    padding: var(--space-2) var(--space-6) var(--space-2) var(--space-2); /* Reduced top/bottom padding */
    width: 100%;
}

/* Insight Column Chart Centering for Current View */
#allocatr-insight-column.current-view-charts-centered .insight-chart-row-pair {
    justify-content: center; /* Center the single (current) chart container within the pair row */
}

#allocatr-insight-column.current-view-charts-centered .insight-chart-left {
    /* Ensure the left chart (current chart) takes up appropriate space or is centered if needed */
    /* Depending on existing styling, you might make it wider or add auto margins */
    margin-left: auto;  /* Optional: if justify-content on parent isn't enough */
    margin-right: auto; /* Optional: if justify-content on parent isn't enough */
    /* width: 90%; /* Example: make it take more width if it looks too small */
}

/* Safeguard for insight chart container initial dimensions */
.insight-chart-row-pair > .plotly-chart-container {
    min-height: 300px; /* Adjust if you have a common smaller or larger base height, or use var() */
    width: 100%;
    /* background-color: rgba(255,0,0,0.1); /* Temporary: for visualizing container */
}