/* ==========================================================================
   DSN Showcase V4 — supplemental CSS
   Handles things Tailwind utility classes alone can't (mega menu show/hide,
   the wave divider clip, prose typography for post content) and consumes
   the CSS custom properties set in style.css / Theme Options.
   ========================================================================== */

/* ---- Mega menu & simple dropdown ----------------------------------------
   Two panel types share the same show/hide mechanics: hover, focus-within,
   or JS-toggled .is-open on the parent .dsn-menu-item reveals the panel.
   They differ only in layout — .dsn-mega-panel is full header width with
   columns, .dsn-dropdown-panel is a compact list under the item. ------- */
.dsn-mega-panel,
.dsn-dropdown-panel {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 160ms ease, transform 160ms ease;
	pointer-events: none;
}

.dsn-menu-item.is-open > .dsn-mega-panel,
.dsn-menu-item:hover > .dsn-mega-panel,
.dsn-menu-item:focus-within > .dsn-mega-panel,
.dsn-menu-item.is-open > .dsn-dropdown-panel,
.dsn-menu-item:hover > .dsn-dropdown-panel,
.dsn-menu-item:focus-within > .dsn-dropdown-panel {
	display: block;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ---- Wave divider -------------------------------------------------------- */
.dsn-wave-divider {
	line-height: 0;
	margin-top: -1px;
	overflow: hidden;
}
.dsn-wave-divider--to-foam {
	position: relative;
}
/* Hero variant: two tiles scrolling in the track, same speed/direction as
   .dsn-hero-waves so both bands walk together. Plain .dsn-wave-divider
   usages elsewhere (footer) keep their single static <svg>, untouched. */
.dsn-wave-divider-track {
	display: flex;
	width: 200%;
	animation: dsn-wave-scroll 6s linear infinite;
}
.dsn-wave-divider-svg {
	width: 1440px;
	height: 40px;
	flex: 0 0 auto;
	display: block;
}
@media (prefers-reduced-motion: reduce) {
	.dsn-wave-divider-track {
		animation: none;
	}
}

/* ---- Hero animated wave band ---------------------------------------------
   Two identical wave tiles placed side by side in a 200%-wide track; animating
   the track exactly one tile-width to the left and looping gives a seamless,
   continuously-flowing wave with no visible seam or jump. ------------------- */
.dsn-hero-waves {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	overflow: hidden;
	line-height: 0;
	opacity: 0.9;
	pointer-events: none;
}
.dsn-hero-waves-track {
	display: flex;
	width: 200%;
	animation: dsn-wave-scroll 6s linear infinite;
}
.dsn-hero-waves-svg {
	width: 1440px;
	height: 70px;
	flex: 0 0 auto;
	display: block;
}
@keyframes dsn-wave-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.dsn-hero-waves-track {
		animation: none;
	}
}

/* ---- Prose (post/page body content) -------------------------------------- */
.dsn-prose {
	color: var(--tt-ink);
	font-size: 1.1875rem;
	line-height: 1.75;
}
.dsn-prose h2 {
	font-family: var(--tt-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 2.25em;
	margin-bottom: 0.75em;
}
.dsn-prose h3 {
	font-family: var(--tt-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 2em;
	margin-bottom: 0.6em;
}
.dsn-prose p {
	margin-top: 1.1em;
	margin-bottom: 1.1em;
}
.dsn-prose a {
	color: var(--tt-ember);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dsn-prose ul,
.dsn-prose ol {
	margin: 1.1em 0;
	padding-left: 1.4em;
}
.dsn-prose li {
	margin: 0.4em 0;
}
.dsn-prose ul {
	list-style: disc;
}
.dsn-prose ol {
	list-style: decimal;
}
.dsn-prose img {
	border-radius: 1rem;
	margin: 1.5em 0;
}
.dsn-prose blockquote {
	border-left: 3px solid var(--tt-ember);
	padding-left: 1.25em;
	font-style: italic;
	color: rgba(15, 46, 51, 0.75);
	margin: 1.5em 0;
}

/* ---- Footer quick-links grid tweak --------------------------------------- */
.dsn-footer-quicklink a {
	text-decoration: none;
}

/* ---- Footer logo (inverted for dark background when using an uploaded
   raster/SVG logo via the_custom_logo) ------------------------------------- */
.dsn-footer-logo img {
	max-height: 40px;
	width: auto;
}

/* ---- Mobile nav drill-down -------------------------------------------- */
/* Each level (root list or a .sub-menu) is a full screen. Submenus are
   hidden by default in CSS (not just via JS) so there's no flash of every
   level stacked on top of each other before JS runs, and JS shows exactly
   one level at a time by toggling .dsn-mobile-active — a dedicated
   class rather than Tailwind's `hidden` utility, so there's no specificity
   fight between "hidden by default" and "shown when active". */
.dsn-mobile-nav ul.sub-menu,
.dsn-mobile-nav > div > ul.dsn-mobile-level {
	display: none;
	margin: 0;
	padding: 0;
}
.dsn-mobile-nav ul.sub-menu.dsn-mobile-active,
.dsn-mobile-nav > div > ul.dsn-mobile-level.dsn-mobile-active {
	display: block;
}
.dsn-mobile-nav > div > ul > li,
.dsn-mobile-nav ul.sub-menu > li {
	border-bottom: 1px solid var(--tt-line);
}
.dsn-mobile-nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--tt-ink);
}
/* A trailing chevron on any item that drills into a submenu, so it's
   visually obvious the tap destination is "go deeper" not "navigate
   away" — mirrors the reference site's list-style mobile menu. */
.dsn-mobile-nav .menu-item-has-children > a::after {
	content: "";
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--tt-steam);
	border-bottom: 2px solid var(--tt-steam);
	transform: rotate(-45deg);
}

