/**
 * Compatibility / cascade overrides.
 *
 * This file is loaded LAST so it can defeat:
 *   - GeneratePress parent rules tied to legacy body classes
 *     (`.right-sidebar .site-content`, `.separate-containers ...`)
 *   - Elementor "Hello" kit globals (`.elementor-kit-N` heading rules,
 *     button resets, link colours)
 *   - WooCommerce default <h1> / .button styles when Woo is active
 *
 * Loaded last in the cascade. Rules target body.flanfudge for specificity
 * over GP / Elementor / Woo defaults. Each block notes the symptom it fixes.
 *
 * @package FlanFudge
 */

/* =========================================================================
 * 1. Page chrome — defeat GP's right-sidebar + separate-containers layout.
 *
 *    Symptom on flanfudge.pk: the entire site rendered inside a 30%-wide
 *    cream column on the LEFT, with the rest of the viewport showing GP's
 *    grey body background. Caused by GP CSS keyed to `.right-sidebar`,
 *    `.separate-containers`, `#primary { float: left; width: 73.55% }`.
 * ========================================================================= */

html,
body.flanfudge {
	background: var(--ff-bg);
}

body.flanfudge #page,
body.flanfudge .site {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: var(--ff-bg);
	box-shadow: none;
}

body.flanfudge #content,
body.flanfudge .site-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	display: block;
}

body.flanfudge #primary,
body.flanfudge .site-main,
body.flanfudge .content-area {
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
	background: transparent;
}

/* GP's "inside-article" gives every entry an inset white box. We render
   our own section backgrounds, so this MUST be transparent. */
body.flanfudge .inside-article,
body.flanfudge .inside-page-header,
body.flanfudge .inside-content,
body.flanfudge .inside-top-bar {
	background: transparent;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
}

/* Sidebar should never render — drop it even if a plugin re-adds it. */
body.flanfudge #secondary,
body.flanfudge .widget-area.sidebar,
body.flanfudge .left-sidebar,
body.flanfudge .right-sidebar {
	display: none;
}

/* Some GP versions output a wrapper `.grid-container` around #page. We
   want flush-to-edge sections, so disable the cap. */
