/* 0xAmr.site — dark landing (refined, responsive) */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:#000;
  --muted:#9aa6b2;
  --accent:#00ff99;   /* neon green */
  --accent-2:#00aaff; /* cyan */
  --code-bg:#0b0b0b;
  --code-top:#0e0e0f;
  --code-border:rgba(255,255,255,0.06);
  --code-shadow:0 10px 30px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,0.04) inset;
}

/* Base typography — fluid */
html, body{
  height:100%;
  background:var(--bg);
  color:#fff;
  font-family:'Share Tech Mono', ui-monospace, Menlo, Consolas, monospace;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:clamp(14px, 1.8vw, 18px); /* fluid body size */
  line-height:1.6;
}

/* Prevent accidental sideways scroll while we also wrap long content */
html, body { overflow-x: hidden; }

/* Media (images/video) scale to container */
img, video, svg{ max-width:100%; height:auto; display:block; }

/* Layout */
main{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: clamp(1.5rem, 4vw, 3rem) 1rem; /* tighter on phones */
}

p, h2, h3, h4, h5, h6 { margin-top: 1em; }

.center{
  text-align:center;
  animation: fadeInUp 1s ease both;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(12px, 3vw, 24px); /* side breathing room */
}

/* Logo — fluid */
.logo{
  width: 20em;
  height:auto;
  margin:0 auto 16px;
  filter:
    drop-shadow(0 0 22px rgba(0,255,153,.16))
    drop-shadow(0 0 10px rgba(0,170,255,.12));
  cursor: pointer;
  transition: transform .2s ease-in-out;
}
.logo:hover { transform: scale(1.05); }

/* Title & slogan — fluid */
.title{
  font-family:'Orbitron', ui-sans-serif;
  letter-spacing:.18em;
  font-weight:700;
  font-size: clamp(24px, 6vw, 48px); /* more responsive */
  margin-bottom:.6rem;
  text-shadow:0 0 18px rgba(0,170,255,.06);
}
.slogan{
  max-width: 68ch;                       /* limit line length */
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(14px, 2.6vw, 18px);   /* scale on small screens */
  line-height:1.5;
  opacity:.95;
}

/* Article typography overrides */
.center article{
  margin: 2rem auto 0;
  font-size: clamp(15px, 2.3vw, 18px);    /* fluid article size */
  line-height:1.7;
  text-align:left;
  padding-inline: clamp(8px, 3.5vw, 0);   /* gentle side padding on phones */
}

/* Headings inside articles */
.center article h1{ font-size: clamp(22px, 7vw, 34px); line-height:1.25; margin-top: 1.2em; }
.center article h2{ font-size: clamp(20px, 6vw, 28px); line-height:1.3;  margin-top: 1.1em; }
.center article h3{ font-size: clamp(18px, 5vw, 24px); line-height:1.3;  margin-top: 1em; }
.center article h4{ font-size: clamp(16px, 4.4vw, 20px); line-height:1.35; }

