/* ══════════════════════════════════════════════════════════════════
   04-guff-overrides.css — Repaint vendor guff theme
   Every !important here is deliberate: we're overriding named vendor
   rules in style.css / base.css that would otherwise win by specificity.
   ══════════════════════════════════════════════════════════════════ */

/* ═══════ 1. HEADER — dark glass, transparent logo ═══════════════ */

/* Kill the vendor white header-logo container (style.css:4312-4377) */
.guff_fn_header .logo,
[data-featured] .guff_fn_header .logo {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 180px;
    height: auto !important;
    padding: 8px 16px !important;
    top: 50% !important;
    left: 24px !important;
    transform: translateY(-50%);
    position: absolute !important;
}
.guff_fn_header .logo:after,
.guff_fn_header .logo .corner:before,
.guff_fn_header .logo .corner:after {
    display: none !important;
    content: none !important;
}
.guff_fn_header .logo a {
    padding: 0 !important;
    height: auto !important;
}
.guff_fn_header .logo img,
.guff_fn_header .logo .desktop_logo,
.guff_fn_mobnav .logo img,
.guff_fn_mobnav .mobile_logo,
.guff_fn_mobnav .fn_logo img {
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    filter: drop-shadow(0 2px 12px rgba(123,77,255,0.45));
    background: transparent !important;
}
@media (min-width: 992px) {
    .guff_fn_header .logo img { max-height: 56px !important; }
    .guff_fn_header .logo { left: 32px !important; }
}

/* Normal header height on home when featured — don't stretch */
[data-featured] .guff_fn_header .logo {
    height: auto !important;
    width: auto !important;
}
[data-featured] .guff_fn_header .header_top_in {
    padding-left: 260px !important;
}
#guff_fn_header,
#guff_fn_header[data-featured] {
    height: 88px !important;
}

/* Dark glass header */
#guff_fn_header,
.guff_fn_header,
.guff_fn_header .header_top,
.guff_fn_header .header_top_in {
    background: linear-gradient(180deg,
        rgba(11,8,32,0.92) 0%,
        rgba(20,13,53,0.82) 100%) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(123,77,255,0.22);
}

/* Nav links */
.guff_fn_header .menu > ul > li > a,
.guff_fn_header .guff_fn_nav a,
.guff_fn_header .menu a {
    color: var(--xp-text-1) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}
.guff_fn_header .menu > ul > li > a:hover,
.guff_fn_header .guff_fn_nav a:hover {
    color: var(--xp-orange) !important;
}
.guff_fn_header .search_opener a,
.guff_fn_header .search_opener a .text,
.guff_fn_header .search_opener a .icon svg {
    color: var(--xp-text-1) !important;
    fill: var(--xp-text-1) !important;
}

/* Mobile header */
.guff_fn_mobnav,
.guff_fn_mobnav .mob_top,
.guff_fn_mobnav .logo,
.guff_fn_mobnav .fn_logo {
    background: transparent !important;
    border: none !important;
}
.guff_fn_mobnav {
    background: linear-gradient(180deg,
        rgba(11,8,32,0.94) 0%,
        rgba(20,13,53,0.86) 100%) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(123,77,255,0.22) !important;
}
.guff_fn_mobnav a { color: var(--xp-text-1) !important; }
.guff_fn_mobnav .mobmenu_opener span,
.guff_fn_mobnav .mobmenu_opener span::before,
.guff_fn_mobnav .mobmenu_opener span::after {
    background-color: var(--xp-text-1) !important;
}

/* ═══════ 2. JOIN NOW CTA button ═════════════════════════════════ */
.fn__r_btn,
a.fn__r_btn,
.fn__r_btn span {
    background: var(--g-cta) !important;
    color: var(--xp-ink) !important;
    border: none !important;
    border-radius: var(--r-pill) !important;
    padding: 10px 22px !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: var(--sh-button-cta);
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.fn__r_btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-button-cta), var(--sh-glow-orange);
}
.fn__r_btn span[data-text] { color: var(--xp-ink) !important; }

