/* ==========================================================================
   IndiePump — dark / light theming
   --------------------------------------------------------------------------
   Palette sampled from the live indiepump.com stylesheet, so the light state
   below is the site exactly as it renders today:

     #04063e  navy      headings, body copy
     #ff0054  pink      links, buttons, accents
     #cc0447  pink-dark hover
     #f9f0ec  cream     alternating section background
     #eed3c9  peach     soft dividers
     #0089f7  blue      secondary accent
     #908c8a  warm grey muted text
     #161922  ink       near-black

   Structure of this file:
     1. Tokens (light + dark)
     2. The toggle button
     3. Dark-mode overrides for Betheme
     4. Escape hatches

   Everything destructive is scoped to [data-ip-theme="dark"]. In light mode
   this file paints nothing except the toggle button itself, so turning the
   plugin on cannot change how the site looks today.
   ========================================================================== */

/* -- 1. Tokens ----------------------------------------------------------- */

:root,
[data-ip-theme="light"] {
	--ip-navy:        #04063e;
	--ip-pink:        #ff0054;
	--ip-pink-hover:  #cc0447;
	--ip-cream:       #f9f0ec;
	--ip-peach:       #eed3c9;
	--ip-blue:        #0089f7;
	--ip-grey:        #908c8a;

	--ip-bg:          #ffffff;
	--ip-bg-alt:      var(--ip-cream);
	--ip-surface:     #ffffff;
	--ip-surface-2:   #f7f7fa;
	--ip-text:        var(--ip-navy);
	/*
	 * Not the brand grey #908c8a: on white it measures 3.33:1, below the 4.5:1
	 * WCAG AA floor, and it is used here on 13px card text. This is the same
	 * warm grey darkened until it passes (5.3:1).
	 */
	--ip-text-muted:  #6f6b69;
	--ip-heading:     var(--ip-navy);
	--ip-link:        var(--ip-pink);
	--ip-link-hover:  var(--ip-pink-hover);
	--ip-accent:      var(--ip-pink);
	/*
	 * For small filled elements that carry white text — a badge or a button.
	 * White on #ff0054 is only 3.9:1; on #cc0447 it is 5.7:1. Both are brand
	 * pinks, so nothing here goes off-palette.
	 */
	--ip-accent-strong:       #cc0447;
	--ip-accent-strong-hover: #a80339;
	--ip-border:      rgba(4, 6, 62, .12);
	--ip-shadow:      0 8px 28px rgba(4, 6, 62, .10);
	--ip-toggle-bg:   #ffffff;
	--ip-toggle-fg:   var(--ip-navy);
}

/*
 * The dark surfaces are the brand navy rather than a neutral grey — #04063e is
 * the page, and cards step up from it. A generic #121212 dark mode would read
 * as a different product.
 *
 * Contrast against #04063e (WCAG 2.1):
 *   #eef0ff text   16.8:1  AAA
 *   #ff4d80 link    6.0:1  AA  (plain #ff0054 is 4.9:1 — passes, but is
 *                               lightened here because most links sit on the
 *                               raised card surface, not the page)
 *   #a9aecb muted   7.3:1  AAA
 */
[data-ip-theme="dark"] {
	--ip-bg:          #04063e;
	--ip-bg-alt:      #070b4d;
	--ip-surface:     #0b1050;
	--ip-surface-2:   #141a5e;
	--ip-text:        #eef0ff;
	--ip-text-muted:  #a9aecb;
	--ip-heading:     #ffffff;
	--ip-link:        #ff4d80;
	--ip-link-hover:  #ff8aab;
	--ip-accent:      #ff2d70;
	--ip-accent-strong:       #cc0447;
	--ip-accent-strong-hover: #a80339;
	--ip-border:      rgba(255, 255, 255, .14);
	--ip-shadow:      0 8px 28px rgba(0, 0, 0, .45);
	--ip-toggle-bg:   #0b1050;
	--ip-toggle-fg:   #ffc9d9;

	color-scheme: dark;
}

/* Native widgets (scrollbars, form controls, date pickers) follow suit. */
[data-ip-theme="light"] { color-scheme: light; }


/* -- 2. Toggle button ---------------------------------------------------- */

.ipsp-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 30px, not 40: the Betheme header menu column on indiepump.com is 648px
	   wide, and the row of links plus this button overflowed it, wrapping the
	   button onto its own line beneath the menu. At 30px with no left margin the
	   row fits with a few pixels to spare. The floating fallback below keeps a
	   full 44px, since nothing constrains it there. */
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--ip-border);
	border-radius: 50%;
	background: var(--ip-toggle-bg);
	color: var(--ip-toggle-fg);
	cursor: pointer;
	line-height: 1;
	box-shadow: var(--ip-shadow);
	transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ipsp-toggle:hover { transform: scale(1.08); border-color: var(--ip-accent); }
