/* ================================================================
   Custom stylesheet for Yoriito Homepage
   ================================================================ */

/* ----------------------------------------------------------------
   Theme variables
   ---------------------------------------------------------------- */

:root {
  --md-primary-fg-color: #84A2D4;      /* Main brand color (light blue) */
  --md-accent-fg-color: #446FB7;       /* Accent color (medium blue) */
  --md-header-gradient-start: #34567D; /* Header gradient start (dark blue) */
  --color-navy: #1e3a5f;               /* Text color for colored sections */
}

body[data-md-color-scheme="default"] {
  --md-footer-bg-color: var(--md-primary-fg-color);
  --md-footer-bg-color--dark: var(--md-primary-fg-color);
}

/* ----------------------------------------------------------------
   Full-bleed sections
   ---------------------------------------------------------------- */

/* Extend sections to full viewport width */
.section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 1rem 0;
}

/* Add horizontal padding inside sections */
.section > .md-grid {
  box-sizing: border-box;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

/* Increase padding on wider screens */
@media (min-width: 60em) {
  .section > .md-grid {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

/* Ensure headings inherit section text color */
.section :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* -- Section color variants ------------------------------------ */

/* Hero section with light text */
.section-hero {
  color: var(--md-primary-bg-color--light);
}

/* Colored section with blue gradient background */
.section-colored {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--md-primary-fg-color) 20%, var(--md-primary-bg-color)) 0%,
    var(--md-primary-fg-color) 100%
  );
}

/* Override Material's default text colors for colored sections */
.section.section-colored .md-typeset h1,
.section.section-colored .md-typeset h2,
.section.section-colored .md-typeset h3,
.section.section-colored .md-typeset p,
.section.section-colored .md-typeset li {
  color: var(--color-navy);
}

/* Light colored section with subtle gradient */
.section-light-colored {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--md-primary-fg-color) 5%, var(--md-primary-bg-color)) 0%,
    color-mix(in srgb, var(--md-primary-fg-color) 15%, var(--md-primary-bg-color)) 100%
  );
}

/* -- Section strong text ------------------------------------------ */

.section-hero .md-typeset strong,
.section.section-colored .md-typeset strong,
.section.section-light-colored .md-typeset strong {
  color: var(--color-navy);
  -webkit-text-fill-color: var(--color-navy);
  font-weight: 800;
  font-size: 1.0rem;
}

/* ----------------------------------------------------------------
   Typography
   ---------------------------------------------------------------- */

/* Increase site title font size in header */
.md-header__title .md-header__topic:first-child {
  font-size: 1.4rem;
}

/* Style navigation tabs with white text */
.md-tabs__link {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--md-primary-bg-color);
  opacity: 1;
}

/* Set base font size for body text */
.md-typeset p,
.md-typeset li {
  font-size: 0.9rem;
}

/* Reduce copyright text size in footer */
.md-copyright {
  color: var(--md-footer-fg-color--light);
  font-size: 0.7rem;
}

.md-copyright a {
  color: var(--md-footer-fg-color--light);
}

/* Apply gradient to tabs and footer (lighter than header) */
.md-tabs,
.md-footer-meta {
  background: linear-gradient(
    90deg,
    var(--md-primary-fg-color) 0%,
    var(--md-accent-fg-color) 100%
  );
}

/* Enlarge social icons in footer */
.md-social__link svg {
  max-height: 1rem;
}

/* ----------------------------------------------------------------
   Header & navigation
   ---------------------------------------------------------------- */

/* Apply gradient background to header */
.md-header {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--md-header-gradient-start) 90%, transparent 10%) 0%,
    color-mix(in srgb, var(--md-accent-fg-color) 90%, transparent 10%) 100%
  );
}

/* Apply same gradient to mobile navigation drawer */
.md-nav--primary .md-nav__title {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--md-header-gradient-start) 90%, transparent 10%) 0%,
    color-mix(in srgb, var(--md-accent-fg-color) 90%, transparent 10%) 100%
  );
}

/* Keep site title always visible (hide page title on scroll) */
.md-header__title .md-header__topic + .md-header__topic {
  display: none !important;
}

.md-header__title .md-header__topic {
  opacity: 1 !important;
  transform: none !important;
}

/* Add external link icon for https links */
.md-nav__link[href^="https"]::after,
.md-tabs__link[href^="https"]::after {
  content: "↗";
  margin-left: 0.3rem;
  font-size: 0.85em;
  opacity: 0.7;
}

