/* Modren Style Lite Theme — main.css */
:root {
  --wpt-primary: #f97316;
  --wpt-accent: #ef4444;
  --wpt-bg: #ffffff;
  --wpt-fg: #0f172a;
  --wpt-muted: #6b7280;
  --wpt-border: #e5e7eb;
  --wpt-card: #ffffff;
  --wpt-radius: 14px;
  --wpt-shadow: 0 6px 30px rgba(15,23,42,.06);
  --wpt-shadow-lg: 0 20px 60px rgba(15,23,42,.12);
  --wpt-font-heading: "Inter", system-ui, sans-serif;
  --wpt-font-body: "Inter", system-ui, sans-serif;
  --wpt-container: 1200px;
}
.theme-modren-style-lite-theme.dark-mode {
  --wpt-bg: #0b1020;
  --wpt-fg: #f1f5f9;
  --wpt-muted: #94a3b8;
  --wpt-border: #1e293b;
  --wpt-card: #111933;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--wpt-bg);
  color: var(--wpt-fg);
  font-family: var(--wpt-font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--wpt-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--wpt-accent); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wpt-font-heading);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  color: var(--wpt-fg);
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 600; }

.container { max-width: var(--wpt-container); margin: 0 auto; padding: 0 1.25rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--wpt-primary); color:#fff; padding:.6rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.25rem; border-radius:999px; font-weight:600; font-family:var(--wpt-font-heading); border:1px solid transparent; cursor:pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s; font-size: .95rem; }
.btn-primary { background: var(--wpt-primary); color:#fff; box-shadow: 0 8px 20px -8px var(--wpt-primary); }
.btn-primary:hover { transform: translateY(-2px); color:#fff; background: var(--wpt-accent); }
.btn-secondary { background: transparent; color: var(--wpt-fg); border-color: var(--wpt-border); }
.btn-secondary:hover { border-color: var(--wpt-primary); color: var(--wpt-primary); }

/* Header */
.site-header { background: var(--wpt-bg); border-bottom: 1px solid var(--wpt-border); }
.site-header.is-sticky { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(12px); background: color-mix(in oklab, var(--wpt-bg) 85%, transparent); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.site-title { font-family: var(--wpt-font-heading); font-weight: 800; font-size: 1.4rem; color: var(--wpt-fg); }
.primary-menu { display:flex; gap:1.5rem; list-style:none; padding:0; margin:0; }
.primary-menu a { color: var(--wpt-fg); font-weight: 500; font-size: .95rem; }
.primary-menu a:hover { color: var(--wpt-primary); }
.site-header__tools { display:flex; gap:.5rem; align-items:center; }
.icon-btn { background: transparent; border: 1px solid var(--wpt-border); width:38px; height:38px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color: var(--wpt-fg); transition: all .2s; }
.icon-btn:hover { border-color: var(--wpt-primary); color: var(--wpt-primary); }
.mobile-menu-toggle { display:none; }
.mobile-menu { background: var(--wpt-card); border-bottom: 1px solid var(--wpt-border); padding: 1rem 0; }
.mobile-menu-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.mobile-menu-list a { color: var(--wpt-fg); font-weight: 500; }

@media (max-width: 820px) {
  .primary-nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
}

/* Reading progress */
.reading-progress { position: fixed; top:0; left:0; height:3px; width:0; background: linear-gradient(90deg, var(--wpt-primary), var(--wpt-accent)); z-index: 100; transition: width .15s; }

/* Hero */
.hero { padding: clamp(3rem, 8vw, 6rem) 0; text-align: center; }
.hero--gradient { background: radial-gradient(ellipse at top, color-mix(in oklab, var(--wpt-primary) 25%, transparent), transparent 60%); }
.hero--split { text-align: left; }
.hero-eyebrow { color: var(--wpt-primary); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; margin: 0 0 1rem; }
.hero-title { background: linear-gradient(135deg, var(--wpt-primary), var(--wpt-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--wpt-muted); font-size: 1.15rem; max-width: 640px; margin: 0 auto; }
.hero--split .hero-sub { margin: 0; }

/* Layout grid */
.site-grid { display: grid; gap: 2.5rem; padding: 3rem 1.25rem; }
.site-grid.sidebar-right { grid-template-columns: minmax(0,1fr) 320px; }
.site-grid.sidebar-left { grid-template-columns: 320px minmax(0,1fr); }
.site-grid.sidebar-left .sidebar { order: -1; }
.site-grid.no-sidebar { grid-template-columns: minmax(0, 800px); justify-content: center; }
@media (max-width: 900px) { .site-grid { grid-template-columns: 1fr !important; } }

/* Post grid */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem; }
.post-card { background: var(--wpt-card); border: 1px solid var(--wpt-border); border-radius: var(--wpt-radius); overflow: hidden; display:flex; flex-direction:column; transition: transform .25s, box-shadow .25s, border-color .25s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--wpt-shadow-lg); border-color: color-mix(in oklab, var(--wpt-primary) 30%, var(--wpt-border)); }
.post-card__thumb { display:block; aspect-ratio: 16/9; overflow:hidden; background: var(--wpt-border); }
.post-card__thumb img { width:100%; height:100%; object-fit: cover; transition: transform .4s; }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__body { padding: 1.25rem 1.25rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post-card__cat { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color: var(--wpt-primary); font-weight:700; }
.post-card__title { margin: 0; font-size: 1.2rem; line-height: 1.35; }
.post-card__title a { color: var(--wpt-fg); }
.post-card__title a:hover { color: var(--wpt-primary); }
.post-card__excerpt { color: var(--wpt-muted); font-size:.95rem; margin: 0; flex:1; }
.post-card__meta { color: var(--wpt-muted); font-size:.8rem; display:flex; gap:.4rem; align-items:center; }

/* Single post */
.single-post .entry-header { margin-bottom: 2rem; }
.entry-meta { color: var(--wpt-muted); font-size: .9rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom: 1.5rem; }
.entry-thumb { border-radius: var(--wpt-radius); overflow: hidden; margin-top: 1.5rem; }
.entry-content { font-size: 1.05rem; }
.entry-content p { margin: 0 0 1.25rem; }
.entry-content blockquote { border-left: 4px solid var(--wpt-primary); padding: .5rem 1.25rem; margin: 1.5rem 0; background: color-mix(in oklab, var(--wpt-primary) 6%, transparent); border-radius: 0 var(--wpt-radius) var(--wpt-radius) 0; font-style: italic; }
.entry-content img { border-radius: var(--wpt-radius); margin: 1.5rem 0; }
.entry-content h2 { margin-top: 2.5rem; }
.entry-content h3 { margin-top: 2rem; }
.entry-content pre { background: #0f172a; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: 10px; overflow-x: auto; font-size:.9rem; }
.entry-content code { background: color-mix(in oklab, var(--wpt-primary) 8%, transparent); padding: .15rem .4rem; border-radius: 4px; font-size: .9em; }

/* TOC */
.toc { background: var(--wpt-card); border: 1px solid var(--wpt-border); border-radius: var(--wpt-radius); padding: 1.25rem; margin: 1.5rem 0 2rem; }
.toc__title { font-weight: 700; margin: 0 0 .75rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wpt-muted); }
.toc ol { padding-left: 1.25rem; margin: 0; }
.toc li { margin: .35rem 0; }

/* Author box */
.author-box { display:flex; gap:1.25rem; align-items:flex-start; padding: 1.5rem; background: var(--wpt-card); border: 1px solid var(--wpt-border); border-radius: var(--wpt-radius); margin: 2rem 0; }
.author-box__avatar img { border-radius: 999px; }
.author-box__meta h3 { margin: 0 0 .35rem; }
.author-box__meta p { margin: 0; color: var(--wpt-muted); }

/* Social share */
.social-share { display:flex; gap: 1rem; align-items:center; padding: 1.25rem 0; border-top: 1px solid var(--wpt-border); border-bottom: 1px solid var(--wpt-border); margin: 2rem 0; font-size: .9rem; }
.social-share span { color: var(--wpt-muted); font-weight: 600; }

/* Related */
.related-posts { margin: 3rem 0; }
.related-posts h2 { margin-bottom: 1.5rem; }

/* Breadcrumbs */
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin: 0 0 1.5rem; color: var(--wpt-muted); font-size:.85rem; }
.breadcrumbs li + li::before { content: '/'; margin-right:.5rem; opacity:.5; }

/* Sidebar */
.sidebar .widget { background: var(--wpt-card); border: 1px solid var(--wpt-border); border-radius: var(--wpt-radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.widget-title { margin: 0 0 1rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }

/* Newsletter */
.newsletter-section { background: linear-gradient(135deg, color-mix(in oklab, var(--wpt-primary) 10%, var(--wpt-bg)), color-mix(in oklab, var(--wpt-accent) 10%, var(--wpt-bg))); padding: 4rem 0; text-align: center; margin-top: 4rem; }
.newsletter-title { margin: 0 0 .75rem; }
.newsletter-sub { color: var(--wpt-muted); margin: 0 auto 1.5rem; max-width: 520px; }
.newsletter-form { display:flex; gap:.5rem; max-width: 480px; margin: 0 auto; }
.newsletter-form input { flex:1; padding:.85rem 1rem; border-radius:999px; border:1px solid var(--wpt-border); background: var(--wpt-card); color: var(--wpt-fg); font: inherit; }
.newsletter-form input:focus { outline: 2px solid var(--wpt-primary); outline-offset: 2px; }

/* Footer */
.site-footer { background: var(--wpt-card); border-top: 1px solid var(--wpt-border); padding: 3rem 0 2rem; margin-top: 4rem; }
.site-footer__grid { display: grid; gap: 2rem; }
.footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.footer-meta { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; padding-top: 1.5rem; border-top: 1px solid var(--wpt-border); color: var(--wpt-muted); font-size:.9rem; }
.footer-menu { display:flex; gap: 1.25rem; list-style:none; padding:0; margin:0; }
.footer-menu a { color: var(--wpt-muted); }

/* Search popup */
.search-popup { position: fixed; inset: 0; background: color-mix(in oklab, var(--wpt-bg) 85%, transparent); backdrop-filter: blur(8px); z-index: 200; display:flex; align-items:flex-start; justify-content:center; padding: 6rem 1.5rem; }
.search-popup[hidden] { display: none; }
.search-popup__inner { background: var(--wpt-card); border-radius: var(--wpt-radius); padding: 1.5rem; width:100%; max-width: 600px; position: relative; box-shadow: var(--wpt-shadow-lg); }
.search-popup__close { position:absolute; top: .5rem; right: .75rem; background:none; border:none; font-size: 1.8rem; cursor:pointer; color: var(--wpt-muted); }
.search-form { display:flex; gap:.5rem; }
.search-form .search-field { flex:1; padding:.75rem 1rem; border-radius:999px; border:1px solid var(--wpt-border); background:transparent; color: var(--wpt-fg); font: inherit; }

/* Back to top */
.back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius:999px; background: var(--wpt-primary); color:#fff; border:none; cursor:pointer; opacity:0; pointer-events:none; transition: all .25s; box-shadow: 0 10px 30px -10px var(--wpt-primary); z-index: 90; font-size: 1.1rem; }
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { transform: translateY(-3px); }

/* 404 */
.error-404 { text-align:center; padding: 5rem 1rem; }
.error-404 h1 { font-size: clamp(5rem, 18vw, 10rem); margin: 0; background: linear-gradient(135deg, var(--wpt-primary), var(--wpt-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Comments */
.comments-area { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--wpt-border); }
.comment-list { list-style:none; padding:0; }
.comment-list .children { list-style:none; padding-left: 1.5rem; }

/* Pagination */
.navigation.pagination { margin: 3rem 0; }
.nav-links { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.page-numbers { padding: .6rem .9rem; border-radius: 8px; background: var(--wpt-card); border: 1px solid var(--wpt-border); color: var(--wpt-fg); font-weight:600; }
.page-numbers.current, .page-numbers:hover { background: var(--wpt-primary); color:#fff; border-color: var(--wpt-primary); }