/* layout.css */
/* Contains styles for the overall page structure and major containers. */
/* Includes main content wrapper, calculator/results containers, */
/* form/value column layout, educational resources layout, and footer. */

/* Wrapper for main content to allow footer pushing */
.content-wrapper {
    flex: 1; /* Allow content to grow and push footer down */
}

/* Main section containers */
.calculator-container, .results, .success-stories, .educational-resources, .blog-container {
   background-color: var(--background-color); /* Use main background */
   border: 1px solid var(--medium-gray); /* Add a subtle border */
   border-radius: 8px;
   padding: 25px; /* Slightly increase padding */
   box-shadow: 0 4px 12px var(--container-shadow); /* Slightly enhance shadow */
   transition: background-color 0.3s ease, border-color 0.3s ease;
   margin-bottom: 30px; /* Increase spacing between sections */
}
.results, .success-stories, .educational-resources {
   margin-top: 30px;
}
.blog-container {
   /* Specific overrides for blog container if needed, e.g., removing border */
   /* border: none; */
   /* box-shadow: none; */
   padding: 20px; /* Adjust padding if different */
}
.blog-container h1 {
   margin-bottom: 0.5em; /* Adjust spacing */
}
.blog-container .page-description {
   margin-bottom: 3em; /* More space below description */
}

/* --- Styles for Form/Value Two-Column Layout --- */
.form-ad-container {
   display: flex;
   flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
   gap: 30px; /* Increase spacing between form and value column */
   margin-bottom: 30px; /* Increase space below this section before debt entries */
   align-items: flex-start;
}

.form-column {
   flex: 2; /* Form takes up more space (adjust ratio as needed) */
   min-width: 320px; /* Minimum width for the form column */
}

.value-column { /* Was .ad-column */
   flex: 1; /* Value column takes less space */
   min-width: 280px; /* Minimum width for the value column */
   padding-top: 15px; /* Adjust top padding */
   /* Optional background for visual separation */
   background-color: rgba(0,0,0, 0.02); /* Very subtle background */
   border: 1px solid var(--medium-gray);
   border-radius: 8px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 20px; /* Space between elements inside */
}
/* Dark mode adjustment for background */
body.dark-mode .value-column {
   background-color: rgba(255, 255, 255, 0.03);
   border-color: var(--medium-gray);
}
.value-column h4 {
   margin-top: 0;
   color: var(--secondary-color);
   text-align: left; /* Align heading left */
   margin-bottom: 5px; /* Reduce space below heading */
   border-bottom: 1px solid var(--medium-gray);
   padding-bottom: 8px;
}

/* --- Styles for Educational Resources Columns --- */
.links-columns-container {
   display: flex; /* Use flexbox for columns */
   flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
   gap: 30px; /* Space between columns */
   margin-bottom: 25px; /* Space before the "Quick Tips" section */
}

.links-column {
   flex: 1; /* Allow columns to grow and share space */
   min-width: 250px; /* Minimum width before wrapping */
}

.links-column h3 {
   margin-top: 0; /* Remove default top margin for h3 inside columns */
   border-bottom: 1px solid var(--accent-color); /* Match existing style */
   padding-bottom: 3px; /* Match existing style */
   margin-bottom: 15px; /* Space below the column heading */
    color: var(--accent-color); /* Match existing style */
}

/* --- Footer Styles --- */
footer {
   margin-top: auto; /* Pushes footer to bottom */
   padding: 25px 20px; /* Increase padding */
   background-color: var(--footer-bg);
   color: var(--footer-text);
   border-top: 1px solid var(--table-border-color);
   text-align: center;
   font-size: 0.9em;
   transition: background-color 0.3s ease, color 0.3s ease;
   width: 100%; /* Ensure full width */
   box-sizing: border-box; /* Include padding in width */
}
.footer-content {
   max-width: 1000px; /* Match body max-width */
   margin: 0 auto; /* Center footer content */
}
.footer-links a {
   color: var(--footer-link);
   text-decoration: none;
   margin: 0 10px;
   transition: color 0.2s ease;
}
.footer-links a:hover {
   color: var(--footer-link-hover);
   text-decoration: underline;
}
footer p.copyright { /* Be more specific */
   margin: 15px 0 0 0; /* Add more space above copyright */
   font-size: 0.95em;
}