.elementor-2029 .elementor-element.elementor-element-0b1c3cb{--display:flex;--min-height:calc(100vh - 134px);--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2029 .elementor-element.elementor-element-7a773aa{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 40px) 0px;}.elementor-2029 .elementor-element.elementor-element-d5692ff{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}@media(min-width:768px){.elementor-2029 .elementor-element.elementor-element-0b1c3cb{--content-width:1200px;}}/* Start custom CSS for container, class: .elementor-element-0b1c3cb *//* =========================================
   Sirius Canine Fertility — Announcements Page
   Theme Override CSS
   Ensures Voxel/Elementor components match
   the SCF brand palette and design system.
   Paste into: Appearance > Customize > Additional CSS
   or load via child theme / Elementor custom CSS.
   ========================================= */

/* ── Brand Tokens ── */
:root {
    --scf-purple: #483475;
    --scf-purple-hover: #37265d;
    --scf-purple-light: #592d90;
    --scf-purple-bg: #f0eef6;
    --scf-text: #1A1D20;
    --scf-text-muted: #687076;
    --scf-text-body: #3d4247;
    --scf-border: #e8e9eb;
    --scf-white: #FFFFFF;
    --scf-green: #114e0e;
    --scf-radius: 8px;
    --scf-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* ══════════════════════════════════════════
   1. VOXEL BUTTONS (ts-btn)
   The Voxel theme sets accent colors via
   CSS vars that don't match our palette.
   We override every button variant.
   ══════════════════════════════════════════ */

/* Primary action button (Submit, Save, Publish) */
.ts-btn.ts-btn-2 {
    background-color: var(--scf-purple) !important;
    color: var(--scf-white) !important;
    border-color: var(--scf-purple) !important;
    border-radius: var(--scf-radius) !important;
    font-family: var(--scf-font) !important;
    font-weight: 600 !important;
    transition: all 150ms ease-out !important;
}

.ts-btn.ts-btn-2:hover,
.ts-btn.ts-btn-2:focus-visible {
    background-color: var(--scf-purple-hover) !important;
    color: var(--scf-white) !important;
    border-color: var(--scf-purple-hover) !important;
}

/* Secondary / outline button (Clear, Cancel) */
.ts-btn.ts-btn-1 {
    background-color: var(--scf-white) !important;
    color: var(--scf-text) !important;
    border: 1px solid var(--scf-border) !important;
    border-radius: var(--scf-radius) !important;
    font-family: var(--scf-font) !important;
    font-weight: 500 !important;
    transition: all 150ms ease-out !important;
}

.ts-btn.ts-btn-1:hover,
.ts-btn.ts-btn-1:focus-visible {
    border-color: var(--scf-purple) !important;
    color: var(--scf-purple) !important;
    background-color: var(--scf-purple-bg) !important;
}

/* Tertiary / ghost button (Load more, Show all replies) */
.ts-btn.ts-btn-4 {
    background-color: transparent !important;
    color: var(--scf-purple-light) !important;
    border: 1px solid var(--scf-border) !important;
    border-radius: var(--scf-radius) !important;
    font-family: var(--scf-font) !important;
    font-weight: 500 !important;
    transition: all 150ms ease-out !important;
}

.ts-btn.ts-btn-4:hover,
.ts-btn.ts-btn-4:focus-visible {
    background-color: var(--scf-purple-bg) !important;
    color: var(--scf-purple) !important;
    border-color: var(--scf-purple) !important;
}

/* Icon buttons (close, etc.) */
.ts-icon-btn {
    color: var(--scf-text-muted) !important;
    transition: color 150ms ease-out !important;
}

.ts-icon-btn:hover,
.ts-icon-btn:focus-visible {
    color: var(--scf-purple) !important;
}

/* Load more link-style button */
.ts-load-more {
    color: var(--scf-purple-light) !important;
    font-family: var(--scf-font) !important;
}

.ts-load-more:hover {
    color: var(--scf-purple) !important;
}


/* ══════════════════════════════════════════
   2. ELEMENTOR FORM BUTTON (Subscribe)
   ══════════════════════════════════════════ */

.elementor-button {
    background-color: var(--scf-purple) !important;
    color: var(--scf-white) !important;
    border-radius: var(--scf-radius) !important;
    font-family: var(--scf-font) !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 150ms ease-out !important;
}

.elementor-button:hover,
.elementor-button:focus-visible {
    background-color: var(--scf-purple-hover) !important;
    color: var(--scf-white) !important;
}

.elementor-button .elementor-button-text {
    color: var(--scf-white) !important;
    font-family: var(--scf-font) !important;
    font-weight: 600 !important;
}

.elementor-button:hover .elementor-button-text {
    color: var(--scf-white) !important;
}


/* ══════════════════════════════════════════
   3. ELEMENTOR FORM INPUTS
   ══════════════════════════════════════════ */

.elementor-field-textual {
    border: 1px solid var(--scf-border) !important;
    border-radius: var(--scf-radius) !important;
    font-family: var(--scf-font) !important;
    color: var(--scf-text) !important;
    transition: border-color 150ms ease-out !important;
}

.elementor-field-textual:focus {
    border-color: var(--scf-purple) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(72, 52, 117, 0.12) !important;
}


/* ══════════════════════════════════════════
   4. VOXEL SOCIAL FEED / TIMELINE
   ══════════════════════════════════════════ */

/* Accent color overrides for Voxel's post feed */
.post-feed-grid a:not(.ts-btn):hover,
.ts-timeline-popup a:hover {
    color: var(--scf-purple) !important;
}

/* Star rating accent */
.ts-star-icon {
    color: #FBBC04 !important;
}


/* ══════════════════════════════════════════
   5. HEADINGS & TYPOGRAPHY
   ══════════════════════════════════════════ */

.elementor-heading-title {
    font-family: var(--scf-font) !important;
    color: var(--scf-text) !important;
    letter-spacing: -0.02em !important;
}


/* ══════════════════════════════════════════
   6. VOXEL POPUP / MODAL OVERRIDES
   ══════════════════════════════════════════ */

.ts-popup-content-wrapper {
    border-radius: 12px !important;
    border: 1px solid var(--scf-border) !important;
    font-family: var(--scf-font) !important;
}

/* Popup close button */
.ts-popup-close:hover {
    color: var(--scf-purple) !important;
}

/* Popup buttons inherit the same ts-btn overrides above */


/* ══════════════════════════════════════════
   7. VOXEL FORM FIELDS (Create Post, etc.)
   ══════════════════════════════════════════ */

.ts-form .ts-form-group input,
.ts-form .ts-form-group textarea,
.ts-form .ts-form-group select {
    border: 1px solid var(--scf-border) !important;
    border-radius: var(--scf-radius) !important;
    font-family: var(--scf-font) !important;
    color: var(--scf-text) !important;
    transition: border-color 150ms ease-out !important;
}

.ts-form .ts-form-group input:focus,
.ts-form .ts-form-group textarea:focus,
.ts-form .ts-form-group select:focus {
    border-color: var(--scf-purple) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(72, 52, 117, 0.12) !important;
}


/* ══════════════════════════════════════════
   8. NOTICES / ALERTS
   ══════════════════════════════════════════ */

.ts-notice {
    border-radius: var(--scf-radius) !important;
    font-family: var(--scf-font) !important;
}

.close-alert {
    color: var(--scf-text-muted) !important;
    border: 1px solid var(--scf-border) !important;
    border-radius: var(--scf-radius) !important;
    font-family: var(--scf-font) !important;
}

.close-alert:hover {
    color: var(--scf-purple) !important;
    border-color: var(--scf-purple) !important;
}


/* ══════════════════════════════════════════
   9. FOCUS VISIBLE (Accessibility)
   ══════════════════════════════════════════ */

.ts-btn:focus-visible,
.ts-icon-btn:focus-visible,
.elementor-button:focus-visible,
.ts-form input:focus-visible,
.ts-form textarea:focus-visible {
    outline: 2px solid var(--scf-purple) !important;
    outline-offset: 2px !important;
}


/* ══════════════════════════════════════════
   10. PROMOTE LISTING CARD
   (already uses #592d90, just ensure text)
   ══════════════════════════════════════════ */

.promo-card-btn {
    background-color: var(--scf-purple-light) !important;
    color: var(--scf-white) !important;
    border-radius: var(--scf-radius) !important;
    font-family: var(--scf-font) !important;
    font-weight: 600 !important;
    transition: all 150ms ease-out !important;
}

.promo-card-btn:hover {
    background-color: var(--scf-purple-hover) !important;
    color: var(--scf-white) !important;
}/* End custom CSS */