body.flanfudge .grid-container {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* GP's "back-to-top" button can collide with our drawer overlay; allow
   it but force it under our drawer + announcement bar. */
body.flanfudge .generate-back-to-top {
	z-index: 30;
}

/* =========================================================================
 * 2. Headings — defeat Elementor Kit colour overrides.
 *
 *    Symptom: hero <h1> rendered in olive on top of the brownie photo
 *    instead of cream. Cause: `body.flanfudge h1 { color: var(--ff-foreground) }`
 *    has spec (0,0,1,2), `.ff-hero__title` has (0,0,1,0) — global wins.
 *    Plus Elementor adds `:root .elementor-kit-4 h1 { color: ... }`.
 *
 *    Fix: re-assert the cream colour with a body-scoped selector so
 *    neither global nor kit rules win.
 * ========================================================================= */

body.flanfudge .ff-hero__title,
body.flanfudge .ff-hero__title * {
	color: var(--ff-cream);
}

body.flanfudge .ff-final__title {
	color: var(--ff-cream);
}

body.flanfudge .ff-cat__title,
body.flanfudge .ff-cat__sub {
	color: var(--ff-cream);
}

/* Eyebrow pill on hero must stay cream too. */
body.flanfudge .ff-hero__eyebrow,
body.flanfudge .ff-hero__eyebrow svg {
	color: var(--ff-cream);
	fill: var(--ff-cream);
}

/* Section titles, on light backgrounds, stay olive. */
body.flanfudge .ff-section__title,
body.flanfudge .ff-product__title,
body.flanfudge .ff-step__title,
body.flanfudge .ff-reason__title {
	color: var(--ff-foreground);
}

/* =========================================================================
 * 3. Icon buttons — guarantee the cart bag + hamburger SVG render.
 *
 *    Symptom: cart pill appeared as a solid olive circle (no glyph).
 *    Cause: `body.flanfudge svg { max-width: 100%; height: auto }` won
 *    over `.ff-icon-btn svg { height: 22px }`, collapsing the SVG.
 * ========================================================================= */

body.flanfudge .ff-icon-btn,
body.flanfudge .ff-icon-btn:hover,
body.flanfudge .ff-icon-btn:focus,
body.flanfudge .ff-icon-btn:visited {
	text-decoration: none;
}

body.flanfudge .ff-icon-btn svg {
	width: 22px;
	height: 22px;
	max-width: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
	overflow: visible;
}

body.flanfudge .ff-icon-btn--cart {
	color: var(--ff-cream);
}

body.flanfudge .ff-icon-btn--cart svg {
	stroke: var(--ff-cream);
	fill: none;
}

/* The Lovable design uses an outlined hamburger pill, not solid. */
body.flanfudge .ff-menu-toggle {
	background: var(--ff-card);
	color: var(--ff-foreground);
}

body.flanfudge .ff-menu-toggle svg {
	stroke: var(--ff-foreground);
}

/* Hero arrow inside the CTA pill. */
body.flanfudge .ff-hero__cta svg,
body.flanfudge .ff-arrow-cta svg,
body.flanfudge .ff-section__cta-link svg,
body.flanfudge .ff-product__add svg,
body.flanfudge .ff-final__cta svg {
	width: 18px;
	height: 18px;
	max-width: none;
	display: inline-block;
}

/* =========================================================================
 * 4. Buttons — defeat Elementor / WooCommerce default `.button` styles.
 *
 *    Symptom (will appear on Step 4 once we render Add-to-Cart): WC
 *    overrides `.button` colour to a generic purple. Pre-empt it now.
 * ========================================================================= */

body.flanfudge .flanfudge-btn,
body.flanfudge .flanfudge-btn:visited {
	text-decoration: none;
	box-shadow: none;
}

body.flanfudge .flanfudge-btn--primary,
body.flanfudge .flanfudge-btn--primary:visited {
	background: var(--ff-primary);
	color: var(--ff-primary-foreground);
	border-color: var(--ff-primary);
}

body.flanfudge .flanfudge-btn--primary:hover,
body.flanfudge .flanfudge-btn--primary:focus-visible {
	background: var(--ff-olive-soft);
	color: var(--ff-primary-foreground);
	border-color: var(--ff-olive-soft);
}

body.flanfudge .ff-hero__cta,
body.flanfudge .ff-hero__cta:visited {
	background: var(--ff-cream);
	color: var(--ff-foreground);
	border-color: var(--ff-cream);
}

body.flanfudge .ff-hero__cta:hover,
body.flanfudge .ff-hero__cta:focus-visible {
	background: var(--ff-foreground);
	color: var(--ff-cream);
	border-color: var(--ff-foreground);
}

body.flanfudge .ff-final__cta--primary,
body.flanfudge .ff-final__cta--primary:visited {
	background: var(--ff-cream);
	color: var(--ff-foreground);
	border-color: var(--ff-cream);
}

body.flanfudge .ff-final__cta--secondary,
body.flanfudge .ff-final__cta--secondary:visited {
	background: transparent;
	color: var(--ff-cream);
	border: 1px solid rgba(247, 241, 225, 0.45);
}

/* =========================================================================
 * 5. Links — strip Elementor's blue link override on body.
 * ========================================================================= */

body.flanfudge a,
body.flanfudge a:visited {
	color: var(--ff-foreground);
	text-decoration: none;
}

body.flanfudge .ff-drawer__nav a,
body.flanfudge .ff-drawer__nav a:visited {
	color: var(--ff-foreground);
}

body.flanfudge a.ff-section__cta-link,
body.flanfudge a.ff-arrow-cta {
	color: var(--ff-foreground);
}

/* The "+Add" pill is an <a>, so the generic
   `body.flanfudge a { color: var(--ff-foreground) }` rule above wins
   over `.ff-product__add { color: var(--ff-primary-foreground) }` on
   specificity (0,1,2 vs 0,1,0). That painted the label olive-on-olive,
   so the text only became visible once `.ff-product__add:hover`
   (specificity 0,2,0) flipped it back to cream. Lock the cream colour
   for every link state so the label is readable at rest, on hover,
   focus, and after navigation (visited). */
body.flanfudge a.ff-product__add,
body.flanfudge a.ff-product__add:link,
body.flanfudge a.ff-product__add:visited,
body.flanfudge a.ff-product__add:hover,
body.flanfudge a.ff-product__add:focus,
body.flanfudge a.ff-product__add:focus-visible,
body.flanfudge a.ff-product__add:active {
	color: var(--ff-primary-foreground);
}

body.flanfudge .ff-product__add > span,
body.flanfudge .ff-product__add > span:link,
body.flanfudge .ff-product__add > span:visited {
	color: inherit;
	opacity: 1;
	visibility: visible;
}

body.flanfudge .ff-primary-nav a,
body.flanfudge .ff-primary-nav a:visited {
	color: var(--ff-foreground);
	text-decoration: none;
}

body.flanfudge .ff-primary-nav a:hover,
body.flanfudge .ff-primary-nav a:focus-visible {
	color: var(--ff-accent);
}

body.flanfudge .ff-support-btn,
body.flanfudge .ff-support-btn:visited {
	color: var(--ff-foreground);
	text-decoration: none;
	background: transparent;
}

body.flanfudge .ff-support-btn:hover,
body.flanfudge .ff-support-btn:focus-visible {
	background: var(--ff-bg-alt);
}

body.flanfudge .ff-support-btn svg {
	stroke: currentColor;
	fill: none;
}

/* Re-flow the masthead so [logo] [nav center] [actions right] aligns
   the way Lovable does at >=1024px when the inline nav is on. */
@media (min-width: 1024px) {
	body.flanfudge.has-desktop-nav .flanfudge-header__inner {
		gap: clamp(16px, 2.4vw, 32px);
	}
	body.flanfudge.has-desktop-nav .ff-branding,
	body.flanfudge.has-desktop-nav .ff-actions {
		flex: 0 0 auto;
	}
}

/* =========================================================================
 * 6. Card backgrounds — defeat block library's white-everywhere reset.
 * ========================================================================= */

body.flanfudge .ff-product,
body.flanfudge .ff-reason {
	background: var(--ff-card);
}

/* How it works steps use a translucent cream fill — keep it over GP/Elementor resets. */
body.flanfudge .ff-section--how-it-works .ff-step {
	background-color: color-mix(in oklab, var(--ff-cream) 60%, transparent);
	border: 1px solid color-mix(in oklab, var(--ff-olive) 15%, transparent);
}

body.flanfudge .ff-section--how-it-works,
body.flanfudge .ff-section--social-proof {
	background: var(--ff-mist);
}

body.flanfudge .ff-section--categories {
	background: #f9f5e8;
}

body.flanfudge .ff-section--how-it-works {
	background: #e5ebd5;
}

body.flanfudge .ff-section--final-cta {
	background: transparent;
}

body.flanfudge .ff-final {
	background: var(--ff-foreground);
	color: var(--ff-cream);
}

/* =========================================================================
 * 7. Footer — defeat GP's `.site-footer` defaults but DON'T set bg/colour
 *    here. footer.css owns the brand colours (light mist + dark olive
 *    text) and Lovable's design IS the light variant — overriding bg
 *    here previously made the live footer pitch-dark. Only neutralise
 *    GP-specific containers and margins.
 * ========================================================================= */

body.flanfudge .site-footer,
body.flanfudge #colophon {
	margin: 0;
}

