/* ============================================================
   i3 Base Stylesheet
   Loads on every page. Contains design tokens, typography,
   and primitives used across all four buckets (blog, core,
   case study, landing).

   Architecture rules:
   - All tokens use --i3-* prefix to avoid collision with any
     parent theme or plugin CSS variables.
   - No layout rules here. Layout lives in per-bucket files.
   - No !important except where explicitly annotated.
   - Rules scope to .i3-page descendants so unstyled parts of
     the site (admin bar, legacy widgets) stay untouched.
   ============================================================ */


/* ------------------------------------------------------------
   1. DESIGN TOKENS
   CSS custom properties. The single source of truth for every
   color, size, radius, and shadow used anywhere on the site.
   Changing a value here changes it everywhere.
   ------------------------------------------------------------ */

:root {

	/* Brand colors */
	--i3-color-navy:          #0a1f3d;
	--i3-color-navy-deep:     #061330;
	--i3-color-purple:        #5b3dbd;
	--i3-color-purple-dark:   #4a2db0;
	--i3-color-purple-mid:    #4e3ab0;
	--i3-color-purple-soft:   #ede8fa;
	--i3-color-purple-tint:   #f0eefb;

	/* Text colors */
	--i3-color-text:          #2a2a35;
	--i3-color-text-strong:   #0a1f3d;
	--i3-color-muted:         #6b6b7b;
	--i3-color-muted-light:   #888894;
	--i3-color-faint:         #9a9aa8;

	/* Surfaces and backgrounds */
	--i3-color-bg:            #ffffff;
	--i3-color-bg-soft:       #fafafd;
	--i3-color-bg-warm:       #fff8e0;
	--i3-color-surface:       #f7f8fc;

	/* Borders */
	--i3-color-border:        #e5e5ec;
	--i3-color-border-soft:   #f0f0f5;
	--i3-color-border-strong: #c4c4cf;

	/* Status colors */
	--i3-color-success:       #0a7a3a;
	--i3-color-warning:       #a85a00;
	--i3-color-danger:        #c0392b;

	/* Typography */
	--i3-font-body:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--i3-font-display:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--i3-font-mono:           "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

	/* Spacing scale. Use these values only. Arbitrary pixel
	   values in rules are a smell and will be flagged in audits. */
	--i3-space-1:             4px;
	--i3-space-2:             8px;
	--i3-space-3:             12px;
	--i3-space-4:             16px;
	--i3-space-5:             24px;
	--i3-space-6:             32px;
	--i3-space-7:             48px;
	--i3-space-8:             64px;
	--i3-space-9:             96px;

	/* Container widths */
	--i3-container-narrow:    820px;
	--i3-container-medium:    980px;
	--i3-container-wide:      1180px;
	--i3-container-full:      1440px;

	/* Border radius */
	--i3-radius-sm:           4px;
	--i3-radius-md:           8px;
	--i3-radius-lg:           12px;
	--i3-radius-xl:           16px;

	/* Shadows */
	--i3-shadow-sm:           0 1px 3px rgba(10, 31, 61, 0.06);
	--i3-shadow-md:           0 4px 12px rgba(10, 31, 61, 0.08);
	--i3-shadow-lg:           0 8px 24px rgba(10, 31, 61, 0.12);

	/* Transitions */
	--i3-transition-fast:     0.15s ease;
	--i3-transition:          0.2s ease;
	--i3-transition-slow:     0.3s ease;

	/* Z-index scale */
	--i3-z-base:              1;
	--i3-z-elevated:          10;
	--i3-z-sticky:            100;
	--i3-z-modal:             1000;

}


/* ------------------------------------------------------------
   2. BOX MODEL RESET
   Scoped to .i3-page descendants. Leaves non-i3 content alone.
   ------------------------------------------------------------ */

.i3-page,
.i3-page *,
.i3-page *::before,
.i3-page *::after {
	box-sizing: border-box;
}


/* ------------------------------------------------------------
   3. BASE TYPOGRAPHY
   Applies to all .i3-page descendants unless overridden by a
   bucket-specific rule.
   ------------------------------------------------------------ */

.i3-page {
	font-family: var(--i3-font-body);
	color: var(--i3-color-text);
	line-height: 1.6;
	font-size: 16px;
}

.i3-page h1,
.i3-page h2,
.i3-page h3,
.i3-page h4,
.i3-page h5,
.i3-page h6 {
	font-family: var(--i3-font-display);
	color: var(--i3-color-text-strong);
	letter-spacing: -0.3px;
	margin: 0;
}

.i3-page h1 {
	font-size: 36px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: var(--i3-space-4);
}

