/**
 * mobile.css — responsive corrections for the WPBakery/Ohio-built pages.
 *
 * philsite.css only styles the CPT (template-driven) views. The WPBakery pages — Home,
 * About, Research, Contact — get their layout from Ohio's page-builder widgets, whose
 * per-widget typography is emitted as inline <style> tags. This file patches the places
 * where those inline rules break down on small screens.
 *
 * All fixes are scoped to Ohio's stable widget classes (not the volatile #ohio-custom-*
 * ids, which regenerate) and use !important only where required to beat Ohio's inline
 * <style> block (whose rules are NOT !important, so an important rule always wins).
 */

/* ---------------------------------------------------------------------------
   Hero heading line-height (Home) — CRITICAL FIX
   ---------------------------------------------------------------------------
   The hero H1 (.clb__heading) is configured with its font-size in `rem` but its
   line-height in `vw`. Ohio emits, for ≤768px: `font-size:3rem; line-height:5vw`.
   On a 375px phone that is a 48px font on a ~19px line box, so the wrapped title
   lines stack on top of one another and collide with the badge above and the
   button below — the "everything mixed up at the top" symptom.

   A `vw` line-height can never track a `rem` font-size. Force a unitless
   line-height (scales with whatever font-size Ohio sets) for every viewport
   below the desktop breakpoint (≤1180px covers both Ohio's mobile ≤768 rule and
   its 769–1180 tablet rule, which has the same fault). Desktop (>1180px, where
   font-size and line-height are both 4.5vw) is left untouched.
   Root cause also worth correcting at source: WPBakery → the hero heading →
   Typography → set Line height (mobile & tablet) to a unitless value like 1.1
   instead of `5vw`. */
@media screen and (max-width: 1180px) {
	.clb__heading .title {
		line-height: 1.12 !important;
	}
}

/* ---------------------------------------------------------------------------
   Mobile header — one-line, centered brand name (Header layout 3)
   ---------------------------------------------------------------------------
   Ohio's header-3 puts the text logo "Dr. Nataliia Reva" in the left-part next
   to the hamburger, with the inline "Get in Touch" button in the right-part.
   On phones that squeezes the brand so it wraps to two lines and overlaps the
   hero badge below.

   Fix, scoped to the class Ohio adds only in mobile mode (.header.-mobile):
     1. Hide the inline "Get in Touch" button on mobile. It's redundant there —
        Contact is already in the hamburger menu — and removing it frees the
        whole width for a centred logo. (Desktop keeps the button: the rule is
        gated on .-mobile.)
     2. Absolutely centre the branding in the header bar and force it onto one
        line, so the name sits in the middle of the screen with the hamburger
        alone on the left. */
.header.header-3.-mobile .menu-optional {
	display: none;
}
.header.header-3.-mobile .header-wrap-inner {
	position: relative;
}
.header.header-3.-mobile .branding {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	white-space: nowrap;
}
.header.header-3.-mobile .branding-title,
.header.header-3.-mobile .branding .logo,
.header.header-3.-mobile .branding .logo-dynamic,
.header.header-3.-mobile .branding .logo-dynamic span {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Header clearance on mobile — keep the header off the page content
   ---------------------------------------------------------------------------
   Ohio's header is `position: absolute` (and `fixed` once stuck) — it's out of
   normal flow and overlays the top `--clb-header-height` (12vh) of the page, so
   each page must reserve that space itself. Two content patterns exist, and
   both under-reserve on phones, so the brand name / hamburger sit on top of the
   first content (the hero badge, or the archive eyebrow + heading):

     • philsite/CPT templates (Publications, Talks, singles, topic archives)
       wrap content in `.page-container.top-offset`, whose top padding is only
       `--clb-grid-gutter-5x` (8vh) < the 12vh header.
     • WPBakery pages (Home, About, Research, Contact) open with a 12vh hero
       spacer, which merely reaches the header's bottom edge — zero gap.

   Ohio switches to mobile mode at ≤768px (see data-mobile-menu-resolution=768).
   At that width, give the single main content container (direct child of
   #content) a clear gap below the header. For the CPT pages that means
   "header height + a gap"; for the WPBakery pages the 12vh spacer already
   accounts for the header, so they need only the gap added on top. Both land
   the first content the same ~2rem below the header. */
@media screen and (max-width: 768px) {
	#content.site-content > .page-container.top-offset {
		padding-top: calc(var(--clb-header-height, 12vh) + var(--clb-grid-gutter-2x, 2rem));
	}
	#content.site-content > .page-container:not(.top-offset) {
		padding-top: var(--clb-grid-gutter-2x, 2rem);
	}
}