/*───────────────────────────────────────────────────────────────
   Product Science — MkDocs "extra.css"
   Purpose: cosmetic tweaks & landing‑page layout<br>
   Note: design/values unchanged — only tidied for clarity
────────────────────────────────────────────────────────────────*/

/* == 0. Layout constraints ===================================== */
.md-grid{max-width:1440px;}
/* Landing page: allow full-width grid while keeping content centered via inner wrapper */
body:has(.gonka-landing) .md-grid{max-width:100%;}
body:has(.gonka-landing) .md-main__inner{margin:0;}
body:has(.gonka-landing) .md-content__inner{height:100vh;min-height:100vh;}
body:has(.gonka-landing) .md-main{height:100vh;min-height:100vh;}
body:has(.gonka-landing) .md-content{margin:0 !important; padding:0 !important;}
body:has(.gonka-landing) .md-content__inner::before{display:none !important;}
body:has(.gonka-landing) .md-content__inner > div{height:100vh;min-height:100vh;}

/* == 1. Typography ============================================= */
.md-typeset h1{font-weight:600;}  /* page title            */
.md-typeset h2{font-weight:450;}
.md-typeset h3{font-weight:400;}
.md-typeset h4{font-weight:300;}

/* Better heading sizes and spacing for visual hierarchy */
.md-typeset h2{
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}
.md-typeset h3{
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}
.md-typeset h4{
  font-size: 1.05rem;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
  /* text-decoration: underline; */
  /* text-decoration-thickness: 1px; */
  /* text-underline-offset: 4px; */
}