.i3-page h2 {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	margin-top: var(--i3-space-7);
	margin-bottom: var(--i3-space-4);
}

.i3-page h3 {
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	margin-top: var(--i3-space-6);
	margin-bottom: var(--i3-space-3);
}

.i3-page h4 {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	margin-top: var(--i3-space-5);
	margin-bottom: var(--i3-space-2);
}

.i3-page p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--i3-color-text);
	margin: 0 0 var(--i3-space-4);
}

.i3-page p:last-child {
	margin-bottom: 0;
}

.i3-page ul,
.i3-page ol {
	margin: 0 0 var(--i3-space-5);
	padding-left: 22px;
}

.i3-page li {
	font-size: 16px;
	line-height: 1.7;
	color: var(--i3-color-text);
	margin-bottom: var(--i3-space-2);
}

.i3-page li strong {
	color: var(--i3-color-text-strong);
}

.i3-page a {
	color: var(--i3-color-purple);
	text-decoration: underline;
	text-decoration-color: rgba(91, 61, 189, 0.4);
	text-underline-offset: 2px;
	transition: var(--i3-transition);
}

.i3-page a:hover {
	color: var(--i3-color-purple-dark);
	text-decoration-color: var(--i3-color-purple);
}

.i3-page strong {
	color: var(--i3-color-text-strong);
	font-weight: 600;
}

.i3-page blockquote {
	margin: var(--i3-space-6) 0;
	padding: var(--i3-space-4) var(--i3-space-5);
	border-left: 4px solid var(--i3-color-purple);
	background: var(--i3-color-purple-tint);
	font-size: 17px;
	font-style: italic;
}


/* ------------------------------------------------------------
   4. PAGE WRAPPERS (BUCKET CLASSES)
   Every page on the site uses one of these four classes as its
   outermost content wrapper. Layout specifics live in the
   per-bucket CSS files, not here.
   ------------------------------------------------------------ */

.i3-page {
	width: 100%;
	margin: 0 auto;
}


/* ------------------------------------------------------------
   5. SHARED PRIMITIVES: HEADER META
   Used by blog, core, and case-study buckets.
   ------------------------------------------------------------ */

.i3-breadcrumbs {
	font-size: 13px;
	color: var(--i3-color-muted);
	margin-bottom: var(--i3-space-4);
	display: flex;
	gap: var(--i3-space-2);
	flex-wrap: wrap;
}

.i3-breadcrumbs a {
	color: var(--i3-color-muted);
	text-decoration: none;
}

.i3-breadcrumbs a:hover {
	color: var(--i3-color-purple);
}

.i3-breadcrumbs .i3-sep {
	color: var(--i3-color-border-strong);
}

.i3-pill {
	display: inline-block;
	background: var(--i3-color-purple-soft);
	color: var(--i3-color-purple);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.8px;
	padding: var(--i3-space-1) var(--i3-space-3);
	border-radius: var(--i3-radius-sm);
	text-transform: uppercase;
	margin-bottom: var(--i3-space-3);
}

.i3-title {
	font-size: 36px;
	font-weight: 700;
	color: var(--i3-color-text-strong);
	line-height: 1.2;
	margin: 0 0 var(--i3-space-4);
	letter-spacing: -0.5px;
}

.i3-meta {
	font-size: 13px;
	color: var(--i3-color-muted);
	display: flex;
	gap: var(--i3-space-3);
	flex-wrap: wrap;
	align-items: baseline;
}

.i3-byline {
	font-weight: 600;
	color: var(--i3-color-text-strong);
}

.i3-sep {
	color: var(--i3-color-border-strong);
	font-weight: 400;
}


/* ------------------------------------------------------------
   6. SHARED PRIMITIVES: CALLOUTS
   Quick answer, warning, generic callout. Usable in any bucket.
   ------------------------------------------------------------ */

.i3-callout {
	background: var(--i3-color-purple-tint);
	border-left: 4px solid var(--i3-color-purple);
	padding: var(--i3-space-4) var(--i3-space-5);
	border-radius: 0 var(--i3-radius-md) var(--i3-radius-md) 0;
	margin: var(--i3-space-6) 0;
}

.i3-quick-answer {
	background: var(--i3-color-purple-tint);
	border-left: 4px solid var(--i3-color-purple);
	padding: var(--i3-space-5);
	border-radius: 0 var(--i3-radius-md) var(--i3-radius-md) 0;
	margin: var(--i3-space-6) 0;
}

.i3-quick-answer-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--i3-color-purple);
	margin-bottom: var(--i3-space-2);
}

.i3-quick-answer p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
}

