/*───────────────────────────────────────────────────────────────
   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;}

/* == 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%;}
.gonka-landing {
  min-height: 100dvh;
  /* fallback for older browsers */
  min-height: calc(100dvh - 60px); /* компенсируем padding-top */
  position:relative;
  display:flex;
  flex-direction:column;
  font-family:Inter,sans-serif;
  color:#000;
}

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

/* 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;}
.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;
  gap: 12px;
  width: 320px;
  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 a {
  color: #6171E9;
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  line-height: 110%;
  letter-spacing: -0.01em;
}

/* Hero */
.gonka-hero{text-align:center;padding:3rem 0 3rem;overflow:hidden;}
.gonka-hero::before{content:"";position:absolute;inset:0 auto 0 50%;width:100%;height:100%;transform:translateX(-50%);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 */
[data-md-color-scheme="slate"] .is-landing-page {
  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;
}
.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;
  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;
}

/* Footer */
.gonka-footer{margin-top:auto;font-size:.8rem; margin: 0 32px;}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;flex-wrap:nowrap;align-items:flex-start;gap:0 3rem;}
.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%;}
  .gonka-landing{padding:0 14px;}
}
@media (max-width:500px){
  .gonka-landing{padding:0 14px;padding-top:60px;}
  .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 {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;
  }
}

/* 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;}