/* ============================================================
   openclaw.css — OpenClaw Sanctuary
   Earth tone warm theme
   ============================================================

   SECTIONS:
   01. Variables & Reset
   02. Base & Typography
   03. Progress Bar
   04. Top Nav
   05. Left Sidebar
   06. Coffee Widget
   07. Mobile Overlay
   08. Hero
   09. Main Content Wrap
   10. Sections & Headings
   11. Code Blocks
   12. Callouts
   13. Prereq Box
   14. Spec Grid
   15. Firewall Rule List
   16. Reveal Animations
   17. Footer
   18. Scrollbar
   19. Responsive
   20. Section Images
   21. User Input & File Path Highlights
   22. Code Block Location Styling
   23. Reusable Content Classes

   ============================================================ */


/* ── 01. VARIABLES & RESET ───────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Primary — Forest Green ── */
  --teal:          #4a7659;
  --teal-light:    #6a9977;
  --teal-dark:     #344f3e;
  --teal-glow:     rgba(74, 118, 89, 0.1);
  --teal-glow-str: rgba(74, 118, 89, 0.2);

  /* ── Accent — Warm Amber ── */
  --amber:         #c4742a;
  --amber-light:   #d98f50;
  --amber-glow:    rgba(196, 116, 42, 0.1);

  /* ── Backgrounds — Warm Parchment ── */
  --bg:            #f5f0e8;
  --bg-card:       #ede8de;
  --bg-elevated:   #e5ddd0;
  --bg-code:       #1e1a14;

  /* ── Text — Warm Brown ── */
  --text:          #2c2015;
  --text-muted:    #6b5d4e;
  --text-dim:      #9a8a78;

  /* ── Borders ── */
  --border:        rgba(109, 90, 68, 0.18);
  --border-str:    rgba(109, 90, 68, 0.32);

  /* ── Typography ── */
  --serif:         'Lora', Georgia, serif;
  --display:       'DM Serif Display', Georgia, serif;
  --sans:          'DM Sans', system-ui, sans-serif;
  --mono:          'Fira Code', 'Courier New', monospace;

  /* ── Layout ── */
  --radius:        8px;
  --nav-h:         64px;
  --sidebar-w:     210px;
}

html {
  font-size: 17px; /* rem anchor — 1rem = 17px everywhere */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}


/* ── 02. BASE & TYPOGRAPHY ───────────────────────────────── */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1rem; /* 17px */
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }
strong { color: var(--text); font-weight: 700; }

code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: rgba(74, 118, 89, 0.1);
  color: var(--teal-dark);
  padding: 2px 7px;
  border-radius: 3px;
}


/* ── 03. PROGRESS BAR ────────────────────────────────────── */

.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--teal-dark), var(--amber));
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}


/* ── 04. TOP NAV ─────────────────────────────────────────── */

#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px 0 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 200;
  transition: box-shadow 0.3s;
}

#site-nav.scrolled { box-shadow: 0 2px 16px rgba(44, 32, 21, 0.06); }

