/*
Theme Name: WCC Custom Theme
Theme URI: 
Author: Justin Shaw
Author URI: justinshaw.ca
Description: Custom theme for the Wildlife conservation club at University of Calgary
Tags: 
Version: 1.1
Requires at least: 
Tested up to:
Requires PHP: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Resets any browser default css styling */
@import url(reset.css);

/* css variables making colours consistent */
:root {
  --white: #ffffff;
	--black: #000000;
	--yellow: #DDA15E;
	--shadow: #D8D8D8;
  --light-brown: #B6AD90;
  --brown: #A68A64;
  --orange: #936639;
  --light-light-green: #A4AC86;
  --light-green: #656D4A;
  --dark-green: #414833;
  --light-grey: #D9D9D9;
}

/* 
	Table of contents
	1. Fonts
	2. Header
		- general header styling
		- main navigation (mobile / desktop)
		- logo styling (image / text)
	3. Footer
		- general styling
  4. General Styling
  5. Landing Pge
  6. About the Club Page
  7. Get Involved
  8. Submissions
  9. Submit your Work
  10. Single post Styling

*/

/* #################################################### 

	Font Styles  

#################################################### 
*/


/* <weight>: Use a value from 100 to 900 - "regular" = 400 */

p, a, li, span, div {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 18px;
  line-height: 1.5;
}


h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* #################################################### 

	Header styles  

#################################################### 
*/

.site-header {
	background-color: var(--white);
	display: flex;
  justify-content: space-between;
	height: 4rem;
	box-shadow: 5px 5px 5px var(--shadow);
	margin-left: -1rem;
	padding-left: 1.5rem;
  
}

.mobile-nav-button {
 width: 40px;
 height: 40px;
 background-color: transparent;
 border: none;
 border-radius: none;
}

.page-nav {
  display: none;
}

.toggled {
  display: block;
}

.main-navigation {
	margin-top: 1rem;
}

.page-nav .menu {
  position: absolute;
  top: 60px;
  left: 0;
	display: flex;
	flex-direction: column;
	list-style: none;
  background-color: var(--light-green);
  width: 100lvw;
  height: 100lvh;
  padding-top: 50px;
  z-index: 5;
}

.main-navigation li {
	text-transform: uppercase;
  width: max-content;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.main-navigation li a {
  font-size: 24px;
  font-weight: 700;
}

.menu li a {
	text-decoration: none;
	color: var(--black);
}

.main-navigation a:hover {
	text-decoration: underline;
	color: var(--yellow);
}

#primary-menu .current-menu-item a[aria-current] {
	color: var(--yellow);
	font-weight: 600;
}

.header-site-logo {
  margin-top: 0.5rem;
  margin-left: -2rem;
  width: 7.75rem;
}

.header-logo-text {
	width: 5rem;
	font-size: 12px;
}

.header-logo-text a {
	text-decoration: none;
	color: var(--yellow);
  line-height: 12px;
}

.header-logo-text a:hover {
	text-decoration: underline;
}

@media screen and (min-width: 920px) {

  .header-site-logo {
    margin-left: 1rem;
  }

  .site-header {
    flex-direction: row-reverse;
  }

  .main-navigation li a {
    font-weight: 400;
    font-size: 18px;
  }

  .mobile-nav-button {
    display: none;
  }

  .page-nav {
    display: block;
  }

  .page-nav .menu {
    flex-direction: row;
    justify-content: space-around;
    top: 0;
    padding-top: 1rem;
    background-color: transparent;
    height: auto;
    z-index: 0;
    left: 130px;
    width: 50rem;
  }
}



/* #################################################### 

	Footer styles  

#################################################### 
*/


.footer-content {
	background-color: var(--light-green);
  max-width: 100%;
  padding: 18px;
  text-align: center;
}

.footer-logo-text a {
	text-decoration: none;
  font-weight: 900;
  font-size: 26px;
	color: var(--black);
}

.footer-menus {
  margin-top: 2rem;
}

