/* ==========================================================================
   C2 COMPONENTS — single source of truth for the custom HTML sections.
   Namespaced `c2-` to avoid collisions. Assumes self-hosted Inter (body) +
   Sora (headings). Enqueue AFTER plugin CSS (see snippet at the bottom) so
   .c2-btn wins the cascade without needing extra specificity.

   Hero rule: every hero uses .c2-hero, which sets padding-top to
   --c2-hero-pad-top (8%). Because the top padding and the eyebrow→title
   structure are identical, hero TITLES sit at the same height on every page.
   ========================================================================== */

/* --- Design tokens -------------------------------------------------------- */
:root {
	--c2-indigo:#1b1147; --c2-mid:#141038; --c2-navy-deep:#0a0629;
	--c2-pink:#c2156e;   --c2-pink-hover:#a5115d; --c2-accent:#ff4d94; --c2-blue:#3e64de;
	--c2-ink:#f4f6fb;    --c2-muted:#aab4c8; --c2-faint:#8791a6; --c2-eyebrow:#f0b6d6;
	--c2-meta:#6b7280;   /* muted grey that still passes AA (4.83:1) on white */
	--c2-line:rgba(255,255,255,.12);
	--c2-radius:12px; --c2-radius-pill:999px;
	--c2-font-heading:'Sora',sans-serif; --c2-font-body:'Inter',system-ui,sans-serif;
	--c2-hero-pad-top:8%;      /* unified top padding => hero titles align across pages */
}