.i3-warning {
	background: var(--i3-color-bg-warm);
	border-left: 4px solid var(--i3-color-warning);
	padding: var(--i3-space-4) var(--i3-space-5);
	border-radius: 0 var(--i3-radius-md) var(--i3-radius-md) 0;
	margin: var(--i3-space-5) 0;
}


/* ------------------------------------------------------------
   7. SHARED PRIMITIVES: BUTTONS
   Primary, secondary, outline. Used in every bucket.
   ------------------------------------------------------------ */

.i3-btn {
	display: inline-block;
	padding: var(--i3-space-3) var(--i3-space-6);
	border-radius: var(--i3-radius-sm);
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	letter-spacing: 0.3px;
	transition: var(--i3-transition);
	cursor: pointer;
	border: none;
}

.i3-btn--primary {
	background: white;
	color: var(--i3-color-purple);
}

.i3-btn--primary:hover {
	background: var(--i3-color-purple-soft);
	transform: translateY(-1px);
	box-shadow: var(--i3-shadow-md);
}

.i3-btn--secondary {
	background: var(--i3-color-purple);
	color: white;
}

.i3-btn--secondary:hover {
	background: var(--i3-color-purple-dark);
	transform: translateY(-1px);
}

.i3-btn--outline {
	background: transparent;
	color: var(--i3-color-purple);
	border: 2px solid var(--i3-color-purple);
}

.i3-btn--outline:hover {
	background: var(--i3-color-purple);
	color: white;
}


/* ------------------------------------------------------------
   8. SHARED PRIMITIVES: CTA BLOCK
   Dark-background CTA. Used in blog and core buckets.
   ------------------------------------------------------------ */

.i3-cta {
	background: linear-gradient(135deg, var(--i3-color-navy), var(--i3-color-navy-deep));
	color: white;
	padding: var(--i3-space-7) var(--i3-space-6);
	border-radius: var(--i3-radius-lg);
	text-align: center;
	margin: var(--i3-space-7) 0;
}

.i3-cta-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--i3-space-2);
}

.i3-cta-title {
	font-size: 24px;
	font-weight: 700;
	color: white;
	margin: 0 0 var(--i3-space-3);
	line-height: 1.3;
}

.i3-cta-body {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	max-width: 560px;
	margin: 0 auto var(--i3-space-5);
}


/* ------------------------------------------------------------
   9. SHARED PRIMITIVES: TRUST STRIP
   E-E-A-T signals (Microsoft Partner, years in business,
   client logos). Used in home, core, and blog buckets.
   ------------------------------------------------------------ */

.i3-trust-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--i3-space-5);
	padding: var(--i3-space-5) var(--i3-space-4);
	background: var(--i3-color-bg-soft);
	border-radius: var(--i3-radius-md);
	margin: var(--i3-space-6) 0;
	font-size: 13px;
	color: var(--i3-color-muted);
}

.i3-trust-strip-item {
	display: flex;
	align-items: center;
	gap: var(--i3-space-2);
}

.i3-trust-badge {
	display: inline-block;
	padding: var(--i3-space-1) var(--i3-space-3);
	background: var(--i3-color-purple-soft);
	color: var(--i3-color-purple);
	border-radius: var(--i3-radius-sm);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}


/* ------------------------------------------------------------
   10. SHARED PRIMITIVES: AUTHOR STRIP
   Bottom-of-article author attribution. Used in blog and core.
   ------------------------------------------------------------ */

.i3-author-strip {
	margin: var(--i3-space-7) 0 0;
	padding: var(--i3-space-5) 0;
	border-top: 1px solid var(--i3-color-border);
	display: flex;
	gap: var(--i3-space-4);
	align-items: center;
	flex-wrap: wrap;
}

.i3-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--i3-color-purple-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--i3-color-purple);
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
}

.i3-author-name {
	font-weight: 600;
	color: var(--i3-color-text-strong);
	font-size: 15px;
}

.i3-author-role {
	font-size: 13px;
	color: var(--i3-color-muted);
}

.i3-author-bio {
	font-size: 13px;
	color: var(--i3-color-muted);
	line-height: 1.6;
	margin-top: var(--i3-space-2);
}


/* ------------------------------------------------------------
   11. SHARED PRIMITIVES: FAQ ACCORDION
   Native <details>/<summary> pattern. No JavaScript required.
   ------------------------------------------------------------ */

.i3-faq details {
	border: 1px solid var(--i3-color-border);
	border-radius: var(--i3-radius-md);
	padding: var(--i3-space-4) var(--i3-space-5);
	margin-bottom: var(--i3-space-3);
	background: var(--i3-color-bg);
}

