.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );font-style:var( --e-global-typography-primary-font-style );text-decoration:var( --e-global-typography-primary-text-decoration );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-7363 .elementor-element.elementor-element-47e60e78 .elementor-menu-toggle{margin-left:auto;}.elementor-7363 .elementor-element.elementor-element-e831051{--display:flex;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}@media(max-width:1024px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-widget-theme-post-content{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:767px){.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-size:var( --e-global-typography-accent-font-size );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-widget-theme-post-content{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}/* Start custom CSS for theme-post-content, class: .elementor-element-cb0a715 */body.mpcirc-circle-page .mpcirc-main-hero.no-image { display: none;}
body.mpcirc-circle-page #mpcirc-main-content { max-width: 1200px !important; }
body.mpcirc-circle-page .mpcirc-post-creation-form {
    background: #ddd;
    border: 1px solid #ccc;
}
body.mpcirc-circle-page .mpcirc-page-navigation ul li a:hover, body.mpcirc-circle-page .mpcirc-page-navigation ul li a:active, body.mpcirc-circle-page .mpcirc-page-navigation ul li a.active {
    background: #134382 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e831051 *//* ===== FISITA Circle pages — brand styling =====
   Circle single template (7363) > Page Settings > Advanced > Custom CSS, below the template's own rules.
   Applies to every Circle. The long "body.mpcirc-circle-page #mpcirc-main-content" prefix is deliberate:
   it outranks the Circles plugin's own (often !important) rules.
   The "FISITA Circles" menu highlight lives in the FISITA snippet (section 10), not here. */

/* ---------- 1. Brand tokens ---------- */
body.mpcirc-circle-page {
  --fc-navy: #181C37;
  --fc-blue: #16367A;
  --fc-magenta: #DA3CB9;
  --fc-magenta-dark: #B92C9C;
  --fc-mist: #EEF1F8;
  --fc-mist-dark: #E1E7F3;
  --fc-cloud: #F6F8FB;
  --fc-page: #F4F6FA;
  --fc-line: #e9edf3;
  --fc-slate: #37425c;
  --fc-muted: #5B6680;
  --fc-gradient: linear-gradient(90deg, #DA3CB9 0%, #16367A 100%);
  --fc-shadow: 0 1px 3px rgba(20,40,90,0.04);
  --fc-focus: 0 0 0 3px rgba(22,54,122,0.12);
}

/* ---------- 2. Page and shared white cards ---------- */
.elementor-7363 .elementor-element-e831051 { background: var(--fc-page); }
body.mpcirc-circle-page #mpcirc-main-content { padding: 32px 20px 56px; }

body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-navigation,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-creation-form,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-settings-form,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-guidelines-content,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-members-table-container,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-moderation-queue-section {
  background: #ffffff !important;
  border: 1px solid var(--fc-line);
  border-radius: 14px;
  box-shadow: var(--fc-shadow);
}

/* ---------- 3. Hover fix ----------
   The site-wide Elementor button hover paints a white gradient over every <button>, which hides the
   plugin's icon buttons (their icons are background images). Stop it, and put the icons back. */
body.mpcirc-circle-page #mpcirc-main-content button:not(.mpcirc-latest-post-action-dots):not(.mpcirc-latest-post-footer-icon):not(.mpcirc-comment-like-icon):hover,
body.mpcirc-circle-page #mpcirc-main-content button:not(.mpcirc-latest-post-action-dots):not(.mpcirc-latest-post-footer-icon):not(.mpcirc-comment-like-icon):focus {
  background-image: none;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-action-dots:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-action-dots:focus {
  background-image: url("/wp-content/plugins/memberpress-circles/public/images/dots-icon.svg");
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-likes-icon:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-likes-icon:focus {
  background-image: url("/wp-content/plugins/memberpress-circles/public/images/like-icon.svg");
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-comments-icon:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-comments-icon:focus {
  background-image: url("/wp-content/plugins/memberpress-circles/public/images/comment-icon.svg");
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-likes-icon.mpcirc-reaction-active,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-likes-icon.mpcirc-reaction-active:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-like-icon:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-like-icon:focus {
  background-image: url("/wp-content/plugins/memberpress-circles/public/images/like-icon-active.svg");
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-like-icon:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-like-icon:focus { background-color: transparent; }
/* The same site-wide hover also draws a 1px border round every <button>. Remove it from the plugin's
   borderless buttons (names, photos, icons, Reply). Keyboard focus rings (:focus-visible) are untouched. */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-author-clickable:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-action-dots:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-icon:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-like-icon:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-reply-btn:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-form-icon-btn:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form-icon-btn:hover {
  border-color: transparent !important;
  box-shadow: none;
}

/* ---------- 4. Tabs (Feed / Rules / Members ...) ---------- */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-navigation { padding: 10px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-navigation ul li a {
  color: var(--fc-slate);
  font-weight: 400;
  border-radius: 8px;
  text-decoration: none;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-navigation ul li a:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-navigation ul li a.active {
  background: var(--fc-blue) !important;
  color: #ffffff;
}

/* ---------- 5. Search, sort and "write a post" ---------- */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-search-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-dropdown-selected {
  border: 1px solid var(--fc-line);
  border-radius: 8px;
  background-color: #ffffff;
  color: var(--fc-slate);
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-search-input:focus,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-form-input:focus {
  border-color: var(--fc-blue);
  outline: none;
  box-shadow: var(--fc-focus);
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-dropdown-options .mpcirc-dropdown-option:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-dropdown-options .mpcirc-dropdown-option[aria-selected="true"],
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-dropdown-options .mpcirc-dropdown-option.selected {
  background-color: var(--fc-blue);
  color: #ffffff;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-form-input {
  border: 1px solid var(--fc-line);
  background: var(--fc-cloud);
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-form-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form-input { font-size: 16px !important; }

/* Readable form text: 16px Regular, site text colour, and placeholders dark enough to read (5.8:1).
   The collapsed "What's on your mind?" box needs the extra classes to beat the plugin's own !important rule. */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-search-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-dropdown-selected,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-dropdown-text,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-dropdown-option,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-creation-form .mpcirc-post-form textarea.mpcirc-post-form-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form textarea.mpcirc-comment-form-input {
  font-size: 16px !important;
  font-weight: 400 !important;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-search-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-dropdown-text,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-creation-form .mpcirc-post-form textarea.mpcirc-post-form-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form textarea.mpcirc-comment-form-input {
  color: var(--e-global-color-text, #252525) !important;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-search-input::placeholder,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-form-input::placeholder,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form-input::placeholder {
  color: var(--fc-muted) !important;
  opacity: 1;
}

/* Writing boxes: one steady shape. The plugin's script makes the comment box 20px tall, jumps it to 60px
   (plus 18px of top padding) when clicked, and the composer jumps 40px → 60px. Instead: 40px for one line,
   text centred, no jump on focus, growing with what's typed (field-sizing; older browsers scroll inside). */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form textarea.mpcirc-comment-form-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form textarea.mpcirc-comment-form-input:focus,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-creation-form .mpcirc-post-form textarea.mpcirc-post-form-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-creation-form .mpcirc-post-form textarea.mpcirc-post-form-input:focus {
  height: auto !important;
  min-height: 40px !important;
  max-height: 240px !important;
  field-sizing: content;
  box-sizing: border-box !important;
  line-height: 22px !important;
  overflow-y: auto !important;
  resize: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form textarea.mpcirc-comment-form-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form textarea.mpcirc-comment-form-input:focus { padding: 9px 0 !important; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-creation-form .mpcirc-post-form textarea.mpcirc-post-form-input,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-creation-form .mpcirc-post-form textarea.mpcirc-post-form-input:focus { padding: 8px 16px !important; }
/* Photo stays level with the first line when a message runs to several lines */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form-row,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-form-row { align-items: flex-start !important; }

/* "No posts found" and other empty-state messages in the site's body-copy style */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-no-results,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-no-results p {
  font-size: var(--e-global-typography-text-font-size, 17px) !important;
  font-weight: var(--e-global-typography-text-font-weight, 300) !important;
  line-height: var(--e-global-typography-text-line-height, 1.4em) !important;
  color: var(--e-global-color-text, #252525) !important;
}

/* ---------- 6. Conversation threads ---------- */
/* Card: rounded, gradient rule across the top, lifts on hover.
   No overflow:hidden — it would clip the "…" action menus. The gradient is part of the card's own
   background (so it follows the corners) and the last section gets matching bottom corners. */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post {
  border: 1px solid var(--fc-line);
  border-radius: 18px;
  background: var(--fc-gradient) top / 100% 4px no-repeat, #ffffff;
  box-shadow: var(--fc-shadow);
  transition: box-shadow .2s ease;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post:hover { box-shadow: 0 12px 32px rgba(22,54,122,0.10); }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post > :last-child { border-radius: 0 0 17px 17px; }

/* Author: gradient ring round the photo, name, role as a pale-blue tag, date */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-header {
  background: transparent;
  border-bottom: 0;
  padding: 24px 28px 4px;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-author { gap: 14px; align-items: center; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-author img {
  width: 48px !important; height: 48px !important;
  padding: 2px; box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(135deg, #DA3CB9 0%, #16367A 100%);
  object-fit: cover;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-author-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 0 !important; }
/* The name is an <h2>: clear the theme's heading margins so name and role tag sit together, centred on the photo */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-author-info h2.mpcirc-latest-post-author-name {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-author-info .mpcirc-latest-post-author-role { margin: 0 !important; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-author-name { font-size: 16px !important; font-weight: 600 !important; color: var(--fc-navy) !important; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-author-role {
  display: inline-block;
  background: var(--fc-mist);
  color: var(--fc-blue) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  padding: 3px 10px;
  border-radius: 999px;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-date { font-size: 14px !important; font-weight: 400 !important; color: var(--fc-muted) !important; }

/* Post and comment text = the site's body copy (Elementor kit global Text style), 1px larger */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-content { padding: 12px 28px 18px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-content-text,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-content-text p,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-text,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-text p {
  font-size: calc(var(--e-global-typography-text-font-size, 17px) + 1px) !important;
  font-weight: var(--e-global-typography-text-font-weight, 300) !important;
  line-height: var(--e-global-typography-text-line-height, 1.4em) !important;
  color: var(--e-global-color-text, #252525) !important;
}

/* Like / comment as soft pills with the count inside */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer {
  border-top: 0;
  border-bottom: 0;
  padding: 0 28px 20px;
  gap: 10px;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-likes,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-comments {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 14px 2px 4px;
  background: var(--fc-mist);
  border-radius: 999px;
  transition: background-color .2s ease;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-likes:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-comments:hover {
  background: var(--fc-mist-dark);
  color: var(--fc-blue) !important;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer .mpcirc-latest-post-footer-icon,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer .mpcirc-latest-post-footer-icon:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer .mpcirc-latest-post-footer-icon:focus {
  background-color: transparent !important;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-likes-count,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer-comments-count {
  color: var(--fc-blue) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Post images: the plugin forces every image to 500px tall ("contain" on grey), which letterboxes
   wide/banner images. Let the image keep its own shape (square corners), capped so tall photos don't take over. */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-image,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-image > a {
  height: auto !important;
  min-height: 0 !important;
  background: none !important;
}
/* Even space above and below the image (author above, post text below) */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-image { margin-top: 10px !important; }
/* Images aren't clickable: the plugin links them to a single-post view (?mpcirc_pid=…) that currently shows "No posts found" */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-image > a {
  pointer-events: none;
  cursor: default;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-image > a > img,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-image img {
  height: auto !important;
  min-height: 0 !important;
  max-height: 720px;
  width: 100%;
  object-fit: contain;
  background: none !important;
  border-radius: 0 !important;
}

/* Pinned post: stands out from the rest of the feed.
   Gradient border all the way round, a little more lift, and a "Pinned" badge sitting on the top edge
   in place of the plugin's thin WordPress-blue line and small label above the card. */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post.mpcirc-post-pinned {
  border: 2px solid transparent !important;
  border-left: 2px solid transparent !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--fc-gradient) border-box !important;
  box-shadow: 0 14px 36px rgba(22,54,122,0.14);
  margin-top: 30px;
  overflow: visible;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post.mpcirc-post-pinned > :last-child { border-radius: 0 0 16px 16px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post.mpcirc-post-pinned .mpcirc-latest-post-header { padding-top: 30px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-pinned .mpcirc-pinned-label {
  top: -15px;
  left: 26px;
  z-index: 2;
  gap: 6px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--fc-gradient);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(22,54,122,0.25);
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-pinned .mpcirc-pinned-label .mpcirc-pinned-icon {
  filter: brightness(0) invert(1); /* the plugin's blue pin icon, in white on the badge */
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-pinned .mpcirc-pinned-label svg { fill: currentColor; stroke: currentColor; }
@media (max-width: 767px) {
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post.mpcirc-post-pinned .mpcirc-latest-post-header { padding-top: 26px; }
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-post-pinned .mpcirc-pinned-label { left: 16px; }
}

/* Comments: mist panel under the post, each comment a speech bubble */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-comments {
  background: var(--fc-cloud);
  border-top: 1px solid var(--fc-line);
  padding: 20px 28px 4px;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment {
  border-bottom: 0 !important;
  padding: 0 0 16px;
  gap: 12px;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-avatar {
  width: 36px !important; height: 36px !important;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px var(--fc-line);
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-content {
  background: #ffffff;
  border: 1px solid var(--fc-line);
  border-radius: 4px 16px 16px 16px;
  padding: 12px 16px 10px;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-author-name-btn { font-size: 15px !important; font-weight: 600 !important; color: var(--fc-navy) !important; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-date,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-like-count,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-reply-text { font-size: 13px !important; font-weight: 400 !important; color: var(--fc-muted) !important; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-author-clickable:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-author-name-btn:hover,
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-comment-reply-btn:hover { color: var(--fc-blue) !important; }

/* Comment box on the same panel; no second divider when it follows comments */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-comment-form {
  background: var(--fc-cloud);
  border-top: 1px solid var(--fc-line);
  padding: 20px 28px 22px;
}
body.mpcirc-circle-page #mpcirc-main-content div:has(> .mpcirc-latest-post-comments) + .mpcirc-latest-post-comment-form {
  border-top: 0;
  padding-top: 4px;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form {
  background: #ffffff;
  border: 1px solid var(--fc-line) !important;
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-form:focus-within {
  border-color: var(--fc-blue) !important;
  box-shadow: var(--fc-focus);
}

/* ---------- 7. Buttons: magenta for actions (the plugin's teal is !important, hence the ID) ---------- */
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-post-form-submit-btn:not(:disabled),
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-form-comment-submit-btn:not(:disabled),
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-form-reply-submit-btn:not(:disabled),
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-form-submit,
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-add-members-btn,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-author-profile-btn-profile,
body.mpcirc-circle-page .mpcirc-join-circle-btn,
body.mpcirc-circle-page .mpcirc-form-submit {
  background: var(--fc-magenta) !important;
  border-color: var(--fc-magenta) !important;
  color: #ffffff !important;
  border-radius: 7px !important;
}
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-post-form-submit-btn:not(:disabled):hover,
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-form-comment-submit-btn:not(:disabled):hover,
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-form-reply-submit-btn:not(:disabled):hover,
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-form-submit:hover,
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-add-members-btn:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-author-profile-btn-profile:hover,
body.mpcirc-circle-page .mpcirc-join-circle-btn:hover,
body.mpcirc-circle-page .mpcirc-form-submit:hover {
  background: var(--fc-magenta-dark) !important;
  border-color: var(--fc-magenta-dark) !important;
  color: #ffffff !important;
}
/* Nothing typed yet: quiet mist instead of flat grey */
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-form-comment-submit-btn:disabled,
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-post-form-submit-btn:disabled,
body.mpcirc-circle-page #mpcirc-main-content button.mpcirc-form-reply-submit-btn:disabled {
  background: #E6EAF3 !important;
  border-color: #E6EAF3 !important;
  color: #6B7690 !important;
  opacity: 1 !important;
  border-radius: 7px;
}
/* Secondary "See posts" */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-comment-author-profile-btn-posts:hover {
  background: var(--fc-mist) !important;
  border-color: var(--fc-blue) !important;
  color: var(--fc-blue) !important;
}

/* ---------- 8. Rules / Members / Moderation / Settings tabs ---------- */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-header h2 { font-size: 25px; font-weight: 300; color: var(--fc-blue); margin-bottom: 6px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-header p { color: var(--fc-slate); }
/* No overflow:hidden on these cards either (row "…" menus would be clipped); round the table header instead */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-members-table thead th:first-child { border-top-left-radius: 13px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-members-table thead th:last-child { border-top-right-radius: 13px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-settings-form,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-guidelines-content { padding: 28px 30px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-guidelines-content { color: var(--fc-slate); }

/* Settings form */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-settings-form .mpcirc-form-section {
  background: transparent !important; padding: 0; margin: 0 0 20px; border: 0; box-shadow: none;
}
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-settings-form .mpcirc-form-section:last-of-type { margin-bottom: 0; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-settings-form .mpcirc-form-section h2 { font-size: 19px; font-weight: 400; color: var(--fc-blue); margin-bottom: 12px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-settings-form label { color: var(--fc-slate); }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-form-checkbox { accent-color: var(--fc-blue); }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-moderation-queue-section .mpcirc-no-results { background: transparent !important; }

/* Members / Moderation filter tabs */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-members-filter-link,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-moderation-filter-link { color: var(--fc-slate) !important; text-decoration: none; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-members-filter-link:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-moderation-filter-link:hover,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-members-filter-active,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-moderation-filter-active {
  color: var(--fc-blue) !important;
  border-color: var(--fc-blue) !important;
}
/* The plugin's scroll-fade at the end of the filter row is white; match it to the page */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-members-filter::after,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-moderation-filter::after {
  background: linear-gradient(to left, #F4F6FA 40%, rgba(244,246,250,0) 100%) !important;
}

/* Members table */
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-members-table th { background: var(--fc-cloud); color: var(--fc-blue); font-weight: 400; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-members-table td { color: var(--fc-slate); border-color: var(--fc-line); }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-member-role,
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-status-active { border-radius: 999px; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-member-role { background: var(--fc-mist) !important; color: var(--fc-blue) !important; }
body.mpcirc-circle-page #mpcirc-main-content .mpcirc-status-active { background: #E6F4EA !important; color: #1E7B3A !important; }

/* ---------- 9. Phones ---------- */
@media (max-width: 767px) {
  body.mpcirc-circle-page #mpcirc-main-content { padding: 20px 12px 40px; }
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-navigation { padding: 6px; }

  /* Tabs as a compact 3-column grid */
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-navigation ul { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-navigation ul li { width: auto; margin: 0; }
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-page-navigation ul li a {
    flex-direction: column; justify-content: center; gap: 4px;
    padding: 8px 4px; font-size: 12px; text-align: center;
  }

  /* Threads: tighter side padding */
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-header { padding: 20px 18px 4px; }
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-content { padding: 10px 18px 16px; }
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-footer { padding: 0 18px 16px; }
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-comments { padding: 16px 18px 4px; }
  body.mpcirc-circle-page #mpcirc-main-content .mpcirc-latest-post-comment-form { padding: 16px 18px 18px; }
  body.mpcirc-circle-page #mpcirc-main-content div:has(> .mpcirc-latest-post-comments) + .mpcirc-latest-post-comment-form { padding-top: 4px; }
}/* End custom CSS */