/* ==========================================================================
   SIIVORA BLOG — RESPONSIVE STYLES
   ========================================================================== */

/* Small laptops: 1025px–1280px — compress nav spacing so it never overflows
   the grid column before the 1024px tablet layout takes over. --------------- */
@media (min-width: 1025px) and (max-width: 1280px) {
	.siivora-nav-list { gap: 20px; }
	.siivora-nav-list a { font-size: 12px; letter-spacing: 0.1em; }
	.siivora-header-inner { gap: 16px; padding: 0 20px; }
}

/* Safety net: if a menu is unusually long, scroll rather than overflow/break
   the grid on any desktop width. */
.siivora-nav { overflow-x: auto; scrollbar-width: none; }
.siivora-nav::-webkit-scrollbar { display: none; }

/* Tablet: 1024px and below ------------------------------------------------ */
@media (max-width: 1024px) {
	.siivora-post-grid,
	.siivora-related-grid { grid-template-columns: repeat(2, 1fr); }

	.siivora-hero-inner { grid-template-columns: 1fr; gap: 32px; }

	.siivora-nav-list { gap: 22px; }

	.siivora-footer-main { grid-template-columns: 1fr 1fr; }

	.siivora-share-desktop { display: none; }
	.siivora-share-mobile { display: flex; }
	.siivora-comments-wrap,
	.siivora-related { padding-bottom: 70px; }
}

/* Mobile: 768px and below -------------------------------------------------- */
@media (max-width: 768px) {
	:root { --siivora-header-h: 64px; }

	.siivora-container { padding: 0 20px; }
	.siivora-container-narrow { padding: 0 20px; }

	.siivora-header-inner {
		padding: 0 16px;
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "toggle logo end";
	}
	.siivora-nav { display: none; }
	.siivora-logo { justify-self: center; }
	.siivora-menu-toggle { display: inline-flex; }
	.siivora-logo-text { font-size: 20px; }
	.siivora-logo img { max-height: 32px; max-width: 150px; }
	.siivora-shop-btn { display: none; }
	.siivora-shop-btn-mobile { display: inline-flex; margin-top: 28px; justify-content: center; }

	.siivora-hero { padding: 32px 20px 48px; }
	.siivora-hero-title { font-size: clamp(28px, 8vw, 40px); }
	.siivora-hero-excerpt { max-width: none; }
	.siivora-hero-arrow-fab { width: 42px; height: 42px; bottom: 14px; right: 14px; }

	.siivora-announcement-bar { height: 34px; }
	.siivora-announcement-text { font-size: 11px; padding-right: 40px; }
	.siivora-announcement-marquee { animation-duration: 16s; }

	.siivora-post-grid,
	.siivora-related-grid { grid-template-columns: 1fr; gap: 28px; }

	.siivora-article-title { font-size: clamp(26px, 8vw, 36px); }
	.siivora-article-content { font-size: 16px; }
	.siivora-article-content h2 { font-size: 28px; }
	.siivora-article-content h3 { font-size: 22px; }
	.siivora-article-feature-image { padding: 0 20px; }

	.siivora-toc-item { padding: 8px 0; }

	.siivora-footer-main { grid-template-columns: 1fr; padding: 50px 20px 30px; gap: 32px; }
	.siivora-newsletter { padding: 56px 20px; }
	.siivora-newsletter-form { flex-direction: column; align-items: stretch; border-bottom: none; }
	.siivora-newsletter-input { border: 1px solid var(--siivora-border); border-radius: var(--siivora-radius); padding: 14px; }
	.siivora-newsletter-submit { width: 100%; padding: 14px; }

	.siivora-category-nav-scroll { gap: 20px; }

	.siivora-comments { padding-bottom: 90px; }

	/* Touch devices can't hover — reveal hidden-until-hover elements */
	.siivora-card-meta-chip,
	.siivora-card-share,
	.siivora-card-arrow-fab,
	.siivora-hero-arrow-fab { opacity: 1; transform: none; }

	.siivora-back-to-top { right: 16px; bottom: 78px; width: 44px; height: 44px; }

	.siivora-card-share-btn { width: 36px; height: 36px; }
	.siivora-social-btn { width: 44px; height: 44px; }

	/* Comfortable touch targets */
	.siivora-shop-btn,
	.siivora-search-submit,
	.siivora-newsletter-submit,
	.siivora-comment-submit,
	.siivora-404-cta,
	.siivora-card-link,
	.siivora-hero-cta { min-height: 48px; }
	.siivora-menu-toggle,
	.siivora-search-toggle { min-width: 44px; min-height: 44px; }
}

/* Small phones: 480px and below -------------------------------------------- */
@media (max-width: 480px) {
	.siivora-container, .siivora-container-narrow { padding: 0 16px; }
	.siivora-hero { padding: 24px 16px 40px; }
	.siivora-card-body { padding: 18px 18px 22px; }
	.siivora-search-input { font-size: 20px; }
}

/* Large desktop refinements ------------------------------------------------ */
@media (min-width: 1440px) {
	.siivora-container { max-width: 1440px; }
	.siivora-hero-inner, .siivora-footer-main { max-width: 1440px; }
}

@media (min-width: 1920px) {
	.siivora-container { max-width: 1600px; }
}

/* Guard against horizontal overflow on any breakpoint — scoped to <body>
   only. Setting overflow-x:hidden on <html> as well is a known iOS Safari
   bug that breaks position:fixed children (mobile share bar, back-to-top). */
body { max-width: 100%; }