/**
 * NovaPress — responsive.css
 * Breakpoint behaviour: mobile navigation, grid collapsing, section
 * stacking, and container padding adjustments.
 *
 * Depends on layout.css. Breakpoints: 1024px (desktop), 782px (WP admin
 * bar / tablet), 600px (mobile).
 *
 * @package NovaPress
 */

/* =========================================================================
 * Large tablet / small desktop — up to 1024px
 * ====================================================================== */
@media (max-width: 1024px) {
	.np-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.np-content:has(.np-sidebar) {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * Tablet / mobile navigation threshold — up to 782px
 * ====================================================================== */
@media (max-width: 782px) {
	/* --- Mobile navigation --------------------------------------------- */
	.np-menu-toggle {
		display: inline-flex;
	}

	.np-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: block;
		background-color: var(--np-color-bg);
		border-bottom: 1px solid var(--np-color-border);
		box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.35);
	}

	/* Hidden by default; revealed when .np-nav--open is toggled by JS. */
	.np-nav__list {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem;
	}

	.np-nav--open .np-nav__list {
		display: flex;
	}

	.np-nav__item {
		width: 100%;
	}

	.np-nav__link {
		padding: 0.85rem 1rem;
		border-radius: var(--np-radius);
	}

	.np-nav__list .sub-menu {
		padding-left: 1rem;
	}

	/* Toggle animation to an X when open. */
	.np-menu-toggle[aria-expanded="true"] .np-menu-toggle__bar {
		background-color: transparent;
	}

	.np-menu-toggle[aria-expanded="true"] .np-menu-toggle__bar::before {
		top: 0;
		transform: rotate(45deg);
	}

	.np-menu-toggle[aria-expanded="true"] .np-menu-toggle__bar::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* --- Grids collapse to two columns --------------------------------- */
	.np-grid--3,
	.np-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* --- Two-column blocks stack --------------------------------------- */
	.np-hero__inner,
	.np-about__inner,
	.np-contact__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.np-hero__inner {
		gap: 2rem;
	}

	.np-hero__subtitle {
		margin-inline: auto;
	}

	.np-hero__actions,
	.np-contact__info {
		justify-content: center;
	}

	/* Media stacks above content for a natural reading order on mobile. */
	.np-hero__media,
	.np-about__media {
		order: -1;
	}
}

/* =========================================================================
 * Mobile — up to 600px
 * ====================================================================== */
@media (max-width: 600px) {
	.np-container {
		padding-inline: 1rem;
	}

	/* Single-column everything. */
	.np-grid--2,
	.np-grid--3,
	.np-grid--4 {
		grid-template-columns: 1fr;
	}

	.np-form__row {
		grid-template-columns: 1fr;
	}

	.np-section {
		padding-block: 2.5rem;
	}

	.np-section__subtitle {
		font-size: 1rem;
	}

	.np-hero__actions,
	.np-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.np-hero__actions .np-btn,
	.np-cta__actions .np-btn {
		width: 100%;
	}

	.np-footer__bottom {
		flex-direction: column;
		text-align: center;
	}

	/* Move slider arrows below the viewport so they don't overlap cards. */
	.np-slider__arrow {
		top: auto;
		bottom: -3.5rem;
		transform: none;
	}

	.np-slider__arrow--prev { left: calc(50% - 3.25rem); }
	.np-slider__arrow--next { right: calc(50% - 3.25rem); }

	.np-testimonials__viewport {
		padding-bottom: 3.5rem;
	}
}

/* =========================================================================
 * WordPress admin bar offset for sticky header
 * ====================================================================== */
@media screen and (max-width: 782px) {
	.admin-bar .np-header--sticky {
		top: 46px;
	}
}

@media screen and (min-width: 783px) {
	.admin-bar .np-header--sticky {
		top: 32px;
	}
}