/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ============================================================
   SECTION 1 — INTERACTIVE TOOLS
   (Tool Wrappers, Custom Dropdowns, Forms, Results, Print)
   ============================================================ */

/* — Tool Container Wrapper — */
.brocia-tool-wrapper,
#spg-scope,
#brocia-pillow-loft-calculator,
#brocia-symptom,
.brocia-solution-finder-wrapper,
.brocia-sleep-calc-wrapper,
.brocia-cost-calc-wrapper,
.brocia-replacement-checker-wrapper {
    box-sizing: border-box !important;
    max-width: 640px !important;
    margin: 32px auto !important;
    width: 100% !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 30px 0 !important;
    box-shadow: none !important;
    color: #403f3f !important;
    color-scheme: light !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.brocia-tool-wrapper *,
#spg-scope *,
#brocia-pillow-loft-calculator *,
#brocia-symptom * {
    box-sizing: border-box !important;
}

/* — Field Groups & Labels — */
.brocia-tool-wrapper .field-group,
.brocia-tool-wrapper .calc-section,
.brocia-tool-wrapper .q-block,
.brocia-tool-wrapper .input-group,
#spg-scope .field-group,
.brocia-tool-wrapper .input-row .col,
#spg-scope .input-row .col,
.brocia-tool-wrapper .selection-row .col,
#spg-scope .selection-row .col {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

.brocia-tool-wrapper .field-group:first-of-type,
.brocia-tool-wrapper .calc-section:first-of-type,
.brocia-tool-wrapper .q-block:first-of-type,
.brocia-tool-wrapper .input-group:first-of-type,
#spg-scope .field-group:first-of-type,
.brocia-tool-wrapper .input-row .col:first-of-type,
#spg-scope .input-row .col:first-of-type {
    margin-top: 0 !important;
}

.brocia-tool-wrapper label,
#spg-scope label,
.brocia-tool-wrapper .field-label,
.brocia-tool-wrapper .calc-label,
.brocia-tool-wrapper .q-label,
#spg-scope .field-label {
    display: block !important;
    font-weight: 600 !important;
    color: #403f3f !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    font-size: 0.95rem !important;
}

.brocia-tool-wrapper .optional,
#spg-scope .optional {
    font-weight: 400 !important;
    color: #888 !important;
    font-size: 0.8em !important;
}

/* — Base Form Inputs & Sliders — */
.brocia-tool-wrapper input[type="text"],
.brocia-tool-wrapper input[type="email"],
.brocia-tool-wrapper input[type="number"],
.brocia-tool-wrapper input[type="tel"],
.brocia-tool-wrapper input[type="time"],
.brocia-tool-wrapper .field-input,
#spg-scope input[type="text"],
#spg-scope input[type="email"],
#spg-scope input[type="number"],
#spg-scope input[type="tel"],
#spg-scope input[type="time"],
#spg-scope .field-input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 50px !important;
    background-color: #ffffff !important;
    color: #403f3f !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    transition: border-color 0.15s ease !important;
}

.brocia-tool-wrapper input[type="range"] {
    width: 100% !important;
    height: 6px !important;
    accent-color: #1559ed !important;
    cursor: pointer !important;
}

.brocia-tool-wrapper input[type="time"].field-input,
#spg-scope input[type="time"].field-input {
    font-weight: 700 !important;
    color: #1559ed !important;
    text-align: center !important;
}

/* — Textarea — */
.brocia-tool-wrapper textarea,
#spg-scope textarea {
    width: 100% !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 24px !important;
    background-color: #ffffff !important;
    color: #403f3f !important;
    box-shadow: none !important;
    outline: none !important;
    min-height: 100px !important;
    resize: vertical !important;
    transform: none !important;
    transition: border-color 0.15s ease !important;
}

/* — Focus States — */
.brocia-tool-wrapper input[type="text"]:focus,
.brocia-tool-wrapper input[type="email"]:focus,
.brocia-tool-wrapper input[type="number"]:focus,
.brocia-tool-wrapper input[type="tel"]:focus,
.brocia-tool-wrapper input[type="time"]:focus,
.brocia-tool-wrapper .field-input:focus,
.brocia-tool-wrapper textarea:focus,
#spg-scope input:focus,
#spg-scope textarea:focus {
    border: 1px solid #1559ed !important;
    box-shadow: inset 0 0 0 1px #1559ed !important;
    outline: none !important;
}

/* — 2-Column Grid Layout — */
.brocia-tool-wrapper .dropdown-grid,
.brocia-tool-wrapper .input-row,
.brocia-tool-wrapper .times-grid,
.brocia-tool-wrapper .selection-row,
#spg-scope .dropdown-grid,
#spg-scope .input-row,
#spg-scope .times-grid,
#spg-scope .selection-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 12px !important;
    margin-top: 20px !important;
}

.brocia-tool-wrapper .dropdown-grid .field-group,
.brocia-tool-wrapper .input-row .col,
.brocia-tool-wrapper .selection-row .col,
#spg-scope .dropdown-grid .field-group,
#spg-scope .input-row .col,
#spg-scope .selection-row .col {
    margin-top: 0 !important;
}

.brocia-tool-wrapper .dropdown-grid .field-group.full-width,
#spg-scope .dropdown-grid .field-group.full-width {
    grid-column: 1 / -1 !important;
}

