/* /home/k8sweb/www/assets/styles.css */
/* Purpose: Layout, typography, sticky TOC, accordions, tip banners, ad slots */
:root { color-scheme: light; }
:root{
  --bg:#F7F9FB; --panel:#FFFFFF; --line:#DCE2E9; --text:#233142; --muted:#78889C;
  --brand:#0E3C6E; --accent:#18A999;

  /* Tip palettes (AA contrast) */
  --tip-info-bg:#E5F8F5; --tip-info-fg:#11695F;
  --tip-caution-bg:#FFF4E6; --tip-caution-fg:#9B5A00;
  --tip-important-bg:#FFEBEA; --tip-important-fg:#9E1A32;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; color:var(--text); background:var(--bg)}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

.skiplink{position:absolute; left:-9999px}
.skiplink:focus{position:static; padding:.5rem; background:#ff0}

.site-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:12px 24px; background:var(--panel); border-bottom:1px solid var(--line)}
.header-left{display:flex; align-items:center; gap:20px}
.brand img{  height:100px;  width:auto;  max-width:440px;  display:block; }
.top-nav a{margin-right:16px; color:var(--text)}
.adbox .ad-placeholder{height:90px; width:728px; border:1px dashed var(--line); display:grid; place-items:center; color:var(--muted); background:#EFF3F6; font-weight:600}

.hero{padding:24px; background:#EAF1F7; border-bottom:1px solid var(--line)}
.hero h1{margin:0 0 .25rem 0; font-size:2rem; color:var(--brand)}
.subline{margin:0 0 .75rem 0}
.search input{width:100%; padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:#fff}

.author-band{padding:16px 24px}
.author-card{
  display:flex; gap:16px; padding:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  align-items:flex-start; /* keeps avatar from stretching vertically */
}

/* Avatar: stays a perfect circle at any width */
.avatar{
  inline-size: clamp(72px, 10vw, 112px); /* responsive width */
  aspect-ratio: 1 / 1;                   /* enforces square */
  border-radius: 50%;                     /* makes it a circle */
  background:#EFF3F6; border:1px solid var(--line);
  overflow:hidden;                        /* crop overflow */
  flex: 0 0 auto;                         /* don't let flexbox stretch it */
}

/* If you place an <img> inside .avatar, it will fill the circle correctly */
.avatar > img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.author-meta h2{margin:.25rem 0 .25rem 0; font-size:1.1rem}


.badges{display:flex; gap:8px; padding:0; margin:.5rem 0; list-style:none}
.badges li{padding:4px 10px; border-radius:8px; background:#EFF3F6; border:1px solid var(--line); color:var(--brand); font-weight:600; font-size:.85rem}
.bio-link{font-weight:600}

.layout{display:grid; grid-template-columns: 280px 24px minmax(0,720px) 24px 300px; align-items:start; gap:0; padding:24px}
.toc{position:sticky; top:12px; height:calc(100dvh - 12px); overflow:auto}
.toc-inner{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px}
.toc-head{display:flex; flex-direction:column; gap:10px; margin-bottom:8px}
.toc-filter input{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#EFF3F6}
.toc-groups{display:flex; flex-direction:column; gap:6px}
.toc-group{border-top:1px solid var(--line); padding-top:6px}
.toc-group__toggle{all:unset; display:flex; align-items:center; gap:8px; cursor:pointer; width:100%}
.toc-group__toggle .count{margin-left:auto; background:var(--accent); color:#fff; border-radius:999px; padding:2px 8px; font-size:.8rem; font-weight:700}
.toc-group ul{list-style:none; margin:6px 0 10px; padding-left:26px}
.toc-group ul li{margin:4px 0}
.toc-group ul li.more a{color:var(--muted); font-weight:700}
/* Subtle message when a group has no matches during filtering */
.toc-group ul li.no-results{
  color: var(--muted);
  font-style: italic;
}
.toc-group.is-open .toc-group__toggle .chev{transform:rotate(0deg)}
.toc-group:not(.is-open) .toc-group__toggle .chev{transform:rotate(-90deg)}
.toc-group:not(.is-open) ul{display:none}

.content{grid-column:3; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; overflow:hidden}
.content h2{margin:8px 0 12px; color:var(--brand); font-size:1.6rem}
.howto{border-top:1px solid var(--line); padding-top:12px; margin-top:12px}
.howto details{background:#F0F3F7; border:1px solid var(--line); border-radius:10px; padding:0; overflow:hidden}
.howto summary{list-style:none; cursor:default; padding:12px 14px; display:grid; grid-template-columns: 1fr auto; align-items:center}
.howto summary::-webkit-details-marker{display:none}
.howto h3{margin:0; font-size:1.15rem; color:#2B3645}
.howto .meta{color:var(--muted); font-size:.9rem}
.btn-ghost{border:1px solid var(--line); background:#fff; color:var(--brand); border-radius:999px; padding:6px 10px; font-weight:600; cursor:pointer}
.howto[open] .btn-ghost{color:var(--brand)}
.steps{margin:12px 0 8px 24px}
.steps code{background:#F6F8FB; padding:2px 6px; border:1px solid var(--line); border-radius:6px}
/* Code block with Copy button docked on the right */
.code{
  display: grid;
  grid-template-columns: 1fr auto; /* code | button */
  gap: 8px;
  align-items: center;
  margin: 8px 0 16px;
}

.code pre{
  margin: 0;
  padding: 12px;
  background: #111827;
  color: #fff;
  border-radius: 8px;
  overflow: auto;
}

/* Copy button no longer overlays */
.code .copy{
  position: static;          /* <-- was absolute */
  margin: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

.diagram{margin:18px 0; text-align:center}
.diagram .diagram-box{height:140px; background:#E8EEF4; border:1px solid var(--line); border-radius:12px}

.tip{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:12px; border-radius:10px; margin:10px 0}
.tip .chip{display:inline-block; padding:3px 10px; color:#fff; border-radius:999px; font-size:.75rem; font-weight:800}
.tip--info{background:var(--tip-info-bg); color:var(--tip-info-fg)} .tip--info .chip{background:var(--tip-info-fg)}
.tip--caution{background:var(--tip-caution-bg); color:var(--tip-caution-fg)} .tip--caution .chip{background:var(--tip-caution-fg)}
.tip--important{background:var(--tip-important-bg); color:var(--tip-important-fg)} .tip--important .chip{background:var(--tip-important-fg)}

.rail{grid-column:5; display:flex; flex-direction:column; gap:20px}
.adbox .ad-placeholder{border:1px dashed var(--line); background:#EFF3F6; color:var(--muted); display:grid; place-items:center; font-weight:700}
.ad-300x600 .ad-placeholder{width:300px; height:600px}
.ad-300x250 .ad-placeholder{width:300px; height:250px}

.site-footer{margin-top:24px; padding:24px; background:var(--panel); border-top:1px solid var(--line)}
.site-footer .policy{max-width:1000px}
.site-footer .legal{color:var(--muted); font-size:.9rem}

.screenreader-only{position:absolute; left:-9999px}
@media (max-width:1100px){
  .layout{grid-template-columns:1fr; gap:16px}
  .toc{position:static; height:auto}
  .content,.rail{grid-column:auto}
  .rail{flex-direction:row; flex-wrap:wrap}
  .ad-300x600 .ad-placeholder{max-width:300px; width:100%}
  .ad-300x250 .ad-placeholder{max-width:300px; width:100%}
  .site-header{flex-direction:column; align-items:flex-start}
  .adbox .ad-placeholder{width:100%; max-width:728px}
  .brand img{height:72px; max-width:100%}
}


/* site-wide search: no results notice */
.site-no-results{
  margin: 12px 0 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-style: italic;
}


/* ==== Callout notes (tip / warn / danger) ==== */
.note{
  margin: 16px 14px;       /* ⬅ top/bottom 16px, left/right 14px */
  padding: 14px 16px;      /* inside padding stays comfy */
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #F6F8FA;
  line-height: 1.45;
}
.note strong{display:inline-block; font-weight:700; margin-right:6px}

/* extra breathing room when adjacent to lists/code */
.steps + .note{ margin-top: 16px }
.note + .code,
.note + .steps{ margin-top: 16px }

/* Tip (green) */
.note--tip{ background:#ECFDF5; border-color:#A7F3D0; color:#065F46 }
/* Warn (amber) */
.note--warn{ background:#FFFBEB; border-color:#FDE68A; color:#92400E }
/* Danger (red) */
.note--danger{ background:#FEF2F2; border-color:#FCA5A5; color:#7F1D1D }

/* spacing when multiple notes stack */
.note + .note{ margin-top: 12px }


/* === SEO/AI Discoverability Aids === */
.section-intro{margin:0.25rem 0 1rem;color:var(--muted, #4a5568);font-size:0.95rem}
.related{margin-top:0.75rem;border-top:1px solid rgba(0,0,0,0.06);padding-top:0.5rem}
.related h4{font-size:0.9rem;margin:0 0 0.25rem;color:var(--muted, #4a5568)}
.related ul{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.related a{text-decoration:none;border:1px solid rgba(0,0,0,0.08);padding:.15rem .4rem;border-radius:.5rem}
.related a:hover{background:rgba(0,0,0,0.04)}
nav.related { padding: 12px 16px; }
.site-no-results{margin:1rem 0;padding:.75rem;border:1px dashed rgba(0,0,0,0.2);border-radius:.5rem;background:rgba(255,235,235,.35)}
mark.search-hit{background: #fff59d;padding:0 .1rem;border-radius:.15rem}


/* FAQ blocks */
.faq{margin:0.75rem 0 1.25rem}
.faq details{margin:0.35rem 0}
.faq summary{cursor:pointer}
.inline-link{margin-left:.35rem}

/* /assets/styles.css */
/* Purpose: visually separate the About block without dominance */
.about-guide{
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
}
.about-guide h2{ margin: 0 0 .5rem; font-size: 1.25rem; }

/* === Layout fix: ensure how-to title has dedicated space and meta wraps below === */
.howto summary{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 6px 12px;
}
.howto summary h3{
  grid-column: 1;
  grid-row: 1;
  min-width: 0;       /* allow long titles to wrap instead of overflowing */
}
.howto summary .meta{
  grid-column: 1 / -1; /* take full width on the row below title */
  grid-row: 2;
  white-space: normal; /* allow wrapping */
  text-wrap: balance;  /* nicer line breaks when supported */
  line-height: 1.3;
  max-width: 65ch;     /* avoid hyper-long lines on widescreens */
}
.howto summary .btn-ghost{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

/* On very small screens, give the title even more room by stacking the button as well */
@media (max-width: 520px) {
  .howto summary{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .howto summary .btn-ghost{ grid-column: 1; grid-row: 3; justify-self: start; }
}
/* === end layout fix === */


/* /assets/styles.css */
/* === Inline code emphasis (ONLY inline, not block <pre>) === */
/* Fallback colors for broad compatibility */
.steps code,
:not(pre) > code{
  background:#EEF9F7;             /* light teal wash */
  border:1px solid #A6E1DB;       /* teal-tinted border */
  color:#0B4F71;                  /* readable teal text */
  padding:2px 7px;
  border-radius:6px;
  font-weight:700;
}

/* Prefer theme variables when supported */
@supports (background: color-mix(in srgb, red 10%, white)){
  .steps code,
  :not(pre) > code{
    background: color-mix(in srgb, var(--brand, #14b8a6) 16%, #ffffff);
    border-color: color-mix(in srgb, var(--brand, #14b8a6) 46%, var(--line, #d1d5db));
    color: color-mix(in srgb, var(--brand, #14b8a6) 78%, #0f172a);
  }
}

/* /assets/styles.css */
/* Optional polish for the Quick Fill section */
.quick-fill { margin: 1.25rem 0 2rem; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 8px; }
.quick-fill .var-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; }
.quick-fill label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.quick-fill input { font: inherit; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 6px; }
.quick-fill .small { font-size: 0.9em; color: #666; margin-top: 8px; }

/* Copy-link actions layout */
.howto summary .summary-actions{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  gap: 8px;
}
@media (max-width: 520px){
  .howto summary .summary-actions{
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
}