/*
 * PSSP Associates — Responsive Stylesheet
 *
 * Breakpoints:
 *   xs  — max 479px   (small phones)
 *   sm  — max 767px   (mobile layout)
 *   md  — max 1023px  (mobile + tablet nav / hamburger)
 *   lg  — min 768px   (tablet+ layout)
 *   xl  — min 1024px  (desktop — full nav shows here)
 *   2xl — min 1200px  (standard desktop)
 */

/* ============================================================================
   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;
	}
}


/* ============================================================================
   High-contrast mode
   ============================================================================ */

@media (forced-colors: active) {
	.btn { border: 2px solid ButtonText; }
}


/* ============================================================================
   XS — max 479px  (small phones)
   ============================================================================ */

@media screen and (max-width: 479px) {

	:root {
		--font-size-4xl: 1.875rem;
		--font-size-3xl: 1.5rem;
	}

	/* Hero */
	.hero {
		min-height: 360px;
	}

	.hero__container {
		padding-block: 40px;
	}

	.hero__content {
		padding: 24px 20px;
		max-width: 100%;
	}

	.hero__welcome {
		font-size: 1.25rem;
	}

	.hero__title {
		font-size: 1.6rem;
	}

	/* Buttons full width on tiny screens */
	.btn {
		width: 100%;
		justify-content: center;
	}

	.feature-card .btn--green {
		width: auto;
	}

	/* Footer bottom stacks */
	.footer-bottom__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}


/* ============================================================================
   Mobile + Tablet nav — max 1023px
   Hamburger menu visible on phones AND tablets (desktop nav at 1024px+)
   ============================================================================ */

@media screen and (max-width: 1023px) {

	/* Topbar — compact */
	.topbar {
		padding-block: 5px;
	}

	/* Show hamburger */
	.site-header__nav-toggle {
		display: flex;
	}

	/* Nav stays in the header row */
	.site-header__nav {
		display: flex;
		align-items: center;
	}

	/* Menu panel — drops below the full header; hidden by default */
	.site-header__menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-white);
		border-top: 2px solid var(--color-accent);
		box-shadow: 0 8px 24px rgba(0,0,0,0.12);
		z-index: var(--z-header);
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-4) 0;
	}

	/* Reveal menu when hamburger is toggled */
	.site-header__nav.is-open .site-header__menu {
		display: flex;
	}

	.site-header__menu > li {
		border-bottom: 1px solid var(--color-border);
	}

	.site-header__menu > li:last-child {
		border-bottom: none;
	}

	.site-header__menu > li > a {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: var(--space-3) var(--space-6);
		font-size: var(--font-size-base);
	}

	/* Relative positioning for dropdown panel */
	.site-header {
		position: relative;
	}

	/* Who We Are — stack: video on top, content below (mobile + tablet) */
	.who-we-are__grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.who-we-are__media {
		order: 1;
	}

	.who-we-are__video-wrap,
	.who-we-are__video-placeholder {
		aspect-ratio: 16 / 9;
		width: 100%;
	}

	.who-we-are__content {
		order: 2;
	}

	/* Prevent the inner SVG from being the click target */
	.mobile-dropdown-toggle svg {
		pointer-events: none;
		display: block;
	}

	/* Mobile/tablet dropdown toggle button */
	.mobile-dropdown-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 48px;
		background: none;
		border: none;
		cursor: pointer;
		color: var(--color-text-muted);
		padding: 0;
		z-index: 2;
		transition: transform var(--transition-fast), color var(--transition-fast);
	}

	.mobile-dropdown-toggle[aria-expanded="true"] {
		transform: rotate(180deg);
		color: var(--color-accent);
	}

	/* Give menu links room for the toggle button */
	.site-header__menu .menu-item-has-children > a {
		padding-right: 48px;
	}

	/* Hide CSS-only caret indicators (toggle button replaces them) */
	.site-header__menu > li.menu-item-has-children > a::after,
	.site-header__menu .sub-menu > li.menu-item-has-children > a::after {
		display: none;
	}

	/* ── Sub-menus ──────────────────────────────────────────── */

	.site-header__menu .sub-menu {
		position:       static  !important;
		transform:      none    !important;
		opacity:        1       !important;
		visibility:     visible !important;
		box-shadow:     none    !important;
		background-color: var(--color-bg-alt);
		min-width: 0;
		width: 100%;
		padding: 0;
		transition:     none    !important;
		display:        block   !important;
		max-height:     0;
		overflow:       hidden;
		pointer-events: none;
	}

	.site-header__menu .sub-menu.is-open {
		max-height:     600px;
		overflow:       visible;
		pointer-events: auto;
	}

	.site-header__menu .mobile-dropdown-toggle[aria-expanded="true"] ~ .sub-menu {
		max-height:     600px;
		overflow:       visible;
		pointer-events: auto;
	}

	.site-header__menu li.menu-item-has-children:has(> .mobile-dropdown-toggle[aria-expanded="true"]) > .sub-menu {
		max-height:     600px;
		overflow:       visible;
		pointer-events: auto;
	}

	.site-header__menu .sub-menu > li {
		border-bottom: 1px solid var(--color-border);
		position: relative;
	}

	.site-header__menu .sub-menu > li:last-child {
		border-bottom: none;
	}

	.site-header__menu .sub-menu > li > a {
		display: flex;
		align-items: center;
		padding: 10px var(--space-6) 10px calc(var(--space-6) + 16px);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		color: var(--color-text);
		text-decoration: none;
		white-space: normal;
		transition: color var(--transition-fast);
	}

	.site-header__menu .sub-menu > li > a:hover {
		color: var(--color-accent);
	}

	.site-header__menu .sub-menu > .current-menu-item > a,
	.site-header__menu .sub-menu > .current-menu-ancestor > a {
		color: var(--color-accent);
	}

	.site-header__menu .sub-menu .sub-menu > li > a {
		padding-left: calc(var(--space-6) + 32px);
		background-color: var(--color-bg);
		font-size: var(--font-size-xs);
	}
}


