/* ========================================
   BurNote — Soft Neubrutalism Design System
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --c-bg: #F5F0EB;
  --c-surface: #FFFFFF;
  --c-text: #2D2B2A;
  --c-text-dim: #6B6966;
  --c-border: #2D2B2A;
  --c-accent: #D8C9F5;
  /* lavender */
  --c-peach: #FFCDB2;
  --c-mint: #B5EAD7;
  --c-sky: #A2D2FF;
  --c-rose: #FFB7C5;
  --c-yellow: #FFE066;

  /* Typography */
  --f-heading: 'Space Grotesk', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;

  /* Sizes */
  --radius: 14px;
  --border-w: 2.5px;

  /* Shadows — Neubrutalism signature */
  --shadow: 5px 5px 0 var(--c-border);
  --shadow-sm: 3px 3px 0 var(--c-border);
  --shadow-hover: 2px 2px 0 var(--c-border);
  --shadow-lg: 8px 8px 0 var(--c-border);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.7;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--f-heading);
  line-height: 1.2;
  font-weight: 700;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Utility Classes ---------- */
.container {
  width: min(1120px, 100% - 2rem);
  margin-inline: auto;
}

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

/* ---------- Card Base ---------- */
.nb-card {
  background: var(--c-surface);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.nb-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lg);
}

.nb-card--flat:hover {
  transform: none;
  box-shadow: var(--shadow);
}

/* ---------- Buttons ---------- */
.nb-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: .75rem 1.75rem;
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  background: var(--c-accent);
  color: var(--c-text);
  text-decoration: none;
}

.nb-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow);
}

.nb-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.nb-btn--peach {
  background: var(--c-peach);
}

.nb-btn--mint {
  background: var(--c-mint);
}

.nb-btn--sky {
  background: var(--c-sky);
}

.nb-btn--rose {
  background: var(--c-rose);
}

.nb-btn--yellow {
  background: var(--c-yellow);
}

.nb-btn--large {
  font-size: 1.15rem;
  padding: 1rem 2.25rem;
}

/* ---------- Inputs ---------- */
.nb-input,
.nb-textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  padding: .85rem 1rem;
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--c-surface);
  color: var(--c-text);
  transition: box-shadow .15s ease, border-color .15s ease;
  outline: none;
}

.nb-input:focus,
.nb-textarea:focus {
  box-shadow: var(--shadow);
  border-color: #8B72C8;
}

.nb-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
}

/* ---------- Badge ---------- */
.nb-badge {
  display: inline-block;
  font-family: var(--f-heading);
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .7rem;
  border: 2px solid var(--c-border);
  border-radius: 100px;
  background: var(--c-yellow);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- Section Spacing ---------- */
.section {
  padding: 5rem 0;
}

.section--alt {
  background: var(--c-surface);
  border-top: var(--border-w) solid var(--c-border);
  border-bottom: var(--border-w) solid var(--c-border);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .section {
    padding: 3rem 0;
  }

  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }
}

/* ---------- Animations ---------- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fade-in-up .5s ease both;
}

.animate-in-delay-1 {
  animation-delay: .1s;
}

.animate-in-delay-2 {
  animation-delay: .2s;
}

.animate-in-delay-3 {
  animation-delay: .3s;
}

.animate-in-delay-4 {
  animation-delay: .4s;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  border-bottom: var(--border-w) solid var(--c-border);
  padding: .85rem 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__logo {
  font-family: var(--f-heading);
  font-weight: 700;
  font-size: 1.45rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.site-header__logo span {
  background: var(--c-peach);
  border: 2px solid var(--c-border);
  border-radius: 8px;
  padding: .15rem .45rem;
  font-size: 1.1rem;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-header__link {
  font-family: var(--f-heading);
  font-weight: 500;
  font-size: .95rem;
  padding: .35rem .75rem;
  border-radius: 8px;
  transition: background .15s ease;
}

.site-header__link:hover {
  background: var(--c-mint);
}

.site-header__link--active {
  background: var(--c-accent);
  border: 2px solid var(--c-border);
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto;
  background: var(--c-text);
  color: var(--c-bg);
  padding: 2.5rem 0 1.5rem;
  border-top: var(--border-w) solid var(--c-border);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-footer__brand {
  font-family: var(--f-heading);
  font-weight: 700;
  font-size: 1.15rem;
}

.site-footer__links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
}

.site-footer__links a {
  opacity: .75;
  transition: opacity .15s ease;
  font-size: .9rem;
}

.site-footer__links a:hover {
  opacity: 1;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(245, 240, 235, .12);
  font-size: .82rem;
  opacity: .6;
}

.site-footer__legal {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__legal li {
  list-style-type: none;
}

.site-footer__legal a {
  opacity: .85;
  transition: opacity .15s ease;
}

.site-footer__legal a:hover {
  opacity: 1;
}

/* ---------- Hero ---------- */
.hero {
  padding: 5rem 0 3rem;
  text-align: center;
}

.hero__tagline {
  display: inline-block;
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: 3.2rem;
  max-width: 720px;
  margin: 0 auto .75rem;
}

.hero h1 .highlight {
  background: var(--c-yellow);
  padding: 0 .35rem;
  border-radius: 6px;
  border-bottom: 3px solid var(--c-border);
}

.hero__subtitle {
  font-size: 1.15rem;
  color: var(--c-text-dim);
  max-width: 560px;
  margin: 0 auto 2rem;
}

