/*
 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;
}

.main-navigation .current-menu-item > a {
  font-weight: 700 !important;
}

.footer-menu-container li.current-menu-item > a,
.footer-menu-container li.current_page_item > a {
  font-weight: 700 !important;
}

.footer-social-wrap svg {
  display: block;
}



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

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

h1.quote { 
  color: #ffffff; 
  font-size: 60px !important; 
	line-height: 1.2 !important;
	font-weight: 600; 
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}


h2.quote { 
  color: #ffffff; 
  font-size: 60px !important; 
	line-height: 1.2  !important;
	font-weight: 600; 
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}


.h1-background {
	
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.painting-caption {
	font-size: 16px;
	line-height: 1.5;
}

/*--------------------------------------------------------------
# COMPONENTS
--------------------------------------------------------------*/
/* gallery - align captions left */
.kadence-blocks-gallery-item__caption {
	text-align: left !important;
}

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

@media (max-width: 1024px)	{
 
h1.quote { 
  color: #ffffff; 
  font-size: 40px !important; 
	line-height: 1.2 !important;
	font-weight: 600; 
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}


h2.quote { 
  color: #ffffff; 
  font-size: 40px !important; 
	line-height: 1.2  !important;
	font-weight: 600; 
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
	
	.site-header-row {
		padding-left: 20px;
		padding-right: 20px; 
}

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

}


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

}

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

#colophon{
	margin-top: 50px; 
}
	.site-header-section-right {
		margin-right: 10px; 
}
	
/*--------------------------------------------------------------
# mobile menu
--------------------------------------------------------------*/
	
/* Mobile menu – current page */
/* Mobile menu – current page */
#mobile-site-navigation li.current-menu-item > a,
#mobile-site-navigation li.current_page_item > a {
  font-weight: 700 !important;
}


}