/* ============================================================================
   Mobile layout — max 767px
   Single-column stacking for phones only
   ============================================================================ */

@media screen and (max-width: 767px) {

	/* Logo — smaller on mobile */
	.site-header__brand .custom-logo,
	.site-header__brand img {
		max-height: 100%;
		max-width: 100%;
	}

	/* Hero */
	.hero {
		min-height: 420px;
	}

	.hero__content {
		max-width: 100%;
	}

	/* Cards — single column */
	.feature-cards__grid {
		grid-template-columns: 1fr;
	}

	/* Values */
	.values-grid {
		gap: var(--space-6);
		justify-content: center;
	}

	/* Services — single column */
	.services-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	/* CTA */
	.contact-cta__box {
		border-radius: 16px;
		padding: var(--space-10) var(--space-6);
	}

	.contact-cta__btn {
		width: 100%;
		justify-content: center;
	}

	/* Footer */
	.footer-main__grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.footer-bottom__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.footer-bottom__nav {
		gap: 6px;
	}
}


/* ============================================================================
   Tablet layout — min 768px
   Two-column layouts, increased spacing
   ============================================================================ */

@media screen and (min-width: 768px) {

	/* Hero */
	.hero {
		min-height: 480px;
	}

	/* Cards — 2 columns on tablet (3 is too tight at 768–1023px) */
	.feature-cards__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-8);
	}

	/* Last card full width if odd count */
	.feature-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* Services — 2 columns on tablet */
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Footer — 2 columns on tablet */
	.footer-main__grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-col--contact {
		grid-column: 1 / -1;
	}
}


/* ============================================================================
   Desktop — min 1024px
   Full desktop nav + 3-column layouts
   ============================================================================ */

@media screen and (min-width: 1024px) {

	:root {
		--container-gutter: 2rem;
	}

	/* Desktop nav visible — hide hamburger */
	.site-header__nav-toggle {
		display: none;
	}

	.mobile-dropdown-toggle {
		display: none !important;
	}

	/* Hero full height */
	.hero {
		min-height: 520px;
	}

	.hero__container {
		padding-block: 80px;
	}

	/* Cards — 3 columns on desktop */
	.feature-cards__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}

	.feature-card:last-child:nth-child(odd) {
		grid-column: auto;
	}

	/* Services — 3 columns */
	.services-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Footer — 3 columns */
	.footer-main__grid {
		grid-template-columns: 1.4fr 1fr 1.3fr;
	}

	.footer-col--contact {
		grid-column: auto;
	}
}


/* ============================================================================
   XL — min 1200px  (standard desktop)
   ============================================================================ */

@media screen and (min-width: 1200px) {

	:root {
		--container-gutter: 1.5rem;
	}

	.hero {
		min-height: 540px;
	}

	.feature-cards__grid {
		gap: var(--space-6);
	}

	.who-we-are__grid {
		gap: var(--space-16);
	}
}