/* ---------- Feature Grid ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  padding: 2rem;
}

.feature-card__icon {
  font-size: 2rem;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-w) solid var(--c-border);
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.feature-card__title {
  font-size: 1.15rem;
  margin-bottom: .5rem;
}

.feature-card__desc {
  color: var(--c-text-dim);
  font-size: .95rem;
  line-height: 1.6;
}

/* ---------- How It Works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}

.step {
  padding: 2rem;
  position: relative;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  font-family: var(--f-heading);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--c-accent);
  line-height: 1;
  margin-bottom: .75rem;
  display: block;
}

.step__title {
  font-size: 1.1rem;
  margin-bottom: .4rem;
}

.step__desc {
  color: var(--c-text-dim);
  font-size: .9rem;
}

/* ---------- Note Form (Create) ---------- */
.create-section {
  max-width: 640px;
  margin: 0 auto;
}

.create-section h2 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: .5rem;
}

.create-section__sub {
  text-align: center;
  color: var(--c-text-dim);
  margin-bottom: 1.5rem;
}

.create-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.create-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}

.create-form__hint {
  font-size: .82rem;
  color: var(--c-text-dim);
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* ---------- Note View ---------- */
.note-view {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}

.note-view__card {
  max-width: 620px;
  width: 100%;
  padding: 2.5rem;
  text-align: center;
}

.note-view__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.note-view__title {
  font-size: 1.6rem;
  margin-bottom: .75rem;
}

.note-view__content {
  background: var(--c-bg);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  font-family: 'Courier New', monospace;
  font-size: .95rem;
  line-height: 1.7;
  text-align: left;
  word-break: break-word;
  white-space: pre-wrap;
  margin-bottom: 1.5rem;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .05);
}

.note-view__destroyed {
  color: var(--c-text-dim);
  font-size: .9rem;
}

.note-view__error {
  color: #c0392b;
}

/* ---------- Link Display ---------- */
.link-display {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 0;
}

.link-display__card {
  padding: 2.5rem;
  text-align: center;
}

.link-display__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.link-display__title {
  font-size: 1.6rem;
  margin-bottom: .5rem;
}

.link-display__desc {
  color: var(--c-text-dim);
  margin-bottom: 1.5rem;
}

.link-display__url {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.link-display__url input {
  flex: 1;
}

.link-display__warning {
  background: #FFF3CD;
  border: 2px solid var(--c-border);
  border-radius: 10px;
  padding: 1rem;
  font-size: .88rem;
  color: #856404;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  text-align: left;
}

/* ---------- Blog ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.blog-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-card__color-bar {
  height: 8px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.blog-card__body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__tag {
  margin-bottom: .75rem;
}

.blog-card__title {
  font-size: 1.2rem;
  margin-bottom: .5rem;
}

.blog-card__excerpt {
  color: var(--c-text-dim);
  font-size: .9rem;
  line-height: 1.6;
  flex: 1;
}

.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1.5px dashed #ddd;
  font-size: .85rem;
  color: var(--c-text-dim);
}

.blog-card__read-more {
  font-family: var(--f-heading);
  font-weight: 600;
  color: var(--c-text);
  transition: color .15s ease;
}

.blog-card__read-more:hover {
  color: #8B72C8;
}

/* Blog Post */
.blog-post {
  max-width: 740px;
  margin: 0 auto;
  padding: 3rem 0;
}

.blog-post__header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.blog-post__title {
  font-size: 2.2rem;
  margin: .75rem 0;
}

.blog-post__meta {
  color: var(--c-text-dim);
  font-size: .9rem;
}

.blog-post__content {
  font-size: 1.05rem;
  line-height: 1.85;
}

.blog-post__content h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
}

.blog-post__content h3 {
  font-size: 1.2rem;
  margin: 2rem 0 .75rem;
}

.blog-post__content p {
  margin-bottom: 1.25rem;
}

.blog-post__content ul,
.blog-post__content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.blog-post__content li {
  margin-bottom: .5rem;
}

.blog-post__content strong {
  font-weight: 600;
}

.blog-post__content blockquote {
  border-left: 4px solid var(--c-accent);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(216, 201, 245, .12);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--c-text-dim);
}

.blog-post__content code {
  background: rgba(216, 201, 245, .2);
  padding: .15rem .4rem;
  border-radius: 4px;
  font-size: .9em;
}

.blog-post__content pre {
  background: var(--c-text);
  color: var(--c-bg);
  padding: 1.25rem;
  border-radius: var(--radius);
  border: var(--border-w) solid var(--c-border);
  overflow-x: auto;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.blog-post__content pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* ---------- Loading / Status ---------- */
.loading-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Scroll Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Legal Pages ---------- */
.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.legal-page__header {
  text-align: center;
  margin-bottom: 3rem;
}

.legal-page__title {
  font-size: 2.4rem;
  margin: .75rem 0;
}

.legal-page__meta {
  color: var(--c-text-dim);
  font-size: .9rem;
}

.legal-page__content {
  font-size: 1.02rem;
  line-height: 1.85;
}

.legal-page__content h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--c-accent);
}

.legal-page__content h3 {
  font-size: 1.15rem;
  margin: 1.75rem 0 .5rem;
}

.legal-page__content p {
  margin-bottom: 1rem;
}

.legal-page__content ul,
.legal-page__content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.legal-page__content li {
  margin-bottom: .5rem;
}

.legal-page__content strong {
  font-weight: 600;
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--c-accent);
  color: var(--c-text);
}

/* ---------- Mobile Footer ---------- */
@media (max-width: 768px) {
  .site-footer__inner {
    flex-direction: column;
    text-align: center;
  }

  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}