/* ===================================
   Unified Theme CSS for Email to Web
   =================================== */

/* Root color variables - Default to dark mode */
:root,
body,
body.theme-dark {
	/* Dark mode colors (default) */
	--bg-primary: #000;
	--bg-secondary: #111;
	--bg-tertiary: #222;
	--bg-footer: #1d1d1f;

	--text-primary: #f5f5f7;
	--text-secondary: #d2d2d7;
	--text-muted: #86868b;
	--text-footer: #6e6e73;
	--text-footer-link: #a1a1a6;
	--text-light-gray: #a1a1a6;
	--text-gray-666: #666;

	--border-primary: #333;
	--border-secondary: #424245;

	--link-primary: #2997ff;
	--link-footer: #86868b;
	--accent-orange: #ff791b;
}

/* Light mode colors */
body.theme-light {
	--bg-primary: #fff;
	--bg-secondary: #f5f5f7;
	--bg-tertiary: #fbfbfd;
	--bg-footer: #f5f5f7;

	--text-primary: #1d1d1f;
	--text-secondary: #424245;
	--text-muted: #6e6e73;
	--text-footer: #6e6e73;
	--text-footer-link: #424245;
	--text-light-gray: #515154;
	--text-gray-666: #666;

	--border-primary: #d2d2d7;
	--border-secondary: #86868b;

	--link-primary: #0066cc;
	--link-footer: #86868b;
	--accent-orange: #ff6000;
}

/* ===================================
   Override inline styles - Using attribute selectors
   =================================== */

/* Base container backgrounds */
body,
main,
.desktop-container,
.mobile-container {
	background-color: var(--bg-primary) !important;
}

/* ===================================
   Dark Mode Background Overrides
   =================================== */

/* Primary backgrounds (black) */
body.theme-dark main .dark,
body.theme-dark main [style*="background-color: #000"],
body.theme-dark main [style*="background-color: #000000"],
body.theme-dark main [style*="background-color:#000"],
body.theme-dark main [style*="background-color:#000000"],
body.theme-dark main [style*="background-color: black"],
body.theme-dark main [style*="background-color:black"] {
	background-color: var(--bg-primary) !important;
}

/* Secondary backgrounds (dark gray) */
body.theme-dark main [style*="background-color: #111"],
body.theme-dark main [style*="background-color: #111111"],
body.theme-dark main [style*="background-color:#111"],
body.theme-dark main [style*="background-color:#111111"] {
	background-color: var(--bg-secondary) !important;
}

/* Tertiary backgrounds (medium gray) */
body.theme-dark main [style*="background-color: #222"],
body.theme-dark main [style*="background-color: #222222"],
body.theme-dark main [style*="background-color:#222"],
body.theme-dark main [style*="background-color:#222222"] {
	background-color: var(--bg-tertiary) !important;
}

/* Mobile backgronds */
body.theme-dark main .mobile-container .light,
body.theme-dark main .mobile-container .dark {
	background-color: var(--bg-tertiary) !important;
}

/* ===================================
   Light Mode Background Overrides
   =================================== */

/* Primary backgrounds (white) */
body.theme-light main .light,
body.theme-light main [style*="background-color: #fff"],
body.theme-light main [style*="background-color: #ffffff"],
body.theme-light main [style*="background-color:#fff"],
body.theme-light main [style*="background-color:#ffffff"],
body.theme-light main [style*="background-color: white"],
body.theme-light main [style*="background-color:white"] {
	background-color: var(--bg-primary) !important;
}

/* Mobile backgronds */
body.theme-light main .mobile-container .light,
body.theme-light main .mobile-container .dark {
	background-color: var(--bg-secondary) !important;
}

/* Secondary backgrounds (light gray) */
body.theme-light main [style*="background-color: #f5f5f7"],
body.theme-light main [style*="background-color:#f5f5f7"] {
	background-color: var(--bg-secondary) !important;
}