/* --- Unified button (add class "c2-btn" to any CTA) ----------------------- */
.c2-btn, .c2-btn:visited {
	display:inline-block; background-color:var(--c2-pink) !important; color:#fff !important;
	font-family:inherit; font-weight:700 !important; font-size:1rem !important; line-height:1.2 !important;
	padding:14px 30px !important; border:none !important; border-radius:var(--c2-radius-pill) !important;
	text-decoration:none !important; text-align:center; cursor:pointer; box-shadow:none !important;
	transition:background-color .15s ease;
}
.c2-btn:hover, .c2-btn:focus { background-color:var(--c2-pink-hover) !important; color:#fff !important; }

/* --- Hero: base (shared by EVERY hero section) ---------------------------- */
.c2-hero {
	position:relative; overflow:hidden; width:100%; text-align:center;
	font-family:var(--c2-font-body); color:var(--c2-ink);
	background:
		radial-gradient(55% 70% at 50% 4%, rgba(214,60,140,.20), transparent 60%),
		linear-gradient(120deg, transparent 42%, rgba(0,0,0,.42) 100%),
		linear-gradient(180deg, var(--c2-indigo) 0%, var(--c2-mid) 52%, var(--c2-navy-deep) 100%);
	padding: var(--c2-hero-pad-top) clamp(18px,5vw,64px) clamp(56px,7vw,100px);
}
.c2-hero * { box-sizing:border-box; }
.c2-hero__inner { max-width:820px; margin:0 auto; position:relative; z-index:2; }
.c2-hero__eyebrow {
	display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.14em;
	text-transform:uppercase; color:var(--c2-eyebrow); background:rgba(255,255,255,.06);
	border:1px solid var(--c2-line); padding:7px 14px; border-radius:100px; margin-bottom:22px;
}
.c2-hero__eyebrow a { color:inherit; text-decoration:none; }
.c2-hero__dot { width:6px; height:6px; border-radius:50%; background:var(--c2-accent); }
.c2-hero__title {
	font-family:var(--c2-font-heading); font-weight:700; font-size:clamp(30px,4.6vw,54px);
	line-height:1.05; letter-spacing:-.025em; margin:0 auto 18px; max-width:900px; color:var(--c2-ink);
}
.c2-hero__grad {
	background:linear-gradient(90deg,#fff 0%,#f6c3dd 55%,#c9b6ff 100%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
.c2-hero__sub { font-size:clamp(15px,1.35vw,18px); line-height:1.6; color:var(--c2-muted); max-width:620px; margin:0 auto; }
.c2-hero__cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:30px; }
.c2-hero__micro { font-size:13.5px; color:var(--c2-faint); margin:14px 0 0; }
.c2-hero__micro b { color:#c3cdde; font-weight:600; }

/* --- Hero: trust strip ---------------------------------------------------- */
.c2-hero__trust {
	position:relative; z-index:2; display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center;
	gap:12px 20px; margin-top:36px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
	border-radius:14px; padding:14px 22px; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
.c2-hero__visual + .c2-hero__trust { margin-top:clamp(40px,5vw,56px); } /* clears the promo on the homepage */
.c2-hero__ti { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#e7ecf5; }
.c2-hero__stars { display:inline-flex; gap:2px; color:var(--c2-pink); }
.c2-hero__stars svg { width:14px; height:14px; display:block; }
.c2-hero__ti svg { width:17px; height:17px; color:var(--c2-pink); }
.c2-hero__sep { width:1px; height:18px; background:rgba(255,255,255,.16); }
.c2-hero__lead { color:#c9d3df; }

/* --- Hero: product preview (homepage only) -------------------------------- */
.c2-hero__visual { position:relative; max-width:1000px; margin:clamp(40px,6vw,64px) auto 0; z-index:2; }
.c2-hero__browser { border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.09); box-shadow:0 44px 90px -24px rgba(0,0,0,.7); background:#0e1530; }
.c2-hero__tabs { display:flex; align-items:center; gap:8px; padding:9px 14px 0; background:#0a0f26; }
.c2-hero__tabs i { width:11px; height:11px; border-radius:50%; display:block; }
.c2-hero__tab { display:inline-flex; align-items:center; gap:7px; background:#0e1530; color:#c9d0e6; font-size:11.5px; padding:7px 13px; border-radius:8px 8px 0 0; white-space:nowrap; margin-left:6px; }
.c2-hero__fav { width:15px; height:15px; border-radius:4px; object-fit:cover; flex:0 0 auto; display:block; }
.c2-hero__app { background:#f4f6fb; color:#1c2333; text-align:left; }
.c2-hero__apptop { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:#fff; border-bottom:1px solid #e9ecf3; }
.c2-hero__appname { font-family:var(--c2-font-heading); font-weight:600; font-size:13.5px; color:#20264a; }
.c2-hero__appuser { display:flex; align-items:center; gap:9px; font-size:12.5px; color:#5c6580; }
.c2-hero__avatar { width:26px; height:26px; border-radius:50%; background:var(--c2-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:600; }
.c2-hero__appbody { display:grid; grid-template-columns:52px 1fr; min-height:300px; }
.c2-hero__rail { background:#101636; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 0; }
.c2-hero__ri { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#aeb6d8; }
.c2-hero__ri.is-on { background:var(--c2-blue); color:#fff; }
.c2-hero__ri svg { width:16px; height:16px; }
.c2-hero__panels { display:grid; grid-template-columns:1fr 1.15fr; gap:14px; padding:16px; }
.c2-hero__panel { background:#fff; border:1px solid #e9ecf3; border-radius:11px; padding:14px; }
.c2-hero__ptitle { font-family:var(--c2-font-heading); font-weight:600; font-size:13.5px; color:#20264a; margin-bottom:2px; }
.c2-hero__pcap { font-size:10.5px; color:#565e6b; margin-bottom:10px; }
.c2-hero__legend { display:flex; align-items:center; gap:6px; font-size:10.5px; color:#5c6580; margin-bottom:8px; }
.c2-hero__sw { width:9px; height:9px; border-radius:3px; background:var(--c2-blue); }
.c2-hero__chart { display:flex; align-items:flex-end; gap:9px; height:104px; padding:8px 4px 0; border-left:1px solid #eceef5; border-bottom:1px solid #eceef5; }
.c2-hero__bar { flex:1; border-radius:4px 4px 0 0; background:var(--c2-blue); }
.c2-hero__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.c2-hero__stat { background:#f7f8fc; border:1px solid #eef0f6; border-radius:9px; padding:10px 12px; }
.c2-hero__statn { font-family:var(--c2-font-heading); font-weight:700; font-size:20px; color:#20264a; line-height:1; }
.c2-hero__statl { font-size:10px; color:#565e6b; margin-top:5px; }
.c2-hero__psub { font-family:var(--c2-font-heading); font-weight:600; font-size:12px; color:#3a4160; margin:2px 0 8px; }
.c2-hero__tbl { border:1px solid #eef0f6; border-radius:9px; overflow:hidden; }
.c2-hero__tr { display:grid; grid-template-columns:1.8fr .9fr .7fr .7fr; padding:9px 12px; font-size:11px; border-bottom:1px solid #f2f3f8; align-items:center; }
.c2-hero__tr.is-head { background:#fafbfe; color:#565e6b; font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:9.5px; }
.c2-hero__role { color:#4a3ec8; font-weight:600; }

/* --- Hero: HRIS promo card (homepage) ------------------------------------- */
.c2-hero__promo { position:absolute; bottom:20px; right:-18px; width:238px; background:#0d1226; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:22px 20px; text-align:center; box-shadow:0 34px 66px -20px rgba(0,0,0,.65); z-index:5; }
.c2-hero__promo-title { font-family:var(--c2-font-heading); font-weight:700; font-size:42px; letter-spacing:-.02em; line-height:1; color:#fff; margin:0 0 14px; }
.c2-hero__promo p { font-size:14px; line-height:1.45; color:#aeb8cc; margin:0 0 22px; }
.c2-hero__promo a { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:600; font-size:13.5px; padding:11px 18px; border-radius:10px; text-decoration:none; }
.c2-hero__promo a:hover { background:rgba(255,255,255,.08); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:720px) {
	.c2-hero { --c2-hero-pad-top:88px; }   /* fixed floor: 8%-of-width is too tight on phones */
	.c2-hero__panels { grid-template-columns:1fr; }
	.c2-hero__promo { position:static; width:auto; right:auto; bottom:auto; margin:16px auto 0; max-width:320px; }
}
@media (max-width:420px) {
	.c2-hero { --c2-hero-pad-top:80px; }
}

/* ==========================================================================
   BLOG / EDITORIAL — HR Insights hub, category archives, single posts.
   Shared by page-hr-insights.php, archive.php, single.php.
   ========================================================================== */

/* Vertical rhythm — add class "c2-listing" to the .container wrapper */
.c2-listing { padding-top:4%; padding-bottom:4%; }

/* Breadcrumbs */
.c2-breadcrumbs { font-size:.9rem; margin:24px 0 8px; color:#666; }
.c2-breadcrumbs a { color:#666; text-decoration:none; }
.c2-breadcrumbs a:hover { text-decoration:underline; }
.c2-breadcrumbs .sep { margin:0 8px; color:#bbb; }
.c2-breadcrumbs .current { color:#222; font-weight:600; }

/* Archive intro (optional category description) */
.c2-archive-intro { margin:0 auto; padding:20px 0; max-width:760px; color:#555; font-size:1.05rem; line-height:1.6; text-align:center; }

/* Category filter pills (hub) */
.c2-cat-filter { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 36px; }
.c2-cat-pill { display:inline-block; padding:8px 18px; border-radius:var(--c2-radius-pill); border:1px solid #e2e2e2; background:#fff; color:#333; font-size:.9rem; font-weight:600; text-decoration:none; transition:border-color .15s ease,color .15s ease,background .15s ease; }
.c2-cat-pill:hover { border-color:var(--c2-pink); color:var(--c2-pink); }
.c2-cat-pill.is-active { background:var(--c2-pink); border-color:var(--c2-pink); color:#fff; }

/* Card grid (hub + archive) and related-posts grid (single) share one look */
.c2-card-list { margin:24px 0; }
.c2-card-grid, .c2-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.c2-card, .c2-related-card { position:relative; display:block; border:1px solid #ececec; border-radius:var(--c2-radius); overflow:hidden; background:#fff; transition:box-shadow .2s ease,transform .2s ease; color:inherit; text-decoration:none; }
.c2-card:hover, .c2-related-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.08); transform:translateY(-2px); }
.c2-card-thumb, .c2-related-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#f5f5f5; }
.c2-card-badge, .c2-related-badge { position:absolute; top:10px; right:10px; z-index:2; background:rgba(14,27,44,.9); color:#fff; font-size:.68rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px; border-radius:var(--c2-radius-pill); }
.c2-card-body, .c2-related-body { display:block; padding:12px 14px 16px; text-align:center; }
.c2-card-body h3, .c2-related-body h3 { font-size:1.05rem; line-height:1.35; margin:0 0 8px; }
.c2-card-date, .c2-related-date { font-size:.8rem; color:var(--c2-meta); }
.c2-card-excerpt { display:block; font-size:.9rem; color:#555; line-height:1.5; margin:8px 0 0; }
.c2-related { margin:56px 0 24px; }
.c2-related h2 { font-size:1.6rem; margin-bottom:24px; }

/* Pagination */
.c2-pagination { margin:40px 0 8px; }
.c2-pagination .nav-links { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.c2-pagination .page-numbers { display:inline-block; min-width:40px; padding:8px 12px; text-align:center; border:1px solid #e2e2e2; border-radius:8px; text-decoration:none; color:#333; }
.c2-pagination .page-numbers.current { background:var(--c2-pink); color:#fff; border-color:var(--c2-pink); }
.c2-pagination .page-numbers:hover:not(.current) { background:#f5f7fa; }

/* Post tags (single) — distinct blue taxonomy pills */
.c2-post-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:40px 0 0; padding:0; }
.c2-tag-pill, a.c2-tag-pill, a.c2-tag-pill:visited { display:inline-block; padding:5px 16px; background:#1e3a8a; color:#fff; border-radius:40px; font-size:.8125em; font-weight:500; text-decoration:none; white-space:nowrap; transition:background .15s ease,opacity .15s ease; }
.c2-tag-pill:hover { background:#0f766e; color:#fff; text-decoration:none; }

/* Featured image (single) */
.c2-post-featured { margin:0 0 8px; }
.c2-post-featured img { width:100%; height:auto; border-radius:14px; display:block; }

/* Bottom CTA (hub + archive + single) */
.c2-post-cta { margin:48px 0 8px; padding:36px 28px; border-radius:16px; background:#0e1b2c; color:#fff; text-align:center; }
.c2-post-cta h2 { color:#fff; font-size:1.5rem; margin:0 0 8px; }
.c2-post-cta p { color:#d7dde5; margin:0 0 20px; }
.c2-post-cta .c2-cta-btn { display:inline-block; padding:14px 28px; border-radius:var(--c2-radius-pill); background:#fff; color:#0e1b2c; font-weight:700; text-decoration:none; }
.c2-post-cta .c2-cta-btn:hover { opacity:.9; }

/* Single: article + content fill the column (theme caps reading width) */
.c2-single #main article,
.c2-single #main .entry-content { max-width:100% !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; }
.c2-single #main .entry-content { text-align:left; }
.c2-single #main .entry-content > * { max-width:100%; margin-left:0; margin-right:0; }

/* Responsive grids */
@media (max-width:900px) { .c2-card-grid, .c2-related-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .c2-card-grid, .c2-related-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   ACCESSIBILITY — WCAG AA contrast fixes for non-hero components (homepage).
   These target plugin / builder output, so they use !important + are enqueued
   after plugin CSS (priority 20) to win the cascade.
   ========================================================================== */

/* Kill the legacy #e51c73 pink (4.42:1) — unify to --c2-pink (white = 5.8:1).
   Covers the before/after bar, category badges, pricing badge, GF submit. */
.c2ba-btn,
.c2ba-after .c2ba-tag,
.c2badge,
.uagb-post__taxonomy.highlighted,
.uagb-post__taxonomy.highlighted a,
.gform_wrapper .gform-button,
#gform_submit_button_1 {
	background-color:var(--c2-pink) !important;
	color:#fff !important;
	border-color:var(--c2-pink) !important;
}

/* Grey meta text on near-white backgrounds — darken to pass 4.5:1.
   Reviewkit author/time, pricing toggle, and the "Without C2" tag. */
.gutensuite-reviewkit-reviews__item-author,
.gutensuite-reviewkit-reviews__item-time,
.c2tg-y,
.c2ba-before .c2ba-tag {
	color:#565e6b !important;
}

/* ==========================================================================
   HEADER — mobile nav: hide the logo, put the hamburger on the left.
   Applies below the navbar's collapse breakpoint (Bootstrap lg = 992px).
   Confirm the logo selector against your header markup; add/remove as needed.
   ========================================================================== */
@media (max-width: 991.98px) {
	.navbar-brand,
	.site-header .navbar-brand,
	.site-logo,
	header .custom-logo-link,
	header .site-branding { display:none !important; }

	.navbar-toggler { order:-1; margin-left:0 !important; margin-right:auto !important; }
}