/* ═══════ 3. FEATURED SLIDER ═════════════════════════════════════ */
#featured_slider {
    background: var(--g-surface) !important;
    padding: 80px 32px 100px !important;
    position: relative;
}
#featured_slider:after {
    background-image: none !important;
    background:
        radial-gradient(ellipse 60% 70% at 20% 30%, rgba(123,77,255,0.20) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 80% 70%, rgba(59,130,246,0.16) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 50% 10%, rgba(245,166,35,0.08) 0%, transparent 55%) !important;
}
.fn_cs_posts_layout_slider .title_holder { background: transparent !important; }

/* Slider title — solid white with purple glow. Gradient text-fill layered
   over vendor .fn_bg_title a { background: #000; color: #fff; } produces
   unreadable glitches — use solid color instead. */
.fn_cs_posts_layout_slider h3.fn_title,
.fn_cs_posts_layout_slider h3.fn_bg_title,
.fn_cs_posts_layout_slider .fn_title a,
.fn_cs_posts_layout_slider .fn_bg_title a,
.fn_cs_posts_layout_slider .fn_bg_title a span {
    background: transparent !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--xp-text-1) !important;
    color: var(--xp-text-1) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    text-shadow:
        0 2px 18px rgba(123,77,255,0.55),
        0 1px 2px rgba(0,0,0,0.45) !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}
/* Kill 150px black watermark */
.fn_cs_posts_layout_slider .typ_title { display: none !important; }

.fn_cs_posts_layout_slider .fn_bg_subtitle { color: var(--xp-orange) !important; }
.fn_cs_posts_layout_slider .fn_bg_subtitle span,
.fn_cs_posts_layout_slider .date {
    background: var(--g-cta) !important;
    color: var(--xp-ink) !important;
    border-radius: var(--r-pill) !important;
    padding: 6px 14px !important;
    font-weight: 800 !important;
    font-family: var(--xp-font-h) !important;
    letter-spacing: 0.05em;
}
.fn_cs_posts_layout_slider .slider_nav_btn {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    backdrop-filter: blur(8px);
    color: #fff !important;
}
.fn_cs_posts_layout_slider .slider_nav_btn:hover {
    background: var(--xp-purple) !important;
    border-color: var(--xp-purple) !important;
}

/* ═══════ 4. TICKER BAR ══════════════════════════════════════════ */
.fn__ticker_list,
.fn__ticker_list .ticker_list {
    background: var(--xp-surface-2) !important;
    border-top: 1px solid rgba(123,77,255,0.22);
    border-bottom: 1px solid rgba(123,77,255,0.22);
}
.fn__ticker_list .ticker_title {
    background: linear-gradient(135deg, var(--xp-purple), var(--xp-magenta)) !important;
    color: #fff !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
}
.fn__ticker_list a,
.fn__ticker_list .marquee a {
    color: var(--xp-text-1) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 700;
}
.fn__ticker_list a:hover { color: var(--xp-orange) !important; }

/* ═══════ 5. POST CARDS — glass base ═════════════════════════════ */
.item_wrapper .item,
.item .img_holder,
.fn_cs_posts_layout_alpha .post_wrapper,
.fn_cs_posts_layout_beta .post_wrapper,
.fn_cs_posts_layout_gamma .post_wrapper,
.fn_cs_posts_layout_delta .post_wrapper,
.fn_cs_posts_layout_epsilon .post_wrapper,
.fn_cs_posts_layout_zeta .post_wrapper,
.fn_cs_posts_layout_eta .post_wrapper,
.fn_cs_posts_layout_masonry .post_wrapper,
.post__wrapper {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-card-border) !important;
    border-radius: var(--r-lg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}
.item .fn_title a,
.item_wrapper .fn_title a,
.item_wrapper .fn_title a span {
    color: var(--xp-text-1) !important;
}
.item .fn_title a:hover,
.item_wrapper .fn_title a:hover,
.item_wrapper .fn_title a:hover span {
    color: var(--xp-orange) !important;
}

/* Meta */
.meta, .meta a, .meta span,
.item .date, .item .read_time, .read_time a,
.guff_fn_postinfo span, .guff_fn_postinfo a {
    color: var(--xp-text-4) !important;
}

