/* 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');

/* Define my theme colors */
:root {
	/* Test site */
	--main-color: var(--color-gray-800);
	--secondary-color: var(--color-gray-700);
	--header-height: 120px;
	--site-width: 1200px;
	--sidebar-width: 280px;

 	/* West Edge site */
	--main-color: #43383C;
	--secondary-color: #2D1B0F;
	--header-height: 168px;
	--site-width: 1200px;
	--sidebar-width: 300px;

	/* Set content width here */
	/* I'm doing this here as @media doesn't support variables */
	@media (width >= 980px) { 
		/* Set the sidebar width */
		.sidebar {
			width: var(--sidebar-width); 
		}
		/* Enable flex display when width >= content-width */
		.content-flex {
			display: flex;
		}
		/* Enable flex to flex-row when width >= content-width */
		.content-row {
			flex-direction: row;
		}
		/* Hide content when width >= content-width */
		.content-hidden {
			display: none;
		}
		/* Add x padding when width >= content-width */
		.content-paddingx {
			padding-inline: calc(var(--spacing) * 4);
		}
	}
}

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

/* This makes sure my navigation buttons stay white without an underline */
.ts-nav-button a {
	color: white;
	text-decoration: none;
	/* Add an underline when we hover */
	&:hover {
		@media (hover: hover) {
			text-decoration: none;
		}
  	}
}

/* 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(--main-color);
	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 */
.comment-submit, #wpmem_reg .buttons, #wpmem_login .buttons, .document-download-btn, .ts-profile-button, .ts-nav-button {
	background-color: var(--main-color);
	&:hover {
		@media (hover: hover) {
			background-color: var(--secondary-color);
			text-decoration: none;
		}
	}
	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;
	font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
	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;
}

/* 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(--secondary-color);
        }
    }
}

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

/* Style a line separator in the sidebar */
.line-with-text { 
	width: 70%; 
	margin-left: auto; 
	margin-right: auto;
	text-align: center; 
	border-bottom: 1px solid var(--color-blue-700);
	line-height: 0.1em; 
} 

/* Style the text that appears over the line in the sidebar */
.line-with-text span { 
	background: white;
	padding: 0 10px; 
}

/* ------------------------------- */
/* 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: var(--main-color);
	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);
}

/* ------------------------------- */
/* LOGIN FORM                      */
/* ------------------------------- */

/* Set the margin on sidebar the login form */
.ts-login-form {
	margin-top: 10px;
}

/* Style the textboxes in the login form */
.ts-login-form #user_login, .ts-login-form #user_pass {
	width: 100%;
	padding: 2px;
	background-color: #FFF;
	border: 1px solid lightgray;
	outline: none;
}

/* Style the login form submit button */
.ts-login-form .login-btn {
	background-color: var(--main-color);
	&:hover {
		@media (hover: hover) {
			background-color: var(--secondary-color);
			text-decoration: none;
		}
	}
	color: var(--color-white);
	padding: 0px 20px;
	height: 30px;
	border-radius: 0.25rem;
	margin-top: 10px;
	margin-right: 20px;
}

/* Place a margin under login status widget */
.ts-login-status {
	margin-bottom: 20px;
}

/* Place a margin under the Edit your info and change password links */
.profile-password {
	margin-bottom: 20px;
}

/* Style the Forget and Register hyperlinks - set their margin */
.ts-login-form #forgot-password, .ts-login-form  #register-account, .link-text-username a {
	margin-right: 20px;
}

/* Style the error message if the password or user name is invalid */
.login-error {
	width: 90%;
	padding: 5px;
	background-color: #FFF;
	border: 1px solid lightgray;
	color: var(--main-color);
	text-align: center;
	margin-top: 10px
}

/* ----------------------------------- */
/* PROFILE / PASSWORD / REGISTER FORMS */
/* ----------------------------------- */

/* Style the textboxes in the user profile form */
.ts-profile-form .textbox, .ts-password-form .textbox, .ts-register-form .textbox, .ts-forgot-form .textbox {
	width: 100%;
	padding: 2px;
	background-color: #FFF;
	border: 1px solid lightgray;
	outline: none;
}

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

/* Remove any underline if a H1 heading is a hyperlink */
.post-header-link:hover, .event-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, .event-header-link:hover > h1 {
	background-color: var(--secondary-color);
}

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

/* ------------------------------- */
/* EVENT INDEX PAGE                */
/* ------------------------------- */

/* The event button NOT active */
.event-toggle-btn {
	background-color: var(--main-color);
	&:hover {
		@media (hover: hover) {
			background-color: var(--main-color);
			text-decoration: none;
		}
	}
	color: var(--color-white);
	display: inline-block;
	padding: 8px 14px;
	margin-right: 10px;
	width: 150px;
	border-radius: 0.25rem;
	text-align: center;
	text-decoration: none;
	/* font-weight: 600; */
}

/* The active event button */
.event-toggle-btn.active {
	background: var(--color-gray-400);
	color:var(--color-black);
}

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

/* Flex container for videos */
.videoGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 40px;
  padding: 20px;
}

/* Define a video container with a nice box shadow */
.videoContainer {
  flex: 1 1 300px; /* Grow, shrink, base width */
  max-width: 300px;
  aspect-ratio: 6/4;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  object-fit: contain;
}

/* By default hide the video when the page loads */
.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;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.videoPlayer {
  z-index: 10; /* Add this to make sure video is on top */
}

.videoPreviewImage {
  z-index: 1;
}

.videoPreviewImageOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 20px;
  color: white;
  z-index: 2;
}

.videoPlayerControl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  z-index: 3;
}

.videoPlayerTitle {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.videoContainer:hover .videoPreviewImage {
  transform: scale(1.05);
}

.videoContainer:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

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

video {
  width: 100%;
  height: auto;
  object-fit: contain;
  background-color: black; /* ensures bars look clean */
}

/* When fullscreen */
video:fullscreen {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: black;
}

/* Safari uses a different pseudo-class */
video::-webkit-media-controls-fullscreen-button,
video:-webkit-full-screen {
  object-fit: contain;
  background-color: black;
}

/* ------------------------------- */
/* BOARD PAGE                      */
/* ------------------------------- */

/* The board members container - making sure it wraps as we want when the screen is smaller */
.board-members {
	display: flex;
	flex-direction: column;
	margin: 30px 30px;
	justify-content: center;
	@media (width >= 650px) {            
		flex-direction: row;
		justify-content: left;
	}
}

/* Stop the first column from shrinking */
.board-col1 {
	flex-shrink:0 ;
	margin-top: -10px;
}

/* Set the font details for the board position */
.board-position {
	font-size: 20px; 
	font-weight: 400;
}

/* Set the board image size */
.board-img {
	width: 130px;
}

/* Add some padding when the screen is large for the board second column - their details */
.board-col2 {
	padding-top: 20px;
	padding-left: 0px;
	@media (width >= 650px) {            
		padding-left: 30px;	
	}
}

/* ------------------------------- */
/* RESIDENT PAGE                   */
/* ------------------------------- */

/* Remove double border around the resident table */
.resident-table {
	border-collapse: collapse;
}

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

/* Alternate the color of the table rows - make it look cool */
.resident-table tr:nth-child(even) {
	background-color: #f2f2f2;
}