.ipsp-toggle:active { transform: scale(.96); }

.ipsp-toggle:focus-visible {
	outline: 2px solid var(--ip-accent);
	outline-offset: 3px;
}

.ipsp-toggle__icon { width: 16px; height: 16px; display: block; fill: currentColor; }

/* One icon is shown at a time; the other is removed from the a11y tree. */
[data-ip-theme="light"] .ipsp-toggle__icon--moon,
[data-ip-theme="dark"]  .ipsp-toggle__icon--sun { display: none; }

/* Sitting inside the Betheme header menu. */
.ipsp-toggle-li {
	display: flex !important;
	align-items: center;
	margin-left: 0;
}

/*
 * Fallback position, used only when the header menu could not be found — for
 * example on a template that renders a different header.
 */
.ipsp-toggle--floating {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9998;
	width: 44px;
	height: 44px;
}

@media (max-width: 767px) {
	.ipsp-toggle--floating { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.ipsp-toggle { transition: none; }
	.ipsp-toggle:hover, .ipsp-toggle:active { transform: none; }
}


/* -- 3. Dark mode over Betheme ------------------------------------------- */
/*
 * Betheme writes section and column backgrounds as inline styles from the page
 * builder, and an inline style beats a stylesheet. That is the only reason for
 * !important below — without it the builder's white sections stay white and
 * the light text becomes unreadable.
 */

[data-ip-theme="dark"] body,
[data-ip-theme="dark"] #Wrapper,
[data-ip-theme="dark"] #Content,
[data-ip-theme="dark"] .mfn-main-content {
	background-color: var(--ip-bg) !important;
	color: var(--ip-text) !important;
}

/*
 * Page-level bands only. Columns are deliberately NOT in this list: on this
 * site the white backgrounds live on .section, while .mcb-column-inner is
 * where the builder puts brand colours - the pink/orange/green number badges
 * and the cyan panels. Blanking columns erased those.
 */
[data-ip-theme="dark"] .section,
[data-ip-theme="dark"] .mcb-section,
[data-ip-theme="dark"] .section_wrapper,
[data-ip-theme="dark"] .mcb-wrap,
[data-ip-theme="dark"] .mcb-wrap-inner {
	background-color: transparent !important;
}

/* Alternating bands keep their rhythm, one step up from the page. */
[data-ip-theme="dark"] .section.bg-cream,
[data-ip-theme="dark"] .mcb-section.bg-cream,
[data-ip-theme="dark"] .section[style*="#f9f0ec"],
[data-ip-theme="dark"] .section[style*="#F9F0EC"],
[data-ip-theme="dark"] .mcb-section[style*="#f9f0ec"],
[data-ip-theme="dark"] .mcb-section[style*="#F9F0EC"] {
	background-color: var(--ip-bg-alt) !important;
}

[data-ip-theme="dark"] h1,
[data-ip-theme="dark"] h2,
[data-ip-theme="dark"] h3,
[data-ip-theme="dark"] h4,
[data-ip-theme="dark"] h5,
[data-ip-theme="dark"] h6,
[data-ip-theme="dark"] .title,
[data-ip-theme="dark"] .mfn-heading {
	color: var(--ip-heading) !important;
}

/*
 * `span` is deliberately absent from this list. A bare span inherits its
 * colour already, so including it buys almost nothing — and because
 * `[data-ip-theme="dark"] span` (0,1,1) outranks any single class (0,1,0), it
 * silently overrode every component that sets its own muted or accent colour,
 * including the game cards in this plugin and anything WooCommerce renders.
 * Spans that were explicitly painted dark are handled just below instead.
 */
[data-ip-theme="dark"] p,
[data-ip-theme="dark"] li,
[data-ip-theme="dark"] td,
[data-ip-theme="dark"] th,
[data-ip-theme="dark"] dd,
[data-ip-theme="dark"] dt,
[data-ip-theme="dark"] blockquote,
[data-ip-theme="dark"] figcaption,
[data-ip-theme="dark"] label {
	color: var(--ip-text);
}

/* Text the page builder painted dark, inline, on any element. */
[data-ip-theme="dark"] [style*="color: #04063e"],
[data-ip-theme="dark"] [style*="color:#04063e"],
[data-ip-theme="dark"] [style*="color: #04063E"],
[data-ip-theme="dark"] [style*="color:#04063E"],
[data-ip-theme="dark"] [style*="color: rgb(4, 6, 62)"],
[data-ip-theme="dark"] [style*="color: #161922"],
[data-ip-theme="dark"] [style*="color:#161922"],
[data-ip-theme="dark"] [style*="color: #333"],
[data-ip-theme="dark"] [style*="color:#333"] {
	color: var(--ip-text) !important;
}

[data-ip-theme="dark"] .subtitle,
[data-ip-theme="dark"] .desc,
[data-ip-theme="dark"] .muted,
[data-ip-theme="dark"] small {
	color: var(--ip-text-muted) !important;
}

[data-ip-theme="dark"] a { color: var(--ip-link); }
[data-ip-theme="dark"] a:hover { color: var(--ip-link-hover); }

/* Header and footer. */
[data-ip-theme="dark"] #Header_wrapper,
[data-ip-theme="dark"] #Header,
[data-ip-theme="dark"] .mfn-header-template,
[data-ip-theme="dark"] .mfn-header-tmpl,
[data-ip-theme="dark"] #Top_bar,
[data-ip-theme="dark"] #Top_bar.is-sticky,
[data-ip-theme="dark"] #Action_bar {
	background-color: var(--ip-bg) !important;
	border-color: var(--ip-border) !important;
}

