/* Main styles: load build.css via <link> in head (before this file). No @import — avoids failed imports blocking typography. */

/* Scroll only the main column: header stays pinned; rubber-band / overscroll stays in content (not the whole document). */
html {
  height: 100%;
}

body.guru-page {
  margin: 0;
  min-height: 100%;
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.guru-page.has-cookie-bar {
  padding-bottom: max(88px, env(safe-area-inset-bottom, 0px));
}

main.guru-site-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  /* build.css sets min-height on main for a document scroll layout; this shell scrolls an inner pane */
  min-height: 0 !important;
}

.guru-site-main__scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Short pages: keep footer at bottom of the scroll viewport */
.guru-site-main__scroll > .footer {
  margin-top: auto;
}

/* Minimal template-only helpers. The live site stylesheet provides the real design. */
.page-shell,
.article-slot-group {
  display: contents;
}

@media (max-width: 888px) {
  .news-wrapper,
  .news-wrapper.articles,
  .news-wrapper.hints {
    display: block;
    width: 100%;
  }

  .news-wrapper__item:nth-child(2),
  .floating-block.left,
  .floating-block.right {
    display: none !important;
  }

  .news-wrapper__item:nth-child(1) {
    width: 100%;
    margin-right: 0;
  }
}

/* --- Cookie consent: bottom bar overlay --- */
body.has-cookie-bar {
  padding-bottom: max(88px, env(safe-area-inset-bottom, 0px));
}

.cookie-consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.cookie-consent-bar--dismissed {
  display: none !important;
}

.cookie-consent-bar__inner {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}

.cookie-consent-bar__copy {
  flex: 1 1 240px;
  font-size: 13px;
  line-height: 1.35;
  color: #505050;
}

.cookie-consent-bar__link {
  color: #228a00;
  text-decoration: underline;
  margin-left: 4px;
}

.cookie-consent-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-consent-bar__btn {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 14px;
  line-height: 1.2;
}

.cookie-consent-bar__btn--secondary {
  background: #e8e8e8;
  color: #636363;
}

.cookie-consent-bar__btn--primary {
  background: #24273f;
  color: #fff;
}

/* Section landing: CMS intro HTML under hero title */
.hero.is-gradient .section-intro {
  position: relative;
  z-index: 1;
  max-width: 648px;
  margin: 0 auto;
  padding: 0 var(--offset);
  color: var(--color-secondary);
  font-size: 14px;
  line-height: 140%;
  text-align: center;
}

.hero.is-gradient .section-intro p {
  margin-top: 8px;
}

.hero.is-gradient .section-intro p:first-child {
  margin-top: 0;
}

/* Article / utility: Lexical often emits divs; plain CMS text may have no block tags */
.content-page .article-rich-text {
  padding-top: 0;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.content-page .article-rich-text > * {
  margin-top: var(--offset);
  font-size: 16px;
  line-height: 1.45;
  color: var(--fg-alter-0, #11171c);
}

.content-page .article-rich-text > *:first-child {
  margin-top: 0;
}

.content-page .article-rich-text p,
.content-page .article-rich-text li {
  line-height: 1.45;
  font-size: 16px;
}

/* Lexical / nested blocks: space paragraphs inside wrapper divs */
.content-page .article-rich-text div p {
  margin-top: 0.75em;
}

.content-page .article-rich-text div p:first-child {
  margin-top: 0;
}

.content-page .article-rich-text ul,
.content-page .article-rich-text ol {
  margin-top: var(--offset);
  padding-left: 1.25em;
  list-style: disc;
}

.content-page .article-rich-text ol {
  list-style: decimal;
}

.content-page .article-rich-text a {
  color: var(--color-secondary, #228a00);
  text-decoration: underline;
}

.content-page .article-rich-text h1,
.content-page .article-rich-text h2,
.content-page .article-rich-text h3 {
  font-weight: 700;
  margin-top: 24px;
  line-height: 1.2;
}

.content-page .article-rich-text h1 {
  font-size: 1.75rem;
}

.content-page .article-rich-text h2 {
  font-size: 1.35rem;
}

.content-page .article-rich-text h3 {
  font-size: 1.15rem;
}

.content-page .article-rich-text .article-pagination {
  margin-top: calc(var(--offset) * 1.5);
  gap: 8px;
  flex-wrap: wrap;
}

.content-page .article-rich-text .article-pagination a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-main-0, #fff);
  border: 1px solid rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: var(--color-secondary, #228a00);
}

.content-page .article-rich-text .article-pagination a.is-active {
  background: var(--color-secondary, #228a00);
  color: var(--fg-main-0, #fff);
  border-color: transparent;
}

/* --- Full-width header (override reference ~998px floating cap) --- */
/* Outside .guru-site-main__scroll: stays put while only the inner pane scrolls */
main.guru-site-main > .section.header {
  flex-shrink: 0;
  position: relative;
  z-index: 9000;
  max-width: none;
  width: 100%;
  left: 0;
  right: auto;
  transform: none;
  border-radius: 0;
  box-sizing: border-box;
  margin-top: 0;
  padding-left: max(14px, var(--offset));
  padding-right: max(20px, var(--offset));
  /* Solid fill so scrolling content does not show through (reference uses rgba) */
  background-color: var(--header-bg, rgba(148, 226, 121, 0.9));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

@media (min-width: 710px) {
  main.guru-site-main > .section.header {
    margin-top: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* build.css pads .hero for an absolutely positioned header; header no longer overlaps hero */
main.guru-site-main__scroll > .hero:first-child,
main.guru-site-main__scroll > * .hero:first-of-type {
  padding-top: 24px;
  padding-bottom: 32px;
}

@media (min-width: 710px) {
  main.guru-site-main__scroll > .hero:first-child,
  main.guru-site-main__scroll > * .hero:first-of-type {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

@media (min-width: 1024px) {
  main.guru-site-main__scroll > .hero.index:first-child {
    padding-top: 40px;
  }
}

/* --- Section landing: one column, popular under hero (not a side column) --- */
.news-wrapper.section-landing {
  display: block;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding-left: var(--offset);
  padding-right: var(--offset);
  box-sizing: border-box;
}

@media (min-width: 710px) {
  .news-wrapper.section-landing {
    padding-left: 26px;
    padding-right: 26px;
  }
}

.news-wrapper.section-landing .news-wrapper__item--stacked {
  width: 100%;
  max-width: none;
  margin: 0;
}

.news-wrapper.section-landing .news-wrapper__item--stacked .section {
  padding-left: 0;
  padding-right: 0;
}

.section-popular-panel {
  margin-top: var(--offset);
  margin-bottom: var(--offset);
  padding: 20px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(40, 56, 35, 0.18);
  background: var(--bg-main-0, #fff);
}

.section-popular-panel h2 {
  font-size: 20px;
  line-height: 120%;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  padding-bottom: 12px;
  margin: 0;
}

@media (min-width: 1024px) {
  .section-popular-panel h2 {
    font-size: 28px;
  }
}

.section-landing__list {
  padding-top: 8px;
}