.footer-menu-col {
  margin-bottom: 1.5rem;
}
.footer-menu-col h3 {
  margin-bottom: 1rem;
}

.footer-menu-col li {
  margin-bottom: 0.5rem;
}

.footer-menu-col li a:hover {
  color: var(--yellow);
  text-decoration: underline;
}

.hidden {
	display: none;
}

@media screen and (min-width: 920px) {

  .footer-logo-text{
    margin: 1rem;
  }

  .footer-content {
    text-align: start;
  }

  .footer-menus {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    max-width: 50rem;
    margin: 3rem auto;
  }
}


/* #################################################### 

	General styles  

#################################################### 
*/

.site-main {
  max-width: 60rem;
  margin: 0 auto;
}

.content-container {
  padding: 25px;
}

.content-container h2 {
  font-size:24px;
  font-weight: 600;
  margin-bottom: 1rem;
}

.multi-intro h3 {
  margin-bottom: 1rem;
}

.multi-intro p {
  margin-bottom: 2rem;
}

.dotted-list {
  list-style: disc;
  margin-left: 2rem;
}

.dotted-list li {
  margin-bottom: 0.5rem;
}

.list-lg li {
 margin-bottom: 1rem;
}

.spacer {
  margin-top: 3rem;
}

.bolded {
  font-weight: 700;
}


.page-banner {
  background-size: cover; 
  background-repeat: no-repeat;
  background-position-x: 0%;
  height: 19rem; 
}

.page-banner h1 {
  padding: 10rem 0 0 2rem;
  font-size: 30px;
  text-shadow: 1px 1px 2px var(--shadow);
}

.alt-banner-text h1 {
  color: var(--white);
  text-shadow: 1px 1px 2px var(--black); 
}

.home-banner h1 {
  padding: 3rem 0 0 2rem;
  width: 10rem;
  
}

.home-banner p {
  font-weight: 600;
  font-size: 24px;
  text-shadow: 1px 1px var(--shadow);
  padding: 1rem 2rem;
  
}

.logged-out a, .wp-block-loginout.logged-in a {
  padding: 1rem;
  background-color: var(--orange);
  color: var(--white);
  border-radius: 8px;
}


@media screen and (min-width: 920px) {

  .site-main {
    margin-top: 1rem;
  }
  .page-banner {
    background-position: center;
  }

  .home-banner {
    background-position-y: 20%;
  }

}
/* #################################################### 

	Landing Page Styles  

#################################################### 
*/

.home-posts h2 {
  font-size: 24px;
  margin-bottom: 2rem;
}

.submission-block {
  background-color: #fafafa;
	box-shadow: 0 4px 8px var(--shadow), 0 6px 20px var(--shadow);
  padding: 1.5rem;
  border-radius: 15px;
  margin: 0 1rem 2rem 1rem;
}

.be-the-difference-container {
  background-color: var(--light-brown);
  
}

.be-the-difference {
  padding: 2rem;
  margin-bottom: 2rem;
}

.be-the-difference-container img {
  width: 100%;
  margin-bottom: -8px;
}

.be-the-difference h2 {
  font-size: 24px;
  margin-bottom: 1rem;
}

.be-the-difference p {
  margin-bottom: 1rem;
}

.why-needed h2 {
  font-size: 24px;
  margin-bottom: 1rem;
}

.why-needed {
  margin-top: 2rem;
}

.why-needed p {
  margin-bottom: 1rem;
}
@media screen and (min-width: 920px) {

  .be-the-difference-container {
    display: flex;
    border-radius: 15px;
  }

  .be-the-difference {
    width: 50%;
  }

  .be-the-difference-container img {
    max-width: 50%;
    margin-bottom: 0px;
    border-radius: 0 15px 15px 0;
  }
 
}

/* #################################################### 

	About the club Styles  

#################################################### 
*/

.about-main {
  margin: 25px 0;
}

.about-card-lb {
  background-color: var(--light-brown);
}
.about-card-br {
  background-color: var(--brown);
}
.about-card-or {
  background-color: var(--orange);
}
.about-card-lg {
  background-color: var(--light-green);
  color: var(--shadow);
}
.about-card-dg {
  background-color: var(--dark-green);
  color: var(--shadow);
  margin-bottom: 25px;
}

