/* ==============================
   FreeQRHub – Modern Teal + Purple
   Fully Responsive • No Overflow • Sticky CTA • Micro Animations
   + Breadcrumbs + TOC styling
   ============================== */

/* ---------- Root & Reset ---------- */
:root{
  --ink:#141414;
  --muted:#6b7280;
  --paper:#ffffff;
  --bg:#ffffff;
  --accent:#06b6d4;          /* Teal */
  --accent-2:#7c3aed;        /* Purple */
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --focus-ring:0 0 0 3px rgba(124,58,237,.25);
  --gradient:linear-gradient(135deg,var(--accent),var(--accent-2));
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter,Arial;
  overflow-x:hidden;
}
html{ -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Layout ---------- */
.wrap{ width:min(100%, 980px); margin-inline:auto; padding:clamp(16px,3vw,32px) }
header{
  display:grid; grid-template-columns:1fr; gap:14px; align-items:center; justify-items:center;
  margin-bottom:18px; text-align:center; min-height:56px;
}
h1{
  margin:0; font-size:clamp(22px,3.8vw,36px); letter-spacing:-.015em;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sub{ color:var(--muted); margin:6px 0 0; font-size:14px }
.card{
  background:var(--paper); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
}
.grid{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); align-items:start }
.row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px }

