/* Claude theme base styles */

/* Alpine.js x-cloak support */
[x-cloak] { display: none !important; }


/* Critical responsive classes — hardcoded fallback for when Tailwind CSS v4 Browser
   runtime fails to generate them (Vue/React apps on same page cause re-scan issues).
   These are ONLY for classes used in header/navbar that MUST work on every page. */
@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:block { display: block !important; }
  .sm\:hidden { display: none !important; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .lg\:block { display: block !important; }
  .lg\:hidden { display: none !important; }
  .lg\:inline-block { display: inline-block !important; }
  .lg\:h-20 { height: 5rem; }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Reset list styles for navigation — !important needed because Tailwind browser may load after */
nav ul, nav ol, header ul, header ol, footer ul, footer ol { list-style: none !important; margin: 0; padding: 0; }
nav li, header li, footer li { list-style: none !important; list-style-type: none !important; }
/* Hide dropdown arrow SVGs when Alpine hasn't initialized yet */
li > a > svg.w-3\.5 { display: inline-block; }

/* Smooth scrollbar hide for horizontal scroll containers */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Prose plugin basic styles for Tailwind CSS 4 browser (no typography plugin) */
.prose { line-height: 1.75; }
.prose p { margin-bottom: 1.25em; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose h1 { font-size: 2.25em; }
.prose h2 { font-size: 1.5em; }
.prose h3 { font-size: 1.25em; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1.25em; }
.prose li { margin-bottom: 0.5em; }
.prose a { color: #2c0e6f; text-decoration: underline; }
.prose a:hover { color: #3d1a9b; }
.prose img { border-radius: 0.75rem; margin: 1.5em 0; }
.prose blockquote { border-left: 4px solid #b4a7d6; padding-left: 1em; font-style: italic; color: #4b5563; }
.prose pre { background: #1a1a2e; color: #e5e7eb; padding: 1rem; border-radius: 0.75rem; overflow-x: auto; margin: 1.5em 0; }
.prose code { font-size: 0.875em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose th, .prose td { border: 1px solid #e8e0f5; padding: 0.5em 0.75em; text-align: left; }
.prose th { background: #faf8ff; font-weight: 600; }

/* Marketing tools forms — Bootstrap class compatibility for seo-audit, footer-generator, cv-generator, privacy-policy */
.form-control, .tp-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid #e8e0f5; border-radius: 0.75rem; font-size: 0.875rem; outline: none; transition: all 0.2s; background: white; }
.form-control:focus, .tp-input:focus { border-color: #b4a7d6; box-shadow: 0 0 0 3px rgba(180,167,214,0.3); }
.form-label, label.d-block { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; }
.form-check { display: flex; align-items: flex-start; gap: 0.5rem; }
.form-check-input { accent-color: #2c0e6f; margin-top: 0.25rem; }
.form-check-label { font-size: 0.8125rem; color: #6b7280; }
.form-text { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; }
.form-select { width: 100%; padding: 0.75rem 1rem; border: 1px solid #e8e0f5; border-radius: 0.75rem; font-size: 0.875rem; background: white; }
.invalid-feedback { font-size: 0.75rem; color: #dc2626; margin-top: 0.25rem; }
.btn { padding: 0.625rem 1.25rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.875rem; cursor: pointer; border: none; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary, .tp-login-btn, .tp-btn-sm { background: #2c0e6f; color: white; }
.btn-primary:hover, .tp-login-btn:hover { background: #3d1a9b; }
.btn-secondary, .btn-outline-primary { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.btn-secondary:hover, .btn-outline-primary:hover { background: #e5e7eb; }
.btn-success { background: #059669; color: white; }
.btn-danger { background: #dc2626; color: white; }
.btn-warning { background: #f59e0b; color: white; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.w-100 { width: 100%; }
.d-block { display: block; }
.d-none { display: none !important; }
.d-flex { display: flex; }
.d-inline-block { display: inline-block; }
.d-inline-flex { display: inline-flex; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }
.text-muted { color: #6b7280; }
.text-success { color: #059669; }
.text-danger { color: #dc2626; }
.fw-bold, .fw-700 { font-weight: 700; }
.fw-600, .fw-semibold { font-weight: 600; }
.fw-500, .fw-medium { font-weight: 500; }
.fs-14 { font-size: 0.875rem; }
.fs-16 { font-size: 1rem; }
.fs-18 { font-size: 1.125rem; }
.fs-20 { font-size: 1.25rem; }
.fs-22 { font-size: 1.375rem; }
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 0.625rem; }
.mb-15 { margin-bottom: 0.9375rem; }
.mb-20 { margin-bottom: 1.25rem; }
.mb-25 { margin-bottom: 1.5625rem; }
.mb-30 { margin-bottom: 1.875rem; }
.mb-35 { margin-bottom: 2.1875rem; }
.mt-10 { margin-top: 0.625rem; }
.mt-20 { margin-top: 1.25rem; }
.p-40 { padding: 2.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.gap-0 { gap: 0; }
.gap-3 { gap: 0.75rem; }
.rounded-4 { border-radius: 1rem; }
.bg-light { background: #faf8ff; }
.bg-white { background: white; }
.border { border: 1px solid #e8e0f5; }
.border-secondary { border-color: #b4a7d6; }
.border-opacity-25 { border-color: rgba(180,167,214,0.25); }
.alert { padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; margin-bottom: 1rem; }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Bootstrap grid minimal for marketing tools */
.container-fluid { width: 100%; padding-left: 1rem; padding-right: 1rem; margin: 0 auto; }
.container-1524 { max-width: 95.25rem; }
.row { display: flex; flex-wrap: wrap; margin-left: -0.5rem; margin-right: -0.5rem; }
.row > [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-lg-8 { flex: 0 0 100%; max-width: 100%; }
.col-lg-6 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 1024px) {
  .col-lg-8 { flex: 0 0 66.67%; max-width: 66.67%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-4 { flex: 0 0 33.33%; max-width: 33.33%; }
}
.justify-content-center { justify-content: center; }

/* Aleric typography compat for marketing tools */
.al-section-subtitle { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #b4a7d6; }
.al-section-title { font-size: 1.75rem; font-weight: 700; color: #1a1a2e; }
.tp-section-ai-para { font-size: 1.125rem; color: #6b7280; line-height: 1.6; }
.tp-text-common-black, .tp-text-common-black-1 { color: #1a1a2e; }
.tp-text-common-black-6 { color: #4b5563; }
.tp-text-grey-1, .tp-text-grey-5 { color: #6b7280; }
.tp-ff-dm, .tp-ff-p, .tp-ff-heading { font-family: inherit; }
.vstack { display: flex; flex-direction: column; }
.hstack { display: flex; flex-direction: row; }

/* Spinner for forms */
.spinner-border { display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* CV Generator specific */
#cv-generator-app .form-group { margin-bottom: 1rem; }
#cv-generator-app .card { background: white; border: 1px solid #e8e0f5; border-radius: 0.75rem; overflow: hidden; }
#cv-generator-app .card-body { padding: 1.25rem; }
#cv-generator-app .card-header { padding: 0.75rem 1.25rem; background: #faf8ff; border-bottom: 1px solid #e8e0f5; font-weight: 600; }

/* Footer generator specific */
#footer-generator .preview-container { background: white; border: 1px solid #e8e0f5; border-radius: 0.75rem; padding: 1.5rem; }

/* Quiz pages */
.quiz-container .quiz-option { padding: 0.75rem 1rem; border: 1px solid #e8e0f5; border-radius: 0.75rem; cursor: pointer; transition: all 0.2s; }
.quiz-container .quiz-option:hover { border-color: #b4a7d6; background: #faf8ff; }
.quiz-container .quiz-option.selected { border-color: #2c0e6f; background: #f5f0ff; }