/* Category labels */
.item .item__cat a,
.item__cat a,
.fn__cat a,
.beta__title .text span {
    color: var(--xp-orange) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Tag pills */
.item .item__tag a,
.item__tag a,
.single_post .single_post_tags a {
    background: var(--g-primary) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    padding: 4px 12px !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 700 !important;
    font-size: var(--fs-micro) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ═══════ 6. SECTION HEADERS / BETA TITLES ═══════════════════════ */
.beta__title, .fn__linetitle, .main_title {
    background: transparent !important;
}
.beta__title .text,
.fn__linetitle h3 {
    background: var(--g-hero) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
}
.fn__linetitle h3::after, .title_decor span {
    background: linear-gradient(90deg, var(--xp-purple), var(--xp-orange)) !important;
}

/* Hot Trends tag carousel */
.fn_cs_catlist_beta .item,
.fn_cs_catlist_alpha .item {
    background: var(--g-primary) !important;
    color: #fff !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 800 !important;
    border-radius: var(--r-pill) !important;
    border: none !important;
}

/* ═══════ 7. SINGLE POST (real DOM class .guff_fn_singlepost) ════ */

/* Override vendor .guff_fn_singlepost .single__content (style.css:5816) */
.guff_fn_singlepost .single__content {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-card-border) !important;
    border-radius: var(--r-xl) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: var(--sh-card) !important;
}
.guff_fn_singlepost .post_content {
    background: transparent !important;
}
.guff_fn_singlepost .post_c_in,
.guff_fn_singlepost .post_c_in p,
.guff_fn_singlepost .post_c_in li,
.guff_fn_singlepost .post_c_in blockquote,
.guff_fn_singlepost .post_c_in blockquote p {
    color: var(--xp-text-2) !important;
    font-family: var(--xp-font-b) !important;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
}
.guff_fn_singlepost .post_c_in h1,
.guff_fn_singlepost .post_c_in h2,
.guff_fn_singlepost .post_c_in h3,
.guff_fn_singlepost .post_c_in h4,
.guff_fn_singlepost .post_c_in h5,
.guff_fn_singlepost .post_c_in h6 {
    color: var(--xp-text-1) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em;
}
.guff_fn_singlepost .post_c_in h2 {
    margin-top: 2.2em;
    padding-top: 0.8em;
    border-top: 1px solid rgba(123,77,255,0.22);
    font-size: 1.8rem;
}
.guff_fn_singlepost .post_c_in h3 {
    margin-top: 1.8em;
    font-size: 1.35rem;
}
.guff_fn_singlepost .post_c_in strong,
.guff_fn_singlepost .post_c_in b { color: var(--xp-text-1) !important; }

/* Vendor hardcodes #000 for links at style.css:5136-5149 — override */
.guff_fn_singlepost .post_c_in a,
.post_c_in a,
.fn__single_content p a,
.main-content p a {
    color: var(--xp-orange) !important;
    box-shadow: inset 0 -1px 0 rgba(245,166,35,0.45) !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out) !important;
}
.guff_fn_singlepost .post_c_in a:hover,
.post_c_in a:hover,
.fn__single_content p a:hover,
.main-content p a:hover {
    background: transparent !important;
    color: var(--xp-gold) !important;
    box-shadow: inset 0 -2px 0 var(--xp-gold) !important;
}

.guff_fn_singlepost .post_c_in blockquote {
    border-left: 4px solid var(--xp-purple) !important;
    background: rgba(123,77,255,0.10) !important;
    border-radius: 0 var(--r-md) var(--r-md) 0 !important;
    padding: var(--sp-4) var(--sp-5) !important;
    margin: var(--sp-6) 0 !important;
    color: var(--xp-text-1) !important;
    font-family: var(--xp-font-h) !important;
    font-style: italic;
    font-weight: 700;
    font-size: 1.25rem;
}
.guff_fn_singlepost .post_c_in blockquote p {
    color: var(--xp-text-1) !important;
    font-size: 1.25rem;
}
.guff_fn_singlepost .post_c_in ul,
.guff_fn_singlepost .post_c_in ol { padding-left: var(--sp-5); }
.guff_fn_singlepost .post_c_in li { margin-bottom: var(--sp-2); }
.guff_fn_singlepost .post_c_in img { border-radius: var(--r-md); }
.guff_fn_singlepost .post_c_in hr {
    border: none !important;
    height: 1px;
    background: var(--g-divider);
    margin: var(--sp-8) 0;
}

/* Post header meta */
.guff_fn_singlepost .fn__maintitle {
    color: var(--xp-text-1) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}