/* Tables & images in articles never exceed viewport; tables can scroll horizontally if needed */
.center article table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Code window */
.code-window{
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 14px;
  box-shadow: var(--code-shadow);
  overflow: hidden;
  margin: clamp(0.8rem, 2.5vw, 1.2rem) 0;
}
.code-window .code-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 12px;
  background:var(--code-top);
  border-bottom:1px solid var(--code-border);
  position:relative;
}
.code-window .dot{
  width:12px; height:12px; border-radius:50%;
  display:inline-block; box-shadow:0 0 8px rgba(0,0,0,.35);
}
.code-window .dot.red{ background:#ff5f56; }
.code-window .dot.yellow{ background:#ffbd2e; }
.code-window .dot.green{ background:#27c93f; }
.code-window .lang{
  position:absolute; right:12px;
  font-size:12px; color:var(--muted);
  letter-spacing:.06em; text-transform:lowercase; opacity:.85;
}

/* code area (inside code-window) */
.code-window pre{
  margin:0;
  padding: clamp(12px, 2.6vw, 18px);
  overflow:auto;
  background:transparent;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}
.code-window code{
  display:block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Share Tech Mono", monospace;
  font-size: clamp(12px, 2.1vw, 15px); /* fluid code size */
  line-height:1.55;
  color:#e7faff;
  white-space: pre-wrap;                /* WRAP long lines on mobile */
  overflow-wrap: anywhere;
  word-break: break-word;
  tab-size: 2;
}

/* ALSO handle stray <pre><code> not wrapped by .code-window (markdown edge cases) */
.center article pre{
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 14px;
  box-shadow: var(--code-shadow);
  margin: clamp(0.8rem, 2.5vw, 1.2rem) 0;
  padding: clamp(12px, 2.6vw, 18px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.center article .code-window pre code {
  display: block;
  color: #00ffb8;
  font-size: clamp(12px, 2.1vw, 15px);
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  word-break: normal;
  tab-size: 2;
}

.center article pre{
  background: var(--code-bg);
  border: 0px solid var(--code-border);
  border-radius: 0px;
  box-shadow: none;
  margin: clamp(0.8rem, 2.5vw, 1.2rem) 0;
  padding: clamp(12px, 2.6vw, 18px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

/* Inline code (not inside pre) */
.center article :not(pre) > code{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  padding: .1em .35em;
  font-size: .95em;
  color: #e7faff;
}

/* Lists */
.center article ul,
.center article ol{ margin: .6rem 0 1rem 1.25rem; }
.center article li + li{ margin-top: .25rem; }

/* Blog/article content links */
.center article a, p a{
  color:#00ff99;
  text-decoration:none;
  border-bottom:1px dashed rgba(0,255,153,.45);
  transition:border-color .2s ease, opacity .2s ease, text-shadow .2s ease;
}
.center article a:hover, p a:hover{
  opacity:.95;
  border-bottom-color:rgba(0,170,255,.65);
  text-shadow:0 0 8px rgba(0,255,153,.25);
}
.center article a:focus-visible, p a:focus-visible{
  outline:2px solid rgba(0,255,153,.7);
  outline-offset:2px; border-radius:3px;
}

/* Blockquote & hr */
blockquote{
  margin:1.2em 0;
  padding:.8em 1em;
  border-left:4px solid #ffdb00;
  background:rgba(255,255,255,0.03);
  color:#ffdb00;
  font-style:italic;
  border-radius:0 6px 6px 0;
}
blockquote p{ margin:0; }
hr{
  border:0; height:1px; margin:2rem 0;
  background:linear-gradient(to right, transparent, #00ffc6, transparent);
  opacity:.6;
}

/* Contact footer */
.contact{
  text-align:center;
  padding: clamp(1rem, 3vw, 1.25rem) 1rem calc(2rem + env(safe-area-inset-bottom));
  color:var(--muted);
  font-size: clamp(.9rem, 1.9vw, .95rem);
  border-top:1px dashed rgba(255,255,255,0.08);
  max-width:980px;
  margin:0 auto;
}
.contact a{
  color:#e7faff;
  text-decoration:none;
  border-bottom:1px dashed color-mix(in oklab, var(--accent) 60%, transparent);
  padding:.1rem .05rem;
}
.contact a:hover{
  opacity:.95;
  border-bottom-color: color-mix(in oklab, var(--accent-2) 70%, transparent);
}

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 70%, white 10%);
  outline-offset:3px; border-radius:4px;
}

/* Selection tint */
::selection{
  background: color-mix(in oklab, var(--accent) 30%, black);
  color:#fff;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  * { animation:none !important; transition:none !important; }
}

/* Entrance animation */
@keyframes fadeInUp{
  from { opacity:0; transform: translateY(18px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Small screens tweaks */
@media (max-width:520px){
  .title{ letter-spacing:.13em; }
  .center{ padding-inline: 16px; }
  .center article{ margin-top: 1.3rem; }
}

/* Scrollbars (optional) */
.code-window pre::-webkit-scrollbar{ height:10px; }
.code-window pre::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }

/* Consent banner styles (dark, responsive) */
.consent-banner{
  position:fixed; inset:auto 0 0 0;
  background:#0b0b0b; color:#e6f7ff;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -10px 30px rgba(0,0,0,.45);
  display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
  padding:12px clamp(12px, 3vw, 20px);
  z-index:9999;
}
.consent-banner p{
  margin:0; color:#9aa6b2;
  font-size: clamp(13px, 2.5vw, 15px);
  max-width: 80ch; text-align:center;
}
.consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-consent{
  border:1px solid rgba(255,255,255,.12);
  background:#0f1113; color:#e7faff;
  padding:.5rem .8rem; border-radius:10px;
  font-size: .95rem; cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, opacity .2s ease;
}
.btn-consent:hover{ transform: translateY(-1px); border-color: rgba(0,255,153,.45); }
.btn-accept{ border-color: rgba(0,255,153,.45); }
.btn-reject{ border-color: rgba(255,255,255,.12); opacity:.9; }
.consent-hidden{ display:none !important; }
.consent-banner a{ color:#00ff99; text-decoration:none; border-bottom:1px dashed rgba(0,255,153,.45); }
.consent-banner a:hover{ border-bottom-color: rgba(0,170,255,.65); }

/* Responsive article container (matches the class used by PHP) */
.post{
  max-width: 72ch;
  margin: 2rem auto 0;
  font-size: clamp(15px, 2.3vw, 18px);
  line-height: 1.7;
  text-align: left;
  padding-inline: clamp(8px, 3.5vw, 0);
}

/* Big paragraph reflow: enable hyphenation + modern wrapping */
.center article p,
.center article li,
.center article blockquote,
.post p, .post li, .post blockquote{
  text-wrap: pretty;          /* better line breaks */
  overflow-wrap: anywhere;    /* break long tokens if needed */
  word-break: normal;         /* let wrap rules handle it */
  hyphens: auto;              /* enable hyphenation */
  -webkit-hyphens: auto;      /* iOS Safari */
}

/* Make sure nothing forces sideways scroll */
main, .center, .post, .post * { min-width: 0; }
.post, .post * { max-width: 100%; }
html, body { overflow-x: hidden; }

/* Code: wrap long lines (keeps layout stable on phones) */
.code-window pre,
.post pre{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-overflow-scrolling: touch;
}
.code-window code,
.post pre code{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tables scroll inside themselves, not the page */
.post table{
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.post th, .post td{ word-break: break-word; }

.post .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1rem 0
}
.post table.md-table{
  width:100%;
  border-collapse:collapse
}
.post table.md-table th,.post table.md-table td{
  border:1px solid rgba(255,255,255,.12);
  padding:.5rem .75rem;
  vertical-align:top
}
.post table.md-table thead th{
  background:rgba(255,255,255,.05);
  font-weight:600
}