/*
----------
Path: styles/theme.css

Shared styles used by EVERY page.
Specific page style pages are 
found in: styles/pages/ 


*****

AI Disclaimer

Vast majority of this site and pages was built by myself and no
course work pages were generated using AI. 

Things AI was used for; Redundant tasks, catching CSS/HTML errors, making fine tuned/minor adjustments to styles and elements on pages (If I wanted a button moved over a few pixels and just couldn't figure out how), checking links, and periodically reviewing my work upon request.

*****


***VARIABLES USED***
bg = Background; behind everything
surface = Cards, header, footer and shaded strips
text = Headings and Paragraphs
muted = Captions, Footer
border = Borders, Rules and window title bars
accent = Links and Buttons
accent-text = Text printed on a button
teal = ridge borders and main theme
red = hover color and secondary theme color
amber = Primary button and "in progress" accents
amber-text = Amber text that stays readable
on-amber = Text printed on an amber button
shadow = shadow under cards and buttons
dots = faint dot grid on the page background
scan = faint scanlines on cards, windows and title bars

@media (prefers-color-scheme: dark) = Dark Mode

Responsive reference: 
phone = under 700px; 1 col
tablet = 700px and up; 2 col
desktop = 1000px and up; sidebar (1/3) + main (2/3)

Guide
1. Variables
2. Basic page settings
3. headings, links, images
4. Layout
5. Header and Footer
6. Buttons
7. Small parts (labels, chips, icons, status)
8. Window frames and picture frames
9. Cards
10. Speech bubble and identity
11. Contact
12. Accessibility
13. Back link and assignment frame 
14. Page layout: sidebar + main


*/

/* --- 1. VARIABLES --- */

/* DEFAULT (light) */
:root {
  --bg: #ffffff;
  --surface: #f4f5f7;
  --text: #1a1c1e;
  --muted: #5c6166;
  --border: #dfe2e6;
  --accent: #3b6fe0;
  --accent-text: #ffffff;
  --teal: #0b7f88;
  --red: #c4271d;
  --amber: #f2a33a;
  --amber-text: #8a4b00;
  --on-amber: #1a1208;
  --shadow: #0000002e;

  /* texture: dot grid + scanlines */
  --dots: #00000014;
  --scan: #00000008;

}


/* DARK MODE */ 
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1e22;
    --surface: #262a2f;
    --text: #e6e8eb;
    --muted: #9aa1ab;
    --border: #3f464f;
    --accent: #e6e8eb;
    --accent-text: #1c1e22;
    --teal: #19d3dc;
    --red: #e8453c;
    --amber: #f2a33a;
    --amber-text: #f2a33a;
    --on-amber: #1a1208;
    --shadow: #0000008c;

    /* texture: dot grid + scanlines */
    --dots: #ffffff0f;
    --scan: #ffffff08;
  
  }

}

/* --- 2. BASIC PAGE SETTINGS --- */
* { 
  box-sizing: border-box; 
}


body {
  margin: 0;
  font-family: Atkinson Hyperlegible, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 1px, transparent 1px);
  background-size: 16px 16px; 
  color: var(--text);
}


/* --- 3. HEADINGS, LINKS, IMAGES --- */
h1,
h2,
h3 {
  margin: 0 0 12px;
  line-height: 1.2;
  font-family: "Jersey 10", "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;

}


h1 { 
  font-size: 52px; 

}

h2 { 
  font-size: 38px; 
  color: var(--teal);
}

h3 { 
  font-size: 30px;
}


a {
  color: var(--accent);

}


a:hover {
  color: var(--red);

}


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

}


@media (min-width: 700px) {
  h1 {
    font-size: 60px;
  }

  h2 {
    font-size: 44px;

  }

}



/* --- 4. LAYOUT --- */
.container {
  max-width: 1100px; 
  margin: 0 auto;
  padding: 0 20px;

}


.section {
  padding: 20px 0;

}

/* 
Default = 1 col
Media Queries below change row 2 and row 3 on wider screens
*/

