/* ─────────────────────────────────────────────────────────────────────
   GigaIndexer brand override — site-wide visual identity layer.

   This file is loaded SITE-WIDE with high specificity so it overrides
   both the parent theme styles and any WC/Gutenberg block defaults.

   Direction: synthesis of FatJoe's high-energy black + accent + chunky
   display headings, with LeetCode's functional color tagging and dense
   utility layout. Anti-indexceptional: black canvas (not dark navy),
   teal-mint accent (anchored to the existing logo color), heavy chunky
   sans display (not Manrope), pill buttons with hard edges (not soft),
   functional status colors as bold pills (not subtle status dots).

   Design tokens live at :root so any descendant can pull from them.
   ─────────────────────────────────────────────────────────────────── */

:root {
	/* Surfaces — near-black green-tinted, deepening from page to elevated cards */
	--gi-bg:        #07100C;
	--gi-bg-2:      #0B1612;
	--gi-surface:   #111C18;
	--gi-surface-2: #16241F;
	--gi-line:      #1E2E29;
	--gi-line-2:    #2A3D37;

	/* Ink */
	--gi-ink:       #ECF3EF;
	--gi-ink-dim:   #94A39D;
	--gi-ink-mute:  #5C6B66;

	/* Brand */
	--gi-accent:        #33CCAA;
	--gi-accent-bright: #6FE0C5;
	--gi-accent-deep:   #1B7560;
	--gi-accent-glow:   rgba(51, 204, 170, 0.32);

	/* Functional / semantic colors — LeetCode-style colored tags */
	--gi-blue:    #6FA8FF;   /* drip / scheduled */
	--gi-orange:  #FF9E5B;   /* instant / fast */
	--gi-purple:  #B58AFF;   /* utilities / tools */
	--gi-yellow:  #FFCE52;   /* warnings / pending */
	--gi-rose:    #FF6F8C;   /* errors / failed */
	--gi-success: #43E08C;   /* success / indexed */

	/* Radii — slightly larger than indexceptional for a softer feel */
	--gi-r-sm: 8px;
	--gi-r-md: 12px;
	--gi-r-lg: 18px;
	--gi-r-pill: 999px;

	/* Type */
	--gi-display: 'IBM Plex Sans', 'Geist', system-ui, -apple-system, sans-serif;
	--gi-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	--gi-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* ─── Page baseline ─────────────────────────────────────────────── */
body {
	background-color: var(--gi-bg) !important;
	color: var(--gi-ink) !important;
	font-family: var(--gi-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ─── Display headings: chunky, tight, confident ─────────────────── */
body h1,
body h2,
body h3,
.wp-block-post-title,
.wp-block-query-title,
.wp-block-heading {
	font-family: var(--gi-display);
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	color: var(--gi-ink) !important;
	line-height: 1.05 !important;
}
body h1, .wp-block-post-title { font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important; font-weight: 800 !important; }
body h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important; }
body h3 { font-size: clamp(1.25rem, 2vw, 1.6rem) !important; }

/* ─── Buttons: pill-shaped, heavy weight, teal glow on hover ─────── */
.wp-block-button__link,
.wp-block-button .wp-block-button__link,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce input.button,
.wpforms-form .wpforms-submit,
.button {
	background: var(--gi-accent) !important;
	color: var(--gi-bg) !important;
	border: 0 !important;
	border-radius: var(--gi-r-pill) !important;
	padding: 14px 28px !important;
	font-family: var(--gi-display) !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	box-shadow: 0 12px 32px -10px var(--gi-accent-glow) !important;
	transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
	            background 0.18s !important;
	cursor: pointer;
}
.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.wpforms-form .wpforms-submit:hover,
.button:hover {
	background: var(--gi-accent-bright) !important;
	transform: translateY(-2px);
	box-shadow: 0 18px 42px -10px var(--gi-accent-glow), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link,
.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--gi-ink) !important;
	border: 1.5px solid var(--gi-line-2) !important;
	box-shadow: none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--gi-accent) !important;
	color: var(--gi-accent) !important;
	background: rgba(51, 204, 170, 0.06) !important;
}

/* ─── Links — accent on hover, never default blue ────────────────── */
body a:not(.wp-block-button__link):not(.button) {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}
body a:not(.wp-block-button__link):not(.button):hover {
	color: var(--gi-accent);
}

