/*
 * iDevice Fit — Full Screen for Apple Devices
 * Fixes applied to the front end of curiousresearch.org so the site
 * fits the screen and behaves correctly on iPhone / iPad in Safari
 * and Chrome for iOS (and Home Screen "app" mode).
 *
 * Each block below is gated by a body class that the plugin toggles
 * from Settings → iDevice Fit, so any individual fix can be switched
 * off without editing this file.
 */

/* ------------------------------------------------------------------
 * Base: always-safe resets, regardless of toggles.
 * ------------------------------------------------------------------ */
html {
	-webkit-text-size-adjust: 100%; /* stop iOS auto-enlarging text on rotate */
	text-size-adjust: 100%;
}

/* ------------------------------------------------------------------
 * 1. Kill horizontal scrolling / off-screen content (crif-overflow-fix)
 * ------------------------------------------------------------------ */
body.crif-overflow-fix {
	overflow-x: hidden;
	max-width: 100vw;
}

body.crif-overflow-fix html {
	overflow-x: hidden;
}

body.crif-overflow-fix img,
body.crif-overflow-fix video,
body.crif-overflow-fix iframe,
body.crif-overflow-fix embed,
body.crif-overflow-fix object,
body.crif-overflow-fix svg,
body.crif-overflow-fix table,
body.crif-overflow-fix pre {
	max-width: 100%;
	height: auto;
}

/* Wide tables and preformatted text (common overflow culprits in post
   content) scroll internally instead of pushing the page wide. */
body.crif-overflow-fix table,
body.crif-overflow-fix pre {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Any element a theme/plugin accidentally left at 100vw will otherwise
   overshoot the viewport once a vertical scrollbar or elastic bounce
   is involved. */
body.crif-overflow-fix * {
	max-width: 100%;
}

/* ...but let common layout/utility containers opt back out where 100%
   would break intentional full-bleed sections. */
body.crif-overflow-fix .alignfull,
body.crif-overflow-fix .full-width,
body.crif-overflow-fix [class*="full-width"] {
	max-width: 100vw;
}

/* ------------------------------------------------------------------
 * 2. Safe-area padding around the notch / Dynamic Island / home
 *    indicator (crif-safe-area). Requires viewport-fit=cover, added
 *    by the PHP side.
 * ------------------------------------------------------------------ */
body.crif-safe-area {
	padding-left: env(safe-area-inset-left, 0);
	padding-right: env(safe-area-inset-right, 0);
}

/* Sticky/fixed headers: pad instead of shrink, so the header still
   spans the full width but its content clears the notch. */
body.crif-safe-area .site-header,
body.crif-safe-area header.fixed,
body.crif-safe-area [class*="sticky-header"],
body.crif-safe-area [class*="fixed-header"] {
	padding-top: env(safe-area-inset-top, 0);
}

/* Fixed footers / bottom nav / cookie bars: keep them clear of the
   home indicator bar. */
body.crif-safe-area footer.fixed,
body.crif-safe-area [class*="fixed-footer"],
body.crif-safe-area [class*="bottom-nav"],
body.crif-safe-area .cookie-notice,
body.crif-safe-area #cookie-notice,
body.crif-safe-area [class*="cookie-banner"] {
	padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ------------------------------------------------------------------
 * 3. 100vh fix (crif-vh-fix). Mobile Safari's address bar shrinks and
 *    grows, so `100vh` in CSS is unreliable and clips content. The
 *    companion JS sets --vh to 1% of the *actual* visible height; use
 *    calc(var(--vh, 1vh) * 100) anywhere you'd otherwise write 100vh.
 *    We also proactively patch the most common full-height selectors.
 * ------------------------------------------------------------------ */
body.crif-vh-fix {
	min-height: 100vh; /* fallback for browsers without JS/custom props */
	min-height: calc(var(--vh, 1vh) * 100);
}

body.crif-vh-fix .full-screen,
body.crif-vh-fix .full-height,
body.crif-vh-fix [class*="vh-100"],
body.crif-vh-fix [class*="min-vh-100"] {
	min-height: 100vh;
	min-height: calc(var(--vh, 1vh) * 100);
}

/* Modern engines: prefer dvh (dynamic viewport height) when supported,
   which makes the JS fallback above unnecessary on newer iOS/Safari. */
@supports (min-height: 100dvh) {
	body.crif-vh-fix {
		min-height: 100dvh;
	}
	body.crif-vh-fix .full-screen,
	body.crif-vh-fix .full-height,
	body.crif-vh-fix [class*="vh-100"],
	body.crif-vh-fix [class*="min-vh-100"] {
		min-height: 100dvh;
	}
}

/* ------------------------------------------------------------------
 * 4. Prevent iOS auto-zoom into form fields (crif-input-zoom-fix).
 *    iOS zooms the page in whenever a focused input's computed
 *    font-size is under 16px; enforcing 16px keeps taps on search,
 *    comment, and newsletter fields from yanking the layout.
 * ------------------------------------------------------------------ */
body.crif-input-zoom-fix input[type="text"],
body.crif-input-zoom-fix input[type="search"],
body.crif-input-zoom-fix input[type="email"],
body.crif-input-zoom-fix input[type="url"],
body.crif-input-zoom-fix input[type="tel"],
body.crif-input-zoom-fix input[type="number"],
body.crif-input-zoom-fix input[type="password"],
body.crif-input-zoom-fix textarea,
body.crif-input-zoom-fix select {
	font-size: 16px;
}

/* ------------------------------------------------------------------
 * 5. General touch/scroll quality-of-life (always on with the plugin
 *    active — cheap, non-destructive improvements).
 * ------------------------------------------------------------------ */
a,
button,
input[type="button"],
input[type="submit"],
.menu-item a {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation; /* removes the old 300ms tap delay */
}

/* Smooth momentum scrolling inside any element the theme marks as an
   internal scroll container (e.g. mobile nav drawers, modals). */
.scroll-container,
[class*="overflow-scroll"],
[class*="menu-drawer"] {
	-webkit-overflow-scrolling: touch;
}