/* Style repository link section in drawer */
.md-nav__source {
  background-color: var(--md-accent-fg-color);
}

/* ----------------------------------------------------------------
   Global spacing tweaks
   ---------------------------------------------------------------- */

/* Remove top margin so sections start right under header */
.md-main__inner.md-grid {
  margin-top: 0;
}

article.md-content__inner.md-typeset {
  padding-top: 0;
}

article.md-content__inner.md-typeset::before {
  height: 0;
}

/* Remove bottom margin to eliminate white gap above footer */
.md-content__inner {
  margin-bottom: 0;
}

/* Make buttons more compact */
.md-typeset .md-button {
  padding: 0.3em 1.1em;
}

/* Apply same gradient as tabs/footer to primary buttons */
.md-typeset .md-button--primary {
  background: linear-gradient(
    90deg,
    var(--md-primary-fg-color) 0%,
    var(--md-accent-fg-color) 100%
  );
  border: none;
  color: var(--md-primary-bg-color);
}

.md-typeset .md-button--primary::after {
  content: "\00a0≫";
}

/* -- Grid cards --------------------------------------------------- */

/* Disable all hover effects on grid cards */
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  transform: none;
  box-shadow: none;
}

/* White background for grid cards inside light-colored sections */
.section-light-colored .md-typeset .grid.cards > :is(ul, ol) > li {
  background-color: var(--md-primary-bg-color);
  color: var(--color-navy);
}

/* ----------------------------------------------------------------
   Home page
   ---------------------------------------------------------------- */

/* -- Hero tagline ------------------------------------------------- */

.md-typeset .hero-tagline,
.hero-tagline {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.4;
  margin: 1.4rem 0;
  background: linear-gradient(
    180deg,
    var(--md-primary-fg-color) 0%,
    var(--md-accent-fg-color) 50%,
    var(--color-navy) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -- Hero image + text layout ------------------------------------- */

.hero-image-text {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: 1.5rem;
}

.hero-image-col img {
  width: 36rem;
  height: auto;
  display: block;
}

@media (max-width: 66rem) {
  .hero-image-text {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-image-col img {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
  }
}

/* -- News/Events cards -------------------------------------------- */

/* Grid layout for news cards */
.news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 1rem 0;
}

/* Override Material's default gap with larger spacing */
.md-typeset .news-cards {
  gap: 2rem;
}

/* Individual news card styling */
.news-cards .news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--md-primary-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  transition: box-shadow 0.3s ease;
}

.news-cards .news-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* News card image container */
.news-cards .news-card-image {
  width: 100%;
  height: 200px;
  padding: 1.25rem 1.25rem 0 1.25rem;
  box-sizing: border-box;
}

.news-cards .news-card-image a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
}

/* Image with hover zoom effect */
.news-cards .news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-cards .news-card-image a:hover img {
  transform: scale(1.05);
}

/* News card content area */
.news-cards .news-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem;
}

.news-cards .news-card-content > p:first-child {
  margin-top: 0;
  font-size: 1.25rem;
  color: var(--color-navy);
}

.news-cards .news-card-content > p:first-child a {
  color: inherit;
}

/* Push last paragraph (with button) to bottom */
.news-cards .news-card-content > p:last-child {
  margin-top: auto;
  margin-bottom: 0;
}

/* News metadata (date, category) */
.section.section-colored .md-typeset .news-meta {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
  margin: 0.5rem 0 1rem 0;
}

/* Align button to left */
.news-cards .md-button {
  align-self: flex-start;
}

/* -- Overview tiles ----------------------------------------------- */

.overview-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.overview-tile {
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.overview-tile:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.overview-tile-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--md-primary-bg-color);
  padding: 1.2rem 0.8rem 1.2rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.overview-tile-title p {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-navy);
}

.overview-tile-title .overview-tile-icon {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
  color: var(--color-navy);
}

.overview-tile-body {
  padding: 1rem 0.8rem 1rem;
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 12%, white);
}

.overview-tile-body p {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  color: var(--color-navy);
  line-height: 1.6;
}