/* Text wordmark — no image */
.nav-logo {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo:hover { color: var(--teal-dark); }

/* Hide image logos if any remain */
.nav-logo img { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 201;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── 05. LEFT SIDEBAR ────────────────────────────────────── */

.sidebar {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  z-index: 150;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-str); border-radius: 4px; }

.sidebar-inner { display: flex; flex-direction: column; flex: 1; padding: 28px 0 24px; }
.sidebar-nav { flex: 1; }

.sidebar-label {
  font-family: var(--sans);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  padding: 0 20px 12px;
}

.sidebar-nav ul { list-style: none; }

.sidebar-link {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 9px 20px 9px 22px;
  border-left: 2px solid transparent;
  line-height: 1.35;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.sidebar-link:hover {
  color: var(--teal);
  background: var(--teal-glow);
}

.sidebar-link.active {
  color: var(--teal-dark);
  border-left-color: var(--teal);
  background: var(--teal-glow);
  font-weight: 600;
}

.sidebar-nav::after {
  content: '';
  display: block;
  margin: 20px 20px 0;
  border-top: 1px solid var(--border);
}


/* ── 06. COFFEE WIDGET ───────────────────────────────────── */

.coffee-widget { padding: 20px 16px 8px; display: flex; justify-content: center; }
.coffee-link { display: block; width: 100%; max-width: 160px; transition: transform 0.25s, filter 0.25s; }
.coffee-link:hover { transform: translateY(-3px); filter: drop-shadow(0 6px 18px rgba(196, 116, 42, 0.3)); }
.coffee-svg { width: 100%; height: auto; display: block; }

@keyframes steamRise { 0% { stroke-dashoffset: 0; opacity: 0.6; } 50% { opacity: 0.3; } 100% { stroke-dashoffset: -40; opacity: 0; } }
.steam-1, .steam-2, .steam-3 { stroke-dasharray: 40; stroke-dashoffset: 0; }
.steam-1 { animation: steamRise 2.4s ease-in-out infinite; }
.steam-2 { animation: steamRise 2.4s ease-in-out infinite 0.7s; }
.steam-3 { animation: steamRise 2.4s ease-in-out infinite 1.4s; }


/* ── 07. MOBILE OVERLAY ──────────────────────────────────── */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44, 32, 21, 0.4);
  z-index: 140;
  backdrop-filter: blur(2px);
}


/* ── 08. HERO ────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 56px) 40px 80px calc(var(--sidebar-w) + 40px);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(74, 118, 89, 0.06) 0%, transparent 70%);
}

.hero-lobster { font-size: 0.85em; vertical-align: middle; margin-right: 4px; }
.hero-content { position: relative; z-index: 1; max-width: 760px; animation: fadeUp 0.85s ease both; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--teal);
  margin-bottom: 18px;
  animation: fadeUp 0.85s 0.1s ease both;
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 24px;
  animation: fadeUp 0.85s 0.25s ease both;
}

.hero-title em {
  font-style: italic;
  color: var(--teal);
}

.hero-sub {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.82;
  animation: fadeUp 0.85s 0.4s ease both;
}


/* ── 08b. TUTORIAL HEADER ────────────────────────────────── */

.tutorial-header {
  margin-left: var(--sidebar-w);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.tutorial-header-inner {
  max-width: 860px;
  padding: calc(var(--nav-h) + 52px) 48px 44px;
}

.tutorial-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 26px;
}

.tutorial-breadcrumb a {
  color: var(--teal);
  transition: color 0.2s;
}

.tutorial-breadcrumb a:hover { color: var(--teal-dark); }
.tutorial-breadcrumb span { color: var(--text-dim); }

.tutorial-header-title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 16px;
}

.tutorial-header-desc {
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.78;
  max-width: 600px;
  margin-bottom: 28px;
}

.tutorial-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.67rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tutorial-header-meta span {
  padding-right: 14px;
  margin-right: 14px;
  border-right: 1px solid var(--border-str);
  line-height: 1;
}

.tutorial-header-meta span:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}


/* ── 09. MAIN CONTENT WRAP ───────────────────────────────── */

.content-wrap {
  margin-left: var(--sidebar-w);
  padding: 0 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-inner {
  width: 100%;
  max-width: 860px;
  padding: 0 48px;
}


/* ── 10. SECTIONS & HEADINGS ─────────────────────────────── */

.section {
  padding: 0;
  border-bottom: 1px solid var(--border);
  width: 100%;
}

.section:last-child { border-bottom: none; }
.section-inner { padding: 80px 48px; }

.section-tag {
  font-family: var(--sans);
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--teal);
  margin-bottom: 12px;
}

.section h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 28px;
  line-height: 1.2;
}

.section h3 {
  font-family: var(--display);
  font-size: clamp(1.08rem, 2.2vw, 1.25rem);
  font-weight: 400;
  color: var(--text);
  margin: 44px 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.section-summary {
  color: var(--text-muted);
  line-height: 1.8;
}

.section-summary p + p { margin-top: 14px; }

.step-content { margin-bottom: 4px; }
.step-content p { color: var(--text-muted); line-height: 1.8; margin-bottom: 14px; }


/* ── 11. CODE BLOCKS ─────────────────────────────────────── */

.code-block {
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-code);
}

