/*════════════════════════════════════════════════════════════════════════════
 * header_responsive.css
 * Responsive overrides for header.css.
 *
 * Breakpoints (Google 2026 standard):
 *   Mobile portrait      : width <= 480px
 *   Tablet/large phone   : 481px – 768px
 *   Laptop/tablet lands. : 769px – 1024px   (partial adjustments only)
 *   Large laptop gap     : 1025px – 1249px  (no overrides — desktop layout holds)
 *   Desktop              : width >= 1250px  (base styles in header.css)
 *
 * Load order: after header.css
 *   wp_enqueue_style('hackya-header-responsive',
 *       $theme_uri . '/css/header_responsive.css',
 *       ['hackya-header'], $ver, 'all');
 *════════════════════════════════════════════════════════════════════════════*/


/*════════════════════════════════════════════════════════════════════════════
 * HAMBURGER TOGGLE BUTTON
 * Hidden on laptop/tablet landscape and above (>= 769px).
 * Shown only on mobile and tablet/large phone (<= 768px).
 *
 * Markup added to header.php:
 *   <button class="nav-toggle"
 *           aria-label="Toggle navigation"
 *           aria-expanded="false"
 *           aria-controls="site-navigation">
 *     <span></span><span></span><span></span>
 *   </button>
 *════════════════════════════════════════════════════════════════════════════*/

.nav-toggle {
	display: none; /* hidden by default (>= 769px) */
	flex-direction: column;
	justify-content: space-between;
	width: 1.75em;
	height: 1.25em;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	z-index: 210;
}

.nav-toggle span {
	display: block;
	width: 100%;
	height: 3px;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate bars → X when nav is open */
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/*════════════════════════════════════════════════════════════════════════════
 * LAPTOP / TABLET LANDSCAPE  (769px – 1024px)
 * Desktop layout is preserved. Only targeted adjustments:
 *   - World clock hidden (too cramped)
 *   - Login panel h1 hidden (saves space)
 *   - #wp-submit button smaller
 *   - Search box wider
 *════════════════════════════════════════════════════════════════════════════*/

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

	/* Hide world clock — too cramped at this width */
	#world-clock {
		display: none !important;
	}

	/* Hide login panel h1 — frees up space in the panel */
	#login-area h1 {
		display: none !important;
	}

	/* Smaller Log In submit button */
	#wp-submit {
		width: 8em;
		height: 2.25em;
		font-size: 0.85em;
	}

	/* Align Log In button with username/password icons */
	.login-submit {
		margin-left: 2.2rem;
		margin-top: 1rem;
	}

	/* Reposition login form to left, remove opacity */
	#loginform {
		position: absolute;
		top: 0.5em;
		left: 1em;
		z-index: 3;
		width: auto;
		color: #fff;
		transition: opacity 0.15s ease;
	}

	/* Wider search input container — override inline Google CSE styles */
	#hackya-search-box {
		width: 75%;
	}

}


/*════════════════════════════════════════════════════════════════════════════
 * SHARED: MOBILE + TABLET/LARGE PHONE  (max-width: 768px)
 * Hamburger nav + all heavy components hidden.
 *════════════════════════════════════════════════════════════════════════════*/

@media (max-width: 768px) {

	/* Hide all heavy desktop-only header components */
	#world-clock,
	.weather-wrapper,
	#video,
	#login-perspective,
	#login,
	.logo-hidden,
	.sticky-nav {
		display: none !important;
	}

	/* Show hamburger, hide horizontal nav underline bar */
	.nav-toggle {
		display: flex;
	}

	#lit,
	#lit2 {
		display: none;
	}

	/* Make site-header a positioning context for the toggle button */
	.site-header {
		position: relative;
		padding-right: 4em;
	}

	/* Slide-down nav — collapsed by default */
	.top-nav {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #0d1f80;
		z-index: 200;
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.35s cubic-bezier(0.17, 0.04, 0.03, 0.94);
		border-top: none;
		animation: none;
	}

	/* Expanded state — JS adds .nav-open to <body> */
	.nav-open .top-nav {
		max-height: 30em;
	}

	/* Stack nav links vertically */
	.top-nav ul {
		flex-direction: column;
		margin: 0;
		padding: 0.5em 0;
	}

	.top-nav ul li {
		margin: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.top-nav ul li:last-child {
		border-bottom: none;
	}

	.top-nav a {
		display: block;
		padding: 0.85em 1.5em;
		font-size: 1em;
	}

	.top-nav a:hover,
	.top-nav a:active {
		background: rgba(255, 255, 255, 0.1);
		color: #00ffde;
	}

	/* Move search button left of the hamburger */
	#search-toggle-btn {
		right: 3.5em;
		top: 0.6em;
		animation: none;
	}

	/* Wider search box on smaller screens */
	#hackya-search-box {
		width: 90%;
	}

}


/*════════════════════════════════════════════════════════════════════════════
 * TABLET / LARGE PHONE  (481px – 768px)
 *════════════════════════════════════════════════════════════════════════════*/

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

	.site-header {
		padding: 0.5em 1em;
	}

	.site-header h1 {
		font-size: 1em;
	}

	.top-nav a {
		padding: 0.8em 1.25em;
	}

}


/*════════════════════════════════════════════════════════════════════════════
 * MOBILE PORTRAIT  (max-width: 480px)
 *════════════════════════════════════════════════════════════════════════════*/

@media (max-width: 480px) {

	.site-header {
		padding: 0.5em 0.75em;
	}

	.site-header h1 {
		font-size: 0.9em;
	}

	.top-nav a {
		padding: 0.75em 1em;
		font-size: 0.95em;
	}

}


/* Hide search nav item on desktop */
.menu-search-item { display: none; }

@media (max-width: 768px) {
    .menu-search-item { display: block; }
    #search-toggle-btn { display: none !important; }
}

.search-close-btn { display: none; }

@media (max-width: 768px) {
    .search-close-btn {
        display: block;
        position: fixed;
        top: 1em;
        right: 2em;
        background: transparent;
        border: none;
        color: white;
        font-size: 1.5em;
        cursor: pointer;
        z-index: 10;
		padding: 0.5em;
    }
}