/**
 * Verdens Venner — Fluent Community Custom Styles
 * Overrides default Fluent Community plugin styling at /portal/
 *
 * Design tokens:
 *   --ttr-dark:      #152305
 *   --ttr-green:     #283618
 *   --ttr-olive:     #606C38
 *   --ttr-sand:      #DDA15E
 *   --ttr-cream:     #F3F2E6
 *   --ttr-paper:     #F4F7F7
 *   --vv-clay:       #B5523B  (primary accent / terracotta)
 *   --vv-clay-soft:  #E8C5B7
 *   --vv-clay-deep:  #7A2E1F
 *   --vv-blush:      #F4DDD2
 */

/* -----------------------------------------------
   0. CSS Custom Properties
   ----------------------------------------------- */
.fcom_wrap {
  --vv-clay: #B5523B;
  --vv-clay-soft: #E8C5B7;
  --vv-clay-deep: #7A2E1F;
  --vv-blush: #F4DDD2;
  --ttr-dark: #152305;
  --ttr-green: #283618;
  --ttr-olive: #606C38;
  --ttr-sand: #DDA15E;
  --ttr-cream: #F3F2E6;
  --ttr-paper: #F4F7F7;
}

/* -----------------------------------------------
   1. Typography
   ----------------------------------------------- */
.fcom_wrap {
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--ttr-dark);
  line-height: 1.6;
}

.fcom_wrap h1,
.fcom_wrap h2,
.fcom_wrap h3,
.fcom_wrap h4,
.fcom_wrap h5,
.fcom_wrap h6,
.fcom_profile_header h1,
.fcom_profile_header h2,
.fcom_group_card h3,
.fcom_post_header .fcom_post_title {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--ttr-green);
  letter-spacing: -0.01em;
}

.fcom_wrap a {
  color: var(--vv-clay);
  text-decoration: none;
  transition: color 0.2s ease;
}

.fcom_wrap a:hover {
  color: var(--vv-clay-deep);
}

/* -----------------------------------------------
   2. Main Wrapper & Background
   ----------------------------------------------- */
.fcom_wrap {
  background-color: var(--ttr-paper);
}

/* -----------------------------------------------
   3. Feed & Post Cards
   ----------------------------------------------- */
.fcom_feed {
  gap: 20px;
}

.fcom_post {
  background: #ffffff;
  border: 1px solid rgba(21, 35, 5, 0.06);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(21, 35, 5, 0.06),
              0 2px 8px rgba(21, 35, 5, 0.03);
  padding: 24px;
  transition: box-shadow 0.2s ease;
}

.fcom_post:hover {
  box-shadow: 0 2px 6px rgba(21, 35, 5, 0.08),
              0 4px 16px rgba(21, 35, 5, 0.05);
}

/* Post header — avatar row */
.fcom_post_header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ttr-cream);
  margin-bottom: 12px;
}

.fcom_post_header .fcom_post_author_name {
  font-weight: 600;
  color: var(--ttr-green);
}

.fcom_post_header .fcom_post_meta {
  color: var(--ttr-olive);
  font-size: 0.85em;
}

/* Post body */
.fcom_post_content {
  color: var(--ttr-dark);
  font-size: 0.95rem;
  line-height: 1.7;
}

.fcom_post_content img {
  border-radius: 8px;
}

/* Post footer — reactions & comments */
.fcom_post_footer {
  border-top: 1px solid var(--ttr-cream);
  padding-top: 12px;
  margin-top: 12px;
  color: var(--ttr-olive);
}

.fcom_post_footer a:hover,
.fcom_post_footer button:hover {
  color: var(--vv-clay);
}

/* -----------------------------------------------
   4. Avatars
   ----------------------------------------------- */
.fcom_avatar {
  border: 2px solid var(--vv-clay);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff;
}

/* -----------------------------------------------
   5. Buttons
   ----------------------------------------------- */
.fcom_btn {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 999px;
  padding: 10px 24px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  border: none;
  cursor: pointer;
}

.fcom_btn_primary,
.fcom_wrap .fcom_btn_primary {
  background-color: var(--vv-clay);
  color: #ffffff;
}

.fcom_btn_primary:hover,
.fcom_wrap .fcom_btn_primary:hover {
  background-color: var(--vv-clay-deep);
  box-shadow: 0 2px 8px rgba(181, 82, 59, 0.3);
}

