/* Custom overrides and utility styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root{
	--hero-max-width:1200px;
	--content-max-width:1200px; /* Match header/footer width */
	--reading-max-width:1050px; /* Bold & spacious - maximize content area */
	--background-primary: #0d1117; /* Softer dark background */
	--background-secondary: #161b22;
}

/* CRITICAL: Fix body background for professional look */
body {
	background-color: var(--background-primary) !important;
	padding-top: 0 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* DEBUG: Visual alignment guide - uncomment to see widths */
/* 
nav.pv3, article, footer > div {
	outline: 2px solid red !important;
}
.prose {
	outline: 2px solid blue !important;
}
*/

/* Main content container - constrain width for readability */
main {
	max-width: 100%;
	background: linear-gradient(to bottom, var(--background-primary) 0%, var(--background-secondary) 100%);
}

/* Header navigation - match content width */
nav.pv3 {
	max-width: var(--content-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Article container - same width as header/footer */
article {
	max-width: var(--content-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Prose content - narrower for optimal reading */
.prose, .prose-lg {
	max-width: var(--reading-max-width) !important; /* 800px - optimal reading width */
	margin-left: auto !important;
	margin-right: auto !important;
	font-size: 1.0625rem !important; /* 17px - comfortable reading size */
	line-height: 1.7 !important; /* Optimal line spacing */
}

/* Better paragraph spacing */
.prose p {
	margin-bottom: 1.25rem !important;
	font-size: 1.0625rem !important; /* 17px */
	line-height: 1.7 !important;
}

/* Headings should be constrained to reading width */
.prose h1, .prose h2, .prose h3, .prose h4 {
	max-width: var(--reading-max-width);
	margin-left: auto;
	margin-right: auto;
}

/* Lists and blockquotes */
.prose ul, .prose ol, .prose blockquote {
	max-width: var(--reading-max-width);
	margin-left: auto;
	margin-right: auto;
}

/* Images - full width of reading container for visual impact */
.prose img {
	max-width: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	display: block;
}

/* Featured hero image - even wider */
.post-hero, .post-hero-img {
	max-width: var(--reading-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Center and constrain featured hero images */
.post-hero{
	max-width:var(--hero-max-width);
	margin:0 auto 1.25rem;
	overflow:hidden;
	border-radius:12px;
}

.post-hero-img{
	width:100%;
	height:380px;
	object-fit:cover;
	object-position:center center;
	display:block;
}

/* Spacing tweaks for header/meta when title is rendered by markdown */
.post-header{ padding:0 0 0.5rem 0; }
.post-header .post-meta{ margin-top:0.5rem; }

/* TOC anchor offset for sticky header of ~70px */
:target::before{
	content:"";
	display:block;
	height:72px;
	margin-top:-72px;
	visibility:hidden;
}

/* TOC link contrast tweaks */
.post-toc a, .prose a{ color:#58a6ff; text-decoration: underline; }
.post-toc a:hover, .prose a:hover{ color:#79c0ff; }

/* Fix bright green hashtags - use muted blue/gray */
a[href*="/tags/"] {
	background-color: rgba(88, 166, 255, 0.1) !important;
	color: #58a6ff !important;
}

a[href*="/tags/"]:hover {
	background-color: rgba(88, 166, 255, 0.2) !important;
	color: #79c0ff !important;
}

/* Fix bright green affiliate button */
.aff-button, a.aff-button {
	background: linear-gradient(135deg, #238636 0%, #2ea043 100%) !important;
	border: 1px solid #2ea043 !important;
	padding: 0.75rem 1.5rem !important;
	border-radius: 8px !important;
	color: white !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	display: inline-block !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 2px 8px rgba(46, 160, 67, 0.3) !important;
}

.aff-button:hover, a.aff-button:hover {
	background: linear-gradient(135deg, #2ea043 0%, #3fb950 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(46, 160, 67, 0.4) !important;
}

/* Fix rating box - less bright */
.bg-gradient-to-r.from-blue-50 {
	background: rgba(88, 166, 255, 0.08) !important;
	border-color: rgba(88, 166, 255, 0.2) !important;
}

/* Better spacing for sections */
.prose > * + * {
	margin-top: 1.5rem;
}

.prose h2 {
	margin-top: 3rem !important;
	margin-bottom: 1.5rem !important;
}

.prose h3 {
	margin-top: 2rem !important;
	margin-bottom: 1rem !important;
}

/* Card elements should respect reading width for consistency */
.bg-gradient-to-r, .bg-green-50, .bg-red-50, .bg-gray-50 {
	max-width: var(--reading-max-width);
	margin-left: auto;
	margin-right: auto;
}

/* Rating box, pros/cons - match reading width */
article > div[class*="bg-"], 
article > details {
	max-width: var(--reading-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Fix Related Posts cards - dark theme */
.bg-white.dark\:bg-gray-800 {
	background-color: #161b22 !important;
	border: 1px solid #30363d !important;
}

.bg-white.dark\:bg-gray-800:hover {
	background-color: #1c2128 !important;
	border-color: #58a6ff !important;
}

/* Related posts grid - full content width like header */
.grid.md\:grid-cols-3 {
	max-width: var(--content-max-width) !important;
	margin-left: auto;
	margin-right: auto;
}

/* Comments section - full width container */
.max-w-5xl.mx-auto.px-4.py-8:has(.utterances),
div:has(> .utterances) {
	background-color: var(--background-secondary);
	border-top: 1px solid #30363d;
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
	max-width: 100% !important;
}

/* Force Utterances (comments) to match content width */
.utterances {
	max-width: var(--content-max-width) !important;
	margin: 0 auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Related Posts section container - full content width */
.mb-12:has(.grid.md\:grid-cols-3) {
	max-width: var(--content-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Related Posts heading */
.mb-12 h2 {
	color: #c9d1d9 !important;
	font-weight: 700 !important;
	font-size: 1.75rem !important;
	margin-bottom: 2rem !important;
}

/* Fix pros/cons boxes - darker theme */
.bg-green-50 {
	background-color: rgba(46, 160, 67, 0.1) !important;
	border-color: rgba(46, 160, 67, 0.3) !important;
}

.bg-red-50 {
	background-color: rgba(248, 81, 73, 0.1) !important;
	border-color: rgba(248, 81, 73, 0.3) !important;
}

/* Fix TOC (Table of Contents) background */
details.bg-gray-50 {
	background-color: rgba(88, 166, 255, 0.05) !important;
	border: 1px solid rgba(88, 166, 255, 0.2) !important;
}

details.bg-gray-50 summary {
	color: #c9d1d9 !important;
}

/* Fix description text color */
.text-gray-600 {
	color: #8b949e !important;
}

/* Categories badges */
a[href*="/categories/"] {
	color: #58a6ff !important;
	font-weight: 600 !important;
}

a[href*="/categories/"]:hover {
	color: #79c0ff !important;
	text-decoration: underline !important;
}

/* Meta info (date, reading time) - consistent with header/footer */
.text-gray-500 {
	color: #7d8590 !important;
	font-size: 0.875rem !important; /* 14px - same as footer links */
}

/* Description text - larger than meta but smaller than body */
.text-xl {
	font-size: 1.25rem !important; /* 20px - proper hierarchy */
	line-height: 1.6 !important;
	margin-bottom: 1.5rem !important;
	max-width: var(--reading-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Article header - match reading width */
article header {
	max-width: var(--reading-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Post meta section background */
article header .flex.flex-wrap {
	padding: 0.75rem 0;
	border-bottom: 1px solid #30363d;
	margin-bottom: 1.5rem;
}

/* Categories badge - consistent size */
a[href*="/categories/"] {
	font-size: 0.75rem !important; /* 12px - small but readable */
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Better text hierarchy - Professional Typography Scale */
h1, h2, h3, h4, h5, h6 {
	color: #c9d1d9 !important;
}

/* Desktop Typography (default) */
.prose h1 { 
	font-size: 2rem !important; /* 32px - balanced with header */
	font-weight: 800 !important;
	margin-top: 0 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
}

.prose h2 { 
	font-size: 1.75rem !important; /* 28px */
	font-weight: 700 !important;
	border-bottom: 1px solid #30363d;
	padding-bottom: 0.5rem;
	margin-top: 3rem !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
}

.prose h3 { 
	font-size: 1.375rem !important; /* 22px */
	font-weight: 600 !important;
	margin-top: 2rem !important;
	line-height: 1.4 !important;
}

.prose h4 { 
	font-size: 1.125rem !important; /* 18px */
	font-weight: 600 !important;
	margin-top: 1.5rem !important;
}

/* Related Posts titles - match h3 size */
.mb-12 h2 {
	font-size: 1.75rem !important; /* 28px - same as content h2 */
	color: #c9d1d9 !important;
	font-weight: 700 !important;
	margin-bottom: 2rem !important;
}

/* Related Posts card titles */
.bg-white h3, .dark\:bg-gray-800 h3 {
	font-size: 1.125rem !important; /* 18px */
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

/* Better paragraph and list color */
.prose p, .prose li {
	color: #c9d1d9 !important;
}

/* List items - consistent with body text */
.prose ul li, .prose ol li {
	font-size: 1.0625rem !important; /* 17px - match body */
	line-height: 1.7 !important;
	margin-bottom: 0.5rem !important;
}

/* Nested lists - slightly smaller */
.prose ul ul li, .prose ol ol li {
	font-size: 1rem !important; /* 16px */
}

/* List markers */
.prose ul {
	list-style-type: disc;
	padding-left: 1.5rem;
}

.prose ol {
	list-style-type: decimal;
	padding-left: 1.5rem;
}

/* Code blocks */
.prose code {
	background-color: rgba(110, 118, 129, 0.2) !important;
	color: #e6edf3 !important;
	padding: 0.2rem 0.4rem !important;
	border-radius: 4px !important;
	font-size: 0.9em !important;
}

/* Blockquotes */
.prose blockquote {
	border-left-color: #58a6ff !important;
	color: #8b949e !important;
	background-color: rgba(88, 166, 255, 0.05) !important;
	padding: 1rem 1.5rem !important;
	border-radius: 6px !important;
}

/* Mobile adjustments - Scale down typography proportionally */
@media (max-width:768px){
	article {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	
	/* Mobile Typography Scale */
	.prose, .prose-lg {
		font-size: 1rem !important; /* 16px body */
	}
	
	.prose h1 {
		font-size: 1.75rem !important; /* 28px */
		line-height: 1.25 !important;
	}
	
	.prose h2 {
		font-size: 1.5rem !important; /* 24px */
		margin-top: 2rem !important;
	}
	
	.prose h3 {
		font-size: 1.25rem !important; /* 20px */
		margin-top: 1.5rem !important;
	}
	
	.prose h4 {
		font-size: 1.0625rem !important; /* 17px */
	}
	
	.prose p {
		font-size: 1rem !important;
		line-height: 1.65 !important;
		margin-bottom: 1rem !important;
	}
	
	/* Description on mobile */
	.text-xl {
		font-size: 1.125rem !important; /* 18px */
		line-height: 1.5 !important;
	}
	
	/* Related Posts heading on mobile */
	.mb-12 h2 {
		font-size: 1.5rem !important; /* 24px */
		margin-bottom: 1.5rem !important;
	}
	
	/* Related Posts card titles on mobile */
	.bg-white h3, .dark\:bg-gray-800 h3 {
		font-size: 1rem !important; /* 16px */
	}
	
	.post-hero-img{ height:220px; }
	:target::before{ height:64px; margin-top:-64px; }
}

/* Tablet adjustments - Medium typography scale */
@media (min-width: 769px) and (max-width: 1024px) {
	article {
		max-width: 800px !important;
	}
	
	/* Tablet Typography - between mobile and desktop */
	.prose h1 {
		font-size: 1.875rem !important; /* 30px */
	}
	
	.prose h2 {
		font-size: 1.625rem !important; /* 26px */
	}
	
	.prose h3 {
		font-size: 1.25rem !important; /* 20px */
	}
	
	.text-xl {
		font-size: 1.1875rem !important; /* 19px */
	}
}

/* Desktop - comfortable reading width */
@media (min-width: 1025px) {
	article {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}
}

/* Mobile Navigation Fixes */
.mobile-menu {
  display: none !important;
}

.mobile-menu.active {
  display: block !important;
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
  
  .nav-menu {
    display: none !important;
  }
  
  .nav-search {
    display: none !important;
  }
}

/* ========== Footer Enhancements ========== */
#main-footer {
  background: #0f172a !important;
  color: #94a3b8 !important;
  padding: 4rem 0 0 !important;
}

#main-footer h3 {
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin-bottom: 1rem !important;
}

#main-footer h4 {
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 1.25rem !important;
}

#main-footer p {
  color: #cbd5e1 !important;
  line-height: 1.6 !important;
}

#main-footer a {
  color: #cbd5e1 !important;
  transition: all 0.3s ease !important;
}

#main-footer a:hover {
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

/* Footer stats */
#main-footer .tc .f4 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #10b981 !important;
}

#main-footer .tc .f7 {
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Newsletter form */
#main-footer input[type="email"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #ffffff !important;
  padding: 0.875rem 1rem !important;
  border-radius: 8px !important;
  transition: all 0.3s !important;
}

#main-footer input[type="email"]:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #10b981 !important;
  outline: none !important;
}

#main-footer input[type="email"]::placeholder {
  color: #94a3b8 !important;
}

#main-footer button[type="submit"] {
  background: #10b981 !important;
  color: #ffffff !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s !important;
  border: none !important;
}

#main-footer button[type="submit"]:hover {
  background: #059669 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Social icons */
#main-footer svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  transition: all 0.3s !important;
}

#main-footer a[aria-label]:hover svg {
  transform: translateY(-2px) scale(1.1) !important;
}

/* Footer bottom bar */
#main-footer .bt {
  border-color: rgba(148, 163, 184, 0.1) !important;
  margin-top: 3rem !important;
  padding-top: 2rem !important;
}

/* Responsive footer */
@media (max-width: 768px) {
  #main-footer {
    padding: 3rem 0 0 !important;
  }
  
  #main-footer .flex {
    flex-direction: column !important;
  }
  
  #main-footer .w-25-l,
  #main-footer .w-50-m {
    width: 100% !important;
    margin-bottom: 2.5rem !important;
  }
  
  #main-footer .bt {
    margin-top: 2rem !important;
  }
}