/* Additional custom styles beyond Tailwind */
/* This file is for any styles that need to override Tailwind or plugin styles */

/* WooCommerce specific styling */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top-color: #171717 !important;
    background: #fafafa;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: #171717 !important;
}

/* Contact Form 7 styling */
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
    margin-top: 0.5rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 1rem 1.5rem;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: border-color 0.3s;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    outline: none;
    border-color: #171717;
}

.wpcf7 input[type="submit"] {
    width: 100%;
    padding: 1rem 2rem;
    background: #171717;
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    cursor: pointer;
    transition: background 0.3s;
}

.wpcf7 input[type="submit"]:hover {
    background: #404040;
}

.wpcf7 label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #737373;
    display: block;
    margin-bottom: 0.25rem;
}

.wpcf7-not-valid-tip {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.wpcf7-response-output {
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
}

/* Prose overrides for blog content */
.prose img {
    border-radius: 0.75rem;
    margin: 2rem 0;
}

.prose a {
    color: white;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose blockquote {
    border-left-color: #525252;
    font-style: italic;
}

/* WordPress admin bar spacing */
body.admin-bar nav[role="navigation"] {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar nav[role="navigation"] {
        top: 46px;
    }
}