/* ==========================================================
   Etiennewehrle.com — Gcore-inspired UI (FULL)
   - Light + Dark theme
   - Montserrat variable font
   - One-line header nav (scrollable when needed)
   - Clean cards (no double-padding)
   ========================================================== */

/* -------------------- Font -------------------- */
@font-face{
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------- Design tokens -------------------- */
:root{
  --brand:#FF4C00;
  --dark:#150C18;
  --light:#FFFFFF;

  --font:"Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --max:1120px;
  --pad:24px;

  --r:18px;
  --r2:12px;
  --t:140ms;

  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --shadow-dark: 0 14px 36px rgba(0,0,0,.35);
}

/* -------------------- LIGHT (default) -------------------- */
html[data-theme="light"],
html:not([data-theme]){
  --bg:#F5F6F8;
  --panel:#FFFFFF;
  --panel2:#FFFFFF;

  --text:#0B0E14;
  --muted:#5B6270;
  --muted2:#7A8190;

  --line:#E6E8EC;
  --line2:#DCE0E6;

  --chip:#FFF0EA;
  --chip-line:#FFD6C8;

  --header-bg:rgba(255,255,255,.92);
  --header-blur: blur(10px);

  --codebg:#F2F4F7;
}

/* -------------------- DARK -------------------- */
html[data-theme="dark"]{
  --bg:#0d0810;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.075);

  --text:#FFFFFF;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);

  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.18);

  --chip:rgba(255,76,0,.14);
  --chip-line:rgba(255,76,0,.30);

  --header-bg:rgba(13,8,16,.88);
  --header-blur: blur(12px);

  --codebg:rgba(255,255,255,.06);

  --shadow: var(--shadow-dark);
}

/* -------------------- Base -------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Stable dark background (NO scroll artifacts) */
html[data-theme="dark"] body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 14% -12%, rgba(255,76,0,.18), transparent 60%),
    radial-gradient(800px 560px at 86% 0%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, var(--dark) 0%, #0d0810 100%);
}

/* Inputs inherit font */
button,input,textarea,select{ font-family:var(--font); }

/* -------------------- Links & focus -------------------- */
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--brand); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:10px;
}

/* -------------------- Layout -------------------- */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:var(--pad);
}
.section{ padding:18px 0; }

/* -------------------- Header -------------------- */
.header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--header-bg);
  backdrop-filter: var(--header-blur);
  -webkit-backdrop-filter: var(--header-blur);
  border-bottom:1px solid var(--line);
}

/* Main nav row */
.nav{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Brand (keep it 1 line) */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  flex:0 0 auto;
}
.brand strong{
  font-weight:800;
  letter-spacing:-.2px;
}

/* Links container: ALWAYS single line */
.links{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  justify-content:flex-end;

  flex-wrap:nowrap;         /* critical */
  white-space:nowrap;       /* critical */
  overflow-x:auto;          /* keep 1 line no matter what */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;     /* Firefox hide scrollbar */
}
.links::-webkit-scrollbar{ display:none; }

/* Nav items */
.links a{
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
  transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease;
}
.links a:hover{ color:var(--brand); }

.links a[aria-current="page"]{
  color:var(--text);
  background:var(--chip);
  border:1px solid var(--chip-line);
}

/* Theme button in nav */
.links .btn{
  flex:0 0 auto;
}

/* Small tuning for mid screens: tighter spacing */
@media (max-width:1100px){
  .links{ gap:6px; }
  .links a{ padding:8px 10px; font-weight:600; }
}

/* -------------------- Buttons -------------------- */
.btn{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  transition: transform var(--t) ease, border-color var(--t) ease, background var(--t) ease;
}
.btn:hover{
  border-color:var(--line2);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }

.btn-primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.btn-primary:hover{
  background:#FF5E1A;
  border-color:#FF5E1A;
}

/* -------------------- Cards -------------------- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow: var(--shadow);
  padding:22px;           /* default padding */
}

/* Smaller cards/tiles */
.card.tile{
  padding:18px;
}

/* Avoid double padding when nesting cards */
.card .card{
  padding:16px;
  box-shadow:none;
}

/* -------------------- Hero -------------------- */
.hero{
  padding:34px 0 10px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}
@media (max-width:920px){
  .hero{ grid-template-columns:1fr; }
}

/* Light hero like gcore: airy */
html[data-theme="light"] .hero .card:first-child{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}

/* -------------------- Typography -------------------- */
h1{
  margin:0 0 14px;
  font-weight:600;
  font-size:clamp(40px,5vw,64px);
  line-height:1.03;
  letter-spacing:-.035em;
}
h2{
  margin:0 0 12px;
  font-weight:900;
  letter-spacing:-.02em;
}
h3{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:-.01em;
}
h4{
  margin:0 0 8px;
  font-weight:800;
}

.lead{
  font-size:1.08rem;
  color:var(--muted);
  max-width:62ch;
  margin:0 0 18px;
}

.small{ font-size:.92rem; color:var(--muted); }
.muted{ color:var(--muted); }
.muted2{ color:var(--muted2); }

/* paragraph spacing inside cards */
.card p{ margin:0 0 12px; }
.card p:last-child{ margin-bottom:0; }