.guff_fn_singlepost .fn__short_meta,
.guff_fn_singlepost .fn__short_meta a,
.guff_fn_singlepost .fn__short_meta span,
.guff_fn_singlepost .fn__full_meta,
.guff_fn_singlepost .fn__full_meta a,
.guff_fn_singlepost .fn__full_meta span {
    color: var(--xp-text-3) !important;
}
.guff_fn_singlepost .fn__short_meta .meta_category a {
    color: var(--xp-orange) !important;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
}
.guff_fn_singlepost .fn_share_button {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: var(--r-pill) !important;
    color: var(--xp-text-1) !important;
    padding: 8px 18px !important;
}
.guff_fn_singlepost .fn__image_format,
.guff_fn_singlepost .fn__bordered_obj .obj_content {
    background: transparent !important;
    border-radius: var(--r-xl) !important;
}

/* Prev/next nav */
.guff_fn_pnb,
.guff_fn_pnb .pnb__item,
.guff_fn_pnb .item,
.guff_fn_pnb .prev__item .item,
.guff_fn_pnb .next__item .item {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-card-border) !important;
    border-radius: var(--r-lg) !important;
    color: var(--xp-text-1) !important;
}
.guff_fn_pnb .fn_title,
.guff_fn_pnb .fn_title a,
.guff_fn_pnb .fn_title span { color: var(--xp-text-1) !important; }
.guff_fn_pnb .fn_desc,
.guff_fn_pnb .fn_desc span {
    color: var(--xp-orange) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

/* Inline CTA / Xplain callout (our seeded content) */
.guff_fn_singlepost .post_c_in p.cta a,
.guff_fn_singlepost .post_c_in .cta,
p.cta a {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--r-pill);
    background: var(--g-cta) !important;
    color: var(--xp-ink) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    box-shadow: var(--sh-button-cta);
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.guff_fn_singlepost .post_c_in p.cta a:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-button-cta), var(--sh-glow-orange);
}

.xplain-callout,
.guff_fn_singlepost .post_c_in .xplain-callout {
    background: rgba(123,77,255,0.12) !important;
    border: 1px solid rgba(123,77,255,0.28) !important;
    border-radius: var(--r-lg) !important;
    padding: var(--sp-5) var(--sp-6) !important;
    margin: var(--sp-6) 0 !important;
    color: var(--xp-text-1) !important;
}
.xplain-callout strong,
.guff_fn_singlepost .post_c_in .xplain-callout strong {
    color: var(--xp-orange) !important;
}

/* ═══════ 8. FOOTER ══════════════════════════════════════════════ */
.guff_fn_footer,
footer.guff_fn_footer,
#guff_fn_footer,
#guff_fn_footer .guff_fn_footer {
    background: linear-gradient(180deg,
        var(--xp-bg) 0%,
        var(--xp-bg-deep) 100%) !important;
    border-top: 1px solid rgba(123,77,255,0.22);
    color: var(--xp-text-2) !important;
}
.guff_fn_footer h1, .guff_fn_footer h2, .guff_fn_footer h3,
.guff_fn_footer h4, .guff_fn_footer .footer__title {
    color: var(--xp-text-1) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
}
.guff_fn_footer a { color: var(--xp-text-2) !important; }
.guff_fn_footer a:hover { color: var(--xp-orange) !important; }
.guff_fn_footer .fsf_title { color: var(--xp-text-1) !important; }
.guff_fn_footer .footer_welcome p,
.guff_fn_footer .footer_copyright p { color: var(--xp-text-3) !important; }

.guff_fn_footer input[type="email"],
.fsf_input {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--xp-text-1) !important;
    border-radius: var(--r-pill) !important;
    padding: 12px 20px !important;
}
.guff_fn_footer .fsf_btn, .fsf_btn, .fn__submit {
    background: var(--g-cta) !important;
    color: var(--xp-ink) !important;
    border: none !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
}

/* ═══════ 9. INPUTS GLOBAL ═══════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="search"],
textarea, select {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: var(--xp-text-1) !important;
    border-radius: var(--r-md) !important;
}
input::placeholder { color: rgba(255,255,255,0.45) !important; }

/* ═══════ 10. MISC VENDOR CLEANUP ════════════════════════════════ */
.fn_cs_posts_layout_beta:after,
.fn_cs_posts_layout_gamma:after,
.fn_cs_posts_layout_delta:after,
.fn_cs_posts_layout_epsilon:after,
.fn_cs_posts_layout_zeta:after,
.fn_cs_posts_layout_eta:after {
    background-color: transparent !important;
}
.owl-carousel .item, .owl-carousel .item_wrapper {
    color: var(--xp-text-1) !important;
}
.guff_fn_content { background: transparent !important; }

