/* ==========================================================================
   Free Email Checker Widget — Design System (single source of truth)
   ==========================================================================

   WHY THIS FILE EXISTS
   ---------------------------------------------------------------------
   Before this file, the plugin's front-end had three separate visual
   languages that had drifted apart: the dark "Site Chrome" used by the
   auto-created marketing pages (tool pages, premium landing, developers
   page, signup page — see includes/templates/parts/header.php), the
   light embeddable widget in assets/css/style.css, and several
   shortcode-rendered pages (Company Profile, Domain Report / Unclaimed
   Domains outreach form) that each carry their own bespoke inline
   <style> block. A visitor moving between them sees three different
   products.

   This file is the ONE place that defines the plugin's brand: colors,
   fonts, spacing, radii, and the handful of reusable components
   (buttons, badges, cards, status pills, nav, footer, form controls)
   that every plugin-owned page should be built from going forward.

   MIGRATION STATUS (update this as pages move over)
   ---------------------------------------------------------------------
   - [x] Site Chrome (header.php / footer.php)   — this file is now
         linked in via <link rel="stylesheet"> right before the
         existing inline <style> block (see header.php), so its
         cascade loses to the inline block's site-specific --blue and
         any page-specific rule for now. The remaining inline block
         still renders every chrome page pixel-identically to before.
         Deleting the inline block and rebuilding its markup on top of
         the components below (nav, footer, buttons, cards, section
         heads) is the next migration step.
   - [x] assets/css/style.css (embed widget)      — migrated. Its
         --fec-ok/--fec-warn/--fec-bad/--fec-ink/--fec-muted/--fec-line
         tokens (100+ references throughout this 1334-line file) now
         resolve through the shared --status-*/--ink-on-light/etc.
         tokens instead of their own hex, with the original hex kept
         only as the var() fallback. --fec-accent deliberately left
         alone - it's the working per-site override (fec_widget_button_color),
         not a token that should be unified away. Enqueued with
         fec-design-system.css as an explicit dependency wherever
         style.css loads (the main [free_email_checker] widget and
         the signup page).
   - [x] Company Profile page                     — migrated. Loads
         fec-design-system.css as a real dependency now (not just on
         Site Chrome pages), and its CSS (FEC_Company_Profile::get_inline_css(),
         shared with FEC_Domain_Claim_Widget's post-claim preview) pulls
         colors/radii/type from the shared tokens instead of its own
         hardcoded hex. Class names are unchanged (JS depends on them),
         except the Verified badge now also carries .fec-status
         .fec-status--ok so it renders the exact same green pill used
         for "ok" everywhere else on the site. The trust-score chip's
         hardcoded blue (#1d4ed8, ignoring the site's configured accent
         color) was also fixed to use --blue while migrating.
   - [x] Domain Report / Unclaimed Domains form    — migrated. Same
         selectors (JS depends on them), values now draw from
         --status-bad/--status-ok/--line-on-light/--radius-chip.
         Always embedded inside an already-migrated Company Profile
         card in practice, but enqueues fec-design-system.css itself
         too (defensive - render_widget() is public).
   - [ ] Support / live-chat float widget          — not yet migrated.
   - [x] Site Chrome coverage audit (step 3)       — confirmed 8 full-page
         templates already call FEC_Site_Chrome (tool pages, premium
         landing, developers, signup, /company/{domain}/, /companies/,
         the badge-embed page, outreach-unsubscribe) - wider than
         originally assumed. Shortcode-embeddable widgets (Company
         Profile, Domain Report, Support, live chat, the main embed
         checker) are correctly excluded - they render inside a host
         theme page and can't own their own header/nav/footer.
   - [ ] Remaining tool widgets' local status tokens — class-fec-disposable-checker.php,
         class-fec-blacklist-checker.php, class-fec-email-extractor.php,
         class-fec-syntax-checker.php, class-fec-domain-auth-lookup.php,
         class-fec-mx-lookup.php, class-fec-support.php,
         class-fec-support-float.php, class-fec-deliverability-monitor.php,
         class-fec-domain-claim-widget.php (its own extra CSS beyond the
         Company Profile card it already shares), class-fec-frontpage-showcase.php,
         class-fec-payment-sslcommerz.php each still define their own
         local --fec-ok/--fec-warn/--fec-bad instead of reading the
         shared --status-* tokens. Same hex values today (#16a34a /
         #b45309 / #dc2626 everywhere, so nothing looks wrong right
         now) - but a future color change would mean editing ~12 files
         instead of one. One real drift WAS found and fixed here: the
         Company Directory badge's off-brand #0a7a4f green.

   This file is enqueued (via wp_enqueue_style + a direct <link> since
   the full-bleed chrome templates don't run through a theme's wp_head
   loop the way a normal page does) on every Site Chrome page today.
   Loading it changes nothing visually yet — no markup on those pages
   uses its class names outside of what header.php/footer.php already
   duplicate inline. Each future migration step should: (1) delete the
   page's bespoke CSS, (2) rebuild its markup using the components
   below, (3) tick the box above.
   ========================================================================== */


/* --------------------------------------------------------------------
   1. DESIGN TOKENS
   Copied verbatim from the Site Chrome's current inline <style> so the
   two stay pixel-identical during the transition. --blue is the one
   token a site owner can already override today (fec_widget_button_color
   in the admin) — every component below should key off --blue rather
   than a hardcoded blue so white-labeling keeps working after migration.
   -------------------------------------------------------------------- */
:root {
	/* Dark surfaces (Site Chrome: nav, footer, hero, code blocks) */
	--ink: #0A0A22;
	--ink-2: #0E0D30;
	--panel: #141138;
	--panel-2: #1B1750;
	--line: rgba(201, 186, 255, 0.16);
	--line-strong: rgba(201, 186, 255, 0.30);
	--text: #EFECFF;
	--text-dim: #ACA4DC;
	--text-faint: #6E679E;
	--nav-text: #CBC3F0;

	/* Light surfaces (marketing sections, cards, widget) */
	--paper: #FAF8FF;
	--paper-2: #F1ECFB;
	--ink-on-light: #150F35;
	--dim-on-light: #5F5788;
	--line-on-light: #E1D8F5;

	/* Brand + status accents */
	--green: #34D399;
	--amber: #F5A623;
	--rose: #FB7185;
	--blue: #2563eb; /* overridden per-site via fec_widget_button_color */
	--violet: #8B5CF6;
	--teal: #22D3EE;

	/* Bold brand gradient + glass surfaces — matches parts/header.php */
	--grad-1: #7C3AED;
	--grad-2: var(--blue);
	--grad-3: #22D3EE;
	--grad-4: #F472B6;
	--grad-brand: linear-gradient(115deg, var(--grad-1) 0%, var(--grad-2) 42%, var(--grad-3) 75%, var(--grad-4) 100%);
	--grad-brand-soft: linear-gradient(115deg, color-mix(in srgb, var(--grad-1) 16%, transparent), color-mix(in srgb, var(--grad-3) 14%, transparent));
	--glass-bg: rgba(238, 232, 255, .07);
	--glass-bg-strong: rgba(238, 232, 255, .12);
	--glass-border: rgba(238, 232, 255, .18);
	--glass-bg-light: rgba(255, 255, 255, .58);
	--glass-bg-light-strong: rgba(255, 255, 255, .78);
	--glass-border-light: rgba(255, 255, 255, .75);
	--glass-blur: 18px;

	/* Status semantics — the SINGLE reference for "good / risky / bad"
	   everywhere a trust score or check result is shown (widget, company
	   profile, domain report, deliverability monitor). Deliberately
	   reuses --green/--amber/--rose above rather than inventing new
	   hex values, so once style.css's --fec-ok/--fec-warn/--fec-bad are
	   pointed at these, a "good" result is the exact same green
	   wherever it appears on the site. */
	--status-ok: var(--green);
	--status-ok-bg: rgba(52, 211, 153, 0.12);
	--status-ok-border: rgba(52, 211, 153, 0.30);
	--status-warn: var(--amber);
	--status-warn-bg: rgba(245, 166, 35, 0.12);
	--status-warn-border: rgba(245, 166, 35, 0.30);
	--status-bad: var(--rose);
	--status-bad-bg: rgba(251, 113, 133, 0.12);
	--status-bad-border: rgba(251, 113, 133, 0.30);
	/* Light-surface variants: the rose/amber/green above read well on
	   dark ink but need deeper, more saturated tones on white cards to
	   stay accessible — used automatically inside .fec-on-light. */
	--status-ok-on-light: #16a34a;
	--status-warn-on-light: #b45309;
	--status-bad-on-light: #dc2626;

	/* Type */
	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'IBM Plex Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	/* Layout */
	--maxw: 1180px;
	--radius: 20px;
	--radius-chip: 12px 12px 12px 4px;
	--radius-chip-lg: 18px 18px 18px 5px;
	--radius-pill: 999px;
}


/* --------------------------------------------------------------------
   2. BASE / RESET
   Scoped to .fec-ds so this file can be loaded on any page — including
   ones with third-party theme content above/below plugin markup —
   without leaking box-sizing or scroll-behavior into the rest of the
   theme.
   -------------------------------------------------------------------- */
.fec-ds, .fec-ds *, .fec-ds *::before, .fec-ds *::after {
	box-sizing: border-box;
}
.fec-ds { font-family: var(--font-body); color: var(--ink-on-light); }
.fec-ds img, .fec-ds svg { display: block; max-width: 100%; }
.fec-ds a { color: inherit; }
.fec-ds h1, .fec-ds h2, .fec-ds h3 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
}
.fec-ds :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Dark-surface context: any block that should render on an --ink
   background (nav, footer, hero panels) — wrap it in .fec-ds--dark
   rather than hand-picking colors so text/border tokens flip together. */