body.flanfudge .site-footer .footer-widgets,
body.flanfudge .site-footer .site-info,
body.flanfudge .site-footer .footer-bar,
body.flanfudge .site-footer .footer-widgets-container {
	max-width: none;
	padding: 0;
	background: transparent;
}

/* =========================================================================
 * 8. Hide GP placeholder content the front-page should never show.
 * ========================================================================= */

body.flanfudge.home .entry-header,
body.flanfudge.blog .entry-header,
body.flanfudge.home .entry-meta,
body.flanfudge.home .entry-footer,
body.flanfudge.home .navigation.pagination,
body.flanfudge.home .post-navigation,
body.flanfudge.home #nav-below {
	display: none;
}

/* If the user's WP Reading is set to "Latest posts", front-page.php
   still wins, but defensively hide any stray .post stubs. */
body.flanfudge.home article.post {
	display: none;
}

body.flanfudge.home main > article.post:first-of-type ~ * {
	display: revert;
}

/* =========================================================================
 * 9. Image safety — the rendered <img> on flanfudge.pk had width=1920
 *    height=1920 inline attributes; without an aspect-ratio reset,
 *    WP's lazy-loading was producing a square logo. Force ratio from
 *    intrinsic dimensions, but cap visible height in the masthead.
 * ========================================================================= */

body.flanfudge .ff-branding__logo {
	width: auto;
	height: clamp(48px, 5vw, 64px);
	max-height: 64px;
	object-fit: contain;
}

/* Hero cover on mobile — GP / Elementor img rules must not shrink the
   LCP image inside .ff-hero__media. */
@media (max-width: 639.99px) {
	body.flanfudge .ff-hero__media img,
	body.flanfudge .ff-hero__bg-video {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
}