:root {
  --accent-green: rgb(181, 222, 181);
  --accent-purple: #d4bfff;
  --black: #111;
  --white: #ddd;
  --accent-font: "Trona";
  --header-height: 150px;
  --sidebar-width: 250px;
  --metadata-width: 270px;

  --size-step-0: clamp(1.0925rem, 0.95rem + 0.25vw, 1.125rem); /* ~17px min */
  --size-step-1: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem); /* ~20–24px */
  --size-step-2: clamp(1.5rem, 1.3rem + 0.5vw, 1.875rem); /* ~24–30px */
  --size-step-3: clamp(1.875rem, 1.6rem + 0.6vw, 2.25rem); /* ~30–36px */
  --size-step-4: clamp(2.25rem, 2rem + 0.75vw, 2.75rem); /* ~36–44px */
  --size-step-5: clamp(2.75rem, 2.4rem + 0.9vw, 3.5rem); /* ~44–56px */
}

/* ===== FONTS ==== */

@font-face {
  font-family: "Trona";
  src: url("/fonts/trona-regular.otf") format("opentype");
}
@font-face {
  font-family: "PP-Neue-Montreal";
  src: url("/fonts/PP_Neue_Montreal_Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "PP-Neue-Montreal";
  src: url("/fonts/PP_Neue_Montreal_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "PP-Neue-Montreal";
  src: url("/fonts/PP_Neue_Montreal_Italic.otf") format("opentype");
  font-style: italic;
}
@font-face {
  font-family: "PP-Neue-Montreal";
  src: url("/fonts/PP_Neue_Montreal_SemiBoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  background-color: var(--black);
  font-family: "PP-Neue-Montreal", sans-serif;
  font-size: var(--size-step-0);
  color: var(--white);
  width: 100%;
}

/* ===== TEXT FORMATTING ==== */

h1 {
  font-size: var(--size-step-4);
  font-family: var(--accent-font);
  color: var(--accent-green);
}

h2 {
  font-size: var(--size-step-3);
  font-family: var(--accent-font);
  color: var(--accent-purple);
}

h3 {
  font-size: var(--size-step-2);
  font-family: var(--accent-font);
  color: var(--accent-green);
}

h4 {
  font-size: var(--size-step-1);
  font-family: var(--accent-font);
  color: var(--accent-purple);
}

/* adjust for fixed header */
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: calc(var(--header-height) + 10px);
}

p,
li {
  font-size: var(--size-step-0);
}

p a,
li a {
  color: var(--accent-green);
}

em,
i {
  font-style: italic;
}

strong {
  color: #bbb;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding-left: 0;
}

ul[role="list"] li a,
ul[role="list"] li a strong {
  color: var(--accent-green) !important;
}

ul[role="list"] li {
  padding-bottom: 20px;
}

/* for link legibility */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

.social {
  fill: var(--white);
  width: 35px;
}

/* ===== LAYOUT ===== */

.container {
  height: 100vh;
  display: grid;
  background-color: var(--black);
  grid-template-columns: var(--sidebar-width) 1fr var(--metadata-width);
  grid-template-rows: var(--header-height) 1fr;
}

.withMetadata {
  grid-template-areas:
    "header header header"
    "sidebar main metadata"
    "footer footer footer";
}

.withoutMetadata {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

/* header */

.header {
  grid-area: header;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--black);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to top, var(--white), transparent);
}
.header .site-name {
  font-family: "Gothic War";
  font-size: var(--size-step-5);
  letter-spacing: 0.08em;
  margin: 0 auto;
}

.header .site-name a {
  text-decoration: none;
  color: var(--accent-purple);
  text-shadow: 1px 3px 1px var(--accent-green);
}

.site-name img {
  max-width: 500px;
  height: auto;
}

.header #menu-toggle {
  background: none;
  border: none;
  font-size: 2.4rem;
  cursor: pointer;
  color: var(--white);
  display: none;
}

/* sidebar */
.sidebar {
  grid-area: sidebar;
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: #111;
  overflow-y: auto;
  transition: transform 0.3s ease;
  transform: translateX(0);
}