/* Footer backgrounds - both modes */
/* .footer,
.m-footer,
.footer-dark,
.footer-light,
.shared-footer,
[style*="background-color: #1d1d1f"],
[style*="background-color:#1d1d1f"] {
	background-color: var(--bg-footer) !important;
} */

/* ===================================
   Text Color Overrides - Using attribute selectors
   =================================== */

/* Headers and primary text */
body.theme-dark main h1,
body.theme-dark main h2,
body.theme-dark main h3,
body.theme-dark main h4,
body.theme-dark main h5,
body.theme-dark main h6,
body.theme-dark main .headline,
body.theme-dark main .eyebrow,
body.theme-dark main .eyebrow-super,
body.theme-dark main .eyebrow-header,
body.theme-dark main .body-header {
	color: var(--text-primary) !important;
}

body.theme-light main h1,
body.theme-light main h2,
body.theme-light main h3,
body.theme-light main h4,
body.theme-light main h5,
body.theme-light main h6,
body.theme-light main .headline,
body.theme-light main .eyebrow,
body.theme-light main .eyebrow-super,
body.theme-light main .eyebrow-header,
body.theme-light main .body-header {
	color: var(--text-primary) !important;
}

/* Dark mode text colors */
body.theme-dark main [style*="color: #f5f5f7"],
body.theme-dark main [style*="color:#f5f5f7"],
body.theme-dark main [style*="color: #ffffff"],
body.theme-dark main [style*="color:#ffffff"],
body.theme-dark main [style*="color: #fff"],
body.theme-dark main [style*="color:#fff"],
body.theme-dark main [style*="color: white"],
body.theme-dark main [style*="color:white"] {
	color: var(--text-primary) !important;
}

/* Light mode text colors */
body.theme-light main [style*="color: #1d1d1f"],
body.theme-light main [style*="color:#1d1d1f"],
body.theme-light main [style*="color: #000"],
body.theme-light main [style*="color:#000"],
body.theme-light main [style*="color: #000000"],
body.theme-light main [style*="color:#000000"],
body.theme-light main [style*="color: black"],
body.theme-light main [style*="color:black"] {
	color: var(--text-primary) !important;
}

/* Secondary text colors */
body.theme-dark main [style*="color: #d2d2d7"],
body.theme-dark main [style*="color:#d2d2d7"] {
	color: var(--text-secondary) !important;
}

body.theme-light main [style*="color: #424245"],
body.theme-light main [style*="color:#424245"] {
	color: var(--text-secondary) !important;
}

/* Muted text colors - common across themes */
[style*="color: #86868b"],
[style*="color:#86868b"],
[style*="color: #6e6e73"],
[style*="color:#6e6e73"],
[style*="color: #686b70"],
[style*="color:#686b70"] {
	color: var(--text-muted) !important;
}

/* Gray 666 text */
[style*="color: #666"],
[style*="color:#666"],
[style*="color: #666666"],
[style*="color:#666666"] {
	color: var(--text-gray-666) !important;
}

/* Links */
body.theme-dark main a:not([class*="cta"]),
body.theme-dark main [style*="color: #2997ff"],
body.theme-dark main [style*="color:#2997ff"] {
	color: var(--link-primary) !important;
}

body.theme-light main a:not([class*="cta"]),
body.theme-light main [style*="color: #0066cc"],
body.theme-light main [style*="color:#0066cc"],
body.theme-light main [style*="color: #06c"],
body.theme-light main [style*="color:#06c"] {
	color: var(--link-primary) !important;
}

body.theme-dark main .light h1 a,
body.theme-dark main .light h2 a,
body.theme-dark main .light h3 a,
body.theme-dark main .light h4 a,
body.theme-dark main .light h5 a,
body.theme-dark main .light h6 a,
body.theme-dark main .light .copy p a,
body.theme-dark main .light a.copy,
body.theme-dark main .light a.t-body,
body.theme-light main .dark h1 a,
body.theme-light main .dark h2 a,
body.theme-light main .dark h3 a,
body.theme-light main .dark h4 a,
body.theme-light main .dark h5 a,
body.theme-light main .dark h6 a,
body.theme-light main .dark .copy p a body.theme-light main .dark a.copy,
body.theme-light main .dark a.t-body {
	color: var(--link-primary) !important;
}

