/* ---------------------------------------------------------------------------
   Membergate blog.

   Every colour here comes from a custom property. Those properties are set at
   request time by includes/blogstyle.cfm, which prefers a theme's own
   --mg-primary / --mg-btn if the theme defines them, and falls back to the
   site's own style settings when no theme is in use. Nothing in this file
   hard-codes a brand colour, so a blog looks like the site it belongs to.

   The greys ARE hard-coded: they are structure rather than brand, and deriving
   them from a theme accent produces muddy borders on dark palettes.

   Class names match the markup in mgtags/mgbloglist.cfm, mgblogarchive.cfm,
   mgblogcomments.cfm and public/Programs/blog*.cfm.
--------------------------------------------------------------------------- */

.mgbloglist,
.mgblogpost,
.mgbloglayout { --mgblog-radius: 10px; }

/* --- Page shell: listing beside its widgets ----------------------------- */

.mgbloglayout { display: flex; gap: 32px; align-items: flex-start; }
/* flex-basis auto, not 0. A column laid out from a zero basis contributes
   nothing when the parent is being measured, so in a shrink-to-fit content
   column -- see the note on .mgblogpost -- the listing would collapse and
   leave the 260px sidebar holding the page up on its own. */
.mgbloglayout .mgbloglistcol { flex: 1 1 auto; min-width: 0; }
.mgbloglayout .mgblogwidgets { width: 260px; flex: 0 0 260px; }

/* One column on anything narrower than a tablet: a 260px sidebar beside a
   card list leaves neither enough room. */
@media (max-width: 860px) {
    .mgbloglayout { display: block; }
    .mgbloglayout .mgblogwidgets { width: auto; }
}

/* --- Blog / category / archive heading ---------------------------------- */

.mgblogheader { margin: 0 0 28px; padding-bottom: 18px; border-bottom: 2px solid var(--mgblog-accent); }
.mgblogtitle { margin: 0; font-size: 2em; line-height: 1.2; }
.mgblogdescription { margin: 10px 0 0; color: var(--mgblog-muted); font-size: .95em; }

/* --- Post cards --------------------------------------------------------- */

.mgbloglist { display: grid; gap: 22px; }
.mgblogempty { color: var(--mgblog-muted); font-style: italic; }