/* Menu items flagged "Display as a button" (Appearance → Menus) render
   with this class in any menu that uses the default Walker_Nav_Menu — the
   mobile drill-down menu, footer legal nav, top bar utility navs. The mega
   menu and footer quick links apply the equivalent styling directly in
   their own walkers instead (see class-mega-menu-walker.php), since they
   don't use the default walker's markup at all. */
.dsn-mobile-nav a.dsn-menu-item-button {
	display: inline-flex;
	justify-content: center;
	background: var(--tt-ember);
	color: var(--tt-white);
	border-radius: 9999px;
	padding: 0.625rem 1.25rem;
	margin: 0.5rem 0;
	font-weight: 600;
}
.dsn-mobile-nav a.dsn-menu-item-button:hover {
	background: var(--tt-ember-dark);
}
.dsn-mobile-nav a.dsn-menu-item-button::after {
	display: none; /* No drill-down chevron on a button-style link. */
}
.dsn-utility-nav a.dsn-menu-item-button,
.dsn-footer-legal-nav a.dsn-menu-item-button {
	display: inline-flex;
	align-items: center;
	background: var(--tt-ember);
	color: var(--tt-white) !important;
	border-radius: 9999px;
	padding: 0.375rem 1rem;
	font-weight: 600;
}
.dsn-utility-nav a.dsn-menu-item-button:hover,
.dsn-footer-legal-nav a.dsn-menu-item-button:hover {
	background: var(--tt-ember-dark);
}

/* ---- Comment list --------------------------------------------------------- */
.dsn-comment-list .children {
	margin-top: 1rem;
	margin-left: 2.5rem;
	padding-left: 1.5rem;
	border-left: 2px solid var(--tt-line);
	list-style: none;
}
.dsn-comment-list > li {
	list-style: none;
}

/* ---- Split page shortcode area (Template: Split Media & Form) --------- */
/* Baseline styling for whatever a shortcode renders in the right column —
   most commonly a form plugin's embed. Low-specificity element selectors
   so a plugin's own more specific styles still win if it has any; this
   just keeps things from looking completely unstyled if it doesn't. */
.dsn-split-shortcode input[type="text"],
.dsn-split-shortcode input[type="email"],
.dsn-split-shortcode input[type="tel"],
.dsn-split-shortcode input[type="url"],
.dsn-split-shortcode input[type="number"],
.dsn-split-shortcode select,
.dsn-split-shortcode textarea {
	width: 100%;
	border: 1px solid var(--tt-line);
	border-radius: 0.75rem;
	padding: 0.65rem 1rem;
	font-size: 1rem;
	font-family: var(--tt-font-body);
	margin-bottom: 1rem;
}
.dsn-split-shortcode input:focus,
.dsn-split-shortcode select:focus,
.dsn-split-shortcode textarea:focus {
	outline: 2px solid var(--tt-focus);
	outline-offset: 1px;
	border-color: var(--tt-focus);
}
.dsn-split-shortcode label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 500;
	margin-bottom: 0.375rem;
}
.dsn-split-shortcode button,
.dsn-split-shortcode input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: var(--tt-ember);
	color: var(--tt-white);
	font-weight: 600;
	padding: 0.75rem 2rem;
	border: none;
	cursor: pointer;
	font-size: 1rem;
}
.dsn-split-shortcode button:hover,
.dsn-split-shortcode input[type="submit"]:hover {
	background: var(--tt-ember-dark);
}