/* ---------- Header Nav ---------- */
header nav{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
header nav a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:15px;
  padding:8px 10px; border-radius:8px; transition:color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
header nav a:hover{ color:#fff; background:var(--accent) }
header nav a.active{ color:#fff; background:var(--accent-2) }
header nav a:focus-visible{ outline:0; box-shadow:var(--focus-ring) }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ padding:10px 14px }
.breadcrumbs ol{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.breadcrumbs li{ color:#475569; font-size:14px }
.breadcrumbs a{ color:#0f172a; text-decoration:none }
.breadcrumbs a:hover{ text-decoration:underline }
.breadcrumbs li+li::before{ content:"›"; margin-inline:6px; color:#cbd5e1 }

/* ---------- TOC ---------- */
.toc{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.toc strong{ margin-right:6px }
.toc a{ color:var(--accent-2); text-decoration:none; font-weight:600 }
.toc a:hover{ text-decoration:underline }

/* ---------- Form & Buttons ---------- */
label{ font-size:13px; color:var(--muted); display:block; margin:0 0 6px; font-weight:600 }

input[type="text"], input[type="url"], select, input[type="number"], input[type="color"]{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  background:#fff; color:var(--ink); min-height:44px;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:focus, select:focus{ border-color:var(--accent); box-shadow:var(--focus-ring) }
input::placeholder{ color:#9aa3af }
input, select, button{ font-size:16px; min-width:0 } /* iOS zoom guard */

button{
  padding:12px 16px; border:0; border-radius:12px;
  background:var(--gradient); color:#fff; font-weight:700; cursor:pointer;
  transition:transform .08s ease, box-shadow .15s ease, filter .15s ease;
  min-height:44px; line-height:1; letter-spacing:.01em;
}
button:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(124,58,237,.25) }
button:active{ transform:translateY(0); filter:brightness(.96) }
button:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; transform:none }
button.sec{ background:#111 }
button.ghost{ background:#fff; color:#111; border:1px solid var(--border) }
.btns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
button:focus-visible { outline:0; box-shadow: var(--focus-ring); }

/* ---------- QR Box ---------- */
.qrbox{
  display:flex; align-items:center; justify-content:center; min-height:320px;
  border:1px dashed var(--border); border-radius:12px; background:#fff; aspect-ratio:1/1; overflow:hidden;
}
.qrbox svg{ max-width:100%; height:auto; display:block; image-rendering:pixelated; }

/* ---------- Micro Animations ---------- */
.qr-appear { animation: qrFade .36s ease-out both }
@keyframes qrFade{ from{opacity:0;transform:scale(.98)} to{opacity:1;transform:scale(1)} }

/* ---------- Misc ---------- */
.note{ color:var(--muted); font-size:13px; margin-top:8px }
footer{ margin-top:28px; color:var(--muted); font-size:13px; text-align:center }
footer .links{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px }
footer .links a{ color:var(--accent-2); text-decoration:none }
footer .links a:hover{ text-decoration:underline }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; background:#f5f3ff; color:var(--accent-2); font-size:12px; margin-left:10px }

/* ---------- Consent Banner ---------- */
.cookie-banner{
  position:fixed; z-index:9999; left:50%; transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom));
  width:clamp(280px, 92vw, 980px);
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); padding:14px; display:none;
}
.cookie-banner p{ margin:0 0 10px; color:#334155; line-height:1.5 }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.cookie-actions button{
  padding:10px 14px; border-radius:10px; cursor:pointer; min-height:40px; font-weight:600;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cookie-actions .accept{ background:var(--accent); color:#fff; border:0 }
.cookie-actions .accept:hover{ filter:brightness(.95) }
.cookie-actions .deny, .cookie-actions .customize{ background:#f9fafb; color:#111827; border:1px solid #d1d5db }
.cookie-actions .deny:hover, .cookie-actions .customize:hover{ background:#e5e7eb }

/* ---------- Sticky CTA ---------- */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: 9998;
  padding: 10px clamp(12px, 4vw, 24px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 30%, rgba(255,255,255,1) 100%);
  display:flex; justify-content:center;
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){
  .sticky-cta{ backdrop-filter: saturate(1.2) blur(6px); -webkit-backdrop-filter: saturate(1.2) blur(6px); }
}
.sticky-cta button{ width:min(560px, 100%); border-radius:14px }
@media (min-width: 860px){ .sticky-cta{ display:none } }

/* ---------- Dark Mode ---------- */
html.theme-dark{
  --ink:#e7e7e7;
  --muted:#a1a1aa;
  --paper:#0f1115;
  --bg:#0b0d11;
  --border:#27272a;
  color-scheme:dark;
}
html.theme-dark body{ background:var(--bg); color:var(--ink) }
html.theme-dark .card{ background:var(--paper); border-color:#26272b; box-shadow:none }
html.theme-dark .qrbox{ background:#0b0d11; border-color:#3f3f46 }
html.theme-dark button.ghost{ background:transparent; color:#e7e7e7; border-color:#3f3f46 }
html.theme-dark footer .links a{ color:#e7e7e7 }
html.theme-dark header nav a{ color:#e7e7e7 }
html.theme-dark header nav a:hover{ background:var(--accent-2); color:#fff }
html.theme-dark .sticky-cta{
  background: linear-gradient(180deg, rgba(11,13,17,0) 0%, rgba(11,13,17,.85) 30%, rgba(11,13,17,1) 100%);
}

/* ---------- Print ---------- */
@media print{
  body{ background:#fff }
  .wrap{ max-width:none; padding:0 }
  header, .breadcrumbs, .toc, footer, .cookie-banner{ display:none!important }
  .card{ box-shadow:none; border:0; padding:0 }
  .qrbox{ border:0 }
}

/* ---------- Responsive Tweaks ---------- */
@media (max-width:800px){ .row{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:560px){
  .btns>button{ flex:1 1 160px }
  .card{ padding:14px }
}
@media (max-width:420px){
  .row{ grid-template-columns:1fr }
  header{ gap:10px }
}

/* ---------- Overflow Guards ---------- */
.wrap, .card, .grid, .row{ max-width:100% }
.grid, .row{ min-width:0 }
.row > *{ min-width:0 }
header > *{ min-width:0 }
img, svg, canvas, iframe{ max-width:100%; height:auto }
body{ overflow-wrap:anywhere; word-break:break-word; width:100% }

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

/* ---------- Mobile tap responsiveness ---------- */
button, .btns button { touch-action: manipulation; }

/* Crisper edges on some browsers */
.qrbox svg { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Prevent long selects/inputs from nudging layout on tiny phones */
.row > * { min-width: 0; }