.mgblogcard {
    position: relative;
    /* The whole card is one link, so say so on the way past. */
    cursor: pointer;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 18px;
    background: var(--mgblog-card);
    border: 1px solid var(--mgblog-border);
    border-radius: var(--mgblog-radius);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.mgblogcard:hover {
    border-color: var(--mgblog-accent);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
}

.mgblogcardimage { flex: 0 0 200px; display: block; overflow: hidden; border-radius: 8px; line-height: 0; }
.mgblogcardimage img { width: 100%; height: 140px; object-fit: cover; display: block; transition: transform .3s ease; }
.mgblogcard:hover .mgblogcardimage img { transform: scale(1.04); }

.mgblogcardbody { flex: 1 1 auto; min-width: 0; }
.mgblogcardtitle { margin: 0 0 8px; font-size: 1.25em; line-height: 1.3; }
.mgblogcardtitle a { color: inherit; text-decoration: none; }
.mgblogcardtitle a:hover { color: var(--mgblog-accent) !important; }
/* The headline link, stretched over the whole card. This is what makes the
   card clickable: one real anchor, so hovering still shows the address, the
   link still opens in a new tab, and a crawler still sees one link to one
   post -- none of which a click handler on the article would have given. */
.mgblogcardtitle a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
/* Keyboard users get the outline around the card rather than the headline,
   since the card is what they are about to activate. */
.mgblogcard:focus-within { border-color: var(--mgblog-accent); box-shadow: 0 0 0 3px var(--mgblog-accentfaint); }
.mgblogcardtitle a:focus { outline: none; }
/* Anything a reader might legitimately want to click or select inside the
   card has to sit above the overlay. */
.mgblogcardtease a, .mgblogcardmeta a { position: relative; z-index: 2; }

.mgblogcardmeta { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 10px; font-size: .82em; color: var(--mgblog-muted); }
.mgblogcardauthor { font-weight: 600; }
/* A dot between author and date, only when both are present. */
.mgblogcardauthor + .mgblogcarddate::before { content: "\00b7"; margin-right: 10px; }

.mgblogcardtease { margin: 0 0 12px; line-height: 1.6; }
/* Not a link any more -- the card is. It stays as the visible cue that there
   is more to read, and follows the card's hover rather than its own. */
.mgblogcardmore { display: inline-block; font-weight: 600; font-size: .9em; color: var(--mgblog-accent); }
.mgblogcardmore::after { content: " \2192"; transition: margin-left .15s ease; display: inline-block; }
.mgblogcard:hover .mgblogcardmore { text-decoration: underline; }
.mgblogcard:hover .mgblogcardmore::after { margin-left: 4px; }

/* Cards stack their image above the text once there is no room beside it. */
@media (max-width: 560px) {
    .mgblogcard { display: block; }
    .mgblogcardimage { margin-bottom: 14px; }
    .mgblogcardimage img { height: 180px; }
}

/* --- Paging ------------------------------------------------------------- */

.mgblogpaging {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--mgblog-border);
}
.mgblogpaging a {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid var(--mgblog-border);
    border-radius: 999px;
    background: var(--mgblog-card);
    color: var(--mgblog-accent);
    font-size: .9em;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Same reason as .mgblogcategory:hover -- text sits on the filled accent. */
.mgblogpaging a:hover { background: var(--mgblog-accent); border-color: var(--mgblog-accent); color: var(--mgblog-accenttext) !important; text-decoration: none; }
.mgblogpagecount { font-size: .85em; color: var(--mgblog-muted); }
/* Page 1 has no "newer" link, so the count would jump to the left without
   something holding the space. */
.mgblogpaging .mgblogpagenext:only-of-type { margin-left: auto; }

/* --- Category and archive widgets --------------------------------------- */

.mgblogwidgets { display: grid; gap: 24px; align-content: start; }
.mgblogwidget {
    padding: 18px;
    background: var(--mgblog-panel);
    border: 1px solid var(--mgblog-border);
    border-radius: var(--mgblog-radius);
}
.mgblogwidgetheading {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mgblog-accent);
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.mgblogwidgetlist { margin: 0; padding: 0; list-style: none; }
.mgblogwidgetlist li { border-bottom: 1px solid var(--mgblog-border); }
.mgblogwidgetlist li:last-child { border-bottom: 0; }
.mgblogwidgetlist a {
    display: block;
    padding: 8px 2px;
    color: inherit;
    font-size: .92em;
    text-decoration: none;
}
.mgblogwidgetlist a:hover { color: var(--mgblog-accent) !important; }
/* The count reads as part of the line -- "September 2026 (4)" -- rather than
   being pushed out to the right margin, where it sat too far from the name it
   belongs to for the eye to pair them. Brackets come from here so the count is
   a bare number in the markup, which is what it is. */
.mgblogwidgetcount { margin-left: 6px; color: var(--mgblog-muted); font-size: .85em; }
.mgblogwidgetcount::before { content: "("; }
.mgblogwidgetcount::after { content: ")"; }
.mgblogwidgetlist a:hover .mgblogwidgetcount { color: inherit; }

/* --- The post page ------------------------------------------------------ */

/* No width and no max-width here, deliberately.

   A theme may lay its content column out as a float with no width of its own --
   the stock alpha theme does exactly that -- and such a column is sized by what
   is inside it. A max-width in here therefore does not set a reading measure:
   it shrinks the whole page column to that figure, taking the theme's banner
   and footer with it. A width:100% is worse, because a percentage resolves to
   auto while the column is being measured, so it collapses further still.

   So the blog fills whatever column it is given, exactly as an ordinary content
   page does, and the theme goes on deciding how wide that is. */
.mgblogpost { display: block; clear: both; }
.mgblogpost .mgmainimage { margin: 0 0 24px; }
.mgblogpost .mgmainimage img { width: 100%; height: auto; border-radius: var(--mgblog-radius); display: block; }
.mgblogbody { line-height: 1.75; font-size: 1.02em; }
.mgblogbody > *:first-child { margin-top: 0; }
.mgblogbody img { max-width: 100%; height: auto; border-radius: 6px; }
.mgblogbody h2, .mgblogbody h3, .mgblogbody h4 { margin: 1.6em 0 .5em; line-height: 1.3; }
.mgblogbody blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--mgblog-accent);
    color: var(--mgblog-muted);
    font-style: italic;
}
.mgblogbody pre { padding: 16px; overflow-x: auto; background: var(--mgblog-panel); border-radius: 8px; }
.mgblogbody table { max-width: 100%; }