/* Headline colours per colour‑scheme */
[data-md-color-scheme="slate"]   .md-typeset h1,
[data-md-color-scheme="slate"]   .md-typeset h2,
[data-md-color-scheme="slate"]   .md-typeset h3,
[data-md-color-scheme="slate"]   .md-typeset h4{color:#fff;}
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4{color:#000;}

/* Compact global font size */
.md-typeset{font-size:.7rem;line-height:1.5;}

/* Inline accents */
.md-typeset .twitter{color:#00acee;}

/* == 2. Colour tokens ========================================== */
:root{
  --md-primary-fg-color:       #3a8ac5;
  --md-primary-fg-color--dark: #3a8ac5;
  --md-primary-fg-color--light:#3a8ac5;
  --md-accent-fg-color:        #3a8ac5;
}
[data-md-color-scheme="slate"]{
  --md-code-fg-color:#fff;
}

/* == 3. Media & imagery ======================================== */
img{height:auto;width:auto;border:0;border-radius:6px;padding:4px;background:#fff;}
.shadow{box-shadow:0 4px 8px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.19);} /* generic shadow */
.center{display:block;margin-inline:auto;}
.appstore{border:0;width:200px;}

/* Mobile header shadow when scrolled */
@media (max-width:500px){
  .gonka-header.scrolled {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);

    transition: box-shadow 0.3s ease;
  }
  
  /* Dark mode shadow */
  [data-md-color-scheme="slate"] .gonka-header.scrolled {
    box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.1);
  }
}

/* Invert logo in dark mode */
[data-md-color-scheme="slate"] .md-header__button.md-logo{filter:invert(100%);}

/* Header logo sizing (navbar & landing) */
a.md-logo img,
.gonka-logo img{border:0;padding:0;background:transparent;max-height:48px!important;height:auto!important;width:auto!important;}

/* == 4. Navigation tweaks ====================================== */
.md-nav__link:focus,
.md-tabs__link--active,
.md-nav__item .md-nav__link--active,
.md-nav__link--active,
.md-nav__link:active{color:var(--md-typeset-color);} /* keep theme vars */
.md-nav__link:hover{font-weight:700;}

/* Hide built‑with banner */
.md-footer-meta{display:none;}

/* == 5. Label‑button utility =================================== */
strong.label-button,
mark.critic{padding:4px 6px;min-width:88px;border-radius:3px;text-align:center;font-size:.84em;font-weight:600;background:#333;color:#fff;}
.label-button.victorops{background:#0cb9a8;}
.label-button.apm{background:#BF1942;}
.label-button.devops{background:#0064b7;}
.label-button.otel{background:#f5a800;}
.label-button.AWS-yellow{background:#ec7211;color:#fff;font-weight:400;}
.label-button.AWS-blue{background:#0073bb;color:#fff;font-weight:400;}
.label-button.AWS-orange{background:#eb5f07;}
.label-button.AWS-gray{background:#879596;color:#fff;font-weight:400;}
.label-button.observability{background:#4a0072;}
.label-button.sfx-ui-button-grey{background:#eee;color:rgba(0,0,0,.65);font-weight:400;}
.label-button.sfx-ui-button-blue{background:#0264d7;color:#fff;font-weight:400;}
.label-button.vo-ui-button{background:#00bce4;}

/* == 6. Landing‑page (Gonka) =================================== */
[data-md-state="homepage"] .md-header{display:none !important;} /* remove default header on landing */
.gonka-landing .md-header{display:none !important;} /* ensure MkDocs header is hidden on landing page */
body:has(.gonka-landing) .md-header{display:none !important;} /* fallback for browsers that support :has() */
body:has(.gonka-landing) .md-sidebar{display:none !important;} /* fallback for browsers that support :has() */
body:has(.gonka-landing) .md-main__inner{margin-top:0 !important;} /* fallback for browsers that support :has() */
body:has(.gonka-landing) .md-content__inner{margin:0 !important; padding:0 !important;} /* fallback for browsers that support :has() */
body:has(.gonka-landing) .md-main{margin:0 !important; padding:0 !important;} /* fallback for browsers that support :has() */

html,body{height:100%;}
/* Ensure landing page layout doesn't let carousel affect footer */
.gonka-landing {
  min-height: 100dvh;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:Inter,sans-serif;
  color:#000;
}

/* Main content area */
.gonka-main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;}

/* Desktop: center banner and hero vertically within main content area */
@media (min-width:821px){
  .gonka-main{
    justify-content:center;
    align-items:center;
  }
}

/* Header strip */
.gonka-header{position:absolute;top:0;left:0;right:0;width:100%;display:flex;padding:14px;justify-content:space-between;align-items:center;z-index:30;}
/* Unified header height for docs and landing */
.md-header,.gonka-header{height:76px;box-sizing:border-box;align-items:center;}
@media (max-width:500px){.md-header,.gonka-header{height:72px;}}
body:has(.gonka-landing) .gonka-header{padding-left:calc(max((100vw - 1440px)/2, 32px));padding-right:calc(max((100vw - 1440px)/2, 32px));}
.gonka-docs-link{display:flex;align-items:center;gap:8px;}
.gonka-docs-link span{font-size:15px;font-weight:400;text-decoration:none;color:#000!important;}
.gonka-docs-link:hover{text-decoration:underline;}

/* Banner */
.gonka-banner {
  margin: 4rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: auto;
  min-height: 40px;
  padding: 0px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 110%;
  letter-spacing: -0.01em;
  color: #000000;
}
.gonka-banner .nowrap{white-space:nowrap;}
.gonka-banner a {
  color: #6171E9;
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  line-height: 110%;
  letter-spacing: -0.01em;
}

@media (max-width:500px){.gonka-banner{ margin-bottom:10px; }}

/* Hero */
.gonka-hero{text-align:center;overflow:hidden;}
.gonka-hero::before{
  content:"";
  position:absolute;
  inset:0 auto 0 50%;
  width:100%;
  height:100%;
  transform:translate(-50%, -12%);
  background:url("../images/landing.png") center/cover no-repeat;
  z-index:-1;
  pointer-events:none;
}

/* Mobile hero background adjustment */
@media (max-width:500px){
  .gonka-hero::before{
    top: -160px; /* Reduce top offset for mobile */
  }
}

/* Dark mode hero background */
[data-md-color-scheme="slate"] .gonka-hero::before{
  background:url("../images/landing-dark.png") center/cover no-repeat;
}

/* Dark mode landing page styles */
body[data-md-color-scheme="slate"]:has(.gonka-landing) {
  background-color: #000 !important;
  --md-default-bg-color: #000;
}
[data-md-color-scheme="slate"] .gonka-landing {
  color: #fff;
}
[data-md-color-scheme="slate"] .gonka-docs-link span {
  color: #fff !important;
}
[data-md-color-scheme="slate"] .tagline {
  color: #bbb;
}

[data-md-color-scheme="slate"] .footer-col h4,
[data-md-color-scheme="slate"] .brand-logo span {
  color: #fff;
}
[data-md-color-scheme="slate"] .gonka-banner span {
  color: #fff;
}
[data-md-color-scheme="slate"] .gonka-landing svg {
  filter: invert(1);
}

.gonka-hero h1{
  font-size: 48px;
  line-height: 100%;
  letter-spacing: -0.02em;
  font-feature-settings: 'ss02' on, 'ss03' on, 'ss04' on, 'cv10' on;
  margin-bottom:.5rem;
}
.gonka-inner{max-width:1440px;margin:0 auto;padding:0 32px;}
@media (max-width:500px){.gonka-inner{padding:0 14px;}}
.tagline{
  font-size: 22px;
  line-height: 100%;
  letter-spacing: -0.04em;
  color: #787878;
  margin-bottom:2.5rem;
}
.gonka-cards{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:1rem;} /* centred on desktop */
.card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 320px;
  height: 144px;
  padding: 16px;
  margin-bottom: 50px;
  background: #FFFFFF;
  border:none;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  text-decoration: none;
  transform: translateZ(0);
  transition: all 0.3s ease-in-out;
  will-change: transform, box-shadow;
}
.card:hover{
  transform:translateY(-4px);  /* subtle lift */
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25);
}
.card span{
  display:block;
  font-weight: 600;
  font-size: 18px;
  line-height: 110%;
  letter-spacing: -0.01em;
  color: #6171E9;
}
.card small{
  font-size: 15px;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.01em;
  color: #787878;
  padding-right: 20px;
  text-align: left;
}

/* --- Carousel under Chat with AI ---------------------------------- */
.gonka-carousel{
  overflow:hidden;
  position:relative;
  /* default desktop gutters */
  padding-left:16px;
  padding-right:16px;
  /* Ensure carousel doesn't affect footer positioning */
  flex-shrink:0;
}

.gonka-carousel .carousel-track{
  display:flex;
  gap:16px;
  width:max-content;
}

.partner-card{
  flex:0 0 auto;
  height:180px;
  min-width:240px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:16px;
  padding:24px;
  background:#FAFAFA;
  scroll-snap-align:start;
}
.partner-label{
  font-size:14px;
  font-weight:400;
  font-style:normal;
  letter-spacing:-0.01em; /* ~ -1% */
  color:#787878;
  text-align:left;
}
.partner-logos{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.partner-logos img{height:33px; width:auto; filter: grayscale(1); opacity:0.8; background:transparent; padding:0; border-radius:0; transition: all 0.3s ease;}
.partner-logos a:hover img{filter: grayscale(1) brightness(0); opacity:1;}
@media (max-width:500px){
  .partner-logos img{height:28px;}
  .gonka-carousel{
    padding-left:14px;
    padding-right:14px;
    overflow:hidden;
    width:100%;
    max-width:100vw;
  }
  .gonka-carousel .carousel-track{
    width:max-content;
    min-width:100%;
  }
}


/* Footer */
.gonka-footer{font-size:.8rem; padding:0;}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;flex-wrap:nowrap;align-items:flex-start;gap:0 3rem;padding:32px 20px;}
.brand{flex:0 0 216px; display:flex; flex-direction:column; gap:20px;}
.brand-logo {display: flex; align-items: center; gap: 8px; text-decoration: none;}
.brand-logo span{font-size:24px;font-weight:600; color: #000;}
.social {display: flex; align-items: flex-start; gap: 16px;}
.social a{margin-right: 0;}
.social img{height:24px;width:24px;}
.footer-cols {
  display: flex;
  flex: 1;
  gap: 0 3rem;
}
.footer-col{flex:1 1 140px;max-width:340px;min-width:140px;display:flex;flex-direction:column;padding-top:10px;gap:24px;}
.footer-col h4{margin:0;font-size:15px;font-weight:400;line-height:110%;letter-spacing:-0.01em;color:#000;}
.footer-col ul{list-style:none;margin:0 !important;padding:0;display:flex;flex-direction:column;gap:8px;}
.footer-col li {margin: 0 !important;}
.footer-col a{text-decoration:none;font-size:15px;font-weight:400;line-height:110%;letter-spacing:-0.01em;color:#787878;}
.footer-col a:hover{text-decoration:underline;}

/* Responsive footer */
@media (max-width:820px){
  .footer-inner{flex-wrap:wrap;gap:2rem 3rem;}
  .brand{flex-basis:100%;padding-right:0;}
  .footer-col{flex:1 1 45%;}
}
@media (max-width:500px){
  .gonka-landing { padding-top:70px; }
  .gonka-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 14px;
    z-index: 30;
    background-color: #fff;
  }
  [data-md-color-scheme="slate"] .gonka-header {
    background-color: #000;
  }
  .gonka-banner {width: 320px; margin-top: 0px !important;}
  .footer-inner {
    flex-wrap: nowrap;
    flex-direction: row;
    overflow-x: auto;
    gap: 1.5rem;
  }
  .footer-cols {
    flex-direction: column;
  }
  .brand, .footer-cols .footer-col {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 220px;
  }

  .footer-cols .footer-col {
    margin-bottom: 24px;
  }
  .footer-col {
    gap: 8px;
  }
  .footer-inner { padding: 40px 14px; }
}

/* Dark‑mode tweaks */
[data-md-color-scheme="slate"] .gonka-logo img,
[data-md-color-scheme="slate"] .brand-logo img,
[data-md-color-scheme="slate"] .social img{filter:invert(100%);} /* keep logos visible */
[data-md-color-scheme="slate"] .footer-col a{color:#bbb;}

/* == 7. Helper buttons (site‑wide) ============================== */
.header-button{margin-left:15px;padding:8px 16px;font-weight:bold;color:#fff;text-decoration:none;border-radius:5px;transition:background-color .3s;}
.login-button{background:#B2B2B2;}
.login-button:hover{background:#8D8D8D;}
.signup-button{background:#666;}
.signup-button:hover{background:#8D8D8D;}

/* == 8. Quickstart Configuration Questionnaire ========================= */
.quickstart-questionnaire {
  margin: 1.5rem 0;
  padding: 0;
  border: none;
  background: transparent;
}

.quickstart-question {
  margin: 1rem 0;
}

.quickstart-question h4 {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--md-default-fg-color);
}

.quickstart-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.quickstart-option-btn {
  padding: 0.5rem 0.75rem;
  background: var(--md-default-bg-color);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 400;
  text-align: left;
  transition: all 0.2s ease;
  color: var(--md-default-fg-color);
  line-height: 1.5;
}

.quickstart-option-btn:hover,
.quickstart-option-btn:focus {
  border-color: var(--md-accent-fg-color);
  background: rgba(58, 138, 197, 0.05);
}

.quickstart-option-btn:active {
  border-color: var(--md-accent-fg-color);
  background: rgba(58, 138, 197, 0.1);
}

[data-md-color-scheme="slate"] .quickstart-option-btn {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-md-color-scheme="slate"] .quickstart-option-btn:hover,
[data-md-color-scheme="slate"] .quickstart-option-btn:focus {
  border-color: var(--md-accent-fg-color);
  background: rgba(58, 138, 197, 0.15);
}

[data-md-color-scheme="slate"] .quickstart-option-btn:active {
  border-color: var(--md-accent-fg-color);
  background: rgba(58, 138, 197, 0.25);
}

.quickstart-back-btn,
.quickstart-reset-btn,
.quickstart-copy-btn {
  padding: 0.4rem 0.75rem;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  background: var(--md-default-bg-color);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  transition: all 0.2s ease;
  color: var(--md-default-fg-color);
  line-height: 1.5;
}

.quickstart-back-btn:hover,
.quickstart-reset-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.quickstart-copy-btn {
  background: var(--md-accent-fg-color);
  color: #fff;
  border: none;
}

.quickstart-copy-btn:hover {
  background: var(--md-accent-fg-color);
  opacity: 0.9;
}

[data-md-color-scheme="slate"] .quickstart-back-btn,
[data-md-color-scheme="slate"] .quickstart-reset-btn {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-md-color-scheme="slate"] .quickstart-back-btn:hover,
[data-md-color-scheme="slate"] .quickstart-reset-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

#quickstart-config-result {
  display: none;
  margin-top: 1.5rem;
}

#quickstart-config-result .admonition {
  margin: 0;
}

#quickstart-config-result p {
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  line-height: 1.5;
}

#quickstart-config-display {
  position: relative;
  margin-top: 0.5rem;
}

#quickstart-config-display pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  overflow-x: auto;
  font-size: 0.7rem;
  line-height: 1.5;
}

#quickstart-config-display code {
  background: transparent;
  padding: 0;
  font-family: var(--md-code-font);
  font-size: 0.7rem;
  line-height: 1.5;
}

.quickstart-note {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(58, 138, 197, 0.1);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: 4px;
  font-size: 0.85rem;
}

[data-md-color-scheme="slate"] .quickstart-note {
  background: rgba(58, 138, 197, 0.2);
}

@media (max-width: 500px) {
  .quickstart-options {
    gap: 0.4rem;
  }
  
  .quickstart-option-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
  }
}

/* Conditional sections - hidden by default, shown when class is added */
.quickstart-conditional {
  display: none;
}

.quickstart-conditional.quickstart-visible {
  display: block;
}