/***********************/
/*    Variables        */
/***********************/
:root {
  /* Colors */
  --color-red: red;
  --color-black: #000;
  --color-white: white;
  --color-beige: #f6f6ef;
  --color-orange: #add8e6;
  /*     --color-orange: #E79A3F;        */
  --color-yellow: yellow;
  --color-blue: blue;
  --color-dark-blue: #0a0f9b;
  --color-brown: #513616;
  --color-light-brown: #F2B96F;
  --color-dark-brown: #914620;
  --color-gold: #ba8e23;
  --color-gray: gray;
  --color-dark-gray: #121212;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  
  /* Sizing */
  --border-width: 6px;
  --container-width: 70%;
  --outline-width: 1px;
  
  /* Theme - Light Mode */
  --background-color: var(--color-white);
  --outline-color: var(--color-black);
  --header-color: var(--color-black);
  --header-background-color: var(--color-orange);
  --header-title-color: var(--color-black);
  --header-link-color: var(--color-black);
  --header-link-hover-color: var(--color-yellow);
  --post-link-color: var(--color-black);
  --post-link-hover-color: var(--color-blue);
  --main-background-color: var(--color-beige);
  --text-color: var(--color-black);
  --footer-color: var(--color-black);
}

/***********************/
/*  Dark Mode Styles   */
/***********************/
body.dark-mode {
  --background-color: var(--color-black);
  --main-background-color: var(--color-dark-gray);
  --text-color: var(--color-white);
  --post-link-hover-color: var(--color-yellow);
  --post-link-color: var(--color-white);
}

/***********************/
/*    Base Styles      */
/***********************/
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
}

::selection {
  background-color: var(--color-blue);
  color: var(--color-white);
}

/* Common Layout Elements */
header, main, footer {
  width: var(--container-width);
  margin: 0 auto;
}

header {
  margin-top: 15px;
}

/* Text Alignment Helpers */
.div-text-center, .h1-main-title {
  text-align: center;
}