/* ─── Cards: glass-tinted dark with hover lift ───────────────────── */
.wp-block-group.has-white-background-color,
.wp-block-group.has-light-background-color,
.wp-block-group[style*="background"] {
	background-color: var(--gi-surface) !important;
	background-image: none !important;
	border: 1px solid var(--gi-line) !important;
	border-radius: var(--gi-r-lg) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.22s,
	            box-shadow 0.22s !important;
}
.wp-block-group.has-white-background-color:hover {
	transform: translateY(-3px) !important;
	border-color: rgba(51, 204, 170, 0.32) !important;
	box-shadow: 0 24px 56px -16px rgba(0, 0, 0, 0.55),
	            0 0 0 1px rgba(51, 204, 170, 0.18) !important;
}

/* ─── Inputs: dense, dark, teal focus ring ───────────────────────── */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="search"],
body textarea,
body select,
.wp-block-search__input,
.wpforms-form input,
.wpforms-form textarea {
	background: var(--gi-bg-2) !important;
	color: var(--gi-ink) !important;
	border: 1px solid var(--gi-line) !important;
	border-radius: var(--gi-r-md) !important;
	padding: 14px 16px !important;
	font-family: var(--gi-body) !important;
	font-size: 16px !important;   /* iOS no-zoom */
	transition: border-color 0.15s, box-shadow 0.15s;
}
body input:focus,
body textarea:focus,
body select:focus {
	outline: none !important;
	border-color: var(--gi-accent) !important;
	box-shadow: 0 0 0 4px rgba(51, 204, 170, 0.18) !important;
}
body input::placeholder,
body textarea::placeholder {
	color: var(--gi-ink-mute) !important;
}

/* ─── Site header — clean, dense, teal mark ──────────────────────── */
header.app-head,
header.wp-block-template-part {
	background: rgba(7, 16, 12, 0.85) !important;
	backdrop-filter: blur(16px) saturate(140%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(140%) !important;
	border-bottom: 1px solid var(--gi-line) !important;
}
.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--gi-ink-dim) !important;
	font-weight: 500;
	letter-spacing: -0.005em;
	transition: color 0.15s;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--gi-ink) !important;
}

/* ─── Footer — minimal, low-contrast ─────────────────────────────── */
footer.app-foot,
footer.wp-block-template-part {
	background: var(--gi-bg-2) !important;
	border-top: 1px solid var(--gi-line) !important;
	color: var(--gi-ink-dim) !important;
}

/* ─── WooCommerce price displays ──────────────────────────────────── */
.woocommerce-Price-amount,
.woocommerce ul.products li.product .price,
.woocommerce .price .amount {
	color: var(--gi-accent) !important;
	font-family: var(--gi-mono) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
}
del .woocommerce-Price-amount,
.woocommerce ul.products li.product del .price {
	color: var(--gi-ink-mute) !important;
	text-decoration: line-through;
	font-size: 0.9em;
}

/* ─── Functional pills — LeetCode-style colored badges ───────────── */
.gi-pill,
.gi-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--gi-r-pill);
	font-family: var(--gi-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
}
.gi-pill.is-instant { background: rgba(255,158,91,0.12); color: var(--gi-orange); border-color: rgba(255,158,91,0.3); }
.gi-pill.is-drip    { background: rgba(111,168,255,0.12); color: var(--gi-blue); border-color: rgba(111,168,255,0.3); }
.gi-pill.is-utility { background: rgba(181,138,255,0.12); color: var(--gi-purple); border-color: rgba(181,138,255,0.3); }
.gi-pill.is-pending { background: rgba(255,206,82,0.12); color: var(--gi-yellow); border-color: rgba(255,206,82,0.3); }
.gi-pill.is-failed  { background: rgba(255,111,140,0.12); color: var(--gi-rose); border-color: rgba(255,111,140,0.3); }
.gi-pill.is-success { background: rgba(67,224,140,0.12); color: var(--gi-success); border-color: rgba(67,224,140,0.3); }
.gi-pill.is-accent  { background: rgba(51,204,170,0.12); color: var(--gi-accent); border-color: rgba(51,204,170,0.3); }