.fn__section_divider, .section_divider {
    background: var(--g-divider) !important;
    height: 1px !important;
}

/* Sidebars, widgets, author cards */
.fn_widget, .sidebar_widget, .author_widget,
.widget_wrap, .author_container {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-card-border) !important;
    border-radius: var(--r-lg) !important;
    backdrop-filter: blur(8px);
}

/* Search overlay */
.fn__search, .fn__search_overlay, #gh-search {
    background: rgba(11,8,32,0.95) !important;
    color: var(--xp-text-1) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 4 — Kill all 17 vendor white surfaces
   Each rule below maps to a confirmed `background-color: #fff` in
   theme/guff/assets/css/style.css (line numbers noted). We explicitly
   override each one rather than relying on descendant selectors — the
   vendor specificity otherwise wins.
   ══════════════════════════════════════════════════════════════════ */

/* 5816 — single-post shell (already handled in section 7, reinforced here) */
.guff_fn_singlepost .single__content {
    border-color: var(--xp-card-border) !important;
    border-width: 1px !important;
}

/* 1163 — slider nav buttons (white circle with black arrow) */
.fn_cs_posts_layout_slider .slider_nav_btn,
.fn_cs_posts_layout_slider .slider_nav_btn a {
    background: rgba(255,255,255,0.08) !important;
    color: var(--xp-text-1) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
}
.fn_cs_posts_layout_slider .slider_nav_btn svg,
.fn_cs_posts_layout_slider .slider_nav_btn path,
.fn_cs_posts_layout_slider .slider_nav_btn .fn__svg {
    fill: var(--xp-text-1) !important;
    color: var(--xp-text-1) !important;
}

/* 1369 — catlist alpha subtitle span (was white pill) */
.fn_cs_catlist_alpha .alpha_left .fn_bg_subtitle span {
    background: var(--g-cta) !important;
    color: var(--xp-ink) !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 800 !important;
}

/* 1378 — catlist alpha left post items (white pills) */
.fn_cs_catlist_alpha .alpha_left .post_item {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-card-border) !important;
    border-radius: var(--r-lg) !important;
}

/* 1409 — catlist alpha right panel (the "CHOSEN POST" purple block) */
.fn_cs_catlist_alpha[data-post-switcher="enable"] .alpha_right {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-card-border-accent) !important;
    border-radius: var(--r-xl) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--sh-card), 0 0 38px rgba(123,77,255,0.18);
}
/* "Chosen Post" label chip */
.fn_cs_catlist_alpha .alpha_right .label,
.fn_cs_catlist_alpha .alpha_right .chosen_post,
.fn_cs_catlist_alpha .alpha_right .title_decor {
    background: rgba(245,166,35,0.15) !important;
    border: 1px solid rgba(245,166,35,0.32) !important;
    color: var(--xp-orange) !important;
    border-radius: var(--r-pill) !important;
    text-transform: uppercase;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em;
}
/* Images inside the chosen-post panel — no white frame */
.fn_cs_catlist_alpha .alpha_right .img_holder,
.fn_cs_catlist_alpha .alpha_right .obj_content {
    background: transparent !important;
    border-radius: var(--r-lg) !important;
}

/* 1435 — catlist alpha cat list items (the rounded tag pills) */
.fn_cs_catlist_alpha .cat_list .item {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--xp-card-border) !important;
    color: var(--xp-text-1) !important;
    border-radius: var(--r-pill) !important;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.fn_cs_catlist_alpha .cat_list .item:hover,
.fn_cs_catlist_alpha .cat_list .item.active {
    background: var(--g-primary) !important;
    border-color: var(--xp-purple) !important;
    color: #fff !important;
}

/* 1795 — .fn__bordered_obj .obj_content (frames feature images). Vendor
   uses a 3-layer "white card with corners" effect; we repaint as a clean
   rounded dark frame with a subtle purple glow. */
