/* ABOUTME: Frontend CSS overrides for the ASC Science Talk site. */
/* ABOUTME: Loaded at priority 999 to override theme styles. */

/*
 * Fix alignfull/alignwide blocks that set their own width via high-specificity
 * selectors (e.g. ID-scoped styles). Without an explicit viewport width, the
 * negative-margin breakout technique in the theme's front-end.css fails —
 * the block stays at parent width instead of expanding.
 */
.full-width-content .entry-content > .alignfull {
	width: 100vw !important;
}

.full-width-content .entry-content > .alignwide {
	width: auto !important;
}

/* --------------------------------------------------------------------------
 * Hero Slices — object-fit cover + responsive layout
 * -------------------------------------------------------------------------- */

.clb-hero-img-wrapper {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
}

.clb-hero-img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tablet: 2x2 grid, landscape cards, smaller buttons */
@media (max-width: 960px) {
	.clb-updated-homepage-hero-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	.clb-hero-img-wrapper {
		aspect-ratio: 4 / 3;
	}

	.clb-hero-text-wrapper {
		bottom: 80px;
	}

	.clb-hero-text-wrapper a.button {
		font-size: 24px;
	}
}

/* Phone: 2x2 grid, square cards, compact buttons */
@media (max-width: 600px) {
	.clb-updated-homepage-hero-wrapper {
		gap: 1px;
		margin-bottom: 30px;
	}

	.clb-hero-img-wrapper {
		aspect-ratio: 1 / 1;
	}

	.clb-hero-text-wrapper {
		bottom: 50%;
		left: 50%;
		transform: translate(-50%, 50%);
	}

	.clb-hero-text-wrapper a.button {
		font-size: 16px;
		padding: 10px 16px;
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
 * Site Header — always-flex layout (replaces float-based + scroll-only flex)
 * -------------------------------------------------------------------------- */

.site-header > .wrap {
	display: flex !important;
	justify-content: space-between;
	align-items: center;
}

.site-header > .wrap::before,
.site-header > .wrap::after {
	display: none !important;
}

.site-header .title-area {
	float: none;
	flex-shrink: 0;
}

/* Preserve width for header-image logos (background-image on .site-title a) */
.header-image .site-header .title-area {
	width: 360px;
}

html:not([data-scroll="0"]) .header-image .site-header .title-area {
	width: 260px;
}

.site-header .nav-primary {
	flex: 1 1 auto;
	text-align: right;
}

.site-header .nav-primary .genesis-nav-menu {
	float: none;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

/* Hide the Genesis responsive menu toggle — our flyout replaces it */
.menu-toggle {
	display: none !important;
	visibility: hidden !important;
}

/* Strip the floating-card treatment on tablet and below so .site-inner
   sits flush against the viewport edges. */
@media (max-width: 960px) {
	.site-inner {
		box-shadow: none !important;
		background: #fff !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		border-radius: 0 !important;
	}
}

/* --------------------------------------------------------------------------
 * Mobile Flyout Menu (max-width: 959px)
 * Adapted from Yak theme sidebar flyout
 * -------------------------------------------------------------------------- */

@media (max-width: 959px) {

	/* Hide desktop nav, show hamburger */
	.site-header .nav-primary,
	.site-header .nav-secondary {
		display: none !important;
	}

	/* === Hamburger Toggle === */
	.tdasc26-menu-toggle {
		position: relative;
		z-index: 10;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 44px;
		height: 44px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		flex-shrink: 0;
	}

	.tdasc26-menu-icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 24px;
		height: 18px;
		color: var(--white);
	}

	.tdasc26-menu-bar {
		width: 100%;
		height: 2px;
		background-color: currentColor;
		border-radius: 1px;
		transition: all 0.3s ease;
	}

	/* === Mobile Nav Container (full-screen overlay) === */
	#tdasc26-mobile-nav {
		position: fixed;
		inset: 0;
		z-index: 1000;
	}

	#tdasc26-mobile-nav:not(.is-open):not(.is-closing) {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	#tdasc26-mobile-nav.is-open,
	#tdasc26-mobile-nav.is-closing {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		z-index: 99999;
	}

	/* === Overlay Backdrop === */
	.tdasc26-mobile-overlay {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		height: 100%;
		transition: background 0.3s ease, opacity 0.3s ease;
		background: rgba(0, 0, 0, 0);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		opacity: 0;
		pointer-events: none;
	}

	#tdasc26-mobile-nav.is-open .tdasc26-mobile-overlay {
		background: rgba(0, 0, 0, 0.75);
		opacity: 1;
		pointer-events: auto;
	}

	#tdasc26-mobile-nav.is-closing .tdasc26-mobile-overlay,
	#tdasc26-mobile-nav:not(.is-open):not(.is-closing) .tdasc26-mobile-overlay {
		background: rgba(0, 0, 0, 0);
		opacity: 0;
		pointer-events: none;
	}

	/* === Sliding Panel === */
	.tdasc26-mobile-panel {
		width: 80vw;
		max-width: 320px;
		height: 100%;
		background-color: #fff;
		color: #111;
		box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
		transform: translateX(100%);
		transition: transform 0.4s ease;
		overflow-y: auto;
		padding: 1rem;
		position: relative;
		z-index: 20;
		will-change: transform;
	}

	#tdasc26-mobile-nav.is-open .tdasc26-mobile-panel {
		transform: translateX(0);
	}

	/* === Panel Header === */
	.tdasc26-mobile-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 1rem;
		margin-bottom: 1rem;
		border-bottom: 1px solid #ddd;
		position: relative;
		z-index: 10;
	}

	.tdasc26-mobile-title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 1.25rem;
		font-weight: 700;
		color: #111;
	}

	.tdasc26-mobile-title img.tdasc26-mobile-favicon {
		max-width: 32px;
	}

	.tdasc26-mobile-close {
		background: none;
		border: none;
		font-size: 2rem;
		line-height: 1;
		cursor: pointer;
		color: #111;
		padding: 0;
		margin: 0;
	}

	/* === Menu Structure === */
	.tdasc26-mobile-menu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.tdasc26-mobile-menu li {
		position: relative;
	}

	/* Items with children use flex so the link and toggle sit side-by-side
	   instead of relying on absolute positioning (avoids stacking/click issues). */
	.tdasc26-mobile-menu li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.tdasc26-mobile-menu li.menu-item-has-children > a {
		flex: 1 1 0%;
		min-width: 0;
	}

	/* Submenu takes full row below the link + toggle */
	.tdasc26-mobile-menu li.menu-item-has-children > .sub-menu {
		flex-basis: 100%;
	}

	.tdasc26-mobile-menu a {
		display: block;
		text-decoration: none;
		color: #111;
		font-weight: 600;
		font-size: 1rem;
		padding: 0.6rem 0;
	}

	.tdasc26-mobile-menu a span {
		pointer-events: none;
	}

	/* === Submenu Toggle Button === */
	.tdasc26-submenu-toggle {
		background: none;
		border: none;
		cursor: pointer;
		flex-shrink: 0;
		padding: 0.5rem;
		font-size: 1.25rem;
		color: currentColor;
		line-height: 1;
	}

	.tdasc26-submenu-caret {
		display: block;
		width: 1em;
		height: 1em;
		transition: transform 0.2s ease;
		pointer-events: none;
	}

	.tdasc26-submenu-toggle[aria-expanded="true"] .tdasc26-submenu-caret {
		transform: rotate(45deg);
	}

	/* Submenu accordion — .genesis-nav-menu and .js-superfish are stripped from
	   the clone. display: block !important overrides Superfish inline styles
	   in case it re-initializes before our cleanup runs. */
	.tdasc26-mobile-menu .sub-menu {
		display: block !important;
		position: static;
		left: auto;
		width: auto;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent;
		list-style: none;
		margin: 0;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition: max-height 0.35s ease, opacity 0.3s ease;
		font-size: 0.95rem;
	}

	.tdasc26-mobile-menu .sub-menu.is-open {
		max-height: 600px;
		opacity: 1;
	}

	.tdasc26-mobile-menu ul {
		padding-left: 1rem;
	}

	.tdasc26-mobile-menu .sub-menu li {
		margin: 0;
		padding-left: 1rem;
	}

	.tdasc26-mobile-menu .sub-menu li a {
		font-weight: 400;
	}

	.tdasc26-mobile-menu .sub-menu a {
		background-color: transparent;
		color: #333;
		padding: 0.5rem 0;
	}
	.tdasc26-mobile-menu .sub-menu a:hover,
	.tdasc26-mobile-menu .sub-menu a:focus {
		background-color: transparent;
		color: #111;
	}

	/* === Focus & Hover === */
	#tdasc26-mobile-nav a,
	#tdasc26-mobile-nav button {
		outline: none;
		box-shadow: none;
	}

	#tdasc26-mobile-nav a:focus-visible,
	#tdasc26-mobile-nav button:focus-visible {
		outline: 2px solid #999;
		outline-offset: 2px;
		border-radius: 4px;
	}

	#tdasc26-mobile-nav a:hover,
	#tdasc26-mobile-nav button:hover {
		background: none;
		color: inherit;
		text-decoration: none;
	}

	/* === Icon-only menu items (dark mode, search) in the flyout === */
	.tdasc26-mobile-menu .clb-menu-no-padding a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.6rem 0;
	}

	/* === Title area adjustments for mobile header === */
	.site-header .title-area {
		padding: 10px 0;
	}

	.site-header .site-title {
		font-size: 18px;
	}
}

/* Desktop: hide the hamburger and flyout entirely */
@media (min-width: 960px) {
	.tdasc26-menu-toggle,
	#tdasc26-mobile-nav {
		display: none !important;
	}
}