/* File: /aus-tax-portal-spa/style.css */
/* Created: 2023-10-27 11:00:00 AEDT */
/* Author: Your Name */
/* Description: Styles for the single-page Australian tax portal. */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Clean, modern font */
    line-height: 1.6;
    margin: 0;
    background-color: #f4f7f6; /* Very light, neutral background */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px; /* Base font size for responsiveness */
}

/* --- Layout & Container --- */
.container {
    width: 90%;
    max-width: 800px; /* Max width for content readability */
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}
.site-header {
    background-color: #00529B; /* Professional blue, common in Aus finance */
    color: #fff;
    padding: 1.5rem 0;
    margin-bottom: 2rem;
    text-align: center;
}
.site-header h1 { margin: 0; font-size: 1.8rem; }
.timestamp-info { font-size: 0.7rem; opacity: 0.7; margin-top: 0.5rem; }

#app-root {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    flex-grow: 1;
}

.site-footer {
    background-color: #343a40; /* Dark footer */
    color: #f8f9fa;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
    font-size: 0.85rem;
}
.site-footer p { margin: 0.3rem 0; }

/* --- View Management --- */
.view { display: none; animation: fadeIn 0.4s ease-out; }
.view.active-view { display: block; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Typography & Content --- */
h2 {
    font-size: 1.6rem;
    color: #004080; /* Darker shade of primary blue */
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #007bff; /* Lighter blue for accent */
}
p { margin-bottom: 1rem; }
.disclaimer {
    font-size: 0.85em;
    color: #555;
    background-color: #fff3cd; /* Light yellow for warnings */
    border-left: 4px solid #ffeeba;
    padding: 0.8rem 1rem;
    margin-top: 1.5rem;
    border-radius: 4px;
}
.disclaimer strong { color: #856404; } /* Darker yellow for emphasis */

/* --- Buttons --- */
.choice-button, .button-primary, .button-secondary {
    display: block;
    width: 100%;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1rem;
    font-size: 1.05em;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
    border: none;
}
.choice-button, .button-primary {
    background-color: #007bff; /* Primary action blue */
    color: #fff;
}
.choice-button:hover, .button-primary:hover { background-color: #0056b3; }
.button-secondary {
    background-color: #6c757d; /* Grey for secondary actions/back */
    color: #fff;
}
.button-secondary:hover { background-color: #545b62; }
.choice-button:active, .button-primary:active, .button-secondary:active { transform: translateY(1px); }

.initial-choices .choice-button { margin-bottom: 1rem; } /* Spacing for initial big buttons */

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}
.navigation-buttons button { width: auto; min-width: 120px; }

/* --- Questionnaire Specific --- */
#progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
#progress-bar-fill {
    height: 100%;
    width: 0%; /* JS will update this */
    background-color: #28a745; /* Green for progress */
    transition: width 0.3s ease-in-out;
}
#question-content-area .form-group { margin-bottom: 1.2rem; }
#question-content-area label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}
#question-content-area input[type="radio"],
#question-content-area input[type="checkbox"] {
    margin-right: 0.5rem;
    vertical-align: middle;
}
/* Custom styled radio/checkbox could be a future trend item */
#question-content-area input[type="text"],
#question-content-area input[type="number"],
#question-content-area select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
}

/* --- Results Specific (Accordion Style for Pathways) --- */
.pathway-card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin-bottom: 1rem;
    overflow: hidden; /* For smooth animations if any */
}
.pathway-header {
    padding: 1rem 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #00529B;
    background-color: #e9f2fa; /* Lighter shade for header */
}
.pathway-header:hover { background-color: #d1e3f5; }
.pathway-header::after { /* Simple +/- toggle icon */
    content: '+';
    font-size: 1.5em;
    line-height: 1;
    font-weight: bold;
}
.pathway-header.open::after { content: '-'; }

.pathway-details {
    padding: 1rem 1.2rem;
    border-top: 1px solid #dee2e6;
    display: none; /* Hidden by default */
    font-size: 0.95em;
    background-color: #fff;
}
.pathway-details.open { display: block; }
.pathway-details h4 { margin-top: 0; color: #004080; }
.pathway-details ul { padding-left: 20px; margin-bottom: 0.5rem; }
.pathway-details a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}
.pathway-details a:hover { text-decoration: underline; }

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    .site-header h1 { font-size: 1.5rem; }
    h2 { font-size: 1.4rem; }
    .choice-button, .button-primary, .button-secondary { font-size: 1rem; padding: 0.8rem 1rem; }
    #app-root { padding: 1.5rem; }
    .navigation-buttons { flex-direction: column-reverse; } /* Stack nav buttons */
    .navigation-buttons button { width: 100%; margin-bottom: 0.5rem; }
    .navigation-buttons button:last-child { margin-bottom: 0; }
}