/*
   factory-42/docs/www/assets/site.css - (© markus@stulle.ai)
  
                __        .__  .__                     .__ 
        _______/  |_ __ __|  | |  |   ____      _____  |__|
       /  ___/\   __\  |  \  | |  | _/ __ \     \__  \ |  |
       \___ \  |  | |  |  /  |_|  |_\  ___/      / __ \|  |
      /____  > |__| |____/|____/____/\___  > /\ (____  /__|
           \/                            \/  \/      \/     
  
   Purpose:      stulle.ai - Website CSS
   Deployment:   stulle.ai/assets/site.css
   License:      https://github.com/stulle-ai/factory-42/blob/main/LICENSE
   First commit: 
*/

/* ---------- Brand tokens ---------- */
:root{
    --bg:#000;
    --panel:#111;
    --blue:#00aaff;
    --blue-hover:#00ccff;
    --mono:"Courier New", Courier, monospace;
    --radius:6px;
  }
  
  /* ---------- Base ---------- */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    background:var(--bg); color:var(--blue); font-family:var(--mono);
    margin:0; display:flex; flex-direction:column; min-height:100vh;
  }
  a{color:var(--blue); text-decoration:none}
  a:hover{color:var(--blue-hover)}
  h1,p{margin:8px 0}
  
  /* ---------- Layout helpers ---------- */
  .wrap{max-width:980px; margin:0 auto; padding:24px}
  header,footer{background:var(--panel)}
  header .wrap, footer .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px}
  .links{display:flex; gap:24px; align-items:center; flex-wrap:wrap}

  .center-page{
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;                 /* vorher: center */
    text-align:center;
    padding-top: clamp(24px, 6vh, 56px);        /* angenehme Luft oben, responsive */
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-block; padding:10px 14px; border:1px solid var(--blue); background:transparent;
    transition:transform .15s ease, border-color .15s ease;
  }
  .btn:hover{transform:translateY(-1px); border-color:var(--blue-hover)}
  .cta-row{display:flex; gap:16px; flex-wrap:wrap; margin:16px 0 6px}
  
  /* ---------- Code blocks ---------- */
  code,pre{
    background:var(--panel); color:#00ddff; padding:4px 6px; border:1px solid #003a4a;
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:.95rem; line-height:1.5;
  }
  pre{overflow-x:auto; white-space:pre; padding:12px 14px; border-radius:var(--radius); margin:0 0 16px; tab-size:2}
  pre code{display:block; line-height:inherit}
  
  /* ---------- Grids & lists ---------- */
  .grid{display:grid; gap:20px; grid-template-columns:1fr}

  /* Optional: auf sehr hohen Viewports ein wenig mehr Luft erlauben */
  @media (min-height: 900px){
    .center-page{ padding-top: clamp(40px, 8vh, 80px); }
  }

  ol li{margin:0 0 8px 0} ol li:last-child{margin-bottom:0}
  
  /* ---------- Icons ---------- */
  .links a.icon{display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; color:var(--blue); transition:transform .15s ease}
  .links a.icon:hover{transform:translateY(-1px)}
  .links a.icon svg{width:100%; height:100%; display:block}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  
  /* Inline icon + text (e.g., "Factory 42 API" footer link on root) */
  .iconized{display:inline-flex; align-items:center; gap:8px}
  .iconized svg{width:18px; height:18px; display:block}
  
  /* ---------- Landing-page (root) helpers ---------- */
  .logo-circle{
    width:200px; height:200px;
    /* vorher: margin-top:100px; margin-bottom:20px; */
    margin: 12px 0 20px;                        /* deutlich weniger Top-Abstand */
    border:2px solid var(--blue);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }

  .logo-circle svg{width:120px; height:120px; display:block}
  .section{margin-top:28px; max-width:820px; padding:0 16px}
  .links-list{list-style:none; padding:0; margin:0}
  .links-list li{margin:8px 0}
  
  /* ---------- Imprint social bar ---------- */
  .social-links{margin-top:20px; display:flex; gap:20px}
  .social-links a{display:inline-flex; width:32px; height:32px; color:var(--blue); fill:currentColor; transition:transform .2s, color .2s}
  .social-links a:hover{color:var(--blue-hover); transform:scale(1.2)}
  .social-links svg{width:100%; height:100%}
  
  /* ---------- Tiny italics ---------- */
  .link-meta,.meta{font-style:italic}

  /* Footer nav: keep links in one row and vertically centered */
footer .footer-links{
    display:flex;
    gap:24px;
    align-items:center;     /* align text and icon on the same center line */
    flex-wrap:nowrap;
  }
  
  /* Make every footer link the same kind of box, not just .iconized */
  footer .footer-links a{
    display:inline-flex;
    align-items:center;
    height:28px;            /* matches the iconized click box nicely */
    line-height:1;          /* avoids baseline wobble */
  }
  
  /* Ensure the SVG itself has no baseline gap */
  footer .footer-links a.iconized svg{
    width:18px;
    height:18px;
    display:block;
  }

  /* Avatar image on Imprint page */
  .avatar{
    width:200px; height:200px; object-fit:cover;
    /* vorher: margin-top:100px; */
    margin: 12px 0 20px;                        /* wie beim Logo */
    border:2px solid var(--blue); border-radius:50%;
  }

  /* Nur für große Hero-Fotos auf Landing-Pages */
    .hero-img {
        max-width: 100%;
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 20px; /* etwas Luft zum Text */
    }

  /* --- Fade helpers restored (used by imprint contact form) --- */
.fade,
.fade-flex {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

/* Shown state */
.fade.show,
.fade-flex.show {
  opacity: 1;
  pointer-events: auto;
}

/* Contact-form layout: stack vertically when shown */
#contact-form,
.fade-flex {                 /* supports both #contact-form and the class */
  display: none;            /* JS toggles to flex */
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* Make the math row (input + button) stay on one line */
#contact-form .answer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Keep the mailto link hidden until solved */
#mailto-link {
  display: none;
  margin-top: 8px;
}

/* Optional: tighten the tiny paragraphs inside the form */
#contact-form p { margin: 4px 0; }

/* --- API brand lockup: logo + title on one line (robust) --- */
h1.brand{
    display:flex;               /* block-level flex keeps layout steady */
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
    color: var(--blue);         /* drives SVG color via currentColor */
  }
  
  h1.brand .mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:28px;
    height:28px;
  }
  
  /* size + color the SVG */
  h1.brand .mark svg{
    width:100%;
    height:100%;
    display:block;              /* no baseline gap */
  }
  
  /* blue dots */
  h1.brand .mark svg circle{
    fill: currentColor;
  }
  
  /* arrow drawn as stroke */
  h1.brand .mark svg path{
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* --- SSH info: nicer vertical rhythm --- */
#ssh-info { margin-top: 24px; }

#ssh-info a {
  display: inline-block;       /* turn link into a block-ish line */
  margin: 6px 0 14px;          /* space under "Download Public Key" */
}

#ssh-info strong {
  display: block;              /* make headings real blocks */
  margin: 14px 0 6px;          /* space above/below the label */
  letter-spacing: .02em;
}

#ssh-info pre {
  margin: 8px 0 22px;          /* give each pre some breathing room */
  padding: 12px 14px;          /* slightly cushier */
}

#ssh-info pre:last-of-type { margin-bottom: 0; }