.i3-faq summary {
	font-weight: 600;
	color: var(--i3-color-text-strong);
	cursor: pointer;
	list-style: none;
	font-size: 15.5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.i3-faq summary::-webkit-details-marker {
	display: none;
}

.i3-faq summary::after {
	content: "+";
	font-size: 22px;
	color: var(--i3-color-purple);
	font-weight: 300;
	transition: transform var(--i3-transition);
	line-height: 1;
}

.i3-faq details[open] summary::after {
	transform: rotate(45deg);
}

.i3-faq details[open] summary {
	margin-bottom: var(--i3-space-3);
	padding-bottom: var(--i3-space-3);
	border-bottom: 1px solid var(--i3-color-border-soft);
}


/* ------------------------------------------------------------
   12. UTILITY CLASSES
   Kept deliberately minimal. Prefer semantic component classes
   over utilities for most layout work.
   ------------------------------------------------------------ */

.i3-narrow {
	max-width: var(--i3-container-narrow);
	margin-left: auto;
	margin-right: auto;
}

.i3-wide {
	max-width: var(--i3-container-wide);
	margin-left: auto;
	margin-right: auto;
}

.i3-center { text-align: center; }
.i3-left   { text-align: left; }
.i3-right  { text-align: right; }

.i3-mt-1 { margin-top: var(--i3-space-1); }
.i3-mt-2 { margin-top: var(--i3-space-2); }
.i3-mt-3 { margin-top: var(--i3-space-3); }
.i3-mt-4 { margin-top: var(--i3-space-4); }
.i3-mt-5 { margin-top: var(--i3-space-5); }
.i3-mt-6 { margin-top: var(--i3-space-6); }
.i3-mt-7 { margin-top: var(--i3-space-7); }
.i3-mt-8 { margin-top: var(--i3-space-8); }

.i3-mb-1 { margin-bottom: var(--i3-space-1); }
.i3-mb-2 { margin-bottom: var(--i3-space-2); }
.i3-mb-3 { margin-bottom: var(--i3-space-3); }
.i3-mb-4 { margin-bottom: var(--i3-space-4); }
.i3-mb-5 { margin-bottom: var(--i3-space-5); }
.i3-mb-6 { margin-bottom: var(--i3-space-6); }
.i3-mb-7 { margin-bottom: var(--i3-space-7); }
.i3-mb-8 { margin-bottom: var(--i3-space-8); }

.i3-hidden { display: none; }

/* Screen-reader-only content. Visible to assistive tech, hidden visually. */
.i3-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ------------------------------------------------------------
   13. WPAUTOP GUARDS
   WordPress auto-formatting wraps anchors and short content in
   <p> tags, which breaks grid and flex layouts. These rules
   neutralize the damage without disabling wpautop globally.
   ------------------------------------------------------------ */

/* Where wpautop wraps an inline anchor in <p> inside a grid cell,
   pass through rather than break layout. */
.i3-page .i3-related-grid-cards > p,
.i3-page .i3-related-card-inner > p {
	display: contents;
	margin: 0;
	padding: 0;
}

/* Hide empty <p> tags that wpautop inserts between block-level siblings. */
.i3-page .i3-related-grid-cards > p:empty,
.i3-page .i3-related-card-inner > p:empty {
	display: none;
}


/* ------------------------------------------------------------
   14. COMMENTS SUPPRESSED SITEWIDE
   Comments are a B2B trust drag and are not used on i3solutions.
   This is the only place in the codebase where !important is
   used. Justification: themes and plugins commonly re-enable
   comment areas through high-specificity rules; we need a force
   override. The rule is scoped to known comment-area selectors.
   Do not copy this !important pattern for other concerns.
   ------------------------------------------------------------ */

#comments,
#respond,
.comments-area,
.comment-form,
.comment-respond,
#reply-title,
.comments-title {
	display: none !important;
}


/* ------------------------------------------------------------
   15. RESPONSIVE BASE
   Typography scales down on narrow viewports. Bucket files add
   their own layout breakpoints on top of this.
   ------------------------------------------------------------ */

@media (max-width: 640px) {

	.i3-page h1,
	.i3-title {
		font-size: 28px;
	}

	.i3-page h2 {
		font-size: 22px;
	}

	.i3-page h3 {
		font-size: 18px;
	}

	.i3-meta {
		gap: var(--i3-space-2);
	}

	.i3-cta {
		padding: var(--i3-space-5) var(--i3-space-4);
	}

	.i3-trust-strip {
		flex-direction: column;
		gap: var(--i3-space-3);
	}

}


/* ============================================================
   END of i3-base.css
   Next: /css/i3-blog.css for blog bucket layout and components.
   ============================================================ */