/*
 * Accent cards (front): same card look as the FAQ cards (faq.css), used by the
 * catalog/blog sidebars and the contact page. The primary colour is injected by
 * the views through the --accent-card-primary variable (inline style on the
 * .accent-cards wrapper); #FF6A00 is only a fallback.
 *
 * This file loads before styles.min.css, so each rule also lists a
 * ".widget.accent-card" selector: the theme resets .widget.widget-* borders,
 * margins and title colours with stronger selectors that would otherwise win.
 */

.accent-cards {
    --accent-card-primary: #FF6A00;
    --accent-card-tint-strong: #ececec;
}

@supports (background: color-mix(in srgb, red 10%, white)) {
    .accent-cards {
        --accent-card-tint-strong: color-mix(in srgb, var(--accent-card-primary) 16%, #fff);
    }
}

/* Card */
.accent-cards .accent-card,
.accent-cards .widget.accent-card {
    /* !important: the theme sets margins on .widget-featured-posts with !important */
    margin-bottom: 20px !important;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--accent-card-primary);
    border-left-width: 6px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    transition: box-shadow .25s ease, transform .25s ease;
}

/* Same thin border all around, without the thick left accent (e.g. the contact form) */
.accent-cards .accent-card.accent-card-thin {
    border-left-width: 1px;
}

.accent-cards .accent-card:hover,
.accent-cards .accent-card:focus-within {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
    transform: translateY(-2px);
}

/* Card title */
.accent-cards .accent-card-title,
.accent-cards .widget.accent-card .widget-title {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--accent-card-tint-strong);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #1f2937;
    transition: color .25s ease;
}

.accent-cards .widget.accent-card .widget-title::after {
    display: none;
}

.accent-cards .accent-card:hover .accent-card-title,
.accent-cards .accent-card:focus-within .accent-card-title,
.accent-cards .widget.accent-card:hover .widget-title,
.accent-cards .widget.accent-card:focus-within .widget-title {
    color: var(--accent-card-primary);
}

@media (max-width: 575px) {
    .accent-cards .accent-card,
    .accent-cards .widget.accent-card {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accent-cards .accent-card,
    .accent-cards .accent-card-title,
    .accent-cards .widget.accent-card .widget-title {
        transition: none;
    }

    .accent-cards .accent-card:hover,
    .accent-cards .accent-card:focus-within {
        transform: none;
    }
}