.fec-ds--dark { background: var(--ink); color: var(--text); }
.fec-ds--dark h1, .fec-ds--dark h2, .fec-ds--dark h3 { color: #fff; }


/* --------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------- */
.fec-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.fec-section { padding: 104px 0; }
.fec-section-head { max-width: 640px; margin: 0 0 56px; }
.fec-section-head.fec-center { margin-left: auto; margin-right: auto; text-align: center; }
.fec-section-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.35rem); color: var(--ink-on-light); }
.fec-section-head p { margin: 16px 0 0; color: var(--dim-on-light); font-size: 16px; max-width: 560px; }
.fec-section-head.fec-center p { margin-left: auto; margin-right: auto; }

@media (max-width: 600px) {
	.fec-section { padding: 72px 0; }
	.fec-wrap { padding: 0 20px; }
}


/* --------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------- */
.fec-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
	padding: 13px 24px; border-radius: var(--radius-chip); border: 1px solid transparent;
	cursor: pointer; text-decoration: none; line-height: 1;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.fec-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.fec-btn--primary {
	background: var(--grad-brand); background-size: 220% 220%; background-position: 0% 50%; color: #fff;
	box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--grad-1) 55%, transparent);
	transition: transform .18s ease, box-shadow .18s ease, background-position .5s ease;
}
.fec-btn--primary:hover {
	transform: translateY(-1px);
	background-position: 100% 50%;
	box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--grad-1) 65%, transparent);
}
.fec-btn--ghost-dark { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); color: var(--text); border-color: var(--glass-border); }
.fec-btn--ghost-dark:hover { border-color: color-mix(in srgb, var(--grad-3) 55%, var(--glass-border)); color: #fff; }
.fec-btn--ghost-light { background: var(--glass-bg-light); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); color: var(--ink-on-light); border-color: var(--glass-border-light); }
.fec-btn--ghost-light:hover { border-color: var(--blue); color: var(--blue); }
.fec-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }


/* --------------------------------------------------------------------
   5. BADGES / EYEBROWS
   The small uppercase-mono pill used above every section heading and
   as a status label. This is the single most identity-carrying element
   in the design — keep every plugin page using this instead of
   inventing a new badge shape.
   -------------------------------------------------------------------- */
.fec-eyebrow {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--text); margin: 0 0 18px; padding: 6px 13px 6px 10px;
	background: var(--glass-bg-strong);
	backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-chip);
}
.fec-eyebrow::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-brand);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); flex-shrink: 0;
}
.fec-eyebrow--light {
	color: #B0762F;
	background: color-mix(in srgb, var(--amber) 14%, transparent);
	border-color: color-mix(in srgb, var(--amber) 30%, transparent);
}
.fec-eyebrow--light::before { background: var(--amber); }


/* --------------------------------------------------------------------
   6. STATUS PILLS
   For any pass/risky/fail result — email check verdicts, domain auth
   checks (SPF/DKIM/DMARC), blacklist status, deliverability alerts.
   Use the same three classes everywhere instead of each page inventing
   its own "good/bad" coloring.
   -------------------------------------------------------------------- */
.fec-status {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 600; padding: 5px 11px;
	border-radius: var(--radius-pill); border: 1px solid transparent;
}
.fec-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.fec-status--ok { color: var(--status-ok); background: var(--status-ok-bg); border-color: var(--status-ok-border); }
.fec-status--ok::before { background: var(--status-ok); }
.fec-status--warn { color: var(--status-warn); background: var(--status-warn-bg); border-color: var(--status-warn-border); }
.fec-status--warn::before { background: var(--status-warn); }
.fec-status--bad { color: var(--status-bad); background: var(--status-bad-bg); border-color: var(--status-bad-border); }
.fec-status--bad::before { background: var(--status-bad); }

/* On white cards (Company Profile, Domain Report), swap in the deeper
   on-light status tones for contrast — wrap the pill's container in
   .fec-on-light rather than overriding colors per page. */
.fec-on-light .fec-status--ok { color: var(--status-ok-on-light); }
.fec-on-light .fec-status--warn { color: var(--status-warn-on-light); }
.fec-on-light .fec-status--bad { color: var(--status-bad-on-light); }


