/* CSS Reset and Box Model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Your custom light mode color palette */
:root {
  /* Background colors - Light mode */
  --bg-primary: #fbf1c7;
  /* bg - Light cream background */
  --bg-0-hard: #f9f5d7;
  /* bg0_h - Hardest background */
  --bg-0: #fbf1c7;
  /* bg0 - Main background */
  --bg-1: #ebdbb2;
  /* bg1 - Slightly darker background */
  --bg-2: #d5c4a1;
  /* bg2 - Card/section backgrounds */
  --bg-3: #bdae93;
  /* bg3 - Border/separator color */
  --bg-4: #a89984;
  /* bg4 - Inactive elements */

  /* Background colors - Dark mode (for future use) */
  --bg-0-soft: #f2e5bc;
  /* bg0_s - Soft background variant */

  /* Foreground colors - Light mode */
  --fg-0: #282828;
  /* fg0 - Primary text color */
  --fg-1: #3c3836;
  /* fg1 - Secondary text */
  --fg-2: #504945;
  /* fg2 - Tertiary text - navigation, descriptions */
  --fg-3: #665c54;
  /* fg3 - Muted text */
  --fg-4: #7c6f64;
  /* fg4 - Most muted text */

  /* Accent colors - Main palette */
  --red: #cc241d;
  /* red - Errors, alerts, danger */
  --red-dark: #9d0006;
  /* red (darker) - Dark red variant */
  --green: #98971a;
  /* green - Success, positive actions */
  --green-dark: #79740e;
  /* green (darker) - Dark green variant */
  --yellow: #d79921;
  /* yellow - Warnings, highlights */
  --yellow-dark: #b57614;
  /* yellow (darker) - Dark yellow variant */
  --blue: #458588;
  /* blue - Links, navigation, brand color */
  --blue-dark: #076678;
  /* blue (darker) - Dark blue variant */
  --purple: #b16286;
  /* purple - Special elements, accents */
  --purple-dark: #8f3f71;
  /* purple (darker) - Dark purple variant */
  --aqua: #689d6a;
  /* aqua - Info, secondary brand */
  --aqua-dark: #427b58;
  /* aqua (darker) - Dark aqua variant */
  --orange: #d65d0e;
  /* orange - Call-to-action, emphasis */
  --orange-dark: #af3a03;
  /* orange (darker) - Dark orange variant */
  --gray: #928374;
  /* gray - Neutral elements */
}

html {
  font-size: 18px;
  line-height: 23px;
  height: 100%;
}

body {
  font-family: 'Palatino', 'Times New Roman', serif;
  font-size: 1em;
  line-height: 1.278em;
  max-width: 740px;
  height: 100%;
  margin: auto;
  background-color: var(--bg-primary);
  color: var(--fg-0);
  padding: 1rem;
}

/* Responsive padding for different screen sizes */
@media (min-width: 768px) {
  body {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  body {
    padding: 2rem 1rem;
  }
}

/* Content headings - NOT for the main title */
h2 {
  font-size: 2.611em;
  line-height: 1.468em;
  margin-top: 0.489em;
  margin-bottom: 0.489em;
  color: var(--fg-0);
}

h3 {
  font-size: 1.611em;
  line-height: 1.586em;
  margin-top: 0.793em;
  margin-bottom: 0;
  color: var(--blue);
}

h4,
h5 {
  font-size: 1em;
  line-height: 1.278em;
  margin-top: 1.278em;
  margin-bottom: 0;
  color: var(--fg-0);
}

p,
ul,
ol,
pre,
table,
blockquote {
  margin-top: 0;
  margin-bottom: 1.278em;
  color: var(--fg-0);
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

/* Alignment helpers */
hr {
  border: 1px solid;
  border-color: var(--bg-3);
}

a,
b,
i,
strong,
em,
small,
code {
  line-height: 0;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Links using your palette */
a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Header and navigation styles */
header {
  text-align: center;
}

header h1 {
  display: inline;
  color: var(--blue);
  margin: 0;
  font-size: 3.125rem;
  font-weight: bold;
}

/* Responsive font sizing to prevent overflow */
@media (max-width: 480px) {
  header h1 {
    font-size: 2.188rem;
  }
}

@media (max-width: 360px) {
  header h1 {
    font-size: 1.75rem;
  }
}

header h1 a {
  color: inherit;
  /* Inherit from parent h1 */
}

/* Navigation styling */
nav.secondary-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1rem 1rem 1rem;
}

nav.secondary-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
}

nav.secondary-nav li {
  display: inline-block;
  border-bottom: 2px solid transparent;
}

nav.secondary-nav li:hover {
  border-bottom-color: var(--blue);
}

nav.secondary-nav a:hover {
  color: var(--blue-dark);
  text-decoration: none;
  /* Keep no underline for nav */
}

nav.secondary-nav a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Active navigation state */
nav.secondary-nav li.active {
  border-bottom-color: var(--blue);
}

nav.secondary-nav li.active a {
  color: var(--blue);
}

.profile-image-content {
  max-height: 500px;
  max-width: 100%;
  margin: 1em auto;
  display: block;
}

main {
  margin-top: 1em;
}

/* Last post highlighting */
.last-post {
  border: 2px dashed var(--orange);
  padding: 1em;
  margin: 1.278em 0;
  background-color: var(--bg-0-soft);
  position: relative;
  transition: all 0.3s ease;
}

.last-post:hover {
  border-color: var(--orange-dark);
  background-color: var(--bg-1);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(213, 93, 14, 0.1);
}

.last-post::before {
  content: "Latest";
  position: absolute;
  top: -12px;
  left: 1em;
  background-color: var(--orange);
  color: var(--bg-primary);
  padding: 0.25em 0.75em;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.last-post h3 {
  color: var(--orange-dark);
  margin-top: 0.639em;
}

.last-post a {
  color: var(--orange);
  font-weight: 500;
}

.last-post a:hover {
  color: var(--orange-dark);
}

/* Footer styles */
footer {
  margin-top: 3rem;
  padding: 2rem 0 1rem 0;
  border-top: 1px solid var(--bg-3);
  text-align: center;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Responsive adjustments for mobile */
@media (max-width: 480px) {
  footer {
    margin-top: 2rem;
    padding: 1.5rem 0 1rem 0;
  }

  .social-links {
    gap: 1rem;
  }
}

#app {
  height: 100%;
}

.view {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
}