.fn__bordered_obj .obj_content {
    background: var(--xp-surface-2) !important;
    border-radius: var(--r-xl) !important;
    overflow: hidden;
}
.fn__bordered_obj {
    filter: drop-shadow(0 18px 42px rgba(123,77,255,0.22));
}
.fn__bordered_obj::before,
.fn__bordered_obj::after,
.fn__bordered_obj .obj_content::before,
.fn__bordered_obj .obj_content::after {
    background: transparent !important;
}

/* 1895 — masonry item decor (white strip under images) */
.blog__item_masonry .item_decor {
    background: transparent !important;
}

/* 2086 — "SEE THEM ALL" white rounded button on masonry section */
.fn_cs_posts_layout_masonry .more_posts a,
.fn_cs_posts_layout_masonry .more_posts a span {
    background: var(--g-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--xp-font-h) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--sh-button);
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.fn_cs_posts_layout_masonry .more_posts a:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-button), var(--sh-glow-purple);
}

/* 2241 — eta (chosen-post) title span (white pill) */
.fn_cs_posts_layout_eta .eta__title .text span {
    background: var(--g-primary) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: var(--r-pill) !important;
    padding: 4px 14px !important;
}

/* 2273 — eta short-meta dot (white circle) */
.fn_cs_posts_layout_eta .fn__short_meta > span:after {
    background: var(--xp-purple-lt) !important;
}

/* 2296 — eta image holder (white frame) */
.fn_cs_posts_layout_eta .img_holder {
    background: transparent !important;
    border-radius: var(--r-lg) !important;
}

/* 2511 — beta top icon (white bg + black content) */
.fn_cs_posts_layout_beta .top_icon {
    background: var(--g-primary) !important;
    color: #ffffff !important;
    border: none !important;
}
.fn_cs_posts_layout_beta .top_icon span,
.fn_cs_posts_layout_beta .top_icon .fn__svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    background: transparent !important;
}

/* 2562 — beta bottom icon (white bg) */
.fn_cs_posts_layout_beta .btm_icon {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--xp-card-border) !important;
}
.fn_cs_posts_layout_beta .btm_icon .fn__svg,
.fn_cs_posts_layout_beta .btm_icon span {
    fill: var(--xp-text-1) !important;
    color: var(--xp-text-1) !important;
}

/* 2673 — beta circular item_img thumbnail frame */
.fn_cs_posts_layout_beta .item_img {
    background: var(--xp-surface-2) !important;
    border: 1px solid var(--xp-card-border) !important;
}

/* 3942 — epsilon classic-item image holder */
.fn_cs_posts_layout_epsilon .classic_item .img_holder {
    background: transparent !important;
    border-radius: var(--r-md) !important;
}

/* ═══════ Strip hardcoded black borders / black backgrounds ══════ */
.guff_fn_singlepost .single__content,
.fn__bordered_obj,
.fn__bordered_obj .obj_content,
.item .img_holder,
.item_wrapper .item,
.fn_cs_catlist_alpha .cat_list .item,
.blog__item_masonry .item_decor {
    border-color: var(--xp-card-border) !important;
}

/* Vendor uses `border: 5px solid #000` on several components — bring down
   to 1px subtle purple hairline everywhere we don't want a chunky frame */
.guff_fn_singlepost .single__content { border-width: 1px !important; }

/* Kill vendor "corner ears" decorations rendered via .corner::before/after */
.fn_cs_posts_layout_alpha .corner:before,
.fn_cs_posts_layout_alpha .corner:after,
.fn_cs_posts_layout_beta .corner:before,
.fn_cs_posts_layout_beta .corner:after,
.fn_cs_posts_layout_eta .corner:before,
.fn_cs_posts_layout_eta .corner:after {
    background-color: var(--xp-bg) !important;
}

/* Section backgrounds — ensure no stray white blocks slip through */
section, .fn__section {
    background-color: transparent !important;
}
.fn_cs_posts_layout_alpha,
.fn_cs_posts_layout_beta,
.fn_cs_posts_layout_gamma,
.fn_cs_posts_layout_delta,
.fn_cs_posts_layout_epsilon,
.fn_cs_posts_layout_zeta,
.fn_cs_posts_layout_eta,
.fn_cs_posts_layout_masonry,
.fn_cs_catlist_alpha,
.fn_cs_catlist_beta {
    background: transparent !important;
}

