/* ....................FONTS  ..........................*/

/* RUBIK 

  rubik/Rubik-Black.ttf') format('truetype')
  rubik/Rubik-BlackItalic.ttf') format('truetype') 
  rubik/Rubik-Bold.ttf') format('truetype')
  rubik/Rubik-BoldItalic.ttf') format('truetype')
  rubik/Rubik-ExtraBold.ttf') format('truetype')
  rubik/Rubik-ExtraBoldItalic.ttf') format('truetype')
  rubik/Rubik-Italic.ttf') format('truetype')
  rubik/Rubik-Light.ttf') format('truetype') 
  rubik/Rubik-LightItalic.ttf') format('truetype')
  rubik/Rubik-Medium.ttf') format('truetype')
  rubik/Rubik-MediumItalic.ttf') format('truetype') 
  rubik/Rubik-Regular.ttf') format('truetype')
  rubik/Rubik-SemiBold.ttf') format('truetype')
  rubik/Rubik-SemiBoldItalic.ttf') format('truetype') */

@font-face {
  font-family: 'Rubik-Light';
  src: url('/assets/fonts/rubik/Rubik-Light.ttf') format('truetype'); 
}

@font-face {
  font-family: 'Rubik-Bold';
  src: url('/assets/fonts/rubik/Rubik-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Rubik-Regular';
  src: url('/assets/fonts/rubik/Rubik-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Rubik-Medium';
  src: url('/assets/fonts/rubik/Rubik-Medium.ttf') format('truetype');
}


/* ............................Block level font styles..................... */		
h1 	{
	font-size:clamp(2rem, 5vw, 2.8rem);
	font-weight: 500;
	font-family: Rubik-Bold, sans-serif;
	margin: 0;
	color: var(--darkgreycolor);
}

h2 	{
	font-size:clamp(1.6rem, 3.5vw, 2.2rem); 
	font-weight: 400;
	font-family: Rubik-Bold, sans-serif;
	margin: 0;
	color: var(--darkgreycolor);
}	

h3 	{
	font-size:clamp(1.4rem, 2.5vw, 1.8rem);
	font-weight: 400;
	font-family: Rubik-Bold, sans-serif;
	margin: 0;
	color: var(--darkgreycolor);
}	

h4 	{
	font-size:clamp(1.2rem, 2.0vw, 1.4rem);
	font-weight: 400; 
	font-family: Rubik-Bold, sans-serif; 
	margin: 0;
	color: var(--darkgreycolor);
}  

h5 	{
	font-size:clamp(1rem, 1.2vw, 1.2rem); 
	font-weight: 300;
	font-family: Rubik-Light, sans-serif; 
	margin: 0;
	color: var(--darkgreycolor);
}	

h6 	{
	font-size:clamp(0.9rem, 1vw, 1rem);
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif;
	margin: 0;
	color: var(--darkgreycolor);
}

p {
	font-size:clamp(1rem, 1.1vw, 1.2rem); 
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif;
	margin: 0;
	color:var(--darkgreycolor);
	line-height:1.5;
}

ul {                 
  display: flex;
  flex-direction: column;
}

li {
	font-size:clamp(1rem, 1.1vw, 1.2rem); 
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif; 
	margin: 0;
	color:var(--darkgreycolor);
	line-height:1.5;
} 

table {
	font-size:clamp(1rem, 1.1vw, 1.2rem);
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif;
}

summary {
	font-size:clamp(1.0rem, 1.1vw, 1.2rem);
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif; 
	margin: 0;
	color: var(--darkgreycolor);
}  

strong {
	font-weight: 600;
}

/* ............Not block or inline  ....................................*/

th 		{font-size:1.2rem; font-weight: 400; font-family: Rubik-Light, 	sans-serif;}	
td 		{font-size:1.2rem; font-weight: 300; font-family: Rubik-Light, 	sans-serif;}	


fieldset {
	border: 0.0625rem solid var(--lightgreycolor);           /* light gray border */
	border-radius: 0.2rem;
	padding: 1.25rem 1rem 1rem;           /* extra top space for legend */
	margin: 0 0 1rem 0;
	min-width: 0;                         /* prevent overflow in flex/grid */
	background: transparent;              /* keep your page bg */
}

legend	{
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif;
	color:var(--darkgreycolor);
}


/* .............Inline styling so phase out ....................*/

label 	{
	font-family: Rubik-Light, sans-serif;
	color:var(--darkgreycolor);
} 

option	{font-size:1.2rem; font-weight: 300; font-family: Rubik-Light, 	sans-serif;}


/* .............. inline-block size set by global.css ...........................*/

select	{
	font-family: Rubik-Light, sans-serif;
}

input 	{
	font-family: Rubik-Light, sans-serif;
} 

/*...................................HYPERLINKS................................. */

.page-link a{
	font-size:clamp(1rem, 1.2vw, 1.2rem); 
	font-weight: 300;
	font-family: Rubik-Light, sans-serif; 
	text-decoration: underline; 
    opacity:1;
	color: var(--darkbluecolor); 
}	

/* Hover state */
.page-link a:hover {
    transition: color 0.3s ease-in-out; /* Smooth color transition */
	text-decoration: none; 
}

/*...................................FORM VALIDATION................................. */

.invalid-feedback {
	color:var(--redcolor);
	font-weight:300;
	font-size: clamp(1rem, 1.1vw, 1.2rem);
	line-height: 1.5;
	font-family: Rubik-Light;
	display: block;
}	

/*...................................PRE................................. */

.code-block {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size:clamp(1rem, 1.1vw, 1.2rem); 
	font-weight: 300; 
	margin: 0;
}