/***********************/
/*    Main Styling     */
/***********************/
main {
  color: var(--text-color);
  background-color: var(--main-background-color);
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.main-ribbon {
  color: var(--header-color);
  width: fit-content;
  margin: var(--spacing-md) auto;
  background-color: var(--color-orange);
  padding: 0 var(--spacing-xs);
}

.main-ribbon h2 {
  margin: 0;
  padding: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: var(--spacing-md) 0;
}

/***********************/
/*   Header Styling    */
/***********************/
header {
  color: var(--header-color);
  background-color: var(--header-background-color);
  display: flex;
  padding: 0;
  position: relative;
  margin-top: 15px;
}

/* Header Structure */
.header-functions-vertical-grouping {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}

/* Common Header Container Styles */
.header-title-container, 
.header-navigation-container {
  color: var(--header-color);
  background-color: var(--header-background-color);
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.header-title-container {
  justify-content: center;
  align-items: center;
}

.header-navigation-container {
  min-height: 10px;
  align-items: center;
}


/* Header Navigation */
header nav {
  font-size: 25px;
  margin: 0 var(--spacing-sm);
  line-height: 1;
}

header nav a {
  text-decoration: none;
  color: var(--header-link-color);
}

header nav a:hover {
  color: var(--header-link-hover-color);
}

header nav a.active-nav {
  color: var(--color-white);
}

.header-welcome-nav {
  margin: 0 var(--spacing-sm) 0 auto;
}

/* Header Title */
h1.header-title {
  color: var(--header-title-color);
  font-family: 'Roboto', 'Arial', sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

h1.header-title a {
  color: var(--header-text-color);
  text-decoration: none;
}

h1.header-title a:hover {
  color: var(--header-link-hover-color);
}

/* Header Logo */
.header-logo {
  margin: 0;
}

.plcbuzz-logo {
  width: 40px;
  height: auto;
  padding: 0;
  margin: 0;
  line-height: 0;
}

/* Dropdown Menu */
.dropdown-container {
  position: relative;
  list-style: none;
}

.dropdown {
  display: none;
  position: absolute;
  background-color: var(--header-background-color);
  min-width: 70px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 4px;
  padding: 0;
  top: 100%;
  left: 0;
  flex-direction: row;
}

.header-navigation-container ul {
  padding: 0;
  list-style: none;
  position: relative;
  margin: 0;
}

.dropdown li {
  list-style: none;
  padding: 8px 12px;
}

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

.dropdown li a:hover {
  color: var(--color-yellow);
}

.dropdown-container:hover .dropdown {
  display: flex;
}

.dropdown-toggle {
  cursor: pointer;
  text-decoration: none;
}


/***********************/
/*  Content Sections   */
/***********************/
/* Welcome Section */
.welcome {
  background-color: var(--main-background-color);
  color: var(--text-color);
  margin: auto;
  padding: var(--spacing-md);
  width: 60%;
  font-size: 23px;
}

.welcome p {
  text-align: left;
  margin: var(--spacing-xs) 0;
}

.welcome h2, h2.welcome-divider {
  text-align: center;
  font-size: 23px;
  margin: var(--spacing-xs) 0;
}

/* Users Section */
.userpage, .registration_login_header, .top-users {
  color: var(--text-color);
}

.top-users, .registration_login_header {
  text-align: center;
}

.registration_login_header {
  margin-left: 60px;
}

.login-message {
  font-size: 20px;
}

/* Comments Section */
.group-comments {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.comments {
  width: 70%;
  text-align: center;
  color: var(--text-color);
  margin: 0 0 var(--spacing-xs) 0;
  background-color: var(--color-light-brown);
  border: 2px solid var(--outline-color);
}

.comment {
  font-size: 20px;
}

.comment-details {
  font-size: 15px;
}

/* Posts Section */
.posts {
  color: var(--text-color);
  padding: var(--spacing-xs);
  width: 90%;
  text-align: left;
}

.post-title {
  font-size: 22px;
  color: var(--color-gray);
  margin: var(--spacing-xs) 0 4px 0;
}

.post-number {
  color: var(--color-gray);
}

.post-title-link {
  font-size: 22px;
  color: var(--post-link-color);
  text-decoration: none;
}

.post-title-link:hover {
  color: var(--post-link-hover-color);
}

.post-details {
  color: var(--color-gray);
  font-size: 18px;
  margin: 0 0 7px var(--spacing-md);
}

.post-author-link {
  text-decoration: none;
  color: var(--color-gray);
}

.post-author-link:hover {
  text-decoration: underline;
}

h2.h2-underlined {
  text-decoration: underline;
  text-align: center;
}

.page-button {
  text-decoration: none;
  font-size: 20px;
  text-align: center;
  margin-bottom: var(--spacing-sm);
}

.page-info {
  font-size: 20px;
  text-align:center;
  margin-bottom: calc(var(--spacing-sm) + 5px);
}

/* Like Button */
button.like-button {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.0em;
  cursor: pointer;
  color: var(--color-yellow);
}

button.like-button:hover,
button.like-button:focus {
  background: none;
  border: none;
}

/***********************/
/*        Stats        */
/***********************/
.most-liked-post {
  text-align:center;
}

/***********************/
/*    Forms Styling    */
/***********************/
.form_with_validation {
  margin: var(--spacing-sm) 0 0 15px;
}

.form_with_submission {
  margin: 0 0 var(--spacing-sm) auto;
}

.form-field {
  margin-bottom: var(--spacing-sm);
}

.submit-button {
  color: var(--color-black);
  font-size: 18px;
  padding: var(--spacing-xs) 16px;
  background-color: var(--color-dark-brown);
  margin: var(--spacing-lg) 0 var(--spacing-md) var(--spacing-lg);
}

.submit-button:hover {
  color: var(--color-black);
  background-color: var(--color-yellow);
}

.logout_button {
  color: var(--color-white);
  font-size: 18px;
  padding: var(--spacing-xs) 16px;
  background-color: var(--color-dark-blue);
  margin: var(--spacing-lg) 100px 100px 600px;
}

/***********************/
/*   Common Elements   */
/***********************/
p {
  text-indent: 2em;
}

.user-settings {
  display: flex;
  justify-content: center;
}

.user-info {
text-align: center;
}

/***********************/
/*    Footer Styles    */
/***********************/
footer {
  background-color: var(--header-background-color);
  color: var(--footer-color);
  padding: var(--spacing-sm) 0;
  font-family: Arial, sans-serif;
  flex-shrink: 0;
}

.footer-search-container .search-form {
  display: flex;
}

.footer-search-container .search-input {
  padding: 1.25px;
  font-size: 16px;
  border: 1px solid var(--color-white);
  border-radius: 4px 0 0 4px;
  background-color: var(--color-white);
  color: var(--color-black);
  outline: none;
  height: 16px;
}

.footer-search-container .search-button {
  padding: 1.25px 5px;
  font-size: 16px;
  border: 1px solid var(--color-white);
  border-left: none;
  border-radius: 0 4px 4px 0;
  background-color: var(--color-brown);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.3s;
  height: 20.5px;
}

.footer-search-container .search-button:hover {
  background-color: var(--color-dark-blue);
}

.footer-content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  max-width: 1200px;
  margin: 0 auto;
  gap: var(--spacing-sm);
  align-items: center;
}

.footer-search-container {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
}

.footer-copyright {
  grid-column: 2;
  grid-row: 2;
  text-align: center;
  margin-bottom: 0;
}

.footer-copyright p {
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.footer-social {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  align-self: center;
  padding-left: 0;
  margin-left: 0;
}

/* LinkedIn Button */
.linkedin-logo {
  width: 25px;
  height: auto;
  vertical-align: middle;
  padding-bottom: var(--spacing-sm);
}

.linkedin-button {
  text-decoration: none;
  display: inline-block;
}

.linkedin-button:hover .linkedin-logo {
  opacity: 0.8;
}

/***********************/
/*  Mobile Menu Styles */
/***********************/
/* Hide mobile menu toggle on desktop */
.mobile-menu-toggle {
  display: none;
}

/* Desktop navigation items - horizontal layout */
.header-nav-items {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

/* Push welcome nav to the right */
.header-welcome-nav {
  margin-left: auto;
}

/***********************/
/*  Mobile Responsive  */
/***********************/
@media (max-width: 1081px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  header, main, footer {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }

  header {
    padding: 0 !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  .header-logo {
    border-right: none;
    border-bottom: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    padding: 0 var(--spacing-sm);
  }

  .header-functions-vertical-grouping {
    width: auto;
    min-height: auto;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
    flex-direction: row;
    flex-grow: 1;
  }

  .welcome,
  .comments,
  .posts {
    width: 95% !important;
    box-sizing: border-box;
  }

  .footer-content {
    max-width: 100% !important;
  }

  /* Make header content responsive - stack vertically */
  .header-navigation-container {
    flex-direction: row;
    align-items: center;
    position: relative;
    min-height: auto;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: flex;
    margin: 0;
    order: 1;
    margin-left: auto;
    align-items: center;
  }

  /* Hide navigation items by default on mobile */
  .header-nav-items {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Show navigation items when active */
  .header-nav-items.active {
    display: flex;
  }

  .header-nav-items nav,
  .header-nav-items .divider {
    margin: var(--spacing-xs) 0;
  }

  .header-nav-items .divider {
    display: none;
  }

  h1.header-title {
    font-size: 18px;
    position: static;
    transform: none;
    margin: 0;
    display: flex;
    align-items: center;
    order: 0;
  }

  .header-welcome-nav {
    margin: var(--spacing-xs) 0;
  }

  .header-user-nav {
    margin: var(--spacing-xs) 0;
  }

  header nav {
    font-size: 18px;
    margin: var(--spacing-xs) 0;
  }

  .plcbuzz-logo {
    max-width: 60px;
  }

  .post-title,
  .post-title-link {
    font-size: 18px;
  }
}