/**
 * CounterWords — responsive rules (mobile-first adjustments layered on top).
 * Breakpoints: 1024, 900, 768, 600, 480, 380.
 */

/* Large tablets / small desktops */
@media (max-width: 1024px) {
	.cw-workspace { grid-template-columns: 1fr; }
	.cw-stats-col { order: 2; }
	.cw-app.cw-fullscreen .cw-workspace { height: auto; }
	.sidebar.is-sticky .sidebar-inner { position: static; }
}

/* Stack the blog layout */
@media (max-width: 900px) {
	.site-main { grid-template-columns: 1fr; }
	.sidebar-left .content-area { order: 0; }
	.cw-card-grid { grid-template-columns: repeat(2, 1fr); }
	.related-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-widgets { grid-template-columns: repeat(2, 1fr); }
	.post-card { grid-template-columns: 220px 1fr; }
}

/* Tablet / mobile nav */
@media (max-width: 768px) {
	.menu-toggle { display: inline-flex; order: 3; }
	.main-navigation { position: static; margin-left: auto; }
	.main-navigation #primary-menu,
	.main-navigation .menu {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--cw-color-card);
		border-top: 1px solid var(--cw-color-border);
		border-bottom: 1px solid var(--cw-color-border);
		box-shadow: var(--cw-shadow-lg);
		padding: 8px; max-height: 75vh; overflow-y: auto;
		z-index: 550;
	}
	.main-navigation.is-open .menu { display: flex; }
	.main-navigation .menu a { padding: 12px 14px; border-radius: var(--cw-radius-sm); }
	.main-navigation .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding-left: 16px; display: none;
	}
	.main-navigation .submenu-open > .sub-menu { display: block; }
	.submenu-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 40px; height: 40px; position: absolute; right: 8px; top: 4px;
		background: none; border: 0; cursor: pointer; color: var(--cw-color-secondary);
	}
	.submenu-toggle span { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
	.main-navigation .menu-item-has-children { position: relative; }
	.header-inner { flex-wrap: wrap; }

	.post-card { grid-template-columns: 1fr; }
	.post-card .post-thumbnail img { aspect-ratio: 16/9; }
	.post-navigation { grid-template-columns: 1fr; }
	.post-navigation .nav-next { text-align: left; }

	.cw-tool-btn .cw-tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
	.cw-toolbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.cw-tool-btn { flex: 0 0 auto; }
	.cw-tool-btn--settings { margin-left: 0; }

	.footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
	.cw-container { padding-inline: 16px; }
	.cw-stat-grid { grid-template-columns: repeat(2, 1fr); }
	.cw-rules-grid { grid-template-columns: 1fr; }
	.cw-card-grid { grid-template-columns: 1fr; }
	.related-grid { grid-template-columns: 1fr; }
	.footer-widgets { grid-template-columns: 1fr; }
	.cw-feature-grid { grid-template-columns: 1fr; }
	.cw-bar-row { grid-template-columns: 110px 1fr 34px; }
	.author-box { flex-direction: column; text-align: center; align-items: center; }

	/* Mobile sticky ad */
	.cw-ad-sticky-mobile {
		display: block; position: fixed; left: 0; right: 0; bottom: 0;
		z-index: 900; margin: 0; padding: 6px 8px;
		background: var(--cw-color-card); border-top: 1px solid var(--cw-color-border);
		box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
	}
	.cw-ad-sticky-mobile .cw-ad-label { display: none; }
	body { padding-bottom: 0; }
}

@media (max-width: 480px) {
	.cw-primary-value { font-size: 2rem; }
	.cw-tabs { flex-wrap: wrap; }
	.cw-tab { flex: 1 1 40%; font-size: 0.8rem; }
	.cw-stat-value { font-size: 1.15rem; }
	.single-post, .single-page { padding: 18px; }
	.author-header-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 380px) {
	.cw-stat-grid { grid-template-columns: 1fr 1fr; }
	.cw-bar-row { grid-template-columns: 90px 1fr 30px; gap: 6px; font-size: 0.76rem; }
	.cw-editor, .cw-highlight-backdrop { padding: 14px; font-size: 1rem; }
	.cw-tool-title { font-size: 1.5rem; }
}