.row {
  display: grid; 
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;

}


@media (min-width: 700px) {
  .row--2,
  .row--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 
Heading section at the top of a section
label + title on left, link on right
*/

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; 
  justify-content: space-between;
  gap: 8px 24px; 
  margin-bottom: 24px;

}


.section-head > div {
  display: flex; 
  flex-wrap: wrap;
  align-items: baseline; 
  gap: 6px 16px;

}


.section-head h1,
.section-head h2 {
  margin: 0;

}

.section-head a {
  font-weight: bold; 
  text-decoration: none;

}



/* --- 5. HEADER AND FOOTER --- */
.site-header, 
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  max-width: 1100px;
  margin: 16px auto;
  padding: 12px 14px;
  border: 4px ridge var(--teal);
  border-radius: 8px;
  background-color: var(--surface);

}


.site-header { 
  background-image: url("../assets/general_images/aurorabanner.png");
  background-size: cover;
  background-position: center top;

}


.site-title {
  display: block; 
  padding: 4px 12px;
  background: var(--surface);
  border: 3px ridge var(--teal);
  border-radius: 8px;

}


.site-title img {
  height: 64px; 
  width: auto;
  margin: 0;

}


.site-copy, 
.site-find {
  margin: 0; 
  color: var(--muted);
  font-size: 15px;

}


.site-nav ul {
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;

}


.site-nav a { 
  display: block; 
  padding: 6px 14px; 
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  border: 4px ridge var(--teal);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--shadow);

}


/* Hover = pressed halfway, click = pressed flat (same as .btn) */
.site-nav a:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow);

}


.site-nav a:active {
  transform: translate(4px, 4px);
  box-shadow: none;

}


.site-footer .site-nav a {
  padding: 4px 12px; 
  background: var(--bg);
  font-size: 14px;

}


.site-nav a[aria-current] {
  background: color-mix(in srgb, var(--surface) 70%, var(--muted));
  border-color: var(--muted);
  color: var(--muted);
  font-weight: bold;
  scale: 0.94;
  filter: grayscale(1);
  opacity: 0.7;
}

.site-footer .site-nav a[aria-current] {
  background: color-mix(in srgb, var(--surface) 70%, var(--muted));
}

.site-nav a[aria-current]:hover {
  border-color: var(--red);
  color: var(--red);
  filter: none;
  opacity: 1;
}


/* Phone: header stacks, nav becomes a column */
@media (max-width: 699px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header .site-nav ul {
    flex-direction: column;
    gap: 10px;
  }
}



/* --- 6. BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 3px ridge var(--teal);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  font-weight: bold; 
  box-shadow: 4px 4px 0 var(--shadow);

}


/* Hover = pressed halfway, click = pressed flat */
.btn:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--shadow);

}


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

}


.btn--primary {
  background: var(--amber);
  color: var(--on-amber);
  border-color: var(--on-amber);

}


.btn--primary:hover {
  color: var(--on-amber);

}


.btn--outline {
  background: var(--bg);

}




/* --- 7. SMALL PARTS --- */

/* Numbered label above a section title: "01 / Featured" */
.label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 8px;

}


/* Chips: tiny tags like "HTML" or "In progress" */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}


.chip {
  padding: 1px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
  border: 2px solid var(--border);
  border-radius: 4px;
}


.chip--amber {
  color: var(--amber-text);
  border-color: var(--amber-text);
}


/* Pixel icons are inline SVGs that take the text color */
.icon {
  display: block;
  flex: none;
  shape-rendering: crispEdges;
}


/* Row of icon + text links (GitHub, Email, Resume) */
.iconlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}


.iconlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  border: 2px ridge var(--teal);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--shadow);
}


.iconlink .icon {
  color: var(--accent);
}


/* Hover = pressed halfway, click = pressed flat (same as .btn) */
.iconlink:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}


.iconlink:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}


/* Small square + text: "Currently building..." */
.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}


.status::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--amber);
}



/* --- 8. WINDOW FRAMES AND PICTURE FRAMES --- */

