/*
================================================================================
SILVERPAUL FORUM - PAGES & MOBILE MODULE
================================================================================

This module contains page-specific styling and mobile responsive overrides including:
- User profile pages (bio container, avatar, profile links)
- Chat room styling (chatbox, chat forms, message containers)
- Donation page (Stripe integration, card elements, donation forms)
- Membership plan pages (plan containers, perks display, update buttons)
- Store page styling
- Article edit/delete button controls
- Article draft management controls
- Mobile responsive layouts and breakpoint overrides
- Global mobile adaptations for layout and navigation

Dependencies:
- CSS Custom Properties from variables.css (must be loaded first)
- Uses page-specific colors: --plan-bg, --primary-green, --primary-green, --primary-red
- Stripe colors: --stripe-top-left, --stripe-bottom-right, --black-text, --white-bg
- Button colors: --primary-green, --primary-blue, --border-grey, --border-light-grey

Last Updated: July 24, 2025
================================================================================
*/

/* ==========================================================================
   PAGE-SPECIFIC STYLES
   ========================================================================== */

/* User Profile */
.bio_container {
  display: block;
}

.profile_avatar {
  height: var(--space-48);
  border-radius: var(--space-12);
  background-color: transparent; 
}

.inner_bio {
  width: 50%;
  text-align: left;
  float: left;
}

.avatar_and_name {
  text-align: center;
}

.bio_text {
  vertical-align: 50%;
}

.profile_break {
  clear: both;
}

a.profile_blue_link {
  text-decoration: none;
  color: var(--primary-blue);
  font-weight: bold;
  font-size: var(--text-3xl);
  font-family: var(--font-family-primary);
}

a.profile_blue_link:hover {
  color: var(--primary-red);
}

/* Chatroom */
.chatroom_title {
  text-align: center;
}

.chatbox {
  height: var(--space-100); 
  overflow-y: auto;
  border-right: var(--space-0-5) solid var(--primary-blue);
  border-bottom: var(--space-0-5) solid var(--primary-blue);
  border-top: var(--space-px) solid var(--primary-blue);
  border-left: var(--space-px) solid var(--primary-blue);
  border-radius: var(--space-2-5);
  padding: var(--space-2-5);
}

.chat_form {
  display: flex;
  height: var(--space-15);
  width: 100%;
  padding: var(--space-2-5);
  gap: var(--space-5);
}

#chat-form {
  display: flex;
  height: var(--space-15);
  width: 95%;
  padding: var(--space-2-5);
  gap: var(--space-5);
}

.inner_chat_form_msg_box {
  width: 90%;
  display: flex;
  justify-content: center; 
}

.inner_chat_form_btn {
  height: var(--space-10);
  width: 10%;
  display: flex;
  justify-content: center; 
  margin-top: var(--space-4);
}

/* Donation Page */
#stripe-logo {
  padding-top: var(--space-5);
  width: var(--space-36);
}

.donation_container {
  background-color: var(--silver);
  border-radius: var(--space-2-5);
  border: var(--space-0-5) solid var(--primary-blue);
  padding: var(--space-5);
  text-align: center;
  align-items: center;
}

#cardholder-name {
  height: var( --space-12);
  width: 80%;
  position: relative;
  left: 8.5%;  
  border-radius: var(--space-0-5);
  padding-left: var(--space-2-5);
}

input.donation::placeholder {
  opacity: 0.9;
  color: var(--black-text);
  font-size: var(--text-lg);
  text-align: center;
}

#card-element {
  background-color: var(--white-bg);
  border-radius: var(--space-0-5);
  padding: var(--space-2-5); 
  width: 79%;
  text-align: center;
  position: relative; 
  left: 8.5%;  
  font-size: var(--text-lg);
  border-top: var(--space-0-5) solid var(--stripe-top-left);
  border-left: var(--space-0-5) solid var(--stripe-top-left);
  border-bottom: var(--space-0-5) solid var(--stripe-bottom-right);
  border-right: var(--space-0-5) solid var(--stripe-bottom-right);
  transition: border-color 0.3s ease;
}

#card-element.StripeElement--focus {
  border-color: var(--primary-green);
}

.donate { 
  background-color: var(--primary-blue);
  color: white;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--space-1);
  cursor: pointer;
}

.donate:hover {
  background-color: var(--primary-green);
}

.donation-amount {
  width: var(--space-60);
  border-radius: var(--space-1);
}

.donation-amount::placeholder {
  opacity: 0.9;
  color: var(--black-text);
  font-size: var(--text-lg);
  text-align: center;
}

/* Membership Plan Page */
.update_membership {
  background-color: var(--primary-blue);
  color: white;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--space-1);
  cursor: pointer;
}

.update_membership:hover {
  background-color: var(--primary-green);
}

.plan_container {
  background: var(--plan-bg);
  padding: var(--space-5);
  border-radius: var(--space-2-5);
}

.plan_bullet {
  height: var(--space-6);
}

.plan_perks {
  display: flex;
  gap: var(--space-5);
}

.plan_perks ul{
  list-style-type: none;
}

.plan_coin {
  height: var(--space-48);
}

/* Store */
#store_container {
  text-align: center;
}

/* ==========================================================================
   ARTICLE EDIT/DELETE CONTROLS
   ========================================================================== */

.article-edit-controls {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2-5);
  align-items: center;
}