/* CTA links - preserve their colors */
main .cta,
main a.cta {
	color: var(--link-primary) !important;
}

/* Accent colors */
[style*="color: #ff791b"],
[style*="color:#ff791b"],
[style*="color: #ff6000"],
[style*="color:#ff6000"] {
	color: var(--accent-orange) !important;
}

/* ===================================
   Border Color Overrides
   =================================== */

/* Dark mode borders */
body.theme-dark main [style*="border-color: #333"],
body.theme-dark main [style*="border-color:#333"],
body.theme-dark main [style*="border-color: #333333"],
body.theme-dark main [style*="border-color:#333333"],
body.theme-dark main .keyline,
body.theme-dark main .keyline div,
body.theme-dark main .keyline td {
	border-color: var(--border-primary) !important;
}

body.theme-dark main [style*="border-color: #424245"],
body.theme-dark main [style*="border-color:#424245"] {
	border-color: var(--border-secondary) !important;
}

/* Light mode borders */
body.theme-light main [style*="border-color: #d2d2d7"],
body.theme-light main [style*="border-color:#d2d2d7"],
body.theme-light main .keyline,
body.theme-light main .keyline div,
body.theme-light main .keyline td {
	border-color: var(--border-primary) !important;
}

body.theme-light main [style*="border-color: #86868b"],
body.theme-light main [style*="border-color:#86868b"] {
	border-color: var(--border-secondary) !important;
}

/* ===================================
   Specific Element Overrides
   =================================== */

/* Footer specific */
.sfcopy,
.sfcopy p,
.sflinks,
.sflinks p,
.sflinks .vert,
.tmcopy {
	color: var(--text-muted) !important;
}

.sflinks a,
.sfnav a {
	color: var(--text-footer-link) !important;
}

/* Copy text paragraphs */
.copy p,
.t-body {
	color: inherit;
}

/* Ensure proper font weights */
.outBold,
p.outBold {
	font-weight: 900 !important;
}

.outSemiBold,
p.outSemiBold {
	font-weight: 600 !important;
}

/* ===================================
   Handle Mixed Mode Emails
   =================================== */

/* When a light mode email is viewed in dark mode */
body.theme-dark main .light {
	background-color: var(--bg-tertiary) !important;
}

body.theme-dark main .light h1,
body.theme-dark main .light h2,
body.theme-dark main .light h3,
body.theme-dark main .light h4,
body.theme-dark main .light h5,
body.theme-dark main .light h6,
body.theme-dark main .light .copy p,
body.theme-dark main .light .t-body {
	color: var(--text-primary) !important;
}

/* When a dark mode email is viewed in light mode */
body.theme-light main .dark {
	background-color: var(--bg-primary) !important;
}

body.theme-light main .dark h1,
body.theme-light main .dark h2,
body.theme-light main .dark h3,
body.theme-light main .dark h4,
body.theme-light main .dark h5,
body.theme-light main .dark h6,
body.theme-light main .dark .copy p,
body.theme-light main .dark .t-body {
	color: var(--text-primary) !important;
}

/* ===================================
   Main container overrides of background-color
   =================================== */
/* make every flat white container green, but leave rounded cards alone */
body.theme-light
	#main
	> div
	> table
	> tbody
	> tr:nth-child(1)
	> td
	> div
	> table
	> tbody
	> tr
	> td
	> table
	> tbody
	> tr
	> td,
body.theme-light .mobile-container .row {
	background-color: var(--bg-secondary) !important;
}
body.theme-dark
	#main
	> div
	> table
	> tbody
	> tr:nth-child(1)
	> td
	> div
	> table
	> tbody
	> tr
	> td
	> table
	> tbody
	> tr
	> td,
