/*
Theme Name: Rhinoplastr
Description: Modern WordPress theme for rhinoplasty guide website with Tailwind CSS
Version: 1.0
Author: Rhinoplastr Team
Text Domain: rhinoplastr
*/

/* Import Tailwind CSS */
@import url('https://cdn.tailwindcss.com');

/* Custom Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* Custom Styles */
.hero-bg {
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(26,26,26,0.9) 100%), url('/assets/rptr-stock-1.jpg') center/cover no-repeat;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.btn-hover {
    transition: all 0.2s ease;
}

.btn-hover:hover {
    /* No transform effect */
}

/* Prose Styles for Content */
.prose,
.entry-content .prose,
.single .prose,
.page .prose,
article.prose,
.entry-content article.prose,
.single article.prose,
.page article.prose {
    color: #374151 !important;
    line-height: 1.8 !important;
    font-size: 1.125rem !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.prose h1,
.entry-content .prose h1,
.single .prose h1,
.page .prose h1,
article.prose h1,
.entry-content article.prose h1,
.single article.prose h1,
.page article.prose h1 {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    line-height: 1.2 !important;
}

.prose h2,
.entry-content .prose h2,
.single .prose h2,
.page .prose h2,
article.prose h2,
.entry-content article.prose h2,
.single article.prose h2,
.page article.prose h2 {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-top: 3.5rem !important;
    margin-bottom: 2rem !important;
    line-height: 1.3 !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding-bottom: 1rem !important;
}

.prose h3,
.entry-content .prose h3,
.single .prose h3,
.page .prose h3,
article.prose h3,
.entry-content article.prose h3,
.single article.prose h3,
.page article.prose h3 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.4 !important;
}

.prose h4,
.entry-content .prose h4,
.single .prose h4,
.page .prose h4,
article.prose h4,
.entry-content article.prose h4,
.single article.prose h4,
.page article.prose h4 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.4 !important;
}

.prose h5,
.entry-content .prose h5,
.single .prose h5,
.page .prose h5,
article.prose h5,
.entry-content article.prose h5,
.single article.prose h5,
.page article.prose h5 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
}

.prose h6,
.entry-content .prose h6,
.single .prose h6,
.page .prose h6,
article.prose h6,
.entry-content article.prose h6,
.single article.prose h6,
.page article.prose h6 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.4 !important;
}

.prose p,
.entry-content .prose p,
.single .prose p,
.page .prose p,
article.prose p,
.entry-content article.prose p,
.single article.prose p,
.page article.prose p {
    margin-bottom: 2rem !important;
    font-size: 1.125rem !important;
    line-height: 1.8 !important;
}

.prose ul, .prose ol,
.entry-content .prose ul, .entry-content .prose ol,
.single .prose ul, .single .prose ol,
.page .prose ul, .page .prose ol,
article.prose ul, article.prose ol,
.entry-content article.prose ul, .entry-content article.prose ol,
.single article.prose ul, .single article.prose ol,
.page article.prose ul, .page article.prose ol {
    margin-bottom: 2rem !important;
    padding-left: 2rem !important;
    font-size: 1.125rem !important;
}

.prose li,
.entry-content .prose li,
.single .prose li,
.page .prose li,
article.prose li,
.entry-content article.prose li,
.single article.prose li,
.page article.prose li {
    margin-bottom: 1rem !important;
    line-height: 1.7 !important;
}

.prose ul li,
.entry-content .prose ul li,
.single .prose ul li,
.page .prose ul li,
article.prose ul li,
.entry-content article.prose ul li,
.single article.prose ul li,
.page article.prose ul li {
    list-style-type: disc !important;
}

.prose ol li,
.entry-content .prose ol li,
.single .prose ol li,
.page .prose ol li,
article.prose ol li,
.entry-content article.prose ol li,
.single article.prose ol li,
.page article.prose ol li {
    list-style-type: decimal !important;
}

.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul,
.entry-content .prose ul ul, .entry-content .prose ol ol, .entry-content .prose ul ol, .entry-content .prose ol ul,
.single .prose ul ul, .single .prose ol ol, .single .prose ul ol, .single .prose ol ul,
.page .prose ul ul, .page .prose ol ol, .page .prose ul ol, .page .prose ol ul,
article.prose ul ul, article.prose ol ol, article.prose ul ol, article.prose ol ul,
.entry-content article.prose ul ul, .entry-content article.prose ol ol, .entry-content article.prose ul ol, .entry-content article.prose ol ul,
.single article.prose ul ul, .single article.prose ol ol, .single article.prose ul ol, .single article.prose ol ul,
.page article.prose ul ul, .page article.prose ol ol, .page article.prose ul ol, .page article.prose ol ul {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.prose table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 3rem 0 !important;
    font-size: 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.prose th, .prose td {
    border: 1px solid #e5e7eb !important;
    padding: 1.25rem !important;
    text-align: left !important;
    vertical-align: top !important;
}

.prose th {
    background-color: #f8fafc !important;
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.prose td {
    color: #4b5563 !important;
}

.prose strong {
    font-weight: 700 !important;
    color: #111827 !important;
}

.prose em {
    font-style: italic !important;
    color: #6b7280 !important;
}

.prose a {
    color: #2563eb !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
    transition: color 0.2s ease !important;
}

.prose a:hover {
    color: #1d4ed8 !important;
    text-decoration-thickness: 2px !important;
}

.prose blockquote {
    border-left: 4px solid #e5e7eb !important;
    padding-left: 1.5rem !important;
    margin: 2rem 0 !important;
    font-style: italic !important;
    color: #6b7280 !important;
    background-color: #f9fafb !important;
    padding: 1.5rem !important;
    border-radius: 0 8px 8px 0 !important;
}

.prose code {
    background-color: #f1f5f9 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 4px !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: 0.875rem !important;
    color: #e11d48 !important;
}

.prose pre {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    padding: 1.5rem !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    margin: 2rem 0 !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

.prose pre code {
    background-color: transparent !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
}

.prose img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 2rem 0 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.prose hr {
    border: none !important;
    height: 1px !important;
    background-color: #e5e7eb !important;
    margin: 3rem 0 !important;
}

/* Remove card styling and shadows */
.card-hover {
    transition: none;
}

.card-hover:hover {
    box-shadow: none;
    transform: none;
}

/* WordPress specific styles */
.wp-block-image {
    margin: 0;
}

.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Ensure no radius on buttons and cards */
.btn, .card, .image-overlay, .feature-pill, .feature-pill .dot {
    border-radius: 0 !important;
}

/* Custom grid for 2-column layout */
.grid-2x2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .grid-2x2 {
        grid-template-columns: 1fr;
    }
}