/* — Time Cards — */
.brocia-tool-wrapper .time-card,
#spg-scope .time-card {
    border: 1px solid #e5e7eb !important;
    background-color: #ffffff !important;
    padding: 16px !important;
    text-align: center !important;
    border-radius: 12px !important;
    transition: border-color 0.15s ease !important;
}

.brocia-tool-wrapper .time-card.optimal,
#spg-scope .time-card.optimal {
    border: 2px solid #1559ed !important;
    background-color: #f4f7ff !important;
}

.brocia-tool-wrapper .time-val,
#spg-scope .time-val {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1559ed !important;
}

.brocia-tool-wrapper .time-cycles,
#spg-scope .time-cycles {
    font-size: 0.8em !important;
    color: #888 !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
}

/* — Comparison Tables — */
.brocia-tool-wrapper .cmp-table,
#spg-scope .cmp-table {
    width: 100% !important;
    margin: 20px 0 !important;
    border-top: 1px solid #e5e7eb !important;
}

.brocia-tool-wrapper .cmp-rowline,
#spg-scope .cmp-rowline {
    display: flex !important;
    border-bottom: 1px solid #e5e7eb !important;
    align-items: center !important;
}

.brocia-tool-wrapper .cmp-attr,
#spg-scope .cmp-attr {
    flex: 0 0 34% !important;
    padding: 12px 10px 12px 0 !important;
    color: #888 !important;
    font-weight: 500 !important;
}

.brocia-tool-wrapper .cmp-a,
.brocia-tool-wrapper .cmp-bcell,
#spg-scope .cmp-a,
#spg-scope .cmp-bcell {
    flex: 1 1 33% !important;
    padding: 12px 10px !important;
    color: #403f3f !important;
}

.brocia-tool-wrapper .cmp-head .cmp-a,
.brocia-tool-wrapper .cmp-head .cmp-bcell,
#spg-scope .cmp-head .cmp-a,
#spg-scope .cmp-head .cmp-bcell {
    font-weight: 700 !important;
}

.brocia-tool-wrapper .cmp-win,
#spg-scope .cmp-win {
    display: inline-block !important;
    margin-left: 8px !important;
    padding: 2px 10px !important;
    font-size: 0.75em !important;
    border-radius: 50px !important;
    background-color: #1559ed !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* — Custom Dropdown Selector — */
.brocia-tool-wrapper .custom-select,
#spg-scope .custom-select {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

.brocia-tool-wrapper .native-select-mobile,
#spg-scope .native-select-mobile {
    display: none !important;
}

.brocia-tool-wrapper .custom-select-trigger,
#spg-scope .custom-select-trigger {
    width: 100% !important;
    height: 48px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 50px !important;
    background-color: #ffffff !important;
    color: #403f3f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    outline: none !important;
    user-select: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 0.15s ease, border-radius 0.15s ease !important;
}

.brocia-tool-wrapper .custom-select-trigger:hover,
#spg-scope .custom-select-trigger:hover {
    border-color: #d1d5db !important;
    transform: none !important;
}

.brocia-tool-wrapper .custom-select-trigger:focus,
#spg-scope .custom-select-trigger:focus {
    border-color: #e5e7eb !important;
    outline: none !important;
    box-shadow: none !important;
}

.brocia-tool-wrapper .custom-select.is-open .custom-select-trigger,
#spg-scope .custom-select.is-open .custom-select-trigger {
    border: 1px solid #e5e7eb !important;
    border-bottom: none !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
}

.brocia-tool-wrapper .custom-select-options,
#spg-scope .custom-select-options {
    display: none;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-top: none !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    z-index: 100 !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.brocia-tool-wrapper .custom-select.is-open .custom-select-options,
#spg-scope .custom-select.is-open .custom-select-options {
    display: block !important;
}

.brocia-tool-wrapper .custom-select-options .option,
#spg-scope .custom-select-options .option {
    padding: 11px 16px !important;
    margin: 0 !important;
    color: #403f3f !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

.brocia-tool-wrapper .custom-select-options .option:last-child,
#spg-scope .custom-select-options .option:last-child {
    border-bottom: none !important;
}

.brocia-tool-wrapper .custom-select-options .option:hover,
.brocia-tool-wrapper .custom-select-options .option.selected,
#spg-scope .custom-select-options .option:hover,
#spg-scope .custom-select-options .option.selected {
    background-color: #f4f7ff !important;
    color: #1559ed !important;
    font-weight: 600 !important;
}

.brocia-tool-wrapper .custom-select-trigger .arrow-icon,
#spg-scope .custom-select-trigger .arrow-icon {
    width: 12px !important;
    height: 8px !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}

.brocia-tool-wrapper .custom-select.is-open .custom-select-trigger .arrow-icon,
#spg-scope .custom-select.is-open .custom-select-trigger .arrow-icon {
    transform: rotate(180deg) !important;
}

/* — Checklist Cards — */
.brocia-tool-wrapper .checker-list,
#spg-scope .checker-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.brocia-tool-wrapper .check-item,
#spg-scope .check-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    background-color: #ffffff !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.brocia-tool-wrapper .check-item:hover,
#spg-scope .check-item:hover {
    background-color: #fafafa !important;
    border-color: #d1d5db !important;
}

