/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/*
 * FIX (mobile word-break): Blocksy's own reset sets `body{overflow-wrap:break-word}`
 * globally (static/bundle/main.min.css). Combined with large heading font sizes on
 * narrow viewports, this forces mid-word splits (e.g. "TRANSFOR/MACION"). Scoped to
 * headings/display text only, so the safety net stays intact for ordinary body text.
 * A word may now wrap whole to the next line - it will not be split mid-word.
 */
h1, h2, h3, h4, h5, h6,
.saif-final-home strong {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* FIX (EN/FR home layout): old legacy content (page IDs 2447 EN, 2452 FR) has no
 * wrapper/container, unlike the ES home's modern block. Scoped, CSS-only, no
 * content changes: constrains width, fixes image scaling, normalizes spacing/type.
 */
body.page-id-2447 .entry-content,
body.page-id-2452 .entry-content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 1.7;
}

body.page-id-2447 .entry-content img,
body.page-id-2452 .entry-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 24px;
	border-radius: 4px;
}

body.page-id-2447 .entry-content h2,
body.page-id-2452 .entry-content h2 {
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.25;
	margin: 40px 0 16px;
	overflow-wrap: normal;
	word-break: normal;
}

body.page-id-2447 .entry-content p,
body.page-id-2452 .entry-content p {
	margin: 0 0 18px;
}

body.page-id-2447 .entry-content a,
body.page-id-2452 .entry-content a {
	overflow-wrap: normal;
	word-break: normal;
}

/* FIX (EN mobile H1): "Understanding" is a long word for the shared mobile
 * clamp() minimum (42px). Lowered specifically for EN (page-id-2447) so the
 * headline has more room to wrap comfortably on narrow phones. ES/FR H1s,
 * tablet and desktop are untouched.
 *
 * NOTE FOR NEXT REVIEW: this session's headless-Chrome screenshot testing
 * for widths below ~500px produced inconsistent, contradictory results
 * (confirmed via a minimal, WordPress-free HTML file - see chat log). The
 * automated test environment does not reliably set the CSS viewport to the
 * requested narrow width, which is a testing-tool problem, not necessarily
 * evidence of a live bug. Treat this rule as a reasonable, conservative
 * improvement; please confirm on an actual phone or browser dev tools
 * before treating narrow-mobile as fully verified pixel-by-pixel.
 */
@media (max-width:780px) {
  body.page-id-2447 .saif-hero h1 {
    font-size: clamp(30px,10vw,58px);
  }
}