/*
 Theme Name: Highfive Kadence Child
 Template: kadence
 Author: Holly Evans
 Description: Base Kadence child theme for Highfive Design projects.
 Version: 1.0
*/

/* Add your custom CSS below this line */

/* Helvetica Neue – Thin (100) */
@font-face {
  font-family: "Helvetica Neue";
  src: url("/wp-content/uploads/fonts/HelveticaNeueThin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Neue – Light (300) */
@font-face {
  font-family: "Helvetica Neue";
  src: url("/wp-content/uploads/fonts/HelveticaNeueLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Neue – Roman (400) */
@font-face {
  font-family: "Helvetica Neue";
  src: url("/wp-content/uploads/fonts/HelveticaNeueRoman.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Neue – Medium (500) */
@font-face {
  font-family: "Helvetica Neue";
  src: url("/wp-content/uploads/fonts/HelveticaNeueMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Neue – Bold (700) */
@font-face {
  font-family: "Helvetica Neue";
  src: url("/wp-content/uploads/fonts/HelveticaNeueBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Helvetica Neue – UltraLight (200) — optional */
@font-face {
  font-family: "Helvetica Neue";
  src: url("/wp-content/uploads/fonts/HelveticaNeueUltraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}



/*--------------------------------------------------------------
# GLOBAL RESETS
--------------------------------------------------------------*/
/* Stack footer menu items vertically even with flex on */
#footer-navigation .menu > li {
  flex: 0 0 100% !important;   /* each item takes full width */
}

/* Optional: left-align the text */
#footer-navigation .menu {
  justify-content: flex-start !important;
  text-align: left;
}

/* Footer image overlay using layered background on the same element */
#colophon {
  background-image:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url("http://localhost:10068/wp-content/uploads/2025/12/YOUR-IMAGE-FILENAME.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: 57% 87% !important;
  background-size: cover !important;
}



	

/*--------------------------------------------------------------
# LAYOUT & SPACING
--------------------------------------------------------------*/

#colophon{
	margin-top: 100px; 
}
/*--------------------------------------------------------------
# TYPOGRAPHY
--------------------------------------------------------------*/

h1.quote { 
  color: #ffffff; 
  font-size: 60px !important; 
	line-height: 1.2 !important;
	font-weight: 600; 
}


h2.quote { 
  color: #ffffff; 
  font-size: 60px !important; 
	line-height: 1.2  !important;
	font-weight: 600; 
}


/*--------------------------------------------------------------
# COMPONENTS
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# UTILITIES
--------------------------------------------------------------*/


 
@media (max-width: 600px)	{
	
/*--------------------------------------------------------------
# TYPOGRAPHY
--------------------------------------------------------------*/
h1.quote { 
  color: #ffffff; 
  font-size: 40px !important; 
	padding-left: 0px !important;
	padding-right: 0px !important;

}


h2.quote { 
  color: #ffffff; 
  font-size: 40px !important; 
	padding-left: 0px  !important; 
	padding-right: 0px  !important; 

}
	
/*--------------------------------------------------------------
# LAYOUT & SPACING
--------------------------------------------------------------*/

#colophon{
	margin-top: 0px; 
}
	
}