/*
Theme Name: Citadela Circle
Theme URI: https://citadelacircle.ae
Description: Custom theme styling for the Citadela Circle platform, using a warm sunset-inspired colour scheme.
Author: John Mottram
Author URI: 
Version: 1.8.1
Text Domain: citadela-circle
GitHub Theme URI: citadela-ae/citadela-circle-website
Primary Branch: main
*/

/* -------------------------------------------
   GLOBAL FONT CHANGE
   ------------------------------------------- */
body {
    /* Set the body font to Google Sans Flex, falling back to Arimo, then a generic sans-serif. */
    font-family: 'Google Sans Flex', 'Arimo', sans-serif;
}

/* Global min-height for all main content areas */
main {
    min-height: calc(100vh - 120px);
}

/* -------------------------------------------
   FORM PLACEHOLDER STYLING
   ------------------------------------------- */
::placeholder {
    color: #bbb;
    opacity: 0.7;
}

::-webkit-input-placeholder {
    color: #bbb;
    opacity: 0.7;
}

::-moz-placeholder {
    color: #bbb;
    opacity: 0.7;
}

:-ms-input-placeholder {
    color: #bbb;
    opacity: 0.7;
}

/* -------------------------------------------
   MEMBER BADGE BORDERS
   ------------------------------------------- */

/* Regular Member - bronze ring */
.badge-member {
    border: 2px solid #CD7F32 !important;
}

/* Founding Member - silver ring */
.badge-founding {
    border: 2px solid #C0C0C0 !important;
}

/* Owner - gold ring */
.badge-owner {
    border: 2px solid #FFB400 !important;
}

/* COLOURS — SUNSET THEME */

