/* Import the google fonts we want to use for the site - this is called "outfit" */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* ------------------------------- */
/* BASIC HTML TAG DEFAULTS.        */
/* ------------------------------- */

/* The main body of the site */
body {
	font-family: 'Outfit', sans-serif;
	font-weight: 200;
	font-style: normal;
	font-size: 16px;
	margin:0 auto;
	background: #F0F0F0;
}

/* The paragraph tag */
p {
	line-height: 1.6em;
	margin-bottom: 15px;
}

/* The anchor tag for all hyperlinks (we will change some to not do this, but this is the default) */
a {
	color: var(--color-blue-700);
	text-decoration: none;
	/* Add an underline when we hover */
	&:hover {
		@media (hover: hover) {
			text-decoration: underline;
		}
  	}
}

/* The top heading, make this look cool */
h1 {
	font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
	background-color: var(--color-gray-800);
	color: var(--color-white);
	margin-bottom: calc(var(--spacing) * 2);
	padding: calc(var(--spacing) * 2);
	border-bottom-right-radius: var(--radius-lg);
	z-index: 2;
	position: relative;
}

/* The second level heading, smaller with a different color */
h2 {
	font-weight: var(--font-weight-light);
	background-color: var(--color-gray-200);
	border-bottom-right-radius: var(--radius-xl);
	padding: calc(var(--spacing) * 1);
}

/* Style the default behavior for an unordered list */
ul {
	list-style-type: disc;
	padding-left: 30px;
	margin-bottom: 15px;
}

/* Style the default behavior for an ordered list */
ol {
	list-style-type: decimal;
	padding-left: 30px;
	margin-bottom: 15px;
}

/* Not really default, but this is the styling for all the theme's buttons */
/* This includes the comment submit, forgot password/username & register buttons */
.comment-submit, #wpmem_reg .buttons, #wpmem_login .buttons {
	background-color: var(--color-gray-800);
	&:hover {
		@media (hover: hover) {
			background-color: var(--color-gray-700);
		}
	}
	color: var(--color-white);
	padding-block: calc(var(--spacing) * 2);
	padding-inline: calc(var(--spacing) * 4);
	border-radius: 0.25rem;
	margin-top:15px;
}

/* ------------------------------- */
/* HEADER SECTION - INCLUDING MENU */
/* ------------------------------- */

/* Make the site title white (even tho it's a link) remove the a tag underline and change color on hover */
.site-title {
	color: white;
	text-decoration: none;
	/* Change the color when you hover over */
	&:hover {
		@media (hover: hover) {
			text-decoration: none;
			color: #DDD;
		}
  	}
}

/* Make the top menu horizontal, unless we are on mobile devices */
.top-menu {
	list-style-type: none;
	padding-left: 0px;
	margin-bottom: 0px;
	@media (width >= 800px) {
        display: flex;
		flex-direction: row;
    }
}

/* Make the top menu white text with no underline */
.top-menu a {
	text-decoration: none;
	color: white;
}

/* Increase gap between menu items and push the menu to the right (when horizontal) and give a hover color */
.top-menu li {
    /* margin-right: 8px; */
	align-self: flex-end;
	&:hover {
        @media (hover: hover) {
            background-color: var(--color-gray-700);
        }
    }
}

/* Set the padding and margin for the menu items (both horizontal and vertical) */
.top-menu li a {
	display: block;
	padding-block: calc(var(--spacing) * 1.5);
	padding-inline: calc(var(--spacing) * 2.5);
	margin: calc(var(--spacing) * 1);
}

/* ------------------------------- */
/* FOOTER SECTION                  */
/* ------------------------------- */

/* Make the blue a little lighter on the footer, so it's easier to see */
#footer a {
	color: var(--color-blue-400);
}

/* ------------------------------- */
/* SIDEBAR SECTION                 */
/* ------------------------------- */

/* Search form label, have to modify this "invisible" label so we don't get a horizontal scroll bar! */
.ts-widget-search-form label {
	width: auto;
}

/* Style the search input box */
.ts-widget-search-form input {
	width: 65%;
	padding: 2px;
	margin: 10px 10px 20px 10px;
	background-color: #FFF;
	border: 1px solid lightgray;
	outline: none;
}

/* Increase the bottom margin of the search form */
.ts-widget-search-form {
	margin-bottom: 8px;
}

/* Style any unordered list in the side bar, is should have a disc and smaller text */
#sidebar ul {
	list-style-type: disc;
	list-style-position: inside;
	font-size: var(--text-sm);
	padding-bottom: calc(var(--spacing) * 5);
	padding-left: 10px;
	margin-bottom: 5px;
}

/* Give the list items better padding */
#sidebar li {
	padding-inline: calc(var(--spacing) * 2);
	padding-block: calc(var(--spacing) * 0.5);
}

/* Make latest post and menu hyperlinks black with no underline */
#sidebar .wp-block-latest-posts a, #sidebar .wp-block-archives a, #sidebar .wp-block-categories a, #sidebar .menu a {
	color: black;
	text-decoration: none;
}