[data-ip-theme="dark"] #Footer,
[data-ip-theme="dark"] .mfn-footer-template,
[data-ip-theme="dark"] #Footer .widgets_wrapper,
[data-ip-theme="dark"] #Footer .footer_copy {
	background-color: var(--ip-bg-alt) !important;
	border-color: var(--ip-border) !important;
}

[data-ip-theme="dark"] #Footer,
[data-ip-theme="dark"] #Footer p,
[data-ip-theme="dark"] #Footer li,
[data-ip-theme="dark"] #Footer a,
[data-ip-theme="dark"] .mfn-menu-link,
[data-ip-theme="dark"] #Top_bar .menu > li > a {
	color: var(--ip-text) !important;
}

[data-ip-theme="dark"] .mfn-menu-link:hover,
[data-ip-theme="dark"] #Top_bar .menu > li > a:hover,
[data-ip-theme="dark"] .mfn-menu-li.current-menu-item > .mfn-menu-link {
	color: var(--ip-accent) !important;
}

/* Dropdowns and the mobile slide-out panel. */
[data-ip-theme="dark"] .mfn-submenu,
[data-ip-theme="dark"] #Top_bar .menu > li ul,
[data-ip-theme="dark"] .mfn-header-menu-sliding,
[data-ip-theme="dark"] #Side_slide {
	background-color: var(--ip-surface) !important;
	border-color: var(--ip-border) !important;
}

[data-ip-theme="dark"] #Side_slide a,
[data-ip-theme="dark"] #Side_slide .menu > li > a { color: var(--ip-text) !important; }

/* Cards, boxes and anything the builder painted white. */
/*
 * Only surfaces the builder actually painted white are lifted onto the dark
 * card colour. The previous version listed component classes (.mfn-icon-box,
 * .promo_box and friends) and gave them a panel they never had in light mode -
 * that is what put navy rectangles behind the mentorship cards.
 */
[data-ip-theme="dark"] [style*="background-color: #fff"],
[data-ip-theme="dark"] [style*="background-color:#fff"],
[data-ip-theme="dark"] [style*="background-color: #ffffff"],
[data-ip-theme="dark"] [style*="background-color:#ffffff"],
[data-ip-theme="dark"] [style*="background-color: rgb(255, 255, 255)"] {
	background-color: var(--ip-surface) !important;
	border-color: var(--ip-border) !important;
}

/* Buttons keep the brand pink; only the neutral ones need help. */
[data-ip-theme="dark"] .button,
[data-ip-theme="dark"] .mfn-btn,
[data-ip-theme="dark"] button,
[data-ip-theme="dark"] input[type="submit"] {
	border-color: var(--ip-border);
}

[data-ip-theme="dark"] .button_theme,
[data-ip-theme="dark"] .mfn-btn-primary,
[data-ip-theme="dark"] input[type="submit"] {
	background-color: var(--ip-accent) !important;
	color: #ffffff !important;
	border-color: transparent !important;
}

[data-ip-theme="dark"] .button_theme:hover,
[data-ip-theme="dark"] .mfn-btn-primary:hover,
[data-ip-theme="dark"] input[type="submit"]:hover {
	background-color: var(--ip-link-hover) !important;
}

/* Forms — Contact Form 7 is what the contact page uses. */
[data-ip-theme="dark"] input[type="text"],
[data-ip-theme="dark"] input[type="email"],
[data-ip-theme="dark"] input[type="url"],
[data-ip-theme="dark"] input[type="tel"],
[data-ip-theme="dark"] input[type="number"],
[data-ip-theme="dark"] input[type="search"],
[data-ip-theme="dark"] input[type="password"],
[data-ip-theme="dark"] textarea,
[data-ip-theme="dark"] select,
[data-ip-theme="dark"] .wpcf7 input,
[data-ip-theme="dark"] .wpcf7 textarea {
	background-color: var(--ip-surface-2) !important;
	color: var(--ip-text) !important;
	border-color: var(--ip-border) !important;
}

