/* Custom overrides for Junto Club */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Typography refinements */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}

/* Form focus states override if needed */
input:focus, textarea:focus {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);
}

/* Markdown Content Styling */
.markdown-content p {
    margin-bottom: 1.5rem;
    line-height: 1.75;
    color: #334155; /* charcoal */
}

.markdown-content h3 {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    color: #0F172A; /* midnight */
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.markdown-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.markdown-content ul ul {
    list-style-type: circle;
    margin-bottom: 0.5rem;
}

.markdown-content ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.markdown-content ol ol {
    list-style-type: lower-alpha;
    margin-bottom: 0.5rem;
}

.markdown-content li {
    margin-bottom: 0.5rem;
}

/* Table Styling for Markdown content */
.markdown-content table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.markdown-content th {
    background-color: #F8FAFC;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    border-bottom: 1px solid #E2E8F0;
}

.markdown-content td {
    padding: 1rem;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.875rem;
    color: #334155;
}

.markdown-content tr:last-child td {
    border-bottom: none;
}

/* Code Block Styling */
.markdown-content pre {
    background-color: #1E293B; /* slate-800 */
    color: #E2E8F0; /* slate-200 */
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.markdown-content code {
    background-color: #F1F5F9; /* slate-100 */
    color: #0F172A; /* midnight */
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.markdown-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.markdown-content strong {
    color: #0F172A;
    font-weight: 600;
}

/* Registration Form Enhancements */
#registration-form {
    position: relative;
}

/* Error state for form fields */
input.border-red-500,
textarea.border-red-500,
select.border-red-500 {
    border-color: #EF4444 !important;
    background-color: #FEF2F2;
}

/* Success state background */
#success-message {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
}

/* Loading state for submit button */
#submit-button[aria-busy="true"] {
    opacity: 0.8;
    pointer-events: none;
}

/* Checkbox and radio accessibility */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.3);
}

/* Form labels hover (better UX) */
label {
    cursor: pointer;
}

/* Host Profile Styling */
.prose {
    color: #334155;
    line-height: 1.75;
}

.prose h2 {
    font-family: 'Merriweather', serif;
    font-size: 1.875rem;
    color: #0F172A;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.prose h3 {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    color: #0F172A;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.prose p {
    margin-bottom: 1.25rem;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose strong {
    color: #0F172A;
    font-weight: 600;
}

/* Line clamp utility for text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover effects for host cards */
.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

/* Smooth image loading */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Responsive aspect ratio for images */
.aspect-square {
    aspect-ratio: 1 / 1;
}