/* -- Activities: step number cards ------------------------------- */
.activity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.activity-card {
  background: var(--md-primary-bg-color);
  border-radius: 0.4rem;
  padding: 1.4rem 1.2rem 1.2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.activity-card p {
  font-size: 0.88rem;
  color: var(--color-navy);
  line-height: 1.6;
  margin: 0 0 0.4rem;
}

.activity-step {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--md-primary-fg-color);
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

/* -- Scope bracket ------------------------------------------------ */

/* Wrapper that shows a left-side bracket around scoped content.
   The bracket is drawn purely with CSS borders (no images needed):
   - left edge : border-left
   - top cap   : ::before  (short horizontal line)
   - bottom cap: ::after   (short horizontal line)
   A vertical label "Yoriito Scope" is placed to the left of the bracket. */

.scope-bracket-outer {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0.5rem 0;
}

/* Vertical label + bracket column */
.scope-bracket-rail {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 1.2rem;
}

/* Vertical line with perfect circles at each end */
.scope-bracket-line {
  display: block;
  width: 2px;
  align-self: stretch;
  flex-shrink: 0;
  background: var(--color-navy);
  margin-right: 0.2rem;
  position: relative;
}

.scope-bracket-line::before,
.scope-bracket-line::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-navy);
  left: 50%;
  transform: translateX(-50%);
}

.scope-bracket-line::before {
  top: 0;
}

.scope-bracket-line::after {
  bottom: 0;
}

/* Vertical label */
.scope-bracket-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-navy);
  white-space: nowrap;
  user-select: none;
}

/* Content area takes remaining width */
.scope-bracket-content {
  flex: 1;
  min-width: 0;
}

/* ----------------------------------------------------------------
   About us page
   ---------------------------------------------------------------- */

/* -- Pyramid section ---------------------------------------------- */

/* Two-column layout: pyramid+labels on left, descriptions on right */
.pyramid-section {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* Image column */
.pyramid-visual {
  display: block;
}

.pyramid-image {
  width: 22rem;
  height: auto;
  display: block;
}

/* -- Overlay wrapper ---------------------------------------------- */

/* Relative container so overlay labels can be absolutely positioned */
.pyramid-overlay-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* Common overlay label styles */
.pyramid-overlay-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-navy);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

/* -- Tier positions (% of image height) -------------------------- */

.pyramid-overlay-label--top {
  top: 17%;
}

.pyramid-overlay-label--mid {
  top: 44%;
}

.pyramid-overlay-label--bottom {
  top: 74%;
}

/* -- Description column ------------------------------------------ */

/* Vertically stacked description blocks */
.pyramid-descriptions {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.pyramid-desc h3 {
  margin: 0 0 0.3rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
}

.pyramid-desc p,
.pyramid-desc ul {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
}

.pyramid-desc ul {
  padding-left: 1.2rem;
}

/* Left border colored to match corresponding pyramid tier */
.pyramid-desc {
  padding-left: 1rem;
  border-left: 3px solid;
}

.pyramid-desc--top {
  border-color: #9ABFF8;
}

.pyramid-desc--mid {
  border-color: #6B96E3;
}

.pyramid-desc--bottom {
  border-color: #3E69C9;
}

/* -- Responsive: stack vertically on narrow screens -------------- */

@media (max-width: 768px) {
  .pyramid-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .pyramid-visual {
    text-align: center;
  }

  .pyramid-image {
    width: 16rem;
  }

  .pyramid-overlay-label {
    font-size: 0.85rem;
  }
}

/* -- Contributor logos (brick layout via JS) ----------------------- */

.contributor-logos-tile {
  background-color: var(--md-primary-bg-color);
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

.contributor-logos-note {
  display: block;
  text-align: right;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
  font-style: italic;
  margin-bottom: 0.4rem;
}

@media (max-width: 600px) {
  .contributor-logos-tile {
    padding: 1rem 0.75rem;
  }
}

/* NOTE: This class name (and its img descendant selector) is referenced in custom.js (layoutLogos / setupFallbacks).
   Do not rename without updating the corresponding selectors in custom.js. */
.contributor-logos {
  --logo-w: 7rem;
  --col-gap: 2rem;
  display: grid;
  justify-content: center;
  gap: 1.5rem var(--col-gap);
  margin: 1.5rem 0;
}

.contributor-logos img {
  --offset-x: 0px;
  display: block;
  line-height: 0;
  transform: translateX(var(--offset-x));
  width: var(--logo-w);
  height: auto;
  object-fit: contain;
  align-self: center;
}

/* NOTE: This class name is referenced in custom.js (setupFallbacks / replaceWithName).
   Do not rename without updating the corresponding className assignment in custom.js. */
.contributor-name {
  --offset-x: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  transform: translateX(var(--offset-x));
  width: var(--logo-w);
  height: auto;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  color: var(--md-default-fg-color--light);
}

@media (max-width: 600px) {
  .contributor-logos {
    --col-gap: 1.2rem;
  }
}

/* -- Commitment tiles --------------------------------------------- */

.commitment-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1rem 0;
}

.commitment-tile {
  background-color: var(--md-primary-bg-color);
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease;
}

.commitment-tile:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.commitment-tile-header {
  margin-bottom: 1rem;
}

.commitment-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-navy);
}

