/* ----------------------------------------------------------------------------
   GROUP TOOLBAR BAND — S415.

   Tom's ask via Chris: "we need the same type of feel that the news feed has and
   we need that in the groups... It needs to have a complete toolbar up top."

   Deliberately thin. Almost everything is inherited from subscriptions.css
   (.subs-*) and blogs.css (.bh-*), which is the whole point — a group should
   stop looking like a different product. Only what is genuinely group-specific
   lives here.
---------------------------------------------------------------------------- */

.grp-page-wrap::after { content: ""; display: table; clear: both; }

/* The band sits above the Bootstrap container the group page already uses, so
   it has to borrow that container's gutter or it floats out of alignment with
   the columns beneath it. */
/* S429 (Chris): "the tool bar needs to fill the page width end to end".
   The 85px left inset was the old sidebar's gutter - the band had to clear
   #column_left to stay aligned with the columns beneath it. That column is gone,
   so the inset now just holds the band off the edge. Both the band and the
   content container below it now share ONE 15px gutter, which is what makes the
   toolbar and the landing/capture page below it start and end on the same pixel. */
/* MEASURED on dev3 after the first deploy (S429): the content went edge to edge
   (0 -> 1710) but the band stayed 1423px wide, centred at 144 -> 1567 - because this
   element ALSO carries .subs-page-wrapper, the newsfeed's wrapper, which pins
   max-width:1423px with auto margins. Releasing it here puts the band on the same
   15px gutter as the content: 15 -> 1695 on a 1710 viewport, the same pixels as
   #column_main. Groups only - subscriptions.css and the newsfeed are untouched. */
