/*
 * OpenBCI Community — brand alignment with openbci.com
 *
 * Tokens mirror react-site/landing/src/style/_variables.scss:
 *   pop            #F98025
 *   secondary-pop  #9AADCE
 *   secondary      #102337
 *   secondary-dark #011326
 *   black          #030A12
 *   grey-light     #E6E7E8
 *   grey-mid       #C4C7CA
 *
 * Loaded after /bootstrap/css/style.css so rules here win the cascade.
 */

/* ============================================================ *\
 * Layout — clear the fixed header stack
 * (68px navbar + newsletter/login banner, both position:fixed)
\* ============================================================ */

/* `html body` outranks the plain `body { padding: 0 }` reset that WP core's
   global-styles inline CSS injects after all stylesheets (WP >= 6.1) —
   that reset is what broke the theme's original header clearance. */
html body {
  padding-top: 122px;
}

@media only screen and (max-width: 767px) {
  /* Newsletter text is hidden-xs; only the login row remains */
  html body {
    padding-top: 110px;
  }
}

/* Between 768px and 1199px the promo wraps to two lines (74px header) */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  html body {
    padding-top: 142px;
  }
}

/* ============================================================ *\
 * Typography
\* ============================================================ */

body {
  font-family: "Montserrat", sans-serif;
  color: #030a12;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  color: #102337;
}

h1,
h2,
h3 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
}

h4,
h5,
h6 {
  font-weight: 600;
}

/* Secondary-header promotion stays in the natural inline text flow. */
#secondaryHeader .community-promo {
  margin: 0;
  padding: 12px 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  font-family: "Montserrat", sans-serif;
}

#secondaryHeader .community-promo__link {
  color: #102337;
  font-weight: 700;
  text-underline-offset: 0.15em;
}

#secondaryHeader .community-promo__link:hover,
#secondaryHeader .community-promo__link:focus-visible {
  color: #011326 !important;
  text-decoration-thickness: 2px;
}

#secondaryHeader .community-promo__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Content links: orange pop, calm blue on hover (matches main-site <p><a>) */
#content a:not(.button):not(.community-button):not(.category-button),
.container
  a:not(.button):not(.community-button):not(.category-button):not(
    .communityLoginItem
  ) {
  color: #f98025;
  transition: color 0.2s cubic-bezier(0.25, -0.25, 0.75, 1.25);
}

#content a:hover,
.container a:hover {
  color: #9aadce;
  text-decoration: none;
}

/* Post titles render inside links — keep them navy, orange on hover */
a h1,
a h2,
a h3,
a h4,
a h5,
a h6 {
  color: #102337;
  transition: color 0.2s cubic-bezier(0.25, -0.25, 0.75, 1.25);
}

a:hover h1,
a:hover h2,
a:hover h3,
a:hover h4,
a:hover h5,
a:hover h6 {
  color: #f98025;
}

/* ============================================================ *\
 * Community hero (community_navigation.php)
\* ============================================================ */

.community-hero-title {
  color: #102337;
  margin-top: 24px;
}

.community-hero-text {
  color: #102337;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.5em;
  letter-spacing: 0.5px;
}

/* ============================================================ *\
 * Buttons — match .button on openbci.com
\* ============================================================ */

.community-button {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.025rem;
  height: 40px;
  color: #102337;
  background: #fff;
  border: 1px solid #c4c7ca;
  border-radius: 20px;
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.25, -0.25, 0.75, 1.25);
}

.community-button:hover {
  color: #fff;
  background: #f98025;
  border-color: #f98025;
}

.btnComActive {
  color: #fff;
  background: #f98025;
  border: none;
}

.category-button {
  font-family: "Montserrat", sans-serif;
  border-radius: 14px;
}

.become-contributor-button {
  font-family: "Montserrat", sans-serif;
  background: #f98025 !important;
  border-color: #f98025 !important;
  border-radius: 14px;
}

/* Unify legacy oranges (#E37625/#E27225/#B16317) on the brand pop */
.masonry-box a,
.post_wrapper a {
  transition: color 0.2s cubic-bezier(0.25, -0.25, 0.75, 1.25);
}