.fcom_btn_primary:focus-visible {
  outline: 2px solid var(--vv-clay);
  outline-offset: 2px;
}

/* Secondary / outline buttons */
.fcom_btn:not(.fcom_btn_primary) {
  background-color: transparent;
  color: var(--vv-clay);
  border: 1.5px solid var(--vv-clay);
}

.fcom_btn:not(.fcom_btn_primary):hover {
  background-color: var(--vv-blush);
  color: var(--vv-clay-deep);
}

/* -----------------------------------------------
   6. Navigation
   ----------------------------------------------- */
.fcom_nav {
  background-color: #ffffff;
  border-bottom: 1px solid var(--ttr-cream);
}

.fcom_nav_item {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 500;
  color: var(--ttr-olive);
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.fcom_nav_item:hover {
  color: var(--vv-clay);
}

.fcom_nav_item.active,
.fcom_nav_item.router-link-active,
.fcom_nav_item[aria-current="page"] {
  color: var(--vv-clay);
  border-bottom-color: var(--vv-clay);
  font-weight: 600;
}

/* -----------------------------------------------
   7. Sidebar
   ----------------------------------------------- */
.fcom_sidebar {
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(21, 35, 5, 0.06);
  box-shadow: 0 1px 3px rgba(21, 35, 5, 0.04);
  padding: 20px;
}

.fcom_sidebar h3,
.fcom_sidebar h4 {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--ttr-green);
  margin-bottom: 12px;
}

/* -----------------------------------------------
   8. Post Composer
   ----------------------------------------------- */
.fcom_composer {
  background-color: var(--ttr-cream);
  border: 1px solid rgba(21, 35, 5, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.fcom_composer textarea,
.fcom_composer .fcom_composer_input {
  background-color: #ffffff;
  border: 1px solid rgba(21, 35, 5, 0.12);
  border-radius: 8px;
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--ttr-dark);
  padding: 12px;
}

.fcom_composer textarea:focus,
.fcom_composer .fcom_composer_input:focus {
  border-color: var(--vv-clay);
  outline: none;
  box-shadow: 0 0 0 3px rgba(181, 82, 59, 0.15);
}

/* -----------------------------------------------
   9. Group Cards
   ----------------------------------------------- */
.fcom_group_card {
  background: #ffffff;
  border: 1px solid rgba(21, 35, 5, 0.06);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(21, 35, 5, 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.fcom_group_card:hover {
  box-shadow: 0 4px 12px rgba(21, 35, 5, 0.08);
  transform: translateY(-1px);
}

.fcom_group_card h3 {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--ttr-green);
}

/* -----------------------------------------------
   10. Profile Header
   ----------------------------------------------- */
.fcom_profile_header {
  background: linear-gradient(135deg, var(--ttr-green) 0%, var(--ttr-olive) 100%);
  color: #ffffff;
  border-radius: 12px;
  padding: 32px;
}

.fcom_profile_header h1,
.fcom_profile_header h2 {
  color: #ffffff;
}

.fcom_profile_header .fcom_avatar {
  border-color: var(--ttr-sand);
  box-shadow: 0 0 0 3px rgba(221, 161, 94, 0.3);
}

/* -----------------------------------------------
   11. Scrollbar (Webkit)
   ----------------------------------------------- */
.fcom_wrap ::-webkit-scrollbar {
  width: 6px;
}

.fcom_wrap ::-webkit-scrollbar-track {
  background: var(--ttr-cream);
}

.fcom_wrap ::-webkit-scrollbar-thumb {
  background: var(--vv-clay-soft);
  border-radius: 3px;
}

.fcom_wrap ::-webkit-scrollbar-thumb:hover {
  background: var(--vv-clay);
}

/* -----------------------------------------------
   12. Selection Highlight
   ----------------------------------------------- */
.fcom_wrap ::selection {
  background: var(--vv-blush);
  color: var(--ttr-dark);
}

/* -----------------------------------------------
   13. Responsive Tweaks
   ----------------------------------------------- */
@media (max-width: 768px) {
  .fcom_post {
    padding: 16px;
    border-radius: 8px;
  }

  .fcom_sidebar {
    border-radius: 8px;
    padding: 16px;
  }

  .fcom_composer {
    padding: 16px;
  }

  .fcom_profile_header {
    padding: 20px;
    border-radius: 8px;
  }
}