/* Deep mountains / shadows */
.dark-primary-color      { background: #1A0F1A; }   /* deep plum-charcoal */

/* Mid warm orange-red (general brand primary) */
.default-primary-color   { background: #C44707; }   /* burnt orange */

/* Soft warm highlight (light primary) */
.light-primary-color     { background: #F2C36B; }   /* warm golden sand */

/* Accent = bright sun yellow/orange */
.accent-color            { background: #FFB400; }   /* vivid sunset yellow */
.accent-text-color       { color: #FFB400; }
a.accent-text-color:hover { color: #FFD54F; }

/* Text colours */
.primary-text-color      { color: #3B2A26; }        /* warm dark brown-grey */
.secondary-text-color    { color: #FFFFFF; }        /* for dark backgrounds */

/* Dividers & subtle backgrounds */
.divider-color           { background: #F7E3C1; }   /* pale warm cream */
.divider-text-color      { color: #F7E3C1; }

/* Core neutrals */
.white-color             { background: #FFFFFF; }
.black-color             { background: #1A0F1A; }   /* matches dark primary */

/* Position the header on top of the content */
.site-header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* Ensures it sits above images/sliders */
    background-color: #1A0F1A; /* dark-primary-color */
    
    /* Optional: Add a subtle bottom border to separate it from the content */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Styling for footer text and navigation links */
.site-footer a {
    /* Inherit the white color from the parent text-white class */
    color: inherit; 
    transition: color 0.2s ease;
}
.site-footer a:hover,
.site-footer a:focus {
    /* Use the vivid sunset yellow accent color on hover */
    color: #FFB400; 
}

/* Styling to reverse member navigation icon colors */
.navbar-dark .navbar-nav .nav-link {
    /* Set default color to the Accent Color (vivid sunset yellow) */
    color: #FFFFFF; 
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    /* Set hover/focus color to White */
    color: rgb(221, 218, 218); 
}

/* Styling for links (icons) within the new full-width member banner */

/* Default color: Accent Color (#FFB400 - Vivid Sunset Yellow) */
.site-header a {
    color: #FFFFFF; 
    transition: color 0.2s ease;
}

/* Hover/Focus color: White (#FFFFFF) */
.site-header a:hover,
.site-header a:focus {
    color: #3B2A26; 
}

/* ** FINE-GRAINED ALIGNMENT FIX ** */
.site-header a i {
    transform: translateY(-4px); /* Lifts the icons 4 pixels up to match the center of the larger image */
    display: inline-block;
}

/* -------------------------------------------
   A. Base Button Color Scheme (Yellow/Plum Swap)
   ------------------------------------------- */

/* Standard theme primary buttons (used for 'Publish to Loop' etc.) */
.btn-primary {
    /* DEFAULT: Yellow Background, Plum Text */
    background-color: #FFB400 !important;
    border-color: #FFB400 !important;
    color: #1A0F1A !important; 
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    /* HOVER: Plum Background, White Text */
    background-color: #1A0F1A !important;
    border-color: #1A0F1A !important;
    color: #FFFFFF !important;
}


/* -------------------------------------------
   B. Front-Page CTA Button (Separate Class)
   ------------------------------------------- */

.btn-register {
    /* Ensure it behaves like a button */
    display: inline-block;
    font-weight: 600; 
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1.5;

    /* TRANSITION & SHADOW */
    transition: all 0.5s ease !important; /* Smooth transition for all properties (color, shadow, etc.) */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

    /* COLORS (Default: Yellow Background, Plum Text) */
    background-color: #FFB400 !important; /* Accent Color */
    border: 2px solid #FFFFFF !important;
    color: #1A0F1A !important; /* Dark Plum Text */

    /* SIZE & SHAPE (25% larger) */
    font-size: 1.25rem;         
    padding: 0.75rem 2rem;      
    border-radius: 50px;
}

.btn-register:hover,
.btn-register:focus,
.btn-register:active,
.btn-register:focus-visible {
    /* HOVER COLORS (Plum Background, White Text) */
    background-color: #1A0F1A !important; 
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    
    /* Remove shadow on hover for a subtle "press" effect */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* New Login Button Style */
.btn-login {
    /* Ensure it behaves like a button */
    display: inline-block;
    font-weight: 600; 
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1.5;

    /* TRANSITION & SHADOW */
    transition: all 0.5s ease !important; /* Smooth transition for all properties (color, shadow, etc.) */

    /* COLORS (Default: Dark Plum Background, White Text) - Inverted from btn-cta-main default */
    background-color: #1A0F1A !important; /* Dark Primary Color */
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important; /* White Text */

    /* SIZE & SHAPE (25% larger) */
    font-size: 1.25rem;         
    padding: 0.75rem 2rem;      
    border-radius: 50px;
}

.btn-login:hover,
.btn-login:focus,
.btn-login:active,
.btn-login:focus-visible {
    /* HOVER COLORS (Yellow Background, Dark Plum Text) - Inverted from btn-cta-main hover */
    background-color: #FFB400 !important; /* Accent Color */
    border: 2px solid #FFFFFF !important;
    color: #1A0F1A !important; /* Dark Plum Text */
}

/* Post card title links — black on white card background */
#content .clickable-card h3 a {
    color: #1A0F1A;
}
#content .clickable-card h3 a:hover {
    color: #FFB400;
}

/* Tap behavior on clickable cards (mobile):
   - Remove the default grey/blue tap-highlight overlay that flashes on tap.
   - Disable text selection so a tap doesn't briefly highlight the word under
     the user's finger before the navigation fires. The whole card is a
     navigation target; users open the post to read/copy the full text. */
.clickable-card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Target all links inside the element with the class .main-content */
#content a {
    color: #FFB400; /* Vivid Sunset Yellow */
    text-decoration: none;
    
    /* ADD THIS LINE for a smooth transition on the color property */
    transition: color 0.3s ease; 
}

/* Style for when the mouse hovers over the link */
#content a:hover {
    color: #1A0F1A; /* Deep Plum-Charcoal */
    text-decoration: none;
}

/* 1. Card Shadows for Visual Depth */

/* Large Shadow */
.card-shadow-lg {
    /* Use a color close to your primary-text-color (#3B2A26) for a warm shadow */
    box-shadow: 0 10px 25px -5px rgba(59, 42, 38, 0.25); 
    transition: box-shadow 0.3s ease-in-out;
}

.card-shadow-lg:hover {
    /* Subtle hover effect to suggest interactivity */
    box-shadow: 0 15px 30px -5px rgba(59, 42, 38, 0.35); 
}

/* Medium Shadow */
.card-shadow-md {
    /* Slightly smaller shadow than -lg for less prominence */
    box-shadow: 0 5px 15px -3px rgba(59, 42, 38, 0.20); 
    transition: box-shadow 0.3s ease-in-out;
}

.card-shadow-md:hover {
    /* Subtle lift on hover */
    box-shadow: 0 8px 20px -3px rgba(59, 42, 38, 0.30); 
}

/* Small Shadow (New) */
.card-shadow-sm {
    /* Very subtle shadow for minor elements or lists */
    box-shadow: 0 2px 8px -2px rgba(59, 42, 38, 0.15); 
    transition: box-shadow 0.3s ease-in-out;
}

.card-shadow-sm:hover {
    /* Slight lift on hover, almost invisible */
    box-shadow: 0 4px 10px -2px rgba(59, 42, 38, 0.20); 
}

.text-shadow{
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}


/* 2. Style for List Group Items (e.g., Messages/Members Lists) */
.list-group-item {
    border-color: #F7E3C1; /* Use the divider-color for a soft border */
}

/* 3. Soft Background for Alternating Content Sections */
.section-subtle-bg {
    background-color: #F7E3C1; /* pale warm cream divider-color */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* 4. Style Form Fields with Theme Colors */
.form-control {
    border-radius: 4px;
    /* Use a light color for the default border */
    border: 1px solid #F2C36B; /* Light Primary/warm golden sand */
}

.form-control:focus {
    /* Use the default primary color for a warm focus glow */
    border-color: #C44707; /* Burnt orange */
    box-shadow: 0 0 0 0.25rem rgba(196, 71, 7, 0.35); /* Soft, burnt orange glow */
}

/* Reply / comment boxes: no burnt-orange focus glow — keep the resting border. */
textarea[name="comment"]:focus {
    border-color: #F2C36B; /* same as resting state */
    box-shadow: none;
}

.nav-item,
.nav-item a {
    display: flex;
    align-items: center;
}

/* Custom HR style for accent color line, 4px thick, centered, 100px wide */
.hr-accent {
  width: 75px;
  height: 3px;
  /* Centers the block element horizontally */
  /* Use background-color for the solid bar of color */
  background-color: #FFB400;
  /* Ensures it's fully opaque (Bootstrap often sets opacity < 1 on <hr>) */
  opacity: 1;
  /* IMPORTANT: Remove all default border styles */
  border: none;
}

/* Category selection buttons - yellow outline style */
.btn-outline-accent {
    color: #000000 !important;
    border-color: #FFB400 !important;
    background-color: transparent;
}

.btn-outline-accent:hover,
.btn-outline-accent:focus {
    color: #000000 !important;
    background-color: #FFB400 !important;
    border-color: #FFB400 !important;
}

.btn-check:checked + .btn-outline-accent {
    color: #000000 !important;
    background-color: #FFB400 !important;
    border-color: #FFB400 !important;
}

/* Filled accent button (yellow background) */
.btn-accent {
    color: #000000 !important;
    background-color: #FFB400 !important;
    border-color: #FFB400 !important;
}

.btn-accent:hover,
.btn-accent:focus {
    color: #000000 !important;
    background-color: #e6a200 !important;
    border-color: #e6a200 !important;
}

/* Gap utility for spacing */
.gap-2 {
    gap: 0.5rem !important;
}

/* Category button styling - consistent for all categories */
.btn-category-story,
.btn-category-question,
.btn-category-recommendation,
.btn-category-request,
.btn-category-forsale,
.btn-category-default {
    text-decoration: none !important;
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    transition: all 0.15s ease-in-out;
}

/* All category tags - same yellow color */
.btn-category-story,
.btn-category-question,
.btn-category-recommendation,
.btn-category-request,
.btn-category-forsale {
    background-color: #FFB400 !important;
    color: #3D1E4A !important;
}

/* Default */
.btn-category-default {
    background-color: #FFB400 !important;
    color: #ffffff !important;
}

/* Hover effect for all category buttons */
.btn-category-story:hover,
.btn-category-question:hover,
.btn-category-recommendation:hover,
.btn-category-request:hover,
.btn-category-forsale:hover,
.btn-category-default:hover {
    opacity: 0.85;
    text-decoration: none !important;
}

/* -------------------------------------------
   C. NINJA FORMS INTEGRATION
   ------------------------------------------- */

/* 1. Style the Form Fields (Matching .form-control) */

/* Target all text, email, and number inputs within the Ninja Forms structure */
.nf-field-element input[type=text],
.nf-field-element input[type=email],
.nf-field-element input[type=number],
.nf-field-element textarea {
    /* Use styles from .form-control */
    border-radius: 4px;
    border: 1px solid #F2C36B; /* Light Primary/warm golden sand */
    width: 100%; /* Ensure inputs are full width of their container */
    padding: 0.5rem 0.75rem;
    line-height: 1.5;
    background-color: #FFFFFF;
    color: #3B2A26; /* Primary Text Color */
}

/* Style Form Field Focus State (Matching .form-control:focus) */
.nf-field-element input[type=text]:focus,
.nf-field-element input[type=email]:focus,
.nf-field-element input[type=number]:focus,
.nf-field-element textarea:focus {
    border-color: #C44707; /* Burnt orange */
    box-shadow: 0 0 0 0.25rem rgba(196, 71, 7, 0.35); /* Soft, burnt orange glow */
    outline: none; /* Removes default browser outline */
}

/* 2. Style the Submit Button (Matching .btn-register) */

/* Target the submit input directly */
.nf-form-cont input[type=submit],
.nf-form-cont .nf-field-element .nf-element-submit button {
    /* Ensure it behaves like a button */
    display: inline-block;
    font-weight: 600; 
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1.5;

    /* TRANSITION & SHADOW */
    transition: all 0.5s ease !important; 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);

    /* COLORS (Default: Yellow Background, Plum Text) */
    background-color: #FFB400 !important; /* Accent Color */
    border: 2px solid #FFFFFF !important;
    color: #1A0F1A !important; /* Dark Plum Text */

    /* SIZE & SHAPE (25% larger) */
    font-size: 1.25rem !important;         
    padding: 0.75rem 2rem !important;      
    border-radius: 50px !important;
    width: auto !important; /* Prevent it from taking 100% width unless intended */
}

.nf-form-cont input[type=submit]:hover,
.nf-form-cont input[type=submit]:focus,
.nf-form-cont .nf-field-element .nf-element-submit button:hover,
.nf-form-cont .nf-field-element .nf-element-submit button:focus { 
    /* HOVER COLORS (Plum Background, White Text) */
    background-color: #1A0F1A !important; 
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* Optional: Clean up the form container wrapper for a simpler look */
.nf-field-element .nf-field-label {
    /* Ensure labels are visible and styled appropriately, perhaps white if the form container is dark */
    color: #3B2A26; /* Matches primary text color */
}
/* Prevent long URLs and unbreakable strings from overflowing post content */
.post-content-display,
.post-content-display p,
.post-content-display a {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* -------------------------------------------
   REACTOR AVATAR STACK (under post + comments)
   ------------------------------------------- */
.circle-reactor-stack {
    --reactor-size: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.circle-reactor-avatar {
    position: relative;
    display: inline-block;
    width: var(--reactor-size);
    height: var(--reactor-size);
    line-height: 0;
    text-decoration: none;
}
.circle-reactor-avatar img {
    width: var(--reactor-size);
    height: var(--reactor-size);
    border-radius: 50%;
    display: block;
}
/* Hide the auto-added country-flag badge inside reactor avatars — the
   reaction emoji is the meaningful icon here, and a smaller flag peeking
   out from underneath looks untidy. The flag lives in the wrapper <div>
   added by the citadela_add_flag_to_avatar filter; our own reaction badge
   sits at the parent .circle-reactor-avatar level, so it's unaffected. */
.circle-reactor-avatar > div > span {
    display: none !important;
}
.circle-reactor-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #FFFFFF;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}
.circle-reactor-more {
    color: #1A0F1A;
    text-decoration: underline;
    font-size: 0.85rem;
    background: none;
    border: 0;
    padding: 0;
    line-height: var(--reactor-size);
}
.circle-reactor-more:hover {
    color: #FFB400;
}
.circle-reactor-overflow {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.circle-reactor-overflow.is-collapsed {
    display: none;
}
/* Tighter spacing inside comment threads */
.comment .circle-reactor-stack {
    margin-top: 4px;
    margin-bottom: 10px; /* clearance below the badge so it doesn't kiss the reply box */
    gap: 4px;
}
.comment .circle-reactor-badge {
    width: 13px;
    height: 13px;
    font-size: 9px;
    bottom: -1px;
    right: -1px;
}

/* -------------------------------------------
   BOOKMARK BUTTON
   ------------------------------------------- */
.circle-bookmark-btn {
    transition: color 0.15s ease, background-color 0.15s ease;
}
.circle-bookmark-btn.is-bookmarked {
    color: #FFB400;
    border-color: #FFB400;
}
.circle-bookmark-btn.is-bookmarked:hover {
    color: #e6a200;
    border-color: #e6a200;
}
/* In feed cards (btn-link variant), the active colour just tints the icon */
.btn-link.circle-bookmark-btn {
    color: #6c757d;
}
.btn-link.circle-bookmark-btn.is-bookmarked {
    color: #FFB400;
}
.circle-bookmark-btn[data-busy="1"] {
    opacity: 0.6;
    pointer-events: none;
}

/* -------------------------------------------
   POST SEARCH HIGHLIGHT
   ------------------------------------------- */
.post-excerpt mark,
h3 mark {
    background-color: #FFF1B8;     /* soft yellow tint of the brand accent */
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* Search bar — match the icon prepend's border to the .form-control's golden
   border (the theme overrides .form-control border but Bootstrap leaves
   .input-group-text gray, causing a visible mismatch on the left edge). */
.circle-search-input .input-group-text {
    border-color: #F2C36B;
}
.circle-search-input:focus-within .input-group-text {
    border-color: #C44707; /* match .form-control:focus border colour */
}
/* Drop the default focus halo on the search bar — keep the border colour
   change but skip the box-shadow ring. */
.circle-search-input .form-control:focus {
    box-shadow: none;
}

/* Compress vertical whitespace around the dashboard's search bar. The
   form sits between a card with `mb-5` above and feed cards with `mt-5`
   below; tightening only the form's own margins isn't enough, so we
   also pull in the first sibling that follows the form/status line. */
.circle-feed-search-form {
    margin-top: -1rem;          /* pull up out of the share card's mb-5 */
    margin-bottom: 0.5rem;      /* tight below */
}
.circle-feed-search-status {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.circle-feed-search-form + article,
.circle-feed-search-form + p.circle-feed-search-status + article {
    margin-top: 0.75rem !important;   /* override feed-post-card's mt-5 */
}

/* -------------------------------------------
   MEMBER DIRECTORY CARDS
   ------------------------------------------- */
.circle-directory-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.circle-directory-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10) !important;
}
.circle-directory-avatar-wrap {
    position: relative;
    width: 96px;
    height: 96px;
}
.circle-directory-avatar-wrap img {
    width: 96px;
    height: 96px;
    object-fit: cover;
}
.circle-directory-flag {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 21px;
    border-radius: 3px;
    box-shadow: 0 0 0 2px #FFFFFF, 0 1px 4px rgba(0, 0, 0, 0.15);
    background-size: cover !important; /* override flag-icons default */
}

/* =============================================================
   HEADER NAV REDESIGN (Option C)
   - Mobile: persistent bottom tab bar + slim top bar (logo + bell + envelope)
   - Desktop: refined linear top bar with avatar dropdown
   ============================================================= */

/* ----- Desktop header nav: one flex row, uniform cells -----
   All children of .circle-header-nav (text links, icon links, avatar)
   stretch to the row's 64px height and centre their content with
   inline-flex. The shared centerline at y=32px is enforced by the
   structure — independent of font metrics, baseline, em-box, or
   nested wrappers. Replaces the previous textnav/iconnav/avatar split. */
.circle-header-nav {
    height: 64px;
    align-items: stretch;        /* every child fills full row height */
    column-gap: 1.5rem;
}
.circle-header-nav > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    margin: 0;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 1;
    position: relative;          /* badge anchor */
}
.circle-header-nav > a:hover,
.circle-header-nav > a:focus {
    color: #FFB400;
    text-decoration: none;
}

.circle-header-link {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.circle-header-icon {
    font-size: 1.4rem;
}
/* The structural rebuild (height:100% + align-items:center on every cell)
   does the centering. We just need to neutralize the global
   `.site-header a i { transform: translateY(-4px); }` rule above which
   pulls these icons up — without that the icons sit exactly at the
   row's geometric centre, matching the avatar. */
.circle-header-nav a i {
    transform: none !important;
}

.circle-header-avatar img {
    display: block;              /* drop inline-baseline descender phantom */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
    transition: box-shadow 0.15s ease;
}
.circle-header-avatar:hover img,
.circle-header-avatar:focus img {
    box-shadow: 0 0 0 2px #FFB400;
}

.circle-header-badge {
    position: absolute;
    top: 8px;
    right: -8px;
    background: #DC3545;
    color: #FFFFFF;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    line-height: 1.2;
}

/* ----- Mobile top bar (slim) ----- */
.circle-mobile-topbar {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;            /* stable cross-axis matched to logo height */
}
/* Logo anchor — kill inline baseline so the image doesn't sit higher than
   the right-side cluster. */
.circle-mobile-topbar > a:first-child {
    display: inline-flex;
    align-items: center;
}
.circle-mobile-topbar > a:first-child img {
    display: block;
}
.circle-mobile-topbar .circle-mobile-icon-btn {
    background: transparent;
    border: 0;
    color: #FFFFFF;
    padding: 0 8px;
    font-size: 1.75rem;          /* slightly larger glyph */
    line-height: 1;
    position: relative;
    text-decoration: none;
    /* Centre the icon glyph within the button AND keep all top-bar items
       (icons + 44px avatar) on the same vertical baseline. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.circle-mobile-topbar .circle-mobile-icon-btn:hover,
.circle-mobile-topbar .circle-mobile-icon-btn:focus {
    color: #FFB400;
    text-decoration: none;
}
.circle-mobile-topbar .badge {
    font-size: 0.6rem;
}
/* Drop the mobile bell + envelope glyphs 3px from their current visual
   position. The global `.site-header a i { transform: translateY(-4px) }`
   above lifts them by 4px; overriding to -1px gives a net 3px drop. */
.circle-mobile-topbar .circle-mobile-icon-btn i {
    transform: translateY(-1px) !important;
}
/* Make the profile-snapshot anchor match the icon buttons' baseline.
   The flag badge added by citadela_add_flag_to_avatar protrudes 2px below
   the image, which would otherwise make this <a> taller than the icon
   buttons and push the avatar centerline lower. Lock the height to 44px
   so all three top-bar items share a row centerline; the flag overflows
   visibly below without affecting layout. */
.circle-mobile-topbar > div > a {
    display: inline-flex;
    align-items: center;
    height: 44px;
    line-height: 1;
}
/* Avatar img defaults to vertical-align: baseline, which adds invisible
   space below the image and pushes the avatar's visible centre lower
   than the bell/envelope icon glyphs. Force display: block to drop the
   baseline phantom. */
.circle-mobile-topbar > div > a img {
    display: block;
}

/* ----- Mobile bottom tab bar (PWA-friendly) ----- */
.circle-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: #1A0F1A;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
    /* iOS safe-area inset (notch / home indicator) */
    padding-bottom: env(safe-area-inset-bottom, 0);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.circle-bottom-nav .circle-bottom-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 6px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.7rem;
    line-height: 1.1;
    text-align: center;
    position: relative;
    transition: color 0.15s ease;
}
.circle-bottom-nav .circle-bottom-tab i {
    font-size: 1.25rem;
    line-height: 1;
}
.circle-bottom-nav .circle-bottom-tab:hover {
    color: #FFB400;
}
.circle-bottom-nav .circle-bottom-tab.is-active {
    color: #FFB400;
    font-weight: 600;
}
.circle-bottom-nav .circle-bottom-tab.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: #FFB400;
    border-radius: 0 0 2px 2px;
}
.circle-bottom-nav .badge {
    position: absolute;
    top: 4px;
    right: 22%;
    font-size: 0.55rem;
    line-height: 1.1;
    padding: 2px 5px;
}

/* The bottom bar is mobile-only */
@media (min-width: 768px) {
    .circle-bottom-nav {
        display: none !important;
    }
}
/* Push page content above the fixed bar so footers / sticky CTAs are not
   covered. Padding on <body> sits at the very bottom of document flow,
   below the footer, so the bar covers empty space rather than content. */
@media (max-width: 767.98px) {
    /* Only reserve space for the fixed bottom tab bar when it actually renders.
       The bar comes from header.php (logged-in members/pros/admins), but the
       public homepage uses its own template (front-page.php) and never renders
       the bar — even for a logged-in admin. So exclude .home as well as the
       logged-out case, otherwise that 64px shows as dead white space at the
       bottom of the homepage. */
    body.logged-in:not(.home) {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
    }
    /* Tighten the banner's bottom padding on mobile so the gap between
       the header and the first card matches the page's side padding. */
    .site-header__member-banner {
        padding-bottom: 8px !important;
    }
}

/* ============================================================
   Shared page hero band — /recommendations/, /view-members/, /concierge/
   ============================================================ */
.circle-page-hero {
    background: linear-gradient(135deg, #2a1e2a 0%, #3a2a35 100%);
    color: rgba(255,255,255,0.92);
}
.circle-page-hero-title { color: #FFB400; }
.circle-page-hero-sub   { color: rgba(255,255,255,0.78); }


.circle-page-hero-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
}


/* ============================================================
   Highlight card — "Featured by The Circle" posts
   ============================================================ */
.circle-highlight-card {
    border: 1px solid #F7E3C1 !important;
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 80px);
}
.circle-highlight-header {
    background: #FFB400;
    color: #1A0F1A;
    font-size: 0.875rem;
    border-radius: 6px 6px 0 0;
    margin: -1px -1px 0 -1px;
}

/* Category header band on normal post cards. Same visual treatment as the
   highlight header so the dashboard feel is consistent. */
.circle-post-header {
    background: #FFB400;
    color: #1A0F1A;
    font-size: 0.875rem;
    border-radius: 6px 6px 0 0;
    margin: -1px -1px 0 -1px;
}
.circle-highlight-quote {
    background: #f9f6f1;
    border-left: 4px solid #FFB400;
}
.circle-highlight-parent {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* ============================================================
   Member quote-posts — embedded quote-block inside a normal card.
   Distinct from the Highlight (cream block, not a yellow band) so
   member curation reads differently from platform curation.
   ============================================================ */
.circle-quote-block {
    background: #f9f6f1;
    border-left: 4px solid #FFB400;
}
.circle-quote-parent {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* Quoted text: keep the first line aligned with the avatar top and drop the
   trailing paragraph margin so the "View original" link sits close. */
.circle-quote-snapshot p {
    margin-top: 0;
}
.circle-quote-snapshot p:last-child {
    margin-bottom: 0;
}

/* Quote trigger button — subtle until hovered. */
.circle-quote-btn.btn-link {
    color: #6c757d;
}
.circle-quote-btn.btn-link:hover,
.circle-quote-btn.btn-link:focus {
    color: #1A0F1A;
}

/* Category button grid — global so the quote-composer modal matches the
   dashboard composer wherever it's rendered (dashboard inlines its own copy). */
.category-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
@media (min-width: 768px) {
    .category-btn-group {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/* ============================================================
   @mentions — profile links + autocomplete dropdown
   ============================================================ */
.circle-mention,
.circle-mention:link,
.circle-mention:visited {
    color: #e6a200;
    font-weight: 600;
    text-decoration: none;
}
.circle-mention:hover,
.circle-mention:focus {
    text-decoration: underline;
}

.citadela-mention-dropdown {
    z-index: 3000;
    max-height: 260px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #E0D6C8;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px;
}
.citadela-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #1A0F1A;
    white-space: nowrap;
}
.citadela-mention-item.active,
.citadela-mention-item:hover {
    background: #FFF8E7;
}
.citadela-mention-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

/* Featured-comment badge in source thread — matches the yellow CTA button pattern. */
.circle-comment-featured-badge,
.circle-comment-featured-badge:link,
.circle-comment-featured-badge:visited {
    display: inline-block;
    background: #FFB400;
    color: #1A0F1A !important;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.circle-comment-featured-badge:hover,
.circle-comment-featured-badge:focus,
.circle-comment-featured-badge:active {
    background: #1A0F1A;
    color: #FFB400 !important;
    text-decoration: none;
}

/* Comment reaction buttons: keep the compact look but give touch users a
   sane hit area (py-0 px-1 at 0.75rem rendered ~24px tall — well under the
   44px/48px platform tap-target guidelines). */
.comment-reactions form .btn {
    min-height: 36px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Reaction buttons: in-flight state, matching the bookmark button's
   [data-busy] convention so a tapped emoji visibly acknowledges the tap
   instead of looking inert until the response lands. */
.circle-reaction-btn[data-busy="1"],
.circle-comment-reaction-btn[data-busy="1"] {
    opacity: 0.6;
    pointer-events: none;
}

/* Post reaction bar: touch-sized hit areas, to match the rule already applied
   to the compact comment reaction buttons. Only on coarse pointers, so the
   desktop layout keeps its tighter spacing. */
@media (pointer: coarse) {
    .reactions-section .btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* -------------------------------------------
   FLEX TRUNCATION UTILITY
   ------------------------------------------- */
/* A flex item defaults to min-width:auto and refuses to shrink below its
   content width, so a long name or message preview pushes the whole row past
   the viewport and any .text-truncate inside never fires. Bootstrap has no
   equivalent utility, and three templates were already using this class name
   on the assumption that it did — so they were silently doing nothing. */
.min-width-0 {
    min-width: 0;
}

/* -------------------------------------------
   ANDROID APP SAFE AREA
   ------------------------------------------- */
/* The Circle Android app runs edge-to-edge under a translucent status bar, so
   the header artwork reaches the top of the screen. Without reserved space the
   bell, envelope and avatar sit underneath the clock and signal icons.

   MainActivity sets --circle-safe-top to the status bar height in CSS pixels.
   It is unset everywhere else, so the fallback of 0 makes this inert in a
   normal browser and on desktop. */
.site-header {
    padding-top: var(--circle-safe-top, 0px);
}