/* Gridly Mobile Styles */

/* ========================================
   Tablet & below (max-width: 782px)
   WordPress nav switches to overlay at 782px
   ======================================== */
@media (max-width: 782px) {

	/* --- Header --- */
	header.wp-block-template-part > .wp-block-group {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	/* Smaller logo on mobile */
	.wp-block-site-logo img {
		max-width: 120px !important;
		height: auto !important;
	}

	/* Remove logo margin-top on mobile */
	.wp-block-site-logo {
		margin-top: 0 !important;
	}

	/* --- Navigation: disable desktop hover effects --- */
	.wp-block-navigation .wp-block-navigation-item > a,
	.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding-top: 0;
		padding-bottom: 0;
	}

	.wp-block-navigation .wp-block-navigation-item > a::after,
	.wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		display: none !important;
	}

	/* Remove transform + transition when overlay menu is open so fixed positioning works instantly */
	header.wp-block-template-part:has(.is-menu-open) {
		transform: none !important;
		transition: none !important;
	}

	/* --- Mobile overlay menu styling --- */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 2rem 1.5rem !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content {
		font-size: 1.1rem !important;
		padding: 0.75rem 0 !important;
		color: var(--wp--preset--color--grey) !important;
	}

	/* Submenu in overlay: reset desktop styling */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: transparent !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		min-width: auto !important;
		margin-top: 0 !important;
		padding: 0 0 0 1rem !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before {
		display: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
		color: var(--wp--preset--color--grey) !important;
		font-size: 1rem !important;
		padding: 0.5rem 0 !important;
	}

	/* Hamburger button color */
	.wp-block-navigation__responsive-container-open svg {
		fill: var(--wp--preset--color--grey);
	}

	/* Close button styling */
	.wp-block-navigation__responsive-container-close svg {
		fill: var(--wp--preset--color--grey);
	}

	/* --- Hero Primary --- */
	.wp-block-cover.alignfull {
		min-height: 300px !important;
	}

	.wp-block-cover .wp-block-heading.has-xx-large-font-size {
		font-size: var(--wp--preset--font-size--x-large) !important;
	}

	.wp-block-cover .has-large-font-size {
		font-size: var(--wp--preset--font-size--medium) !important;
	}

	/* Hero buttons stack on mobile */
	.wp-block-cover .wp-block-buttons {
		flex-direction: column;
		align-items: center;
	}

	.wp-block-cover .wp-block-button {
		width: 100%;
		max-width: 280px;
	}

	.wp-block-cover .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	/* --- Hero Secondary --- */
	.hero-secondary.alignfull {
		min-height: 200px !important;
	}

	.hero-secondary.is-position-bottom-left {
		padding-left: 1.5rem !important;
	}

	.hero-secondary .wp-block-heading {
		font-size: var(--wp--preset--font-size--large) !important;
	}

	/* --- Content --- */
	.wp-block-post-content {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* --- Footer --- */
	footer.wp-block-template-part .wp-block-columns {
		flex-direction: column !important;
		gap: 2rem !important;
	}

	footer.wp-block-template-part .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	footer.wp-block-template-part .wp-block-group {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	/* --- General spacing --- */
	h1 { font-size: var(--wp--preset--font-size--x-large) !important; }
	h2 { font-size: var(--wp--preset--font-size--large) !important; }
}

/* ========================================
   Small phones (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {

	.wp-block-site-logo img {
		max-width: 100px !important;
	}

	.hero-secondary.alignfull {
		min-height: 160px !important;
	}

	.wp-block-cover.alignfull {
		min-height: 250px !important;
	}
}