/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/
#activity-groups-li.bp-groups-tab,
#photos-groups-li.bp-groups-tab,
#albums-groups-li.bp-groups-tab,
#nav-forum-groups-li.bp-groups-tab,
#invite-groups-li.bp-groups-tab,
#group-messages-groups-li.bp-groups-tab,
#videos-groups-li.bp-groups-tab {
  display: none;
}

.is-style-stripes th {
  text-align: center;
}

/*--------------------------------------------------------------
Data table cell highlighting
Highlighting is class-based so table content never carries inline
styles. The core Table block discards per-cell classes on edit, so
emphasis is applied at block level and targeted by column position.
--------------------------------------------------------------*/

/* Amber emphasis for the trailing columns of a table (e.g. the post
   columns appended to a denormalised profile table). */
.wp-block-table.cbf-highlight-last-3 tbody td:nth-last-child(-n + 3),
.wp-block-table.cbf-highlight-last-3 thead th:nth-last-child(-n + 3) {
  background-color: #fedc98;
  color: #1a1a1a;
}

/* Amber emphasis for a key column (first column), e.g. an id used as
   a primary or foreign key. */
.wp-block-table.cbf-highlight-first tbody td:first-child,
.wp-block-table.cbf-highlight-first thead th:first-child {
  background-color: #fedc98;
  color: #1a1a1a;
  font-weight: 700;
}

/* Sticky Table of Contents */
.ez-toc-sticky .ez-toc-open-icon {
  background-color: var(--bb-primary-button-background-regular);
  color: var(--bb-primary-button-text-hover);
  top: 150px;
}

.ez-toc-sticky .ez-toc-open-icon:hover {
  background-color: var(--bb-primary-button-background-hover);
}

.bb-sfwd-aside.bb-dark-theme .wp-block-table.is-style-stripes th {
  color: #fff;
}

.bb-sfwd-aside.bb-dark-theme
  .wp-block-table.is-style-stripes
  tbody
  tr:nth-child(odd) {
  background: #282a2c;
}

/* Code blocks in Markdown */
.wp-block-jetpack-markdown pre > code {
  font-size: 14px;
  line-height: 1.5;
}

/* Dark mode inline code blocks */
.bb-sfwd-aside.bb-dark-theme code:not(pre > code) {
  background: #282a2c;
}

pre[class*="language-"] {
  margin-bottom: 1.6875rem;
}

pre[class*="language-"].line-numbers {
  padding: 1em 0 1em 3.8em;
}

/* Highlighted lines in code blocks */
.wp-block-jetpack-markdown .line-highlight,
pre[class*="language-"] .line-highlight {
  background: linear-gradient(
    to right,
    rgba(255, 183, 77, 0.15),
    rgba(255, 183, 77, 0.1)
  );
  border-left: 3px solid #ffb74d;
}

/* Code annotations */
.code-annotations {
  list-style: none;
}

.code-annotations > li::before {
  color: #000;
  content: "Line " attr(value) ":";
  font-weight: 700;
  margin-right: 0.5em;
}

/* Dark mode code annotations */
.bb-sfwd-aside.bb-dark-theme .code-annotations li::before {
  color: #fff;
}

/*--------------------------------------------------------------
Inline SVG schema / entity-relationship diagrams
Class rules are duplicated in an embedded style block inside each SVG
so colours survive WordPress sanitisation. These rules keep theming in
one place when the stylesheet is loaded.
--------------------------------------------------------------*/
.cbf-er-figure {
  margin: 0 0 1.6875rem;
}

svg.cbf-er {
  display: block;
  fill: none;
  height: auto;
  max-width: 100%;
  font-family: sans-serif;
}

.cbf-er .cbf-er-box {
  fill: #fff;
  stroke: #90a4b8;
}

.cbf-er .cbf-er-head {
  fill: #eef2f7;
  stroke: #90a4b8;
}

.cbf-er .cbf-er-key,
.cbf-er .cbf-er-keyhead {
  fill: #fedc98;
  stroke: #b07d00;
}

.cbf-er .cbf-er-title {
  font-size: 15px;
  font-weight: 700;
  fill: #1a1a1a;
}

.cbf-er .cbf-er-label {
  font-size: 13px;
  fill: #1a1a1a;
}

.cbf-er .cbf-er-label-key {
  font-size: 13px;
  font-weight: 700;
  fill: #1a1a1a;
}

.cbf-er .cbf-er-rel {
  fill: none;
  stroke: #b07d00;
  stroke-width: 2;
}

.cbf-er .cbf-er-reltext {
  font-size: 12px;
  fill: #b07d00;
}

.cbf-er .cbf-er-arrow {
  fill: #b07d00;
}

/*--------------------------------------------------------------
Glossary (CBF Semantic Glossary plugin)
The plugin ships theme-neutral styles; these adapt them to this
theme and to LearnDash, which the plugin knows nothing about.
--------------------------------------------------------------*/

/* Keep glossary jump targets (#ref-…, #dfn-…, A–Z index) clear of
   the sticky masthead. */
:root {
  --glossary-scroll-margin: 6rem;
}

/* LearnDash strips colour and underlines from links in lessons with
   a five-class selector. Restate the plugin's reference style with
   one that outranks it, so terms still read as glossary terms rather
   than ordinary links. The BEM class names are LearnDash's own. */
/* stylelint-disable selector-class-pattern */
.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern)
  a.glossary-ref:not(.button):not(.screen-reader-shortcut) {
  color: var(--glossary-ref-color, inherit);
  text-decoration: underline dotted var(--glossary-ref-underline-color, #3858e9);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.learndash-wrapper:not(.ld-registration__outer-wrapper):not(.learndash-wrapper--modern)
  a.glossary-ref:not(.button):not(.screen-reader-shortcut):is(:hover, :focus-visible) {
  text-decoration-style: solid;
}
/* stylelint-enable selector-class-pattern */

/* A–Z index letters: the theme's link blue (#007cff) is too light on
   the plugin's index tiles (about 3.5:1). This darker blue keeps them
   above 4.5:1 on both the tile and its hover tint. Specific enough to
   outrank `.learndash-wrapper a` inside lessons. */
.glossary-index li a:is(:link, :visited, :hover, :focus) {
  color: #1d4ed8;
}

/* Glossary entries: a rule down the left of each term and definition
   set, as in the design mockups. */
.glossary .glossary-entry {
  padding-inline-start: 1rem;
  border-inline-start: 3px solid #e5e7eb;
}