/* Subscribe form decor (the cream dotted-border card is a vendor accent) */
.footer_subscribe_form,
.footer_subscribe_form .form_decor,
.footer_subscribe_form .form_bottom {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-card-border-accent) !important;
    border-radius: var(--r-xl) !important;
    backdrop-filter: blur(10px);
    box-shadow: var(--sh-card), 0 0 38px rgba(123,77,255,0.12);
}
.footer_subscribe_form .decor_top,
.footer_subscribe_form .decor_right,
.footer_subscribe_form .decor_bottom,
.footer_subscribe_form .decor_left {
    background: transparent !important;
    border: none !important;
    display: none !important;
}
.footer_subscribe_form .top_plane,
.footer_subscribe_form .bottom_plane {
    filter: drop-shadow(0 4px 12px rgba(123,77,255,0.5));
    opacity: 0.7;
}
.footer_subscribe_form .top_plane svg,
.footer_subscribe_form .bottom_plane svg {
    fill: var(--xp-purple-lt) !important;
}

/* "Back to top" + side totop arrow */
.guff_fn_totop,
.footer_totop {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-card-border-strong) !important;
    color: var(--xp-text-1) !important;
    backdrop-filter: blur(8px);
}
.guff_fn_totop:hover,
.footer_totop:hover {
    background: var(--g-primary) !important;
    border-color: var(--xp-purple) !important;
    color: #ffffff !important;
}
.guff_fn_totop .fn__svg path,
.footer_totop .fn__svg path { fill: var(--xp-text-1) !important; }

/* Social icons row */
.guff_fn_footer .info_left a,
.guff_fn_footer .social a,
.guff_fn_footer .fn__social a {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--xp-card-border-strong) !important;
    color: var(--xp-text-1) !important;
    border-radius: 50% !important;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.guff_fn_footer .info_left a:hover,
.guff_fn_footer .social a:hover,
.guff_fn_footer .fn__social a:hover {
    background: var(--g-primary) !important;
    border-color: var(--xp-purple) !important;
}
.guff_fn_footer .info_left svg,
.guff_fn_footer .social svg { fill: currentColor !important; }

/* Share bar (single post) */
.guff_fn_sharebox {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-card-border) !important;
    border-radius: var(--r-lg) !important;
    backdrop-filter: blur(10px);
}
.guff_fn_sharebox a { color: var(--xp-text-1) !important; }
.guff_fn_sharebox a:hover { color: var(--xp-orange) !important; }

/* ══════════════════════════════════════════════════════════════════
   PHASE 9 — Accessibility, motion, Members portal hide
   ══════════════════════════════════════════════════════════════════ */

/* Override the vendor outline-offset: -5px at style.css:6865 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--xp-purple-lt) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(123,77,255,0.22) !important;
    border-radius: 6px;
}
/* Hide focus rings when mouse-driven; keep for keyboard users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Reduced motion — stop slider auto-advance + hover lifts + starfield */
@media (prefers-reduced-motion: reduce) {
    .owl-carousel, .owl-stage, .owl-stage-outer {
        transition: none !important;
        animation: none !important;
    }
    .item_wrapper .item:hover,
    .fn_cs_posts_layout_alpha .post_wrapper:hover,
    .kg-bookmark-card .kg-bookmark-container:hover,
    .guff_fn_pnb .item:hover,
    .fn__r_btn:hover,
    .xp-btn-primary:hover,
    .xp-btn-cta:hover,
    .xp-footer__social a:hover {
        transform: none !important;
    }
    .fn__ticker_list .marquee { animation: none !important; }
    body::before { display: none !important; }
}

/* Hide Ghost Members portal (editorial-only scope) — the subscribe
   form still captures emails via data-members-form above. */
[data-portal],
[data-members-trigger-button],
.gh-portal-trigger,
.gh-portal-container,
#ghost-portal-root .gh-portal-triggerbtn-wrapper,
#ghost-portal-root iframe[title*="portal"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* WCAG AA contrast — ensure tertiary text meets 4.5:1 on dark bg
   (pure rgba(255,255,255,0.72) on #0B0820 passes large-text, borderline for body) */
.guff_fn_content p,
.guff_fn_content li,
.guff_fn_content span:not(.xp-accent):not([class*="chip"]):not([class*="tag"]) {
    /* leave explicit selectors already set; default body color is var(--xp-text-2) which is 0.92 alpha */
}