/* Window: a box with a title bar and two little buttons */
.window {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 3px ridge var(--teal);
  border-radius: 8px;
}


.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background-color: var(--border);
  background-image: repeating-linear-gradient(0deg, var(--scan) 0 2px, transparent 2px 6px);
  border-bottom: 3px ridge var(--teal);
}


.window-title {
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}


.window-buttons {
  display: flex;
  flex: none;
  gap: 5px;
}


.window-buttons span {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--muted);
}

.window-buttons span:last-child {
  background: var(--muted);
}

.window img {
  width: 100%;
  height: auto;
}


/* Thumbnail window: always 4:3 so cards line up */
.thumb img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


/* Picture frame: a plain framed picture (no title bar) */
.frame {
  min-width: 0;
  padding: 12px;
  background: var(--surface);
  border: 4px ridge var(--teal);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--shadow);
}


.frame img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}


/* --- 9. CARDS --- */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  background: var(--surface);
  border: 3px ridge var(--teal);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--shadow);
}

/* Shared depth feedback for panels and their smaller visual pieces. */
:is(.site-header, .site-footer, .card, .hero-text, .window, .frame, .bubble, .avatar,
    .contact-box, .reportcard, .ph, .assignment-frame, .chip,
    .field input, .field textarea) {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.site-title {
  transition: scale 160ms ease, filter 160ms ease;
  transform-origin: center;
}

@media (hover: hover) {
  :is(.site-header, .site-footer, .card, .hero-text, .window, .frame, .bubble, .avatar,
      .contact-box, .reportcard, .ph, .assignment-frame, .chip,
      .field input, .field textarea):hover {
    transform: scale(1.012);
    box-shadow: 2px 3px 6px color-mix(in srgb, var(--shadow) 35%, transparent);
  }

  :is(.card, .hero-text, .frame, .bubble):hover {
    box-shadow: 7px 7px 0 var(--shadow);
  }

  .site-title:hover {
    scale: 1.012;
    filter: drop-shadow(1px 2px 3px color-mix(in srgb, var(--shadow) 35%, transparent));
  }

  :is(.site-nav a, .btn, .iconlink):hover {
    transform: none;
    box-shadow: 5px 5px 0 var(--shadow);
  }

  .iconlink:hover {
    box-shadow: 4px 4px 0 var(--shadow);
  }
}

.site-title:active {
  scale: 0.98;
}

:is(.site-nav a, .btn, .iconlink):active {
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.site-header, .site-footer, .card, .hero-text, .window, .frame, .bubble, .avatar,
      .contact-box, .reportcard, .ph, .assignment-frame, .chip,
      .field input, .field textarea, .site-title) {
    transition: none;
  }

  :is(.site-header, .site-footer, .card, .hero-text, .window, .frame, .bubble, .avatar,
      .contact-box, .reportcard, .ph, .assignment-frame, .chip,
      .field input, .field textarea):hover {
    transform: none;
  }

  .site-title:hover {
    scale: none;
  }
}


/* Texture: faint scanlines on surfaces (bubble + title bars have their own) */
.card, 
.window,
.contact-box {
  background-image: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 4px);
}

.card h3,
.card h2 {
  margin: 0;
}


.card p {
  margin: 0;
  color: var(--muted);
}

/* Project card: big window picture on top (16:9) */
.card--project .window img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


.card--project h3 {
  font-size: 34px;
}

/* Post card: small thumbnail on the left, text on the right */
.card--post {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 14px 18px;
  padding: 16px;
}


.card--post p {
  font-size: 15px;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  min-width: 0;
}


/* Numbered roadmap list inside a project card */
.roadmap {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.roadmap li {
  margin-bottom: 6px;
}

.roadmap strong {
  color: var(--text);
}



/* "Read post →" and "Live ↗" links at the bottom of a card */
.card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: auto;
  padding-top: 4px;
}

.card-links a {
  font-weight: bold;
  text-decoration: none;
}

