/*
Theme Name: Competitive Choice
Description: Pixel-matched WordPress port of the Competitive Choice website (homepage and category pages). Design styles live in assets/css/app.css, compiled from the original site.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: competitive-choice
*/

/* Keep the sticky header below the WordPress admin bar when logged in. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* SHOP NOW button: the cart rolls in and out every few seconds, and drives off and back on hover. */
.cc-shop-btn svg { transform-origin: 50% 80%; animation: cc-cart-roll 3.2s ease-in-out infinite; }
.cc-shop-btn:hover svg, .cc-shop-btn:focus-visible svg { animation: cc-cart-drive 0.9s ease-in-out infinite; }
@keyframes cc-cart-roll {
    0%, 55%, 100% { transform: translateX(0) rotate(0); }
    65% { transform: translateX(-3px) rotate(-8deg); }
    78% { transform: translateX(4px) rotate(5deg); }
    90% { transform: translateX(-1px) rotate(-2deg); }
}
@keyframes cc-cart-drive {
    0% { transform: translateX(0); opacity: 1; }
    45% { transform: translateX(14px); opacity: 0; }
    46% { transform: translateX(-14px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cc-shop-btn svg, .cc-shop-btn:hover svg { animation: none; } }

/* Inquiry checklist: a joined 2x2 panel with hairline dividers, a tick on each cell and a gold top rule on hover. */
.category-section-heading + h3 { display: block; box-sizing: border-box; width: 100%; max-width: none; margin: 40px auto 0; padding: 0; color: var(--brand); font-size: 17px; line-height: 1.25; font-weight: 800; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.quote-checklist { gap: 1px; margin-top: 18px; background: var(--border); border: 1px solid var(--border); }
.quote-checklist > div { position: relative; text-align: left; padding: 32px 32px 34px 76px; background: var(--background); transition: background-color .25s ease; }
.quote-checklist > div::before { content: ""; position: absolute; top: 32px; left: 32px; width: 28px; height: 28px; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
.quote-checklist > div::after { content: ""; position: absolute; top: -1px; left: -1px; width: 0; height: 3px; background: var(--primary); transition: width .35s ease; }
.quote-checklist > div:hover { background: var(--muted); }
.quote-checklist > div:hover::after { width: calc(100% + 2px); }
.quote-checklist h4 { margin: 0 0 8px; color: var(--foreground); font-size: var(--fs-card-title); font-weight: 800; line-height: 28px; }
.quote-checklist p { margin: 0; line-height: 1.6; }
@media (max-width: 720px) {
    .quote-checklist { grid-template-columns: 1fr; }
    .quote-checklist > div { padding: 26px 22px 28px 64px; }
    .quote-checklist > div::before { top: 26px; left: 22px; }
}
@media (prefers-reduced-motion: reduce) { .quote-checklist > div, .quote-checklist > div::after { transition: none; } }