/* --- style.css --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column; /* Changed to column for the multi-page layout */
    min-height: 100vh;
}

/* --- Header & Navigation (New) --- */
header {
    background: #1f2937;
    padding: 15px 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    color: #f3f4f6;
    font-size: 1.5rem;
    font-weight: 800;
}

header nav a {
    color: #9ca3af;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}
header nav a:hover {
    color: #ffffff;
}

/* --- Landing Page (index.html) Styles --- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    flex-grow: 1;
    justify-content: center;
}

.hero h2 {
    font-size: 2.5rem;
    color: #1f2937;
    margin-bottom: 20px;
    font-weight: 800;
}

.hero p {
    color: #4b5563;
    font-size: 1.1rem;
    max-width: 650px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.text-accent { color: #3b82f6; }

.cta-button {
    padding: 15px 30px;
    font-size: 1.1rem;
    background: #3b82f6; /* Blue CTA */
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    transition: background 0.3s, transform 0.1s;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.cta-button:hover {
    background: #2563eb;
    transform: translateY(-1px);
}


/* --- Checker Tool (checker.html) Specific Styles --- */

.checker-page {
    /* Ensures checker content is centered on its page */
    align-self: center; 
    margin: 40px auto; 
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-width: 450px;
    width: 100%;
}

.checker-page h2 {
    font-size: 1.5rem;
    color: #1f2937;
    margin-bottom: 25px;
    font-weight: 700;
    text-align: center;
}

/* Input Styling */
.password-group {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 20px;
}

#passwordInput {
    flex-grow: 1;
    padding: 12px 15px;
    border: none;
    font-size: 1rem;
    outline: none;
    background: transparent;
}

.toggle-visibility {
    padding: 0 15px;
    cursor: pointer;
    color: #6b7280;
    font-size: 1.2rem;
}

/* Status Bar */
.strength-indicator {
    height: 10px;
    width: 100%;
    background: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
}

#statusBar {
    height: 100%;
    width: 0;
    transition: width 0.4s ease, background-color 0.4s ease;
}

.status-label {
    text-align: center;
    font-weight: 600;
    margin-bottom: 25px;
    color: #6b7280;
}

/* Requirements List */
.requirements-list {
    list-style: none;
    padding: 0;
}

.requirements-list li {
    font-size: 0.95rem;
    padding: 8px 0;
    color: #4b5563;
    transition: color 0.3s;
}

/* State-Specific Classes (Managed by JavaScript) */
.weak #statusBar { background-color: #ef4444; }
.weak .status-label { color: #ef4444; }

.medium #statusBar { background-color: #f59e0b; }
.medium .status-label { color: #f59e0b; }

.strong #statusBar { background-color: #10b981; }
.strong .status-label { color: #10b981; }

/* Passed Check */
.passed { color: #10b981 !important; font-weight: 700; }
.passed::before { content: '✅ '; }

/* Failed Check */
.failed { color: #ef4444; }
.failed::before { content: '❌ '; }