.grp-page-wrap {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Group photos share the non-cropping icon box. */
.grp-nav-icon {
    background: #fff;
}

/* Group names run long ("The Neal and Janet Brown Family Trust" is a real one),
   and the band must not wrap onto a second line because of it. */
.grp-nav-title {
    max-width: 460px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Member count reads as part of the breadcrumb rather than as a separate stat —
   it is context, not a metric. */
.grp-membercount {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .grp-page-wrap { padding-left: 15px; }
    .grp-nav-title { max-width: 260px; }
}

@media (max-width: 700px) {
    .grp-membercount { display: none; }
    .grp-nav-title { max-width: 180px; }
}


/* ----------------------------------------------------------------------------
   GROUP BAND SIZING (S418, Chris: "way too thick, the height is way too high
   ... take a look at one from actual production and mimic that").

   MEASURED, not guessed. Production /blogs: .bh-section-header 122px, its three
   blocks (325 + 608 + 384 + gaps = 1341px) sitting on ONE line inside 1423px.
   The group page gives the band only ~1299px of inner width, because the legacy
   left sidebar S415 deliberately left in place still takes ~100px. 1341 into
   1299 does not go, so .ph-nav-right WRAPPED to a second line and the header
   doubled to ~248px. The excess height was the wrap - not padding, not the
   button height.

   So the fix is to make the three blocks FIT: three buttons per row (markup, in
   profile_group.php) and a narrower button column here. Measured after: 133px,
   against production's 122px.

   Scoped to .grp-band so /blogs, /meetings and every other surface sharing this
   chrome keep production's proportions untouched.

   When the legacy sidebar finally retires (the S415 carry-forward), the band
   gets the full width back and these caps can go with it.
---------------------------------------------------------------------------- */

/* S429: the legacy sidebar has now retired (the whole #column_left is gone from
   profile_group.php), which is the condition the note above named for lifting this
   cap. The row also gained a fourth control - the group's JOIN/QUIT button, which
   had to leave the column with it - so 520px (3 x 165 + 2 x 12 gaps = 519) no longer
   fits the row and would reproduce the very overflow described above. The join
   control sizes to its own content rather than taking a 165px slot, because its
   label swings from "Join Group" to "Accept Invitation / Not Now / Decline". */
.grp-band .bh-nav-buttons { max-width: none; }

/* Sizes to content, and never stretches to the dropdowns' fixed 165px slot. */
.grp-band .bh-nav-row .bh-grp-join { flex: 0 0 auto; display: flex; align-items: center; }
/* The button classes inside come from GroupButton() (.button_blue/.button_white),
   which are site-wide - left alone here so the control keeps looking like every
   other join button on the site. Only the row seating is set. */
.grp-band .bh-nav-row .bh-grp-join a { white-space: nowrap; }

/* A little more air between buttons (Chris). */
.grp-band .bh-nav-row { gap: 12px; }

/* min-width:0 is the load-bearing line, not the max-width.
   .bh-btn carries min-width:196px in the base CSS, and MIN-width beats
   MAX-width - so the 165px cap below was inert and the row was really
   3 x 196 + gaps = 604px inside a 520px box. The buttons were overflowing
   their own column and spilling toward the subscribe copy. That, not the
   column cap, was what Chris kept seeing run into the text. */
.grp-band .bh-btn:not(.ph-nav-page-select) {
    min-width: 0;
    max-width: 165px;
    font-size: 12px;
}

/* The dropdown toggles are .bh-btn inside .bh-dd, so they inherit the cap and
   stay in line with the plain buttons rather than stretching past them. */
/* The Members dropdown is pinned to the SAME width as a button (Chris:
   "make the members bar the same width as the other bars"). It has no
   min-width of its own, so without an explicit width it shrank to its
   content - 96px against the buttons' 165px. */
/* S425: scoped to the BUTTON ROW. The main page dropdown (includes/
   nav_page_select.php) is now a .bh-dd too, and it lives in the header's COLUMN
   flex - where "flex: 0 0 165px" is a 165px HEIGHT. Measured on dev3: it made
   the left block 196px tall and the band 215px. */
.grp-band .bh-nav-row .bh-dd {
    flex: 0 0 165px;
    width: 165px;
    min-width: 0;
    max-width: 165px;
}
.grp-band .bh-nav-row .bh-dd .bh-btn { width: 100%; min-width: 0; max-width: none; }

/* Match each menu to its toggle instead of the shared 200px minimum. */
.grp-band .bh-nav-row .bh-dd > .bh-dd-menu {
    width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
}
.grp-band .bh-nav-row .bh-dd-menu > .bh-dd-head,
.grp-band .bh-nav-row .bh-dd-menu > .bh-dd-item {
    white-space: normal; overflow-wrap: anywhere;
}

/* S425: the sidebar's unread counts ride on the dropdown items now (and the
   pending+joins total on the Members toggle), as a small indigo tally. */
.grp-dd-tally {
    display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px;
    border-radius: 9px; background: #3b5bbf; color: #fff;
    font-family: 'Tahoma', 'Poppins', Geneva, sans-serif; font-size: 10px; font-weight: bold;
    line-height: 16px; text-align: center; vertical-align: 1px;
}
.grp-band .bh-btn .grp-dd-tally { margin-left: 4px; }

/* Second pass on the band, from Chris looking at the deployed result:
   "the height is better, the problem now is that the button in the middle run
   into the text above subscribe, the home page drop down is too wide, remove
   the small font above the drop down and make the drop down less wide".

   The 125px height held; what was left was horizontal crowding. Measured on
   dev3: the button column ended at x=1197 and the subscribe panel began at
   x=1251 - a 54px gap at MY viewport, but Chris's window is narrower, and the
   left block was 325px wide only because the breadcrumb and the page-select
   were both 235px. Shrinking those two gives the width back to everything to
   their right, which is why all three of his notes are really one fix. */

/* The breadcrumb line goes. NOTE: the member count ("252 members") lived in
   it and goes with it - it is still shown in the group's left column, which is
   where a member actually looks for it. */
.grp-band .subs-nav-breadcrumb { display: none; }

/* Keep the group title column sized to its content; GO TO has shared sizing. */
.grp-band .subs-nav-page-info {
    width: -moz-fit-content;
    width: fit-content;
}

/* A guaranteed gutter, so the buttons can never touch the subscribe copy at a
   narrower window the way they did in Chris's screenshot. flex-shrink:0 on the
   panel stops it being squeezed into the buttons instead. */
.grp-band .bh-nav-buttons { margin-right: 22px; }
.grp-band .ph-nav-right { flex-shrink: 0; }

/* ----------------------------------------------------------------------------
   S429 (Chris): "the landing or capture page should fill the same width as the
   tool bar width end to end" - GROUPS ONLY.

   The base rule in css/style.css sets this container to max-width:95% centred,
   while the band above it runs on .grp-page-wrap's 15px gutter - so the toolbar
   and the page beneath it never shared an edge. Overridden HERE rather than in
   style.css on purpose: style.css is the site-wide sheet, and this is a groups
   change only. groups.css is loaded last on profile_group.php (and ONLY there),
   so an equal-specificity rule wins without !important and cannot reach any
   other surface.
---------------------------------------------------------------------------- */
.full_width_main_content_container_group_custom {
    max-width: 100%;
}

/* The columns inside bleed 15px each side (width:calc(100% + 30px) with -15px
   margins) to cancel Bootstrap's gutter. With the container now full width that
   bleed would push the content 15px PAST the band on both sides - the toolbar
   and the page would miss each other by exactly the gutter they were meant to
   share. Matching padding puts the bleed back inside the same 15px. */
.full_width_main_content_container_group_custom {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}