/* Structural rules shared across the light and dark themes.
   Colour tokens live in theme-light.scss / theme-dark.scss. */

/* Discourse icon --------------------------------------------------------- */
/* Bootstrap Icons (as bundled with this Quarto version) has no discourse
   glyph, so draw the mark from an SVG mask that inherits the text colour and
   therefore works in both light and dark themes. */
.bi-discourse::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("assets/img/discourse.svg") center / contain no-repeat;
  mask: url("assets/img/discourse.svg") center / contain no-repeat;
}

/* Button fill style (Turing-like) ---------------------------------------- */
.button--fill {
  background: var(--epi-primary, #0f7c8f);
  color: #fff !important;
  border: none;
}
.button--fill:hover {
  background: var(--epi-primary-dark, #0b5e6d);
  color: #fff !important;
}

.navbar-title { font-weight: 700; letter-spacing: 0.2px; }
.navbar-brand img { height: 30px; }

/* Headings a touch tighter for a cleaner, modern feel. */
h1, h2, h3 { letter-spacing: -0.02em; }

/* Section layout helpers (Turing-inspired) -------------------------------- */
.side-space {
  max-width: 1350px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem;
  padding-right: 4rem;
}
.section-start-space { padding-top: 2rem; }
.section-end-space { padding-bottom: 2rem; }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-header h3 {
  margin-bottom: 0;
}

/* Logo header */
.logo-header {
  padding: 0;
  margin-bottom: 0;
}

/* Hero (Turing-inspired) -------------------------------------------------- */
.hero-section {
  padding: 4rem 1rem;
  padding-bottom: 0%;
  text-align: center;
}
.hero-content {
  max-width: 800px;
  margin: 0 auto 3rem auto;
}
/* The SVG is authored at 64px, which is its intrinsic size. Set an explicit
   width so the hero mark is around three times that, capped on narrow screens. */
.hero-logo {
  width: 192px;
  max-width: 60%;
  height: auto;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}
.hero-subtitle {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: #46586b;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* What is EpiAware Grid (Turing-inspired) -------------------------------- */
.what-is-turing-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 3rem;
  align-items: center;
}
/* On the approach pages the left column is headings only, so it needs less
   room than on the home page. Give the code window the space instead, and
   trim the outer padding, which is otherwise squeezed by the sidebar. */
.approach-hero {
  grid-template-columns: 0.75fr 1.6fr;
  gap: 2.5rem;
  align-items: start;
}
.approach-hero .feature-text-column {
  gap: 1.25rem;
}
.approach-hero .side-space,
.side-space:has(.approach-hero) {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.feature-text-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.feature-item-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.feature-item h5 {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0;
}
.feature-item p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}
.feature-cta-button {
  margin-top: 2rem;
  text-align: center;
}
.btn-lg {
  padding: 14px 32px;
  font-size: 1.1rem;
}

/* Feature icons (EpiAware-branded) --------------------------------------- */
.feature-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.icon-composable {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9999 3L7.99988 10H15.9999L11.9999 3Z' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9999 17C13.9999 17.7956 14.3159 18.5587 14.8786 19.1213C15.4412 19.6839 16.2042 20 16.9999 20C17.7955 20 18.5586 19.6839 19.1212 19.1213C19.6838 18.5587 19.9999 17.7956 19.9999 17C19.9999 16.2044 19.6838 15.4413 19.1212 14.8787C18.5586 14.3161 17.7955 14 16.9999 14C16.2042 14 15.4412 14.3161 14.8786 14.8787C14.3159 15.4413 13.9999 16.2044 13.9999 17Z' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00012 15C4.00012 14.7348 4.10548 14.4804 4.29302 14.2929C4.48055 14.1054 4.73491 14 5.00012 14H9.00012C9.26534 14 9.51969 14.1054 9.70723 14.2929C9.89477 14.4804 10.0001 14.7348 10.0001 15V19C10.0001 19.2652 9.89477 19.5196 9.70723 19.7071C9.51969 19.8946 9.26534 20 9.00012 20H5.00012C4.73491 20 4.48055 19.8946 4.29302 19.7071C4.10548 19.5196 4.00012 19.2652 4.00012 19V15Z' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-uncertainty {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21C7 21 7 17 8 12C9 7 9 3 11 3C11.5304 3 12.0391 3.21071 12.4142 3.58579C12.7893 3.96086 13 4.46957 13 5' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9999 12L19.9999 18' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.9999 18L19.9999 12' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-response {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7L12 12L22 7L12 2Z' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 17L12 22L22 17' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 12L12 17L22 12' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-julia {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' stroke='%230f7c8f' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='8' r='3' stroke='%230f7c8f' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='16' r='3' stroke='%230f7c8f' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='3' stroke='%230f7c8f' stroke-width='1.5'/%3E%3C/svg%3E");
}
.icon-approaches {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17L10 11L14 15L20 9' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 21L10 15L14 19L20 13' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 13L10 7L14 11L20 5' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icon-llm {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L13.6 8.4L18 10L13.6 11.6L12 16L10.4 11.6L6 10L10.4 8.4L12 4Z' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 15L18.7 16.8L20.5 17.5L18.7 18.2L18 20L17.3 18.2L15.5 17.5L17.3 16.8L18 15Z' stroke='%230f7c8f' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Code window with window-dots (Turing-inspired) ------------------------- */
.code-example-column .code-window {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}
.code-example-column .code-window-header {
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color, #e6ebf0);
  position: relative;
}
.code-example-column .code-window-dots {
  display: flex;
  gap: 0.55rem;
}
.code-example-column .code-window-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  font-size: 0.8rem;
  opacity: 0.7;
}
.code-example-column .dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
}
.code-example-column .dot.red { background-color: #ff5f56; }
.code-example-column .dot.yellow { background-color: #ffbd2e; }
.code-example-column .dot.green { background-color: #27c93f; }
.code-example-column .sourceCode {
  border: none !important;
  border-radius: 0 0 12px 12px !important;
  margin: 0 !important;
}
.code-example-column .sourceCode pre {
  padding: 1.5rem !important;
  margin: 0;
}
.code-example-column .quarto-code-tools {
  background-color: transparent !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
}
.code-example-column.section-end-space {
  margin: 1rem 0 2rem;
}

/* Core packages grid (Turing-inspired) ----------------------------------- */
.core-packages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
.package-card {
  text-align: left;
  border-radius: 12px;
  padding: 1.5rem;
}
.package-card p {
  margin-bottom: 0%;
  font-size: 0.92rem;
  line-height: 1.5;
}
.package-card .panel-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Desktop-only / mobile-only button visibility --------------------------- */
.desktop-only-button { display: inline-flex; }
.mobile-only-button-container { display: none; }

@media (max-width: 820px) {
  .side-space { padding-left: 1.5rem; padding-right: 1.5rem; }
  .what-is-turing-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .core-packages-grid { grid-template-columns: repeat(2, 1fr); }
  .desktop-only-button { display: none; }
  .mobile-only-button-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }
}

@media (max-width: 540px) {
  .core-packages-grid { grid-template-columns: 1fr; }
}

/* "See all →" style links */
.more-link { font-weight: 600; display: inline-block; margin: 0.25rem 0 0.5rem; }

/* Text utility */
.text-center { text-align: center; }

/* Approach cards on homepage */
.approach-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .approach-cards { grid-template-columns: 1fr; }
}

/* Approach cards */
.approach-card h3 { margin-top: 0; }

/* Library (Turing-style categorised package list) ------------------------- */
.library-item {
  display: flex; gap: 1.5rem; align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid rgba(128, 128, 128, 0.18);
}
.library-main { flex: 1 1 420px; min-width: 0; }
.library-main h4 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.library-main h4 a { text-decoration: none; }
.library-main .status-pill { margin-left: 0.4rem; vertical-align: middle; }
.library-main p, .library-main { line-height: 1.5; }
.library-links {
  flex: 0 0 auto; white-space: nowrap;
  display: flex; gap: 1rem; align-items: baseline;
}
.library-links a { font-weight: 600; font-size: 0.92rem; }

/* Value propositions + foundations grid ----------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.feature-card {
  border-radius: 12px;
  padding: 1.5rem 1.5rem;
}
.feature-card h3 { font-size: 1.1rem; margin-top: 0; margin-bottom: 0.4rem; }
.feature-card p:last-child { margin-bottom: 0; }
.feature-card .value-icon {
  font-size: 1.5rem; line-height: 1; margin-bottom: 0.75rem; display: block;
}
.foundations a { font-weight: 600; }

/* Gallery ----------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 1.75rem 0;
}
.gallery-card {
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.gallery-banner {
  aspect-ratio: 5 / 2;
  display: flex; align-items: flex-end;
  padding: 1rem 1.25rem;
  color: #fff; font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.gallery-banner.g-teal  { background: linear-gradient(135deg, #0f7c8f, #23a6a0); }
.gallery-banner.g-deep  { background: linear-gradient(135deg, #0c4a5c, #14708e); }
.gallery-banner.g-amber { background: linear-gradient(135deg, #14708e, #e8965a); }
.gallery-banner.g-slate { background: linear-gradient(135deg, #2b3a4a, #4a6572); }
.gallery-card .gallery-body { padding: 1.1rem 1.25rem 1.25rem; }
.gallery-card .gallery-body h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.gallery-card .gallery-body p { font-size: 0.92rem; margin: 0 0 0.75rem; opacity: 0.9; }
.gallery-card .gallery-body a { font-weight: 600; }

/* Package / gallery listing cards */
.quarto-listing .card { border-radius: 12px; }
.quarto-grid-item .card-title { font-weight: 600; }

/* Package maturity status pills ------------------------------------------- */
/* Filterable tables (packages, tutorials) --------------------------------- */
.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0 1rem;
}
.filter-search {
  flex: 1 1 260px;
  min-width: 220px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--bs-border-color, #d9e0e6);
  border-radius: 8px;
  background: var(--bs-body-bg, #fff);
  color: inherit;
  font-size: 0.95rem;
}
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.filter-btn {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--bs-border-color, #d9e0e6);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.filter-btn:hover {
  border-color: var(--epi-primary, #0f7c8f);
}
.filter-btn.is-active {
  background: var(--epi-primary, #0f7c8f);
  border-color: var(--epi-primary, #0f7c8f);
  color: #fff;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 0.75rem 0.6rem;
  border-bottom: 1px solid var(--bs-border-color, #e6ebf0);
  vertical-align: top;
}
.data-table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.data-table td:first-child {
  white-space: nowrap;
  width: 1%;
}
.data-name a {
  font-weight: 600;
}
.data-gh {
  margin-left: 0.35rem;
  opacity: 0.65;
}
.data-gh:hover {
  opacity: 1;
}
.data-name .status-pill {
  margin-left: 0.45rem;
  vertical-align: middle;
}
.filter-empty {
  margin-top: 1rem;
  opacity: 0.7;
}
@media (max-width: 600px) {
  .data-table td:first-child {
    white-space: normal;
    width: auto;
  }
}

.status-pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  text-transform: capitalize;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pill strong { font-weight: 600; }
.status-experimental { color: #d97706; background: rgba(217, 119, 6, 0.13); border-color: rgba(217, 119, 6, 0.35); }
.status-maturing     { color: #2563eb; background: rgba(37, 99, 235, 0.13); border-color: rgba(37, 99, 235, 0.35); }
.status-stable       { color: #16a34a; background: rgba(22, 163, 74, 0.13); border-color: rgba(22, 163, 74, 0.35); }

.quarto-grid-item .card-status { margin-top: 0.35rem; }
.quarto-grid-item table.card-other-values { margin-bottom: 0; font-size: 0.85rem; opacity: 0.85; }

/* Team member cards ------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.team-card { text-align: center; }
.team-card img {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; margin-bottom: 0.6rem;
}
.team-card .name { font-weight: 600; }
.team-card .role { font-size: 0.9rem; opacity: 0.8; }