/* * child-theme-styles.css
 * This file is for minimal CSS that Tailwind can't handle,
 * like styling the raw HTML output from a WYSIWYG table.
 */

/* * Price Table Styling
 * We wrap the WYSIWYG in 'prose-table-wrapper'
 * and style the table inside it.
 */
.prose-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2em;
    font-size: 0.95rem;
}

.prose-table-wrapper th,
.prose-table-wrapper td {
    border: 1px solid #e2e8f0; /* gray-200 */
    padding: 0.75rem 1rem; /* 12px 16px */
    text-align: left;
}

.prose-table-wrapper thead th {
    background-color: #f8fafc; /* gray-50 */
    font-weight: 600; /* semibold */
    color: #1e293b; /* gray-800 */
}

.prose-table-wrapper tbody tr:nth-child(even) {
    background-color: #f8fafc; /* gray-50 */
}

.prose-table-wrapper tbody tr:hover {
    background-color: #f1f5f9; /* gray-100 */
}

/* * Contact Form 7 Styling (Basic)
 * This provides basic Tailwind-like styles to a default CF7 form.
 */
.flex-contact-form .wpcf7-form-control {
    display: block;
    width: 100%;
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db; /* gray-300 */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    margin-bottom: 1rem; /* mb-4 */
}

.flex-contact-form .wpcf7-form-control:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb; /* blue-600 */
    box-shadow: 0 0 0 2px #2563eb; /* ring-2 ring-blue-600 */
}

.flex-contact-form .wpcf7-submit {
    display: inline-block;
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid transparent;
    background-color: #2563eb; /* bg-blue-600 */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    font-size: 1rem;
    font-weight: 500; /* medium */
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.flex-contact-form .wpcf7-submit:hover {
    background-color: #1d4ed8; /* bg-blue-700 */
}



/* 1. Apply the body font ('Lato') to everything */
body, 
button, 
input, 
select, 
textarea,
.prose {
    font-family: 'Lato', sans-serif;
}

/* 2. Apply the heading font ('Titillium Web') to all headings */
/* We use !important as requested to ensure it overrides all other styles */
h1, 
h2, 
h3, 
h4, 
h5, 
h6,
.font-heading { /* Added a .font-heading class for flexibility */
    font-family: 'Titillium Web', sans-serif !important;
}