/* Category chips beneath a post. */
.mgblogcategories { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.mgblogcategory {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid var(--mgblog-border);
    border-radius: 999px;
    background: var(--mgblog-panel);
    color: var(--mgblog-muted);
    font-size: .82em;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* !important, reluctantly, and only on hover colour.

   Themes ship a blanket "a:hover { color: ... !important }" -- the stock alpha
   theme sets a 60%-opacity teal -- which otherwise wins here and paints the
   label that colour on top of a filled accent pill, where it cannot be read.
   Anywhere the blog puts text ON its accent, the hover colour has to be able
   to say so. Every other declaration below is left at normal weight. */
.mgblogcategory:hover { background: var(--mgblog-accent); border-color: var(--mgblog-accent); color: var(--mgblog-accenttext) !important; text-decoration: none; }

/* --- Comments ----------------------------------------------------------- */

/* A flex column, so the heading, the comments and the form stack in that order
   whatever the surrounding theme does to them. Floats and display:inline do not
   apply to flex items, so no theme rule can pull the form up beside the heading
   the way one was doing -- and none of them has to be hunted down first.

   clear:both keeps a float ABOVE this section from pulling the section itself
   up. No width or max-width, for the reason given on .mgblogpost above. */
.mgblogcomments {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    clear: both;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--mgblog-border);
}
.mgblogcommentsheading { margin: 0 0 22px; font-size: 1.3em; }

/* One row at the top of the discussion: the order controls on the left, the
   way in to the form on the right. */
.mgblogcommenttoolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mgblog-border);
}
/* margin-left:auto rather than only justify-content, so the button still sits
   right when the sort links are absent -- which they are on a discussion with
   a single conversation in it. */
.mgblogcommenttoolbar .mgblogcommentopen { margin-left: auto; }
.mgblogcommenttoolbar .mgblogcommentsignin { margin: 0 0 0 auto; }

/* Reader's choice of order. Links rather than a dropdown, so it works with no
   JavaScript; the one in force is plain text, since a link to where you already
   are is not a link. */
.mgblogcommentsort {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    font-size: .85em;
}
.mgblogcommentsortlabel { color: var(--mgblog-muted); font-weight: 600; }
.mgblogcommentsort a { color: var(--mgblog-accent); text-decoration: none; }
.mgblogcommentsort a:hover { text-decoration: underline; }
.mgblogcommentsortcurrent { font-weight: 700; }

.mgblogcommentlist { margin: 0 0 34px; padding: 0; list-style: none; display: grid; gap: 16px; }
.mgblogcomment {
    padding: 16px 18px;
    background: var(--mgblog-panel);
    border: 1px solid var(--mgblog-border);
    border-left: 3px solid var(--mgblog-accent);
    border-radius: 0 var(--mgblog-radius) var(--mgblog-radius) 0;
}
.mgblogcommentmeta { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 8px; font-size: .85em; }
.mgblogcommentauthor { font-weight: 700; }
.mgblogcommentdate { color: var(--mgblog-muted); font-size: .92em; }
.mgblogcommentbody { margin: 0; line-height: 1.65; }
.mgblogcommentbody p:last-child { margin-bottom: 0; }

/* A reply. The list is flat and this is what makes it read as a thread, so
   nothing can be left half-nested if a parent is later removed. One level
   only -- a reply to a reply is stored against the comment that started the
   thread, so the indent never compounds. */
.mgblogcommentreply { margin-left: 32px; border-left-color: var(--mgblog-border); }
@media (max-width: 560px) { .mgblogcommentreply { margin-left: 14px; } }

.mgblogcommentactions { margin: 10px 0 0; }
.mgblogcommentreplylink { font-size: .82em; font-weight: 600; color: var(--mgblog-accent); text-decoration: none; }
.mgblogcommentreplylink:hover { text-decoration: underline; }

/* "Replying to X", shown once a reply is under way. */
.mgblogcommentreplyingto {
    margin: 0 0 16px;
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--mgblog-accentfaint);
    font-size: .88em;
}
.mgblogcommentreplyingname { font-weight: 700; }
.mgblogcommentcancelreply { margin-left: 10px; font-size: .92em; color: var(--mgblog-muted); }
/* The form is moved between comments when replying, so it needs a little air
   of its own once it is no longer the last thing on the page. */
.mgblogcomment + .mgblogcommentform { margin: 4px 0 16px 32px; }

/* --- Comment form ------------------------------------------------------- */

/* --- The comment form, folded away until wanted ------------------------- */

/* Hidden entirely: the label beside it is the control, and the checkbox is
   only what remembers the state without any script. */
.mgblogcommenttoggle { position: absolute; opacity: 0; width: 0; height: 0; }
/* The label IS the button, and it stays in the toolbar whether the form is
   open or shut -- which is the whole reason the form is a sibling of it
   rather than living inside it. */
.mgblogcommentopen {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 22px;
    border: 1px solid var(--mgblog-button);
    border-radius: 6px;
    background: var(--mgblog-button);
    color: var(--mgblog-buttontext);
    font-weight: 600;
    font-size: .95em;
    cursor: pointer;
    transition: opacity .15s ease;
}
.mgblogcommentopen:hover { opacity: .88; }
/* Focus follows the checkbox, which is where the keyboard actually is. */
.mgblogcommenttoggle:focus-visible + .mgblogcommenttoolbar .mgblogcommentopen,
.mgblogcommenttoggle:focus + .mgblogcommenttoolbar .mgblogcommentopen { outline: 3px solid var(--mgblog-accentfaint); outline-offset: 2px; }
/* Open, the button is the heading of the form below it rather than a call
   to action, so it steps back to an outline of itself. */