.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='100%25' viewBox='0 0 30 800' preserveAspectRatio='none'%3E%3Cg stroke='%23dddddd' stroke-width='1'%3E%3Cline x1='25' y1='0' x2='25' y2='800'/%3E%3Ccircle cx='25' cy='50' r='2'/%3E%3Cpath d='M20 50 H30 M25 45 V55'/%3E%3Ccircle cx='25' cy='150' r='2'/%3E%3Cpath d='M20 150 H30 M25 145 V155'/%3E%3Ccircle cx='25' cy='250' r='2'/%3E%3Cpath d='M20 250 H30 M25 245 V255'/%3E%3Ccircle cx='25' cy='350' r='2'/%3E%3Cpath d='M20 350 H30 M25 345 V355'/%3E%3Ccircle cx='25' cy='450' r='2'/%3E%3Cpath d='M20 450 H30 M25 445 V455'/%3E%3Ccircle cx='25' cy='550' r='2'/%3E%3Cpath d='M20 550 H30 M25 545 V555'/%3E%3Ccircle cx='25' cy='650' r='2'/%3E%3Cpath d='M20 650 H30 M25 645 V655'/%3E%3Ccircle cx='25' cy='750' r='2'/%3E%3Cpath d='M20 750 H30 M25 745 V755'/%3E%3C/g%3E%3C/svg%3E")
    no-repeat right top;
  background-size: 100% 100%;
}

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

.sidebar nav ul li a {
  text-decoration: none;
  color: var(--accent-purple);
  font-family: var(--accent-font);
  font-size: var(--size-step-2);
}

/* main */

.main-content {
  grid-area: main;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 800px;
  min-width: 320px;
  padding: 2em;
  margin: 0 auto;
}

/* right sidebar for posts */
.metadata {
  grid-area: metadata;
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  width: var(--metadata-width);
  background-color: var(--black);
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.3s ease;
  padding-top: 40px;
  z-index: 999;
}

.metadata > div {
  padding-left: 40px;
}

.metadata hr {
  margin-left: 22px;
}

.metadata::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='100%25' viewBox='0 0 30 800' preserveAspectRatio='none'%3E%3Cg stroke='%23dddddd' stroke-width='1'%3E%3Cline x1='25' y1='0' x2='25' y2='800'/%3E%3Ccircle cx='25' cy='50' r='2'/%3E%3Cpath d='M20 50 H30 M25 45 V55'/%3E%3Ccircle cx='25' cy='150' r='2'/%3E%3Cpath d='M20 150 H30 M25 145 V155'/%3E%3Ccircle cx='25' cy='250' r='2'/%3E%3Cpath d='M20 250 H30 M25 245 V255'/%3E%3Ccircle cx='25' cy='350' r='2'/%3E%3Cpath d='M20 350 H30 M25 345 V355'/%3E%3Ccircle cx='25' cy='450' r='2'/%3E%3Cpath d='M20 450 H30 M25 445 V455'/%3E%3Ccircle cx='25' cy='550' r='2'/%3E%3Cpath d='M20 550 H30 M25 545 V555'/%3E%3Ccircle cx='25' cy='650' r='2'/%3E%3Cpath d='M20 650 H30 M25 645 V655'/%3E%3Ccircle cx='25' cy='750' r='2'/%3E%3Cpath d='M20 750 H30 M25 745 V755'/%3E%3C/g%3E%3C/svg%3E")
    no-repeat right top;
  background-size: 100% 100%;
}

.rss-container {
  display: flex;
  align-items: center;
  gap: 20px;
}
.rss {
  fill: white;
}

/* footer */
.footer {
  grid-area: footer;
  background-color: #111;
  position: relative;
}

/* .footer::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
} */

/* ==== SMALL SCREENS === */