@media (max-width: 520px) {
  .card--post {
    grid-template-columns: minmax(0, 1fr);
  }
}



/* --- 10. SPEECH BUBBLE AND IDENTITY --- */
.bubble {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 36px;
  padding: 18px 26px 20px;
  background-color: var(--border);
  background-image: repeating-linear-gradient(0deg, var(--scan) 0 2px, transparent 2px 6px);
  border: 3px ridge var(--teal);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--shadow);
}

.bubble h1 {
  margin: 0;
  font-size: 44px;
  line-height: 1;
}


/* pixel bubble "tail"  */
.bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 75px;
  width: 30px;
  height: 35px;
  margin-top: 0;
  background: var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 80% 20%, 80% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 80%, 20% 80%, 20% 100%, 0 100%);
}

@media (min-width: 700px) {
  .bubble h1 {
    font-size: 64px;
  }
}

@media (min-width: 1000px) {
  .bubble h1 {
    font-size: 76px;
  }
}


.identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.avatar {
  display: flex;
  padding: 6px;
  background: var(--bg);
  color: var(--accent);
  border: 3px ridge var(--teal);
  border-radius: 8px;
}

.identity-name {
  display: block;
  font-family: "Jersey 10", "Atkinson Hyperlegible", sans-serif;
  font-size: 34px;
  line-height: 1.05;
}

.identity-role {
  display: block;
  color: var(--muted);
}



/* --- 11. CONTACT BOX --- */
.contact-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 22px 26px;
  background-color: var(--surface);
  border: 6px ridge var(--teal);
  border-radius: 8px;
}

.contact-box-text {
  display: flex;
  flex: 1 1 320px;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  color: var(--accent);
}

.contact-box-text .icon {
  margin-top: 10px;
}

.contact-box h2 {
  margin: 0 0 6px;
  font-size: 38px;
  color: var(--text);
}

.contact-box p {
  margin: 0;
  color: var(--muted);
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


.contact-buttons .icon {
  color: var(--accent);
}


.contact-buttons .btn--primary .icon {
  color: var(--on-amber);
}


/* On small phones shrink contact box; too big */
@media (max-width: 520px) {
  .contact-box-text > .icon {
    display: none;
  }
}


/* Subtle hover and press feedback for links and buttons */
:where(a:not(.site-title)) {
  display: inline-block;
  transform-origin: left center;
}

:where(a:not(.site-title), button) {
  transition: scale 120ms ease, box-shadow 160ms ease;
}

:where(.site-nav a, .btn, .iconlink, button) {
  transform-origin: center;
}

@media (hover: hover) {
  :where(a:not(.site-title), button):hover {
    scale: 1.015;
  }

  :is(.site-nav a, .btn, .iconlink, button):hover {
    scale: 1.04;
  }
}

:where(a:not(.site-title), button):active {
  scale: 0.98;
}

:is(.site-nav a, .btn, .iconlink, button):active {
  scale: 0.98;
}

@media (prefers-reduced-motion: reduce) {
  :where(a:not(.site-title), button) {
    transition: none;
  }
}

/* --- 12. ACCESSIBILITY --- */
a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}



/* --- 13. BACK LINK AND ASSIGNMENT FRAME --- */
/* "← Back to Blog" link */
.back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-weight: bold;
  text-decoration: none;
}


.assignment-frame {
  padding: 20px;
  background: var(--bg);
  border: 3px ridge var(--teal);
  border-radius: 8px;
}



/* --- 14. PAGE LAYOUT: SIDEBAR 1/3 + MAIN 2/3 --- */
/* on phone = stack, desktop = side by side */
.page-layout {
  display: grid; 
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 8px 0;

}


.page-main {
  display: flex;
  flex-direction: column;
  gap: 24px; 
  min-width: 0;

}


.sidebar h1 {
  font-size: 40px;

}


.sidebar ul {
  margin: 0;
  padding-left: 20px; 

}


.sidebar li {
  margin-bottom: 6px; 

}


@media (min-width: 1000px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: stretch;

  }

}