.code-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #c8b99a;
  background: rgba(200, 185, 154, 0.1);
  padding: 7px 16px;
  border-bottom: 1px solid rgba(200, 185, 154, 0.15);
}

.code-block pre {
  position: relative;
  padding: 18px 16px;
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  background: none;
  padding: 0;
  font-size: 0.83rem;
  color: #c8bfaa;
  line-height: 1.72;
  white-space: pre;
  display: block;
}


/* ── 12. CALLOUTS ────────────────────────────────────────── */

.callout {
  padding: 16px 20px;
  border-radius: var(--radius);
  margin: 24px 0;
  font-size: 0.95rem;
  line-height: 1.72;
  border-left: 3px solid;
}

.callout--info    { background: rgba(74, 118, 89, 0.08);   border-color: var(--teal);        color: var(--text-muted); }
.callout--warn,
.callout--warning { background: rgba(196, 116, 42, 0.08);  border-color: var(--amber);       color: #7a4a1a; }
.callout--success { background: rgba(74, 118, 89, 0.1);    border-color: var(--teal-dark);   color: var(--teal-dark); }
.callout strong { color: inherit; font-weight: 700; }


.bmc-inline-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.84rem;
  color: var(--amber);
  border-bottom: 1px solid rgba(196, 116, 42, 0.3);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.bmc-inline-link:hover { color: var(--amber-light); border-color: var(--amber); }


/* ── 13. PREREQ BOX ──────────────────────────────────────── */

.prereq-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 28px 0;
}

.prereq-title {
  font-family: var(--sans);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--teal);
  margin-bottom: 16px;
  font-weight: 600;
}

.prereq-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }

.prereq-list li {
  padding-left: 18px;
  position: relative;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.prereq-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-family: var(--mono);
}

.prereq-list a {
  color: var(--teal);
  border-bottom: 1px solid var(--border-str);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.prereq-list a:hover { color: var(--teal-dark); }


/* ── 14. SPEC GRID ───────────────────────────────────────── */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.spec-card {
  background: var(--bg-card);
  border: 1px solid var(--border-str);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
}

.spec-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--teal);
  border-radius: var(--radius) var(--radius) 0 0;
}

.spec-card--dim { border-color: var(--border); opacity: 0.65; }
.spec-card--dim::before { background: var(--text-dim); }

.spec-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 6px;
}

.spec-card--dim .spec-label { color: var(--text-muted); }
.spec-value { font-size: 0.88rem; color: var(--text); margin-bottom: 8px; font-weight: 600; }
.spec-note { font-family: var(--sans); font-size: 0.7rem; color: var(--text-muted); line-height: 1.45; }


/* ── 15. FIREWALL RULE LIST ──────────────────────────────── */

.rule-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.rule-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.rule-item:last-child { border-bottom: none; }

.rule-port {
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal-dark);
  background: rgba(74, 118, 89, 0.07);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  word-break: break-word;
}

.rule-port span {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-family: var(--sans);
}

.rule-source { padding: 14px 16px; font-size: 0.91rem; color: var(--text-muted); line-height: 1.62; }
.rule-source strong { color: var(--text); }


/* ── 16. REVEAL ANIMATIONS ───────────────────────────────── */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }


/* ── 17. FOOTER ──────────────────────────────────────────── */

.site-footer {
  margin-left: var(--sidebar-w);
  border-top: 1px solid var(--border);
  padding: 44px 48px;
  text-align: center;
  background: var(--bg-card);
}

.footer-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Hide any lingering logo images in footer */
.footer-logo img { display: none; }
.footer-logo { font-family: var(--display); font-size: 1rem; color: var(--text-muted); }
.footer-logo:hover { color: var(--teal); }