/* ------------------------------- */
/* COMMENTS SECTION                */
/* ------------------------------- */

/* Style the displayed comments */
.comment {
	margin-top: 10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	border-top: 1px solid lightgray;
}

.commentlist {
	list-style-type: none;
}

/* Style the comment header */
/* Move the icon for the user */
.vcard {
	display: flex;
	flex-direction: col;
}

/* Move the commenter's name */
.vcard .fn {
  	padding-left: calc(var(--spacing) * 5);
}

/* Move the word "says" */
.vcard .says {
  	padding-left: calc(var(--spacing) * 2);
}

/* Move and resize comment meta data (dates, edit button etc.) */
.comment-meta {
  	padding-left: calc(var(--spacing) * 20);
  	position: relative;
  	top: calc(var(--spacing) * -10);
  	font-size: var(--text-sm);
  	line-height: var(--tw-leading, var(--text-sm--line-height));
  	color: var(--color-gray-400);
}

/* Move the actual comment to below the commenters details */
.comment-body p {
  	padding-left: calc(var(--spacing) * 20);
  	position: relative;
  	top: calc(var(--spacing) * -8);
}

/* Style the comment input box */
.comments-form-group textarea, .comments-form-group input {
	border:solid 1px lightgray; 
	width:100%; 
	outline: none;
}

/* Move the replay to comment link */
.reply {
	position: relative;
	top: calc(var(--spacing) * -5);
	text-align: left;
}

/* Move any comment responce - indenting it in */
.comment .children {
	margin-left: calc(var(--spacing) * 10);
	list-style-type: none;
}	

/* Move the cancel replaying to a comment link */
#cancel-comment-reply-link {
  	padding-left: calc(var(--spacing) * 2);
}

/* ------------------------------- */
/* 404 PAGE SECTION                */
/* ------------------------------- */

/* Style the header for the 404 pagers title */
.header-404 {
	display: flex;
	flex-grow: 1;
	font-size: var(--text-2xl);
	line-height: var(--tw-leading, var(--text-3xl--line-height));
	background-color: #43383C;
	color: var(--color-white);
	margin-bottom: calc(var(--spacing) * 6);
	padding: calc(var(--spacing) * 4);
	border-bottom-right-radius: var(--radius-lg);
} 

 /* Make the colum headings full screen */
.widget_pages, .widget_categories, .widget_recent_entries {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Move the category columns */
.widget_pages .widgettitle, .widget_categories .widgettitle, .widget_recent_entries .widgettitle {
	display: flex;
	margin-inline: calc(var(--spacing) * 2);
}

.widget_pages ul, .widget_categories ul, .widget_recent_entries ul {
	/* margin-left: calc(var(--spacing) * 4); */
	list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;
}

/* Move the unordered list items */
.widget_pages ul li, .widget_categories ul li, .widget_recent_entries ul li {
	margin-left: calc(var(--spacing) * 4);
}

/* ------------------------------- */
/* GENERAL PAGE / POST             */
/* ------------------------------- */

/* Remove any underline if a H1 heading is a hyperlink */
.post-header-link:hover {
	text-decoration: none;
}

/* If a H1 header is wrapped by a hyperlink, change the background color on hover */
.post-header-link:hover > h1 {
	background-color: var(--color-gray-600);
}

/* Add some meta data below posts, showing dates, author and categories */
.meta {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-light);
	background-color: var(--color-gray-200);
	border-bottom-right-radius: var(--radius-xl);
	padding: calc(var(--spacing) * 1);
	padding-top: 10px;
	margin-top: -15px;
	margin-bottom: 4px;
	display: block;
	z-index: 1;
	position: relative;
}

/* Center any post images and give them a nice box shadow */
.post-image {
  	margin-left: auto;
  	margin-right: auto;
	margin-bottom: 30px;
	box-shadow: 5px 5px 20px 5px #aaa;
}

/* ------------------------------- */
/* GALLERY PAGE                    */
/* ------------------------------- */

/* Define a video container with a nice box shadow */
#videoContainer {
	max-width: 300px;
	height: auto;
	aspect-ratio: 6 / 4;
	position: relative;
	cursor: pointer;
	margin-left: auto; 
	margin-right: auto;
	margin-top: 30px;
	border: 8px solid #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #777;
}

/* By default hide the video when the page loads - Javascript will swap the video and image if the user clicks */
#videoPlayer {
	display: none;
}

/* Put the preview image and video over each other in the same place */
#videoPreviewImage, #videoPlayer {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

/* Position the Video h1 heading so it's below the gallery of photos */
#videoHeading {
	margin-top:50px;
}

/* ------------------------------- */
/* GEAR PAGE                       */
/* ------------------------------- */

/* Put a horizontal line between each house and add some padding */
.gear-table th, .gear-table td {
	border-bottom: 1px solid #ddd;
	padding: 10px;
}

/* ------------------------------- */
/* ORPHANED CSS                    */
/* ------------------------------- */

/* Not sure what this is but leaving it for the time being */
/* #mvcwid div {
	display: flex;
	justify-content: center;
	margin: 0px;
	padding: 0px;
} */