/* =========================================================================
   GyanPustak Tools Child — mobile.css
   App-feel mobile layer: bottom navigation with safe-area support, drawer
   polish, result bar, touch targets. Enabled below the 768px mobile-menu breakpoint (matches GeneratePress).
   ========================================================================= */

/* -------------------------------------------------------- bottom nav */
/* Material 3 navigation bar: solid surface, pill active indicator */
.gp-bottomnav {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
	background: var(--gp-card);
	border-top: 1px solid var(--gp-border);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.gp-bottomnav__list {
	display: flex; align-items: stretch; list-style: none; margin: 0; padding: 6px 4px;
}
.gp-bottomnav__item { flex: 1; min-width: 0; }
.gp-bottomnav__link {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 4px 2px; color: var(--gp-muted); text-decoration: none;
	font-size: 0.66rem; font-weight: 500; min-height: 52px; justify-content: center;
	border-radius: 12px; transition: color 0.15s ease;
}
.gp-bottomnav__link .gp-icon {
	width: 21px; height: 21px; padding: 3px 14px; box-sizing: content-box;
	border-radius: 999px; transition: background 0.15s ease;
}
.gp-bottomnav__link.is-active { color: var(--gp-primary); font-weight: 600; }
.gp-bottomnav__link.is-active .gp-icon { background: #e8f0fe; }
.gp-bottomnav__link:hover { color: var(--gp-primary); }
.gp-bottomnav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-bottomnav__count {
	position: absolute; top: 3px; right: calc(50% - 18px);
	min-width: 16px; height: 16px; padding: 0 4px;
	background: var(--gp-danger); color: #fff; border-radius: 999px;
	font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}

/* body clearance so nav never overlaps calculator controls */
body.gp-has-bottomnav { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0)); }
@media print {
	body.gp-has-bottomnav { padding-bottom: 0; }
	.gp-bottomnav { display: none !important; }
}

@media (max-width: 768px) {
	.gp-bottomnav { display: block; }
}

/* ------------------------------------------------- mobile result bar */
.gp-result-bar {
	position: fixed; left: 12px; right: 12px;
	bottom: calc(74px + env(safe-area-inset-bottom, 0));
	z-index: 1040; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--gp-card); border: 1px solid var(--gp-border);
	border-radius: 14px; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.18);
	padding: 10px 14px; font-size: 0.9rem; color: var(--gp-text);
	transform: translateY(140%); transition: transform 0.25s ease; pointer-events: none;
}
.gp-result-bar.is-visible { transform: translateY(0); pointer-events: auto; }
.gp-result-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gp-muted); }
.gp-result-bar__label strong { color: var(--gp-primary); font-variant-numeric: tabular-nums; }
.gp-result-bar__view {
	background: var(--gp-primary); color: #fff; border: 0; border-radius: var(--gp-radius-btn);
	padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 42px;
	flex-shrink: 0;
}
@media (min-width: 769px) {
	.gp-result-bar { display: none; }
}

/* ------------------------------------------------------ drawer polish */
@media (max-width: 768px) {
	.gp-drawer__panel { width: min(330px, 88vw); }
}

/* header actions on small screens: icons only, larger hit areas */
@media (max-width: 768px) {
	.gp-header-cta { display: none; }
	.gp-search-inline { display: none; }
	.gp-header-btn { min-width: 44px; min-height: 44px; }
	.gp-breadcrumbs__list { border-radius: 10px; }
	.gp-tool-hero { padding: 16px; gap: 12px; }
	.gp-tool-hero__main { gap: 12px; }
	.gp-tool-hero__title { font-size: 1.25rem; }
	.gp-toolbar { margin: 8px; padding: 6px 8px 6px 14px; }
}

/* very small phones */
@media (max-width: 360px) {
	.gp-bottomnav__label { display: none; }
	.gp-bottomnav__link { padding: 10px 2px; }
	body.gp-has-bottomnav { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }
}

/* landscape phones: compact chrome */
@media (max-height: 480px) and (orientation: landscape) {
	.gp-bottomnav { display: none; }
	body.gp-has-bottomnav { padding-bottom: 0; }
}

/* hero on small screens */
@media (max-width: 768px) {
	.gp-breadcrumbs-bar { margin-top: 10px; }
	.gp-page-hero { padding: 6px 0 0; }
	.gp-page-hero__meta { gap: 4px 14px; font-size: 0.84rem; }
}

/* SaaS homepage hero polish */
@media (max-width: 768px) {
	.gp-hero { padding: 42px 0 40px; }
	.gp-hero__actions { gap: 10px; }
	.gp-hero__actions .gp-btn--lg { width: 100%; max-width: 320px; justify-content: center; }
	.gp-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
	.gp-hero__stat dd { font-size: 1.25rem; }
	.gp-quicktabs { margin-top: 24px; border-radius: 14px; }
	.gp-quicktabs__panel { flex-direction: column; text-align: center; padding: 18px 16px; gap: 12px; }
	.gp-quicktabs__open { width: 100%; justify-content: center; }
	.gp-home-section__title { font-size: 1.15rem; }
	.gp-home-section__title .gp-icon { width: 28px; height: 28px; padding: 6px; }
}

/* touch friendliness */
@media (hover: none) and (pointer: coarse) {
	.gp-chip, .gp-btn, .gp-action-btn, .gp-faq__toggle, .gp-pagination .page-numbers { min-height: 44px; }
	.gp-tool-card__fav { width: 40px; height: 40px; }
}

/* ==== one-line professional site title on mobile =========================
   GeneratePress gives .main-title a max-width of calc(100% - 120px) assuming
   a logo sits beside it; on the slim mobile header that collapses the title
   to 0px. Remove the offset, force a single clipped line, and free room by
   moving the design/suggest buttons to the drawer menu on touch devices. */
@media (max-width: 768px) {
	.gp-tools-child .main-title a {
		display: block; max-width: 100%; overflow: hidden;
		text-overflow: ellipsis; white-space: nowrap;
	}
	/* design/suggest button visibility is admin-controlled per device
	   (Settings → Header); when off, they live in the drawer menu. */
}

/* ==== search modal keeps the bottom nav reachable =========================
   The modal used to stack above the nav (1150 > 1050) and hide it. Cap the
   modal below the nav and shorten the panel so nothing hides underneath. */
@media (max-width: 768px) {
	.gp-search-modal { z-index: 1045; }
	.gp-search-modal__panel { margin-top: 4vh; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); }
}