/**
 * Family By Design — main.css
 * Supplemental styles loaded after style.css.
 * Covers: form validation states, WordPress editor styles,
 *         admin dashboard customizations, utility overrides.
 */

/* ─── FORM ERROR STATES ─────────────────────── */
.form-input.has-error,
.form-select.has-error,
.form-textarea.has-error {
    border-color: var(--error);
    background: rgba(192, 57, 43, 0.04);
}

.form-input.has-error:focus,
.form-select.has-error:focus,
.form-textarea.has-error:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.field-error-msg {
    font-size: var(--text-xs);
    color: var(--error);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ─── SUCCESS STATE ─────────────────────────── */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
    border-color: var(--success);
}

/* ─── LOADING SPINNER ───────────────────────── */
.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ─── STICKY HEADER ADMIN BAR FIX ───────────── */
.admin-bar #site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar #site-header {
        top: 46px;
    }
}

/* ─── WORDPRESS CORE BLOCK OVERRIDES ────────── */
.wp-block-quote {
    border-left: 3px solid var(--gold);
    padding-left: var(--space-6);
    margin: var(--space-8) 0;
}

.wp-block-quote p {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--navy);
}

.wp-block-pullquote {
    border-top: 3px solid var(--gold);
    border-bottom: 3px solid var(--gold);
    padding: var(--space-8) 0;
    text-align: center;
}

.wp-block-button .wp-block-button__link {
    background-color: var(--navy);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    padding: var(--space-4) var(--space-8);
    border-radius: 0;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1px solid var(--navy);
    color: var(--navy);
}

.entry-content h2 { margin-top: var(--space-10); }
.entry-content h3 { margin-top: var(--space-8); }
.entry-content p  { margin-bottom: var(--space-5); }
.entry-content ul,
.entry-content ol {
    margin-bottom: var(--space-5);
    padding-left: var(--space-6);
}

.entry-content ul li,
.entry-content ol li {
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    color: var(--text-mid);
}

.entry-content a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.entry-content a:hover {
    color: var(--gold);
}

/* ─── SEARCH FORM ───────────────────────────── */
.search-form {
    display: flex;
    gap: var(--space-2);
    max-width: 400px;
    margin: 0 auto;
}

.search-field {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    border: 1px solid var(--cream-dark);
    outline: none;
    background: var(--white);
    color: var(--text-primary);
}

.search-field:focus {
    border-color: var(--navy);
}

.search-submit {
    padding: var(--space-3) var(--space-5);
    background: var(--navy);
    color: var(--cream);
    border: none;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.search-submit:hover {
    background: var(--navy-light);
}

/* ─── PAGINATION ────────────────────────────── */
.nav-links,
.posts-navigation,
.post-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    flex-wrap: wrap;
}

.nav-links a,
.nav-previous a,
.nav-next a,
.page-numbers {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--cream-dark);
    color: var(--navy);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: all var(--transition-fast);
}

.nav-links a:hover,
.nav-previous a:hover,
.nav-next a:hover,
.page-numbers.current {
    background: var(--navy);
    color: var(--cream);
    border-color: var(--navy);
}

/* ─── WIDGET STYLES ─────────────────────────── */
.widget {
    margin-bottom: var(--space-8);
}

.widget-title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--cream-dark);
}

/* ─── ADMIN CSS ─────────────────────────────── */
.toplevel_page_fbd-settings .wrap h1 {
    color: #0B1C3D;
}

/* ─── PRINT ─────────────────────────────────── */
@media print {
    .btn,
    .mobile-toggle,
    .hero-scroll,
    .form-submit-area { display: none !important; }
    .hero { min-height: auto; padding: 2rem 0; }
}

/* ─── HIGH CONTRAST / ACCESSIBILITY ─────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .hero-scroll-line { animation: none; }
    .fbd-animate { opacity: 1 !important; transform: none !important; }
}

@media (prefers-color-scheme: dark) {
    /* Override — the brand uses a deliberately dark theme; keep as-is */
}

/* ─── ELEMENTOR COMPATIBILITY ────────────────── */
.elementor-section .elementor-container { max-width: none; }
.elementor-widget-wrap > .elementor-element { margin: 0; }

/* ─── CUSTOM SCROLLBAR ───────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--navy); }