[data-ip-theme="dark"] ::placeholder { color: var(--ip-text-muted); opacity: 1; }

[data-ip-theme="dark"] input:focus,
[data-ip-theme="dark"] textarea:focus,
[data-ip-theme="dark"] select:focus {
	border-color: var(--ip-accent) !important;
	outline-color: var(--ip-accent);
}

[data-ip-theme="dark"] hr,
[data-ip-theme="dark"] .hr_dots,
[data-ip-theme="dark"] .mfn-divider,
[data-ip-theme="dark"] table,
[data-ip-theme="dark"] td,
[data-ip-theme="dark"] th { border-color: var(--ip-border) !important; }

/* WooCommerce surfaces. */
[data-ip-theme="dark"] .woocommerce .product,
[data-ip-theme="dark"] .woocommerce ul.products li.product,
[data-ip-theme="dark"] .woocommerce-info,
[data-ip-theme="dark"] .woocommerce-message,
[data-ip-theme="dark"] .woocommerce table.shop_table,
[data-ip-theme="dark"] .woocommerce-Tabs-panel {
	background-color: var(--ip-surface) !important;
	color: var(--ip-text) !important;
	border-color: var(--ip-border) !important;
}

[data-ip-theme="dark"] .woocommerce .price,
[data-ip-theme="dark"] .woocommerce-Price-amount { color: var(--ip-accent) !important; }


/* -- 3b. Slider Revolution ---------------------------------------------- */

/*
 * The homepage hero is a Slider Revolution module drawn over a fixed cream
 * illustration. Its text layers carry no colour of their own, so they were
 * inheriting the dark-mode body colour and turning near-white on cream -
 * effectively invisible. Layers keep the light-mode colour instead; any layer
 * that sets its own colour in the slider (the pink 'Sales on Steam' plate)
 * still wins, because this only supplies the inherited value.
 */
/*
 * The hero is a Slider Revolution module drawn over a fixed cream
 * illustration. Its band gets no background of its own - in light mode the
 * page behind it is light, which is what makes the artwork read. So in dark
 * mode the band keeps that light background rather than the artwork floating
 * on navy.
 */
[data-ip-theme="dark"] .mfn-main-slider {
	background-color: var(--ip-cream) !important;
}

/*
 * Only the layers the [style*="color: #04063e"] rule above repainted are put
 * back - that rule is (0,2,0) and !important, and the slider writes the brand
 * navy inline. Adding the tag lifts this to (0,2,1) so it wins. Layers that
 * set their own colour, like the white-on-pink plate, are left alone.
 */
[data-ip-theme="dark"] rs-layer[style*="color: #04063e"],
[data-ip-theme="dark"] rs-layer[style*="color:#04063e"],
[data-ip-theme="dark"] rs-layer[style*="color: rgb(4, 6, 62)"],
[data-ip-theme="dark"] rs-layer[style*="color:rgb(4,6,62)"] {
	color: var(--ip-navy) !important;
}


/*
 * The footer logo is a .jpg, so its white background is baked into the file
 * and cannot be made transparent by CSS. Rounding it makes it read as a
 * deliberate white tile on the navy footer rather than a stray rectangle.
 * The real fix is to re-export that image as a transparent PNG, after which
 * this rule can go.
 */
[data-ip-theme="dark"] .mfn-footer-tmpl-builder .logo-wrapper img,
[data-ip-theme="dark"] #Footer .logo-wrapper img,
[data-ip-theme="dark"] .mfn-footer-template .logo-wrapper img {
	border-radius: 18px;
}


/* -- 4. Escape hatches --------------------------------------------------- */

/*
 * Add ipsp-keep-light to any element the dark pass gets wrong — a logo lockup
 * on a white plate, a sponsor strip, an infographic that only reads on white.
 * It restores a white surface and dark text for that element and its children.
 */
[data-ip-theme="dark"] .ipsp-keep-light,
[data-ip-theme="dark"] .ipsp-keep-light * {
	background-color: #ffffff !important;
	color: var(--ip-navy) !important;
	border-color: rgba(4, 6, 62, .12) !important;
}

/* The opposite: force an element to the dark surface if it was missed. */
[data-ip-theme="dark"] .ipsp-force-dark {
	background-color: var(--ip-surface) !important;
	color: var(--ip-text) !important;
}

/* Add to a dark-ink logo so it stays visible on the navy page. */
[data-ip-theme="dark"] .ipsp-invert-logo img { filter: invert(1) hue-rotate(180deg); }

/* Photographs and key art are never touched — only flat UI is re-coloured. */
[data-ip-theme="dark"] img:not(.ipsp-invert-logo img) { filter: none; }