/* RentalHawk - Custom Styles
   These override Tailwind Typography plugin defaults with brand-specific styling.
   Using !important on key properties to beat CDN-injected Tailwind styles. */

/* Prose overrides — brand-specific heading treatments */
.prose h2 {
    font-size: 1.5em !important;
    margin-top: 2em !important;
    margin-bottom: 0.75em !important;
    padding-bottom: 0.5em !important;
    border-bottom: 2px solid #e5e7eb !important;
    color: #111827 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
.prose h2:first-child {
    margin-top: 0 !important;
}
.prose h3 {
    font-size: 1.2em !important;
    margin-top: 1.75em !important;
    margin-bottom: 0.5em !important;
    padding-left: 0.75em !important;
    border-left: 3px solid #cc3333 !important;
    color: #111827 !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
.prose h4 {
    font-size: 1.05em !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.4em !important;
    color: #111827 !important;
    font-weight: 600 !important;
}

/* Brand link color */
.prose a {
    color: #cc3333 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
.prose a:hover {
    color: #991b1b !important;
}

/* Blockquotes — red accent */
.prose blockquote {
    border-left-color: #cc3333 !important;
    color: #6b7280 !important;
    font-style: italic;
}

/* Tables */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}
.prose th, .prose td {
    border: 1px solid #e5e7eb;
    padding: 0.75em 1em;
    text-align: left;
}
.prose th {
    background: #f9fafb;
    font-weight: 600;
}

/* Strong text */
.prose strong {
    color: #111827 !important;
}

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

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

/* Focus styles */
a:focus-visible, button:focus-visible {
    outline: 2px solid #cc3333;
    outline-offset: 2px;
    border-radius: 4px;
}

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