.section.section-colored .md-typeset .commitment-role {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.commitment-quote {
  display: block;
  font-size: 2.5rem;
  font-family: Georgia, serif;
  line-height: 1;
  color: var(--md-accent-fg-color);
  margin-bottom: 0.3rem;
}

.commitment-body p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-navy);
  line-height: 1.7;
}

/* ----------------------------------------------------------------
   News/Events page
   ---------------------------------------------------------------- */

/* -- Page background ---------------------------------------------- */

.md-main:has(.md-post),
.md-main:has(.md-content--post) {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--md-primary-fg-color) 5%, var(--md-primary-bg-color)) 0%,
    color-mix(in srgb, var(--md-primary-fg-color) 15%, var(--md-primary-bg-color)) 100%
  );
}

/* -- Hide right sidebar on auto-generated pages ------------------- */

@media screen and (min-width: 76.25em) {
  .md-main:has(.md-post) .md-sidebar--secondary,
  .md-main:has(.md-content--post) .md-sidebar--secondary {
    display: none;
  }

  .md-main:has(.md-post) .md-content,
  .md-main:has(.md-content--post) .md-content {
    margin-right: 0;
  }
}

/* -- Spacing & colors --------------------------------------------- */

/* Add top spacing for news listing pages */
.md-content > div.md-content__inner {
  padding-top: 0.6rem;
}

/* Add top spacing for individual news post pages */
.md-content--post > article.md-content__inner.md-typeset {
  padding-top: 1rem;
}

/* Ensure consistent text color on news pages */
.md-content .md-typeset h1,
.md-content header.md-typeset h1 {
  color: var(--md-default-fg-color);
}

.md-content .md-typeset p,
.md-content .md-typeset li {
  color: var(--md-default-fg-color);
}

/* -- Post titles -------------------------------------------------- */

.md-post .md-typeset h2 a {
  color: var(--color-navy);
}

/* -- Post excerpts ------------------------------------------------ */

/* Style post excerpts as cards on news index */
.md-post.md-post--excerpt {
  background: var(--md-primary-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding: 1rem;
  margin: 0.8rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.md-post.md-post--excerpt:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* -- Continue reading button -------------------------------------- */

.md-post__action a {
  display: inline-block;
  padding: 0.3em 1.1em;
  border-radius: 0.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  background: linear-gradient(
    90deg,
    var(--md-primary-fg-color) 0%,
    var(--md-accent-fg-color) 100%
  );
  color: var(--md-primary-bg-color) !important;
}

.md-post__action a::after {
  content: "\00a0≫";
}

/* -- Post images ------------------------------------------------- */

.md-post .md-typeset img,
.md-content--post .md-typeset img {
  width: 100%;
  border-radius: 0.4rem;
}

/* ----------------------------------------------------------------
   FAQ page
   ---------------------------------------------------------------- */

/* -- Tile layout -------------------------------------------------- */

/* Grid layout for FAQ tiles */
.faq-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

/* Individual FAQ tile with fixed Q/A boundary */
.faq-tile {
  display: grid;
  grid-template-rows: 11rem 13rem;
  height: 24rem;
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.faq-tile:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

/* -- Question (top half) --------------------------------------- */

/* Question section with icon and text */
.faq-tile-question {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--md-primary-bg-color);
  padding: 0 0.8rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), 50% 100%, 0 calc(100% - 1rem));
}

/* Question text styling */
.faq-tile-question p {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-navy);
  line-height: 1.5;
}

/* Icon sizing via font-size (Material's .twemoji svg uses 1.125em) */
.faq-tile-question .faq-tile-icon {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
  color: var(--color-navy);
}

.faq-tile-question .faq-tile-icon svg {
  fill: currentColor;
}

/* -- Answer (bottom half) -------------------------------------- */

/* Answer section with light blue background */
.faq-tile-answer {
  display: flex;
  align-items: center;
  margin-top: -0.75rem;
  padding: 0 0.8rem;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 12%, white);
  clip-path: polygon(0 0, 50% 1rem, 100% 0, 100% 100%, 0 100%);
}

/* Answer text styling */
.faq-tile-answer p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-navy);
  line-height: 1.6;
}