/**
 * W4L Theme Components — Phase 13.6.5
 *
 * Targeted layer of rules for header nav, footer, and a few global
 * components. Tokens-only — no raw hex. Lives separately from
 * tokens.css so the source of truth (tokens.css) stays just-tokens.
 *
 * Enqueued AFTER w4l-tokens in functions.php.
 */

/* ──────────────────────────────────────────────────────────────
 * Header navigation — hover + current-page indicator
 * ────────────────────────────────────────────────────────────── */

/* Nav default — Uniqore renders nav links inside .uc-navbar-nav.
 * Set the resting color via the system token, hover via component
 * tokens. Active state gets a 3px red bottom border indicator. */

.uc-navbar-nav > li > a,
.uc-navbar-nav li > a,
.uc-navbar-nav a {
    color: var(--nav-link-color);
    transition: color 0.2s ease;
    position: relative;
    background-color: transparent;
}

/* Hover — red text on EVERY nav link (menu items, Log in, Create
 * Account, dropdowns). Same red as current-page active state so
 * hover and active read identically. */
.uc-navbar-nav > li > a:hover,
.uc-navbar-nav li > a:hover,
.uc-navbar-nav a:hover {
    color: var(--color-action-primary) !important;
    background-color: transparent;
}

/* Current page — red text only. No underline, no border. WP injects
 * `.current-menu-item` / `.current-menu-ancestor` on the matched
 * item; we also strip false-positive matches (like Pricing showing
 * active on / when its href is /#pricing) via a `nav_menu_css_class`
 * filter in functions.php. */
.uc-navbar-nav .current-menu-item > a,
.uc-navbar-nav .current-menu-ancestor > a,
.uc-navbar-nav .current_page_item > a {
    color: var(--color-action-primary) !important;
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────
 * Footer — wordmark, links, social icons
 * ────────────────────────────────────────────────────────────── */

/* Top band stays Uniqore's existing surface. Bottom band is darker
 * (bg-gray-800) — apply our system inverse. */

.uc-footer-bottom {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text);
}

/* Footer link default + hover */
.uc-footer a {
    color: var(--footer-link);
    transition: color 0.2s ease;
}
.uc-footer a:hover {
    color: var(--footer-link-hover);
}

/* Footer social icons — match the logo wordmark gray, not theme gray.
 * Uniqore's atomic `.text-gray-300` class wins over normal cascade
 * because it uses a Bootstrap-CSS-var-driven color rule that stays in
 * effect even when overridden by specificity. Use !important to
 * guarantee the logo-gray treatment. */
.uc-footer i.icon,
.uc-footer-bottom i.icon {
    color: var(--footer-icon) !important;
    transition: color 0.2s ease;
}
.uc-footer a:hover i.icon,
.uc-footer-bottom a:hover i.icon {
    color: var(--footer-icon-hover) !important;
}

/* Footer wordmark / copyright text uses the logo gray — matches the
 * wordmark color in the logo PNG. */
.uc-footer-bottom .uc-footer-copyright,
.uc-footer-bottom .copyright,
.uc-footer-bottom p {
    color: var(--footer-wordmark);
}

/* ──────────────────────────────────────────────────────────────
 * Card hover effect — the "where important" moment
 * ────────────────────────────────────────────────────────────── */

/* Product / theme cards get a subtle brand-tinted border on hover.
 * This is the rare place brand red is justified — it signals "this
 * item is being considered." */

.tfs-product-card,
.tfs-theme-card,
.tfs-site-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tfs-product-card:hover,
.tfs-theme-card:hover,
.tfs-site-card:hover {
    border-color: var(--card-border-hover);
}

/* ──────────────────────────────────────────────────────────────
 * Body link defaults — affects content inside posts/pages
 * ────────────────────────────────────────────────────────────── */

/* Inline links in body content use the deep-crimson token. Buttons
 * (.btn-primary etc.) are styled separately and don't pick this up. */
.entry-content a:not(.btn):not(.uc-button):not(.uc-link),
.post-content a:not(.btn):not(.uc-button):not(.uc-link) {
    color: var(--color-text-link);
    text-decoration: underline;
}
.entry-content a:not(.btn):not(.uc-button):not(.uc-link):hover,
.post-content a:not(.btn):not(.uc-button):not(.uc-link):hover {
    color: var(--color-text-link-hover);
}