@media (max-width: 1250px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) 1fr auto;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }

  .header #menu-toggle {
    display: block;
  }

  .metadata {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: var(--metadata-width);
    height: calc(100vh - var(--header-height));
    pointer-events: none;
    opacity: 1;
    grid-area: unset;
    transition: transform 0.3s ease;
    transform: translateX(100%);
  }

  .sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 180px;
    height: calc(100vh - 50px);
    opacity: 1;
    grid-area: unset;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
  }

  .sidebar-open .sidebar {
    transform: translateX(0); /* slide it into view */
  }
}

/* ===== BLOG ===== */

/* table of contents */

ul.toc {
  padding-left: 3px;
}

.toc ul ul {
  padding-left: 10px;
}

.toc ul ul li a {
  color: var(--accent-green);
}

.toc,
.toc ul {
  list-style-type: none;
}

ul.toc li {
  margin-left: 0;
}

ul.toc a {
  text-decoration: none;
  font-size: 0.9em;
  color: var(--accent-purple);
}

/* ===== GUIDES ===== */

/* right sidebar */

.title p {
  font-size: 1.5rem;
  font-family: var(--accent-font);
  margin: 0;
}

.section.odd .title {
  color: var(--accent-green);
}

.section.even .title {
  color: var(--accent-purple);
}

.title p .topics p {
  margin: 0;
  padding-bottom: 15px;
}

/* tag styling */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tag a {
  font-size: 12px;
  border: 1px solid var(--white);
  padding: 5px 5px 5px 5px;
  border-radius: 5px;
  color: var(--white);
  text-decoration: none;
  background-color: #000;
  font-weight: 600;
}
.tag:nth-of-type(odd) a {
  border: 1px solid var(--accent-purple);
}
.tag:nth-of-type(even) a {
  border: 1px solid var(--accent-green);
}

/* tags pages */
.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.tag-tile {
  display: block;
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 8px;
  background-color: #1a1a1a;
  text-decoration: none;
  transition: background 0.3s ease;
}

.tag-grid > .tag-tile:nth-child(odd) h2 {
  color: var(--accent-green);
}

.tag-grid > .tag-tile:nth-child(even) h2 {
  color: var(--accent-purple);
}

.tag-tile:hover {
  background-color: #222;
}

.tag-tile h2 {
  margin: 0;
  font-size: 1.2rem;
  font-family: var(--accent-font);
}

.tag-tile p {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--white);
}

/* code editor stuff */

:global(pre.astro-code) {
  background: #282a36; /* Dracula base */
  color: #f8f8f2;
  padding: 1.2rem;
  overflow-x: auto;
  border-radius: 6px;
  font-family: "Fira Code", monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 2rem 0;
}

:global(pre.astro-code) {
  white-space: pre-wrap; /* Allows wrapping */
}

/* Ensure lines are block elements */
:global(pre.astro-code .line) {
  display: block;
  white-space: pre;
}

/* Token styles — manually mapped for Dracula */
:global(pre.astro-code .token.comment) {
  color: #6272a4;
  font-style: italic;
}
:global(pre.astro-code .token.string) {
  color: #f1fa8c;
}
:global(pre.astro-code .token.number) {
  color: #bd93f9;
}
:global(pre.astro-code .token.keyword) {
  color: #ff79c6;
}
:global(pre.astro-code .token.function) {
  color: #50fa7b;
}
:global(pre.astro-code .token.class-name) {
  color: #8be9fd;
}
:global(pre.astro-code .token.tag) {
  color: #ff79c6;
}
:global(pre.astro-code .token.attr-name) {
  color: #50fa7b;
}
:global(pre.astro-code .token.operator) {
  color: #ffb86c;
}
code {
  color: var(--accent-green);
  border-radius: 4px;
  font-size: 0.9em;
  font-family: "Fira Code", monospace;
}
.astro-code {
  padding: 30px;
  font-size: smaller;
}

@media (max-width: 600px) {
  p,
  li {
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* Keep baseline */
  }

  .site-name img {
    max-width: 300px !important;
    height: auto;
  }
  .rose {
    width: 150px !important;
    height: auto;
  }
}

/* Accessibility - Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}