/* ═══════════════════════════════════════════════
 * Featured Anime Podcast — Brand Design System
 * Extracted from Blogger theme, adapted for Kadence
 * ═══════════════════════════════════════════════ */

/* ─── 1. CSS Custom Properties (Kadence global overrides) ─── */
:root {
    /* Brand palette */
    --fap-orange: #FF7F00;
    --fap-orange-600: #e57000;
    --fap-orange-700: #c65f00;
    --fap-burnt: #c4660e;
    --fap-gold: #ad966c;

    /* Map to Kadence's global palette */
    --global-palette1: var(--fap-orange);
    /* Accent */
    --global-palette2: var(--fap-orange-600);
    /* Accent alt */
    --global-palette3: #ffffff;
    /* Strongest text — white on dark */
    --global-palette4: #e0e0e0;
    /* Strong text */
    --global-palette5: #bdbdbd;
    /* Medium text */
    --global-palette6: #999999;
    /* Subtle text */
    --global-palette7: #1a1a1a;
    /* Subtle background */
    --global-palette8: #111111;
    /* Lighter background */
    --global-palette9: #000000;
    /* Base background — black */

    /* Typography */
    --fap-font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fap-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Spacing / shapes */
    --fap-radius: 12px;
    --fap-radius-sm: 8px;
    --fap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --fap-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --fap-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --fap-transition: all .3s cubic-bezier(.4, 0, .2, 1);

    /* Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--fap-orange) #1a1a1a;
}

/* ─── 2. Global base ─── */
body {
    font-family: var(--fap-font-body);
    background-color: var(--global-palette9);
    color: var(--global-palette3);
    line-height: 1.6;
}

/* ─── 3. Typography ─── */
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.site-title,
.kadence-page-title h1,
.section-title {
    font-family: var(--fap-font-heading);
}

.site-title a,
.site-branding .site-title a {
    color: var(--fap-orange) !important;
    text-decoration: none;
    font-weight: 700;
}

.site-title a:hover {
    color: var(--fap-orange-700) !important;
}

a {
    color: var(--fap-orange);
    transition: var(--fap-transition);
}

a:hover {
    color: var(--fap-orange-700);
}

/* ─── 4. Header ─── */
.site-header {
    background: #000 !important;
    border-bottom: 1px solid #222;
}

.site-header.item-is-fixed:not(.item-at-start) {
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px);
}

#main-header .header-navigation .header-menu-container>ul>li>a {
    color: #bdbdbd;
    font-weight: 500;
}

#main-header .header-navigation .header-menu-container>ul>li>a:hover,
#main-header .header-navigation .header-menu-container>ul>li.current-menu-item>a {
    color: var(--fap-orange);
}

/* Header search button */
.search-toggle-open,
.header-search-bar .search-submit,
button.search-toggle-open {
    background: var(--fap-orange) !important;
    color: #fff !important;
    border: none;
    border-radius: var(--fap-radius-sm);
    font-weight: 600;
    transition: var(--fap-transition);
}

.search-toggle-open:hover,
.header-search-bar .search-submit:hover {
    background: var(--fap-orange-700) !important;
}

/* ─── 5. Buttons ─── */
.wp-block-button__link,
.button,
button:not(.search-toggle-open):not(.fap-tab-btn):not(.fap-play-btn):not(.play-btn),
input[type="submit"] {
    background-color: var(--fap-orange);
    color: #fff;
    border: none;
    border-radius: var(--fap-radius);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: var(--fap-transition);
    cursor: pointer;
}

.wp-block-button__link:hover,
.button:hover,
button:not(.search-toggle-open):not(.fap-tab-btn):not(.fap-play-btn):not(.play-btn):hover,
input[type="submit"]:hover {
    background-color: var(--fap-orange-700);
    color: #fff;
    transform: translateY(-1px);
}

/* ─── 6. Cards & content containers ─── */
.entry.content-bg,
.content-bg {
    background: #111111;
    border-radius: var(--fap-radius);
}

.loop-entry .entry-content-wrap {
    background: #1a1a1a;
    border-radius: var(--fap-radius);
    border: 1px solid #222;
    transition: var(--fap-transition);
}

.loop-entry .entry-content-wrap:hover {
    border-color: #333;
    box-shadow: var(--fap-shadow-md);
    transform: translateY(-2px);
}

.loop-entry .entry-title a {
    color: #ffffff;
}

.loop-entry .entry-title a:hover {
    color: var(--fap-orange);
}

/* ─── 7. Footer ─── */
.site-footer {
    background: #000 !important;
    border-top: 1px solid #222;
    color: #bdbdbd;
}

.site-footer a {
    color: #bdbdbd;
}

.site-footer a:hover {
    color: var(--fap-orange);
}

/* ─── 8. WooCommerce Overrides ─── */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
    background-color: var(--fap-orange) !important;
    color: #fff !important;
    border-radius: var(--fap-radius) !important;
    font-weight: 600;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--fap-orange-700) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #ffffff;
}

.woocommerce ul.products li.product {
    background: #1a1a1a;
    border-radius: var(--fap-radius);
    padding: 1rem;
    border: 1px solid #222;
    transition: var(--fap-transition);
}

.woocommerce ul.products li.product:hover {
    border-color: var(--fap-orange);
    transform: translateY(-2px);
}

.woocommerce .price,
.woocommerce span.amount {
    color: var(--fap-orange) !important;
    font-weight: 700;
}

/* ─── 9. Scrollbar (WebKit) ─── */
body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: #1a1a1a;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--fap-orange);
    border-radius: 20px;
    border: 3px solid #1a1a1a;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--fap-orange-700);
}

/* ─── 10. Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ─── 11. Sidebar widgets (dark) ─── */
.widget-area .widget {
    background: #1a1a1a;
    border: 1px solid #222;
    border-radius: var(--fap-radius);
    padding: 1.5rem;
}

.widget-area .widget-title {
    color: #ffffff;
    font-family: var(--fap-font-heading);
}