/* Apply pill style to existing WC status badges so they look intentional */
.woocommerce-orders-table__cell-order-status,
.order-badge,
.order-status,
.status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px !important;
	border-radius: var(--gi-r-pill) !important;
	font-family: var(--gi-mono) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	border: 1px solid var(--gi-line) !important;
}
.status.s-complete,
.status-completed,
.processing { color: var(--gi-success) !important; background: rgba(67,224,140,0.12) !important; border-color: rgba(67,224,140,0.3) !important; }
.status.s-queued,
.status-pending,
.status-api-ordered { color: var(--gi-yellow) !important; background: rgba(255,206,82,0.12) !important; border-color: rgba(255,206,82,0.3) !important; }
.status.s-failed,
.status-failed,
.status-cancelled { color: var(--gi-rose) !important; background: rgba(255,111,140,0.12) !important; border-color: rgba(255,111,140,0.3) !important; }

/* ─── Tables — dense, readable ───────────────────────────────────── */
.woocommerce table.shop_table,
table.woocommerce-table,
.woocommerce-cart-form table,
.woocommerce-checkout table {
	background: var(--gi-surface) !important;
	border: 1px solid var(--gi-line) !important;
	border-radius: var(--gi-r-md) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden;
}
.woocommerce table.shop_table th,
table.woocommerce-table th {
	background: var(--gi-bg-2) !important;
	color: var(--gi-ink-mute) !important;
	font-family: var(--gi-mono) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 14px 18px !important;
	border-bottom: 1px solid var(--gi-line) !important;
	text-align: left !important;
}
.woocommerce table.shop_table td,
table.woocommerce-table td {
	padding: 16px 18px !important;
	border-top: 1px solid var(--gi-line) !important;
	color: var(--gi-ink) !important;
}

/* ─── Site-wide content max-width: breathing room (mySEO move) ───── */
.wp-block-group.alignwide { max-width: 1280px !important; }
.wp-block-group.is-layout-constrained > .alignfull { max-width: none; }

/* ─── Soft ambient background — radial green wash at top ─────────── */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse 1200px 600px at 50% -200px, rgba(51, 204, 170, 0.10), transparent 70%),
		radial-gradient(ellipse 800px 400px at 90% 10%, rgba(51, 204, 170, 0.05), transparent 60%);
	pointer-events: none;
	z-index: -1;
}

/* ─── Selection / scrollbar: accent-touched ──────────────────────── */
::selection { background: rgba(51, 204, 170, 0.3); color: var(--gi-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gi-bg); }
::-webkit-scrollbar-thumb { background: var(--gi-line-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gi-accent-deep); }

/* ─── Code-y data — credit balances, etc., use mono ──────────────── */
.gi-mono,
.credit-amount,
.credits-balance,
.order-number {
	font-family: var(--gi-mono) !important;
	font-feature-settings: 'zero', 'cv02';
}

/* ─── Mobile: tighten ───────────────────────────────────────────── */
@media (max-width: 782px) {
	body h1, .wp-block-post-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
	.wp-block-group.has-white-background-color { padding: 20px !important; }
	body input, body textarea { padding: 12px 14px !important; }
	.wp-block-button__link, .button { padding: 12px 22px !important; font-size: 0.9rem !important; }
}

/* ─── Contrast safety net ──────────────────────────────────────────
   Any block painted with a primary-family background (the mint
   #33CCAA family) needs DARK text. Without this, the Business credit
   pack tile on /credits/ (which the editor styles with
   has-primary-muted-background-color) renders its h3 + body in
   gi-ink (near-white) on a light mint background — entirely unreadable
   green-on-green. We force black-ink on the entire subtree, then
   restore white on `has-dark-background-color` buttons so the
   "Add to cart" CTA stays legible. */
/* Earlier broad rules removed — they targeted the OUTER
   `has-primary-background-color` wrapper, which on /credits/ also
   contains a nested `has-dark-background-color` indicator strip.
   Forcing every descendant <p>/<h*> dark made the dark strip's
   white labels render dark-on-dark (invisible). The scoped rules
   below only target the actual mint content block. */

