/* ===============================================================================================================================
	
		Purpose				:	Guided By Light Style Sheet
		Last updated		:	27th. May 2026
		Project				:	Guided By Light
		Author				:	Thomas Murphy
		Copyright			: 	2020 - 2026, Endeavours Partnership
		
		Node Version		:	23.11.1
	
		File Path			: 	/public/.source/styles.css
								/public/styles.css
																
	=============================================================================================================================== */

	/* === Base (mobile-first) === */

								{
									
									box-sizing: border-box;

								}
								
	a 							{
		
									color: #7393B3;
									font-weight: 400;
									text-decoration: none;

								}
								
	a[href^="mailto:"] 			{
		
									color: #FFFFFF;
									font-size: 0.8rem;
									font-weight: 300;

								}
								
	body 						{
		
									background: #F7F7F7;
									color: #222222;
									font-family: Arial, sans-serif;
									line-height: 1.5;
									margin: 0;

								}
								
	h1, h2, h3 					{

									font-weight: 300;

								}
								
	li, p, td					{
		
									font-size: 0.9rem;
									text-align: left;
									margin-left: 1.5rem;

								}
								
	td							{
		
									padding: 5px;
									text-align: left;
									
								}
								

	/* === Container maintains a comfortable maximum width on large screens === */
	
	.container 					{
		
									margin: 0 auto;
									width: min(100% - 2rem, 1100px);

								}

	.copyright 					{
		
									color: #FFFFFF;
									font-size: 0.5rem;
									height: 20px;
									text-align: center;
									text-indent: 0;

								}
								
	.hidden						{
		
									display: none !important;
										
								}
								
	.h3-toggle					{
		
									color: #7393B3;
									cursor: pointer;
									
								}
								
	.site-footer,
	.site-header 				{
		
									background-image: linear-gradient(to right, #191970, #40E0D0);
									color: #FFFFFF;

								}
								
	.site-footer 				{
		
									font-size: 0.6rem;
									padding: 1rem 0;
									text-align: center;

								}
								
	.header-inner 				{
		
									align-items: center;
									display: flex;
									justify-content: space-between;
									padding: 1rem 0;
									position: relative;
									
								}
								
	.logo 						{
		
									color: #FFFFFF;
									font-size: 1.2rem;
									font-weight: bold;
									text-decoration: none;
									
								}
								
	.menu-toggle 				{
		
									background: none;
									border: 1px solid #FFFFFF;
									border-radius: 0.4rem;
									color: #FFFFFF;
									padding: 0.5rem 0.75rem;
									
								}
								
	textarea.responsive-large 	{
		
									border: 1px solid #ccc;
									border-radius: 8px;
									box-sizing: border-box;
									font-family: Arial;
									font-size: 14px;
									line-height: 1.0;								
									max-width: 100%;
									min-height: 220px;
									overflow: auto;									
									padding: 14px 16px;
									resize: vertical;
									width: 100%;
									
								}
								
	/* === Mobile navigation ( hidden by default ) === */
	
	.nav-menu 					{
		
									background: #FFFFFF;
									border-bottom: 1px solid #000000;
									border-top: 1px solid #000000;
									border-radius: 0.5rem;
									display: none;
									flex-direction: column;
									gap: 0.75rem;
									padding: 1rem;
									position: absolute;
									right: 1rem;
									top: 68px;
									z-index: 30;

								}
								
	.nav-menu.open 				{
		
									display: flex;

								}
								
	.nav-menu a 				{
		
									color: #36454F;
									text-decoration: none;

								}
								
	/* === Page layout === */
	
	.page 						{
		
									padding: 1.5rem 0 3rem;

								}
								
	.hero 						{
		
									padding: 2rem 0;

								}
								
	.hero h1 					{
		
									font-size: 2rem;
									margin-bottom: 0.75rem;
									
								}
								
	.main-content				{
		
									margin: 0 auto;
									padding: 0.8rem;
									text-align: justify;
									
								}
									
								
	/* === Grid defaults ( single column for mobile ) === */

	.features,
	.pricing-grid 				{
		
									display: grid;
									gap: 1rem;
									grid-template-columns: 1fr;
									
								}
								
	.card 						{
		
									background: #FFFFFF;
									border-radius: 0.75rem;
									box-shadow: 0 2px 8px rgba(0,0,0,0.06);
									padding: 1.25rem;

								}

	.card-header 				{

									height: 80px;
									text-align: center;
									
								}
								
	.contact 					{
		
									color: #FFFFFF;
									font-size: 0.6rem;
									text-align: left;
									text-indent: 0;
									
								}
								
	.price 						{
		
									color: #1434A4;
									font-size: 1.3rem;
									font-weight: 400;
									text-align: center;
									text-decoration: underline;
									text-underline-offset: 6px;
									
								}
								
	.pricing					{
		
									text-align: center;
									
								}		
								
	.description				{
		
									height: 150px;
									overflow-y: auto;
									padding-right: 10px;
									
								}
								
	.request					{
		
									padding-top: 30px;
									text-align: center;
									
								}
								
	/* === Form === */
	
	.order-form 				{
		
									display: grid;
									gap: 1rem;
									max-width: 520px;
									
								}
								
	.stripe-notice 				{
		
									font-size: 0.6em;
									padding-top: 1.5rem;
									text-align: center;
									
								}
								
	label 						{
		
									display: grid;
									font-weight: 400;
									gap: 0.3rem;
									
								}
								
	label[for="accept"]			{
		
									display: inline-block;
									font-size: 0.7rem;
									margin-left: 30px;
									margin-top: -34px;
									width: 80%;
									
								}
																							
	input,
	select 						{
		
									border: 1px solid #CCCCCC;
									border-radius: 0.5rem;
									font: inherit;
									padding: 0.4rem;

								}
								
	input[type="checkbox"] 		{
		
									width: 20px;

								}								
								
	.button 					{
		
									background: none;
									border: none;
									border-radius: 0.5rem;
									color: #36454F;
									cursor: pointer;
									display: inline-block;
									font: inherit;
									text-decoration: underline;
									text-underline-offset: 8px;
									
								}
								
	.success 					{
		
									background: #E7F8EC;
									color: #1D6B33;
									border-radius: 0.5rem;
									margin-bottom: 1rem;
									padding: 0.75rem 1rem;
									
								}
								
								
	/* === Tablet / iPad ( portrait & landscape ) === */
	
	/* === apply at 768px and up ( common iPad breakpoint ) === */
	
	@media (min-width: 768px) 
	
		{
			
			.hero h1 			{
				
									font-size: 2.4rem;

								}
								
			/* === Show navigation inline on larger tablets, position static inside header === */
			
			.nav-menu 			{
				
									align-items: center;
									background: transparent;
									border: none;
									display: flex;
									flex-direction: row;
									gap: 1rem;
									padding: 0;
									position: static
									
								}
								
			.menu-toggle		{
			
									/* === Hide mobile menu button on tablets and laqsrger === */
									display: none;

								}
								
			/* === 2-column features / pricing on tablets === */

			.features,
			.pricing-grid		{
			
									grid-template-columns: repeat(2, 1fr);
									
								}
								
			.page 				{
			
									padding: 2rem 0 3rem;

								}
								
			.container 			{
			
									width: min(100% - 3rem, 1100px);
									
								}
								
			.order-form 		{
			
									margin: 0 auto;
									max-width: 640px;

								}
		}
	

	@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) 
	
		{
			
			/* == Slight tweaks for iPad landscape if needed === */

			.hero 				{
				
									padding: 3rem 0;

								}
								
								
			.wide-screen		{
				
									margin: 0 auto;
									width: 80%;
									
								}								
								
		}
		
	/* === Laptop === */
	
	/* === Typical laptop sizes: 1025px and up ( small laptops ) === */
	
	@media (min-width: 1025px) 
	
		{
			
			.hero h1 			{
				
									font-size: 2.6rem;

								}
								
			/* === 3-column layout for features / pricing on laptops === */
			
			.features,
			.pricing-grid 		{
				
									grid-template-columns: repeat(2, 1fr);

								}
								
			.container 			{
				
									width: min(100% - 4rem, 1200px);

								}
								
			.header-inner		{
			
									padding: 1.25rem 0;

								}
								
			.logo 				{
			
									font-size: 1.4rem;

								}
								
			.price				{
			
									font-size: 1.4rem;

								}
								
			.order-form			{
			
									max-width: 720px;
									grid-auto-flow: row;

								}
								
								
			.wide-screen		{
				
									margin: 0 auto;
									width: 80%;
									
								}								
								
		}
	
	
	/* === Desktop / Large screens 	=== */
	
	/* === Extra-wide screens 1366px and up === */
	
	@media (min-width: 1366px) 
	
		{
			
			.hero h	1 			{
				
									font-size: 3rem;
									
								}
								
			.features,
			.pricing-grid 		{
				
									gap: 1.5rem;
									grid-template-columns: repeat(3, 1fr);
																		
								}
								
			.container 			{
				
									width: min(100% - 6rem, 1400px);

								}
								
			.logo 				{
				
									font-size: 1.6rem;

								}
								
			.header-inner 		{
				
									margin: 0 auto;
									max-width: 1400px;
									
								}
								
			.price 				{
				
									font-size: 1.6rem;
									
								}
								
								
			.wide-screen		{
				
									margin: 0 auto;
									width: 80%;
									
								}								

								
		}
		
	/* === Accessibility small refinements === */

	button:focus,
	a:focus,
	input:focus 				{
		
									outline: 3px solid rgba(55, 120, 255, 0.18);
									outline-offset: 2px;
									
								}