body.theme-dark .mobile-container .row {
	background-color: var(--bg-tertiary) !important;
}

/* ===================================
   Important Overrides for Stubborn Elements
   =================================== */
/* Double specificity for really stubborn inline styles */
body.theme-dark main [style*="background-color"][style*="#fff"],
body.theme-dark main [style*="background-color"][style*="#ffffff"],
body.theme-dark main [style*="background-color"][style*="white"],
body.theme-dark main td[style*="background-color: #fff"],
body.theme-dark main td[style*="background-color: #ffffff"],
body.theme-dark main table[style*="background-color: #fff"],
body.theme-dark main table[style*="background-color: #ffffff"] {
	background-color: var(--bg-primary) !important;
}

body.theme-dark main [style*="background-color"][style*="#f5f5f7"],
body.theme-dark main td[style*="background-color: #f5f5f7"],
body.theme-dark main table[style*="background-color: #f5f5f7"] {
	background-color: var(--bg-tertiary) !important;
}

body.theme-light main [style*="background-color"][style*="#000"],
body.theme-light main [style*="background-color"][style*="#000000"],
body.theme-light main [style*="background-color"][style*="black"],
body.theme-light main td[style*="background-color: #000"],
body.theme-light main td[style*="background-color: #000000"],
body.theme-light main table[style*="background-color: #000"],
body.theme-light main table[style*="background-color: #000000"] {
	background-color: var(--bg-primary) !important;
}

body.theme-light main [style*="background-color"][style*="#222"],
body.theme-light main [style*="background-color"][style*="#222222"],
body.theme-light main td[style*="background-color: #222"],
body.theme-light main td[style*="background-color: #222222"],
body.theme-light main table[style*="background-color: #222"],
body.theme-light main table[style*="background-color: #222222"] {
	background-color: var(--bg-secondary) !important;
}

/* ===================================
   Utility Classes
   =================================== */

/* Force specific theme */
.force-dark,
body.force-dark {
	--bg-primary: #000 !important;
	--bg-secondary: #111 !important;
	--bg-tertiary: #222 !important;
	--bg-footer: #1d1d1f !important;
	--text-primary: #f5f5f7 !important;
	--text-secondary: #d2d2d7 !important;
	--text-muted: #86868b !important;
	--text-footer: #6e6e73 !important;
	--text-footer-link: #a1a1a6 !important;
	--text-light-gray: #a1a1a6 !important;
	--text-gray-666: #666 !important;
	--border-primary: #333 !important;
	--border-secondary: #424245 !important;
	--link-primary: #2997ff !important;
	--link-footer: #86868b !important;
	--accent-orange: #ff791b !important;
}

.force-light,
body.force-light {
	--bg-primary: #fff !important;
	--bg-secondary: #f5f5f7 !important;
	--bg-tertiary: #fbfbfd !important;
	--bg-footer: #f5f5f7 !important;
	--text-primary: #1d1d1f !important;
	--text-secondary: #424245 !important;
	--text-muted: #6e6e73 !important;
	--text-footer: #6e6e73 !important;
	--text-footer-link: #424245 !important;
	--text-light-gray: #515154 !important;
	--text-gray-666: #666 !important;
	--border-primary: #d2d2d7 !important;
	--border-secondary: #86868b !important;
	--link-primary: #0066cc !important;
	--link-footer: #86868b !important;
	--accent-orange: #ff6000 !important;
}

/* ===================================
   Moible overrides
   =================================== */
body main .mobile-container .keyline .keyline {
	border-top: 1px solid;
}

/* ===================================
   Transitions
   =================================== */

/* Enable smooth color transitions when switching themes */
/* body.enable-transitions,
body.enable-transitions * {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
} */

/* Disable transitions for immediate changes */
/* body:not(.enable-transitions),
body:not(.enable-transitions) * {
	transition: none !important;
} */

/* ===================================
   Print Styles
   =================================== */

