/* Define @font-face */
@font-face {
  font-family: 'Highway Gothic';
  src: url('/site/templates/styles/HWYGNRRW.TTF') format('truetype');
}
/* @font-face {
  font-family: 'Highway Gothic 2';
  src: url('/site/templates/styles/Fhwaseriesb2020plus0-2OAj8.otf') format('opentype');
} */


* {
  box-sizing: border-box;
}


/* Add background color */
body {
  background-color: #b68759;
  color: #1c150e;
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

/* Create header gradient */
#masthead {
  background: linear-gradient(to bottom, #945734, #e7c4ad);
  padding: 0; /* Adjust padding as needed */
   margin: 0; /* Remove default margin */
  color: #1c150e;
  width: 100%;
}


#masthead-navbar {
  /* Add the background color for the navigation bar */
  background: linear-gradient(to top, #945734, #cfa68f);
  color: #1c150e;
}

#masthead-navbar .uk-navbar-nav > li > a {
    color: #1c150e; /* This will make the text color red */
}

#masthead-navbar .uk-navbar-nav > li.uk-active > a {
    color: #8B4513;  /* Dark brown color */
    font-weight: bold;  /* Bold text */
}

#html-body, body, h1, h2, h3, h4, h5 {
  font-family: 'Highway Gothic', Helvetica, sans-serif;
  color: #1c150e;
}

#masthead-logo img {
	/* image for masthead logo */
	width: 200px;
}

.article-meta {
    font-style: italic;
    color: #956; /* Adjust this for your desired color */
    font-size: 0.9em; /* Making the text slightly smaller */
}

.uk-nav .uk-nav-default > li > a {
   color: #1c150e; /* This will make the text color red */
    background-color: #f4f4f4; /* This is the background color */
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition for hover effects */
}

.uk-nav .uk-nav-default > li > a:hover, 
.uk-nav .uk-nav-default > li.uk-active > a {
    color: #fff; /* This is the text color when hovered/active */
    background-color: #555; /* This is the background color when hovered/active */
}

#edit-page {
	/* the edit page link that appears when page is editable */
	position: absolute;
	top: 10px;
	right: 10px
}

#offcanvas-toggle {
	/* the hamburger icon that toggles the mobile navigation */
	position: absolute;
	top: 10px;
	left: 15px; 
}

#offcanvas-nav .uk-search-input {
	/* the search box that appears in offcanvas nav */
	width: 100%;
}

img.uk-comment-avatar {
	/* avatar that appears in comments */
	width: 60px;
	height: 60px; 
}

@media only screen and (max-width: 959px) {
	/* custom adjustments for mobile layouts under 960px */
	#masthead {
		/* primary nav is not visible, so it needs some padding here */
		padding-bottom: 20px;
	}
}


/****************************************************************
 * Bodycopy text and images
 *
 * These styles are good to have on any ProcessWire site
 *
 */
 
 .categories .uk-button-text {
  color: #000000;
}

.align_left {
	/* for images placed in rich text editor */ 
	float: left;
	margin: 0 1em 0.5em 0; 
	position: relative;
	top: 0.5em;
	max-width: 50%; 
}

.align_right {
	/* for images placed in rich text editor */ 
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%; 
}

.align_center {
	/* for images placed in rich text editor */ 
	display: block;
	margin: 1em auto; 
	position: relative;
	top: 0.5em;
}

figure {
	/* figure for image that has a caption */
	display: table;
	margin: 1em 0;
}

figure figcaption {
	/* display caption text below image contained to image width */
	display: table-caption;
	caption-side: bottom;
	font-size: 13px;
	line-height: 1.4em;
	margin-top: 5px;
	color: #1c150e;
}

@media only screen and (max-width: 767px) {
	/* common PW mobile layout adjustments for widths under 768px */ 

	.align_left, .align_right, .align_center {
		/* display images in center rather than aligned */
		display: block;
		float: none; 
		margin: 1em auto;
		max-width: 100%; 
	}
	
	figure,
    figure figcaption {
		/* let figcaption display as wide as needed below image */
	    display: block;
	    text-align: center;
    }
}