/* ============================================================ *\
 * Post cards (masonry grid)
\* ============================================================ */

/* One soft shadow + white surface behind the whole card, painted on a
   pseudo-element sized to the card content (inside the article's gutter
   padding). box-shadow on a static layer is cheap for the masonry script
   to move around, unlike filter: drop-shadow which repaints per frame
   and left ghost shadows at cards' pre-layout positions.
   (.masonry-entry-test is the homepage loop, .masonry-entry the others.) */
.masonry-entry,
.masonry-entry-test {
  position: relative;
  /* Own stacking context so the ::before layer (z-index: -1) stays
	   inside the card — without this, Chromium paints it behind the
	   page background and the card surface disappears. */
  z-index: 0;
}

.masonry-entry::before,
.masonry-entry-test::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: #fff;
  border-radius: 10px;
  box-shadow:
    0 3px 6px rgba(3, 10, 18, 0.1),
    0 8px 22px rgba(3, 10, 18, 0.1);
}

/* Match each wrapper's gutter padding */
.masonry-entry::before {
  inset: 0 10px 15px 0;
}

.masonry-entry-test::before {
  inset: 10px 12px 15px 12px;
}

/* Hide cards until the masonry script has positioned them (the script
   adds .masonry-loading immediately, .masonry-ready after layout — so
   without JS, cards simply render in normal flow, always visible). */
.masonry-loading .masonry-entry-test {
  opacity: 0;
}

.masonry-ready .masonry-entry-test {
  opacity: 1;
  transition: opacity 0.25s ease-out;
}

/* Thumbnails fill the card edge-to-edge inside the rounded corners.
   The fixed aspect ratio (crop-to-fill) keeps card heights identical
   before and after images load — lazy-loaded images below the fold
   otherwise reserve space at their original photo's proportions, and
   the masonry script bakes those wrong heights into the layout. */
.masonry-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.masonry-details {
  background: #fff;
  border: none;
  border-radius: 0 0 10px 10px;
  /* flow-root keeps the title's margin-top from collapsing out of the
	   card, which left a white seam between thumbnail and details. */
  display: flow-root;
}

.masonry-thumbnail {
  border: none;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

/* Text-only cards (no thumbnail) need all four corners rounded */
.masonry-entry > .masonry-details:first-child,
.masonry-entry-test > .masonry-details:first-child {
  border-radius: 10px;
}

/* ============================================================ *\
 * People grid
\* ============================================================ */

/* CSS grid instead of floated Bootstrap columns: a tile with a
   wrapped (two-line) name made the next row of floats snag on it,
   leaving holes in the grid. Grid rows just grow to the tallest tile. */
#people_container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 28px 20px;
}

#people_container .person_container {
  width: auto;
  padding: 0;
  margin: 0;
}

/* Bootstrap's .row clearfix pseudo-elements become anonymous grid
   items and would occupy the first/last cells — drop them. */
#people_container::before,
#people_container::after {
  display: none;
}

/* ============================================================ *\
 * Author profile page
\* ============================================================ */

#author {
  min-height: 74vh;
}

#author .profile-card {
  background: #fff;
  border: 1px solid #e6e7e8;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
}

#author .profile-card img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 6px;
}

#author .profile-name {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
  margin-top: 16px;
  margin-bottom: 4px;
}

#author .profile-karma {
  color: #768491;
  font-size: 15px;
  font-weight: 600;
}

#author .section-title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
  border-bottom: 2px solid #f98025;
  padding-bottom: 8px;
  margin: 24px 0 16px;
}

#author .profile-posts li {
  list-style: none;
  margin: 0 0 10px;
}

#author .profile-posts a {
  font-weight: 600;
  color: #102337;
}

#author .profile-posts a:hover {
  color: #f98025;
}

#author .mycred-history table,
#author table {
  width: 100%;
  font-size: 14px;
}

#author .mycred-history td,
#author .mycred-history th {
  padding: 6px 8px;
  border-bottom: 1px solid #e6e7e8;
}