/* =============================================================
   Premium Theme – Additional Styles
   Complements compiled Tailwind output in main.css
   ============================================================= */

/* ── Nav item styles ─────────────────────────────────────────── */
#primary-menu li a,
.mobile-nav-links li a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.2s ease;
  text-decoration: none;
}

#primary-menu li a:hover,
.mobile-nav-links li a:hover {
  color: var(--foreground);
}

#primary-menu,
.mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Prose styles for content areas ─────────────────────────── */
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}

.prose p {
  color: var(--muted-foreground);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.prose a {
  color: #4f46e5;
  text-decoration: underline;
}

.prose a:hover {
  color: #4338ca;
}

.prose ul, .prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--muted-foreground);
}

.prose code {
  background: var(--muted);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.prose blockquote {
  border-left: 3px solid #4f46e5;
  padding-left: 1rem;
  color: var(--muted-foreground);
  font-style: italic;
}

/* ── Footer menu ─────────────────────────────────────────────── */
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-menu li a {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-menu li a:hover {
  color: #4f46e5;
}

/* ── Scroll behaviour ─────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem; /* accounts for fixed header */
}

/* ── WooCommerce basic compat ─────────────────────────────────── */
.woocommerce-page .woocommerce {
  max-width: 1280px;
  margin: 6rem auto 4rem;
  padding: 0 1.5rem;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: #4f46e5 !important;
  color: #fff !important;
  border-radius: 0.5rem !important;
  padding: 0.6rem 1.5rem !important;
  font-weight: 600 !important;
  transition: background 0.2s !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: #4338ca !important;
}

/* ── RTL support ─────────────────────────────────────────────── */
[dir="rtl"] .site-header nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .container {
  direction: rtl;
}

[dir="rtl"] .space-x-12 > * + * {
  margin-right: 3rem;
  margin-left: 0;
}

/* ── Screen reader only ─────────────────────────────────────── */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #4f46e5;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 9999;
}

/* ── Pagination ─────────────────────────────────────────────── */
.nav-links {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--foreground);
  transition: background 0.2s;
}

.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
}

/* ── Form message states ─────────────────────────────────────── */
#premium-form-msg.success {
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
}

#premium-form-msg.error {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
}


/* ================================================================
 *    HERO HEADLINE - Fluid / proportional font size
 *    ================================================================ */
#hero-headline {
	 font-size: clamp(2.5rem, 8vw + 1rem, 8rem);
  line-height: 1.1;
  letter-spacing: -0.05em;
}
/* ================================================================
 *    GLOBAL MOBILE RESPONSIVENESS
 *    ================================================================ */
html, body { overflow-x: hidden; max-width: 100vw; }
section { padding-left: 1rem; padding-right: 1rem; }

@media (max-width: 640px) {
	#hero { padding-top: 7rem; padding-bottom: 3rem; }
	#hero a.inline-flex { width: 100%; justify-content: center; }
	.animate-marquee-scroll span { font-size: 1rem !important; }
}
@media (max-width: 768px) {
	#masthead .container { padding-left: 1rem; padding-right: 1rem; }
	.site-branding a { font-size: 1rem; }
	#mobile-menu-panel { width: 100%; }
	.mobile-nav-links li a { padding-top: 0.6rem; padding-bottom: 0.6rem; font-size: 1rem; }
	  #about .grid, #services .grid, #projects .grid, #blog .grid, #github .grid, #open-source .grid, #testimonials .grid, #contact .grid, footer .grid, .blog-archive-grid, .posts-grid { grid-template-columns: 1fr !important; }
	#services h2, #projects h2, #blog h2, #contact h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
	#contact form { padding: 1.5rem 1rem; }
	footer .grid { gap: 2rem; }
	footer .footer-menu { flex-direction: column; gap: 0.5rem; }
	.entry-title { font-size: clamp(1.5rem, 5vw, 2.25rem) !important; }
	.content-with-sidebar { flex-direction: column; }
	.site-sidebar { width: 100%; margin-top: 2rem; }
	body.page-template-page-roadmap #primary { padding-top: 5rem; padding-left: 1rem; padding-right: 1rem; }
	.roadmap-hero h1, .roadmap-header h1 { font-size: clamp(1.75rem, 6vw, 2.75rem) !important; }
	.roadmap-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
	#skills .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem; }
	#skills h2, #experience h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
	#experience .ml-4, #experience .ml-6 { margin-left: 1rem; }
	.terminal-wrapper { margin-left: -0.5rem; margin-right: -0.5rem; border-radius: 0.5rem; }
	.terminal-wrapper pre, .terminal-wrapper code { font-size: 0.75rem; }
}
@media (max-width: 480px) {
	h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
	h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
	p { font-size: 0.9375rem; }
	#ai-chatbot-widget { width: 100vw !important; right: 0 !important; bottom: 0 !important; border-radius: 0 !important; max-height: 85vh; }
}

}