/* The CSS clamp(MIN, PREFERRED, MAX)
restricts a value between a minimum and maximum limit, while dynamically applying a preferred scale (like viewport width) in between. It takes three parameters.

1rem = 16px by default in most browsers.
vw = 1% of horiz pixels in device, 
2vw = 16 pixels on a device with 800 horiz pixels
      This allows for adjusting to device resolution.
	  cell vs tablet vs. large monitor

This style is to help make fonts scale and be readable
	on both cell phones and PC windows  
	
	The specific math formula 1vw + 0.75rem creates a fluid font size that scales smoothly between mobile and desktop screens. It combines screen width tracking with a stable base size.Here is exactly how the browser calculates that specific value.
	
	Breaking Down the MathThe formula adds two different units together:1vw (1% of Viewport Width): This is the dynamic part. If a mobile screen is 400 pixels wide, 1vw is 4px. If a desktop monitor is 1600 pixels wide, 1vw becomes 16px.
	
	0.75rem 	
	(The Base Size): This is the stable, accessible part. Based on the standard 16px browser default, 0.75rem is always 12px.
	
	How It Changes Across Screens
	When the browser loads your page, it instantly adds those two values together based on the user's screen size:
	
	On a small mobile phone (400px wide screen):\(\text{4px\ }(1vw)+\text{12px\ }(0.75rem)=\mathbf{16px}\text{\ font\ size}\)
	
	On a tablet (800px wide screen):\(\text{8px\ }(1vw)+\text{12px\ }(0.75rem)=\mathbf{20px}\text{\ font\ size}\)
	
	On a standard laptop (1400px wide screen):\(\text{14px\ }(1vw)+\text{12px\ }(0.75rem)=\mathbf{26px}\text{\ font\ size}\)
	
	Why This Specific Combination is Used
	If you only use 1vw by itself, the text will shrink to an unreadable 4 pixels on a mobile screen.By adding + 0.75rem, you are guaranteeing a safety floor. 
	
	The text will never drop below that base 12px value from the rem side, while the vw side gently coaxes the text to grow larger as the screen expands.
	*/

body {
	
	/* Mike - do not use Clamp to specify body font size.
	clamp() for the body font-size is generally a bad idea because it can break user accessibility and zoom preferences.  Other elements <p>, etc, reference the body font size and to have it variable makes a cascading mess. */
	
	/* *Why It Is Risky
		• Accessibility Issues: Using viewport units (vw, vh) inside clamp() means text scales based on screen width rather than user settings. This can prevent users with low vision from zooming or scaling text up to 200% comfortably, violating WCAG guidelines.
		• Loss of User Control: Browsers let users set a default font size (usually 16px). A rigid clamp() on the body can override or ignore these personal preferences, making text too small to read on certain screens.
		• Maintenance Headaches: Changing the base body size later makes the math inside every calculated clamp() formula cascade and break across components
	*/
	
	/* The body is establishes a baseline reference used by rem.
	rem = REM = RElative to the Main (body) root size.
	So if we set body to 16 device pixels, 1.5rem = 24 pixels
	A cell may have 400 pixels, a PC 1200 pixels.
	
	Responsive font size with minimum and maximum limits */
	/* clamp(minimum, preferred in viewport units, maximum); 
	If preferred fits, it uses preferred.  
	font-size: clamp(18px, 1vw + 0.75rem, 36px);*/


	/* Recommended fonts, the system-ui lets the device
	use it's own recommended font, or falls back to others. 
	On Apple their own font it optimized for the cell.
		If all else fails, Arial is nearly universal. */
	
	/* Pick the font */
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
 
	margin: 0px;  /* Let title block extend to left edge */
	padding: 10px;  /* ensure text and images never hugged the absolute edge of the viewport*/
	font-size: 16px;
	line-height: 1.6;

	/* The next line seems to have fixed a problem 
	whereby the font size on the DNAMutation_buildup page
	was coming out very small */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

}
/* 
p, ol, li {
	font-size: clamp(18px, 1vw + 0.75rem, 36px);
}
*/ 

p, ol, li {

	/* For Standard Body Text (~16px on mobile to ~18px on desktop) */
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
	line-height: 1.6;
	margin: 8px; 
;
}

h1 {
	font-size: clamp(32px, 5vw, 56px);
	color: #333;
}

h2 {
	font-size: clamp(24px, 3vw, 36px);
	color: #555;
}
/*
	  vw - 1% percent of screen, scales based on number of pixels on device.
	  rem = rem means 16 pixels on most browsers.*/		  

container {
	max-width: 1200px;
	margin: auto;
}