/* ──────────────────────────────────────────────────────────────
 * Focus ring — accessibility
 * ────────────────────────────────────────────────────────────── */

/* Replace browser default focus ring with our brand-200 token so
 * keyboard navigation gets a visible, branded indicator. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────
 * v3 — Two-tier footer: widget band (top) is LIGHTER than the
 * copyright band (bottom). Reads as one unified dark surface with
 * subtle elevation between tiers.
 *
 * Bottom band (copyright)  →  --footer-bg          (gray-800)
 * Top band    (widgets)    →  --footer-widget-bg   (gray-700, lighter)
 * ────────────────────────────────────────────────────────────── */
footer.uc-footer,
.uc-footer:not(.uc-footer-bottom),
.uc-footer > .uc-footer-widgets,
.uc-footer .uc-footer-widgets {
    background-color: var(--footer-widget-bg) !important;
    color: var(--footer-widget-text);
}

/* Footer widget headings + strong text — lighter for readability
 * against the gray-700 backdrop. */
.uc-footer h1, .uc-footer h2, .uc-footer h3,
.uc-footer h4, .uc-footer h5, .uc-footer h6,
.uc-footer strong, .uc-footer p {
    color: var(--footer-widget-text);
}

/* Footer widget/nav links use the same logo-gray as the copyright
 * band so the whole footer reads with one link treatment. */
.uc-footer a,
.uc-footer .nav-y a,
.uc-footer ul a {
    color: var(--footer-wordmark);
    opacity: 1;
    transition: color 0.2s ease;
}
.uc-footer a:hover,
.uc-footer .nav-y a:hover,
.uc-footer ul a:hover {
    color: var(--ref-logo-gray-light);
    opacity: 1;
}

/* Uniqore's default: `.nav-y:hover a { opacity: 0.6 }` fades EVERY
 * child link when the parent UL is hovered. Kill that — only the
 * hovered <a> should change. */
.uc-footer .nav-y:hover a,
.uc-footer ul:hover a,
.uc-footer .nav-y:hover li a,
.uc-footer ul:hover li a {
    opacity: 1 !important;
    color: var(--footer-wordmark) !important;
}
.uc-footer .nav-y:hover a:hover,
.uc-footer ul:hover a:hover,
.uc-footer .nav-y:hover li a:hover,
.uc-footer ul:hover li a:hover {
    opacity: 1 !important;
    color: var(--ref-logo-gray-light) !important;
}

.bottom-cta-band {
    background-color: var(--newsletter-bg);
    width: 100%;
    border-radius: 0;
}

/* ──────────────────────────────────────────────────────────────
 * v3 — Neutralize Bootstrap info-alert blue → gray backdrop
 * (semantic info stays but no vivid blue anywhere)
 * ────────────────────────────────────────────────────────────── */
.alert.alert-info,
div.alert.alert-info {
    background-color: var(--ref-gray-100) !important;
    border-color:     var(--ref-gray-300) !important;
    color:            var(--color-text-default) !important;
}
.alert.alert-info h1,
.alert.alert-info h2,
.alert.alert-info h3,
.alert.alert-info h4,
.alert.alert-info h5,
.alert.alert-info h6 {
    color: var(--color-text-strong) !important;
}

/* WooCommerce notice — .woocommerce-info uses a blue left border.
 * Rebrand to brand red so cart-empty matches the site. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-notice {
    border-top-color: var(--color-action-primary) !important;
}
.cart-empty.woocommerce-info {
    background-color: var(--ref-gray-100);
    color: var(--color-text-default);
}

li.uc-active > a.text-none.w-128px,
li.uc-active > a[id^="uc-switcher-"],
.uc-switcher-nav li.uc-active > a {
    background-color: var(--color-action-primary) !important;
    color: var(--color-action-primary-text) !important;
}

.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-border-width: 1px;
    border-width: 1px;
}

.pricing-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pricing-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--color-action-primary) !important;
}
.pricing-item.is-popular {
    border-color: var(--color-action-primary) !important;
}