/* ============================================================
   RESPONSIVE.CSS
   Breakpoint overrides. Behaviour preserved from the original
   MediaQueries.css during this refactor — empty breakpoint
   blocks kept as placeholders for future use.
   ============================================================ */

/* SMALL PHONES: 300px - 575px */
@media screen and (min-width: 300px) and (max-width: 575px)
{
	footer .arrow-top
	{
		display: block !important;
		float: none !important;
		margin: auto !important;
	}
}
/* END SMALL PHONES */


/* LARGE PHONES: 576px - 640px */
@media screen and (min-width: 576px) and (max-width: 640px)
{
	footer .arrow-top
	{
		display: block !important;
		float: none !important;
		margin: auto !important;
	}
}
/* END LARGE PHONES */


/* TABLETS: 641px - 1024px */
@media screen and (min-width: 641px) and (max-width: 1024px)
{
	/* placeholder: no overrides defined yet */
}
/* END TABLETS */


/* SMALL LAPTOPS: 1024px - 1279px */
@media screen and (min-width: 1024px) and (max-width: 1279px)
{
	/* placeholder: no overrides defined yet */
}
/* END SMALL LAPTOPS */


/* LAPTOPS: 1280px - 1400px (includes MacBook Pro 1440x900) */
@media screen and (min-width: 1280px) and (max-width: 1400px)
{
	/* placeholder: no overrides defined yet */
}
/* END LAPTOPS */


/* DESKTOPS: 1400px - 1600px */
@media screen and (min-width: 1400px) and (max-width: 1600px)
{
	.navbar-nav .nav-link
	{
		font-size: 1.2rem !important;
		padding-left: .5rem !important;
		padding-right: .5rem !important;
	}
}
/* END DESKTOPS */


/* LARGE DESKTOPS: 1601px+ */
@media screen and (min-width: 1601px)
{
	.navbar-nav .nav-link
	{
		display: inline-block !important;
		font-size: 1.4rem !important;
		padding-left: .5rem !important;
		padding-right: .5rem !important;
	}
}
/* END LARGE DESKTOPS */


/* SITE NAV — breakpoint rules only. Base .site-nav styling lives
   in navbar.css. Full rebuild: .nav-bar (logo + links + controls)
   is a plain flex row that ALWAYS stays a single line — it only
   ever has 2 real flex items (brand, nav-controls) because
   .nav-links-wrap is taken out of flow via position:absolute on
   mobile. This means .nav-bar structurally cannot wrap or shift,
   regardless of the dropdown's open/closed state or height.
   Mobile menu opens/closes instantly (no animation) — a transition
   was tried previously and caused a mid-animation rendering glitch. */
@media (min-width: 1441px)
{
	.site-nav .nav-links
	{
		display: flex;
		justify-content: space-between;
	}
}

@media (max-width: 1440px)
{
	.site-nav .nav-toggle
	{
		display: inline-block;
	}

	/* Dropdown panel: sits below .nav-bar as an overlay, completely
	   outside .nav-bar's own flex flow. Positioned relative to
	   .site-nav (top:100% = exactly the bottom edge of .nav-bar,
	   since .nav-links-wrap contributes no height to .site-nav while
	   absolute). Only visible when Bootstrap adds .show/.collapsing. */
	.site-nav .nav-links-wrap
	{
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1030;
	}

	.site-nav .nav-links.collapsing,
	.site-nav .nav-links.show
	{
		display: flex;
		flex-direction: column;
		gap: 1rem;
		background: var(--driftwood);
		border-top: 1px solid rgba(184,147,90,0.25);
		padding: 1.5rem;
	}

	.site-nav .nav-links.collapsing
	{
		transition: none !important;
	}
}

/* Small phones only: shrink logo, icons and toggle so the whole
   top row (logo + social icons + Menu button) fits comfortably. */
@media (max-width: 600px)
{
	.site-nav .nav-bar
	{
		padding: 0.9rem;
	}

	.site-nav .brand
	{
		padding: 0.4rem 0.9rem;
	}

		.site-nav .brand img
		{
			height: 32px;
		}

	.site-nav .nav-controls
	{
		gap: 0.6rem;
	}

	.site-nav .nav-social
	{
		gap: 0.4rem;
	}

		.site-nav .nav-social .social-icon
		{
			height: 24px;
			width: 24px;
			font-size: 11px;
		}

	.site-nav .nav-toggle
	{
		padding: 0.3rem 0.55rem;
		font-size: 0.8rem;
	}
}
/* END SITE NAV */


/* SPLIT SECTION (redesign) */
@media (max-width: 860px)
{
	.split
	{
		grid-template-columns: 1fr;
	}

		.split .split-image
		{
			order: -1;
		}
}
/* END SPLIT SECTION */


/* CONTACT GRID (redesign) */
@media (max-width: 860px)
{
	.contact-grid
	{
		grid-template-columns: 1fr;
	}
}
/* END CONTACT GRID */