/* --------------------------------------------------------------------
   7. CARDS
   One generic card shape (top-border accent on hover, lift on hover)
   used everywhere a grid of "things" is shown: tool cards, audience
   cards, pricing tiers, and — after migration — Company Profile result
   rows and related-company cards. Set --tc (tile color) per card to
   vary the accent without duplicating the whole component.
   -------------------------------------------------------------------- */
.fec-card {
	--tc: var(--blue);
	background: var(--glass-bg-light); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
	border: 1px solid var(--glass-border-light); border-radius: var(--radius);
	padding: 26px 24px; position: relative; overflow: hidden;
	transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.fec-card:hover { background: var(--glass-bg-light-strong); }
.fec-card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--tc); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.fec-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 38px -14px color-mix(in srgb, var(--tc) 35%, rgba(16,24,43,.2));
	border-color: transparent;
}
.fec-card:hover::before { transform: scaleX(1); }
.fec-card__icon {
	width: 38px; height: 38px; border-radius: var(--radius-chip);
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc);
	margin-bottom: 14px; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
.fec-card:hover .fec-card__icon { transform: scale(1.1) rotate(-6deg); background: color-mix(in srgb, var(--tc) 22%, transparent); }
.fec-card h3 { font-size: 15px; color: var(--ink-on-light); margin-bottom: 6px; }
.fec-card p { margin: 0; font-size: 13.5px; color: var(--dim-on-light); line-height: 1.55; }
.fec-card--premium { border-color: var(--blue); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--blue) 45%, rgba(16,24,43,.2)); }


/* --------------------------------------------------------------------
   8. FORM CONTROLS
   Shared input/select styling so the embed widget's form and any
   full-page form (Domain Report, Signup) look like the same product.
   -------------------------------------------------------------------- */
.fec-field {
	width: 100%; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-on-light);
	background: rgba(255,255,255,.55); border: 1px solid var(--line-on-light); border-radius: 10px;
	padding: 12px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.fec-field::placeholder { color: var(--dim-on-light); }
.fec-field:focus-visible {
	outline: none; border-color: var(--blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.fec-field:disabled { opacity: .6; cursor: not-allowed; }


/* --------------------------------------------------------------------
   9. NAV BAR
   -------------------------------------------------------------------- */
.fec-nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(10,10,34,.62); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
	border-bottom: 1px solid var(--line);
}
.fec-nav .fec-wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.fec-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.fec-brand__logo-img { height: 28px; width: auto; max-width: 160px; display: block; flex-shrink: 0; }
.fec-navlinks { display: flex; align-items: center; gap: 34px; }
.fec-navlinks a { font-size: 14px; color: var(--nav-text); text-decoration: none; font-weight: 600; transition: color .15s ease; }
.fec-navlinks a:hover { color: var(--text); }
.fec-nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: stretch; gap: 5px; width: 34px; height: 34px; padding: 0; margin: 0; background: transparent; border: none; cursor: pointer; flex-shrink: 0; }
.fec-nav-toggle span { display: block; height: 2px; width: 100%; background: var(--nav-text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease, background .2s ease; }
.fec-nav-toggle:hover span { background: var(--text); }
.fec-nav.is-open .fec-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fec-nav.is-open .fec-nav-toggle span:nth-child(2) { opacity: 0; }
.fec-nav.is-open .fec-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
	.fec-nav-toggle { display: flex; }
	.fec-navlinks {
		position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
		background: #101a30; border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.35);
		max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
		transition: max-height .25s ease, opacity .2s ease, visibility .25s ease;
	}
	.fec-nav.is-open .fec-navlinks { max-height: 80vh; overflow-y: auto; opacity: 1; visibility: visible; }
	.fec-navlinks a { display: block; padding: 15px 28px; border-top: 1px solid var(--line); }
}


/* --------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------- */
.fec-footer { background: var(--ink); color: var(--text-dim); padding: 64px 0 32px; border-top: 1px solid var(--line); position: relative; }
.fec-footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--grad-brand); }
.fec-footer-top { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.fec-footer-brand p { margin: 16px 0 0; font-size: 13.5px; color: var(--text-faint); max-width: 260px; line-height: 1.6; }
.fec-footer-col h4 { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin: 0 0 16px; font-weight: 500; }
.fec-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fec-footer-col a { font-size: 13.5px; color: var(--text-dim); text-decoration: none; }
.fec-footer-col a:hover { color: #fff; }
.fec-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); }
.fec-footer-legal { display: flex; align-items: center; gap: 22px; }
.fec-footer-legal a { font-size: 13px; color: var(--text-dim); text-decoration: none; }
.fec-footer-legal a:hover { color: var(--text); }

@media (max-width: 980px) { .fec-footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
	.fec-footer-top { grid-template-columns: 1fr; gap: 30px; }
	.fec-footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.fec-ds { scroll-behavior: auto; }
}