@media screen and (min-width: 920px) {
  .about-card-grid-top, .about-card-grid-bottom  {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
  }
  .about-card h2 {
    max-width: 250px;
  }

  .about-card-lb {
    
    flex: 33.3333%;
  }

  .about-card-br {
    flex: 33.3333%;
  }

  .about-card-or {
    flex: 33.3333%;
  }
  .about-card-or h2 {
    height: 72px;
  }
    
  .about-card-lg {
    flex: 50%;
  }

  .about-card-dg {
    flex: 50%;
    margin-bottom: 0px;
  }

}

/* #################################################### 

	Get Involved Styles  

#################################################### 
*/

.get-involved h2 {
  margin: 2rem 0 1rem;
}

.get-involved p {
  margin-bottom: 1rem;
}

.get-involved ul {
  list-style-type: disc;
  margin-left: 2rem;
}


/* #################################################### 

	Submissions Styles  

#################################################### 
*/

.submission-container {
  margin: 1rem; 
}

.submissions-container {
  margin-top: 2rem;
}

.post-image-preview {
  margin-bottom: 1rem;
}

.submission-title {
  font-size: 20px;
  margin-bottom: 1rem;
}

.submission-category ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.submission-category li {
  background-color: var(--light-grey);
  padding: 0.25rem 1rem;
  border-radius: 25px;
}

.submission-category a {
  color: var(--black);
  text-decoration: none;
}

.submission-category a:hover {
  text-decoration: underline;
}

.submission-excerpt {
  margin-top: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.submission-author {
  margin-top: 1rem;
}

@media screen and (min-width: 920px) {

  .post-image-preview {
    margin-bottom: 0;
    margin-right: 1rem;
  }

  .post-image-preview img {
    border-radius: 5px;
  }

  .post-thumbnail img {
    max-width: 100%;
    height: auto;
  }

}


/* #################################################### 

	Submit your Work Styles  

#################################################### 
*/

.get-started-button {
  background-color: var(--brown);
  border-radius: 10px;
  padding: 1rem 0;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display:inline-block;
  margin-top: 1rem;
  color: var(--black);
  text-decoration: none;
}

.get-started-button:hover {
  text-decoration: underline;
}

.get-started-button p {
  font-weight: 800;
  width: 100%;
  margin: 0 auto;
}


/* #################################################### 

	Single Posts Styles - single.php  / template-parts/content.php

#################################################### 
*/

.post-container {
  margin: 2rem 1.5rem;
}

.post-content {
  margin-bottom: 2rem;
}

.post-title {
  font-size: 33px;
}

.post-meta {
  margin: 1rem 0;
}

.post-meta .updated {
  display: none;
}

/* edit post if user is logged in - template-tags.php line 96-110 */
.edit-link {
  display: block;
}

.post-navigation {
  margin: 2rem 0;
}

.cat-title {
  margin: 0.5rem 0;
}

.cat-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat-links a {
  background-color: var(--light-grey);
  padding: 0.25rem 1rem;
  border-radius: 25px;
  color: var(--black);
  text-decoration: none;
}

.cat-links a:hover {
  text-decoration: underline;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* #################################################### 

	comments.php

#################################################### 
*/

.comment-form-comment {
  display: flex;
  flex-direction: column;
  margin: 1rem 0rem;
}

.form-submit input#submit {
  background-color: var(--brown);
  padding: 10px;
  border-radius: 5px;
  border: none;
}

.comment-author, .comment-respond, .comment-content {
  margin-top: 1rem;
}

.comment-body .reply {
  margin-top: 0.5rem;
}



/* #################################################### 

	404 Page Styles  

#################################################### 
*/

.page-header, .error-search, .error-posts, .error-categories {
  margin: 1rem 0;
}


/* #################################################### 

	Archive / Category Styles  

#################################################### 
*/

.archive-page-post .post {
  margin-bottom: 2rem;
}