/* -------------------- Badges / chips -------------------- */
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.badge{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--muted);
  font-size:.92rem;
  white-space:nowrap;
}

/* -------------------- Grid -------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
@media (max-width:920px){
  .grid{ grid-template-columns:1fr; }
}

/* -------------------- Divider -------------------- */
.hr{
  height:1px;
  background:var(--line);
  margin:18px 0;
}

/* -------------------- Lists -------------------- */
.list{ padding-left:18px; color:var(--muted); margin:8px 0 0; }
.list li{ margin:6px 0; }

/* -------------------- Code / pre -------------------- */
.code, pre{
  font-family:var(--mono);
  font-size:.92rem;
}
.code{
  padding:.15rem .45rem;
  border-radius:10px;
  background:var(--codebg);
  border:1px solid var(--line);
}
pre{
  background:var(--codebg);
  border:1px solid var(--line);
  border-radius:var(--r2);
  padding:12px;
  overflow:auto;
}

/* -------------------- Inputs -------------------- */
input,textarea{
  width:100%;
  padding:12px 12px;
  font:inherit;
  color:var(--text);
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--r2);
  transition:border-color var(--t) ease, background var(--t) ease;
}
input::placeholder,textarea::placeholder{ color:var(--muted2); }
input:focus,textarea:focus{
  border-color:var(--brand);
  background:var(--panel);
}

/* -------------------- Quote -------------------- */
.quote{
  padding:16px 16px;
  border-left:3px solid var(--brand);
  background:var(--panel2);
  border-radius:var(--r2);
  color:var(--muted);
}

/* -------------------- Footer -------------------- */
.footer{
  padding:30px 0 40px;
  color:var(--muted);
  font-size:.95rem;
}
.footer .cols{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}
@media (max-width:920px){
  .footer .cols{ grid-template-columns:1fr; }
}

/* -------------------- Gcore Logo -------------------- */
.gcore-mark{
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.gcore-mark svg{
  height:18px;
  width:auto;
  display:block;
}

/* -------------------- Utility spacing polish -------------------- */
.card h1, .card h2, .card h3, .card h4{ margin-top:0; }
.card ul, .card ol{ margin:10px 0 0; padding-left:18px; }

/* Make "Read →" links breathe */
.card a{
  display:inline-block;
  margin-top:6px;
}

/* DNS/SSL result styling (bullet list etc.) */
.dns-ssl-result .code{
  font-family:var(--mono);
  font-size:.92rem;
  word-break:break-word;
}
.dns-ssl-result ul li{ margin:6px 0; }


/* Make WAAP flow SVG visible in light theme */
html[data-theme="light"] #waapFlowDiagram,
html:not([data-theme]) #waapFlowDiagram {
  color: var(--svg-text);
}

html[data-theme="light"] #waapFlowDiagram rect,
html:not([data-theme]) #waapFlowDiagram rect {
  fill: var(--svg-node-fill);
  stroke: var(--svg-node-stroke);
}

html[data-theme="light"] #waapFlowDiagram .flow-arrows,
html:not([data-theme]) #waapFlowDiagram .flow-arrows {
  stroke: var(--svg-arrow);
}


html[data-theme="light"], html:not([data-theme]) {
  --svg-text: #0B0E14;
  --svg-arrow: rgba(11,14,20,0.60);

  --svg-node-fill: rgba(255,255,255,0.92);
  --svg-node-stroke: rgba(11,14,20,0.14);

  --svg-panel-fill: rgba(255,76,0,0.12); /* request lane background */
  --svg-panel2-fill: rgba(11,14,20,0.04); /* response lane background */
  --svg-panel-stroke: rgba(11,14,20,0.08);
}

html[data-theme="dark"] {
  --svg-text: rgba(255,255,255,0.94);
  --svg-arrow: rgba(255,255,255,0.72);

  --svg-node-fill: rgba(255,255,255,0.06);
  --svg-node-stroke: rgba(255,255,255,0.14);

  --svg-panel-fill: rgba(255,76,0,0.10);
  --svg-panel2-fill: rgba(255,255,255,0.03);
  --svg-panel-stroke: rgba(255,255,255,0.08);
}

/* Global background image */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(900px 520px at 14% -12%, rgba(255,76,0,.14), transparent 60%),
    url("https://s-ed1.cloud.gcore.lu/bucket.etiennewehrle.com/web_app_and_api_protection_hero_790b46e5c2.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  /* prevents “scroll repaint” artifacts */
  transform: translateZ(0);
}

/* Light overlay for readability */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(245,246,248,.70) 0%,
    rgba(245,246,248,.92) 55%,
    rgba(245,246,248,1) 100%
  );
}

/* Dark overlay for readability */
html[data-theme="dark"] body::after{
  background: linear-gradient(
    180deg,
    rgba(13,8,16,.62) 0%,
    rgba(13,8,16,.88) 55%,
    rgba(13,8,16,1) 100%
  );
}

.waap-hero-image {
  display: flex;
  justify-content: center;
  margin: 32px 0 24px;
}

.waap-hero-image img {
  max-width: 100%;
  width: 500px;          /* matches Gcore hero scale */
  height: auto;
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}