/* 
 media-2025-styles.css 
 */

/*      Responsive design */
/* Make the logo and header etc content responsive */

@media (min-width: 768px)
{
	html { font-size: 18px; }
}

@media (min-width: 1200px)
{
	html { font-size: 22px; }
}

/* +++++++++++++++++++++++++++++++++++++++++ */

@media (max-width: 768px)
{
	html { font-size: 16px; }
	
	body { font-size: 1rem; }
	
	.narrow-header h3
	{
		visibility: visible;
		position: relative;
		width: auto;
		height: 30px;
		margin-top: 0px;
		margin-left: 7px;
		padding: 0;
		border: none;
		color: #ffff00;
		font-size: 1.2rem;
		text-align: left;
	}
	
	header
	{
		line-height: 0.9;
		height: 90px;
		margin-bottom: 2px;
		top: 0px;
	}
	
	.programme-table { max-width: 100%; }
	
	/* 
				.header-content h1 { font-size: 0.6rem; }  H1 NOT USED
			 */
	
	/* ======================================= */
	/* menu */
	.menu ul
	{
		display: none;
		/* Hidden by default */
		flex-direction: column;
		/* Stack items vertically */
		position: fixed;
		/* Fixed position */
		top: 0px;
		background-color: #444466;
		width: max-content;
		overflow-x: auto;
		border: none;
		padding: 0px;
		/*   justify-content: center; /* Center the menu items */
	}
	
	.menu ul.show
	{
		display: flex;
		/* Show the menu when active */
		background-color: #444466;
		top: 30px;
		right: 1px;
	}
	
	.menu li { background-color: transparent; }
	
	.menu-toggle
	{
		display: block;
		/* Show the toggle button */
		font-size: 1.6rem;
		color: var(--greenish);
		background-color: var(--menuback);
		border: none;
		cursor: pointer;
		position: fixed;
		top: -5px;
		/* or more to keep it clear of  the header */
		right: 20px;
		z-index: 12000;
	}
	
	.menu-toggle hover { color: var(--greenhover); }
	
	/* 	==========   next bit to make blue top ++++++++++ */
	
	/* 
									<div class="blue-top">
									    <div class="narrow-header">
									        <h4>Mid Argyll Camera Club</h4>
									    </div> 
									</div>
									 */
	
	/* ======================================= */
	.pagemenu { top: 10px; }
	
	/* ======================================= */
	main
	{
		top: 220px;
		right: 12px;
	}
	
	.intro
	{
		margin-top: 0px;
		/* space below header for wrapped menu */
	}
	
	.intro-image
	{
		margin-top: 20px;
		/* space below header for wrapped menu */
	}
	
	/* ======================================= */
	/* 
.column
	{
 */
		/* min-width: 410px */
		/* Minimum width for responsiveness  but goes wrong */
	/* } */
	
	/* ======================================= */
	/* Make the form responsive */
	/* @media only screen and (max-width: 768px){   */
	.contact-form
	{
		margin: 20px auto;
		max-width: 95%;
	}
	
	input[type="text"], input[type="email"],input[type="phone"], textarea { width: 90%; }
	

}

/* ========== FOR NARROW PHONES IN PORTRAIT  =============== */

/* 
@media (max-width: 400px)
{
	body { font-size: 4vw; }
}
 */

/* Adjust font size for small screens in portrait orientation */

/* 
@media only screen and (max-width: 480px) and (orientation: portrait)
{
	body { font-size: 14px; }
}
 */

/* Adjust font size for small screens in landscape orientation */

/* 
@media only screen and (max-width: 480px) and (orientation: landscape) {
  body {
    font-size: 18px;
  }
}
 */