.brocia-tool-wrapper .check-item.active,
.brocia-tool-wrapper .check-item:has(input:checked),
#spg-scope .check-item.active,
#spg-scope .check-item:has(input:checked) {
    border-color: #1559ed !important;
    background-color: #f4f7ff !important;
}

.brocia-tool-wrapper .check-item input[type="checkbox"],
.brocia-tool-wrapper .rc-check,
#spg-scope .rc-check {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    accent-color: #1559ed !important;
    flex-shrink: 0 !important;
}

.brocia-tool-wrapper .check-text,
#spg-scope .check-text {
    font-weight: 500 !important;
    color: #403f3f !important;
}

.brocia-tool-wrapper .check-item.active .check-text,
.brocia-tool-wrapper .check-item:has(input:checked) .check-text,
#spg-scope .check-item.active .check-text,
#spg-scope .check-item:has(input:checked) .check-text {
    font-weight: 600 !important;
    color: #1559ed !important;
}

/* — Segmented Buttons / Option Groups — */
.brocia-tool-wrapper .seg-group,
.brocia-tool-wrapper .seg-row,
.brocia-tool-wrapper .tabs,
#spg-scope .seg-group,
#spg-scope .tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
}

.brocia-tool-wrapper .seg-btn,
#spg-scope .seg-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    border-radius: 50px !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    border: 1px solid #e5e7eb !important;
    background-color: #ffffff !important;
    color: #403f3f !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

.brocia-tool-wrapper .seg-btn:hover,
#spg-scope .seg-btn:hover {
    background-color: #fafafa !important;
    border-color: #d1d5db !important;
}

.brocia-tool-wrapper .seg-btn.active,
.brocia-tool-wrapper .seg-btn.selected,
#spg-scope .seg-btn.active,
#spg-scope .seg-btn.selected {
    background-color: #1559ed !important;
    border-color: #1559ed !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(21, 89, 237, 0.25) !important;
}

/* — Progress / Score Bars — */
.brocia-tool-wrapper .bar-track,
.brocia-tool-wrapper .result-bar-track,
#spg-scope .bar-track {
    height: 6px !important;
    width: 100% !important;
    background-color: #e5e7eb !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
}

.brocia-tool-wrapper .bar-fill,
.brocia-tool-wrapper .result-bar-fill,
#spg-scope .bar-fill {
    height: 100% !important;
    background-color: #1559ed !important;
    border-radius: 50px !important;
    transition: width 0.3s ease !important;
}

/* — Action Row & Buttons — */
.brocia-tool-wrapper .action-row,
#spg-scope .action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 26px !important;
}

.brocia-tool-wrapper .btn-primary,
.brocia-tool-wrapper button[type="submit"],
#spg-scope .btn-primary,
#spg-scope button[type="submit"] {
    height: 48px !important;
    padding: 0 30px !important;
    margin: 0 !important;
    border-radius: 50px !important;
    border: none !important;
    background: #1559ed !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.15s ease !important;
    text-decoration: none !important;
}

.brocia-tool-wrapper .btn-primary:hover,
.brocia-tool-wrapper button[type="submit"]:hover,
#spg-scope .btn-primary:hover,
#spg-scope button[type="submit"]:hover {
    background-color: #1247c9 !important;
    transform: none !important;
}

.brocia-tool-wrapper .btn-share,
.brocia-tool-wrapper .btn-print,
.brocia-tool-wrapper .btn-copy,
#spg-scope .btn-share,
#spg-scope .btn-print,
#spg-scope .btn-copy {
    height: 48px !important;
    padding: 0 28px !important;
    border-radius: 50px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #403f3f !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto !important;
    cursor: pointer !important;
    transform: none !important;
    transition: background-color 0.15s ease !important;
    text-decoration: none !important;
}

.brocia-tool-wrapper .btn-share:hover,
.brocia-tool-wrapper .btn-print:hover,
.brocia-tool-wrapper .btn-copy:hover,
#spg-scope .btn-share:hover,
#spg-scope .btn-print:hover,
#spg-scope .btn-copy:hover {
    background-color: #fafafa !important;
    transform: none !important;
}

/* — Trust Badge Row & Source Notes — */
.brocia-tool-wrapper .trust,
.brocia-tool-wrapper .source-note,
.brocia-tool-wrapper .ss-notice,
#spg-scope .trust {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 24px !important;
    padding: 14px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 0.82em !important;
    color: #888 !important;
    line-height: 1.5 !important;
    background-color: #fafafa !important;
}

.brocia-tool-wrapper .trust-dot,
#spg-scope .trust-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #1559ed !important;
    flex-shrink: 0 !important;
    margin-top: 5px !important;
}

/* — Result Boxes — */
.brocia-tool-wrapper .result-box,
.brocia-tool-wrapper .success-box,
.brocia-tool-wrapper .error-box,
#spg-scope .result-box,
#spg-scope .success-box,
#spg-scope .error-box {
    border-radius: 12px !important;
    padding: 22px 24px !important;
    line-height: 1.5 !important;
    margin-top: 22px !important;
    background-color: #fafafa !important;
    border: 1px solid #e5e7eb !important;
    color: #403f3f !important;
}