.footer-copy {
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.footer-back { font-family: var(--sans); font-size: 0.72rem; }
.footer-back a { color: var(--teal); }
.footer-back a:hover { color: var(--teal-dark); }


/* ── 18. SCROLLBAR ───────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-card); }
::-webkit-scrollbar-thumb { background: var(--border-str); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }


/* ── 19. RESPONSIVE ──────────────────────────────────────── */

@media (max-width: 900px) {
  :root { --sidebar-w: 190px; }
  .section-inner { padding: 60px 32px; }
}

@media (max-width: 700px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.3s ease; z-index: 160; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  #site-nav { padding: 0 20px; }
  .nav-toggle { display: flex; }
  .content-wrap { margin-left: 0; padding: 0 0 60px; }
  .section-inner { padding: 50px 20px; }
  .hero { padding: calc(var(--nav-h) + 40px) 20px 60px; }
  .tutorial-header { margin-left: 0; }
  .tutorial-header-inner { padding: calc(var(--nav-h) + 32px) 20px 36px; }
  .site-footer { margin-left: 0; padding: 40px 20px; }
}

@media (max-width: 580px) {
  .spec-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .rule-item { grid-template-columns: 1fr; }
  .rule-port { border-right: none; border-bottom: 1px solid var(--border); }
}


/* ── 20. SECTION IMAGES ──────────────────────────────────── */

.section-illustration {
  float: right;
  width: 260px;
  margin: 0 0 20px 32px;
  opacity: 0.88;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .section-illustration {
    float: none;
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto 24px auto;
  }
}


/* ── 21. USER INPUT & FILE PATH HIGHLIGHTS ──────────────── */

/* Default: used in body text (parchment background) */
.user-input {
  background-color: rgba(74, 118, 89, 0.1);
  color: var(--teal-dark);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 600;
  border: 1px solid rgba(74, 118, 89, 0.2);
}

.file-path {
  background-color: rgba(74, 118, 89, 0.1);
  color: var(--teal-dark);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 600;
  border: 1px solid rgba(74, 118, 89, 0.2);
}

/* Inside dark code blocks — override for legibility */
.code-block .user-input,
.code-block .file-path {
  background-color: rgba(196, 116, 42, 0.18);
  color: #e8c990;
  border-color: rgba(196, 116, 42, 0.35);
}


/* ── 22. CODE BLOCK LOCATION STYLING ────────────────────── */

.code-location-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
  font-family: var(--mono);
  margin-bottom: 8px;
}

.code-local,
.code-computer {
  border-left: 4px solid #4a7659;
  background-color: var(--bg-code);
}

.code-local .code-location-badge,
.code-computer .code-location-badge {
  background-color: rgba(74, 118, 89, 0.2);
  color: #c8d8c0;
}

.code-aws {
  border-left: 4px solid var(--amber);
  background-color: var(--bg-code);
}

.code-aws .code-location-badge {
  background-color: rgba(196, 116, 42, 0.2);
  color: #e0c090;
}

.code-discord {
  border-left: 4px solid #7289DA;
  background-color: var(--bg-code);
}

.code-discord .code-location-badge {
  background-color: rgba(114, 137, 218, 0.2);
  color: #b0c0f0;
}

.code-setup {
  border-left: 4px solid var(--teal-light);
  background-color: var(--bg-code);
}

.code-setup .code-location-badge {
  background-color: rgba(106, 153, 119, 0.2);
  color: #a0c8b0;
}


/* ── 23. REUSABLE CONTENT CLASSES ───────────────────────── */

.step-list {
  margin: 15px 0;
  padding-left: 20px;
  color: var(--text-muted);
}

.step-list li { margin-bottom: 6px; line-height: 1.68; }

.step-list-ordered {
  margin: 15px 0;
  padding-left: 20px;
  color: var(--text-muted);
}

.step-list-ordered li { margin-bottom: 6px; line-height: 1.68; }

.step-list-compact {
  margin: 10px 0 10px 20px;
  color: var(--text-muted);
}

.step-list-compact li { margin-bottom: 4px; line-height: 1.58; }

.note-highlight {
  margin-top: 15px;
  padding: 12px 16px;
  background: rgba(196, 116, 42, 0.08);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.68;
}