.edit-article-btn, .delete-article-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5); /* 25% smaller than vote-btn 0.5rem */
  padding: var(--space-1-5) var(--space-3); /* 25% smaller than vote-btn 8px 16px */
  background: transparent;
  border: var(--space-0-5) solid var(--border-grey);
  border-radius: var(--space-4); /* 25% smaller than vote-btn 20px */
  text-decoration: none;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm); /* Slightly smaller font */
  color: var(--text-dark);
  min-width: var(--space-14); /* 25% smaller than vote-btn min-width 80px */
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.edit-article-btn:hover, .delete-article-btn:hover {
  transform: var(--transform-lift-sm);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.edit-article-btn {
  border-color: var(--primary-green);
  color: var(--primary-green);
}

.edit-article-btn:hover {
  background: var(--primary-green);
  color: white;
}

.delete-article-btn {
  border-color: var(--primary-red);
  color: var(--primary-red);
}

.delete-article-btn:hover {
  background: var(--primary-red);
  color: white;
}

.edit-article-btn svg, .delete-article-btn svg {
  width: var(--space-4);
  height: var(--space-4);
  transition: transform 0.2s ease;
}

/* ==========================================================================
   ARTICLE DRAFT CONTROLS
   ========================================================================== */

.article-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.article-draft-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}

/* Removed unused save-draft-btn styles - not used in templates */

/* ==========================================================================
   MOBILE RESPONSIVE LAYOUTS
   ========================================================================== */

/* Main mobile breakpoint - content-specific adjustments */
/* Layout switching is now handled by CSS Grid container queries in layouts/grid.css */
@media (max-width: 1000px) {
  body {
    text-align: center;
  }
  
  /* Content-specific mobile adjustments */
  .main-content {
    text-align: left;
  }

  /* Mobile title container adjustments to prevent awkward word breaks */
  .title_container {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-4);
  }

  .inner_title {
    padding-right: var(--space-20); /* Reduce from 120px to 80px for more title space */
  }

  .inner_title h2 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
    margin: 0;
    font-size: var(--text-2xl); /* Mobile: 24px, 6px smaller than desktop --text-3xl (30px) */
  }

  .title_total_likes {
    /* Keep original desktop styling but ensure it floats properly */
    position: absolute;
    top: 0;
    right: var(--space-2-5);
    padding: var(--space-1-5) var(--space-2) var(--space-2-5) var(--space-2);
    min-width: var(--space-5);
    border-width: var(--space-0-5) var(--space-0-5) var(--space-1) var(--space-1);
    font-size: var(--text-2xl); /* Mobile: 24px, smaller to match title */
    float: right;
    clear: right;
  }

  /* Mobile article improvements */
  article {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
    padding-left: var(--space-6);
    padding-right: var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--bg-light);
    box-shadow: var(--shadow-sm);
  }

  .article_title h1 {
    font-size: var(--text-2xl);
    line-height: 1.3;
    margin-bottom: var(--space-4);
    color: var(--text-grey);
    border-bottom: var(--space-px) solid var(--chat-border);
    padding-bottom: var(--space-2-5);
  }

  .disclaimer {
    margin: var(--space-2-5) 0;
    padding: var(--space-4);
    font-size: var(--text-base);
  }
  
  .disclaimer-bottom {
    margin-top: var(--space-8); /* Extra top margin to prevent overlap with mobile chat form */
  }

  .article_intro, .article_content {
    font-size: var(--text-lg);
    line-height: 1.6;
    margin-bottom: var(--space-4);
    color: var(--text-dark);
    font-family: var(--font-family-primary);
  }

  .author {
    font-size: var(--text-base);
    margin-bottom: var(--space-2-5);
  }

  /* Removed orphaned .sidebar_element selectors - no HTML usage found */

  /* Mobile table responsiveness */
  table {
    font-size: var(--text-base);
  }
  
  td, th {
    padding: var(--space-2) var(--space-1);
  }

  /* Mobile form improvements */
  .red_link:hover {
    background-color: var(--brand-red-100);
  }

  /* Mobile edit/delete buttons */
  .article-edit-controls {
    justify-content: center;
    margin-top: var(--space-4);
  }

  .edit-article-btn, .delete-article-btn {
    padding: var(--space-2-5) var(--space-3);
    border: var(--space-px) solid var(--border-grey);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    min-width: var(--space-12);
  }

  .article-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2-5);
  }

  .article-draft-controls {
    justify-content: center;
  }

  /* Removed unused save-draft-btn mobile styles */
}

/* Additional mobile breakpoint for smaller devices */
@media (max-width: 480px) {
  .article_title h1 {
    font-size: var(--text-2xl);
  }

  .article_intro, .article_content {
    font-size: var(--text-base);
  }

  /* Mobile edit/delete buttons for very small screens */
  .edit-article-btn, .delete-article-btn {
    padding: var(--space-2) var(--space-2-5);
    font-size: var(--text-xs);
    gap: var(--space-1);
  }

  .edit-article-btn svg, .delete-article-btn svg {
    width: var(--space-3-5);
    height: var(--space-3-5);
  }

  /* Mobile draft controls for very small screens */
  .save-draft-btn {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--text-xs);
    gap: var(--space-1);
  }

  .save-draft-btn svg {
    width: var(--space-3-5);
    height: var(--space-3-5);
  }

  .draft-save-status {
    font-size: var(--text-xs);
  }

  /* Mobile chat form layout adjustments */
  #chat-form {
    width: 100%;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    margin-bottom: var(--space-15); /* Add bottom margin to prevent overlap with disclaimer */
  }
  
  .inner_chat_form_msg_box {
    width: 100%;
  }
  
  .inner_chat_form_btn {
    width: 100%;
    margin-top: var(--space-0);
    margin-bottom: var(--space-8);
  }
}