.mgblogcommenttoggle:checked + .mgblogcommenttoolbar .mgblogcommentopen {
    background: transparent;
    border-color: var(--mgblog-border);
    color: var(--mgblog-accent);
}

/* Site stylesheets routinely float forms or leave them shrink-to-fit, and this
   one is dropped into whatever theme the site runs. Left to inherit that, the
   form sizes itself to its contents -- and the fields inside, asking for
   width:100% of a shrink-to-fit parent, collapse to the textarea's own cols
   width. The result is a narrow box floated up beside the heading. So the form
   states its own box rather than trusting what it lands in. */
.mgblogcommentform {
    display: none;
    float: none;
    clear: both;
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
    /* Space beneath, so the form does not sit flush against the first comment.
       The list has no top margin of its own -- it is normally the first thing
       under the toolbar -- so the gap belongs to whatever opens above it. */
    margin: 0 0 26px;
    background: var(--mgblog-panel);
    border: 1px solid var(--mgblog-border);
    border-radius: var(--mgblog-radius);
}
.mgblogcommentform p { max-width: none; }
/* Revealed by the checkbox, through a sibling selector -- no script. */
.mgblogcommenttoggle:checked ~ .mgblogcommentform { display: block; }
.mgblogcommentform h4 { margin: 0 0 18px; font-size: 1.1em; }
.mgblogcommentfield { margin: 0 0 16px; }
.mgblogcommentfield label { display: block; margin-bottom: 6px; font-size: .87em; font-weight: 600; }
.mgblogcommentform input[type="text"],
.mgblogcommentform input[type="email"],
.mgblogcommentform textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mgblog-border);
    border-radius: 6px;
    background: var(--mgblog-card);
    color: inherit;
    font: inherit;
    font-size: .95em;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mgblogcommentform textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.mgblogcommentform input[type="text"]:focus,
.mgblogcommentform input[type="email"]:focus,
.mgblogcommentform textarea:focus {
    outline: none;
    border-color: var(--mgblog-accent);
    box-shadow: 0 0 0 3px var(--mgblog-accentfaint);
}
.mgblogcommentform .mgblogcommentnote { font-weight: 400; color: var(--mgblog-muted); font-size: .85em; }

.mgblogcommentsubmit { margin: 20px 0 0; }
.mgblogcommentsubmit input[type="submit"] {
    display: inline-block;
    padding: 11px 26px;
    border: 1px solid var(--mgblog-button);
    border-radius: 6px;
    background: var(--mgblog-button);
    color: var(--mgblog-buttontext);
    font-family: inherit;
    font-size: inherit;
    /* NOT the "font" shorthand, and an explicit line-height.

       "font: inherit" also inherits line-height, and this button sits in a <p>
       -- which the alpha theme gives a fixed line-height of 22px. A fixed
       line-height taller than the text leaves the label sitting low in the
       button instead of centred in it, which is what it was doing. A unitless
       line-height here is measured from the button's own font size, so the
       label is centred whatever a theme does to paragraphs. */
    line-height: 1.2;
    height: auto;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s ease, transform .1s ease;
}
.mgblogcommentsubmit input[type="submit"]:hover { opacity: .88; }
.mgblogcommentsubmit input[type="submit"]:active { transform: translateY(1px); }

/* The captcha sits between the last field and the button. reCAPTCHA renders a
   fixed-width iframe, which has to be allowed to shrink on a phone. */
.mgblogcommentcaptcha { margin: 18px 0 0; }
.mgblogcommentcaptcha .g-recaptcha { display: inline-block; max-width: 100%; overflow: hidden; }

.mgblogcommentmessage,
.mgblogcommenterror {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid;
    border-radius: 6px;
    font-size: .92em;
}
.mgblogcommentmessage { background: #eaf6ec; border-color: #b7dfc0; color: #1d6b30; }
.mgblogcommenterror { background: #fdecea; border-color: #f5c2bd; color: #93251a; }

/* The honeypot is positioned off-screen inline; this only stops it from
   inheriting field styling if that inline style is ever removed. */
.mgblogcommentwebsite { display: none !important; }

/* The way back to the listing, on a post being read inside the page the blog
   was placed on. Also the no-JavaScript fallback for the breadcrumb, which is
   finished off in the browser. */
.mgblogback { margin: 0 0 16px; font-size: .9em; }
.mgblogback a { color: var(--mgblog-accent); text-decoration: none; font-weight: 600; }
.mgblogback a:hover { text-decoration: underline; }

/* "Posts in Announcements", above a category or month being read inside the
   page the blog was placed on. */
.mgblogfilterheading {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mgblog-accent);
    font-size: 1.4em;
}