.brocia-tool-wrapper .result-value,
.brocia-tool-wrapper .result-number,
.brocia-tool-wrapper .val-score,
.brocia-tool-wrapper .val-result,
.brocia-tool-wrapper .val-solution,
.brocia-tool-wrapper .ss-cause,
#spg-scope .result-value,
#spg-scope .result-number,
#spg-scope .val-score,
#spg-scope .val-result {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #1559ed !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
}

.brocia-tool-wrapper .result-label,
.brocia-tool-wrapper .result-box-label,
.brocia-tool-wrapper .result-rationale,
.brocia-tool-wrapper .result-sentence,
.brocia-tool-wrapper .val-rationale,
.brocia-tool-wrapper .val-headline,
.brocia-tool-wrapper .ss-fix,
#spg-scope .result-label,
#spg-scope .result-rationale,
#spg-scope .val-rationale {
    color: #403f3f !important;
    line-height: 1.5 !important;
}

.brocia-tool-wrapper .result-label,
.brocia-tool-wrapper .result-box-label {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.brocia-tool-wrapper .success-box,
#spg-scope .success-box {
    border-color: #1559ed !important;
    background-color: #fafafa !important;
}

.brocia-tool-wrapper .error-box,
#spg-scope .error-box {
    background-color: #fbeeee !important;
    border-color: #eec9c9 !important;
    color: #8a3030 !important;
}

/* — Tool Mobile (max-width: 520px) — */
@media (max-width: 520px) {
    .brocia-tool-wrapper,
    #spg-scope {
        padding: 0 0 20px 0 !important;
        margin: 20px auto !important;
    }

    .brocia-tool-wrapper .custom-select,
    #spg-scope .custom-select {
        display: none !important;
    }

    .brocia-tool-wrapper .native-select-mobile,
    #spg-scope .native-select-mobile {
        display: block !important;
        width: 100% !important;
        height: 48px !important;
        padding: 0 32px 0 14px !important;
        margin: 0 !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 50px !important;
        background-color: #ffffff !important;
        color: #403f3f !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23403f3f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        cursor: pointer !important;
    }

    .brocia-tool-wrapper .native-select-mobile:focus,
    #spg-scope .native-select-mobile:focus {
        border-color: #d1d5db !important;
        box-shadow: none !important;
    }

    .brocia-tool-wrapper .cmp-attr,
    #spg-scope .cmp-attr {
        flex: 0 0 30% !important;
    }
}

/* — Print Isolation (Tools Only) — */
@media print {
    .entry-content > *:not(.brocia-tool-wrapper):not(#spg-scope) {
        display: none !important;
    }

    #mobile-header,
    #site-navigation,
    .navigation-branding,
    header.entry-header,
    .site-header,
    .site-footer,
    .footer-widgets,
    .site-info,
    #wpadminbar,
    .action-row,
    .btn-primary,
    .btn-share,
    .btn-print,
    .btn-copy,
    .trust,
    .sidebar,
    .widget-area,
    .gb-container,
    .gb-grid-wrapper,
    .wp-block-navigation,
    .wp-block-separator,
    button {
        display: none !important;
        visibility: hidden !important;
    }

    .brocia-tool-wrapper,
    #spg-scope {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    .brocia-tool-wrapper *,
    #spg-scope * {
        visibility: visible !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}


/* ============================================================
   SECTION 2 — TOOL CARDS (Visual Mockup Cards V7 — True Blue)
   ============================================================ */

/* — Card Outer Shell — */
.brocia-tool-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.brocia-tool-card p {
    margin: 0 !important;
    padding: 0 !important;
}

.brocia-tool-card:hover .btc-title {
    color: #1559ed !important;
}

