/* LIGHT PLUS UK - phone and tablet polish (20 Sep 2026)
 *
 * Loaded after the theme's own styles. EVERY rule in this file lives inside a
 * max-width media query, so nothing here can reach a desktop screen (1025px and
 * wider). The site already stacked correctly on small screens; this file fixes
 * the comfort problems found by measuring real pages at 375px and 820px:
 *
 *   - form fields under 16px made iOS zoom in whenever one was tapped
 *   - links in the header, footer and lists were under the 36px touch size
 *   - 10.5-11.5px labels are hard to read on a phone
 *   - a few sections kept the desktop's 40px side padding, leaving ~295px of text
 *   - the About hero grew to ~1050px tall on a tablet
 */

/* ------------------------------------------------------------------
 * Tablets and below (<= 1024px)
 * ---------------------------------------------------------------- */
@media (max-width: 1024px) {

	/* Nothing may stick out sideways. */
	html, body { max-width: 100%; overflow-x: hidden; }
	img, video, svg, iframe { max-width: 100%; }

	/* Anchor links land below the sticky header instead of behind it. */
	html { scroll-padding-top: 110px; }

	/* Wide tables scroll on their own instead of stretching the page. */
	table { max-width: 100%; }

	/* The About hero is a photo panel, not a screen filler: cap it on tablets.
	   The heading renders at 88px here, which is what made the panel ~1050px tall. */
	.lp-about-hero { min-height: 0 !important; }
	.lp-about-hero h1 { font-size: clamp(30px, 6.4vw, 52px) !important; }
	.lp-about-hero > div:last-child { padding-top: 120px !important; }
}

/* ------------------------------------------------------------------
 * Phones and small tablets (<= 780px)
 * ---------------------------------------------------------------- */
@media (max-width: 780px) {

	/* iOS zooms into any field smaller than 16px the moment it is tapped. */
	input, select, textarea { font-size: 16px !important; }
	input[type="submit"], button { font-size: 15px; }

	/* Comfortable touch targets in the header, footer and legal row. */
	.lp-footer a, .lp-footer-legal a, .lpsn-header nav a, .lp-nav a, .lp-mega a {
		display: inline-block;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* Small print stays readable. These sizes are set inline all over the theme. */
	[style*="font-size: 10px"], [style*="font-size:10px"],
	[style*="font-size: 10.5px"], [style*="font-size:10.5px"],
	[style*="font-size: 11px"], [style*="font-size:11px"],
	[style*="font-size: 11.5px"], [style*="font-size:11.5px"] { font-size: 12.5px !important; }

	/* Section gutters: 20px each side rather than the desktop's 40px, which left
	   only about 295px for text on a 375px phone. Padding only - never margins. */
	div[style*="padding: 84px 40px"], div[style*="padding: 88px 40px"],
	div[style*="padding: 78px 40px"], div[style*="padding: 76px 40px"],
	div[style*="padding: 90px 40px"], div[style*="padding: 64px 40px"],
	div[style*="padding: 66px 40px"], div[style*="padding: 60px 40px"],
	div[style*="padding: 0 40px"], div[style*="padding: 26px 40px"] {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Long single-column text blocks get the same gutters. */
	.lp-terms, .lp-legal, .lp-doc { padding-left: 20px !important; padding-right: 20px !important; }

	/* Headings: shorter lines wrap better than they shrink. */
	h1 { word-break: normal; overflow-wrap: anywhere; }

	/* The About hero on a phone: enough for the words, no more. */
	.lp-about-hero > div:last-child { padding-top: 96px !important; }

	/* Nine trust badges cannot sit on one line at 375px. Smaller, tighter and centred,
	   so they wrap into neat rows instead of a ragged left-aligned block (21 Sep 2026). */
	.lp-footer-badges { gap: 16px 18px !important; justify-content: center; }
	.lp-footer-badges img { height: 44px !important; }
	.lp-footer-badges .lp-badge-end { margin-left: 0 !important; }
}

/* ------------------------------------------------------------------
 * Small phones (<= 430px)
 * ---------------------------------------------------------------- */
@media (max-width: 430px) {

	/* Two-column blocks that end up at ~150px per column read better stacked. */
	.lp-onpaper { grid-template-columns: 1fr !important; }
	/* .lp-footer-cats stays at two columns - one column made the footer twice as tall. */

	/* Buttons side by side become full width, one per line. */
	.lp-hero-actions a, .lpsn-cta { width: 100%; text-align: center; }
}