@media print {
	body {
		/* Force light mode for printing */
		--bg-primary: #fff !important;
		--bg-secondary: #f5f5f7 !important;
		--bg-tertiary: #fbfbfd !important;
		--text-primary: #1d1d1f !important;
		--text-secondary: #424245 !important;
		--text-muted: #6e6e73 !important;
		--text-footer: #6e6e73 !important;
		--text-footer-link: #424245 !important;
		--text-light-gray: #515154 !important;
		--text-gray-666: #666 !important;
		--border-primary: #d2d2d7 !important;
		--border-secondary: #86868b !important;
		--link-primary: #0066cc !important;
		--link-footer: #86868b !important;
		--accent-orange: #ff6000 !important;
	}
}

/* ===================================
   Additional Fixes for Common Patterns
   =================================== */

/* Handle nested table backgrounds */
body.theme-dark main table table[bgcolor="#fff"],
body.theme-dark main table table[bgcolor="#ffffff"],
body.theme-dark main table td[bgcolor="#fff"],
body.theme-dark main table td[bgcolor="#ffffff"] {
	background-color: var(--bg-primary) !important;
}

body.theme-light main table table[bgcolor="#000"],
body.theme-light main table table[bgcolor="#000000"],
body.theme-light main table td[bgcolor="#000"],
body.theme-light main table td[bgcolor="#000000"] {
	background-color: var(--bg-primary) !important;
}

/* Catch nested card backgrounds - more specific selectors */
body.theme-light main td[style*="background-color: #222222"],
body.theme-light main td[style*="background-color:#222222"],
body.theme-light main table[style*="background-color: #222222"],
body.theme-light main table[style*="background-color:#222222"] {
	background-color: var(--bg-secondary) !important;
}

/* Target deeply nested elements with inline styles */
body.theme-light main td td[style*="background-color: #222"],
body.theme-light main td td[style*="background-color: #222222"],
body.theme-light main .col td[style*="background-color: #222"],
body.theme-light main .col td[style*="background-color: #222222"] {
	background-color: var(--bg-secondary) !important;
}

/* Catch #111111 backgrounds in light mode */
body.theme-light main td[style*="background-color: #111"],
body.theme-light main td[style*="background-color: #111111"],
body.theme-light main table[style*="background-color: #111"],
body.theme-light main table[style*="background-color: #111111"] {
	background-color: var(--bg-primary) !important;
}

/* Force all nested table cells in light mode */
/* body.theme-light main .col[style*="background-color: #222222"],
body.theme-light main .col[style*="background-color: #111111"] {
	background-color: var(--bg-secondary) !important;
} */

/* Mobile cards background colors */
body.theme-dark main .nestedColumn .col {
	background-color: var(--bg-primary) !important;
}

body.theme-light main .nestedColumn .col {
	background-color: var(--bg-primary) !important;
}

/* Ensure all text in content areas uses proper colors */
body.theme-dark main .section,
body.theme-dark main .row,
body.theme-dark main .col,
body.theme-dark main .copy {
	color: var(--text-primary);
}

body.theme-light main .section,
body.theme-light main .row,
body.theme-light main .col,
body.theme-light main .copy {
	color: var(--text-primary);
}

/* Override any hardcoded font colors in nested elements */
body.theme-dark main .copy *:not(a),
body.theme-dark main .t-body *:not(a) {
	color: inherit !important;
}

body.theme-light main .copy *:not(a),
body.theme-light main .t-body *:not(a) {
	color: inherit !important;
}

/* Override to fix footer styles */
h3.footer-directory-column-section-title {
	display: block !important;
}

/* Override specific editions */
body.theme-dark#june25 main .row.m-xFC0475 .nestedColumn .col,
body.theme-dark#june25 main .row.m-n8142E3 .nestedColumn .col {
	background-color: var(--bg-tertiary) !important;
}

body.theme-light#june25 main .row.m-xFC0475 .nestedColumn .col,
body.theme-light#june25 main .row.m-n8142E3 .nestedColumn .col {
	background-color: var(--bg-secondary) !important;
}