/* — Card Visual Area (True Blue, 5px radius) — */
.btc-visual {
    width: 100% !important;
    height: 240px !important;
    background: #1559ed !important;
    padding: 30px 15px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* — Card Content Below Visual — */
.btc-content {
    flex-grow: 1 !important;
    padding: 14px 0 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    text-align: left !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.btc-title {
    font-size: 23px !important;
    color: #403f3f !important;
    margin: 0 0 6px 0 !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
    line-height: 1.3 !important;
}

.btc-desc {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #555555 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* — Inner Mockup Elements (Inverted White on Blue) — */
.mk-box { width: 100%; max-width: 320px; background: transparent; border: none; padding: 0; margin: 0 auto; box-sizing: border-box; }
.mk-label { font-size: 0.75rem; color: #E9EBEC; margin-bottom: 6px; font-weight: 600; text-align: center; }
.mk-val { font-size: 2rem; font-weight: 600; color: #fff; margin-bottom: 12px; line-height: 1; text-align: center; }
.mk-result { font-size: 0.95rem; font-weight: 600; color: #fff; margin-bottom: 12px; line-height: 1.2; text-align: center; }
.mk-text-line { height: 6px; background: #E9EBEC; width: 100%; margin: 0 auto 8px auto; border-radius: 4px; }
.mk-text-line.short { width: 40%; }
.mk-text-line.med { width: 70%; margin-bottom: 0; }
.mk-divider { border-top: 1px solid rgba(255,255,255,0.2); margin: 15px 0; }
.mk-bar-bg { height: 5px; background: #E9EBEC; width: 100%; margin-bottom: 16px; border-radius: 4px; }
.mk-bar-fill { height: 100%; background: #fff; width: 65%; border-radius: 4px; }

/* — Segment Buttons (Mockup) — */
.mk-seg-group { display: flex; gap: 6px; margin-bottom: 16px; width: 100%; }
.mk-seg-btn { flex: 1; height: 30px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: rgba(255,255,255,0.8); font-weight: 500; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.mk-seg-btn.active { background: #fff; border-color: #fff; color: #1559ed; }

/* — Comparison Grid (Mockup) — */
.mk-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 300px; margin: 0 auto; }
.mk-compare-card { border: 1px solid rgba(255,255,255,0.2); padding: 16px 10px; text-align: center; background: transparent; border-radius: 5px; box-sizing: border-box; }
.mk-compare-card.winner { border-color: #fff; background: rgba(255,255,255,0.1); }
.mk-badge { background: #fff; color: #1559ed; font-size: 0.65rem; padding: 3px 8px; display: inline-block; margin-bottom: 8px; font-weight: 600; border-radius: 50px; }

/* — Stat Rows (Mockup) — */
.mk-stat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mk-stat-label { font-size: 0.65rem; color: #fff; width: 50px; font-weight: 500; text-align: left; }
.mk-stat-bar-bg { flex-grow: 1; height: 4px; background: rgba(255,255,255,0.2); position: relative; border-radius: 4px; }
.mk-stat-bar-val { position: absolute; left: 0; top: 0; height: 100%; background: #E9EBEC; border-radius: 4px; }
.mk-stat-bar-val.highlight { background: #fff; }

/* — Checklist (Mockup) — */
.mk-check-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mk-check-box { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,0.3); display: flex; justify-content: center; align-items: center; border-radius: 3px; flex-shrink: 0; }
.mk-check-box.active { background: #fff; border-color: #fff; color: #1559ed; }
.mk-check-box.active::after { content: ''; width: 4px; height: 8px; border: solid #1559ed; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; }
.mk-check-label { font-size: 0.75rem; font-weight: 500; color: #fff; text-align: left; }

/* — Slider / Range (Mockup) — */
.mk-slider-track { width: 100%; height: 4px; background: rgba(255,255,255,0.2); border-radius: 4px; position: relative; margin-bottom: 12px; }
.mk-slider-fill { height: 100%; background: #fff; border-radius: 4px; }
.mk-slider-thumb { width: 14px; height: 14px; background: #fff; border-radius: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }

/* — Circular Gauge (Mockup) — */
.mk-gauge { width: 90px; height: 90px; border-radius: 50%; background: conic-gradient(#fff var(--gauge-pct, 75%), rgba(255,255,255,0.15) 0); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px auto; }
.mk-gauge-inner { width: 66px; height: 66px; border-radius: 50%; background: #1559ed; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; color: #fff; }

/* — Tag Cloud (Mockup) — */
.mk-tag-group { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.mk-tag { padding: 4px 10px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; font-size: 0.6rem; font-weight: 500; color: rgba(255,255,255,0.8); white-space: nowrap; }
.mk-tag.active { background: #fff; border-color: #fff; color: #1559ed; }

/* — Step Flow (Mockup) — */
.mk-step-group { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 12px; }
.mk-step { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.5); flex-shrink: 0; }
.mk-step.active { background: #fff; border-color: #fff; color: #1559ed; }
.mk-step-line { width: 24px; height: 2px; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.mk-step-line.active { background: #fff; }

/* — Toggle Switches (Mockup) — */
.mk-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mk-toggle-label { font-size: 0.7rem; font-weight: 500; color: #fff; }
.mk-toggle { width: 32px; height: 18px; border-radius: 50px; background: rgba(255,255,255,0.2); position: relative; flex-shrink: 0; }
.mk-toggle.active { background: #fff; }
.mk-toggle-dot { width: 12px; height: 12px; border-radius: 50%; position: absolute; top: 3px; left: 3px; background: rgba(255,255,255,0.5); }
.mk-toggle.active .mk-toggle-dot { background: #1559ed; left: auto; right: 3px; }

/* — Icon Grid (Mockup) — */
.mk-icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 200px; margin: 0 auto 12px auto; }
.mk-icon-cell { text-align: center; }
.mk-icon { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px auto; font-size: 0.85rem; color: #fff; }
.mk-icon.active { background: rgba(255,255,255,0.15); border-color: #fff; }
.mk-icon-label { font-size: 0.55rem; color: rgba(255,255,255,0.7); font-weight: 500; }

/* — Tool Card Mobile (max-width: 768px) — */
@media (max-width: 768px) {
    .brocia-tool-card { border: none; box-shadow: none !important; background: transparent; margin-bottom: 12px !important; }
    .btc-title { font-size: 20px !important; font-weight: 600 !important; line-height: 1.25 !important; word-wrap: break-word !important; hyphens: auto !important; margin-bottom: 0 !important; }
    .btc-desc { display: none !important; }
    .btc-visual { height: auto !important; aspect-ratio: 1 / 1 !important; padding: 20px 10px !important; border-radius: 5px !important; box-shadow: none !important; }
    .btc-content { padding: 10px 0 0 0 !important; background: transparent !important; }
    .mk-label { font-size: 0.6rem; margin-bottom: 4px; }
    .mk-val { font-size: 1.4rem; margin-bottom: 8px; }
    .mk-result { font-size: 0.75rem; margin-bottom: 8px; }
    .mk-seg-group { gap: 4px; margin-bottom: 10px; }
    .mk-seg-btn { font-size: 0.5rem; height: 24px; padding: 0 2px; }
    .mk-compare-grid { gap: 6px; }
    .mk-compare-card { padding: 10px 4px; border-radius: 5px; }
    .mk-badge { font-size: 0.55rem; padding: 2px 5px; margin-bottom: 4px; }
    .mk-stat-row { gap: 4px; margin-bottom: 8px; }
    .mk-stat-label { width: 35px; font-size: 0.55rem; }
    .mk-check-row { gap: 8px; margin-bottom: 8px; }
    .mk-check-box { width: 14px; height: 14px; border-radius: 3px; }
    .mk-check-label { font-size: 0.65rem; }
    .mk-gauge { width: 65px; height: 65px; }
    .mk-gauge-inner { width: 48px; height: 48px; font-size: 1rem; }
    .mk-slider-thumb { width: 10px; height: 10px; }
    .mk-tag { font-size: 0.5rem; padding: 3px 6px; }
    .mk-tag-group { gap: 4px; margin-bottom: 8px; }
    .mk-step { width: 22px; height: 22px; font-size: 0.55rem; }
    .mk-step-line { width: 16px; }
    .mk-step-group { margin-bottom: 8px; }
    .mk-toggle-row { margin-bottom: 6px; }
    .mk-toggle-label { font-size: 0.55rem; }
    .mk-toggle { width: 26px; height: 14px; }
    .mk-toggle-dot { width: 8px; height: 8px; }
    .mk-icon-grid { gap: 6px; max-width: 160px; margin-bottom: 8px; }
    .mk-icon { width: 22px; height: 22px; font-size: 0.7rem; }
    .mk-icon-label { font-size: 0.45rem; }
}


/* ============================================================
   SECTION 3 — DESIGN TOKENS & GLOBAL POLISH
   ============================================================ */

:root {
    /* Color Palette */
    --color-primary: #1559ed;
    --color-hover: #1164ff;
    --color-active: #1048c8;
    --color-dark-blue: #1247c9;
    --color-border: #E9EBEC;
    --color-text-dark: #403f3f;
    --color-white: #ffffff;
    --color-accord-hover: #fafafa;

    /* Shadow System */
    --shadow-header-mobile: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --shadow-elevation: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 6px 12px -2px rgba(0, 0, 0, 0.08);
    --shadow-card-ambient: 0 4px 20px -2px rgba(0, 0, 0, 0.05);

    /* Button Tokens */
    --btn-accent: #1559ed;
    --btn-hover: #1164ff;
    --btn-active: #1048c8;
    --btn-text: #fff;
    --btn-font-size: 15px;
    --btn-font-weight: 700;
    --btn-radius: 100px;
    --btn-padding-y: 12px;
    --btn-padding-x: 28px;
    --btn-shadow: var(--shadow-elevation);
    --btn-shadow-hover: var(--shadow-elevation);
    --btn-transition: background 0.2s ease;

    /* Navigation Filter Pills */
    --filter-pill-padding: 4px 11px;
}

/* — Smooth Scroll & Brand Selection — */
html {
    scroll-behavior: smooth;
}

::selection {
    background: #1559ed;
    color: #ffffff;
}
::-moz-selection {
    background: #1559ed;
    color: #ffffff;
}

/* — Reduced Motion Accessibility — */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   SECTION 4 — SITE HEADER & NAVIGATION
   ============================================================ */

/* — Mobile Base — */
.site-header,
#mobile-header,
#sticky-navigation,
#site-navigation,
.main-navigation {
    box-shadow: var(--shadow-header-mobile);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 999;
}

.slideout-navigation .main-nav ul li,
.main-navigation.toggled .main-nav ul li {
    border-bottom: 1px solid var(--color-border) !important;
}

.main-navigation ul ul,
.slideout-navigation ul ul {
    box-shadow: none !important;
    border: none !important;
    padding-left: 20px !important;
}

.main-navigation ul ul li:last-child,
.slideout-navigation ul ul li:last-child {
    border-bottom: none !important;
}

/* — Brand Badge (Pill) — */
.main-navigation .main-nav ul li.site-bar,
.site-branding .main-title,
.main-title,
p.main-title {
    background: linear-gradient(135deg, #1559ed 0%, #1164ff 100%) !important;
    padding: 5px 15px !important;
    border-radius: 50px !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 14px rgba(21, 89, 237, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: none !important;
}

.site-branding .main-title:active,
.main-title:active,
p.main-title:active {
    box-shadow: 0 2px 8px rgba(21, 89, 237, 0.2) !important;
}

.main-navigation .main-nav ul li.site-bar a,
.site-branding .main-title a,
.main-title a,
.main-navigation .main-nav ul li.site-bar a:hover,
.site-branding .main-title a:hover,
.main-title a:hover {
    color: #ffffff !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* — Desktop Nav (min-width: 769px) — */
@media (min-width: 769px) {
    .site-header,
    .main-navigation,
    #site-navigation,
    .nav-below-header,
    .inside-header {
        border-bottom: 1px solid var(--color-border) !important;
        box-shadow: var(--shadow-elevation) !important;
    }

    .main-navigation .main-nav ul ul,
    .main-navigation ul ul,
    .sub-menu {
        width: 440px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0 !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 5px !important;
        overflow: hidden !important;
        box-shadow: var(--shadow-elevation) !important;
        box-sizing: border-box !important;
    }

    .main-navigation .main-nav ul ul > li {
        width: 50% !important;
        flex: 0 0 50% !important;
        box-sizing: border-box !important;
    }

    .main-navigation .main-nav ul ul > li > a {
        padding: 15px 20px !important;
    }

    .main-navigation .main-nav ul ul > li:nth-child(odd) {
        border-right: 1px solid var(--color-border) !important;
    }

    .main-navigation .main-nav ul ul li {
        border-bottom: 1px solid var(--color-border) !important;
    }

    .main-navigation .main-nav ul ul li:nth-last-child(1),
    .main-navigation .main-nav ul ul li:nth-child(odd):nth-last-child(2) {
        border-bottom: none !important;
    }

    .main-navigation .main-nav > ul > li > ul {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }

    .main-navigation .main-nav > ul > li:nth-last-child(-n+2) > ul {
        left: auto !important;
        right: 0 !important;
        transform: none;
    }

    .main-navigation .main-nav > ul > li:nth-last-child(-n+2) ul ul {
        left: auto !important;
        right: 100% !important;
    }
}

/* — Mobile Nav (max-width: 768px) — */
@media (max-width: 768px) {
    .main-navigation ul ul > li {
        width: 100% !important;
        flex: none !important;
    }

    .main-navigation ul ul > li:nth-child(odd) {
        border-right: none !important;
    }

    .main-navigation .main-nav > ul > li > ul {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
    }

    #mobile-header,
    .inside-header,
    .site-logo,
    .inside-navigation,
    .main-navigation .inside-navigation {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}


/* ============================================================
   SECTION 5 — GLOBAL BUTTONS & FORMS
   ============================================================ */

/* — Submit Buttons — */
#submit,
input[type="submit"].submit,
.comment-form input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--btn-accent) 0%, #2e3ff0 100%) !important;
    color: var(--btn-text) !important;
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    border: none !important;
    border-radius: var(--btn-radius) !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    box-shadow: var(--btn-shadow) !important;
    cursor: pointer !important;
    transition: var(--btn-transition) !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
}

#submit:hover,
input[type="submit"].submit:hover,
.comment-form input[type="submit"]:hover {
    background: linear-gradient(135deg, var(--btn-hover) 0%, #2d3ff5 100%) !important;
    box-shadow: var(--btn-shadow-hover) !important;
    color: var(--btn-text) !important;
}

#submit:active,
input[type="submit"].submit:active {
    background: linear-gradient(135deg, var(--btn-active) 0%, #2231d4 100%) !important;
    box-shadow: var(--shadow-elevation) !important;
}

#submit:focus-visible,
input[type="submit"].submit:focus-visible,
.comment-form input[type="submit"]:focus-visible {
    outline: 2px solid #1559ed !important;
    outline-offset: 3px !important;
}

/* — Global Input Focus Border — */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus {
    outline: none !important;
    border: 1px solid var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary) !important;
}

/* — Filter Navigation Pills — */
.content-area .wp-block-navigation__container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.content-area .wp-block-navigation-item a.wp-block-navigation-item__content {
    display: inline-flex !important;
    align-items: center !important;
    padding: var(--filter-pill-padding) !important;
    border-radius: 50px !important;
    border: 1px solid var(--color-border) !important;
    background-color: transparent !important;
    color: var(--color-text-dark) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: opacity 0.15s ease !important;
}

.content-area .wp-block-navigation-item__description {
    display: none !important;
}

.content-area .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
    background-color: var(--color-dark-blue) !important;
    border-color: var(--color-dark-blue) !important;
    color: var(--color-white) !important;
}

.content-area .wp-block-navigation-item a.wp-block-navigation-item__content:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}

.content-area .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.content-area .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content,
.content-area .wp-block-navigation-item.is-active-pill > a.wp-block-navigation-item__content {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}


/* ============================================================
   SECTION 6 — BLOCKS, TABLES & ACCORDIONS
   ============================================================ */

/* — Article Images — */
.entry-content img,
.wp-block-image img {
    box-shadow: var(--shadow-elevation) !important;
}

.wp-block-image img {
    border-radius: 5px !important;
}

.wp-block-image {
    margin-bottom: 1.5em !important;
}

.wp-block-image figcaption {
    display: none !important;
}

.wp-block-group.has-background,
#brocia-pillow-comparison .compare-card {
    box-shadow: var(--shadow-card-ambient) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* — File Download Button — */
.wp-block-file .wp-block-file__button {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    border: none !important;
    padding: 10px 28px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
}

.wp-block-file .wp-block-file__button:hover {
    background: var(--color-hover) !important;
}

/* — Tables — */
body table,
body .wp-block-table table,
body table thead,
body table tbody,
body table tr,
body .wp-block-table tr,
body table th,
body .wp-block-table th,
body table td,
body .wp-block-table td {
    border: 1px solid var(--color-border) !important;
}

body table,
body .wp-block-table table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

body table th,
body .wp-block-table th {
    border-bottom-width: 1px !important;
    border-bottom-color: var(--color-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* — Separators — */
hr,
hr.wp-block-separator,
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    border: none !important;
    border-top: 1px solid var(--color-border) !important;
    background: transparent !important;
    height: 0 !important;
    opacity: 1 !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* — Blockquotes — */
blockquote,
.wp-block-quote {
    font-style: normal !important;
    border-left-color: var(--color-hover) !important;
}

blockquote p,
.wp-block-quote p {
    font-style: normal !important;
}

/* — Links — */
a.read-more {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-weight: 500;
}

.gb-text-6371aae5 a,
.gb-text-be09bf24 a,
.gb-text-c8bb1d05 a {
    color: inherit !important;
    text-decoration: none !important;
}

.gb-text-6371aae5 a:hover,
.gb-text-be09bf24 a:hover,
.gb-text-c8bb1d05 a:hover {
    color: var(--accent) !important;
}

/* — Pagination — */
.page-links .post-page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background-color: var(--color-white);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    margin: 0 4px;
    transition: opacity 0.15s ease;
}

.page-links a.post-page-numbers:hover,
.page-links .post-page-numbers.current {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.page-links a.post-page-numbers:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* — Accordions — */
.wp-block-accordion-item {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

.wp-block-accordion-item:first-child {
    border-top: 1px solid var(--color-border) !important;
}

.wp-block-accordion-heading {
    margin: 0 !important;
    padding: 0 !important;
}

.wp-block-accordion-heading__toggle {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 16px 0 !important;
    background: none !important;
    transition: background-color 0.18s ease !important;
    cursor: pointer !important;
}

.wp-block-accordion-heading__toggle:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: -2px !important;
}

.wp-block-accordion-heading__toggle-title {
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--color-text-dark) !important;
    text-align: left !important;
    margin-right: 16px !important;
    font-size: 18px !important;
}

@media (max-width: 768px) {
    .wp-block-accordion-heading__toggle-title {
        font-size: 16px !important;
    }
}

.wp-block-accordion-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.wp-block-accordion-panel p {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    .wp-block-accordion-panel p {
        font-size: 15px !important;
    }
}

.wp-block-accordion-heading__toggle-icon {
    font-size: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23403f3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    transition: transform 0.2s ease, background-image 0.18s ease !important;
}

.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
    transform: rotate(180deg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231559ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.wp-block-accordion-item > div:last-child p:last-child {
    margin-bottom: 0 !important;
}


/* ============================================================
   SECTION 7 — FOOTER & OVERFLOW FIXES
   ============================================================ */

.site-info {
    border-top: 1px solid var(--color-border) !important;
}

.footer-widgets li {
    margin-bottom: 5px !important;
    line-height: 1.5 !important;
    padding: 0 !important;
}

.footer-widgets a {
    display: inline-block !important;
}

/* — AdSense & iOS Overflow — */
ins.adsbygoogle,
.google-auto-placed {
    max-width: 100% !important;
    overflow-x: clip !important;
}

html, body {
    overflow-x: visible !important;
}

body > * {
    max-width: 100vw !important;
}

.site,
#mobile-header,
.site-header,
.site-footer,
.google-auto-placed,
ins.adsbygoogle,
.generate-slideout-menu {
    overflow-x: clip !important;
}


/* ============================================================
   SECTION 8 — RESPONSIVE BREAKPOINTS
   ============================================================ */

/* — Footer Grid (Mobile) — */
@media (max-width: 768px) {
    .site-footer .inside-footer-widgets {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .site-footer .inside-footer-widgets .footer-widget-1,
    .site-footer .inside-footer-widgets .footer-widget-2,
    .site-footer .inside-footer-widgets .footer-widget-3,
    .site-footer .inside-footer-widgets .footer-widget-4 {
        margin-bottom: 0 !important;
    }

    amp-auto-ads,
    .google-auto-placed,
    amp-ad,
    i-amphtml-inserter {
        max-width: 100vw !important;
        display: block !important;
        overflow: hidden !important;
    }
}

/* — Mobile Author Box (max-width: 767px) — */
@media (max-width: 767px) {
    body.author .gb-element-6034a5e6,
    body.single-post .gb-element-6034a5e6 {
        display: block !important;
    }

    body.author .gb-element-49905774,
    body.single-post .gb-element-49905774 {
        float: left !important;
        margin-right: 16px !important;
        margin-bottom: 8px !important;
    }

    body.author .gb-text-bbcd130a,
    body.single-post .gb-text-bbcd130a {
        margin-top: 0 !important;
        margin-bottom: 2px !important;
        display: block !important;
    }

    body.author .gb-text-a312c972,
    body.author .gb-text-c7724b8b,
    body.single-post .gb-text-a312c972,
    body.single-post .gb-text-c7724b8b {
        clear: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    body.author .gb-text-419667ec,
    body.author .gb-text-98259f4e,
    body.author .gb-text-b7bf3aee,
    body.single-post .gb-text-419667ec,
    body.single-post .gb-text-98259f4e,
    body.single-post .gb-text-b7bf3aee {
        clear: both !important;
        display: block !important;
        padding-top: 10px !important;
    }
}


/* ============================================================
   SECTION 9 — COMMENT FORM
   ============================================================ */

#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"] {
    border-radius: 50px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

#commentform textarea,
.comment-form textarea,
.wp-block-post-comments-form textarea {
    border-radius: 24px !important;
    padding: 16px 20px !important;
}

#commentform input[type="submit"],
.comment-form input[type="submit"],
.wp-block-post-comments-form .wp-block-button__link {
    border-radius: 50px !important;
}