/*! 
 * Meet Digital Marketing - Responsive Styles
 * Mobile-first responsive design
 */

/* Mobile Navigation */
@media (max-width: 768px) {
	/* Shared CTA section component (main.css) needs tighter padding on
	   small screens across every page that uses it. */
	.cta-section {
		padding: 2.5rem 1.5rem;
	}

	.menu-toggle {
		display: block;
	}

	.menu-toggle.active span:nth-child(1) {
		transform: rotate(45deg) translate(8px, 8px);
	}

	.menu-toggle.active span:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle.active span:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -7px);
	}

	.main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: white;
		display: none;
		flex-direction: column;
		box-shadow: var(--shadow-md);
		z-index: 999;
		margin: 0;
	}

	.main-navigation.active {
		display: flex;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 0;
		padding: var(--spacing-md) 0;
		margin: 0;
	}

	.main-navigation li {
		border-bottom: 1px solid var(--color-border);
	}

	.main-navigation li:last-child {
		border-bottom: none;
	}

	.main-navigation a {
		display: block;
		padding: var(--spacing-md);
		border: none;
		color: var(--color-text);
	}

	.main-navigation a:hover {
		background-color: var(--color-bg);
		border: none;
	}
}

/* Tablet */
@media (max-width: 1024px) {
	.page-wrapper {
		grid-template-columns: 1fr;
	}

	.sidebar {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: var(--spacing-lg);
	}

	.header-wrapper {
		flex-wrap: wrap;
		gap: var(--spacing-md);
	}

	.header-cta {
		order: 3;
		width: 100%;
	}

	.header-cta .btn {
		width: 100%;
	}

	.posts-grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}

	.footer-content {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile */
@media (max-width: 768px) {
	html {
		font-size: 14px;
	}

	.container {
		padding: 0 var(--spacing-sm);
	}

	h1 {
		font-size: 1.75rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.25rem;
	}

	p {
		font-size: 1rem;
	}

	.header-wrapper {
		padding: var(--spacing-sm) 0;
		min-height: 60px;
	}

	.main-navigation {
		margin: 0 var(--spacing-sm);
	}

	.posts-grid {
		grid-template-columns: 1fr;
	}

	.post-thumbnail {
		height: 250px;
	}

	.single-post {
		padding: var(--spacing-lg);
	}

	.footer-content {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}

	.footer-links {
		justify-content: center;
	}

	/* Sidebar Widgets */
	.sidebar-widget {
		padding: var(--spacing-md);
	}

	/* Tables */
	table {
		font-size: 0.875rem;
	}

	th, td {
		padding: 0.375rem;
	}

	/* Buttons */
	.btn {
		width: 100%;
		padding: var(--spacing-md);
		font-size: 1rem;
	}

	/* Forms */
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	textarea,
	select {
		font-size: 16px; /* Prevent zoom on iOS */
		min-height: 44px; /* Touch target size */
	}

	/* Post Meta */
	.post-meta {
		flex-direction: column;
		gap: 0.25rem;
	}

	/* Share Buttons */
	.share-buttons {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.share-btn {
		width: 100%;
		padding: var(--spacing-sm);
	}

	/* Breadcrumbs */
	.breadcrumb-list {
		font-size: 0.875rem;
	}

	/* Pagination */
	.pagination-list a,
	.pagination-list span {
		min-width: 36px;
		height: 36px;
		font-size: 0.875rem;
	}

	/* Hero Section */
	.post-hero {
		margin-bottom: var(--spacing-lg);
	}

	/* Related Posts */
	.related-posts {
		margin-top: var(--spacing-lg);
	}

	.related-posts-grid {
		grid-template-columns: 1fr !important;
	}

	/* Contact Info */
	.contact-info {
		text-align: center;
	}

	.contact-phone,
	.contact-email,
	.contact-address {
		margin-bottom: var(--spacing-sm);
	}

	/* Social Links */
	.social-links {
		justify-content: center;
	}
}

/* Small Mobile */
@media (max-width: 480px) {
	html {
		font-size: 13px;
	}

	.container {
		padding: 0 0.75rem;
	}

	h1 {
		font-size: 1.5rem;
	}

	h2 {
		font-size: 1.25rem;
	}

	h3 {
		font-size: 1.125rem;
	}

	/* Header */
	.site-logo {
		min-width: 0;
	}

	.site-logo img {
		max-width: 150px;
	}

	.header-wrapper {
		gap: 0.5rem;
	}

	/* Button sizing for touch */
	button,
	.btn,
	input[type="button"],
	input[type="submit"],
	a[role="button"] {
		min-height: 48px;
		min-width: 48px;
		padding: 0.75rem 1rem;
	}

	/* Footer */
	.footer-bottom {
		font-size: 0.875rem;
	}

	.footer-links {
		gap: 0.5rem;
	}

	/* Lists */
	ul, ol {
		margin-left: var(--spacing-md);
	}

	/* Tables */
	table {
		font-size: 0.8125rem;
		overflow-x: auto;
		display: block;
	}

	th, td {
		padding: 0.25rem;
	}

	/* Post Card */
	.post-content {
		padding: var(--spacing-sm);
	}

	.post-title {
		font-size: 1.125rem;
	}

	/* Post Meta */
	.post-meta {
		gap: 0.25rem;
		font-size: 0.8125rem;
	}

	/* Single Post */
	.single-post {
		padding: var(--spacing-md);
	}

	.post-featured-image {
		margin-bottom: var(--spacing-md);
	}

	.post-body {
		font-size: 1rem;
	}

	/* Comments */
	.comment {
		padding-left: var(--spacing-md);
	}

	.children {
		margin-left: 0;
	}
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
	.site-header {
		min-height: 50px;
	}

	.header-wrapper {
		min-height: 50px;
		padding: 0.5rem 0;
	}

	h1 {
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}

	.page-wrapper {
		margin: var(--spacing-md) 0;
	}
}

/* High Resolution Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	body {
		-webkit-font-smoothing: subpixel-antialiased;
	}
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
	a,
	button,
	.btn {
		min-height: 44px;
		min-width: 44px;
	}

	.post-card:hover {
		transform: none;
	}

	.post-thumbnail img {
		transform: none;
	}
}

/* Note: this theme previously had a `prefers-color-scheme: dark`
   block here that swapped --color-bg/--color-card/--color-text etc.
   for OS-level dark mode. Removed — it was written for the old
   pre-redesign palette and never updated, and more importantly it
   actively conflicts with the current design: every page relies on
   a light page background with a few deliberately dark panels
   (.why-section, .cta-section, .metrics-panel, .dashboard-card) for
   contrast and emphasis. Auto-flipping the light sections dark too
   would erase that contrast for any visitor with system dark mode
   enabled — a large share of mobile users by default. A real dark
   mode would need its own deliberate design pass, not a blanket
   token swap. */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Print Optimization */
@media print {
	* {
		background: transparent;
		color: black;
	}

	a,
	a visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	img {
		max-width: 100%;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h1,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}
}

/* Shared component responsive rules (services-grid, why-grid,
   process-list) — these live in main.css so they load on every page,
   not just the homepage; keep their breakpoints global too. */
@media (max-width: 1024px) {
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.why-grid { grid-template-columns: repeat(2, 1fr); }
	.process-list,
	.process-list--7 { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
	.process-list::before { display: none; }
}

@media (max-width: 640px) {
	.services-grid,
	.why-grid,
	.process-list,
	.process-list--7 { grid-template-columns: 1fr; }
}

/* Service page hero (main.css shared component) */
@media (max-width: 1024px) {
	.svc-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Checklist grid + 6-step process (main.css shared components) */
@media (max-width: 1024px) {
	.features-grid { grid-template-columns: repeat(2, 1fr); }
	.process-list--6 { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
}

@media (max-width: 640px) {
	.features-grid,
	.process-list--6 { grid-template-columns: 1fr; }
}

/* Problem/Solution cards + dark metrics panel (main.css shared components) */
@media (max-width: 1024px) {
	.problem-grid { grid-template-columns: repeat(2, 1fr); }
	.metrics-grid,
	.metrics-grid--4col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.problem-grid,
	.metrics-grid,
	.metrics-grid--4col { grid-template-columns: 1fr; }
	.metrics-panel { padding: 1.75rem; }
}

/* Three-column reason cards (main.css shared component) */
@media (max-width: 1024px) {
	.reasons-grid { grid-template-columns: 1fr; }
}

/* Media placeholder, 4-step process, split section (main.css shared) */
@media (max-width: 1024px) {
	.process-list--4 { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
	.split-section { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.process-list--4 { grid-template-columns: 1fr; }
}

/* Mobile header layout fix: keep logo + hamburger on one line even on
   narrow phones by moving the "Get Started" CTA into the nav dropdown
   instead of competing for space in the top bar. Placed after the
   earlier tablet block so it wins the cascade for the same selectors. */
@media (max-width: 768px) {
	.header-wrapper {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0.75rem;
	}

	.header-cta {
		display: none;
	}

	.mobile-nav-cta {
		display: block;
		margin: 0 var(--spacing-md) var(--spacing-md);
		text-align: center;
	}

	/* .main-navigation a ties with .btn-primary on specificity for
	   color, so pin the mobile CTA's button styling explicitly. */
	.main-navigation a.mobile-nav-cta,
	.main-navigation a.mobile-nav-cta:hover {
		color: white;
		background-color: transparent;
		padding: 0.9375rem 1.875rem;
	}
}