/* selection.css - Style for the advice selection page */

.selection-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.selection-header {
    margin-bottom: 50px;
}

.selection-header h1 {
    font-family: var(--font-headline, 'Archivo Narrow', Arial, sans-serif);
    font-size: 2.2rem;
    color: var(--color-text);
    margin-bottom: 16px;
}

.selection-description {
    font-size: 1.1rem;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
    color: var(--color-text);
}

/* Layout for the two options */
.selection-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin: 40px 0;
}

/* Cards */
.selection-card {
    display: block;
    background: var(--color-tile-bg);
    border: 1px solid var(--color-tile-border);
    border-radius: 12px;
    padding: 30px;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--shadow-tile); /* theme-aware shadow */
}

/* No hover effect on cards/text */
.selection-card:hover,
.selection-card:focus {
    background: var(--color-surface-1-bg);
    outline: none;
}

/* Card-specific styling */
.generic-card {
    border-top: 4px solid var(--color-accent-neutral);
}

.customized-card {
    border-top: 4px solid var(--color-accent-success);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--color-accent-primary);
}

.card-description {
    font-size: 1rem;
    line-height: 1.6;
    margin: 16px 0 24px;
    color: var(--color-text);
}

/* Launch buttons styled like CTA */
.card-cta {
    font-family: var(--font-headline, 'Archivo Narrow', Arial, sans-serif);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 12px 24px;
    display: inline-block;
    background-color: var(--color-cta-bg);
    color: var(--color-cta-text);
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.card-cta:hover,
.card-cta:focus {
    background-color: var(--color-cta-hover);
    outline: 2px solid var(--color-cta-hover);
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .selection-container { 
		padding: 0px 5px; 
	}
    .selection-header h1 { font-size: 1.6em !Important;}
    .selection-options { grid-template-columns: 1fr; gap: 15px; }
    .selection-card { padding: 20px; }
}

/* Accessibility */
.selection-card:focus {
    z-index: 1;
}