/* Sledgehammer scope correction — the previous broad rule targeted
   every <p>/<h*> inside any has-primary-background-color wrapper.
   On /credits/, that wrapper is the OUTER border-radius container
   which holds BOTH the mint Business tile AND the dark indicator
   strip below. So my rule also forced the dark strip's text dark
   on dark — invisible.
   New rule: only target the muted-mint content block, and exclude
   anything that lives inside a nested has-dark-background-color
   block. */
html body .has-primary-muted-background-color.has-background h1,
html body .has-primary-muted-background-color.has-background h2,
html body .has-primary-muted-background-color.has-background h3,
html body .has-primary-muted-background-color.has-background h4,
html body .has-primary-muted-background-color.has-background h5,
html body .has-primary-muted-background-color.has-background h6,
html body .has-primary-muted-background-color.has-background p,
html body .has-primary-muted-background-color.has-background .wp-block-paragraph,
html body .has-primary-muted-background-color.has-background .wp-block-post-title,
html body .has-primary-muted-background-color.has-background .wp-block-heading,
html body .has-primary-muted-background-color.has-background .wp-block-woocommerce-product-price,
html body .has-primary-muted-background-color.has-background .wp-block-woocommerce-product-price *,
html body .has-primary-muted-background-color.has-background .wc-block-components-product-price,
html body .has-primary-muted-background-color.has-background .wc-block-components-product-price *,
html body .has-primary-muted-background-color.has-background ins .woocommerce-Price-amount,
html body .has-primary-muted-background-color.has-background ins .woocommerce-Price-amount * {
	color: #07100C !important;
}
html body .has-primary-muted-background-color.has-background del .woocommerce-Price-amount,
html body .has-primary-muted-background-color.has-background del .woocommerce-Price-amount * {
	color: rgba(7, 16, 12, 0.55) !important;
}
html body .has-primary-muted-background-color.has-background .wp-element-button,
html body .has-primary-muted-background-color.has-background .wp-element-button * {
	color: #ECF3EF !important;
}

/* Add-to-cart CTA on the mint Business tile needs to POP. Default
   brand styles paint .wp-block-button__link mint — collapses to a
   barely-visible "mint button on mint background" with low-contrast
   white text floating on it. Force the CTA dark with white text on
   any primary or primary-muted backgrounded block, plus a soft
   shadow for visual elevation. Hover lifts slightly. */
html body .has-primary-background-color.has-background .wc-block-components-product-button__button,
html body .has-primary-background-color.has-background .wp-block-button__link,
html body .has-primary-background-color.has-background .wp-element-button.wc-block-components-product-button__button,
html body .has-primary-muted-background-color.has-background .wc-block-components-product-button__button,
html body .has-primary-muted-background-color.has-background .wp-block-button__link,
html body .has-primary-muted-background-color.has-background .wp-element-button.wc-block-components-product-button__button {
	background: #07100C !important;
	color: #ECF3EF !important;
	border: 1px solid rgba(7, 16, 12, 0.85) !important;
	box-shadow:
		0 8px 24px -10px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	font-weight: 700 !important;
	padding: 14px 26px !important;
	transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.12s ease !important;
}
html body .has-primary-background-color.has-background .wc-block-components-product-button__button:hover,
html body .has-primary-background-color.has-background .wp-block-button__link:hover,
html body .has-primary-muted-background-color.has-background .wc-block-components-product-button__button:hover,
html body .has-primary-muted-background-color.has-background .wp-block-button__link:hover {
	background: #000 !important;
	transform: translateY(-1px) !important;
	box-shadow:
		0 14px 36px -10px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Restore the original dark-on-light rendering for any block painted
   with `has-dark-background-color` — it has its own light text color
   class (typically `has-white-color`) that the previous overshooting
   rule was trampling. */
html body .has-dark-background-color.has-background,
html body .has-dark-background-color.has-background h1,
html body .has-dark-background-color.has-background h2,
html body .has-dark-background-color.has-background h3,
html body .has-dark-background-color.has-background h4,
html body .has-dark-background-color.has-background h5,
html body .has-dark-background-color.has-background h6,
html body .has-dark-background-color.has-background p,
html body .has-dark-background-color.has-background .wp-block-paragraph,
html body .has-dark-background-color.has-background strong,
html body .has-dark-background-color.has-background em,
html body .has-dark-background-color.has-background a:not(.wp-element-button):not(.wp-block-button__link) {
	color: #ECF3EF !important;
}