/**
 * Mobile interface polish.
 * Loaded last so it can harmonize the theme's public components without
 * changing desktop layouts or plugin data.
 */

/* Keep sticky headers below the WordPress admin bar. */
.admin-bar .site-header {
	top: 32px;
}

/* Anchored playlist rows and content headings should not hide under the sticky header. */
.entry-content [id],
.single-content [id],
.dpp-track-row[id],
[data-track-index] {
	scroll-margin-top: 150px;
}

@media (max-width: 720px) {
	:root {
		--ava-mobile-space: 14px;
		--ava-mobile-radius: 14px;
	}

	.admin-bar .site-header {
		top: 46px;
	}

	body {
		font-size: 14px;
		line-height: 1.85;
		overflow-wrap: anywhere;
	}

	.site-container {
		width: min(100% - 18px, 1180px);
	}


	.account-trigger,
	.theme-switch {
		min-height: 36px;
	}

	.header-main {
		min-height: 60px;
		gap: 10px;
	}

	.site-branding {
		flex: 1 1 auto;
		overflow: hidden;
	}

	.site-logo,
	.custom-logo {
		max-width: min(210px, calc(100vw - 92px));
		max-height: 46px;
	}


	.menu-toggle {
		flex: 0 0 42px;
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}

	.primary-navigation {
		inset: calc(100% - 1px) 9px auto 9px;
		max-height: min(68dvh, 520px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px;
		border-radius: var(--ava-mobile-radius);
	}

	.primary-navigation ul {
		display: grid;
		gap: 6px;
	}

	.primary-navigation a {
		min-height: 44px;
		display: flex;
		align-items: center;
		padding: 9px 12px;
		border-radius: 10px;
		font-size: 13px;
	}

	.header-search {
		padding-bottom: 10px;
	}

	.search-form {
		border-radius: 12px;
	}

	.search-field {
		min-height: 42px;
		padding-inline: 13px;
		font-size: 16px;
	}

	.search-submit {
		width: 48px;
		min-width: 48px;
	}

	.search-submit svg {
		width: 20px;
		height: 20px;
	}

	.dpp-global-search-panel {
		inset-block-start: calc(100% + 6px);
		max-height: min(62dvh, 440px);
		border-radius: 13px;
	}

	/* Main layout and cards. */
	.site-main {
		padding-top: 14px;
	}

	.layout-with-sidebar {
		gap: 16px;
	}

	.archive-header,
	.single-panel,
	.comments-area,
	.related-posts,
	.widget,
	.breadcrumb,
	.empty-state {
		border-radius: var(--ava-mobile-radius);
		box-shadow: 0 8px 22px rgba(22, 24, 30, .06);
	}

	.archive-header {
		padding: 13px 14px;
		margin-bottom: 12px;
	}

	.archive-header h1 {
		font-size: 18px;
		line-height: 1.65;
	}

	.archive-description {
		font-size: 12px;
		line-height: 1.9;
	}

	.breadcrumb {
		padding: 8px 10px;
		margin-bottom: 10px;
		gap: 5px;
		font-size: 11px;
		line-height: 1.7;
	}

	.post-grid,
	.related-grid,
	.layout-fullwidth .post-grid,
	.layout-single .related-grid {
		gap: 9px;
	}

	.post-card {
		border-radius: 12px;
		box-shadow: 0 7px 18px rgba(22, 24, 30, .055);
	}

	.post-card-title {
		min-height: 56px;
		padding: 8px 7px 10px;
		font-size: 12px;
		line-height: 1.6;
	}

	/* Single post: better hierarchy with less unused space. */
	.single-panel {
		padding: 12px;
	}

	.single-header {
		margin-bottom: 10px;
	}

	.single-header .single-date-badge {
		margin-bottom: 8px;
		padding: 5px 9px;
		font-size: 10.5px;
		line-height: 1.55;
	}

	.single-date-icon {
		width: 24px;
		height: 24px;
	}

	.single-date-icon svg {
		width: 14px;
		height: 14px;
	}

	.single-title {
		padding: 6px 10px;
		border-inline-start-width: 4px;
		font-size: 17px;
		line-height: 1.7;
	}

	.single-content,
	.entry-content {
		font-size: 14px;
		line-height: 2;
	}

	.entry-content p,
	.single-content p {
		margin-block: .9em;
	}

	.entry-content h1,
	.entry-content h2,
	.entry-content h3 {
		margin: 1.15em 0 .6em;
		line-height: 1.75;
	}

	.entry-content h1 { font-size: 19px; }
	.entry-content h2 { font-size: 18px; }
	.entry-content h3 { font-size: 16px; }

	.entry-content p.has-background,
	.single-content p.has-background {
		gap: 10px;
		padding: 11px 12px;
		margin: 14px 0;
		border-radius: 12px;
	}

	.entry-content p.has-background::before,
	.single-content p.has-background::before {
		width: 22px;
		height: 22px;
	}

	.entry-content .wp-block-separator.has-alpha-channel-opacity,
	.single-content .wp-block-separator.has-alpha-channel-opacity {
		width: 90%;
		margin: 1.35rem auto;
	}

	.entry-content blockquote {
		margin: 14px 0;
		padding: 11px 13px;
	}

	.entry-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.entry-content th,
	.entry-content td {
		padding: 8px;
	}

	.entry-content a[href^="https://dl"],
	.entry-content a[href*="/dl"],
	.single-content a[href^="https://dl"],
	.single-content a[href*="/dl"] {
		min-height: 42px;
		padding: .5em 1em;
		border-radius: 12px;
	}

	.comments-area,
	.related-posts {
		margin-top: 14px;
		padding: 13px;
	}

	.related-title {
		margin-bottom: 11px;
		font-size: 15px;
	}

	.related-title::before,
	.archive-header h1::before,
	.footer-menu h2::before {
		height: 20px;
		width: 6px;
	}

	.pagination-wrap {
		margin-top: 16px;
	}

	.pagination-wrap ul {
		gap: 6px;
	}

	.pagination-wrap a,
	.pagination-wrap span {
		min-width: 36px;
		height: 36px;
		border-radius: 10px;
		font-size: 12px;
	}

	/* Sidebar widgets and search results. */
	.widget {
		padding: 13px;
	}

	.sidebar-posts {
		gap: 8px;
	}

	.sidebar-posts a {
		min-height: 62px;
		border-radius: 11px;
	}

	.ava-search-section-header {
		gap: 10px;
		margin-bottom: 9px;
		border-radius: 12px;
	}

	.ava-track-search-section,
	.ava-post-search-section {
		margin-top: 14px;
	}

	.ava-post-search-section {
		margin-top: 20px;
	}

	/* Footer: compact without sacrificing readability. */
	.site-footer {
		margin-top: 24px;
		padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
	}

	.footer-category-grid {
		gap: 14px 12px;
		padding-bottom: 16px;
	}

	.footer-menu h2 {
		margin-bottom: 9px;
		font-size: 13px;
	}

	.footer-menu ul,
	.footer-social {
		gap: 7px;
	}

	.footer-menu a,
	.footer-pages a,
	.footer-social a {
		line-height: 1.75;
	}

	.footer-bottom {
		gap: 12px;
		padding-top: 14px;
	}

	.footer-brand-links {
		gap: 11px;
	}

	.footer-brand-icon {
		width: 30px;
		height: 30px;
	}

	.footer-pages ul {
		gap: 10px;
	}

	.back-to-top {
		left: 12px;
		width: 40px;
		height: 40px;
	}

	/* All interactive controls retain a usable touch target. */
	button,
	input[type="button"],
	input[type="submit"],
	input[type="reset"] {
		touch-action: manipulation;
	}

	.entry-content [id],
	.single-content [id],
	.dpp-track-row[id],
	[data-track-index] {
		scroll-margin-top: 126px;
	}
}

@media (max-width: 420px) {
	.site-container {
		width: min(100% - 14px, 1180px);
	}

	.header-main {
		min-height: 56px;
	}

	.site-logo,
	.custom-logo {
		max-width: min(180px, calc(100vw - 80px));
		max-height: 42px;
	}

	.header-search {
		padding-bottom: 8px;
	}

	.post-grid,
	.related-grid,
	.layout-fullwidth .post-grid,
	.layout-single .related-grid {
		gap: 7px;
	}

	.post-card-title {
		min-height: 54px;
		padding-inline: 6px;
		font-size: 11.5px;
	}

	.single-panel {
		padding: 10px;
	}

	.single-date-label {
		display: inline;
		font-size: 10px;
		font-weight: 800;
		white-space: nowrap;
	}

	.single-header .single-date-badge {
		width: 100%;
		box-sizing: border-box;
		justify-content: center;
		row-gap: 5px;
	}

	.single-date-item {
		min-width: 0;
	}

	.single-date-divider {
		display: none;
	}

	.single-title {
		font-size: 16px;
	}

	.entry-content,
	.single-content {
		font-size: 13.5px;
	}

	.footer-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 13px 10px;
	}

	.footer-menu a,
	.footer-pages a,
	.footer-social a,
	.footer-copy {
		font-size: 11px;
	}

	.footer-brand-links,
	.footer-bottom {
		align-items: flex-start;
	}
}

@media (hover: none) and (pointer: coarse) {
	.post-card:hover,
	.ava-track-search-item:hover,
	.ava-popular-card:hover,
	.account-trigger:hover,
	.account-submit:hover,
	.account-primary-button:hover {
		transform: none;
	}
}